Routing with nested frames

Tags:

The diagram below shows an example, where there is a main home frame, and nested inside that there are two sub-frames, called frame-a and frame-b.

For the examples, we can have three possible router links:

  • /home/: Shows the home frame with frame A in the RouterOutlet. (So frame A is assumed to be the default.)
  • /home/frame-a: Shows the home frame with frame A in the RouterOutlet.
  • /home/frame-b: Shows the home frame with frame B in the RouterOutlet.

Configuration

Below is the configuration file for this example.

kind: Solution
version: v0
router:
  kind: Router
  routes:
    - frame: home # routerLink /home
      children:
        - frame: frame-a # routerLink /home/frame-a
        - frame: frame-b # routerLink /home/frame-b
frames:
  # ====== HOME FRAME ======
  home:
    kind: Frame
    layout:
      kind: ColumnLayout
      widths: [auto, 300px]
      areas: [nav, main]
    contents:
      nav:
        kind: NavPanel
        orientation: vertical
        type: button
        card: true
        items:
          - kind: NavButton
            text: Go to frame A
            frame: frame-a
          - kind: NavButton
            text: Go to frame B
            frame: frame-b
        subscribe:
          - kind: RouterOutlet
            frame: home
            source: main-outlet
      main-outlet:
        kind: RouterOutlet
  # ====== FRAME A ======
  frame-a:
    kind: Frame
  # ====== FRAME B ======
  frame-b:
    kind: Frame

Router Outlet

For the routes configuration, if a frame has child frames, then those child frames will be automatically inserted into any RouterOutlet in that frame. Note that each frame should only contain a single RouterOutlet. (If you create multiple outlets, then the same content will be repeated multiple times, which is probably not what you want.) If you need to have multiple outlets, then you need to nest them inside one another.

In the example, we can see the following:

  • In router>routes, the home frame route has two child routes, for frames A and B.
  • In frames>home>contents, the home frame has a RouterOutlet.
  • So frames A and B will be inserted into that RouterOutlet in the home frame.

In the diagram below, we have highlighted the way that the routes relate to frames.

Default Frame

When a user enters the home URL: app.packhunt.io/xyz-solution/, then the first frames will be loaded by default. So in this case, it will be home and frame-a.

For navigation, the NavPanel has a dictionary of items which are displayed as a set of buttons in the user interface. Each NavButton has a frame that will be shown in the outlet when the button is clicked. Below is the code-snippet of a NavButton:

kind: NavButton
text: Go to frame A
frame: frame-a

If the NavPanel subscribes to the RouterOutlet, then the navigation items will automatically highlight the currently active frames.