Components

Components are UI elements of your application (button, loginbox, header, footer...). Physically each component is a folder with a html template, code and config files. Template file is required, others are optional. All components separated by component sets. Typical folder structure:

src
 |
 \-- components
      |
      |-- myCompanyComponentSet
      |    |--button
      |    \--...
      |
      \-- myProjectComponentSet
           |--button
           \--...

Each component's folder can contain:

  • template.html - html/css file (in real you may use any tags):
    <style>
        /* use "~" to make CSS class name local for this component */
        .~container
        {
            /* use "~" to make link to this component's support folder */
            background-image: url(~/bg.png);
        }
    </style>
    
    <!-- all element's ID will be local automatically -->
    <div id="container" class="~container">
        <!-- HTML -->
        <!-- use haq prefix to insert imported component: -->
        <haq:button id="bt" text="Click me!" />
    </div>
  • Server.hx - server code class:
    class Server extends BaseServer // use BaseServer to autodetect base class
    {
        function init() // called after all components created
        {
            // use page.isPostback to detect mode if need
            // (false => render, true => process event handler during ajax call)
            
            // use jQuery-like q() method to access html:
            q("#container>img").attr("src", "/images/test.png");
            
            // for safety you can use template() macro:
            template().container.find("img").attr("src", "/images/test.png");
    
            // global objects can be accessed via page object
            var admin = page.db.orm.users.getByLogin("admin");
            page.cookie.set("userID", admin.id);
        }
    
        function preRender() // called before render component's html to output
        {
            // here page.isPostback is false
        }
    
        function container_click(t, e) // example of the event handler
        {
            // here page.isPostback is true
        }
    }
  • Client.hx - client code class:
    class Client extends BaseClient // use BaseClient to autodetect base class
    {
        function init() // called after all components created
        {
            // use jQuery-like q() method to access html:
            q("#container>img").attr("src", "/images/test.png");
            
            // for safety you can can use template() macro:
            template().container.find("img").attr("src", "/images/test.png");
            
            // global objects can be accessed via page object
            var viewer = page.cookie.get("viewer");
        }
        
        function container_click(t, e) // example of the event handler
        {
            // your code
        }
    }
  • support - folder for your component's support files (images, sounds...);
  • config.xml - component's config file:
    <config>
        <!-- component can extends another -->
        <extends component="components.haquery.button" />
    
        <!-- you must import components to use in your template.html -->
        <import component="components.haquery.*" />
        <import component="components.myCompanyComponentSet.*" />
        <import component="components.myProjectComponentSet.*" />
    </config>

You can create set's config.xml file to specify default params for all components of the set. That file must have a path like src/components/myCompany/config.xml.

When you use component in the page or in the another component all specified tag's attributes values will be loaded to the exists Server class fields.

version #202, modified 2013-01-30 12:42:23 by yar3333