Routing with multiple nested frames

Tags:

tutorials

The diagram below shows an example where there is a main home frame with an outlet that can contain two sub-frames, called frame_a and frame_b. Then frame_a also has an outlet that can contain two more sub-frames, frame_a1 and frame_a2.

For this example, we can have five possible router links:

/home: Shows the home frame with frame A and frame A1.
/home/frame-a: Shows the home frame with frame A and frame A1.
/home/frame-a/frame-a1: Shows the home frame with frame A and frame A1.
/home/frame-a/frame-a2: Shows the home frame with frame A and frame A2.
/home/frame-b: Shows the home frame with frame B.

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
          children:
            - frame: frame-a1 # routerLink /home/frame-a/frame-a1
            - frame: frame-a2 # routerLink /home/frame-a/frame-a2
        - 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
      main:
        kind: RouterOutlet
  # ====== FRAME A ======
  frame-a:
    kind: Frame
    layout:
      kind: RowLayout
      heights: [50px, auto]
      areas: [nav, sub]
    contents:
      nav:
        kind: NavPanel
        orientation: horizontal
        type: Button
        card: true
        items:
          - kind: NavButton
            text: Go to frame A1
            frame: frame-a1
          - kind: NavButton
            text: Go to frame A2
            frame: frame-a2
        subscribe:
          - kind: RouterOutlet
            frame: frame-a
            source: sub
      sub:
        kind: RouterOutlet
  # ====== SUB-FRAME A1 ======
  frame-a1:
    kind: Frame
    # more...
  # ====== SUB-FRAME A2 ======
  frame-a2:
    kind: Frame
    # more...
  # ====== FRAME B ======
  frame-b:
    kind: Frame
    # more...

Router Outlets

In the example above, we have highlighted the way that the frames can be nested inside one another. If a frame has child frames, then those child frames will be automatically inserted into any RouterOutlet in that frame. In general, a frame should only have one RouterOutlet.