Fragments

A Fragment is a Resource whose content is just an Element that you'd like to re-use in multiple places. For example, here's the main_panel fragment from the Example Project:

resources:
  main_panel:
    type: fragment
    content:
      type: panel
      padding: 10

This is a really simple fragment, where the content is a single element with one of its properties set, that we'd like to re-use. It also means that if we decided to change what our main_panel should look like, we can change that in this one place rather than having to go hunt down each time we'd made a panel with these properties.

Note that the fragment doesn't have elements specified even though panel requires that property to be set -- that's because, as with Templates, when you use a fragment you can override any of its properties in that place. Here's one place where the main_panel is used in the welcome_screen from the Example Project:

    - type: main_panel // this is an example of a YUI fragment,
                       // check out the main_panel.yui file referenced above
      canvas: // when the parent panel's layout is set to 'canvas',
              // you can set canvas properties on the child elements
              // also supports: bottom, right, center: true, center: h, center: v
        top: 50
        left: 50
      padding: 20
      spacing: 10 // spacing controls the distance between child elements of a panel   
      elements:
        ... // the actual elements get set here!

There are two more things worth noting here:

• The actual panel elements are set where the fragment is used
• We can actually override any of the values set on the content root in the fragment definition
  • You might wonder why we'd even use main_panel here when we're overriding the one padding value that main_panel sets. Well, the reason is that main_panel actually gets one more value (background) set in the default Theme!

As with Templates, using a fragment is as simple as importing the file the fragment is defined in and setting the type property of something in your YUI file to the name of the fragment resource.