Adobe Flex: Creating a project – Part 3

Creating a Flex project and your first application
Now that we have seen how Flex builder looks lets start with creating our first flex project

Creating a project
A project is a grouping of resources that make up a flex application

When a Flex project is created a number of files and folders are automatically created as follows:

bin-debug folder: where your compiled applications resides

html-template folder: where the html wrapper page resides

.settings folder: where some configuration file resides

.actionScriptProperties, .flexProperties and .project files: project configuration files

src folder: All the MXML files, actionscript classes, assets reside inside this folder

libs folder: where custom class files reside

A main application file

Step 1: Select File > new > Flex project

Specify output folder. The default is bin-debug folder

Choose project build paths

The main MXML application file looks like this

page looks like this

Using the main application file

• The main application file contains the container set tag
• Each application can have only one associated application file
• The layout property is given the absolute value the first time you create an application
• Flex builder will retain your last layout selection for future applications if not specified.
• also If you do not specify the layout property, the layout will be vertical by default

Running the application file

Run the application by clicking the Run button. Run button is the green button on the top panel

What exactly happens when you click the run button?

back to tutorial part 1 | tutorial part 4 – Learning Flex fundamental

Adobe Flex: Flex Builder – Part 2

Understanding Adobe Flex Builder

Adobe Flex Builder is eclipse based development tool enabling:

• Intelligent coding that included editors like MXML, ActionScript, CSS, XML.
• Interactive step-through debugging and code hinting
• Rich Visual layout
• Visual UI and behaviors
• Interactive data visualization
• Skinning and styling

Flex builder consists of workbenches which refers to the flex builder development environment. The Flex builder workbench contains three primary elements

• Perspectives
• Editors
• Views

Perspectives

Perspectives are one of the element of Flex builder workspace.
Perspectives includes combination of views and editors that are suited to perform certain set of task.

Flex builder has two default perspectives

Development

This area is the development workspace and is used for code level development.

Debugging

This area is used for debugging the code.

Flex builder can have other perspectives if we are using plug-in configuration, like java.

Editors

An editor is the visual component in the workbench that is typically used to edit or browse the resource.

Flex builder Editor is where files of various types are edited in either

• Design mode

Design mode consists of visual components, which can be dragged , dropped and used.

• Source mode

Source modes is used for hand coding.

Views

A view supplies support tool when modifying a file in editor. Flex builder workbench consists of the following views

• Navigator view

Navigator view allows you to manage files, folders and projects

• Problems view

Problems view show errors in your code

• Outline view

Outline view hierarchically present and allows you to navigate to, all of the code elements and user interface in a file

Flex builder high level description with design mode enabled.

Flex builder high level description with source mode enabled.

Back to part 1 of this tutorial | part 3 – Creating a Flex project and your first application

Adobe Flex: Introduction to Flex 3 – Part 1

In this part, we will learn the following:

• Understanding Adobe Flex
• Adobe Flex product line
• Flex Architecture
• Flex resources

Understanding Adobe Flex

Adobe Flex is a RIA User Interface Framework that enables us to develop Rich Internet Application quickly, resulting in high productivity and customer satisfaction.

Adobe Flex is a highly productive, free open source framework which is used for building expressive web applications. Adobe Flex deploy consistently on:

• All major browser leveraging the Flash Player
• And on desktop with Adobe AIR

Where is Flex Used?

How Flex works?

The backbone of flex is ActionScript 3 and MXML (Macromedia XML). MXML again is set of ActionScript classes which comprises of some built-in UI components like Datagrid, Treegrid, Menubar, chart and so on.

MXML is used for creating the User Interface and ActionScript is used for event handling, data management etc.

Once the MXML and ActionScript is created and compiled, it gets converted into swf file and hence to view the Flex application we need flash player supported browsers.

Flex enables…

Flex Architecture

Lets look at high level of flex architecture

Flex Resources

Flex tutorials
http://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2-programming-tutorials.htm

Documentations
http://flex.org/
http://www.adobe.com/support/documentation/en/flex/

Flex component explorer
http://examples.adobe.com/flex3/componentexplorer/explorer.html

Flex tutorial – Part 2 Topics

Flex Builder

• Understand the Flex builder and its workbenches
• Use Flex builder effectively for design, development and debugging
• Create a Flex Project
• Create, compile and run a Flex application

Go to part 2 of this tutorial

Rich Internet Applications (RIAs)

Rich Internet Application (RIA) – this is the buzz word we hear quite often these days. Rich Internet Application which was coined by macromedia in 2002, was not very common till few years back, but with Web 2.0 boom RIA got a solid place in the web world.

So what is RIA

Earlier web was known as a one way communication system, where company use to showcase their details to end users. With the web 2.0 emergence, things totally changed. Web 2.0 gave the world wide web altogether a different persona. Where web was known to be a one way communication system, web 2.0 made it two way communication, where user was the king. Users can comment, rate, network, tag and so on and so forth.

