Skin Example

ZAML & YAML skin example

The following ZAML & YAML screen sources describe this screen:

ZAML skin definition

Note: The ZAML description uses for loops to define 2 x 6 repeating widgets.

screen:
  backgroundColor: "panelBG"
  flags: "wfNoBorder"
  name: "TVMagazineCockpit"
  position: "center,center"
  resolution: "1920,1080"
  size: "1920,1080"
  children:
    - xmlinc:
        file: "screenpart_TitleBar.ymlinc"
    - widget:
        font: "$md_label_medium"
        halign: "right"
        name: "day_selector"
        position: "1490,15"
        size: "420,26"
        transparent: "1"
        valign: "center"
        zPosition: "2"
    - for:
        var: "$i"
        range: [0, 5]
        body:
          - xmlinc:
              file: "screenpart_PrimeCell.ymlinc"
              index: "$i"
              position: "$i*$screen_width/6,0"
    - for:
        var: "$i"
        range: [0, 5]
        body:
          - widget:
              backgroundColorSelected: "keyBlue"
              enableWrapAround: "1"
              position: "eval($i*320),275"
              render: "Listbox"
              scrollbarMode: "showNever"
              size: "320,750"
              source: "list$i"
              transparent: "1"
              children:
                - xmlinc:
                    file: "screenpart_EventCell.ymlinc"
    - xmlinc:
        file: "screenpart_Footer.ymlinc"

YAML skin definition

Note: Only the first and last of the 2 x 6 repeating widgets are shown in the YAML description.

screen:
  backgroundColor: "panelBG"
  flags: "wfNoBorder"
  name: "TVMagazineCockpit"
  position: "center,center"
  resolution: "1920,1080"
  size: "1920,1080"
  children:

    # title bar
    - xmlinc:
        file: "screenpart_TitleBar.ymlinc"

     # day selector
    - widget:
        font: "$md_label_medium"
        halign: "right"
        name: "day_selector"
        position: "1490,15"
        size: "420,26"
        transparent: "1"
        valign: "center"
        zPosition: "2"

    # 6 identical screen parts showing the prime time information
    - xmlinc:
        file: "screenpart_PrimeCell.ymlinc"
        index: "0"
        position: "0*$screen_width/6,0"

    ...

    - xmlinc:
        file: "screenpart_PrimeCell.ymlinc"
        index: "5"
        position: "5*$screen_width/6,0"

    # 6 identical event lists
    - widget:
        backgroundColorSelected: "keyBlue"
        enableWrapAround: "1"
        position: "0,275"
        render: "Listbox"
        scrollbarMode: "showNever"
        size: "320,750"
        source: "list0"
        transparent: "1"
        children:
          - xmlinc:
              file: "screenpart_EventCell.ymlinc"

    ...

    - widget:
        backgroundColorSelected: "keyBlue"
        enableWrapAround: "1"
        position: "1600,275"
        render: "Listbox"
        scrollbarMode: "showNever"
        size: "320,750"
        source: "list5"
        transparent: "1"
        children:
          - xmlinc:
              file: "screenpart_EventCell.ymlinc"

    # button bar
    - xmlinc:
        file: "screenpart_ButtonBar.ymlinc"
        position: "0,$screen_height-48"

Visual Inspection

For visual inspection a screen layout graphic is generated during skin compile.