Adding a Second Screen and Navigating to It
<!-- TODO need to create links to the documentation https://docs.chatium.com/en/getting-started/1.screen-->
Now let's try to create a second screen and link these two screens together. We will add another call to app.screen below our existing code in this file, but we will set the first argument to /catalog.
// Catalog screen
const catalogScreen = app.screen('/catalog', async function(ctx, req) {
return <screen title="Catalog">
<text class="section">Catalog items</text>
</screen>
})
This screen can be opened if we now append ~catalog to the address of our file.
To do this, we will replace the showToast action in the first screen with a navigation action - navigate to the catalog screen.
<button
onClick={catalogScreen.navigate()}
class={["primary","section"]}
title="Click me"/>
<!-- In this action, we used the argument /catalog - which is also the first argument of the callback function ctx.
ctx — is the execution context of our code. It contains information about the user, their device, and the environment in which the code is running:
✦ ctx.account — an object defining the account within which the current code operates. You can get the id or name of the account.
✦ ctx.router — an object defining the entry point (file) for the request. The currently executing code can reside in any file, but ctx.router defines the source of the handler. -->
The method app.screen binds a screen request handler to a URL path template. The template is part of the URL when requesting the screen. Thus, the full URL to access the screen corresponds to the entry point of the executing code: the file that executed app.screen.
There is a difference between the file where the code is written and where it was launched from.
In our example, there is currently one file - start.tsx, and the path catalog within it is accessed at the address https://account-domain/start~catalog.
However, we can move the code to another file, leaving only the screen registration in the original file.
In this case, the router will still consider that it is running within the framework of the original file start.tsx, and all addresses will be constructed based on that.
Thus, the .navigate method provides navigation to another screen in the current file. Let's add a link on the second screen that takes us back to the first.
<text onClick={mainScreen.navigate()} class="link">
Go to main screen
</text>
As a result, we will have a file that contains 2 screens and navigation between them.
Try creating this file in your account. After that, scan the QR code in the bottom right corner with the Chatium app and see how it works in the native application.
