Tutorial part 4 – Displaying Images

In this part we will learn the following:

• Creating a simple Flex application
• Displaying images

Creating a simple Flex application

Application is the default container tag. Skeleton of an MXML application file contains

• XML document type definition
• Opening and closing component tag set

Specifying namespace

• use xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags
• http://www.adobe.com/2006/mxml is the uniform resource identifier which associates a prefix (in this case mx) with a manifest file as follows

<namespace>
<url>http://www.adobe.com/2006/mxml</url>
<manifest>mxml-manifest.xml</manifest>
</namespace><namespace> <url>http://www.adobe.com/2006/mxml</url> <manifest>mxml-manifest.xml</manifest>
</namespace>

• Flex-config.mxml is located in installdirectory\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flex-config.xml

<strong>Setting the layout property</strong>

The layout property defaults to your last selection when building an application or component from the appropriate dialog box

The following are 3 layout property.

• absolute: Visual elements must have specific x, y values or constraints for positioning
• horizontal: Visual elements presented horizontally
• vertical: Visual elements presented vertically

If the layout property is not used in the Application tag, the default layout is vertical

Adding UI Controls

UI Controls are used to display user interface type components like Text, text input, buttons, images, combo boxes etc in an application

All UI tags are add between the application tag set or another container component

Example of the Label control to display a single line of text

<mx:Label text=“Hello Flexers!” />

Specifying components properties

Component properties can be specified in two ways

• As an attribute of the XML tag

<mx:Label text=“Hello” />

• As nested tags or nodes

<mx:Label>
<mx:text> Hello</mx:text>
</mx:Label>

Commenting you MXML code

Flex uses XML style comments which is similar to HTML comments

<! – - this is my comment – - >

<strong>Displaying images</strong>

The following type of images can be used in flex.

• JPEG (non progressive)
• GIF (can be transparent)
• PNG (can be transparent)
• SWF
• SVG (can only be embedded at compile time)

Methods for displaying images

There are two ways to display images in flex.

• Load them dynamically at runtime
• Embed them in SWF file

We can Specify image source in three ways

• Via source property of an Image control ; will load image dynamically at runtime
• Use Image load() method to add the images dynamically at runtime
• Embed them in the SWF at compile time using the @Embed directive; useful when you need instantaneous loading and offline application

Displaying images Examples

1) Loading dynamically at runtime

• Specify the image using the source attribute of the control
• Image is loaded at runtime

<mx:Image source=“myimage.jpg” />

• Assign an id to the image to reference in ActionScript

<mx:Image source=“myimage.jpg” id=“imageID” />

2) Using the load() method

Dynamically switch out the image using the load() method of the Image class as mentioned below

<mx:Image source=“addis.jpg” id=“imageID” width=“250” height=“250” />

<mx:Button label=“Change pic” click=“imageID.load(‘flower.jpg’)” />

3) Embedding images at compile time

You can embed images at compile time for instantaneous loading
To embed, use the @Embed directive when specifying the image source

<mx:Image source=@Embed(‘../images/myImage.jpg’)” />

Pros of embedding image

• Image is available immediately, it is part of the SWF
• Very useful for creating application that are able to work offline

Cons of embedding images

• Adds to applications SWF size
• Slows down application initialization process
• Must recompile application every time image changes
• Cannot use in data binding calls

Part 5: Laying out Flex application with containers

User Interface Development in SDLC

“User Interface” or UI Development is not a new term in software development life cycle. Starting from a small web site development to application or software development, User Interface plays a very important role. Many people believe, UI development is just about coding HTML, CSS and Java-Script but UI is way beyond these technical terms.

UI Development is not limited to Website development but extended to any kind of application development including client server. Even in wireframes and Prototyping we make use of UI technologies.

A user is not going to experience a software or website based on the backend technology used, but based on the User Interface and its experience.

This topic is intended to understand

- The role and importance of User Interface development in the SDLC
- How UI Development can be catered in each phase of SDLC starting from the Requirement gathering phase.

Introduction