Along with these flexibilities web 2.0 brought lot of new tools and technologies and concepts like Ajax, Adobe AIR, Adobe Flex, SilverLight, Isomorphic SmartClient and so on. With all these concepts came a buzz of creating web applications with richness and that is where RIA comes into picture.

So what does ‘Rich’ means in Rich Internet Application?

Rich Internet Application are applications which combine the flexibility and responsiveness of a desktop application with broad reach of the web. RIA gives user the flexibility to use a web application with the features that of a desktop application.

What is the concept of ‘rich’ in Rich Internet Application ?

The concept of richness can divided into 2 parts

• Richness in User Interface
• Richness in Data model

Richness in User Interface

Rich Internet Application (RIA) offers a very rich set of user interface controls which can intelligently interact with data model. some of them are:

Drag and Drop control and Accordion control

Auto Complete control

Tree Grid control

Data Grid control and Data sorting control

Charting control

Calender control

Rich Text editor control
Inline editing control
Auto save control

Richness in Data model

Any website or application is incomplete without data, so having a rich data model to fetch or control these data is important. Richness in data model means

• Ability to send and receive data asynchronously
• Ability to obtain data from server without redrawing the entire page
• Efficiently utilizing network bandwidth transmitting only the portion of data that has been changed
• Support of sophisticated data models

Anatomy of RIA
Adobe in one of their presentation showcased RIA as follows

Benefit of Rich Internet Application
Rich Internet Application (RIA) brings in lot of benefits for the end users and well as developers and companies. Some of them are as follows:

For End Users

• Responsive and Interactive
• Real time communication
• Fast and easy to use
• Allow users to remotely monitor and manage data
• Allows quicker task completion
• Cross platform support

For Business

• Increased customer loyalty
• Increase in new customers
• Increased productivity
• longer site visits
• Reduced bandwidth and operational costs

For Developers

• Easy to learn
• Ease of development

RIA tools and technologies
The term Rich Internet Application(RIA) may be new, but the technologies which RIA uses is the combination of already existing technologies. Most commonly used RIA tools and technologies are:

RIA Technologies

• Ajax (Asynchronous JavaScript and XML)
• XML
• JavaScript Object Notation (JSON)
• Advanced JavaScript

UI Frameworks

• Adobe Flex
• Microsoft Silverlight
• Google Web toolkit (GWT)
• Isomorphic SmartClient
• Java server faces (JSF)

JavaScript Frameworks

• Yahoo UI (YUI)
• JQuery
• Prototype
• Scriptaculous
• Dojo Toolkit
• Mootools

Universal Design

Have you ever wondered?
How a blind user will use the TV remote control?
How a disabled person will board the bus?
How old aged people will the climb staircase?
How a blind person will use the website?
How a color blind person will use an interface?

These are some questions we need ask ourselves while designing.This list is not over; we need to think about many such questions while designing. Design is not limited to a particular field, but design is very vast and is implemented in each and every field starting from automobile, communication, interior designing to user interface designing and a lot more.

While designing, we need to keep in mind all set of users and this is where the concept of “Universal Design” comes into picture. The word “universal design” may seem simple, but it holds lots of concepts, principles, techniques and process from a designer’s and end-user’s perspective. Let’s understand universal design in detail.

Universal design is the concept or approach to be more precise, of making any design accessible and usable by as many people as possible, irrespective of the age, situation and ability. It is a totally a new “paradigm shift” from the normal design process.

According to the “Americans with Disabilities Act (ADA) 1990” even people with disability have equal rights to work, study and use or access any product or services as a normal person and that is where the concept of “universal design” comes into picture. While designing any product, designers need to keep in mind the following “universal design principles” to make it more usable and accessible.

Equitable Use
Flexibility in Use
Simple and Intuitive Use
Perceptible Information
Tolerance for Error
Low Physical Effort
Size and Space for Approach and Use

Equitable Use: irrespective of age, ability or situation, a person should be able to effectively use a car, bus, elevator, mobile, computer, website, Interface and anything or everything what a normal person can use.

Flexibility in Use: design should be flexible enough to accommodate personal preferences. Example can be adjustable and customizable designs. Ease or flexibility of use makes design more usable by everyone

Simple and Intuitive Use: designers should understand one thing before designing an interface, that its not mandatory that all users will have equal level of technology knowledge, so we should accommodate this option, thus making interface simple and easy to use for a novice to expert. Systematic display system, visual display system helps in making any design intuitive. Proper use of colors and color combination also plays important role while making an intuitive design.

Perceptible Information: design should be able to communicate necessary information to the user effectively irrespective of the user’s ability and disability. For example a blind user, who is using an elevator, may not be able to see which floor he is in, so alternative solution of voice based support should be made available. Similarly a blind user may not be able to see directions in subways or stations, so alternative information system should be made available for such users.

