SlideShare uma empresa Scribd logo
1 de 15
Flex 4 Ihor Matrofaylo
Adobe Flash Catalyst Adobe Flash Builder 4 Work flow with Flash Catalyst and Flash Builder FXG Support Updated Layout Model Spark Component Architecture Skinning Enhancements Improvements of View States Compiler Performance New Text Capabilities Agenda
Adobe Flash Catalyst Adobe® Flash® Catalyst™ is a new professional interaction design tool for rapidly creating expressive interfaces and interactive content without writing code. Create interactive portfolios, product guides, microsites, site navigation, interfaces for RIAs and more. When is Flash Catalyst shipping? The final product will ship in the first half of 2010. http://labs.adobe.com/technologies/flashcatalyst/
Adobe Flash Builder 4 Flash Builder 4, formerly known as Flex Builder, is the latest version of the Eclipse based IDE for application developers. The new version comes with a handful of updates including: conditional debug break points, more refactoring tools, and FlexUnit 4 support. As always, it includes MXML, ActionScript 3, CSS editors, a visual designer, and the Flex performance and memory profiler (profiler only in the Professional version). When will the final version of Flash Builder 4 be available? We expect it to be in the first half of 2010. http://labs.adobe.com/technologies/flashbuilder4/
Work flow with Flash Catalyst and Flash Builder 4
Work flow with Flash Catalyst and Flash Builder 4 Demo. Adobe Flash Catalyst for design. Demo. Adobe Flash Builder 4 for development.
FXG Support FXG (Flash XML Graphics) is an xml graphics file format being developed by Adobe Systems, which enables portability of assets between tools. PSD AI PNG FXG MXML FXG http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification
Updated Layout Model Spark component Halo component Canvas Group vscrollbars vscrollbars layout layout h scrollbars h scrollbars http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/
Spark Component Architecture Flex 4 Component Lifecycle Methods Overriding UIComponent methods createChildren() commitProperties() invalidateProperties() measure() invalidateSize() updateDisplayList() invalidateDisplayList() Overriding SkinnableComponent methods attachSkin(), detachSkin() addElement() partAdded(), partRemoved() getCurrentSkinState() invalidateSkinState()
Skinning Enhancements Spark component Spark Skin [HostComponent] – points to the component you're skinning, and it is required to access the component from the skin. [SkinPart]– defines part of the host component. [SkinState]– defines state of the host component. http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning https://www.adobe.com/devnet/flex/articles/flex4_skinning.html
Skinning Enhancements Demo. Skinning. spark.components.Button & spark.skins.spark.ButtonSkin
Improvements of View States Flex 3 View State model Flex 4 View State Model Base View State State A Base component State B State A Component A Base component includeIn=“A” State B Component A excludeFrom=“B” Component B Component B http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax
Compiler Performance Adobe's Peter Donovan did publish some notes on his early efforts, stating that he believed a 25% improvement would be reached without significant restructuring. http://opensource.adobe.com/wiki/display/flexsdk/Notes+on+Compiler+Performance+Improvements
New Text Capabilities ,[object Object]
 Font size: MIN = 1 & MAX = 720

Mais conteúdo relacionado

Mais procurados

Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep DiveEffective
 
Second-generation managed packages
Second-generation managed packagesSecond-generation managed packages
Second-generation managed packagesBohdan Dovhań
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Riaravinxg
 
Exploring Layouts and Providers
Exploring Layouts and ProvidersExploring Layouts and Providers
Exploring Layouts and Providerssenthil0809
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep DiveEffectiveUI
 
Web(abap introduction)
Web(abap introduction)Web(abap introduction)
Web(abap introduction)Kranthi Kumar
 
MAX 2008 - Building your 1st AIR application
MAX 2008 - Building your 1st AIR applicationMAX 2008 - Building your 1st AIR application
MAX 2008 - Building your 1st AIR applicationrtretola
 
Flex 4 Overview
Flex 4 OverviewFlex 4 Overview
Flex 4 OverviewRJ Owen
 
Part 1 implementing a simple_web_service
Part 1 implementing a simple_web_servicePart 1 implementing a simple_web_service
Part 1 implementing a simple_web_servicekrishmdkk
 
Flex vs HTML5
Flex vs HTML5Flex vs HTML5
Flex vs HTML5Ray Wong
 
M365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionM365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionThomas Daly
 

Mais procurados (13)

Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
 
Second-generation managed packages
Second-generation managed packagesSecond-generation managed packages
Second-generation managed packages
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Ria
 
Exploring Layouts and Providers
Exploring Layouts and ProvidersExploring Layouts and Providers
Exploring Layouts and Providers
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
 
Web(abap introduction)
Web(abap introduction)Web(abap introduction)
Web(abap introduction)
 
MAX 2008 - Building your 1st AIR application
MAX 2008 - Building your 1st AIR applicationMAX 2008 - Building your 1st AIR application
MAX 2008 - Building your 1st AIR application
 
