Dowe Views — Layouts, Pages, and Routes

VIEWS / FIRST ROUTE

Five files, one routed screen

This guide follows one screen from main.dowe to the final UI. Each step explains where the file lives, what it owns, who imports it, and how it connects to the next declaration.

PROJECT SHAPE

See the complete chain first

main.dowe is the fixed project entrypoint. It activates a route graph, the graph selects a layout and page, and the layout or page may import reusable components. The folders below are recommended conventions; imports remain authoritative.

main.dowe
theme.dowe
views/
  routes/
    app-routes.dowe
  layouts/
    app-layout.dowe
  pages/
    home-page.dowe
  components/
    app-brand.dowe

Read the files in this order: main.dowe activates AppRoutes; AppRoutes connects AppLayout and HomePage; AppLayout imports AppBrand and inserts HomePage at children.

1 / main.dowe

Activate the view graph

main.dowe is the root entrypoint for the project. Import the named route graph you want Dowe to compile, then assign that binding to views inside main.

Dowe starts from this file and follows the static import graph. A route, layout, page, or component that is not reachable from main.dowe is not part of the application.

main.dowe selects imported graphs. It does not define route entries, layout chrome, or page UI.

import AppRoutes from "@/views/routes/app-routes"

main
  views:AppRoutes

2 / views/routes/app-routes.dowe

Map URLs to layouts and pages

A views declaration is a named route graph. It imports the layouts and pages used by its routes, then exports one binding that main.dowe can activate.

group defines a base path and the layout shared by its direct routes. route adds a relative path and selects the page rendered inside that layout. Here, an empty route path under group path:"/" resolves to the root URL.

A views file describes navigation only. Screen components belong in a page or layout, not inside the route graph.

import AppLayout from "@/views/layouts/app-layout"
import HomePage from "@/views/pages/home-page"

views AppRoutes
  group path:"/" layout:AppLayout
    route path:"" page:HomePage

3 / views/layouts/app-layout.dowe

Define the shared application shell

A layout owns UI that persists across every route in its group: application bars, navigation, side content, bottom bars, overlays, and the main content boundary.

The layout has one normal visual root. Scaffold provides the shell regions, while children marks the exact position where Dowe inserts the page selected by the active route.

Keep route-specific content out of the layout. The layout owns shared chrome; children receives the selected page.

import AppBrand from "@/views/components/app-brand"

layout AppLayout
  Scaffold
    appBar
      AppBar
        start
          AppBrand
    main
      children

4 / views/pages/home-page.dowe

Author the routed screen content

A page owns the content selected by one or more routes. It starts with Section and may add ordered sibling Sections for distinct bands such as a hero, feature list, form, or call to action.

Pages can own route-specific Signals, functions, requests, and initialization. They do not declare Scaffold or children because those belong to the surrounding layout.

The file name does not create the URL. The route path in AppRoutes decides where HomePage appears.

page HomePage
  Section
    Grid columns:1 gap:3
      Title size:"3xl" weight:"black"
        "Build one system"
      Text color:"muted"
        "Dowe generates every selected target from this source."

5 / views/components/app-brand.dowe

Extract reusable static UI

A component exports one reusable static view tree. Import it into a layout, page, or another component when the same complete fragment appears in more than one place.

The current component contract has no props, slots, child content, Signals, functions, or requests. State and workflows stay in the page or layout that owns them.

AppBrand is imported by AppLayout. The route graph never references reusable components directly.

component AppBrand
  Flex align:"center" gap:2
    Icon name:"stars-minimalistic"
    Title size:"md" weight:"bold"
      "Dowe"

ROUTE RESOLUTION

Combine the group and route paths

Dowe resolves every route before generation. The group supplies the shared prefix and layout; each direct route appends its own path and selects one page.

Case	Result	Explanation
No data There are no records to display

DECISION GUIDE

Choose the file that owns the change

When the application grows, use the same ownership rules instead of adding unrelated UI to the nearest file.

Change	Owner	Guidance
No data There are no records to display

No data

No data