Home arrow JavaScript arrow Page 4 - JSP Libraries and AJAX
JAVASCRIPT

JSP Libraries and AJAX


In the first part of this article we learned about AJAX techniques and using AJAX with PHP and JSP. In this part we will try to use some advanced JSP tag libraries to develop feature-rich web applications using AJAX.

Author Info:
By: Mamun Zaman
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
August 29, 2007
TABLE OF CONTENTS:
  1. · JSP Libraries and AJAX
  2. · AjaxTags Tags
  3. · jMaki
  4. · jMaki widgets
  5. · jMaki Menu, Data Table and More

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials