Search Flex Samples

Styling the Alert control’s title bar

The following example shows how you can customize the appearance of the title in an Alert control in Flex by setting the titleStyleName style:




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white"

creationComplete="init();">



<mx:Style>

@font-face {

src: local("Comic Sans MS");

fontFamily: myComicSansMS;

fontWeight: normal;

}

Alert {

titleStyleName: myCustomTitleStyleName;

}

.myCustomTitleStyleName {

color: haloOrange;

fontFamily: myComicSansMS;

fontSize: 16;

fontWeight: normal;

}

</mx:Style>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

private var alert:Alert;

private function init():void {

var myMessage:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nDonec tincidunt sollicitudin sem.";

var myTitle:String = "The quick brown fox jumped over the lazy dog";

alert = Alert.show(myMessage, myTitle);

}

]]>

</mx:Script>

<mx:ApplicationControlBar dock="true">

<mx:Button label="Launch alert" click="init();" />

</mx:ApplicationControlBar>

</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples