• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Basics of Flex Components, Skinning
 

Basics of Flex Components, Skinning

on

  • 1,280 views

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

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

Statistics

Views

Total Views
1,280
Views on SlideShare
1,187
Embed Views
93

Actions

Likes
1
Downloads
21
Comments
0

4 Embeds 93

http://eurekaneuphoria.blogspot.in 61
http://eurekaneuphoria.blogspot.com 26
http://www.linkedin.com 4
http://eurekaneuphoria.blogspot.com.au 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Content SlideUse Aricentred, bold, or both when emphasizing words, do not italicizeNumber of bullets: 6Title of the slide - No. of words: 5, No. of characters: 40Words in each bullet: Max 10, No. of characters in each bullet: Max 118
  • Separator SlideSection heading –Max 6 words 50 charactersSub title -left aligned, not more than two lines with three words each – 35 characters in each line
  • One reason for you to create a component is to customize an existing Flex component for your application requirements. This customization could be as simple as setting the label property of a Button control to Submit to create a custom button for all of your forms.You might also want to modify the behavior of a Flex component. For example, a VBox container lays out its children from the top of the container to the bottom in the order in which you define the children within the container. Instead, you might want to customize the VBox container to lay out its children from bottom to top.Another reason to customize a Flex component is to add logic or behavior to it. For example, you might want to modify the TextInput control so that it supports a key combination to delete all the text entered into the control. Or, you might want to modify a component so that it dispatches a new event type when a user carries out an action.
  • You define a main MXML file that contains the  tag.In your main MXML file, you define an ActionScript block that uses the  tag. Inside the ActionScript block, you write ActionScript code, or include external logic defined by an ActionScript file. Typically, you use this area to write small amounts of ActionScript code. If you must write large amounts of ActionScript code, you should include an external file.The main MXML file uses MXML and ActionScript to reference components supplied with Flex, and to reference your custom components.Custom components can reference other custom components.
  • Large Image with content (Image on Right)Guidelines for images - Do not use image border, Do not use transparent or semi-transparent images
  • Large Image with content (Image on left)Guidelines for images - Do not use image border, Do not use transparent or semi-transparent images
  • Separator SlideSection heading –Max 6 words 50 charactersSub title -left aligned, not more than two lines with three words each – 35 characters in each line
  • Separator SlideSection heading –Max 6 words 50 charactersSub title -left aligned, not more than two lines with three words each – 35 characters in each line

Basics of Flex Components, Skinning Basics of Flex Components, Skinning Presentation Transcript

  • More Insight in Flex 4/5/2012 1
  • 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 24/5/2012 4/5/2012 2
  • Stop and Ponder • What is MXML? • What are namespaces? • What is ActionScript? More insights into Flex: Yukti Kaura 34/5/2012 4/5/2012 3
  • Custom Component Development in Flex 4/5/2012 4
  • Key Benefits of Custom Component Development Ease of development Maintainability Reusability More insights into Flex: Yukti Kaura 54/5/2012 5 5-Apr-12
  • 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. 64/5/2012 More insights into Flex: Yukti Kaura 4/5/2012 6
  • 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 74/5/2012 4/5/2012 7
  • 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 84/5/2012 4/5/2012 8
  • 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 94/5/2012 4/5/2012 9
  • 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 104/5/2012 4/5/2012 10
  • 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 114/5/2012 4/5/2012 11
  • 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 124/5/2012 4/5/2012 12
  • 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 134/5/2012 4/5/2012 13
  • 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 144/5/2012 4/5/2012 14
  • 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 applications 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 154/5/2012 4/5/2012 15
  • 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 164/5/2012 4/5/2012 16
  • 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 174/5/2012 4/5/2012 17
  • 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 184/5/2012 4/5/2012 18
  • 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 194/5/2012 4/5/2012 19
  • Introduction to Styling and Skinning 4/5/2012 20
  • Topics • Applying application styles using CSS • Skinning the application • Using the Theme Browser More insights into Flex: Yukti Kaura 214/5/2012 4/5/2012 21
  • 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 224/5/2012 4/5/2012 22
  • 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 234/5/2012 4/5/2012 23
  • 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 244/5/2012 4/5/2012 24
  • Understanding Spark Skins More insights into Flex: Yukti Kaura 254/5/2012 4/5/2012 25
  • Creating a skin for spark components More insights into Flex: Yukti Kaura 264/5/2012 4/5/2012 26
  • 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 274/5/2012 4/5/2012 27
  • 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 284/5/2012 4/5/2012 28
  • Introduction to Data Services 4/5/2012 29
  • 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 304/5/2012 More insights into Flex: Yukti Kaura component 4/5/2012 30
  • 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 314/5/2012 4/5/2012 31
  • Creating HttpService Object More insights into Flex: Yukti Kaura 324/5/2012
  • Defining result format property More insights into Flex: Yukti Kaura 334/5/2012 4/5/2012 33
  • Handling Result More insights into Flex: Yukti Kaura 344/5/2012 4/5/2012 34
  • Handling Faults More insights into Flex: Yukti Kaura 354/5/2012 4/5/2012 35
  • More insights into Flex: Yukti Kaura 364/5/2012 4/5/2012 36
  • 4/5/2012 37