Learning Employee Directory 3. UI

2 min read

Return to table of contents

When I downloaded and launched ED, I was impressed by its elegant user interface. So how is implemented?

The relevant files are:

And the hierarchy of UI is shown below. I expand each custom component (except EmployeeView and DepartmentView). In principle, one can imagine that we can put all the components into a single file (ApplicationUI.mxml) but it will be too complicated to manipulate. Also, this application used state to control the user interface. If you are not familiar with state, you may read flex documentation.

Following the hierarchy of UI, the first file we encounter is actually the root mxml file: employeedirectory.mxml:
[code=”js”]




[/code]
I intentionally leave out the logging part for simplicity. Let’s digest this file line by line:
[code=”js”]

[/code]
Using Application instead of WindowedApplication is actually necessary to create a transparent-window application (in AIR beta 3). I tried to change Application to WindowedApplication and found I can’t get rid of the default minimize, maximize and close button.

XML name space is important. It tells the compiler where to find your custom components: ApplicationUI.

height and width are not what the size of the window you see because the transparent background are part of the application. So height and width are not important as long as their values are larger than 400×320. You can try 800×600.

This line also tells the application to respond several events: applicationComplete, activate and deactivate. The latter two are simply fancy effects. The first one is to initialize the application.

[code=”js”]
ui.init();
[/code]
The initialization code is simple — just call the initialization code in ApplicationUI.

[code=”js”]

[/code]
You can imagine a lot of visual component has custom styles. The file controls such styling is in employeedirectory.css. See 3.1 style for more about style.

[code=”js”]

[/code]
This is the most important line in this file. It adds a custom component, called ApplicationUI, into the main application.

OK, we need to get the next file, ApplicationUI.mxml, following the hierarchy. The file is located under directory com.adobe.empdir.ui. It is the main UI file. All other visual components are children of ApplicationUI.
[code=”js”]
























[/code]
I left the script part out to highlight the visual component. We see that this ApplicationUI is a Canvas with some components inside. Note, Canvas is the only container that lets you explicitly specify the location of its children within the container by using the x and y properties of each child.

In ApplicationUI, we have a BackgroundBox, a custom component. By its name we guess it is the background. Its size is bound to the size of contentBox. If you open BackgroundBox.mxml, you will find it’s simply a VBox with drop shadow effect.

We also have a VBox (called contentBox) where the visual stuff is, including the TitleControls (logo text, the minimize button etc). Depending on different states, extra components will be added into the VBox.

First, let’s see how the logo text, the minimize/close button are organized. See TitleControls.mxml.
[code=”js”]














[/code]
TitleControls is a HBox as expected: the components are aligned left to right. From left to right, we see the logo text “EMPLOYEE DIRECTORY” (If you are using beta2 version you will see it is more fancy). You see another HBox, which contains the help button, minimize/close buttons. It is important to set the width of this HBox 100% and horizontalAlign right to makes these button appear on the right corner. Clicking these buttons also dispatch events or simply minimize/close the window.

Good, we have the logo and some essential buttons. In ApplicationUI you find depending on states, extra component will be added:

  1. If the state is “info”, a Label will be added under the TitleControls.
  2. If the state is “help”, a HelpView will be added under the TitleControls.
  3. If the state is “main”, a MainContentContainer will be added under the TitleControls.
  4. If the state is “error”, a TextArea will be added under the TitleControls.

Label and TextArea are straightforward. HelpView is also simple:
[code=”js”]










[/code]
It is a Canvas with a close button on right and a VBox. In side VBox, you find the logo image and some text.

It should be noted that clicking the close button will dispatch a event new Event( Event.CLOSE, true ). The true argument makes this event bubble and be captured by parent component.

Now the MainContentContainer component. We can imagine by our experience with the application that it should contains a text input area for searching, and a employee or department view.
[code=”js”]
















[/code]
We see it contains a custom search bar (which support auto complete), an image (the magnifying icon. Depending on the states, it will display either employee or department.


Don't want to miss new papers in your field? Check out Stork we developed:

How much money did I make from an app?

Undoubtedly some people are very successful in making money by developing a smartphone app. Back in 2012 I developed an app called “Handbook of...
Xu Cui
27 sec read

Handy programs to visualize NIRS data (2): plotTopoMap

Often you need to view the spatial pattern of activation as in the example below. plotTopoMap allows you to do that. It probably only...
Xu Cui
37 sec read

Flash 3D video demo

Racer Ostrova Zombie
Xu Cui
0 sec read

Leave a Reply

Your email address will not be published. Required fields are marked *