Product development is the process of designing, creating, and marketing an idea or product. The product can either be one that is new to the marketplace or one that is new to a particular company, or an existing product that has been improved. In many instances a product will be labeled new and improved when substantial changes have been made.

Today Product development is becoming a need for every business, from a simple website to ecommerce websites, banking domain to mobile technology every business needs software or a product to communicate with the users.

We can categorize the product into this broad bucket

• Consumer Products
• Public Safety,
• Rugged Handheld Computers Utilities,
• Mobile & Fleet Management
• Mapping & GIS,

• Embedded Systems
• Portable Devices In-Vehicle Navigation & Telematics Tracking,
• Instrumentation,
• Security

• Engineering & Construction
• Construction
• Construction Asset Management
• Marine Construction
• Mining
• Surveying
• Infrastructure

• Agriculture Solutions
• Precision Agriculture
• Guidance
• Flow and Application Control
• Water Management
• Information Management

• Advance devices
• Defense
• Precise Timing

Each of these products needs a User Interface through which a user can accomplish their tasks. Having the best user interface provides the best customer experience and today’s competitive market-place demands that companies maximize the ease of use for their customers.

All product development goes through a similar development lifecycle, starting from requirement gathering to testing phase. Unfortunately, in the development cycle of most of the applications, the user interface design does not begin until most of the development has been completed, and is usually starved for time and resource

The results are hardly positive. Either the UI design is severely affected by assumptions made during the application development or additional resources are added to rework or completely re-program all or part of the application to accommodate new design. This leads to problems like design compromises, delay, budget overruns etc.

Given this the most effective strategy is to integrate and design the UI parallel to each phase of development lifecycle

In short, integrating UI design in the development process have several businesses benefits as follows:

- Create a better product
- Increase customer satisfaction and retention
- Allow greater flexibility in responding to customer feedback
- Lower development costs
- Shorten the development lifecycle

Lets look at the UI design process and how we can integrate it in all the phases.

User Interface design process

User interface development process can be categorized into 4 phases as below:

- Research and Analysis
- Design and Branding
- Prototype Development
- Production

This structured process can maximize communication between the company and its clients, lower development costs, and most importantly deliver the best user interface design.
This process is flexible and modular, thus allowing client to determine which phase are appropriate for their needs, and can be applied to both the creation of user interface for new applications as well as enhancements of existing applications.

2.1 Research and Analysis

Process:
In traditional Research & Analysis phase, two categories of information are gathered and analyzed by the user experience team.

1) Information about the users of the application
2) Information about the application itself

This establishes the context for User Interface design and this context informs the entire design process.

Additionally, during this phase as a part of UI development, UI developers can start researching about current market trends, UI technologies, and competitive analysis. This research can help the UX team during the consecutive phase of SDLC and both UI and UX team will have clarity of things possible and impossible and LOE (level of effort) required during development.

For existing applications the Research & Analysis phase also determines the strengths and weakness of current UI.

How:
The user data is gathered answering the following questions

- Who the users are?
- What are their skill levels?
- What are their qualitative expectations for the application?
- What task do they need to perform with this application?
- Under what environmental conditions will they use this application?
- Under what time conditions and constraints will they use this application?

The application information is gathered answering the following questions

- What problem is the application intended to solve?
- What are the functional purposes of the application?
- What are the operational purposes of the application?
- What are the marketing purposes of the application?
- What are the user interface specifications of the application?
- What are the software, hardware and graphical requirements to create and deliver the appli-cation?

The User Interface trends can be gathered answering the following questions

- What are the current UI trends?
- What are the current UI design patterns?
- Which are the latest tools and technologies being used?
- What tools and technologies are our competitors using?
- Pros and Cons of using any latest technology for the current product?

Deliverables:

- Personas
- Competitive landscape
- Usability goals
- Functional and non functional specifications

2.2 Design and Branding

Process:

During the design and branding phase, User Interface design is created that addresses the specific needs identified in the research & analysis phase and creates, revise or leverage the applications brand.

Involving UI design into Design phase

