How to create a big header in Apache Royale

Question

I'd like to create a coloured header with a 100% width and centered text + logo in it. Which (Jewel) component should I use? I've looked into the examples in the GitHub repo but can't find something that resembles this. Any help would be appreciated.

Answer 1

in Jewel you have TopAppBar. This is used as the main app bar and is a header that shows on top of the app and fill the 100% of the horizontal space.

Coloring can be done through themes (jewel themes or a custom theme you can do yourself) or directly override the CSS styles in your app.

Here's a little example of this component that uses other subcomponents.

<j:TopAppBar>
  <j:BarRow>
    <j:BarSection>
      <j:BarTitle text="Apache Royale Tour de Jewel" />
    </j:BarSection>
    <j:BarSection itemsHorizontalAlign="itemsRight">
      ...place other content here
    </j:BarSection>
  </j:BarRow>
</j:TopAppBar>

The subcomponents:

• BarRow: is for creating horizontal rows that will stack
• BarSection: a BarRow can have 1 or more BarSections that helps separate content and itemsHorizontalAlign helps to align the content to left, center or right
• BarTitle: is a convenience component that creates the typical title text in the bar.

Notice that you can use a BarRow in other parts of your apps to create headers for nested content too.

You can see a real example of use in Tour De Jewel App here:

https://github.com/apache/royale-asjs/blob/develop/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml