(Kind of) Generic Page Creation and Navigation based on JavaScript Definitions

Show and Tell
1

Hi,

this app does actually nothing :slight_smile:

Thanks: I got a lot of help from the FUSE team and others: hasselknippe, jake, 86fernandolins, skezo, duckers, till. Hope I did not forget anyone.

Scope:

Creating pages based on definitions in JavaScript. Navigation through the pages according to the definitions.

Details:

In JavaScript pages are defined. Each page has the following parameters:

  • background: “#546E7A”
    Set to a color value
  • title: “Set A Page 1”
    The title is used in the (optional) page header and the Main Navigation Page
  • headerVisible: “Visible” The page header can be Visible, Collapsed or Hidden
  • visibleInMainMenu: “Visible”
    If Visible, the page can be navigated to from the pop-up menu
  • swipeLeftEnabled: true
    Enable swiping to the right to navigate to another page
  • swipeLeftTarget: “SetA2”
    Specifies target page of the right swipe
  • swipeRightEnabled: false
    Enable swiping to the left to navigate to another page
  • swipeRightTarget: “”
    Specifies target page of the left swipe
  • buttonBackVisible: “Collapsed”
    A bottom on the bottom of each page: Visible, Collapsed or Hidden
  • buttonBackTarget: “”
    Taget page when clicking the button
  • egdeNavigatorEnabled: true
    True/false to enable/disable EdgeNavigator (a Sidebar) on the page

Further functions:

  • For debugging purposes on each page the page definition is listed. It can be enabled/disabled by a switch on the Main Navigation Page

  • A UserEvent is used to enable/disable the Main Menu (behind the 3 dots)

Solved issues:

  • Edge Navigation (Sidebar): This is the biggest headache

    Sidebar does not disappear when clicking outside the EdgeNavigation Panel. Also, when clicking on the button and goind back to the page, the sidebar is still there. A toggle does not work, as it would disable the Sidebar forever . . . Also, using HitTestMode=“LocalBoundsAndChildren” causes other side effects, like other element are not clickable anymore (like the pop-up menu).

    This has been solved by re-arranging the whole Edge Navigator.

  • How to exit the app from JavaScript or .ux? E.g. add an entry in the Pop_up Menu: ‘Exit’. What should it trigger? Meanwhile I managed to use the Exit/HomeScreen example from Bolav: https://github.com/bolav/fuse-backbutton-trigger

  • Why is MainPage in the pop-up menu not on top? It is the first item in the definition. Other post explains this. Items build with ‘Each’ are last, independent of their position in the ux. Just by putting it into a container solves this.

  • How to get a nice frame around the pop-up menu? Currently it looks a bit strange. This was due to different sizes of frame and contents. Could be fixed by letting the layout define sizes itself.

Link: https://drive.google.com/file/d/0B4oWw-0WhsI8NHNuc2xkRzhlbVU/view?usp=sharing

2

Very cool :slight_smile:

3

New version with many updates: https://drive.google.com/file/d/0B4oWw-0WhsI8NkFmTkdWN1p6Nzg/view?usp=sharing

Thanks for input on

Changes:

  • Clean-up of .ux; splitting .ux in several modules (Main, Sidebar, Resources)
  • Toast messages when page is changed. They disappear after a timeout. A toast can also ask for a confirmation (in case of Exit App pressed in pop-up menu); no timeout in this case.
  • Pop-up menu entries animated
  • Sidebar is now working as wanted. Some animations added.
  • Exit App from pop-up menu (Note: works on Android, not in preview)
  • Android back-button will also result in Exit App (Note: not available in preview).

Would be nice to get feedback on what could be simplified or done in smarter ways.

4

Great job you did here :slight_smile:

Did you also think to introduce the following tiny behavior?

  • When you press anywhere near the left edge of the screen, the sidebar pop in just a bit while your not swiping.

This is something that gmail and slack for mobile do for example…

5

Thanks!

The sidebar caused me many headaches; in the end I was happy with the way it currently looks, and I do not plan to do more on this, sorry. But if you manage, would be nice, if you share.

6

Yes, I’ll share it here if I manage it! :slight_smile: