SlideShare a Scribd company logo
1 of 30
Download to read offline
Creating ScalableCustom Components in Flex 4 using Spark,[object Object],Dan Orlando,[object Object]
Who is Dan Orlando?,[object Object],Universal Mind Consultant,[object Object],Adobe Community Professional,[object Object],Preacher of best practices with Flex,[object Object],Author (latest: Flex 4 in Action),[object Object],Blog-banger (danorlando.com),[object Object],Master DJ,[object Object],Entrepreneur,[object Object],Flex Jedi,[object Object]
Flex 4 is coming!,[object Object]
Welcome to Spark!,[object Object],Not a death sentence for Flex 3 apps,[object Object],Builds on Flex 3 component architecture (UIComponent),[object Object],More Stable & Scalable,[object Object],Structurally and organizationally superior,[object Object],Design patterns,[object Object],Separation of concerns,[object Object],Code reusability (for real this time!),[object Object]
Will the real MVC please stand up?,[object Object],Tight Coupling + dependecies,[object Object],= “domino effect”,[object Object]
design patterns,[object Object],micro-architectures,[object Object],best practices,[object Object],Controversy in the Community,[object Object]
Anatomy of a Flex 4 Application ,[object Object]
Spark Component Anatomy,[object Object],"The general rule is any code that is used by multiple skins belongs in the component class, and any code that is specific to a particular skin implementation lives in the skin.",[object Object]
Spark Architecture,[object Object]
Ely’s Reveal (MAX ’09),[object Object],Dan’s Reveal,[object Object],(Ely’s Reveal, simplified for Flex 4 in Action, ‘10),[object Object]
“Drop down and reveal”,[object Object]
“Slide out and reveal”,[object Object]
“Pop a wheelie and reveal”,[object Object]
Reveal Structure,[object Object]
COMPONENT,[object Object],Skin States and Skin Parts,[object Object]
States and Parts,[object Object],States: defined in the component, controlled by the skin,[object Object],Parts: defined in the skin, controlled by the component,[object Object]
SKIN,[object Object],Skin States,[object Object]
SKIN,[object Object],Skin Parts,[object Object]
Declaring the [HostComponent],[object Object],This tells the skin what component to apply itself to.,[object Object]
Hammer Time,[object Object],STOP,[object Object],STOP,[object Object],This is a composite component!,[object Object]
Simple vs. Composite,[object Object],Composite: derived from composition; composed of more than one simple component,[object Object],Simple: Basic control or container; example: Canvas, Label, Button, ComboBox,[object Object]
SKIN,[object Object],Simple Component Skinning,[object Object]
Declaring the [HostComponent],[object Object],Example: the “openButton” skin:,[object Object]
APPLICATION,[object Object],Binding skins with CSS,[object Object]
COMPONENT,[object Object],Properties ,[object Object]
COMPONENT,[object Object],Method Overrides,[object Object]
SKIN,[object Object],Animation & Effects,[object Object]
Summing it up…,[object Object],The component class must: ,[object Object],Define the skin(s) that correspond to it,[object Object],Identify skin parts with the [SkinPart] metadata tag,[object Object],Identify view states that are supported by the component using the [SkinState] tag,[object Object],The skin class must:,[object Object],Use the [HostComponent] metadata tag to specify the corresponding component,[object Object],Declare view states and define their appearance ,[object Object],Define display information of skin parts,[object Object]
Custom Flex 4 Component Resources,[object Object],Ryan Stewart:http://blog.digitalbackcountry.com/2009/07/building-custom-components-in-flex-4-skinparts/,[object Object],Dan Orlando:http://danorlando.com/?p=379,[object Object],Pete DeHaan:http://blog.flexexamples.com/,[object Object],Chet Haase:http://graphics-geek.blogspot.com/,[object Object],Flex 4 in Action (ch. 17)Orlando, Ahmed, Bland, Hooks(coming soon),[object Object]
Flex 4 is not as scary as Ozzytrying to be scary after all, so have fun Flexing!!!,[object Object]

More Related Content

Viewers also liked

David Coletta Architecting A Shared Codebase For Browser And Desktop Final
David Coletta Architecting A Shared Codebase For Browser And Desktop FinalDavid Coletta Architecting A Shared Codebase For Browser And Desktop Final
David Coletta Architecting A Shared Codebase For Browser And Desktop Finaldcoletta
 
Adobe Flex Don't Style It, Skin it!
Adobe Flex Don't Style It, Skin it!Adobe Flex Don't Style It, Skin it!
Adobe Flex Don't Style It, Skin it!DevelopmentArc LLC
 
Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009Ivan Ilijasic
 
P2P vs Sockets: Communication on the Flash Platform
P2P vs Sockets: Communication on the Flash PlatformP2P vs Sockets: Communication on the Flash Platform
P2P vs Sockets: Communication on the Flash Platformboushley
 
Adobe AIR - Mobile Performance – Tips & Tricks
Adobe AIR - Mobile Performance – Tips & TricksAdobe AIR - Mobile Performance – Tips & Tricks
Adobe AIR - Mobile Performance – Tips & TricksMihai Corlan
 
360|Flex Greenthreading In Flex
360|Flex Greenthreading In Flex360|Flex Greenthreading In Flex
360|Flex Greenthreading In FlexHuyen Tue Dao
 
Brief of mobile service
Brief of mobile serviceBrief of mobile service
Brief of mobile serviceSeungyul Kim
 
How Not To Code Flex Applications
How Not To Code Flex ApplicationsHow Not To Code Flex Applications
How Not To Code Flex Applicationsjeff tapper
 
