JSP Libraries and AJAX - jMaki widgets

(Page 4 of 5 )

Here, you can see the JSP code at the left and the Palette at the right. There are a lot of jMaki widgets in the palette.

jMaki has lots of widgets for Dojo, Google, Yahoo and Flickr. Using Flickr widgets, you can create captcha, word art, and search for images very easily. Let's create an image search using jMaki's Flickr widget. Just drag the widget from the palette and drop it into your JSP page. Now save the project, build and run. A browser will be opened as below.

Enter some value in the edit box and click Search. It will get the images from Flickr using AJAX. I entered Toys as the tag and clicked search;, below is the output.

Here is the code -

<div class="main">
    <div class="leftSidebar">

        Sidebar Content Here

    </div> <!-- leftSidebar -->

    <div class="content" style="height:400px">

        <a:widget name="flickr.search" 
            args="{
            topic:'flickrSearch', 
            columns:3, 
            count:9
            }"
            service="/xhp"/>

    </div> <!-- content -->
</div>

Here is a nice Yahoo slide bar for you.

<a:widget name="yahoo.slider" />

Just add the above tag or drag it from palette. The output would be a nice simple slide bar.

Now add a Tabbed View widget from the palette in your code. The code would be as shown here.

<div class="content" style="height:400px"> 
    <a:widget name="yahoo.tabbedview"
        value="{tabs:[
        {label:'My Tab', content: 'Tab 1 Content'},
        {label:'My Tab 2', content: 'Tab 2 Content'}
        ]
        }" />

</div> <!-- content -->

You can change the labels here from 'My Tab' to anything you need. You can also have as much tabs as you need. The above code will create two tabs with labels and contents as below.

Next: jMaki Menu, Data Table and More >>
 

More JavaScript Articles
More By Mamun Zaman

Comments On: JSP Libraries and AJAX

>>> Be the FIRST to comment on this article!