The following example shows how you can set the font weight of an MX [...]]]> In a previous example, “Setting the font weight on a charting Legend control in Flex”, we saw how you could set the font weight of a Flex Charting Legend control by setting the fontWeight style on the LegendItem CSS selector.

The following example shows how you can set the font weight of an MX Legend control by setting the fontWeight style on the LegendItem CSS selector in Flex 4.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/ -->
<s:Application name="MX_LegendItem_fontWeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|LegendItem {
            fontWeight: normal;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:XMLListCollection id="dp">
            <s:source>
                <fx:XMLList>
                    <product label="Product 1" data="3" />
                    <product label="Product 2" data="1" />
                    <product label="Product 3" data="4" />
                    <product label="Product 4" data="1" />
                    <product label="Product 5" data="5" />
                    <product label="Product 6" data="9" />
                </fx:XMLList>
            </s:source>
        </s:XMLListCollection>
    </fx:Declarations>
 
    <s:Panel left="20" right="20" top="20" bottom="20">
        <s:controlBarContent>
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </s:controlBarContent>
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

Or, if you wanted to use an embedded font, you could use the following code:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/ -->
<s:Application name="MX_LegendItem_fontWeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/comic.ttf");
            fontFamily: myEmbeddedFont;
            fontWeight: normal;
            embedAsCFF: false;
        }
 
        mx|LegendItem {
            color: white;
            fontFamily: myEmbeddedFont;
            fontSize: 16;
            fontWeight: normal;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:XMLListCollection id="dp">
            <s:source>
                <fx:XMLList>
                    <product label="Product 1" data="3" />
                    <product label="Product 2" data="1" />
                    <product label="Product 3" data="4" />
                    <product label="Product 4" data="1" />
                    <product label="Product 5" data="5" />
                    <product label="Product 6" data="9" />
                </fx:XMLList>
            </s:source>
        </s:XMLListCollection>
    </fx:Declarations>
 
    <s:Panel left="20" right="20" top="20" bottom="20">
        <s:controlBarContent>
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </s:controlBarContent>
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
    </s:Panel>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading [...]]]> The following example shows how you can style the various states on a Flex Gumbo FxRadioButton control using a <Style> block.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<Application name="FxRadioButton_statesStyle_fontWeight_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Style>
        FxRadioButton:upAndSelected,
        FxRadioButton:overAndSelected,
        FxRadioButton:downAndSelected {
            fontWeight: bold;
        }
    </Style>

    <FxRadioButtonGroup id="gr1" />

    <VGroup width="100">
        <FxRadioButton label="One" />
        <FxRadioButton label="Two" />
        <FxRadioButton label="Three" />
        <FxRadioButton label="Four" />
        <FxRadioButton label="Five" />
    </VGroup>

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in [...]]]> The following example shows how you can specify a bold font style on a device and embedded font on a Flex Gumbo TextBox control by setting the fontWeight style.
Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/12/displaying-a-bold-font-style-on-a-textbox-control-in-flex-gumbo/ -->
<Application name="TextBox_fontWeight_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Style>
        @font-face {
            src: url("C:/Windows/Fonts/ARIALBD.TTF");
            fontFamily: "ArialEmbedded";
            fontWeight: "bold";
            cff: true;
        }
    </Style>

    <VGroup>
        <TextBox id="deviceTextBox"
                text="The quick brown fox jumps over the lazy dog. (device)"
                fontFamily="Arial"
                fontWeight="bold"
                fontLookup="device" />

        <TextBox id="embeddedCFFTextBox"
                text="The quick brown fox jumps over the lazy dog. (embeddedCFF)"
                fontFamily="ArialEmbedded"
                fontWeight="bold"
                fontLookup="embeddedCFF"/>
    </VGroup>

</Application>

 

The LinkButton control uses a bold font weight by default, so you need to either embed the bold font weight, or set the LinkButton control’s fontWeight style to normal.

Full code [...]]]> The following example shows how you can use an embedded font with the Flex LinkButton control by setting the fontFamily and fontWeight styles.

The LinkButton control uses a bold font weight by default, so you need to either embed the bold font weight, or set the LinkButton control’s fontWeight style to normal.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/04/using-an-embedded-font-with-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_fontFamily_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
            fontWeight: bold;
        }

        LinkButton {
            fontFamily: ArialEmbedded;
        }
    </mx:Style>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            rotation="45" />