3 Keywords For Mobile
3 Keywords For Mobile3 Keywords For Mobile
3 Keywords For MobileSeungyul Kim
 
Understanding the Mobile Ecosystem
Understanding the Mobile EcosystemUnderstanding the Mobile Ecosystem
Understanding the Mobile EcosystemAppia
 

Viewers also liked (12)

David Coletta Architecting A Shared Codebase For Browser And Desktop Final
David Coletta Architecting A Shared Codebase For Browser And Desktop FinalDavid Coletta Architecting A Shared Codebase For Browser And Desktop Final
David Coletta Architecting A Shared Codebase For Browser And Desktop Final
 
Adobe Flex Don't Style It, Skin it!
Adobe Flex Don't Style It, Skin it!Adobe Flex Don't Style It, Skin it!
Adobe Flex Don't Style It, Skin it!
 
Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009
 
Migrating fx3tofx4
Migrating fx3tofx4Migrating fx3tofx4
Migrating fx3tofx4
 
P2P vs Sockets: Communication on the Flash Platform
P2P vs Sockets: Communication on the Flash PlatformP2P vs Sockets: Communication on the Flash Platform
P2P vs Sockets: Communication on the Flash Platform
 
Adobe AIR - Mobile Performance – Tips & Tricks
Adobe AIR - Mobile Performance – Tips & TricksAdobe AIR - Mobile Performance – Tips & Tricks
Adobe AIR - Mobile Performance – Tips & Tricks
 
360|Flex Greenthreading In Flex
360|Flex Greenthreading In Flex360|Flex Greenthreading In Flex
360|Flex Greenthreading In Flex
 
Brief of mobile service
Brief of mobile serviceBrief of mobile service
Brief of mobile service
 
How Not To Code Flex Applications
How Not To Code Flex ApplicationsHow Not To Code Flex Applications
How Not To Code Flex Applications
 
3 Keywords For Mobile
3 Keywords For Mobile3 Keywords For Mobile
3 Keywords For Mobile
 
Understanding the Mobile Ecosystem
Understanding the Mobile EcosystemUnderstanding the Mobile Ecosystem
Understanding the Mobile Ecosystem
 
The Mobile Ecosystem
The Mobile EcosystemThe Mobile Ecosystem
The Mobile Ecosystem
 

Similar to Creating Custom Spark Components in Flex 4

Flex 4 Skinning - Nashville Flex Camp
Flex 4 Skinning - Nashville Flex CampFlex 4 Skinning - Nashville Flex Camp
Flex 4 Skinning - Nashville Flex CampMike Orth
 
Exploring Adobe Flex
Exploring Adobe Flex Exploring Adobe Flex
Exploring Adobe Flex senthil0809
 
What’s under your skin
What’s under your skinWhat’s under your skin
What’s under your skinjeff tapper
 
Flex4 Component Lifecycle
Flex4 Component LifecycleFlex4 Component Lifecycle
Flex4 Component LifecycleEffectiveUI
 
Flex4 Component Lifecycle
Flex4 Component LifecycleFlex4 Component Lifecycle
Flex4 Component LifecycleEffective
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep DiveEffective
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep DiveEffectiveUI
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...Fwdays
 
Leveraging the Power of Custom Elements in Gutenberg
Leveraging the Power of Custom Elements in GutenbergLeveraging the Power of Custom Elements in Gutenberg
Leveraging the Power of Custom Elements in GutenbergFelix Arntz
 

Similar to Creating Custom Spark Components in Flex 4 (20)

Flex 4 Skinning - Nashville Flex Camp
Flex 4 Skinning - Nashville Flex CampFlex 4 Skinning - Nashville Flex Camp
Flex 4 Skinning - Nashville Flex Camp
 
Exploring Adobe Flex
Exploring Adobe Flex Exploring Adobe Flex
Exploring Adobe Flex
 
What’s under your skin
What’s under your skinWhat’s under your skin
What’s under your skin
 
Flex4 Component Lifecycle
Flex4 Component LifecycleFlex4 Component Lifecycle
Flex4 Component Lifecycle
 
Flex4 Component Lifecycle
Flex4 Component LifecycleFlex4 Component Lifecycle
Flex4 Component Lifecycle
 
Apocalypse Soon
Apocalypse SoonApocalypse Soon
Apocalypse Soon
 
Test
TestTest
Test
 
ReactJS.pptx
ReactJS.pptxReactJS.pptx
ReactJS.pptx
 
Pcom xpcom
Pcom xpcomPcom xpcom
Pcom xpcom
 
XMPPart5
XMPPart5XMPPart5
XMPPart5
 
Jmp108
Jmp108Jmp108
Jmp108
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
 
DIY Flex
DIY FlexDIY Flex
DIY Flex
 
DIY Flex
DIY FlexDIY Flex
DIY Flex
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
 
Adobe Flex4
Adobe Flex4 Adobe Flex4
Adobe Flex4
 
Leveraging the Power of Custom Elements in Gutenberg
Leveraging the Power of Custom Elements in GutenbergLeveraging the Power of Custom Elements in Gutenberg
Leveraging the Power of Custom Elements in Gutenberg
 
flex_4_tutorials
flex_4_tutorialsflex_4_tutorials
flex_4_tutorials
 
flex_4_tutorials
flex_4_tutorialsflex_4_tutorials
flex_4_tutorials
 

Recently uploaded

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 

Recently uploaded (20)

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 

Creating Custom Spark Components in Flex 4

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

Editor's Notes

  1. Response A
  2. Response A