Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First thing you have to do is create a custom skin class. In FlashBuilder (FB) there's an option to create one automatically, but in essence it's just a class like any other.</p> <p>In FB, right-click somewhere in your project and select 'New > MXML Skin'</p> <p><img src="https://i.stack.imgur.com/q1AXp.jpg" alt="enter image description here"></p> <p>Then fill in the wizard form as follows:</p> <p><img src="https://i.stack.imgur.com/Uzta0.jpg" alt="enter image description here"></p> <p>Otherwise just create a new .mxml file and copy/paste the code from <code>spark.skins.spark.ApplicationSkin</code> into it.</p> <p>Then in your application assign the skin class you've just created:</p> <pre><code>&lt;s:Application ... skinClass="skins.MyApplicationSkin" /&gt; </code></pre> <p>Now let's edit your newly created skin class. This is the part that is of interest to you (I'll cut out some pieces to make it clearer):</p> <pre><code>&lt;s:Group left="0" right="0" top="0" bottom="0"&gt; &lt;s:layout&gt; &lt;s:VerticalLayout gap="0" horizontalAlign="justify" /&gt; &lt;/s:layout&gt; &lt;s:Group id="topGroup" minWidth="0" minHeight="0" includeIn="normalWithControlBar, disabledWithControlBar" &gt; &lt;!-- some graphic elements here --&gt; &lt;s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...&gt; &lt;s:layout&gt; &lt;s:HorizontalLayout ... /&gt; &lt;/s:layout&gt; &lt;/s:Group&gt; &lt;/s:Group&gt; &lt;s:Group id="contentGroup" width="100%" height="100%" ... /&gt; &lt;/s:Group&gt; </code></pre> <p>Almost there. Now all we need to do, is move that 'topGroup' beneath the 'contentGroup'. 'topGroup' contains some graphics + the controlBarGroup. 'contentGroup' is the area where all components will be inserted that you but in you application .mxml file.</p> <pre><code>&lt;s:Group left="0" right="0" top="0" bottom="0"&gt; &lt;s:layout&gt; &lt;s:VerticalLayout gap="0" horizontalAlign="justify" /&gt; &lt;/s:layout&gt; &lt;s:Group id="contentGroup" width="100%" height="100%" ... /&gt; &lt;s:Group id="topGroup" minWidth="0" minHeight="0" includeIn="normalWithControlBar, disabledWithControlBar" &gt; &lt;!-- some graphic elements here --&gt; &lt;s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...&gt; &lt;s:layout&gt; &lt;s:HorizontalLayout ... /&gt; &lt;/s:layout&gt; &lt;/s:Group&gt; &lt;/s:Group&gt; &lt;/s:Group&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload