1 Reply Latest reply on Feb 21, 2012 2:34 AM by Sébastien VARLET

    How to style the title of a Spark panel

    tobi3

      Hi

       

      The embedded font isn't applied to the title of the spark panel. How to to fix this?

       

      Here's the code:


      <?xml version="1.0" encoding="utf-8"?>
      <s:Application
          xmlns:fx="
      http://ns.adobe.com/mxml/2009"
          xmlns:s="
      library://ns.adobe.com/flex/spark"
          xmlns:mx="
      library://ns.adobe.com/flex/halo"
          minWidth="
      1024" minHeight="768"
          creationComplete="
      main()" viewSourceURL="srcview/index.html">

         <fx:Style>
           @namespace s "library://ns.adobe.com/flex/spark";
           @namespace mx "library://ns.adobe.com/flex/halo";

           @font-face {
              src:url('G:/path/to/FuturaStd-Book.otf');
              fontFamily: FuturaStdBookCFF;
              advancedAntiAliasing: true;
              cff: true;
           }
          
           @font-face {
              src:url('G:/path/to/FuturaStd-Book.otf');
              fontFamily: FuturaStdBookNoCFF;
              advancedAntiAliasing: true;
              cff: false;
           }
          
           s|Application {
              fontFamily: FuturaStdBookCFF;
              fontSize: 14;
           }   
          
           mx|Button {
              fontFamily: FuturaStdBookNoCFF;
              fontSize: 14;
           }
          
           mx|Panel {
               titleStyleName: MXPanelTitleStyleName;
           }
          
           .MXPanelTitleStyleName {
              fontFamily: FuturaStdBookNoCFF;
              fontSize: 14;
           }
          </fx:Style>
          <fx:Script>
              <![CDATA[
                  public function main():void {
                    // Doesn't work either:
                    sparkPanel.titleField.setStyle('fontFamily','FuturaStdBookCFF');
                  }
              ]]>
          </fx:Script>
          <s:layout>
              <s:VerticalLayout
                  paddingTop="
      10" paddingBottom="10"
                  paddingLeft="
      10" paddingRight="10"/>
          </s:layout>
          <s:Panel id="sparkPanel" title="Spark Panel Title">
              <s:layout>
                  <s:VerticalLayout
                      paddingTop="
      10" paddingBottom="10"
                      paddingLeft="
      10" paddingRight="10"/>
              </s:layout>
              <s:VGroup>
                  <s:SimpleText>The font FuturaStd-Book should be embedded. The buttons are just dummy buttons.</s:SimpleText>
                  <s:SimpleText>The embedded font isn't applied to the title of this panel (a spark panel). How to to fix this?</s:SimpleText>
                  <mx:Button label="MX Button: mumbojumbo"/>
                  <s:Button label="Spark Button: mumbojumbo"/>
                  <s:SimpleText text="SimpleText: mumbojumbo"/>
                  <s:RichEditableText>RichEditableText: mumbojumbo</s:RichEditableText>
              </s:VGroup>
          </s:Panel>
          <mx:Panel title="MX Panel Title"
              paddingTop="
      10" paddingBottom="10"
              paddingLeft="
      10" paddingRight="10">
              <s:VGroup>
                  <s:SimpleText>The embedded font is applied to the title of this panel (an MX panel).</s:SimpleText>
              </s:VGroup>
          </mx:Panel>
      </s:Application>