Pages

🧭 Pages in Digia

In Digia, a Page represents a distinct screen within your mobile app, built using a Scaffold-like layout. Each page holds its own widget tree, UI elements, logic, and lifecycle controls—making it a standalone module in your application.

---

1. Page Structure

Each page in Digia consists of:

• A Canvas Frame (simulating a mobile device) with an AppBar(Optional) and Body.

• A Widget Tree under the body where UI components are nested.

• Its own state variables, data bindings, and action triggers.

Pages are automatically wired into navigation flows, supporting route parameters and deep linking.

---

2. Creating a Page

Use the Pages panel to add a new page:

1. Click the “+ ” button and select Pages Tab

2. Click on Create a Blank Page or Use a Page Template (Coming Soon).

3. In the dialog, enter Page Name (e.g., HomePage, ProfileScreen)

4. Click Create.

The new page opens immediately in the Canvas and Widget Tree for you to start building.

---

3. Page Properties Panel

When a page is selected in the widget tree, the Page Property Panel on the right displays three key sections: Page Properties, Page State, and Actions.

3.1 Page Properties

These are input variables passed to a page when it is opened from another page or route. They are immutable and useful for things like userId, postId, or category.

You define them in the property panel and they show up automatically in the logic builder when navigating to this page.

3.2 Page State

Page states are internal variables that can be defined and updated within the page to manage UI state. These are mutable and live only as long as the page is active.

Examples:

• isLoading

• selectedTab

• searchQuery

You can bind state variables to widget properties or update them via actions.

3.3 Actions

Each page supports lifecycle triggers for key events:

• On Page Load: Run logic when the page appears. Common use cases: API calls, analytics, loading default data.

• On Back Press: Override the system back action to show a confirmation, save form state, or prevent unintended exits.

These are configured directly in the Actions tab of the property panel.

---

4. Page Management

Digia makes it easy to manage all pages in your app through the Pages & Components Overlay, accessed from the top bar or sidebar.

🔄 Switching Between Pages

To switch pages:

1. Click on the current page name in the top section of the left panel.

2. A modal overlay opens showing a list of all pages and components.

3. Click any page to switch the canvas view to it.

🗑️ Delete a Page

In the Pages overlay, click the three-dot menu next to a page and select Delete. The page will be removed from your app.

📋 Duplicate a Page

From the same menu, you can Duplicate a page. This creates a copy of the layout and logic, useful for making variations of a screen.

🚀 Set as First Page

To make a page the initial screen of your app:

1. Open the overlay.

2. Use the context menu to select “Make First Page”.

3. This sets the page as the default route when the app starts.