Adobe Hispano 2010 - Personalizando componentes en Flex 4

1,655 views

Published on

Mi presentación de la charla "Personalizando componentes en Flex 4" para Adobe Hispano.
http://www.adobehispano.com
http://www.arfug.com.ar

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,655
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide












  • Adobe Hispano 2010 - Personalizando componentes en Flex 4

    1. 1. Personalizando Componentes en Flex 4 Mariano Carrizo Co-Manager Argentina RIA & Flex User Group http://www.arfug.com.ar @kiwox
    2. 2. Personalizando componentes en Flex 4 Adobe Hispano 2010 - Mariano Carrizo
    3. 3. Personalizando componentes en Flex 4 UIComponent SkinnableComponent Container SkinnableContainerBase LayoutContainer SkinnableContainer Application MX Application Spark Adobe Hispano 2010 - Mariano Carrizo
    4. 4. Personalizando componentes en Flex 4 Estilos CSS s|DropDownList • Herencia { borderColor: #CCDB28; • Reutilizables color: #534444; contentBackgroundColor: #FEFDD7; cornerRadius: 5; • Genéricos focusColor: #C5DB78; selectionColor: #C1C248; } Adobe Hispano 2010 - Mariano Carrizo
    5. 5. Personalizando componentes en Flex 4 Spark Skins • Componentes específicos • Look & Feel completo • Comportamientos • CSS Adobe Hispano 2010 - Mariano Carrizo
    6. 6. Personalizando componentes en Flex 4 Spark Skins | Anatomía • <s:SparkSkin> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"> • HostComponent <fx:Metadata> [HostComponent("spark.components.Panel")] </fx:Metadata> • Styling Scripts <fx:Script fb:purpose="styling"> ... </fx:Script> • <s:states> Estados <s:State name="normal" /> <s:State name="disabled" /> </s:states> • SkinParts <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1"> <s:fill> <s:SolidColor color="0xC0C0C0" /> </s:fill> • </s:Rect> Elementos gráficos </s:SparkSkin> Adobe Hispano 2010 - Mariano Carrizo
    7. 7. Personalizando componentes en Flex 4 Spark Skins | HostComponent Acceso a propiedades <s:SolidColor color="{hostComponent.algunaPropiedad as uint}" /> Acceso a estilos <s:SolidColorStroke color="{getStyle('color')}" weight="3"/> Adobe Hispano 2010 - Mariano Carrizo
    8. 8. Personalizando componentes en Flex 4 Spark Skins | Aplicación Mediante estilos @namespace s "library://ns.adobe.com/flex/spark"; s|Panel { skinClass:ClassReference("misSkins.MiPanelSkin"); } Propiedad skinClass <s:Panel skinClass="misSkins.MiPanelSkin"/> Adobe Hispano 2010 - Mariano Carrizo
    9. 9. Demo
    10. 10. Próximamente... Libro Flex 4 Con Flash Catalyst y Flash Builder
    11. 11. Personalizando Componentes en Flex 4 Mariano Carrizo Co-Manager Argentina RIA & Flex User Group http://www.arfug.com.ar @kiwox

    ×