Topic
  • 7 replies
  • Latest Post - ‏2013-01-08T14:02:21Z by SystemAdmin
MuraliK,Meduri
MuraliK,Meduri
50 Posts

Pinned topic Query in multipage application

‏2013-01-03T12:09:23Z |
Hi Team
We fellinto a typical different type of problem. we are developing a application where we have created a number of html files. And the startup page is index.html. When we click on any button in index.html, we will be taking the user to page2.html, and from there page3.html, page4.html ... and so on. Its a has many number of pages.

But when iam going thrpugh the getting started of WL, there they have mentioned only 2 ways
1) Having multiple divs in a dom, and navigate from one to another (which is not possible here)
2) $(containerSelector).load(filepath, callbackfunction)

Is it not possible to take the user from index.html to directly page2.html, page3.html ... insted of using the 2ns way?
What are the drawbacks if we do like that?
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Query in multipage application

    ‏2013-01-04T13:08:54Z  
    "1) Having multiple divs in a dom, and navigate from one to another (which is not possible here)"
    I highly recommend you structure your application as a single page app with multiple divs, may I ask why it's not possible for your use-case?

    If you want to use multiple pages jQuery Mobile seems to have solved that with the following function:

    
    $.mobile.changePage( 
    "about/us.html", 
    { transition: 
    "slideup"
    } );
    

    http://jquerymobile.com/test/docs/api/methods.html

    You can use that to: "take the user from index.html to directly page2.html, page3.html". I imagine there are other 3rd party solutions out there if you don't want to use jQuery Mobile, but Worklight as far as I know doesn't provide something to work with multiple pages out of the box.
  • MuraliK,Meduri
    MuraliK,Meduri
    50 Posts

    Re: Query in multipage application

    ‏2013-01-04T16:04:35Z  
    "1) Having multiple divs in a dom, and navigate from one to another (which is not possible here)"
    I highly recommend you structure your application as a single page app with multiple divs, may I ask why it's not possible for your use-case?

    If you want to use multiple pages jQuery Mobile seems to have solved that with the following function:

    <pre class="jive-pre"> $.mobile.changePage( "about/us.html", { transition: "slideup" } ); </pre>
    http://jquerymobile.com/test/docs/api/methods.html

    You can use that to: "take the user from index.html to directly page2.html, page3.html". I imagine there are other 3rd party solutions out there if you don't want to use jQuery Mobile, but Worklight as far as I know doesn't provide something to work with multiple pages out of the box.
    when i say its not possible here, ours is a huge application, if i keep every page as a div in a single dom, it does take lot of time to load,

    And when it comes to second option, we have to use the Dojo mobile, not the jquery mobile. But if you read the geting started they said, if we use the multiple pages, then we should not go from one page to another, if we go like that we will loose the WL frame work which will get initialized at the time of loading the index.html
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Query in multipage application

    ‏2013-01-08T13:10:58Z  
    when i say its not possible here, ours is a huge application, if i keep every page as a div in a single dom, it does take lot of time to load,

    And when it comes to second option, we have to use the Dojo mobile, not the jquery mobile. But if you read the geting started they said, if we use the multiple pages, then we should not go from one page to another, if we go like that we will loose the WL frame work which will get initialized at the time of loading the index.html
    I do not think that Worklight is a good solution for a mobile site to be honest. Like you say, the issue is that you either have to download the framework with every page or if have one large file. I am looking at this at the moment and the best I have come up with so far is for having multiple pages is to have an application shell, which is basically a simple HTML file with one div. I then replace the content of this div each time a button is pressed etc. This way, the framework is always there, but the content can be replaced on each page. This div is populated by JQuery mobile pages page1.html, page2.html etc. From what I can see this works, the only problem is that things like JQM headers and footers will be refreshed with each page, unless you make a custom header rather than use jQuery of course. I have only just started on this and am not sure the affect it will have on navigation and persistence yet.
  • raanan
    raanan
    50 Posts

    Re: Query in multipage application

    ‏2013-01-08T13:29:16Z  
    I do not think that Worklight is a good solution for a mobile site to be honest. Like you say, the issue is that you either have to download the framework with every page or if have one large file. I am looking at this at the moment and the best I have come up with so far is for having multiple pages is to have an application shell, which is basically a simple HTML file with one div. I then replace the content of this div each time a button is pressed etc. This way, the framework is always there, but the content can be replaced on each page. This div is populated by JQuery mobile pages page1.html, page2.html etc. From what I can see this works, the only problem is that things like JQM headers and footers will be refreshed with each page, unless you make a custom header rather than use jQuery of course. I have only just started on this and am not sure the affect it will have on navigation and persistence yet.
    A Worklight application is based on a single page application (SPA).
    SPA is a well known approach to heavy application, where you need to load and parse common resources (JavaScript / CSS) only once.
    With Worklight, if you load a new page into the browser, you lose the Worklight context created on the first page of the application.
    Dojo, jQuery, jQuery Mobile and other frameworks have solved the issue of loading content (HTML, CSS, JavaScript) into the single page.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Query in multipage application

    ‏2013-01-08T13:50:21Z  
    • raanan
    • ‏2013-01-08T13:29:16Z
    A Worklight application is based on a single page application (SPA).
    SPA is a well known approach to heavy application, where you need to load and parse common resources (JavaScript / CSS) only once.
    With Worklight, if you load a new page into the browser, you lose the Worklight context created on the first page of the application.
    Dojo, jQuery, jQuery Mobile and other frameworks have solved the issue of loading content (HTML, CSS, JavaScript) into the single page.
    The problem is that you end up with a large Javascript, HTML and CSS file being downloaded at the same time as the Worklight Framework which is not exactly small, when this lot comes through a GSM network, it can be be very slow. It is also difficult to manage one large file. If you can split it up, it is likely to be quicker and easier to manage.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Query in multipage application

    ‏2013-01-08T13:56:00Z  
    The problem is that you end up with a large Javascript, HTML and CSS file being downloaded at the same time as the Worklight Framework which is not exactly small, when this lot comes through a GSM network, it can be be very slow. It is also difficult to manage one large file. If you can split it up, it is likely to be quicker and easier to manage.
    There are some very large apps which use single page design, ZenDesk for one ( http://techcrunch.com/2012/11/30/why-enterprise-apps-are-moving-to-single-page-design/ ). In fact many people consider single page apps to be more performant, because relevant content is only downloaded once. I think it does require a different way of thinking about your app though, and how to componentize and organize that app as compared to a traditional web app.
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: Query in multipage application

    ‏2013-01-08T14:02:21Z  
    There are some very large apps which use single page design, ZenDesk for one ( http://techcrunch.com/2012/11/30/why-enterprise-apps-are-moving-to-single-page-design/ ). In fact many people consider single page apps to be more performant, because relevant content is only downloaded once. I think it does require a different way of thinking about your app though, and how to componentize and organize that app as compared to a traditional web app.
    Don't get me wrong, this is fine when the application is preloaded, but we have used Worklight to make a mobile website and we faced exactly this issue and have had to use lots of caching solutions as a result.