Creating a comp
Creating a compCreating a comp
Creating a comp
 
Flex 4 Overview
Flex 4 OverviewFlex 4 Overview
Flex 4 Overview
 
Part 1 implementing a simple_web_service
Part 1 implementing a simple_web_servicePart 1 implementing a simple_web_service
Part 1 implementing a simple_web_service
 
Flex vs HTML5
Flex vs HTML5Flex vs HTML5
Flex vs HTML5
 
Azure rev002
Azure rev002Azure rev002
Azure rev002
 
M365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionM365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx Version
 

Semelhante a FB4FC-Workflow

Eclipsist2009 Rich Client Roundup
Eclipsist2009 Rich Client RoundupEclipsist2009 Rich Client Roundup
Eclipsist2009 Rich Client RoundupMurat Yener
 
Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009Ivan Ilijasic
 
Adobe flex an overview
Adobe flex  an overviewAdobe flex  an overview
Adobe flex an overviewSubin Sugunan
 
FITC-review-FUGUK
FITC-review-FUGUKFITC-review-FUGUK
FITC-review-FUGUKjmwhittaker
 
Flash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange CountyFlash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange CountyJuan Sanchez
 
Dojo Toolkit from a Flex developer's perspective
Dojo Toolkit from a Flex developer's perspectiveDojo Toolkit from a Flex developer's perspective
Dojo Toolkit from a Flex developer's perspectivecjolif
 
Flex Remoting With WebORB v1.0
Flex Remoting With WebORB v1.0Flex Remoting With WebORB v1.0
Flex Remoting With WebORB v1.0guest642dd3
 
flex and flash platform
flex and flash platformflex and flash platform
flex and flash platformMuhammad Rodhy
 
Introduction To Adobe Flex And Semantic Resources
Introduction To Adobe Flex And Semantic ResourcesIntroduction To Adobe Flex And Semantic Resources
Introduction To Adobe Flex And Semantic Resourceskeith_sutton100
 
Adobe Flash History and Basics
Adobe Flash History and BasicsAdobe Flash History and Basics
Adobe Flash History and BasicsTasawr Interactive
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
The AMIS Report from Oracle Open World and JavaOne 2011
The AMIS Report from Oracle Open World and JavaOne 2011The AMIS Report from Oracle Open World and JavaOne 2011
The AMIS Report from Oracle Open World and JavaOne 2011Lucas Jellema
 

Semelhante a FB4FC-Workflow (20)

Eclipsist2009 Rich Client Roundup
Eclipsist2009 Rich Client RoundupEclipsist2009 Rich Client Roundup
Eclipsist2009 Rich Client Roundup
 
Adobe Flex
Adobe FlexAdobe Flex
Adobe Flex
 
Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009
 
Flex RIA
Flex RIAFlex RIA
Flex RIA
 
Adobe flex an overview
Adobe flex  an overviewAdobe flex  an overview
Adobe flex an overview
 
FITC-review-FUGUK
FITC-review-FUGUKFITC-review-FUGUK
FITC-review-FUGUK
 
DIY Flex
DIY FlexDIY Flex
DIY Flex
 
DIY Flex
DIY FlexDIY Flex
DIY Flex
 
Flash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange CountyFlash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange County
 
Dojo Toolkit from a Flex developer's perspective
Dojo Toolkit from a Flex developer's perspectiveDojo Toolkit from a Flex developer's perspective
Dojo Toolkit from a Flex developer's perspective
 
Flex Remoting With WebORB v1.0
Flex Remoting With WebORB v1.0Flex Remoting With WebORB v1.0
Flex Remoting With WebORB v1.0
 
Adobe Flex Resources 6439
Adobe Flex Resources 6439Adobe Flex Resources 6439
Adobe Flex Resources 6439
 
Adobe Flex Resources
Adobe Flex ResourcesAdobe Flex Resources
Adobe Flex Resources
 
Adobe flex
Adobe flexAdobe flex
Adobe flex
 
flex and flash platform
flex and flash platformflex and flash platform
flex and flash platform
 
Introduction To Adobe Flex And Semantic Resources
Introduction To Adobe Flex And Semantic ResourcesIntroduction To Adobe Flex And Semantic Resources
Introduction To Adobe Flex And Semantic Resources
 
Adobe Flash History and Basics
Adobe Flash History and BasicsAdobe Flash History and Basics
Adobe Flash History and Basics
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
The AMIS Report from Oracle Open World and JavaOne 2011
The AMIS Report from Oracle Open World and JavaOne 2011The AMIS Report from Oracle Open World and JavaOne 2011
The AMIS Report from Oracle Open World and JavaOne 2011
 
Visual Studio 2010 RTMtoSP1
Visual Studio 2010 RTMtoSP1Visual Studio 2010 RTMtoSP1
Visual Studio 2010 RTMtoSP1
 

