history.pushState
. For instance, GMail allows the user to bookmark emails and use the navigation buttons (back and forward) while, technically, everything is going on on a single page. In this way, the user gets the best of two worlds, the speed of SPA and the expected behaviour of a multipage application. Starcounter has built in support for creating SPA applications that supports multiple pages./MultiplePagesDemo/emails/123
). In this way, each particular email works as a separate web page. However, when you step between the emails in the list on the left, you don't want the browser to load a completely new page. This would make the email application slow and any DOM that is outside of the email page (i.e. the page inside the main page) would be reset.Mails
element is used to display a list with links to their corresponding email. The Focused
element is filled with a single Focused.json
.Focused.json
has its own Html file which will be inserted into the MailsPage
in a SPA manner.Handle.GET
operations. One to retrieve the master, MailsPage, and the other to retrieve specific emails.Handle.GET("/MultiplePagesDemo/mails"...
, returns the master json MailsPage. It checks if there is a current session and if so uses it instead of creating a new. It uses the first mail, if any, as the focused mail.Handle.GET("/multiplepagesdemo/mails/{?}"...
, returns a MailsPage as well. It does however specify which email should be focused. By relying on Self.GET
we call the first handler which includes the functionality to check for exisiting sessions.Focused.html
referenced by Focused.json
simply displays the title and content of a email stored in Focused.json
. It does not have to care about the rest of the page and would work even as a stand-alone page.MailsPage.html
contains the full page to display. It lists all the mails as linked text. The most important part is the <template is="imported-template"
which loads the Focused element of MailsPage.json
with its own html file./MultiplePagesDemo/mails
the system will create a session and return the MailsPage.json. When a user then clicks on a specific mail the system will retrieve the MailsPage.json once again but as the client already has it cached there is no need to send it again and the page will not reload. The only differing element, Focused
, will just be replaced.