Jump to content

Recommended Posts

  • Moderators

Routing is the link between specific url's and specific functionality in an app, so f.i.

  • https://<server>/index.html           starts up your app in the browser as per normal
  • https://<server>/login                    executes a specific view (f.i a login form)

Smart per default produces single page app's, without routing functionality

There are a couple of strategies which can be followed to implement routing (and which will work to some extent) :

use # formatted urls. 

Browsers have a 'hashchange' event built in, which fires every time a url changes, as long as it contains a '#'
This can be used to implement routing.

Without going into the specifics, the end-result will end up looking like

  • https://<server>/index.html#                  for the main form
  • https://<server>/index.html#/login         for the login form

See example here. Not exactly what I want

Use url-parameters 

  • https://<server>/index.html                       as per normal
  • https://<server>/index.html?form=login   for the login form

Not liking this syntax either

Do something crazy like setting up a mutation observer on the url

Do the routing not on the client but go server-side. 
This involves programming a dedicated server (php, node) which intercepts all url requests and generates output which then needs to be rendered client-side.
While not impossible, it doesn't really gel with Smart's infrastructure

Divide up the app in multiple sub-projects, so that there is only 1 form per sub-project.
This is actually not a bad idea, and I've done that a couple of times. It just requires some development organisation.

Or use the browsers history object. 
This works almost out of the box and has the advantages that it also includes the browsers back-button.

  • https://<server>/index.html              as per normal
  • https://<server>/login                       for the login form 

The problem with the last entry is that when a user refreshes the /login page, or goes directly to it, a 404 page-not-found error will be generated 
This can be intercepted by modifying some server setting, usually entries in the .htaccess file.
Not something I like to do as it introduces another dependency.

The demo here is built using the history object and eliminates the 404 page-not-found problem.

It has the following routing structure :
Form1 :  /index.html
Form2 : /Topic-01.html
Form3 : /Topic-02.html

Switching back and forth between these forms and url's works fine both in code or using the browsers back-button. Also refreshing or navigating directly (by typing in the page url in the address bar) works fine.

My satisfaction level with this approach is 90%. There are a couple of things I don't like, but can live with. Might be able to improve on them later on.

Salient code

procedure TApplication.ApplicationStarting;
begin
  browserapi.window.onpopstate := procedure(e:variant)
  begin
    case browserapi.window.location.pathname of
      '/Experiments/routing/www/' :              Application.GoToForm('Form1');
      '/Experiments/routing/www/index.html' :    Application.GoToForm('Form1');
      '/Experiments/routing/www/Topic-01.html' : Application.GoToForm('Form2');
      '/Experiments/routing/www/Topic-02.html' : Application.GoToForm('Form3');
    end;
  end;

  TW3Dispatch.WaitFor([FormByName('Form1'),FormByName('Form2'),FormByName('Form3')], procedure ()
  begin
    case browserapi.window.location.pathname of
      '/Experiments/routing/www/Topic-01.html' :
          FormByName('Form1').OnActivate := lambda Application.GoToForm('Form2'); end;
      '/Experiments/routing/www/Topic-02.html' :
          FormByName('Form1').OnActivate := lambda Application.GoToForm('Form3'); end;
    end;
  end);

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...