Have been taking trainings on Flex, this is a prelude to a multipart session which I took

1. More Insight in Flex
4/5/2012 1

2. Contents
• Custom Component Development in Flex
o About Custom Flex Components
o Custom Events
o Metadata Tags in Custom Components
• Introduction to Styling and Skinning
o Using Styles and Themes
o Creating Skins
• Introduction to Data Services For Flex
o Accessing Server-Side Data with Flex
o Using HTTPService components
o Handling result and fault events
2
4/5/2012
4/5/2012 2

3. Stop and Ponder
• What is MXML?
• What are namespaces?
• What is ActionScript?
More insights into Flex: Yukti Kaura 3
4/5/2012
4/5/2012 3

4. Custom Component Development in Flex
4/5/2012 4

5. Key Benefits of Custom Component
Development
Ease of development
Maintainability
Reusability
More insights into Flex: Yukti Kaura 5
4/5/2012
5 5-Apr-12

6. What are 'Components' for Flex?
Visual Non Visual •Flex is implemented as
Components Components an ActionScript class
hierarchy.
All visual components are
derived from
Common examples are
Validator, Formatter and
•Components inherit
UIComponent class effect base class
the
properties, methods, ev
ents, styles, and effects
Visual components can be
‘ ’ or ‘Containers’
of their superclasses.
•To create your own
Common examples are
Container –
components, you create
Group, BorderContainer
etc.. Control - subclasses from any
Button, Label etc…
other class in the Flex
component hierarchy. 6
4/5/2012 More insights into Flex: Yukti Kaura
4/5/2012 6

7. Why Component?
Component/module is based on the concept of ‘Loose coupling.’
A component is like a BlackBox to any other component using it
Information Events –
as properties IN OUT user/system/custom
or methods
More insights into Flex: Yukti Kaura 7
4/5/2012
4/5/2012 7

8. Where does the visual component lie in MVC?
invokes
operations
renders
model
state
initiates updates
remote calls model data
More insights into Flex: Yukti Kaura 8
4/5/2012
4/5/2012 8

9. Componentization of a Flex App
In Flex, a module corresponds to a custom component, implemented either in MXML
or in ActionScript. The following image shows an example of a Flex application divided
into components:
More insights into Flex: Yukti Kaura 9
4/5/2012
4/5/2012 9

10. MXML and ActionScript components
•To create a custom
component in ActionScript,
you create a subclass from a
class in the Flex class
hierarchy.
•When you create a custom
component in MXML, the
Flex compiler automatically
creates an ActionScript
class.
Two components based on the Flex Button component, one defined in
ActionScript and the other in MXML
More insights into Flex: Yukti Kaura 10
4/5/2012
4/5/2012 10

11. Deciding to create components in MXML or
ActionScript
• For simple components, such as components
that add a basic feature to an existing
component, it is simpler and faster to create them
in MXML.
• When your new component is a composite
component that contains other components, and
you can express the positions and sizes of those
other components using one of the Flex layout
containers, you should use MXML to define your
component.
• To modify the behavior of the component, such
as the way a container lays out its children, use
ActionScript.
• To create a visual component by creating a
subclass from UIComponent, use ActionScript.
• To create a nonvisual component, such as a
formatter, validator, or effect, use ActionScript.
More insights into Flex: Yukti Kaura 11
4/5/2012
4/5/2012 11

12. Creating our First Custom Visual Component
Demo1:The Problem
• Create a reusable Employee Information Panel
with his photograph and name
• Pass the component’s information using a class
property value
More insights into Flex: Yukti Kaura 12
4/5/2012
4/5/2012 12

13. Step By Step Visual Component creation
Use the
• Root Tag component
specifies • Declare • Declare the
superclass of Metadata - namespace in
the MXML Styles,Events the host file
component.(Fl etc… • Use the
ex or Custom) • Define component in
• Component’s properties and MXML , in this
filename behaviour manner
becomes it’s <namespace:c
MXML tag omponentNa
name me>
More insights into Flex: Yukti Kaura 13
4/5/2012
4/5/2012 13

14. Creating a class property in MXML
Instantiate
custom
Use the component
variable in and pass in
component the value
Create a logic
variable and
define an
access modifier
Create a
Script Block
in the
component
file
More insights into Flex: Yukti Kaura 14
4/5/2012
4/5/2012 14

15. Deploying components
Components can be deployed
as SWC files or as part of a
Runtime Shared Library (RSL).
RSL is a way to reduce the
size of application's SWF file
by externalizing shared assets
into stand-alone files that can
be separately downloaded and
cached on the client. These
shared files are known as
Runtime Shared Libraries or
RSLs.
More insights into Flex: Yukti Kaura 15
4/5/2012
4/5/2012 15

16. Stop and Ponder
• What is a SWC file?
• What is the output of a Flex
Application and what is its
expansion?
More insights into Flex: Yukti Kaura 16
4/5/2012
4/5/2012 16

17. Creating Custom Events
(Optional) Use Instantiate
(Optional) Create a
the [Event] met and Dispatch
subclass from
adata tag to Populate the event
the flash.events.Ev
make the event properties of using
ent class to create
public so that the event the dispatchE
an event class that
the MXML with data vent() metho
describes the
compiler d.
event object.
recognizes it
More insights into Flex: Yukti Kaura 17
4/5/2012
4/5/2012 17

