Friday, 20 December 2013

AriaTemplates: PageEngine for navigation

Hello,

Today I would like to talk about some interesting aspect of AriaTemplates aka AT. Navigation is handled in AT using a mechanism called PageEngine. We will have a small demo of PageEngine today/

Read more Why AT?

Architecture of PageEngine





As the diagram says PageEngine uses pageId to navigate to different pages. Each page has to be defined in a Pagedefinition which points to different templates and scripts involved in that view. Module controllers can raise an event to trigger the navigation. You can also see the presence of data & _data objects in template and module controllers.

How to create a sample navigation application?

To begin with create your nidex.html by including AT library. You have to create an instance of PageEngine after loading of Aria singleton and invoke start method by passing the default BasePageProvider.

index.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>PageEngine Example</title>
    <script type="text/javascript" src="/aria/ariatemplates-1.4.13.js"></script>
</head>
<body>
  <div id="rootContainer"></div>
  <script type="text/javascript">
    aria.core.AppEnvironment.setEnvironment({
      defaultWidgetLibs : {
        "embed" : "aria.embed.EmbedLib"
      }
    });
    Aria.load({
      classes: [
        "aria.pageEngine.PageEngine",
        "aria.pageEngine.pageProviders.BasePageProvider"
      ],
      oncomplete: function(){
        var pageEngine = new aria.pageEngine.PageEngine();
        pageEngine.start({
          pageProvider : new aria.pageEngine.pageProviders.BasePageProvider({
            siteConfigLocation : "guides/pageengine/example/site.json",
            pageBaseLocation : "guides/pageengine/example/pages/",
            homePageId : "myhome"
          })
        });
      }
    });
  </script>
</body>
</html>

Site Configuration

PageEngine uses site.json to configure the application. You can define global data, global modules etc here.

site.json
{
    containerId: 'rootContainer',
    appData: {},
    navigation: 'hash',
    commonModules : {
        mymodule: {
            classpath: 'guides.pageengine.example.controller.MyModule',
            priority: 2
        }
    }
}

Page Configuration

Just like site.json is for site configuration, there is a page_name.json for each page. This json file define the page specific information such as templates, modules etc.

Myhome.json
{
    pageComposition: {
        template : "guides.pageengine.example.view.Base",
        placeholders : {
            "body" : {
                "template" : "guides.pageengine.example.view.Home",
                "module" : "common:mymodule"
            }
        }
    },
    pageId: "myhome",
    title: "My Home Title"
}

Nextpage.json
{
    pageComposition: {
        template : "guides.pageengine.example.view.Base",
        placeholders : {
            "body" : {
                "template" : "guides.pageengine.example.view.Next",
                "module" : "common:mymodule"
            }
        }
    },
    pageId: "nextpage",
    url: "No_meaning_Data_lost_if_you_refresh",
    title: "Next Page Title"
}

Templates

Each page configuration will have a template and placeholders section for embedded templates and associated modules.

Base.tpl
{Template{
    $classpath: "guides.pageengine.example.view.Base"
}}
    {macro main()}
        <h1>Welcome to OOTY</h1>
         {@embed:Placeholder {
          name : "body"
        }/}        
    {/macro}
{/Template}

Home.tpl
{Template{
    $classpath: "guides.pageengine.example.view.Home",
    $hasScript: true
}}
    {macro main()}
        {var msg=5/}
        <button {on click {fn: "testMethodScript"}/}>Click Me</button>
    {/macro}
{/Template}

Next.tpl
{Template{
    $classpath: "guides.pageengine.example.view.Next",
    $hasScript: false
}}
    {macro main()}
        {var key = data.homekey /}
        <h1>${key}</h1>        
    {/macro}
{/Template}

You may find scripts and css definitions inside each template.

HomeScript.js
Aria.tplScriptDefinition({
    $classpath: "guides.pageengine.example.view.HomeScript",
    $constructor: function(){console.log("<<inside script constructor>>")},
    $prototype: {
        testMethodScript: function() {
            this.$json.setValue(this.data, "homekey", "Nice to meet you!");            
            this.moduleCtrl.testMethod();            
        }
    }
});

Module Controllers

Modules takes the responsibilities of controller in the AT framework in the context of MVC. For each module controller there should be an associated Interface to ensure type safety. The interface behaves same as that of Java where you will not write the method body; it will just be defined.

IMyModule.js
Aria.interfaceDefinition({
    $classpath: "guides.pageengine.example.controller.IMyModule",
    $extends: "aria.templates.IModuleCtrl",
    $events : {
        "navigate" : {
            description : "Raised navigate event",
            properties : {
                "page" : "Page description."
            }
        }
    },
    $interface: {
        testMethod: function() {}
    } 
});

MyModule.js
Aria.classDefinition({
    $classpath: "guides.pageengine.example.controller.MyModule",
    $extends: "aria.templates.ModuleCtrl",
    $implements: ["guides.pageengine.example.controller.IMyModule"],
    $constructor: function(args){
        this.$ModuleCtrl.constructor.call(this);
    },
    $prototype: {
        $publicInterfaceName: "guides.pageengine.example.controller.IMyModule",
        testMethod: function(){
            console.log("data passed from template script >> "+this._data.homekey);                

            this.$raiseEvent({
                name : "navigate",
                page : {
                    pageId : "nextpage"
                }
            });    
        }
    }
});


You may not find it interesting. But still I would suggest to give a try. Happy coding!


1 comment:

  1. hai pháp khí này đã đến tình trạng linh khí.
    đồng tâm
    game mu
    cho thuê phòng trọ
    cho thuê phòng trọ
    nhac san cuc manh
    tư vấn pháp luật qua điện thoại
    văn phòng luật
    số điện thoại tư vấn luật
    dịch vụ thành lập doanh nghiệp
    - Aizzz, mình phải nghĩ cách có một nhãn vật mới được, nếu không sau này không thể phát huy uy lực lớn nhất của Vô Thượng Khốn tiên pháp.

    Bây giờ điều duy nhất Nhạc Thành có thể xác định chính là pháp nhãn của Vô Thượng Khốn tiên pháp có vấn đề, nhất định phải có một bảo vật làm nhãn trận thì mới có thể phát huy uy lực lớn nhất. Cũng như là mắt cảu con người vậy.

    Chỉ là Nhạc Thành cũng biết chuyện này không cần gấp, cần phải có cơ duyên, cơ duyên đến thì mọi chuyện đều có thể giải quyết.

    - Hôm nay nên đối phó với Tuyết Lâm bang và Kiêu Hùng bang, cũng là cơ hội tốt để rèn luyện thực lực của mình.

    Nhạc Thành nhìn sắc trời mà lẩm bẩm nói.

    Với Nhạc Thành, thực lực của hắn bây giờ đối phó với Tuyết lâm bang và Kiêu Hùng bang thì quả thực rất dễ dàng, một Tuyết Lâm bang và một Kiêu Hùng bang ở đấu khí học viện kỳ thực không đáng để Nhạc Thành hao tổn tâm trí như vậy. Nhạc Thành chỉ muốn nhân dịp này trấn áp Kiêu Hùng bang và Tuyết Lâm

    ReplyDelete