Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Yahoo's Rich Web UIs for Java Developers : Page 3

Java developers who develop web applications with server-side frameworks often don't have the JavaScript expertise to create rich user interfaces. Learn how Yahoo User Interface (YUI) can help bridge that gap.


advertisement

Web Application Design

At this point, a Java developer may have a couple of questions regarding the myapp example. Does using YUI eliminate the need to write HTML? Is this library like the Java Swing API? Sorry, but the answer to both questions is "No." The previously described application uses HTML pages for its basic UI elements. However, every page will be backed by JavaScript code, which uses YUI and other JavaScript libraries as the application demands. YUI handles events raised by the page's UI elements, interaction with the AJAX server, pagination, and so on.

Table 1 offers class design principles for your web applications. Assuming your application has two pages, and each page has various UI elements, the HTML and JavaScript classes should work as described in Table 1.

Table 1. HTML and JavaScript Classes for Your Application
HTML and JavaScript Classes Description
/cxt/page1/Page1.html UI elements, layout
/cxt/page1/page1.css Style sheet for page1
/cxt/page1/page1.js Main class for page1. Initialize components, register events, deal with method callbacks, and perform server interaction.
/cxt/page1/page1_util.js Utility methods applicable to page1
/cxt/page1/page1_datatable.js Abstraction of a DataTable instance used in page1
/cxt/page2/Page2.html UI elements and layout for page2
/cxt/page2/page2.js Main class for page2
/cxt/shared/js/util.js Common utility methods
/cxt/shared/js/myapp-datasource.js Customized DataSource
/cxt/shared/js/myapp-connection.js Customized server connection class
/cxt/shared/css/myapp-table-skin.css CSS properties for DataTable



If your application is more complicated than simple pages with a rich user interface, you should probably consider a different strategy for the class design.

More to Come

You now should have an understanding of what YUI can contribute to your applications, the OO design approach for developing web pages and classes, best practices for developing with JavaScript, and how to write your own classes and inherit a class to modify a behavior.

The next installment builds on this knowledge with an examination of YUI layouts, basic widgets, event handling, and server interaction. Stay tuned.



Narayanan A.R. is a passionate advocate of test-driven development, agile methodologies, Java technology, and design patterns. He has several years of experience in software design and development using Java technologies.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap