Solved

Changing text style dynamically in flex

Posted on 2009-07-13
2
1,080 Views
Last Modified: 2012-05-07
Hi
I am working with flex piece of code there i want to change the text label style dynamically by taking the input from the user.
0
Comment
Question by:sandeep_manne
  • 2
2 Comments
 
LVL 37

Accepted Solution

by:
zzynx earned 500 total points
ID: 24858033
Hi sandeep,
I took the Label example from the Flex documentation and extended it with an extra button "Click to change the style dynamically".
Fill in a (valid) color and press the button.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Simple example to demonstrate the Label control -->
 
    <mx:Script>
        <![CDATA[
      
            private var htmlData:String="<br>This label displays <b>bold</b> and <i>italic</i> HTML-formatted text.";
                                         
            // Event handler function to change the image size.
            private function displayHTML():void {
                simpleLabel.htmlText= htmlData;
            }
          
            // Event handler function to change the image size.
            private function displayText():void {
                simpleLabel.text="This Label displays plain text.";
            }
            
            private function changeStyle():void {
            	simpleLabel.setStyle("color", "0x"+color.text); // Red
            }         
        ]]>
    </mx:Script>
 
  <mx:Panel title="Label Control Example" height="75%" width="75%" 
      paddingTop="10" paddingLeft="10">
    
      <mx:Label id="simpleLabel" text="This Label displays plain text."/>
      <mx:Button id="Display" label="Click to display HTML Text" click="displayHTML();"/>
      <mx:Button id="Clear" label="Click to display plain text" click="displayText();"/>
      <mx:HBox>
        <mx:Label text="Color of the text in hex (ex. FF0000 for red):"/>
        <mx:TextInput id="color"/>
      	<mx:Button id="Style" label="Click to change the style dynamically" click="changeStyle();"/>
      </mx:HBox>
      
  
  </mx:Panel>
</mx:Application>

Open in new window

0
 
LVL 37

Expert Comment

by:zzynx
ID: 24858441
Thanx 4 axxepting
0

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question