Archive for November, 2009

Change the color of modal part of the screen when showing popUp’s

So in previous two examples we have dived into how to make and show popUp’s in your Flex application. What if for example we have a Flex application that has a white background and when we show the popUp, we want the color of modal part to be a little darker. See two images below.

We would want the background around the popUp to be darker

Looks much better doesnt it

As you can see the 2nd popUp looks a bit nicer than the first. We can set the modalColor of our popUps to any color we like. We have 4 styles that are associated with popUp’s and Alerts in Flex. Those are:

  • modalTransparencyColor – color of the modal part of the screen
  • modalTransparency – transparency of the modal part of the screen, goes from 0 – fully transparent to 1 – no transparecy
  • modalTransparencyBlur – blur of the background
  • modalTransparencyDuration – how long should be the transition of modal part of the screen from not visible to fully visible

We have to set this styles in our Application MXML tag or Application styleTag when using stylesheets. For our example we used modalTransparencyColor=”#000000″ (black) and modalTransparency=”0.7″. Just playing a bit with these 4 styles can yield some interesting results when dealing with popUp’s and Alerts in Flex.

Happy Coding 🙂


, ,

Leave a comment

close popUp when we click anywhere outside of popup – in modal part…

So, in previous example we have created a simple pupUp window that pops up when we click a button in our application ( What if we would want to close the popUp anytime user clicks anywhere outside our popUp window.

We can do that by using FlexMouseEvent’s MOUSE_DOWN_OUTSIDE event which is dispatched when user clicks outside of our pupUp window. All we have to do to make this work is add a few lines of code in popUpWindow.mxml.

We first import the FlexMouseEvent with import;. We add init() function when our popUp is initialized (initialize=”init()” in VBox of our MXML).

In init() function we just add event listener to the component with this.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, closePopUp);. We have to create closePopUp function which will close our popUp.

private function closePopUp(event:FlexMouseEvent):void{

And that is all we have to do, to make our popUp dissapear when user clicks anywhere outside of popUp window. Below is the new popUpWindow.mxml source code.

, , ,

1 Comment

How to create a popUp in Flex

Today I am going to show you how easy it is to show popUp windows in your Flex application.

Above is a picture of our simple application that only has one label and a button, when we press the button a nice popup with rounded corners pops up and if we click close button in the popup it disappears.

In order to make this work, we have to build two files, one will be our application with the text and button to show popup and another file that will be a MXML component (in Flex Builder you just go to File -> New -> MXML Component). Both of the files have to be saved in the same directory on order for this example to work.

Application source code

To use popups Flex has a manager that is devoted specially for that. In our Application under script tags we import mx.managers.PopUpManager. This will allow us to show the popup windows, center them and close them when needed.

As you can see above the application is very basic, on the button click we call showPopUp() function. In this function we first declare a local variable of type IFlexDisplayObject, because this is what createPopUp method from PopUpManager returns.

createPopUp method accepts 4 arguments, 2 of them are optional. First we have to specify the parent of the Popup, this will help Flex set up coordinates and such when we want to later center the popup. Since we want to have our application as the parent we input this as first parameter.

Second parameter we input the name of the MXML component that we made as our PopUp window, in our example file is popUpWindow.mxml, thus we put popUpWindow as second parameter.

The third parameter is optional – modal:Boolean, so it can be either true or false. If we set it to true, than we will not be able to do anything other than interact with popUp window, if it is set to false, than we can still interact with application even when our popUp is on screen.

All there is to do now, it to center our new popUp window with PopUpManager.centerPopUp(popUp). The argument popUp is IFlexDisplayObject that we have created with PopUpManager.createPopUp() method.

Blow is the source of the popUpWindow.mxml file. The only thing worth noting here is that we have assigned a click action for a button, which calls PopUpManager.removePopUp() method. Arugment is this, since our mxml file is the popUp that we want to remove from stage.

popUpWindow.mxml file

, , ,


Change format fo date shown in dateField

So in Flex if we want user to select a date, we have DateField component that is made just for that.

In it’s default state the DateField will show the selected date in format month/day/year (for example 12/31/2008). If we want to change the way Flex shows the selected date we can do that by changing the formatString in DateField component. For month we use MM, for days we use DD and for year we use YYYY. So default value for formatString is MM/DD/YYYY. If we want to have fullstops instead of slashes to seperate day, month and year we do formatString=”MM.DD.YYYY”.

In the application above, we have one arrayCollection (id=formatStrings) with values for dateFormat string. We also use a dropdown menu, that let’s us change the formatString of the DateField. We set the dataProvider of our dropdown (ComboBox component) and set it to our arrayCollection – formatString.

For DateField we say that we want our formatString be the selected row of our drop down menu with formatString=”{comboFormats.selectedItem}”, and thus we can see how the date changes when we select a different row in the drop down menu.

Since we want DateField to have a selected date at the application launch we put selectedDate=”{new Date()}”, which selects today’s date.

You can also see that we set the firstDayOfWeek=”1″, this line tells DateField component to put Monday as the first day in calendar view when we want to select a specific day. Default value of firstDayOfWeek is 0-Sunday, so 1-Monday, 2-Tuesday, 3-Wednesday, 4-Thursday, 5-Friday, 6-Saturday.

The source code of application can be found below.

, ,

Leave a comment

Coding conventions for Flex – AS3

On the link below you can find coding conventions for Flex and ActionScript 3.0. Just quick browse through the conventions will give you some idea about what you should and shouldn’t do the next time you are spitting out Flex and AS3 code. Found it by following Flex on Twitter 😉

, , ,

Leave a comment

For rounded corners sometimes cornerRadius is not enough…

Have you ever tried to use cornerRadius on a HBox for example and when you compiled your Flex code, the corners of the HBox were still squared…Well the thing is that you have to make one other things to get cornerRadius to work. You have to put the borderStyle property of your HBox to solid.

In the example below you can see one HBox that does not have borderStyle=”solid” and the other one that does, and the difference is obvious 🙂 (again if you click on the picture it will take you to the actual application)

If for example you do not want to see the border is shown when we set borderStyle to solid just add the borderThickness to 0 (with borderThickness=”0″).

The code of application is in the picture below.


Leave a comment

Should we make an iPhoto Clone using Flex

This week I was playing around with the new iPhoto on my MacBook, I have to say that I was impressed by the program, the facial recognition is super fun.

Than later I taught to myself wouldn’t it be nice if i try to recreate some of iPhoto features using Flex (but not the cool face recognition part). So if anyone thinks it would be a cool project to do, and to reveal how everything will be done, let me know 🙂


Leave a comment