Tolerance for Error: users tend to make mistake while using any interface or design or technology till they get acquainted to the system. “Universal design” means design should accommodate tolerance towards these common errors by helping users giving them “alerts”, “voice alerts” or “error messages” along with the solutions or support based system to help them overcoming from such problems in future.

Low Physical Effort: designers should understand one more thing that not necessarily all users will be “power users”; hence design should be simple enough to reduce physical effort. For example if adjustable interface or design needs users to manually adjust settings, it makes tedious for the users to use them and hence reducing the effectiveness , this can be avoided by using automated systems.

Size and Space for Approach and Use: this principle is important when designing car, bus, elevators, lifts, security system kind of interface or an interior design. These designs should provide ample space and flexibility for disabled users with wheelchairs to use them effectively and easily.

Let’s dive more into the “universal design” concept, by creating some user personas and relating them with the above mentioned principles.

Persona 1:

Name: Zara
Age: 18 years
Profession: Student

Zara is an 18 years old girl. She stays with her parents. Zara is very fond of using electronic gadgets. She lost both her legs in a car accident 2 years ago. She is totally dependable on wheelchair for all her daily work. Zara is doing her bachelors in arts from a regular college and needs to commute 10 miles daily. Due to her disability she cannot board bus or car easily, but at the same time, she wants to be self dependant rather than depending on others to help her out. She needs a transportation method which makes it easy for her to commute easily with less effort. An automobile engineer/designer needs to keep in mind people like Zara before designing a transportation interface. “Equitable use” makes sense when people like Zara are able to use it effectively and easily, without any hassle and confusion.

How can a car or bus be universally designed?

• Having automatic adjustable and twistable car seat, thus making it flexible to use
• Removable car seats so that 100% wheelchair dependant disabled users can replace it wheelchairs
• Having a “slider based bus system” for wheelchairs to climb easily without the need of lifting them, thus reducing the physical effort needed
• Having “no step bus system”, so that aged people need not worry about slipping from the bus, while trying to board.
• Blind users may not be able to see which location they reached, hence having a voice based information system in buses can help blind users to know where they reached

Toyota F1 Series

Chief Designer:
Toyota

Consulting Designer:
Satoshi Nakagawa

Date:
May 28 2009

Courtesy: http://www.pbs.org/pov/pov2004/freedommachines/special_universal_02.html

Persona 2:

Name: Nancy King
Age: 24 years
Profession: Housewife

Nancy is 24 year old women and a house wife by profession. She is disabled by birth and totally dependant on wheelchair. She stays with her husband, who is software professional and busy most of the time. Being a housewife, Nancy has vey little technology knowledge and finds it difficult to use technology spontaneously. Nancy doesn’t want her disability to become her weakness and wants to work like a normal housewife, like cooking for her husband, washing utensils etc. She wants a kitchen which is “universally designed” and where she should be able to work effectively like a normal person with “ease of use and learning” being her first priority.

How should an interior designer design a “universally designed kitchen” keeping in mind people like Nancy?

• Making the height of the kitchen cabinet, Cook top, Microwave stand accessible by wheelchair.
• Having an adjustable-height cabinets, can help all users to use them effectively. Also customizable design which can be changed based on user preferences also makes design effective and more usable.
• Having a removable sink and drying rack will give sufficient space for food preparation. This can again be re-fitted as and when required. Thus giving flexibility to people like Nancy or old aged people, who can’t stand and cook.
• Foldable cabinet doors under cooktop, providing sufficient knee space.
• Providing visual support can also help users to use kitchen more easily and effectively.
• Voice based support in kitchen can also be a good idea, thus making design accessible for people with low vision.
• Automated dishwasher or microwave system can help them easily placing dish without much effort.

Courtesy: http://www.thekitchendesigner.org/journal/2007/3/27/uber-universal-kitchen-design.html

Chief Designer:
GE appliances, the kitchen designer

Date:
May 28 2009

Courtesy
http://www.geappliances.com/design_center/universal_design/

Persona 3:

Name: Rodney Connors
Age: 75 years
Profession: Retired army many

Rodney is 75 years old man. He is a retired professional and stays alone in his 2 bedroom apartment which is on the 10th floor. He finds it difficult to walk and climb stairs and also have sight problem. Rodney has very little technology knowledge and finds it difficult to remember things, due to his growing age. He depends on electronic wheelchair most of the time. He needs an elevator system in his apartment which can accommodate his wheelchair also, making his life easy at this age.

How can we make a “universally designed” elevator?

• Increasing the width of the elevator hence giving ample space to use wheelchairs and thus making it approachable
• Big display screen, which displays the floor details big and clear, thus accommodating people like Rodney to use it with ease
• Voice based support system, which informs the user which floor the user is in, can also help the disabled user to use them effectively.

Courtesy: http://www.centrair.jp/en/service/sv-ud-facilities/index.html

Conclusion:

Irrespective of age, ability or disability and situations, every has the right to effectively use any products or services, hence designers should always be conscious about this fact and implement their design ideas to serve one and everyone. This is what universal design means.