Flex
-
Upload
kirthiiyer -
Category
Technology
-
view
346 -
download
3
Transcript of Flex
FLEX 3.0
T-111.5360 presentation
Challenge in web application
• Web vs desktop application (cons)
– Lack of client-side intelligence
– Lack of usability and responsiveness
– Lack of error checking, Validation – Lack of error checking, Validation
– Lack of event handling
– Lack of advanced controls
– Professional look and feel
– Not cost efficient to develop
– Security issue
Benefit of web application
• Easy to deploy
• Operating system independent (basic XHTML,
css, Javascript)
• Question: is it possible to merge web and
desktop application, so that we gain the
advantage of both
Solution of RIA
• Real Design pattern
• Responsiveness and interactivity
• Simplifying and improving user interaction
• Broad reach and ease of distribution• Broad reach and ease of distribution
• Better usability, complete tasks quickly and
accurately.
• Use rich data visualization to make better
decisions.
What is Adobe Flex?
• Rich internet application (RIA)
• OOP, ActionScript 3
• Creates swf files, like Flash
• For programmers rather than designers
Reusable and extendable UI components• Reusable and extendable UI components
• Data retrieval and event handling
• Flash and Flex can work together
• Integrate with animation, video and sound
• Designers and programmers can intergrate their work
What is Adobe Flex?
Why Flex?
• Human-centered UI without worrying about browser limitations
• A runtime environment with almost 100% deployment to all Internet users
• Service-oriented client (SOC)• Service-oriented client (SOC)
– enhanced usability promised
– reliable and secure connectivity to back-end systems
• High-performance, cross-platform runtime
• Enterprise data integration
• Support for disconnected computing
• High performance on data transfer
Where can Flex be used
• Business application
• Analysis report (graphical)
• Geography maps
• Web store• Web store
• Rich media application
• Mobile phone, camera, TV and etc
How Flex works? Is it free?
• Flex SDK is open source, free.
– The Flex Framework
– The standalone compiler
• What cost money?
– Flex Builder – Eclipse-based IDE
– Flex Charting – A library of interactive charting
– Flex Charting – A library of interactive charting components
– LiveCycle Data Services –built in data managment, Flex-Ajax bridge, Java Message Service adapter, enterprise.
Flex Component
� Visual� Alert, colorPicker, comboBox, grid, scrollBar,
tabBar, progressBar, etc.
� Button, checkbox, linkBar, popup, radio.
� Date, loader, menu, text, containers.� Date, loader, menu, text, containers.
� Effect� AddItemAction, blur, move, pause, rotate.
� Validators and Formatters� User input validation, date, phone, etc.
� Charts, OLAPDataGrid, Print
Designing a UI - Layout
• "Components“: mostly use built-in components and containers, but we can build our own.
• "Containers" are layout tools that position the interface widgets or data in the application.
• Components defined within a container are called • Components defined within a container are called children of the container.
• At the root of a Flex application is a single container, called the Application container.
• Containers provide a hierarchical structure that lets us control the layout characteristics of child components.
Flex Event
• Events let a programmer know when the user
interacts with an interface component
• You define event listeners, also called event
handlers, in ActionScript to process events. handlers, in ActionScript to process events.
Registering an event handler in MXML
Create an inline event handler in the MXML definition
Registering an event listener through ActionScript
Positioning components
• 3 ways to position components in a Flex
application:
– Using automatic positioning viewSourceURL="src/LayoutAutomatic/index.html" viewSourceURL="src/LayoutAutomatic/index.html"
– Using absolute positioning viewSourceURL="src/LayoutAbsolute/index.html"
– Using constraint-based layout viewSourceURL="src/LayoutConstraintsBottomRight/index.html"
Flex Demo