FB4FC-Workflow

  • 1. Flex 4 Ihor Matrofaylo
  • 2. Adobe Flash Catalyst Adobe Flash Builder 4 Work flow with Flash Catalyst and Flash Builder FXG Support Updated Layout Model Spark Component Architecture Skinning Enhancements Improvements of View States Compiler Performance New Text Capabilities Agenda
  • 3. Adobe Flash Catalyst Adobe® Flash® Catalyst™ is a new professional interaction design tool for rapidly creating expressive interfaces and interactive content without writing code. Create interactive portfolios, product guides, microsites, site navigation, interfaces for RIAs and more. When is Flash Catalyst shipping? The final product will ship in the first half of 2010. http://labs.adobe.com/technologies/flashcatalyst/
  • 4. Adobe Flash Builder 4 Flash Builder 4, formerly known as Flex Builder, is the latest version of the Eclipse based IDE for application developers. The new version comes with a handful of updates including: conditional debug break points, more refactoring tools, and FlexUnit 4 support. As always, it includes MXML, ActionScript 3, CSS editors, a visual designer, and the Flex performance and memory profiler (profiler only in the Professional version). When will the final version of Flash Builder 4 be available? We expect it to be in the first half of 2010. http://labs.adobe.com/technologies/flashbuilder4/
  • 5. Work flow with Flash Catalyst and Flash Builder 4
  • 6. Work flow with Flash Catalyst and Flash Builder 4 Demo. Adobe Flash Catalyst for design. Demo. Adobe Flash Builder 4 for development.
  • 7. FXG Support FXG (Flash XML Graphics) is an xml graphics file format being developed by Adobe Systems, which enables portability of assets between tools. PSD AI PNG FXG MXML FXG http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification
  • 8. Updated Layout Model Spark component Halo component Canvas Group vscrollbars vscrollbars layout layout h scrollbars h scrollbars http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/
  • 9. Spark Component Architecture Flex 4 Component Lifecycle Methods Overriding UIComponent methods createChildren() commitProperties() invalidateProperties() measure() invalidateSize() updateDisplayList() invalidateDisplayList() Overriding SkinnableComponent methods attachSkin(), detachSkin() addElement() partAdded(), partRemoved() getCurrentSkinState() invalidateSkinState()
  • 10. Skinning Enhancements Spark component Spark Skin [HostComponent] – points to the component you're skinning, and it is required to access the component from the skin. [SkinPart]– defines part of the host component. [SkinState]– defines state of the host component. http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning https://www.adobe.com/devnet/flex/articles/flex4_skinning.html
  • 11. Skinning Enhancements Demo. Skinning. spark.components.Button & spark.skins.spark.ButtonSkin
  • 12. Improvements of View States Flex 3 View State model Flex 4 View State Model Base View State State A Base component State B State A Component A Base component includeIn=“A” State B Component A excludeFrom=“B” Component B Component B http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax
  • 13. Compiler Performance Adobe's Peter Donovan did publish some notes on his early efforts, stating that he believed a 25% improvement would be reached without significant restructuring. http://opensource.adobe.com/wiki/display/flexsdk/Notes+on+Compiler+Performance+Improvements
  • 14.
  • 15. Font size: MIN = 1 & MAX = 720
  • 16. Vertical text alignment and highlighting
  • 17. Bidirectional text and over 30 writing systems
  • 18. Selection, editing and flowing text across multiple columns and linked containers, and around inline images
  • 19. Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
  • 20. Cut, copy, paste, undo and standard keyboard and mouse gestures for editing (work with text object model)http://labs.adobe.com/technologies/textlayout/ http://labs.adobe.com/technologies/textlayout/demos/
  • 21. Thank you for attention.

Notas do Editor

  1. Create simple design in AI.Create new project from AI design in Catalyst.Save as FXP project.Open save projectin Flash Builder 4.
  2. Speak about FXG format.
  3. In the new Spark component model, core logic, skinning, and layout have been broken out so that they are handled independently of one another. The Spark component model is built on top of the Halo component model. Basically, that means that it extends from Halo's core base class UIComponent, allowing Flex4 to be adopted incrementally and Flex 3 components to be used in Flex 4 applications.http://flexstuff.co.uk/wp-content/uploads/examples/coverflowlayout/Coverflow_Flex4.swfhttp://flexstuff.co.uk/wp-content/uploads/examples/timemachinelayout/TimeMachine_Flex4.swf
  4. Speak about new methods: addElement(), addElementAt(). Now addChild() method throws exception.Declaration without adding on a stage in MXML.
  5. Applying skinsAttach skin; Skin parts. Base classes for skin. Meta tags. How define skin and aplly it on component.
  6. Show states on demo.
  7. A major pain point most everyone developing Flex 3 applications has encountered is poor compiler performance. Thus, one of the published goals for Gumbo was to improve compiler performance in Flex 4. At this point, there are not any official benchmarks published from this work. However, Adobe's Peter Donovan did publish some notes on his early efforts, stating that he believed a 25% improvement would be reached without significant restructuring. He also said that to achieve a 3-4 times improvement, a redesign will be required.
  8. Show TLF graphic.Some features.