Navigate

Targets Web
1

please can someone explain how to navigate from webpage to webpage and
the back navigation is working then? (instead of closing the app)
at first in debug mode started from ide with the use of firefox 88 browser at windows 10 pc.
Xojo 2021r1.1

a puzzle with
SaveState
RequestedData
HashTagChanged
CurrentPage
New WebPageXY
and it does not do what i expected.

2

Xojo Web Applications are “singlePage applications”, Using the back button will exit the session. You may want to explore the breadcrumb functionality, and display a warning (Do you really want to quit the application?) in the event WebSession.Closing when the user presses the back button.

For general navigation, I prefer using a menu system in my applications, where users close the current page with an ad-hoc button (always positioned in the same location on every page). Closing a page brings back the menu. Where I need back and forth navigation, I use multiple containers, panels or breadcrumbs depending on the use case.

1 Like
3

sure one page at a time.
but i not want put the whole app design into one window.
i will try to follow your suggestions. thanks.

4

Just in case there is a misunderstanding, I do have multiple pages. The menu page is not closed until the user quits the application. Just made invisible when another page is shown. Closing the other page shows the menu page again.

I realize that mine is not at all following best practice web design. But I design a “desktop application as a web app” sort of.

1 Like
5

ahh ok.

i have
login->menu
menu->upload data->upload photos->menu
menu->view a list and show data & photos->menu

so i would open the menu and close the login, hide the menu and show the others, close the others and made menu visible again.

6

Indeed. The login step is entirely separate from the rest. Once authenticated, the uuser is presented with the menu. I have further security checks to only make available what the user profile is allowed.

So, your concept is generally what I do, except in some cases where I need more of a “step by step” process. Then, I will use either multiple containers that can be navigated back and forth in the page with a segmented button controlling the show/hide of the containers, or panels (where I dont need icons in the tab). I am experimenting with breadcrumbs for some other cases.

7

my project is more or less a prototype.
the navigation is only on screen now in the window.
means less headache with back navigation.

8

Xojo Web being ONE app, where all the pages are “playing” (in the way you are orchestrating it) has one issue: if you do it right, the end user doesn’t notice it is actually an “app”. In consequence a few things are just not working in a ways the end user would expect it to work (aka open me this page in a separate tab/window etc.). For my “intranet” customers it is easy to explain: you can just say that they should compare it to their banking app on the net. It is a “closed” system and an “app”, though it might look like any other webpage.

For users on the internet, especially if you don’t work with a login like for my xojodocs.com app it is somehow problematic. I mean it is not an issue for that particular app, as people who are interested in know anyways that it is a Xojo Web App. But imagine that that app would be about something different, how can we “explain” to the customer that it is actually an “app” and not an ordinary webpage? I have not yeat any idea how we could solve that (other than getting on the nerves of the customers by showing them a popup “Howdy, be careful, this looks like a webpage but it reacts like an app”.

9

This isn’t true. As I mentioned on another thread, this is exactly what Session.SaveState is for.

https://documentation.xojo.com/api/web/websession.html#websession-savestate

Whenever a user makes a change that you would like them to be able to get “Back” to you call Session.SaveState. This method takes 1 to 3 parameters:

  • Name as String - the name of the current state. Typically a distinct object to load, like a page.
  • Data as String - the specifics of what needs to be loaded. If you were showing a form, you might encode the values into a JSON string.
  • Replace as Boolean - this property determines whether the current item on this stack gets replaced by this new value. You might for instance replace the state of a form if the user types a large value into a TextArea.

Adding state info adds interim items to the browser’s page history. If the user clicks Back, the HashTagChanged event is called with the latest Name/Data combination so you can restore the user back to where they were. Information is stored in a stack so as you call this method, more and more items are added and can be accessed.

NOTE: if a user clicks back into the history stack and you call SaveState again, the browser will truncate the stack at that point and will wipe out the Forward stack. If you are going “back” to a state, don’t call SaveState again until the user makes a change that warrants that.

2 Likes
10

I stand corrected. Thank you. I suppose I still have too many web 1.0 paradigms.

11

An example project or a Xojo blog article with example would help a lot to understand this concept.

2 Likes
12

theoretical yes, practical and at least at my testing the page did not came in front only the title was visible, at pc and at phone browser.
as i understood we have to change the page then in the HashTagChanged
event with a select case.
i had also the effect that HashTagChanged had empty arguments.
but maybe i need more testing.
in the end i discarded the idea of back navigation at the moment.