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.
Previous Page
