EffectiveUI Senior Software Architect RJ Owen’s presentation from Flash Camp Denver, October 2010. Covers the basics of Adobe Flex framework, how to slice frames, Flex 4 component theory and life-cycle.
EffectiveUI’s RJ Owen and Andy McIntosh take a deep dive into Adobe Flex 4 including language updates, MXML graphics and the new Flash Text Engine, effects and animations, containers and layout, and components.
EffectiveUI’s RJ Owen and Andy McIntosh take a deep dive into Adobe Flex 4 including language updates, MXML graphics and the new Flash Text Engine, effects and animations, containers and layout, and components.
Ad107 - Enhance Your Existing Applications with XPagesddrschiw
XPages allows you to build great looking, Web 2.0 style applications in browsers and Lotus Notes clients alike. This session will show you the tricks and tips on upgrading your existing applications with quick win performance, feature and UI enhancements. From simple design patterns for typical Lotus Domino developers, to easy OneUI styling and simple upgrade steps, this session will benefit all existing Lotus Notes and Domino developers looking for that "step up".
Starting with 8.5 tonnes of general waste going to landfill, the Fresh Olive Company implemented an environmental campaign to achieve zero landfill status. Being a food manufacturer with 130 employees it was imperative the employees get on board and fully back the initiative. This was both an environmental and internal communications challenge.
Working closely with Veris, they developed a creative stakeholder communications programme – Ready, Steady, Green! that was fun and resulted in operational improvements. The programme educated and inspired employees to do more with less through interactive workshops and visual communications tools. The interest and enthusiasm of the employees is maintained with additional seasonal campaigns.
The results were impressive, with green behaviours being embedded as a central focus of the business. Zero landfill status has been achieved, items have been donated to local charities and inedible food waste is now sent to Anaerobic Digestion which saves an impressive amount of carbon. Together, they proved that sustainable behaviours don’t need to be tedious or boring.
Presented by Stuart Goodman, stakeholder engagement specialist, Veris Strategies
Boots and Macmillan: working together to improve the lives of everyone living...Communicate Magazine
Boots UK and Macmillan Cancer Support united in partnership in 2009 to achieve a single game changing ambition; to help people affected by cancer access specialist information and support on the high street.
By leveraging the expertise and passion within both organisations, they created life-changing cancer support services delivered in a retail setting for the first time. There are now over 2,000 Boots Macmillan Information Pharmacists working in-store every day, and over 400 Boots Macmillan Beauty Advisors are helping people manage the visible side effects of cancer.
Hear from Rowena Howell, partnership services manager at Macmillan and Oonagh Turnbull, head of CSR at Boots UK on how this long-standing partnership is working to benefit so many people every day. Learn how they companies work together to combine their assets and knowledge to help people affected by cancer more powerfully than they could alone.
Ad107 - Enhance Your Existing Applications with XPagesddrschiw
XPages allows you to build great looking, Web 2.0 style applications in browsers and Lotus Notes clients alike. This session will show you the tricks and tips on upgrading your existing applications with quick win performance, feature and UI enhancements. From simple design patterns for typical Lotus Domino developers, to easy OneUI styling and simple upgrade steps, this session will benefit all existing Lotus Notes and Domino developers looking for that "step up".
Starting with 8.5 tonnes of general waste going to landfill, the Fresh Olive Company implemented an environmental campaign to achieve zero landfill status. Being a food manufacturer with 130 employees it was imperative the employees get on board and fully back the initiative. This was both an environmental and internal communications challenge.
Working closely with Veris, they developed a creative stakeholder communications programme – Ready, Steady, Green! that was fun and resulted in operational improvements. The programme educated and inspired employees to do more with less through interactive workshops and visual communications tools. The interest and enthusiasm of the employees is maintained with additional seasonal campaigns.
The results were impressive, with green behaviours being embedded as a central focus of the business. Zero landfill status has been achieved, items have been donated to local charities and inedible food waste is now sent to Anaerobic Digestion which saves an impressive amount of carbon. Together, they proved that sustainable behaviours don’t need to be tedious or boring.
Presented by Stuart Goodman, stakeholder engagement specialist, Veris Strategies
Boots and Macmillan: working together to improve the lives of everyone living...Communicate Magazine
Boots UK and Macmillan Cancer Support united in partnership in 2009 to achieve a single game changing ambition; to help people affected by cancer access specialist information and support on the high street.
By leveraging the expertise and passion within both organisations, they created life-changing cancer support services delivered in a retail setting for the first time. There are now over 2,000 Boots Macmillan Information Pharmacists working in-store every day, and over 400 Boots Macmillan Beauty Advisors are helping people manage the visible side effects of cancer.
Hear from Rowena Howell, partnership services manager at Macmillan and Oonagh Turnbull, head of CSR at Boots UK on how this long-standing partnership is working to benefit so many people every day. Learn how they companies work together to combine their assets and knowledge to help people affected by cancer more powerfully than they could alone.
Speciality chemicals company Johnson Matthey is a world leader in sustainable technologies. Digital communications manager Ben Thompson talks about how they launched a 'virtual briefcase' iPad app giving investors financial information about the company available anytime, anywhere. The company's digital strategy was recognised by the Digital Impact Awards 2012 where it won a gold award for best use of digital in its sector.
Open Government Implementation Model - Internal Data Monitoring - CeDEM 2012Bernhard Krabina
Enhancement of the Open Government Implementation Model (Lee/Kwak 2011). Internal Data Monitoring for public agencies to as decicion support for disclosing information to open data portals.
Reputation in Oil Gas and Mining 2014: Reputation, reputation risk and reputa...Communicate Magazine
Andrew Griffin, chief executive, Regester Larkin
Setting the scene for the conference, this opening session looks at three key concepts: reputation, reputation risk and reputation management. Using a new categorisation model, the session focuses on the origins of reputation risk before looking at how risks can be managed through the lifecycle. Andrew Griffin, CEO of Regester Larkin and author of Crisis, Issues and Reputation Management, shares his insight and experience.
An old presentation, which I used to introduce Rich Internet Applications and Adobe Flex to my friends.
Around 2 yrs old but good to serve the purpose.
Developing a Reverberation Plugin with the aim of a Genetic AlgorithmLorenzo Monni
In this project we developed a Reverberation Plugin using the RackAFX API in C++. We experimented a genetic algorithm to approximate the impulse response of a real reverberation, using a the perceptual framework of Generalized Feedback Network.
Salesforce lwc development workshops session #6Rahul Gawale
This is a series of sessions intended for developers who want to build components using the Lightning Web Component framework.
This session talks about:
Lifecycle Flow of LWC.
Lifecycle Hooks of LWC.
Evolution of UI Technologies, The User and Developer Expectations, What is different with Flex? , Where does it stand against other UI technologies?
Flex Concepts , Drawbacks of flex, Cairngorm Architectural Overview, Custom Framework Architectural Overview
http://in.linkedin.com/in/darshanvartak/
You’ve embarked upon a user experience project – updating your website or creating a Web or mobile app. You know there will be an element of visual and experience design, but do you understand the basics behind why your designers are making the decisions and recommendations they make?
It’s important to understand some design basics in order to communicate effectively with the designers on your team. While many of us have an intuitive feel for what works and what doesn’t, developing a vocabulary to describe your issues and feedback and understanding the techniques required to validate your hunches are important skills in order to ensure the success of your project.
This session goes in-depth on which design techniques and principles ought to be part of every executive’s vernacular. By the end of the session attendees will understand the basics of both high level interaction design and lower-level visual design in a way that maximizes energy and time in the approval process, including:
• Basic design principles to help executives understand a design’s intent. This includes a basic understanding of layout, color theory and typography. • Design vocabulary, heuristics and analysis techniques • The difference between information architecture and interaction design, and how both have a critical yet often unseen influence on the development of the end project • Why incorporating user research is critical to good design
Effective UI’s Tony Hillerson and Juan Sanchez presented “Designing an App: From Idea to Market” at Android Open in October 2011. They cover best practices for desiging an Android app that offers a good user experience.
Flash and Flex in an HTML5 / App Store WorldEffectiveUI
EffectiveUI’s RJ Owen presented “Flash and Flex in an HTML5 and App Store World” at Adobe MAX, October 2011. This is an overview of where Adobe Flash and Flex have been, and predictions for how Adobe Flash and Flex will be used in the future for design and development.
Whether you work alone or in a team, some sort of source control management is essential to you as a developer for things like keeping a history of your code, dealing with integrating code, managing releases and making your development workflow through different features painless. If you're coming from something like CVS or SVN, the open-source Git version control system will turn what you know of SCM on its head. This presentation explains why Git is different, and what that difference means to you as an Android developer.
EffectiveUI lead user experience architect John McRee's presentation from South by Southwest Interactive 2011:
"It’s a cultural phenomenon that most of us didn’t see coming: baby boomers are taking over Facebook, while the millenials are abandoning it like crazy because it is so last year. After all, what 20-something wants his mom to see his status update about last night’s party? This example signifies a trend in technology overall: the assumed late adopters are now joining early adopters as technology becomes increasingly easy and fun to use. Devices such as the Wii and the iPad have overwhelmingly been adopted by the older and less technologically savvy crowd. The trend has significant design implications. As we’re designing for emergent devices, we need to be very aware that we’re definitely not designing for ourselves. User research will become even more critical, with particular attention paid to the more mature crowd as they have different needs from other generations..."
Human-Centered Design and the Intersection of the Physical and Digital WorldsEffectiveUI
EffectiveUI user experience designers Lindsay Moore and Austin Brown's Lightning Round presentation given at IxDA Interaction '11 in Boulder, CO. "Austin and Lindsay demonstrate how they've redesigned everyday objects based on the combined disciplines of industrial and digital interaction design."
From the Trenches: Building the Accessible WebEffectiveUI
Jon Reid, Senior Developer at EffectiveUI, presented "From the Trenches: A Practical Approach to Building the Accessible Web" at Accessing Higher Ground 2010, an accessible media, web and technology conference hosted by the University of Colorado at Boulder.
Leonard Souza presents this look at Flex's amazing built-in visual effects and filters, which are probably one of the primary reasons to use the framework over other RIA platforms. As it turns out they are relatively easy to create. This presentation - given at 360|Flex in September 2010 - dives into the drawing API, the base effect/filter classes and Pixel Bender. You’ll learn how to build them from the ground up in a way that is reusable for yourself and other interaction designers.
EffectiveUI Lead Mobile Developer John Blanco gives a brief introduction to Mate and explores why we need it. This presentation also reviews problems with Cairngorm and PureMVC.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
JMeter webinar - integration with InfluxDB and Grafana
Flex4 Component Lifecycle
1. Things to add:
- What is a sprite?
- what is a UIComponent?
Flex 4 Component Lifecycle
RJ Owen
Flash Camp Denver
10.12.2010
1
2. Who am I?
Senior Software Architect @ EffectiveUI
Blogger for InsideRIA
Adobe Community Expert in Flex
Lead developer on some cool projects for cool clients (just like you.)
2
3. Who are you?
Software Developers, perhaps Designers
Experienced in Flex 3?
Interested in building better interfaces
Interested in performance
3
4. What will we talk about today?
What is Flex?
Frames, and how to slice them
Flex 4 component theory
Flex 4 component life-cycle
4
5. What is Flex anyway?
A FRAMEWORK built on top of Flash - content for the Flash player and AIR runtime
A declarative Flash content language - MXML
An expanding and evolving set of components
A framework for displaying and managing components
• The LayoutManager
• The Component Lifecycle
You could do all of this in Flash (authoring)! (It would take longer.)
5
6. The Flash Timeline
All flash-platform content is FRAME-BASED
Frames execute one after another, over and over, forever and ever.
6 timeline image: www.jaanuskase.com
7. Slicing a Frame
A Frame
Processing Drawing
During each frame, the appropriate player / runtime will:
‣ Execute Code (process)
‣ Render to the screen (draw)
This continues for every frame in the Flash movie or AIR application.
1 2 3 n
7
8. Frames that take too long
1 2 3 n
1 2 3 n
When frames spend too much time processing or rendering, “stretching” occurs.
This causes the frame-rate to drop (fewer frames are rendered per second), making your application
slow, choppy and less responsive.
This is often referred to as the “elastic racetrack.”
8 racetrack image:Ted Patrick, http://ted.onflash.org/2005/07/flash-player-mental-model-elastic.php
9. Three Slices
Player User Prerender User Player
Events Code Event Code Render
User Action Invalidate Action Render Action
Frames aren’t really that simple. The Flash Player runs on event loops.
Loops vary in time from ~5ms to ~20ms (see Sean Christmann’s research on this) depending on code
execution and rendering time.
Event loops process the user action, invalidate action, and render action in that order.
Each frame is built of combinations of these slices, depending on the frame rate.
9 Frame image and everything I know about the frame model: Sean Christmann, http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/
10. Frames can contain multiple slices
Frame 1
5 fps
compiled
framerate
25 fps Frame 1 Frame 2 Frame 3 Frame 4 Frame 5
compiled
framerate
50 fps Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6 Frame 7 Frame 8 Frame 9 Frame 10
compiled
framerate
Sean assumes ~20ms slices. In that case, a framerate of 5 fps yields 9 processing-only frames and 1
processing+render frame.
25fps gives 1 processing frame and 1 processing + rendering; at 50 fps we render with each slice (20ms
= .002s; 50 fps * .002s = 1 frame)
10
12. FLEX RUNS IN FRAMES
The point is that Flex runs in these frames, and we need to make the most of them.
You may go through multiple processing slices before you get to render
Flex components and the framework itself are built around the frame model. Flex components help
optimize your application for performance through....
THE COMPONENT LIFECYCLE!
Understanding frames and slices is key to understanding the value of the lifecycle.
12
13. FLEX 4 COMPONENT THEORY
A little on why Flex 4 components are different
13
14. Components: What are they?
Contained bits of functionality
Controls displayed on the screen
Containers for those controls
Highly Visual
Examples: Button, ComboBox, List
14
15. Components: what’s broken?
In Halo (Flex 3), components were rigid
Hard to extend
“Monkey patching” to make small changes to component view
Example: HTML text in the panel title bar
15
16. Flex 4 Components: Issues to address
Separate data, logic and behavior from visuals, states, animation and layout
Create component-logic with no assumption about appearance
Create component-view without digging into the logic
To see this in action, let’s look at a button component.
16
17. label:String, selected:Boolean
text field, icon, background
mouse handlers, selection logic
17 MVC in a button component
20. Need a slide here talking about what
a skin is, or showing a component
with a skin or something like that.
It’s an awkward transition.
Skin Parts
Components and Skins establish the contract between them using two things: skin parts and skin
states.
Component specifies optional/required skin parts as metadata
[SkinPart(required=”true”)]
public var labelElement:SimpleText;
Skin implements skin parts
Exception thrown if required part is not found
Component should set data on skin parts in the setters AND component.partAdded(); method
20
21. Skin States
Defined in the component using metadata
[SkinState(“up”)]
[SkinState(“down”)]
Current state is passed to the skin from the component
All states are required. An exception will be thrown if a state is not implemented in the skin
21
22. Skins are Components too
Your component has one child in it’s display list: your Skin class
All other elements (skin parts, component children) are added to the Skin’s child list in different display
objects, which are made accessible as your Component’s elements list.
UIComponent
GroupBase SkinnableComponent
Group
Skin
22
23. FLEX 4 COMPONENT LIFE-CYCLE
An in-depth look at the life and times of today’s modern component
23
24. Flex 4 Component Lifecycle
What is it?
The way the framework interacts with every Flex component
A set of methods the framework calls to instantiate, control, and destroy components
Methods that make the most of every frame
24
25. UIComponent
Skinnable Component
Flex 4 Component Model (Spark)
Flex 4 Component Model (Spark)
Flex 3 Component Model (Halo)
Flex 3 Component Model (Halo)
25 Flex 4 Components are built on Flex 3 Components
26. Flex 4 Component Lifecycle: 3 Stages
Construction
Birth Configuration
Addition
Initialization
Invalidation
Life Validation
Interaction
Death Removal
Garbage Collection
26
27. Construction
Configuration
Addition
Initialization
Birth: Construction
Calls your constructor
Can access properties and methods of the class, but note that children have not been created yet!!
Must be public, no return type
Call super();
Not used often in Flex
var theLabel : Label = new Label();
<mx:Label id="theLabel"/>
27
28. Construction
Configuration
Addition
Initialization
Birth: Construction
JIT: “Just In Time” compilation. The VM will compile AS3 bytecode down to native machine code for
your target platform.
Constructors are NEVER JIT compiled, so putting code in your constructor is less efficient in terms of
swf size than keeping it elsewhere.
Most everything else in the framework IS JIT’d, and there’s a place in the lifecycle for most everything
else you’ll need.
If you want to assign listeners at this stage, put them in a separate method so JIT compilation can
occur.
Your takeaway: keep your constructors slim.
28
29. Construction
Configuration
Addition
Initialization
Birth: Configuration
The process of assigning values to properties on objects
<local:SampleChild property1="value!"/>
This results in the first call to commitProperties();
Containers must not expect children to be added yet
For optimization, make setters fast and DEFER the real work until validation (more later)
Until attachment occurs and your component is added to a display list, things stall here. Your
component is in memory and it has values assigned to its properties, but it’s not visible and won’t go
through the rest of the life cycle.
29
30. Construction
Configuration
Addition
Initialization
Birth: Attachment
Adding a component to the display elements list
parent.addElement(yourComponent);
30
31. Construction
Configuration
Addition
Initialization
Attachment: Element Lists
Every component on the screen lives in a Display List
Components are added to display lists
Graphical Elements (rectangles, circles, text, etc.) are DRAWN into other Components
True components are still on the child list
Flex 4 lets us treat graphical elements as first class citizens (like components), but we need display
objects that inherit from UIComponent to draw them on.
The Elements List abstracts the components created to draw graphics for us - we use it like the child
list, but it’s not the same thing. Graphics are DRAWN into children while components ARE children, yet
they’re all elements.
31
32. Group
(DisplayObject) Elements
Rect
Rect
UIComponent
(DisplayObject)
Path
Rect
Rect
Rotation=90
Ellipse
Label
32 Attachment: DisplayObject Sharing
33. Group
(DisplayObject) Elements
Rect
Draw Into
Rect
UIComponent
(DisplayObject)
Path
Rect
Rect
Rotation=90
Ellipse
Label
32 Attachment: DisplayObject Sharing
34. Group
Children (DisplayObject) Elements
Rect
Draw Into
Rect
UIComponent
(DisplayObject)
Path
Rect
Rect
Rotation=90
Ellipse
Label
32 Attachment: DisplayObject Sharing
35. Group
Children (DisplayObject) Elements
Rect
Draw Into
Rect
UIComponent
(DisplayObject)
Sprite Path
Draw Into
Rect
Rect
Rotation=90
Ellipse
Label
32 Attachment: DisplayObject Sharing
36. Group
Children (DisplayObject) Elements
Rect
Draw Into
Rect
UIComponent
(DisplayObject)
Sprite Path
Draw Into
Rect
Draw Into Rect
Sprite Rotation=90
Ellipse
Label
32 Attachment: DisplayObject Sharing
37. Group
Children (DisplayObject) Elements
Rect
Draw Into
Rect
UIComponent
(DisplayObject)
Sprite Path
Draw Into
Rect
Draw Into Rect
Sprite Rotation=90
Sprite Ellipse
Draw Into
Label
32 Attachment: DisplayObject Sharing
38. Birth: Initialization
After attachment, it’s time to initialize your component.
Initialization involves several method calls and dispatches several events.
33
40. Life
After initialization, we’re ready to go
The component is added to the screen and available to users
User interaction should cause changes in components – set invalidation flags
When the next Render event occurs, validation methods will be called
Invalidation
Validation
Interaction
35
41. Life: Deferment
The invalidation process:
When a property is set, retain the value on a private public function set text(value:String):void
variable {
Set a “dirty” flag if (value != _text)
{
Invalidate the Component _text = value;
The validation process: invalidateTextLines();
When the framework calls validation methods, invalidateSize();
invalidateDisplayList();
update your component accordingly }
}
Example: set “Text” on the TextBase class
36
42. Invalidation
Validation
Interaction
Life: Invalidation
Player User Prerender User Player
Events Code Event Code Render
User Action Invalidate Action Render Action
Invalidation Occurs Here
37
43. Invalidation
Validation
Interaction
Life: Invalidation
Invalidation Methods
Called to “invalidate” a component, but not do any work on it
invalidateProperties()
• any property changes
invalidateSize()
• changes to width or height
invalidateDisplayList()
• changes to child elements - either their size or position - or data provider (if applicable.)
invalidateSkinState()
• Just sets skinChanged=true;
• Calls invalidateProperties();
38
44. Invalidation
Validation
Interaction
Life: Validation
Player User Prerender User Player
Events Code Event Code Render
User Action Invalidate Action Render Action
Validation Occurs Here
39
45. Invalidation
Validation
Interaction
Life: Validation
“Do the work” that invalidation requires
Move things, add things, remove things, etc.
The goal: don’t duplicate or re-do things in the same frame
commitProperties()
getCurrentSkinState()
updateDisplayList()
measure()
40
46. commitProperties()
Invoked first - immediately before measurement and layout
ALL changes based on property and data events go here
Even creating and destroying children, so long as they’re based on changes to properties or underlying
data
Example: any list based component with empty renderers on the screen
41
47. getCurrentSkinState()
Used if the skin state needs to be updated based on a change to the component
Override this in your components to provide the proper skin state - it’s a worthless method in
SkinnableContainer.
Necessary moving forward when skin states will vary depending on interaction modes, but
otherwise this isn’t very important
Example: mobile components have no “over” state.
42
48. measure()
Component calculates its preferred (“default”) and minimum proportions based on content, layout rules,
constraints.
Measure is called bottom up - lowest children first
Caused by “invalidateSize()”
NEVER called for explicitly sized components
43
49. overriding measure()
In Flex 3 this was very important for container components.
In Flex 4, consider using a layout if you find yourself needing to override measure.
Use getExplicitOrMeasuredWidth() (or height) to get child proportions
ALWAYS called during initialization, but not necessarily after that. The framework optimizes away calls
to measure that aren’t “necessary.”
Call super.measure() first!
Set measuredHeight, measuredWidth for the default values; measuredMinHeight and
measuredMinWidth for the minimum.
44
50. updateDisplayList()
Used when elements on the elements / display lists need to be drawn
In Flex 3 this was a major component of layout containers - now we use Layout objects and skin classes,
so this is less important
Try not to override this on your component - first examine if perhaps the logic should be in the skin
class instead.
Sometimes you will need to override this method on the skin class itself.
45
51. Life: Deferment
Deferment is the core concept of the component lifecycle!
Put off doing the “real work” until the appropriate time
Validation methods listen for the Prerender event - happen once before a render
Frame 1
set a component’s set width actually render
width - deferred (deferred) set width component
46
52. Life: Deferment
Player User Prerender User Player
Events Code Event Code Render
User Action Invalidate Action Render Action
Queued Invalidation
Deferred Validation
Render!
47
53. Invalidation
Validation
Interaction
Interaction
Assign handlers to user events
Process things
Cause invalidation to occur
Away we go!
48
54. Invalidation
Validation
Interaction
Interaction: why?
Events: objects passed around when anything interesting goes on (clicks, moves, changes, timers...)
• If something happens to a component, it “fires” or “dispatches” the event
• If another component wants to know when something happens, it “listens” for events
Event-based architecture is loosely-coupled
Event-based architectures are more reusable
Components don’t have to know anything about each other - just listen for the events!
49
55. Invalidation
Validation
Interaction
Interaction: how?
Any component that inherits from EventDispatcher can send events
component.dispatchEvent(event);
Events are identified by a type (constant)
Some popular events:
• Event.CHANGE
• MouseEvent.CLICK
• FlexEvent.CREATION_COMPLETE
• Event.RESIZE
• MouseEvent.ROLL_OUT
50
57. event.target vs. event.currentTarget
target: the object that dispatched the event (doesn’t change)
currentTarget: the object who is currently being checked for specific event listeners (changes as we
traverse the display tree during the capture or bubbling phase)
During the targeting phase, target == currentTarget.
52
58. Life Goes On
Interaction (dispatching events) sets the stage for the next user action
In the next user action we’ll process these events and set up more queued invalidation
In the invalidation action we’ll process all of that queued invalidation in our validation methods
(commitProperties, updateElementsList, measure)
Render!
And so it goes, on and on forever, as long as your component remains on an elements list.
53
59. Removal
Garbage Collection
Death: Removal
“Removal” refers to the process of removing a component from the elements list. These components
can be re-parented (brought back to life) or abandoned to die
parent.removeElement(component);
Abandoned components don’t get validation calls and aren’t drawn. Ever.
If an abandoned component has no more active references, it *should* be garbage-collected
Re-parenting isn’t cheap, but it’s cheaper than re-creating the same component twice
Listen for FlexEvent.REMOVED from the component or ElementExistienceEvent.ELEMENT_REMOVED
from the parent to do custom cleanup.
Consider hiding rather than removing (set visible and includeInLayout to false)
54
60. Removal
Garbage Collection
Death: Garbage Collection
Any object not on an element’s list with no active references is eligible for destruction, garbage
collection
Use strongly typed objects
Use weak listeners
Be careful with object / dictionary references
The flash player does not reduce it’s footprint, though memory can be recycled
55
61. Conclusion
Remember the frame model! It will help you understand what’s happening in your Flex application. For
Flash developers this is second nature; for Java or .NET devs it’s an adjustment.
Queued Invalidation & Deferred Validation are the core concepts of the component lifecycle
Master the validation methods, and know which to override for any situation
56
62. More Reading / Bibliography
360 | Flex Talk with Brad Umbaugh on the Flex 3 Component Lifecycle
http://tv.adobe.com/watch/360flex-conference/diving-deep-with-the-flex-component-lifecycle
A video of our 360|Flex presentation on the Flex 3 lifecycle. It’s long and in depth.
Ely Greenfield: “Building a Flex Component” (Flex 3)
http://onflex.org/ACDS/BuildingAFlexComponent.pdf
A presentation Ely gave years ago that I still review.
Sean Christmann on the Elastic Racetrack / Frame model
http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/
This blog post is the granddaddy of every discussion about the Flash frame model or component lifecycle.
Flex 4 Training by Development Arc
http://www.developmentarc.com
James Polanco and Aaron Pedersen do affordable online Flex 4 training. Their one day session covers much of this material in
more depth.
57
63. RJ Owen
rj.owen@effectiveui.com
Twitter: @rjowen
Get these slides:
http://www.slideshare.net/rjowen
http://goo.gl/nrmX
Thanks!
www.effectiveui.com
58