• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Skinning in Flex 4
 

Skinning in Flex 4

on

  • 24,190 views

Presentation at Adobe Developer Summit 2009 India at Chennai and Hyderabad.

Presentation at Adobe Developer Summit 2009 India at Chennai and Hyderabad.

Statistics

Views

Total Views
24,190
Views on SlideShare
23,058
Embed Views
1,132

Actions

Likes
8
Downloads
452
Comments
1

9 Embeds 1,132

http://blog.saurabhnarula.com 617
http://saurabhnarula.com 301
http://www.slideshare.net 191
https://www-wave-opensocial.googleusercontent.com 9
http://www.linkedin.com 6
http://www.blog.saurabhnarula.com 4
http://translate.googleusercontent.com 2
http://www.lmodules.com 1
http://www.mefeedia.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • very good
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Not gonna talk about styling, though skinning is the next step after styling. 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. Skins can define the entire appearance, or only a part of the appearance, of a component in various states. Change visual appearance - Stlyling – css etc. Example – humans have skin, but have different color of skins.
  • 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. 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 you can use Adobe design tools to draw graphical skins for your components. Skins allow you to completely customize the appearance of a component.
  • The default skins for the up, over, and down states appear as follows(in the image) Other controls have similar states with associated skins. For example, RadioButton controls, which are subclasses of Button, also have up, down, and over skins. The ComboBox control has skins the define the appearance of the control when it is in the disabled, down, and over states.
  • This slide really sums up how skinning is done in flex 3. Stateful skins – define a skin that defines each state of the component programmatic skins – ActionScript or MXML classes graphical skins – bitmap images or swf files
  • Although embedding styling declarations directly into MXML files or ActionScript code is a powerful concept, but such techniques provide limited interaction between designers and Flex developers. And so full-fledged, customized look-and-feels for a Flex application ( are ) were still hard to achieve. For example, you want to create a button that performs a cross-fade from the Up state to the Over state as you roll mouse over it. In Flex 3, this is not a built-in behavior of the Button component. To implement the design requirement, you would have to first create a new programmatic skin that handles the different state changes; the skin is also responsible for managing the tween to create the fade. This is by no means a simple feat to accomplish, and for a developer, this could take anywhere from a few hours to a few days depending on your understanding of the component structure and how complex the design requirements are. Because Flex 3 requires a lot of code to solve a rather simple design requirement, we have seen the process of skinning components become one of the most time-consuming processes of Flex development. The further the design pushes away from the default UI behavior, the more time and development investment is required. This also means that as design requirements change, a project involves much more than simply updating the UI. Often you have to spend more time in the code to meet the design change.
  • Because Flex 3 requires a lot of code to solve a rather simple design requirement, we have seen the process of skinning components become one of the most time-consuming processes of Flex development. The further the design pushes away from the default UI behavior, the more time and development investment is required. This also means that as design requirements change, a project involves much more than simply updating the UI. Often you have to spend more time in the code to meet the design change.
  • Monkey Patching to achieve desired changes to the component view.
  • Separate data, logic and behavior from visuals, states, animation and layout
  • text field, icon, background
  • Copy MXML from default Button Skin Add two tags to create two icons Adjust position/size of icons and label All MXML! Extend viewIconForPhase & duplicate logic for new icon ~100 lines Extend layoutContents to position/size new icon and position/size existing components so nothing overlaps Requires ActionScript knowledge and understanding of Button component
  • Single, consistent mechanism for all skins - skinning a Button is the same as skinning a List item. Formal mechanism for skinning composite components through skin parts. Declarative control of all visual aspects of components so it can be easily created and manipulated by tools
  • A user is creating an application and wants to change the look and feel of an Button. Without having to write any ActionScript code, he creates a new ButtonSkin to use within his application. Because this skin file is MXML, a tool can be used to create/modify it; also, it's easy for a designer to come up with one or modify an existing one to suit their needs.
  • A developer is creating a custom component that he wants to sell to other customers. However, he wants the user to be able to modify the look and feel of the component. By extending SkinnableComponent and hooking into the SkinnableComponent lifecycle, the developer ensures skinning will be easy for the users.
  • A designer is looking to pocket some extra money on the side. He decides to create a set of skins for Flex components and packages them up in a SWC that he sells to other Flex application developers. The application developers change some CSS and start using the new skins.
  • Each component contains four conceptual pieces: model, skin, controller, and view-specific logic. The model contains the properties and business logic for the component. For example, a Range model has properties for minimumValue, maximumValue, stepSize, etc., and methods for stepping by a line or a page. The model does not contain any visual or behavioral information. The skin defines the visual elements of the component. The controller is the interface between the skin and the model. It has several key functions: * Defining the component behavior. For example, the Button controller has all of the mouse event handling logic. * Defining the visual states of the component. * Defining the parts of a component. For example, an FxScrollBar controller has 4 parts: up arrow, down arrow, thumb, and track. The view-specific logic helps position and size the different parts of a skin. For example, FxHScrollBar and FxVScrollBar have different view-specific logic which determine the position of the thumb. To make a circular scrollbar one would have to override this logic. A skinnable component is one whose skin can be changed during authoring or at runtime.
  • Putting the pieces together * The model and controller are typically written in ActionScript * Inheritance should be used to separate the model from the controller. In the framework, we try to do this; however, the distinction between model and controller can sometimes be unclear, especially when the model is a UI element. This is not a hard rule that one always needs to follow, but it is a recommendation when possible. * The skin is typically written in MXML. * The view-specific logic could be written in the skin file; however, most of the time the logic should be put into the component itself, or a subclass of the component, because lots of people need that logic and it makes skinning easier. An example of this is FxScrollBar->FxHScrollBar or FxScrollBar->FxVScrollBar. * For skinnable components, skins are associated through CSS
  • To establish association between a component and its skin , we need some sort of an agreement or contract
  • http://www.adobe.com/devnet/flex/articles/flex4_skinning.html
  • Adding graphics to your Flex applications can make them more attractive and usable. In many cases, you might want to add graphics that are vector-based, and not import images that don’t scale well. You can create vector based graphics in Flex by using one of the following APIs: FXG MXML Graphics FXG is a declarative syntax for defining static graphics. You typically use a graphics tool such as PhotoShop or Illustrator to export an FXG document, and then use the FXG document as a component in your Flex application. FXG components are highly optimized. MXML graphics, on the other hand, are a collection of classes that you use to define interactive graphics. You typically write MXML graphics code in Flash Builder. You can add interactivity to MXML graphics code because they use classes in the Flex SDK that are subclasses of GraphicElement. The result is not as optimized as FXG. The amount of interactivity when using FXG and MXML graphics is different. If you use MXML graphics, the tags are mapped to their ActionScript equivalent classes. You can reference the MXML graphic elements and have greater control over them. If you use FGX, then you cannot reference instances of objects within the FXG document from the application or other components. In addition, you cannot add MXML code to it, nor can you add ActionScript. FXG and MXML graphics define the following:Graphics and text primitives Fills, strokes, gradients, and bitmaps Support for filters, masks, alphas, and blend modes FXG and MXML graphics share very similar syntax. For example, in FXG, you can define a rectangle with the element. In MXML graphics, you use the tag. Most FXG elements have MXML graphics equivalents. FXG and MXML graphics do not share the same namespace. MXML graphics use the MXML namespace of the containing document. In most cases, this is the Spark namespace. FXG uses its own namespace.
  • http://www.adobe.com/devnet/flex/articles/flex4_skinning.html
  • States in Flex 4 are awesome Declare your states with a ‘State’ tag Describe ‘alternate views’ of your markup Change values, bindings, event handlers Include and exclude components as easily as setting visibility Unscoped entries specify the ‘default’ for all states States can be grouped into State Groups - see Flex documentation for more info tag to move children between states WARNING: Use NEW STATES in 2009 documents – 2006 still supports legacy states.
  • push method means taking a property from the component and stuffing it into the appropriate skin slot. On the other hand, if the skin asked the host component what the property value was, that would be the pull method.

Skinning in Flex 4 Skinning in Flex 4 Presentation Transcript