18. Metadata tags
• Metadata tag is the information to
the Flex compiler that describes • [DefaultProperty]
how components are used in a • [Deprecated]
Flex application • [Effect]
• The metadata tags define
component attributes, data binding
properties, events, and other • [Exclude]
properties of the component. Flex • [ExcludeClass]
interprets these statements during
compilation; they are never • [Inspectable]
interpreted during run time. • [InstanceType]
• Metadata statements are • [NonCommittingChangeEvent]
associated with a class • [RemoteClass]
declaration, an individual data
field, or a method. • [Transient]
• [ArrayElementType]
More insights into Flex: Yukti Kaura 18
4/5/2012
4/5/2012 18

19. Saying it with
• [Event] metadata tag is used to define events dispatched by a component so that the Flex
compiler can recognize them as MXML tag attributes in an MXML file
• The Event metadata keyword has the following syntax:
• [Event] metadata tag is added in one of the following locations:
o ActionScript components Above the class definition, but within the package definition, so that the
events are bound to the class and not a particular member of the class.
o MXML components In the <fx:Metadata> tag of an MXML file.
• The [Style] metadata tag to define the MXML tag attribute for a style property for the
component .
• The Style metadata has the following syntax
e.g.Definition of the textSelectedColor style property
[Style(name="textSelectedColor",type="Number",format="Color",inherit="yes")]
• The [Embed] metadata tag imports JPEG, GIF, PNG, SVG, and SWF files at compile time.
Also imports image assets from SWC files.tag attribute for a style property for the component .
• The Embed metadata has the following syntax
More insights into Flex: Yukti Kaura 19
4/5/2012
4/5/2012 19

20. Introduction to Styling and Skinning
4/5/2012 20

21. Topics
• Applying application
styles using CSS
• Skinning the application
• Using the Theme
Browser
More insights into Flex: Yukti Kaura 21
4/5/2012
4/5/2012 21

22. Styling Or Skinning?
Styling:- When you want to customize the appearance of a Flex component, you have two
options. One is to tweak the default appearance of the component using styling. Each Flex
component has an extensive set of style properties you can set to change its appearance:
the roundness of corners, the colors used for fill gradients, the font, color, and size of
text, and so on.
Skinning:-If you find that you can’t achieve the look that you want purely through
styling, or if you just want to draw the appearance rather than tweaking a bunch of
knobs, then skins allow you to completely customize the appearance of a component.
More insights into Flex: Yukti Kaura 22
4/5/2012
4/5/2012 22

23. What is Skinning?
Skinning is the process of changing the appearance of a component by modifying or
replacing its visual elements. These elements can be made up of bitmap images, SWF
files, or class files that contain drawing methods that define vector images.
• Button States • Default Skins for a button for
State Skin Property up, over and down appear as
Down DownSkin follows
over overSkin
up upSkin Up over down
disabled disabledSkin
selectedDisabled selectedDisabledSkin
• Other controls have similar
selectedDown selectedDownSkin
states with associated skins
selectedOver selectedOverSkin
selectedUp selectedUpSkin
More insights into Flex: Yukti Kaura 23
4/5/2012
4/5/2012 23

24. Styling and Skinning the app
Demo2:The Problem
• Create a custom CSS Style
• Skin The Application
• Change the component theme using theme browser
More insights into Flex: Yukti Kaura 24
4/5/2012
4/5/2012 24

25. Understanding Spark Skins
More insights into Flex: Yukti Kaura 25
4/5/2012
4/5/2012 25

26. Creating a skin for spark components
More insights into Flex: Yukti Kaura 26
4/5/2012
4/5/2012 26

27. Skinning a Button
Demo3:The Problem
• Create a button Skin
• Use two icons
• Apply Glow Filter to the button label text
• Apply highlight to the whole button
More insights into Flex: Yukti Kaura 27
4/5/2012
4/5/2012 27

28. Defining a contract between Skin and
component
Define the
Define the
Extend the Define the Skin HostComponent Define the Skin
Visual graphic
SparkSkin class states with Metadata Parts
elements
Tag
More insights into Flex: Yukti Kaura 28
4/5/2012
4/5/2012 28

29. Introduction to Data Services
4/5/2012 29

30. Accessing Server side data with flex
Adobe® Flex® data access components use
remote procedure calls to interact with
server environments, such as PHP, Adobe
ColdFusion, and Microsoft ASP.NET
Depending on the types of interfaces you
have to a particular server-side
application, you can connect to a Flex
application by using one of the following
methods:
•HTTP GET or POST by using the HTTPService
component
•Simple Object Access Protocol (SOAP)
compliant web services by using the
WebService component
•Adobe Action Message Format (AMF)
remoting services by using the RemoteObject 30
4/5/2012 More insights into Flex: Yukti Kaura
component
4/5/2012 30

31. HttpService Component
• You can use an HTTPService component with any kind of server-
side technology.
• Can make a GET or POST request to a
HTTPRequest specified URL
• Can use HTTP or HTTPS
• Within declarations tag set create
HTTPService object
Making • No request is made at this time
HTTPRequests • Make the HTTP Request using the
send() method
More insights into Flex: Yukti Kaura 31
4/5/2012
4/5/2012 31

32. Creating HttpService Object
More insights into Flex: Yukti Kaura 32
4/5/2012

33. Defining result format property
More insights into Flex: Yukti Kaura 33
4/5/2012
4/5/2012 33

34. Handling Result
More insights into Flex: Yukti Kaura 34
4/5/2012
4/5/2012 34

35. Handling Faults
More insights into Flex: Yukti Kaura 35
4/5/2012
4/5/2012 35

36. More insights into Flex: Yukti Kaura 36
4/5/2012
4/5/2012 36

37. 4/5/2012 37