Basics of Flex Components, Skinning

04/11/2023

1

More Insight in Flex

04/11/2023 2

04/11/2023

2

Contents• Custom Component Development in Flex

o About Custom Flex Componentso Custom Eventso Metadata Tags in Custom Components

• Introduction to Styling and Skinningo Using Styles and Themeso Creating Skins

• Introduction to Data Services For Flexo Accessing Server-Side Data with Flexo Using HTTPService componentso Handling result and fault events

04/11/2023 3More insights into Flex: Yukti Kaura

Stop and Ponder

04/11/2023

3

• What is MXML?• What are namespaces?• What is ActionScript?

04/11/2023

4

Custom Component Development in Flex

04/11/2023 5More insights into Flex: Yukti KauraApr 11, 20235

Ease of development

Maintainability

Reusability

Key Benefits of Custom Component Development


What are 'Components' for Flex?

Visual Components

All visual components are derived from

UIComponent class

Visual components can be ‘Controls’ or

‘Containers’

Common examples are Container – Group,

BorderContainer etc.. Control - Button, Label

etc…

Non Visual Components

Common examples are Validator, Formatter and

effect base class

04/11/2023

6

•Flex is implemented as an ActionScript class hierarchy.

•Components inherit the properties, methods, events, styles, and effects of their superclasses.

•To create your own components, you create subclasses from any other class in the Flex component hierarchy.


Why Component?

04/11/2023

7

Component/module is based on the concept of ‘Loose coupling.’A component is like a BlackBox to any other component using it

IN OUTInformationas properties or methods

Events – user/system/custom


Where does the visual component lie in MVC?

View

Service

Model

Controller

rendersmodelstate

invokesoperations

updatesmodel data

initiatesremote calls

04/11/2023

8


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:

Componentization of a Flex App

04/11/2023

9


MXML and ActionScript components

04/11/2023

10

•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


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.

04/11/2023

11


Creating our First Custom Visual Component

04/11/2023

12

Demo1:The Problem• Create a reusable Employee Information Panel

with his photograph and name• Pass the component’s information using a class

property value


Step By Step Visual Component creation

04/11/2023

13

Define Root Tag• Root Tag

specifies superclass of the MXML component.(Flex or Custom)

• Component’s filename becomes it’s MXML tag name

Define the controls• Declare

Metadata - Styles,Events etc…

• Define properties and behaviour

Use the component• Declare the

namespace in the host file

• Use the component in MXML , in this manner <namespace:componentName>


Creating a class property in MXML

04/11/2023

14

Create a Script Block in the component file

Create a variable and define an access modifier

Use the variable in component logic

Instantiate custom component and pass in the value


Deploying components

04/11/2023

15

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.


Stop and Ponder

04/11/2023

16

• What is a SWC file?• What is the output of a Flex

Application and what is its expansion?


Creating Custom Events

04/11/2023

17

(Optional) Create a subclass from the flash.events.Event class to create an event class that

describes the event object.

(Optional) Use the [Event] metadata tag to make the event public

so that the MXML compiler

recognizes it

Instantiate and Dispatch the event using

the dispatchEvent() method.

Populate properties of

the event with data

http://livedocs.adobe.com/flex/3/langref/flash/events/Event.html


Metadata tags

• Metadata tag is the information to the Flex compiler that describes how components are used in a Flex application

• The metadata tags define component attributes, data binding properties, events, and other properties of the component. Flex interprets these statements during compilation; they are never interpreted during run time.

• Metadata statements are associated with a class declaration, an individual data field, or a method.

04/11/2023

18

• [Bindable]• [DefaultProperty]• [Deprecated]• [Effect]• [Embed]• [Event]• [Exclude]• [ExcludeClass]• [IconFile]• [Inspectable]• [InstanceType]• [NonCommittingChangeEvent]• [RemoteClass]• [Style]• [Transient]• [ArrayElementType]


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(name="eventName", type="package.eventType")]

• [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

[Style(name="style_name"[,property="value",...])]

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[Embed(source="",mimeType="")]

04/11/2023

19

04/11/2023

20

Introduction to Styling and Skinning


Topics

• Applying application styles using CSS

• Skinning the application• Using the Theme

Browser

04/11/2023

21


Styling Or Skinning?

04/11/2023

22

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.


What is Skinning?

• Button States

04/11/2023

23

• Default Skins for a button for up, over and down appear as follows

• Other controls have similar states with associated skins

State Skin Property

Down DownSkin

over overSkin

up upSkin

disabled disabledSkin

selectedDisabled selectedDisabledSkin

selectedDown selectedDownSkin

selectedOver selectedOverSkin

selectedUp selectedUpSkin

Up over down

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.


Styling and Skinning the app

04/11/2023

24

Demo2:The Problem

• Create a custom CSS Style• Skin The Application

• Change the component theme using theme browser


Understanding Spark Skins

04/11/2023

25


Creating a skin for spark components

04/11/2023

26


Skinning a Button

04/11/2023

27

Demo3:The Problem• Create a button Skin

• Use two icons• Apply Glow Filter to the button label text

• Apply highlight to the whole button


Defining a contract between Skin and component

04/11/2023

28

Extend the SparkSkin class

Define the Skin states

Define the HostComponent

with Metadata Tag

Define the Visual graphic elements

Define the Skin Parts

04/11/2023

29

Introduction to Data Services


Accessing Server side data with flex

04/11/2023

30

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 component


HttpService Component

• You can use an HTTPService component with any kind of server-side technology.

04/11/2023

31

•Can make a GET or POST request to a specified URL

•Can use HTTP or HTTPS

HTTPRequest

•Within declarations tag set create HTTPService object•No request

is made at this time

•Make the HTTP Request using the send() method

Making HTTPRequests


Creating HttpService Object


04/11/2023

33

Defining result format property


04/11/2023

34

Handling Result


Handling Faults

04/11/2023

35


04/11/2023

36

04/11/2023

37

Basics of Flex Components, Skinning

Technology

Transcript of Basics of Flex Components, Skinning