Coolshare Web Appilcation Framework

Coolshare Web Appilcation Framework

by Mark Qian
(Author/architect/developer)


Development status(3/26/2006): framework was done and I am still constructing the Coolshare Web Widzard.


Updating history:
  • 4/21/2006: demo of Bean Wizard
  • 5/15/2006: the complete date of Wizard will be at least 3 months later because of my load at work




  •  

    Introduction

    Coolshare Web Application Framework (called Coolshare below) is a new solution to integrate two front end tiers: browser tier and web tier. More and more web application frameworks have been introduced but the old problems still remain. The Coolshare is built on top of browser (or DHTML/javascript namespaces) and a web-tier framework (in this case, Struts).

    Coolshare provides you with the following main features:

    • High performance and scalability
      • There is no value loading in the web tier
      • No ActionForm construction
      • Minimized web traffic
    • 100% configable and flexible:
      • Entire Application GUI layout
      • Page layout and structure
      • Model and view of tiles
      • Field attributes
      • Client side validation
      • Inter-page relation
      • Inter-tile relation
      • Inter-field relation
    • High Usability:
      • A rich tag library including components like
      • - scrollable tables (with header frozen)
        - nestable tree tables
        - DragNDrop and savable trees
        
    • High maintainability:
      • No hard coding in web tier for regular page/tiles
      • No hard coding in browser tier for regular page/tiles
      • All the tiles are pluggable
      • Application is constructed and maintained in a visual environment, the wizard
    • High reusability:
      • Only one view per type shared by all entity/pojo
      • Components in all level are portable among application under Coolshare
    • Rapid and visible application construction and maintenance:
      • Majority of construction and maintenance are done in Wizard
    
     

    How does it work?

    Coolshare containers a variety of "tiles" that are couples of a view (a Custom tag) and a business object or a POJO object linked by the configuration files (XML). The Coolshare Framework consists of two sub frameworks: javascript framework and web framework.

    Javascript framework

    The javascript framework has following major functions:

    a. Handle all the requests and response. The requests are not sent directly from the source frame/window normally. Instead, they are sent asynchronizely and hiddenly. b. Handle events. All the GUI components in the framework screen never call any function directly. Instead, they issue events after they register the events. c. Handle client-side validation. All the client-side stage validation are specified in Tile configuration files. (more to be completed...)

    Web framework

    The Web framework has following major functions:

    a. Handle all the requests. The requests are processed and a map contains a set business objects is available to each action as a parameter entityMap like this public class SaveAction extends BasicAction { public String execute(HttpServletRequest request, HttpServletResponse response, Map entityMap) throws Exception { //You can invoke your business delegation here or do some customization //You can get entities sent from client using enityMap ... return FORWARD_OK; } But in most regular page (say contain an entity form or a table of entities), the action is empty like following package com.coolshare.webcomp.taglib.samples.bookstore.webapp.action.publisher; import com.coolshare.webcomp.common.action.BasicAction; public class PublisherEditAction extends BasicAction { } The web framework takes care everything! How does it know what is what? Refection:) (more to be completed...) b. Handle all the responses: rendering the view of each tile in the custom tag. Many frequently used tags are entity level such as form, table, tree. They represent one or a set of entities specified by configuration files. And not-entity GUI components will appear as POJO tiles in Coolshare's tile library such as list, combo checkbox and so on. All the pages contain only tiles (either entity tiles or POJO tiles) and there is only a single view (Coolshare custom tag) for pages shared by all pages. You will see "content" in most pages like following <html> <%@ include file="/pages/common/page_js.jsp" %> <%@ include file="/pages/common/common_header.jsp" %> <body BGCOLOR="#ffffff" onload="_fire(window, 'load')" onunload="_fire(window, 'unload')" onResize="_fire(window, 'resize')"> <tile:tileContainer> </tile:tileContainer> </body> </html> Then where is the page content specified? They are all in the page configuration file As you can see in the file, you can use different layout to archive what you want there. And custom tag "tileContainer" will dynamically render it. This also means that it is "PlugInable": you never need to worry about any conflict with other tiles. Hopefully, so far you can see a little bit about why this framework is called coolshare. See more detail in the "Configuration" section. (more to be completed...) c. Handle exception and pass them to the client (to be completed...)

    Web Wizard

    Interesting fact: the wizard itself is built with the Coolshare Web Framework. The Web Wizard has following functions:
    • Introspect a given Business Delegation
    •             A very cool feature the wizard support is you can include your business tier image
                  within a delegation class such as an EJBDelegation. The wizard will introspect
                  the class and generate a class configuration file like this.
                  This file will be loaded once when the business is initialized and stay in application level
                  to be shared by all the users.
                  The key point is There is no hard coded concrete class names of your business objects
                  appear anywhere in the web tier!
                  
                
    • configure all level of components: tab, page and tile in a visual (dragNdrop) environment
    •               The wizard will allow you to visually construct all the configuration files. Remember,
                    Configuration files are all and only place containing any concrete information
                    in the application. The application itself is nothing but a container.
                    
    • wire backend api to fields in tile so that field of each tile can be filled not only from http request but also backend data
    •               A difficult job working on a fully configable application is wiring in the xml configuration
                    files. Luckily, the wizard discover all the backend secrete for you. It uses reflection and
                    make all the public API listed in its IDE.
                    
    • reload the entire app back to the tool to maintain
    •               Maintenance and further development is so easy with the wizard.
                    (to be completed...)
                    
    • visually manage javascript listeners: register, event wiring and so on
    •               One very special feather of the framework is it allow you to definite your one
                    javascript events and handle outside of the framework and the framework will
                    dynamically render and execute them. (see detail in the Javascript Framework section).
                    
    
    (to be completed...)