</mx:Application>

View source is enabled in the following example.

You can also embed the font using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/04/using-an-embedded-font-with-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_fontFamily_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.LinkButton;

            [Embed(systemFont="Arial",
                    fontName="ArialEmbedded",
                    fontWeight="bold",
                    mimeType="application/x-font")]
            private const arialEmbedded:Class;

            private var linkButton:LinkButton;

            private function init():void {
                linkButton = new LinkButton();
                linkButton.label = "LinkButton";
                linkButton.rotation = 45;
                linkButton.setStyle("fontFamily", "ArialEmbedded");
                addChild(linkButton);
            }
        ]]>
    </mx:Script>

</mx:Application>

 

By default the ComboBox control’s label use a bold font weight, whereas the dropdown items use a normal font weight.

Full code after the jump.

By default, the Accordion header’s text is bold. The following example shows how you can set the accordion header’s font weight to “normal” by setting the fontWeight [...]]]> The following example shows you how you can use an embedded font with the Flex Accordion container by setting the headerStyleName style.

Full code after the jump.

By default, the Accordion header’s text is bold. The following example shows how you can set the accordion header’s font weight to “normal” by setting the fontWeight style in the custom accordion headerStyleName style:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/using-embedded-fonts-with-the-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }

        Accordion {
            headerStyleName: accordionHeaderStyleName;
        }

        .accordionHeaderStyleName {
            fontFamily: EmbeddedBase02;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Accordion id="accordion"
            creationPolicy="all"
            width="100%"
            height="100%">
        <mx:VBox label="Red"
                backgroundColor="red"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Orange"
                backgroundColor="haloOrange"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Yellow"
                backgroundColor="yellow"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Green"
                backgroundColor="haloGreen"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Blue"
                backgroundColor="haloBlue"
                width="100%"
                height="100%">
        </mx:VBox>
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

The following example shows how you can set the accordion header’s font weight to “bold” by setting the fontWeight style in the @font-face style:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/using-embedded-fonts-with-the-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }

        Accordion {
            headerStyleName: accordionHeaderStyleName;
        }

        .accordionHeaderStyleName {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:Accordion id="accordion"
            creationPolicy="all"
            width="100%"
            height="100%">
        <mx:VBox label="Red"
                backgroundColor="red"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Orange"
                backgroundColor="haloOrange"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Yellow"
                backgroundColor="yellow"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Green"
                backgroundColor="haloGreen"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Blue"
                backgroundColor="haloBlue"
                width="100%"
                height="100%">
        </mx:VBox>
    </mx:Accordion>

</mx:Application>

 

There are two basic approaches to using an embedded font with a ProgressBar control. By default the progress bar’s label uses a bold font weight, so the first technique is to set the progress bar’s fontWeight style [...]]]> The following example shows how you can use an embedded font with the ProgressBar control in Flex.

There are two basic approaches to using an embedded font with a ProgressBar control. By default the progress bar’s label uses a bold font weight, so the first technique is to set the progress bar’s fontWeight style to “normal” using MXML or CSS, as shown in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/using-an-embedded-font-with-the-flex-progressbar-control/ -->
<mx:Application name="ProgressBar_fontWeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function progressBar_initialize():void {
                progressBar.setProgress(76, 100);
            }
        ]]>
    </mx:Script>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            barColor="haloBlue"
            borderColor="black"
            color="black"
            fontFamily="EmbeddedBase02"
            fontSize="48"
            fontWeight="normal"
            trackColors="[black, black]"
            width="100%"
            height="100%"
            initialize="progressBar_initialize();" />

</mx:Application>

View source is enabled in the following example.

The second technique shows how you can embed the bold version of a font family in the <mx:Style /> block:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/using-an-embedded-font-with-the-flex-progressbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function progressBar_initialize():void {
                progressBar.setProgress(76, 100);
            }
        ]]>
    </mx:Script>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            barColor="haloBlue"
            borderColor="black"
            color="black"
            fontFamily="EmbeddedBase02"
            fontSize="48"
            trackColors="[black, black]"
            width="100%"
            height="100%"
            initialize="progressBar_initialize();" />

</mx:Application>

View source is enabled in the following example.

Base 02 font by www.stereo-type.net.

 

Full code after the jump.

View MXML