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

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
    ACCEPTED ANSWER

    Re: The best way to implement a Portal Application

    ‏2012-11-13T22:47:25Z  in response to SystemAdmin
    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
      ACCEPTED ANSWER

      Re: The best way to implement a Portal Application

      ‏2012-11-14T07:39:23Z  in response to SystemAdmin
      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
        ACCEPTED ANSWER

        Re: The best way to implement a Portal Application

        ‏2012-11-14T08:17:34Z  in response to SystemAdmin
        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
          ACCEPTED ANSWER

          Re: The best way to implement a Portal Application

          ‏2012-11-15T16:50:05Z  in response to SystemAdmin
          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
            ACCEPTED ANSWER

            Re: The best way to implement a Portal Application

            ‏2012-11-15T17:43:31Z  in response to SystemAdmin
            "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
              ACCEPTED ANSWER

              Re: The best way to implement a Portal Application

              ‏2012-11-16T09:18:33Z  in response to SystemAdmin
              Ok cnandreu, this is a very good way to develop.

              Thank yous o much!