Wanted: example of multiple UI views and back navigation

[jeremiahlee]

Can anyone point me to a good example of having multiple views in an app and using the physical back button to go to previous screens instead of exiting the app?

An example of the type of interaction I am trying to immitate is in the music playback controls. I can tap the "..." button in the upper left corner, a new screen loads, I then tap the "Device" button, a new screen loads, and then I can push the physical back button to go back to the previous screens twice.

[JonFitbit]

Sorry this is such a crude example, we'll get something better added to the tutorials/examples soon.

3 screens, red, blue and green. Only red is visible initially.

<svg>
  <svg id="screen1">
    <rect id="button1" pointer-events="all" width="100%" height="100%" fill="red" />
  </svg>
  <svg id="screen2" display="none">
    <rect id="button2" pointer-events="all" width="100%" height="100%" fill="blue" />
  </svg>
  <svg id="screen3" display="none">
    <rect id="button3" pointer-events="all" width="100%" height="100%" fill="green" />
  </svg>
</svg>

Press the <rect> on each screen causes the next screen to be displayed, and the others hidden.

import document from "document";

let screen1 = document.getElementById("screen1");
let screen2 = document.getElementById("screen2");
let screen3 = document.getElementById("screen3");

let button1 = document.getElementById("button1");
let button2 = document.getElementById("button2");
let button3 = document.getElementById("button3");

function showScreen1() {
  console.log("Show screen 1");
  screen1.style.display = "inline";
  screen2.style.display = "none";
  screen3.style.display = "none";
}

function showScreen2() {
  console.log("Show screen 2");
  screen1.style.display = "none";
  screen2.style.display = "inline";
  screen3.style.display = "none";  
}

function showScreen3() {
  console.log("Show screen 3");
  screen1.style.display = "none";
  screen2.style.display = "none";
  screen3.style.display = "inline";
}


button1.onclick = function() {
  showScreen2();
}

button2.onclick = function () {
  showScreen3();
}

button3.onclick = function() {
  showScreen1();
}

Then we can get the keypress event to navigate backwards through the screens, preventing the actual BACK button event from firing, unless we're on the first screen.

document.onkeypress = function(evt) {
  if (evt.key === "back") {
    if (screen3.style.display === "inline") {
      // Go to screen 2
      showScreen2();
      evt.preventDefault();
    } else if (screen2.style.display === "inline") {
      // Go to screen 1
      showScreen1();
      evt.preventDefault();
    } else if (screen1.style.display === "inline") {
      // Default behaviour to exit the app
    }
  }
}

I'm sure you can be more elegant in keeping a stack of the screens, but this was intended to be a very basic example.

[Caber]

My first screen contain 4 combo-button which work fine until, I add the following statement

      let gameScreen = document.getElementById("game-Screen");

to my app/index.js, then none of the events fire.

Any ideas ?

         Steve McCabe

[JonFitbit]

---

@Caber wrote:

My first screen contain 4 combo-button which work fine until, I add the following statement

      let gameScreen = document.getElementById("game-Screen");

to my app/index.js, then none of the events fire.

Any ideas ?

         Steve McCabe

---

Do you see any errors in the console? Have you added an element with this ID to your index.gui game-Screen (case sensitive)?

[Caber]

Do you see any errors in the console?  No

Have you added an element with this ID to your index.gui game-Screen (case sensitive)?  Yes

After adding the getElementById() call no events fire for combo button(s) and/or square button(s) on that screen which the getElementById() call was made for.

Remove only the call and then all of the above button types fire as expected.

See example below:

<!--    Widgets.gui  ****************************** -->

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
        <link rel="import" href="/mnt/sysassets/widgets/combo_button_widget.gui" />
  </defs>
</svg>

<!--   index.gui   ********************************************************** -->

<svg>
  <svg id="screen1">
    <rect id="button1" pointer-events="all" x="100" y="100" width="140" height="140" fill="red" />
        <!-- Button  --  TOP RIGHT -->
        <use id="btn-topright" href="#combo-button-upper-right" fill="fb-red">
          <set href="combo-button-stroke" attributeName="display" to="inline"/>
        </use>
  </svg>
  <svg id="screen2" display="none">
    <rect id="button2" pointer-events="all" width="100%" height="100%" fill="blue" />
  </svg>
 </svg>

//  index.js  ***************************************************************************

import document from "document";

//let screen1 = document.getElementById("screen1");  /* Uncomment this line causes combo button events not to fire */

let screen2 = document.getElementById("screen2"); 

let button1 = document.getElementById("button1");
let button2 = document.getElementById("button2");

let nextPlayerButton = document.getElementById("btn-topright");

nextPlayerButton.onactivate = function(evt) {

  console.log("  Next button pressed !");
}

function showScreen1() {
  console.log("Show screen 1");
/*
  screen1.style.display = "inline";
  */
  screen2.style.display = "none";
}

function showScreen2() {
  console.log("Show screen 2");
/* 
  screen1.style.display = "none";
  */
  screen2.style.display = "inline";
}

button1.onclick = function() {
  showScreen2();
}

button2.onclick = function () {
  showScreen1();
}

document.onkeypress = function(evt) {
  console.log( JSON.stringify(evt));
  if (evt.key === "back") {
    if (screen3.style.display === "inline") {
      // Go to screen 2
      showScreen2();
      evt.preventDefault();
    } else if (screen2.style.display === "inline") {
      // Go to screen 1
      showScreen1();
      evt.preventDefault();
    } else if (screen1.style.display === "inline") {
      // Default behaviour to exit the app
    }
  }
}

[ChRiedl]

Did you see this "Ionic View" sample ?

https://github.com/gaperton/ionic-views

By the way, did you solve the oauth problem with "invalid callback url" ? I got the same problem now.

[theJDT]

Hey there,

the problem with using "display:none" is, that the DOM gets rid of the entire section.

Try using ".style.visibility: hidden" and ".style.visibility: visible". It has the same visual effect, but your events still work.

Cheers,

JDT

[Cardboard_Boy]

Is there a way to change the colors to images, i cant seem to figure it out... i am a major noob.

[Cardboard_Boy]

I'm making a clock face and I want it to be able to toggle between light and dark versions of the image.

I would also like to know if there's a way to make a toggle for stats on and off.