Topic
  • 6 replies
  • Latest Post - ‏2012-11-16T09:18:33Z by SystemAdmin
SystemAdmin
SystemAdmin
2327 Posts

Pinned topic The best way to implement a Portal Application

‏2012-11-12T08:51:34Z |
Hello,
what i am looking for is some suggest to implement a Portal Application for my enterprise by using Worklight.

My "common" folder contains a Login.html that is the first page the employee sees. If the user logins correctly he would be redirect to Portal.html.

In this page the employee would see a list of his Application like the "Canteen Manager", "Holidays Summary", "My Attendance", "Car Pooling".
Each of these is a standalone-like application, but it is not correct to create a new Worklight Application in the same project cause there are some security issue on switching by an application to another (and i don't even know if it is possible).

My idea was to create inside my "common" folder a different folder for each application like "canteen" folder, "holidays" folder etc etc. and put inside of them all the necessary html/js/css files.

So i login once and then i can access all my applications.

Is there a better way?

Thanks for your replies.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: The best way to implement a Portal Application

    ‏2012-11-13T22:47:25Z  
    Alessandro,

    I'll check with our portal team to see if they have any suggestions; meanwhile have you seen this article?

    http://www.ibm.com/developerworks/mobile/library/mo-aim1208-worklight-portal-1/index.html

    Barbara Hampson, Manager, IBM Worklight
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: The best way to implement a Portal Application

    ‏2012-11-14T07:39:23Z  
    Alessandro,

    I'll check with our portal team to see if they have any suggestions; meanwhile have you seen this article?

    http://www.ibm.com/developerworks/mobile/library/mo-aim1208-worklight-portal-1/index.html

    Barbara Hampson, Manager, IBM Worklight
    Barbara,
    thank you for your reply, but we don't want to use WebSphere Portal.
    Just build a portal application for my enterprise by using Worklight and HTML5.

    Thanks.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: The best way to implement a Portal Application

    ‏2012-11-14T08:17:34Z  
    Barbara,
    thank you for your reply, but we don't want to use WebSphere Portal.
    Just build a portal application for my enterprise by using Worklight and HTML5.

    Thanks.
    I would do the following:

    • Get the jQuery Mobile Worklight Sample: https://www.ibm.com/developerworks/mobile/worklight/getting-started/#additional-resources

    • If you're not familiar with jQuery Mobile read a tutorial, here's one: http://www.ibm.com/developerworks/web/library/wa-jqmobile/

    • Go here: "Multi-page template structure": http://jquerymobile.com/test/docs/pages/page-anatomy.html

    • Every:

    
    <div data-role=
    "page" id=
    "foo"> [...] </div>
    


    Will be a different page. Make one for: "Canteen Manager", "Holidays Summary", "My Attendance", "Car Pooling", etc.

    • Use this to change between pages:

    
    $.mobile.changePage( 
    "#foo");
    


    • Use adapters to dynamically populate pages based on the user that is logged in.

    For example:
    show login page > adapter call > login('cnandreu', 123) > returns a token > change to main page > user clicks on "My Attendance" > adapter call > getAttendance(token, 'cnandreu', ...) -> populate "My attendance page" >

    You can read all about adapters here:
    https://www.ibm.com/developerworks/mobile/worklight/getting-started/#server-side-development

    Some notes:

    • Your html page should only contain markup, no application logic or styling.
    • Treat your javascript in a modular way ("Each of these is a standalone-like application")

    Here's an example:

    
    var myAttendanceModule = function () 
    {   var privateVar = 
    "Carlos", publicVar  = 
    "hello";   function privateFunction () 
    { console.log( 
    "Name: " + privateVar ); 
    }   function publicSetName (strName) 
    { privateName = strName; 
    }   function publicGetName () 
    { privateFunction(); 
    }   
    
    return 
    { setName: publicSetName, greeting: publicVar, getName: publicGetName 
    };   
    }();   
    //Usage   myAttendanceModule.greeting(); 
    //'hello' myAttendanceModule.setName(
    "cnandreu"); myAttendanceModule.getName(); 
    //Name: cnandreu
    


    http://blog.alexanderdickson.com/javascript-revealing-module-pattern

    You can store those modules in separate javascript files. For example: myAttendanceModule.js and include them in your main html file:

    
    <script src=
    'js/myAttendanceModule.js'></script>
    


    Closing notes:

    • Your html shouldn't change much, so it's okay to have multiple things there.
    • Your business logic will likely change, so make you you separate it in modules, files or something.
    • Never hard-code data, always make the user auth and get data from your servers either via adapters or regular ajax calls.

    Good luck.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: The best way to implement a Portal Application

    ‏2012-11-15T16:50:05Z  
    I would do the following:

    • Get the jQuery Mobile Worklight Sample: https://www.ibm.com/developerworks/mobile/worklight/getting-started/#additional-resources

    • If you're not familiar with jQuery Mobile read a tutorial, here's one: http://www.ibm.com/developerworks/web/library/wa-jqmobile/

    • Go here: "Multi-page template structure": http://jquerymobile.com/test/docs/pages/page-anatomy.html

    • Every:

    <pre class="jive-pre"> <div data-role= "page" id= "foo"> [...] </div> </pre>

    Will be a different page. Make one for: "Canteen Manager", "Holidays Summary", "My Attendance", "Car Pooling", etc.

    • Use this to change between pages:

    <pre class="jive-pre"> $.mobile.changePage( "#foo"); </pre>

    • Use adapters to dynamically populate pages based on the user that is logged in.

    For example:
    show login page > adapter call > login('cnandreu', 123) > returns a token > change to main page > user clicks on "My Attendance" > adapter call > getAttendance(token, 'cnandreu', ...) -> populate "My attendance page" >

    You can read all about adapters here:
    https://www.ibm.com/developerworks/mobile/worklight/getting-started/#server-side-development

    Some notes:

    • Your html page should only contain markup, no application logic or styling.
    • Treat your javascript in a modular way ("Each of these is a standalone-like application")

    Here's an example:

    <pre class="jive-pre"> var myAttendanceModule = function () { var privateVar = "Carlos", publicVar = "hello"; function privateFunction () { console.log( "Name: " + privateVar ); } function publicSetName (strName) { privateName = strName; } function publicGetName () { privateFunction(); } return { setName: publicSetName, greeting: publicVar, getName: publicGetName }; }(); //Usage myAttendanceModule.greeting(); //'hello' myAttendanceModule.setName( "cnandreu"); myAttendanceModule.getName(); //Name: cnandreu </pre>

    http://blog.alexanderdickson.com/javascript-revealing-module-pattern

    You can store those modules in separate javascript files. For example: myAttendanceModule.js and include them in your main html file:

    <pre class="jive-pre"> <script src= 'js/myAttendanceModule.js'></script> </pre>

    Closing notes:

    • Your html shouldn't change much, so it's okay to have multiple things there.
    • Your business logic will likely change, so make you you separate it in modules, files or something.
    • Never hard-code data, always make the user auth and get data from your servers either via adapters or regular ajax calls.

    Good luck.
    Thank you.

    I'm sorry i don't give you all my informations. I'm already using jQuery Mobile and adapters to implement login and other functions.

    I understand what you said about "every application is an html page", but maybe for the canteen i will need two or three html pages (one for the ingredients, one to invite guests etc. etc.) Do you suggest to make a multi-page html page or to create a folder for canteen and put inside all the html and js?
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: The best way to implement a Portal Application

    ‏2012-11-15T17:43:31Z  
    Thank you.

    I'm sorry i don't give you all my informations. I'm already using jQuery Mobile and adapters to implement login and other functions.

    I understand what you said about "every application is an html page", but maybe for the canteen i will need two or three html pages (one for the ingredients, one to invite guests etc. etc.) Do you suggest to make a multi-page html page or to create a folder for canteen and put inside all the html and js?
    "but maybe for the canteen i will need two or three html pages (one for the ingredients, one to invite guests etc. etc.) Do you suggest to make a multi-page html page or to create a folder for canteen and put inside all the html and js?"

    I would just do the following:

    
    <div data-role=
    "page" id=
    "login"> [...] </div>   <div data-role=
    "page" id=
    "index> [...] </div>   <div data-role=
    " page" id=
    "canteen-ingredients"> [...] </div>   <div data-role=
    "page" id=
    "canteen-invite"> [...] </div>   <div data-role=
    "page" id=
    "canteen-etc"> [...] </div>
    


    Then handle the business logic in separate JavaScript modules:

    
    <script src=
    'js/notACanteenModule.js'></script> <script src=
    'js/myCanteenModule.js'></script> <!-- handle events, etc 
    
    for: canteen-ingredients, canteen-invite and canteen-etc --> <script src=
    'js/unRelatedToTheModulesAbove.js'></script>
    
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: The best way to implement a Portal Application

    ‏2012-11-16T09:18:33Z  
    "but maybe for the canteen i will need two or three html pages (one for the ingredients, one to invite guests etc. etc.) Do you suggest to make a multi-page html page or to create a folder for canteen and put inside all the html and js?"

    I would just do the following:

    <pre class="jive-pre"> <div data-role= "page" id= "login"> [...] </div> <div data-role= "page" id= "index> [...] </div> <div data-role= " page" id= "canteen-ingredients"> [...] </div> <div data-role= "page" id= "canteen-invite"> [...] </div> <div data-role= "page" id= "canteen-etc"> [...] </div> </pre>

    Then handle the business logic in separate JavaScript modules:

    <pre class="jive-pre"> <script src= 'js/notACanteenModule.js'></script> <script src= 'js/myCanteenModule.js'></script> <!-- handle events, etc for: canteen-ingredients, canteen-invite and canteen-etc --> <script src= 'js/unRelatedToTheModulesAbove.js'></script> </pre>
    Ok cnandreu, this is a very good way to develop.

    Thank yous o much!