How to create a big header in Apache Royale

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.

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