Hello World - Flex

English alphabets start with 'A'. Just like that every Computer Language starts with 'Hello World' program.

To execute not just the Hello World, all you need is
  • Flex SDK
  • Editor of your choice
  • Adobe Flash Player 10 or above
For compiling Flex without Flash Builder please see Compiling Flex without Flash Builder.


The requirement of the program is so simple that, just a Hello World message needs to be displayed. There are lot of user controls like Label, Text Box, Radio Button, etc. Which one to choose is a confusing question. 

This is just a message, so one can assume to use either a Label or a Text Box. The key difference between the two is the former is static, while the latter can change dynamically. The Text box can also be made static by changing few properties. So the decision is all up to the developer. For simplicity, I have chosen Label to use in this example.

Since the latest Spark style has more advanced and enriched user controls, I am preferring Spark to older mxml style, even though both are supported in the latest version. So there are three common name spaces used in Flex as discussed in Introduction. And of course no logic is included in this program. So, only the mxml file is sufficient to make the program run.

The name space Spark has the class name Label, having a set of properties and methods. The key property is the text, which has to be changed to the string Hello World to meet the requirement. With this information I think, the Hello world program is complete and the code is

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:fx="http://ns.adobe.com/mxml/2009"
>
  <s:Label 
  text="Hello World"
    />
</s:Application>

The output is



The Application class specifies the whole Spark Application, inside which, all the controls has to be placed. In our case, only one Label is needed. And of course the text property should be changed to Hello World. Compile the program using mxmlc compiler and run the output swf file. The text Hello World should be displayed. But Where?. Should be at the left top corner, technically at the location (0, 0). We can position the Label at any intended range, but should be less than the maximum limits. The x and y location can be changed by the x and y property of the Label. Just, give some place you need. One disadvantage is that we are not using the Flash Builder IDE, and hence we will not know the actual arrangement of controls, until we run the output.

Now, I have relocated the Label. Next step is to change the style. Add a color to the Label, change the font, add font effects and whatever you need. So the final formatted Hello World program is


<?xml version="1.0" encoding="utf-8"?>
<s:Application 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:fx="http://ns.adobe.com/mxml/2009"
>
  <s:Label 
  text="Hello World"
        x="100"
  y="100"
        fontSize="24"
  fontWeight="bold"
  color="0xFF00DD"
  fontFamily="Times New Roman"
  textAlign="center"
    />
</s:Application>

The output of the above program is


This Hello World can be improved further, and it is in the hands of the developer. The more one puts thoughts into, the more can be obtained. Comments are most welcome to further improve this article.

See also Compiling Flex without Flash BuilderIPv4 Validator in FlexCalculator in FlexSimple Animation in FlexMastering Alert - FlexNativeProcess - AIR.

No comments:

Post a Comment