During design phase UI developers can work closely with the UX team to define the User interface (Wireframes, Visual design). A User Experience team may think out of the box while creating wireframes and visual design, but may not be aware of challenges, possibilities and limitations. Involving UI developers in this phase may ease the process, as UI developers understand the technologies and possibilities. This will reduce the last minute efforts from the UI developer’s side and additionally both the UI and UX team, as well as client will have a clear expectations set.

Deliverable:

- A discussion of the design philosophy and strategy used to create the UI design, including an explanation of how research brief informed the UI design
- A comprehensive set of screen layouts illustrating every part of the UI design
- Key screen that present the visual design and branding for the application.

Wireframe:

Wireframes is presented as a comprehensive set of screen layout consisting of Black and white sketches of every screen in the application. At this point the visual and graphic design processes have not yet begun.

Wireframe is an important step; because it helps the clients focus on how used will interact with the application rather than become entrenched in relatively subjective issues such as color or visual style. It enables us to postpone those and other subjective issues

By necessity this is a cyclic process, and once the screen layouts have been approved, a visual design is created that is informed by the UI design.

Visual design

Visual design process begins with the branding of application.

2.3 Prototype development

Process:

Using the approved design document as blueprint, prototypes of the User Interface designs are created. Based on clients needs the prototypes are created using HTML or flash. Prototypes can be low fidelity or high fidelity based on user needs.

The scope of the prototype created during this phase is tailored to the specific application and the user testing requirements. Some applications require a comprehensive click through or working model of the entire interface, while others only require a prototype of core functionality.

The prototype serves as

- A communication and review tool for the client
- An implementation guide for the software developer
- A user testing tool
- A working prototype enables clients to see how the user interface will perform without having a commit programming resource

Another benefit to a working prototype is that it dramatically improves the communication among UI design, marketing and application development teams, as well as any other key stake holders since marketers, designers and developers often think and use language differently, having a functional prototype leaves fewer issues open to interpretation or misunderstandings

Prototypes are infact an opportunity to identify any remaining user interface issues. Should there be design document and prototype are modified to incorporate changes prior to final approval.

Once the prototype is approved, development team can work to implement new user interface design quickly and efficiently without interrupting the development process to correct design is-sues.

The utilization of prototype also has significant marketing benefits. Since the prototype closely stimulates the actual application, extensive user testing can be one before the programming starts, which also produces significant cost savings. Additionally positive user feedback is a validation of design, confirming that the application delivers a user experience that meets or exceeds customer expectations. This positive feedback can be used for both internal and external marketing purpose, by building confidence in the rollout and promoting user adoption.

Deliverable: Interactive prototype of the new user interface

2.4 Production

A proper UI and UX team collaboration and Integration of UI design from the starting of SDLC can reduce lot of efforts and confusion. Also it can help in successful and timely delivery of the products in any company without any slippages and can increase customer satisfaction. Additionally it can help building ongoing relations with our clients.

Stay tuned for an interesting blog soon on “Ethnographic and demographic influence on design “

My latests passion

I have been in the field of user experience since 8.5 years by now and worked a lot on web technologies. My expertise lies in development and am a total novice in design.

Whenever I use to see professional icons and designs, I always use to appreciate them. Being a novice in design, I always loved design. I was always curious to know everything about designing, iconography, branding, color theory.

Normally people have the impression that developers cannot design and whenever I showed my interest in designing, many people told me the same. I took this as a challenge and thought, one day I will also design.

This interest of mine, generated a passion inside me to learn designing and I started gathering as much information as possible about designing.

2 days back I downloaded trial version of photoshop and started designing. I tried with designing small icons.

The first set of icons I developed is as follows. Though its not very professional and I know it needs some grooming, but I am happy that I was able to do some designing.

I showed this to my manager and colleagues and they were quite happy to see my design and encouraged my design. This generated more interest in me about designing and I tried some more design. This time I took help from one of the online tutorials and developed a book and this is what I came up with today.

Next I tried the following USB flash drive

After seeing the above design my colleagues liked it a lot. This is giving me more encouragement and I am falling in love with design.which