Debugging publish/subscribe

Tips to debug publish/subscribe in jMaki[Read More]

Posted at 11:51AM May 31, 2007 by Manveen Kaur in Web 2.0  |  Comments[0]

Changing the theme for your jMaki application

If you are using Netbeans IDE, you can right click on the editing window and navigate to jMaki>themes-> to choose a theme.

How do I create my own theme?
Go to resources->css->themes and add a new theme.

Now simply edit config.json to point to your new theme.
The themes cascade to all the widgets (hence the c for cascading in css). In your browser, use Tools->Clear private data beore applying a theme to see all the refreshed changes.

The complete style guide!

Posted at 01:38PM May 29, 2007 by Manveen Kaur in Web 2.0  |  Comments[0]

On how to alter a jMaki widget

I've been playing with jMaki recently. Now that I've become more familiar how to write simple applications, I want to be more ambitious and see if I can alter an existing widget to suit my style.

If you are working with Ajax widgets, you would know that each of the widgets has a style sheet associated with it.

In an earlier blog, I talked about creating an application with a menubar. The glue code for this already exists that make life simpler. But this blog is not about glue code, it's about altering the existing widget.

The things I am interested in altering in my jMaki.menu application are:

• I want the font of the menubar to change
• I want to remove the scrollbar that appears on the right side page when a menu item is clicked

How can I do this? I need to learn a little bit of CSS. Don't believe me? Here's CSS in Action.

CSS stands for Cascading Style Sheets and is used to control the style and layout of multiple Web pages all at once. Since each widget has a css file associated with it, if we alter the css, it should immediately show up in the widget. With that clear in mind, lets try to alter the font of the menu options.

Look under your webapplication's web->resources-> this has a set of widgets available to the webapplication. Now since we're working with the menu application, we need to go to jmaki->menu directory.

Here we should see the following: component.css, component.html, and component.js.

• To alter the font of the menu options to arial, we add the font-family: arial; property-value pair to the .jmakiMenuBar Selector. We can even add comments to css as below!

  .jmakiMenuBar {
      width: 100%;
      font-size:12px;
      /* change font to arial */
      font-family: arial;
      height: 20px;
      background:#3399FF;
      text-align:bottom;
  }
  

• To remove the auto overflow scrollbar that appears if your element list is too long, we need to edit the jmaki->dContainer's component.css, simply remove the overflow property-value pair. Here is what the final css code looks like-
  

  .jmakiDContainer {
  }
  

Want to make more changes? CSS-on....

Posted at 03:48PM May 21, 2007 by Manveen Kaur in Sun  |  Comments[0]

jMaki series - 2

A couple of days back, we learnt how to install jMaki and get started. Now we're ready to do something more fruitful. Let's say we want to have a menu bar which will bring up different pages based on the option you select.

We create a new Web application. Enable jMaki support from the wizard.

Choose a standard single view and drag and drop the jMaki.Menu under the first div or the main area.

Drag and drop a jMaki.dcontainer on the second div. The reason we are having the dContainer is because all the actions with the Menu will result in changes in the dContainer. The glue code for the two to work together already exists, so we won't have to do anything else, which makes things simpler. Finally we create new jsp's for the associated actions in the same project. They should be at the same level as the main index.jsp. It's easy to do with NetBeans. Just click on the project in the project tree and create New->jsp.

This is what the final code will look like:

    <div class="outerBorder">
        
        <div class="header">
            <div class="banner">Doing something fruitful</div>
            <br>            
            <div class="subheader">
                <div>
                    <a:ajax name="jmaki.menu"
                            value="{columns: [
                            {label: 'Strawberry',
                            menuItems: [
                            {label:'ripe', url:'ripe.jsp'},
                            {label:'unripe', url:'unripe.jsp'}
                            ]},
                            {label: 'Apples',
                            menuItems: [
                            {label:'Red', url:'red.jsp'},
                            {label:'Green', url:'green.jsp'}
                            ]}
                            ]}" />
                </div>
            </div> <!-- subheader  -->

        </div> <!-- header -->

        <div class="main">

            <a:ajax name="jmaki.dcontainer"/>
                
        </div> <!-- content -->
    </div> <!-- main -->

    </div> <!-- outerborder -->

Posted at 12:51PM May 15, 2007 by Manveen Kaur in Sun  |  Comments[0]

jMaki series - 1

There has been quite some buzz about jMaki and Web 2.0 this Java One. There were atleast 7 or 8 talks/sessions or BoFs! That sure is a lot!

Well I've been trying to get started with using jMaki in my own space too. I thought I'd write my blogs as a series of journals as I go along.

First we need to setup the environment. We need an IDE, a jMaki plugin, and an application server.

Here are my preferences-

• IDE: Netbeans (ofcourse!) I got NetBeans 5.5.1 Release Candidate, though its soon to be replaced with the much better version 6. But 5.5.1 will do for now for me.
• IDE Plugin: NetBeans jMaki Plugin I downloaded the NetBeans Ajax Update center module and installed it in NetBeans. Once installed, I'll have access to the latest jMaki builds from the NetBeans IDE.
• Server: GlassFish (ofcourse :))

Now using the update center, I installed jMaki plugin in my NetBeans IDE. There is also a screencast that you can watch.

Now I'm all set to start writing applications using jMaki.

Posted at 02:56PM May 09, 2007 by Manveen Kaur in Sun  |  Comments[0]