Basics of Flex Components, Skinning

of 37 /37
06/18/2 022 1 More Insight in Flex

description

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

Transcript of Basics of Flex Components, Skinning

Page 1: Basics of Flex Components, Skinning

04/11/2023

1

More Insight in Flex

Page 2: Basics of Flex Components, Skinning

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

Page 3: Basics of Flex Components, Skinning

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?

Page 4: Basics of Flex Components, Skinning

04/11/2023

4

Custom Component Development in Flex

Page 5: Basics of Flex Components, Skinning

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

Ease of development

Maintainability

Reusability

Key Benefits of Custom Component Development

Page 6: Basics of Flex Components, Skinning

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

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.

Page 7: Basics of Flex Components, Skinning

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

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

Page 8: Basics of Flex Components, Skinning

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

Where does the visual component lie in MVC?

View

Service

Model

Controller

rendersmodelstate

invokesoperations

updatesmodel data

initiatesremote calls

04/11/2023

8

Page 9: Basics of Flex Components, Skinning

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

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

Page 10: Basics of Flex Components, Skinning

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

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

Page 11: Basics of Flex Components, Skinning

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

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

Page 12: Basics of Flex Components, Skinning

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

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

Page 13: Basics of Flex Components, Skinning

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

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>

Page 14: Basics of Flex Components, Skinning

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

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

Page 15: Basics of Flex Components, Skinning

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

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.

Page 16: Basics of Flex Components, Skinning

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

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?

Page 17: Basics of Flex Components, Skinning

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

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

Page 18: Basics of Flex Components, Skinning

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

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]

Page 19: Basics of Flex Components, Skinning

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

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

Page 20: Basics of Flex Components, Skinning

04/11/2023

20

Introduction to Styling and Skinning

Page 21: Basics of Flex Components, Skinning

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

Topics

• Applying application styles using CSS

• Skinning the application• Using the Theme

Browser

04/11/2023

21

Page 22: Basics of Flex Components, Skinning

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

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.

Page 23: Basics of Flex Components, Skinning

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

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.

Page 24: Basics of Flex Components, Skinning

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

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

Page 25: Basics of Flex Components, Skinning

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

Understanding Spark Skins

04/11/2023

25

Page 26: Basics of Flex Components, Skinning

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

Creating a skin for spark components

04/11/2023

26

Page 27: Basics of Flex Components, Skinning

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

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

Page 28: Basics of Flex Components, Skinning

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

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

Page 29: Basics of Flex Components, Skinning

04/11/2023

29

Introduction to Data Services

Page 30: Basics of Flex Components, Skinning

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

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

Page 31: Basics of Flex Components, Skinning

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

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

Page 32: Basics of Flex Components, Skinning

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

Creating HttpService Object

Page 33: Basics of Flex Components, Skinning

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

04/11/2023

33

Defining result format property

Page 34: Basics of Flex Components, Skinning

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

04/11/2023

34

Handling Result

Page 35: Basics of Flex Components, Skinning

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

Handling Faults

04/11/2023

35

Page 36: Basics of Flex Components, Skinning

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

04/11/2023

36

Page 37: Basics of Flex Components, Skinning

04/11/2023

37