SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
REFLEX
Rethinking Component Design


       by Jacob & Tyler Wright
FLASH - AN OPEN INTERACTIVE MEDIUM
              TED PATRICK
“Platforms should never limit creativity, they should
enable it openly and this strikes at the core as to why
Flash has succeeded for so long. There are no SWF
approval police or terms of use for Flash content, it is
the wild west of interactivity.

“Flash will never stop innovating both inside and
outside of Adobe. The Flash ecosystem is one of the
greatest in terms of creativity and technical ingenuity.”
REFLEX DEFINED


• Reflex:      a Component Framework

• Component:         User Interface control

• The   UI is the window into an application

• ... Reflex   is a method and a framework
COMPONENTS
                        A BRIEF HISTORY



• The   Graphical Operating System

• The   Magical Interwebs

• Developed   for the present: familiarity === usability

• “What has been proven by Flash developers is that users
 expect so much more...”
THE NEED

•A   new generation of UI design & branding

• User   Experience: usability & content focused

• Diversity   in screens & devices

• The line between enterprise application & mobile widget is
 blurring
THE NEED


• Increased   capacity for custom design

• New    approaches to interaction

• Even   more flexible, faster, lighter
REFLEX
               RETHINKING COMPONENT DESIGN




• ... Reflex   is a method and a framework

•A   coming together of ideas, for “richer and cheaper”

•A   new approach, captured for the Flash Platform
THE SOLUTION


• Principles:

  • Pay-as-you-go   & composition

  • Close   to the core, strength in the Flash Player

  • “Less   code”
THE SOLUTION


• Approach:

 • Review     of data

 • Selection

 • Progress    & Position
SKINNING


• Visual   representation on the screen

• Render    to any target display object

• Enhanced    by ISkinnable targets

• data, state, layout, getSkinPart()
SKINNING


• Skin Types

  • Drawing API

  • Flash   Professional Graphics

  • MXML
BEHAVIOR


• User   interaction and state defined

• Listen   to any interactive object

• Also   enhanced by ISkinnable targets

• Listeners, state, skin   parts
BEHAVIOR


• Behavior Types

 • Step    behavior

 • Slide   behavior

 • Cursor    & Tooltip behaviors
THE COMPONENT


• Reflex   component suite

• Core   design and functionality unified

• Named    package for convenience and styling
THE COMPONENT


• Containment

• Layout

• Replication
THANK YOU


• Tyler Wright  - Legato Media
 xtyler.com ... @xtyler

• Jacob Wright- Jive Software
 jacwright.com ... @jac_

Mais conteúdo relacionado

Mais procurados

Wk23 2014 Tuesday Meeting
Wk23 2014 Tuesday MeetingWk23 2014 Tuesday Meeting
Wk23 2014 Tuesday Meeting
Yannick Lin
 

Mais procurados (9)

Wk23 2014 Tuesday Meeting
Wk23 2014 Tuesday MeetingWk23 2014 Tuesday Meeting
Wk23 2014 Tuesday Meeting
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
 
Memoways Presentation August 2013
Memoways Presentation August 2013Memoways Presentation August 2013
Memoways Presentation August 2013
 
Web conference management software
Web conference management softwareWeb conference management software
Web conference management software
 
Blackberry smartphones
Blackberry smartphonesBlackberry smartphones
Blackberry smartphones
 
Ch 1: Getting Started
Ch 1: Getting StartedCh 1: Getting Started
Ch 1: Getting Started
 
DelveNYC: Flash Catalyst
DelveNYC: Flash CatalystDelveNYC: Flash Catalyst
DelveNYC: Flash Catalyst
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
 
What's New In ANGEL 7.4 application administration
What's New In ANGEL 7.4 application administrationWhat's New In ANGEL 7.4 application administration
What's New In ANGEL 7.4 application administration
 

Semelhante a Reflex Rethinking Component Design

How To Select RIA
How To Select RIAHow To Select RIA
How To Select RIA
Terry Wang
 
4Ward Company Presentation
4Ward Company Presentation4Ward Company Presentation
4Ward Company Presentation
4Ward
 
Android application development
Android application developmentAndroid application development
Android application development
Linh Vi Tường
 

Semelhante a Reflex Rethinking Component Design (20)

Designing Learning #eldc2011
Designing Learning #eldc2011Designing Learning #eldc2011
Designing Learning #eldc2011
 
AMIS OOW 2012 Review - Deel 4 ADF - Paco van der Linden
AMIS OOW 2012 Review - Deel 4 ADF - Paco van der LindenAMIS OOW 2012 Review - Deel 4 ADF - Paco van der Linden
AMIS OOW 2012 Review - Deel 4 ADF - Paco van der Linden
 
Atlassian User Group NYC 20170830 PreSummit Event Slides
Atlassian User Group NYC 20170830 PreSummit Event SlidesAtlassian User Group NYC 20170830 PreSummit Event Slides
Atlassian User Group NYC 20170830 PreSummit Event Slides
 
How To Select RIA
How To Select RIAHow To Select RIA
How To Select RIA
 
Philly Sitecore User Group Meetup | Post-Symposium Knowledge Share
Philly Sitecore User Group Meetup | Post-Symposium Knowledge Share Philly Sitecore User Group Meetup | Post-Symposium Knowledge Share
Philly Sitecore User Group Meetup | Post-Symposium Knowledge Share
 
4Ward Company Presentation
4Ward Company Presentation4Ward Company Presentation
4Ward Company Presentation
 
About 4Ward
About 4WardAbout 4Ward
About 4Ward
 
Why XAF and XPO?
Why XAF and XPO?Why XAF and XPO?
Why XAF and XPO?
 
Qtr 3 2012 Ppt
Qtr 3 2012 PptQtr 3 2012 Ppt
Qtr 3 2012 Ppt
 
Azure thursday HoloLens and cognitive services a powerful combination
Azure thursday HoloLens and cognitive services a powerful combinationAzure thursday HoloLens and cognitive services a powerful combination
Azure thursday HoloLens and cognitive services a powerful combination
 
Zero to Sixty with Oracle ApEx
Zero to Sixty with Oracle ApExZero to Sixty with Oracle ApEx
Zero to Sixty with Oracle ApEx
 
StoryCode Immersion #3 - Presentation 1 Technology Process
StoryCode Immersion #3 - Presentation 1 Technology ProcessStoryCode Immersion #3 - Presentation 1 Technology Process
StoryCode Immersion #3 - Presentation 1 Technology Process
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the Browser
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
Hcl digital experience
Hcl digital experienceHcl digital experience
Hcl digital experience
 
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)React Native is Ready for Prime Time — Team × Technology (React Conf 2016)
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)
 
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...
 
Android application development
Android application developmentAndroid application development
Android application development
 
Is it possible to write cross-native apps in 2020 ?
Is it possible to write cross-native apps in 2020 ?Is it possible to write cross-native apps in 2020 ?
Is it possible to write cross-native apps in 2020 ?
 
WeWork Connect: Shaping Confluence to Reflect Our Culture
WeWork Connect: Shaping Confluence to Reflect Our CultureWeWork Connect: Shaping Confluence to Reflect Our Culture
WeWork Connect: Shaping Confluence to Reflect Our Culture
 

Último

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Último (20)

Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 

Reflex Rethinking Component Design

  • 1. REFLEX Rethinking Component Design by Jacob & Tyler Wright
  • 2. FLASH - AN OPEN INTERACTIVE MEDIUM TED PATRICK “Platforms should never limit creativity, they should enable it openly and this strikes at the core as to why Flash has succeeded for so long. There are no SWF approval police or terms of use for Flash content, it is the wild west of interactivity. “Flash will never stop innovating both inside and outside of Adobe. The Flash ecosystem is one of the greatest in terms of creativity and technical ingenuity.”
  • 3. REFLEX DEFINED • Reflex: a Component Framework • Component: User Interface control • The UI is the window into an application • ... Reflex is a method and a framework
  • 4. COMPONENTS A BRIEF HISTORY • The Graphical Operating System • The Magical Interwebs • Developed for the present: familiarity === usability • “What has been proven by Flash developers is that users expect so much more...”
  • 5. THE NEED •A new generation of UI design & branding • User Experience: usability & content focused • Diversity in screens & devices • The line between enterprise application & mobile widget is blurring
  • 6. THE NEED • Increased capacity for custom design • New approaches to interaction • Even more flexible, faster, lighter
  • 7. REFLEX RETHINKING COMPONENT DESIGN • ... Reflex is a method and a framework •A coming together of ideas, for “richer and cheaper” •A new approach, captured for the Flash Platform
  • 8. THE SOLUTION • Principles: • Pay-as-you-go & composition • Close to the core, strength in the Flash Player • “Less code”
  • 9. THE SOLUTION • Approach: • Review of data • Selection • Progress & Position
  • 10. SKINNING • Visual representation on the screen • Render to any target display object • Enhanced by ISkinnable targets • data, state, layout, getSkinPart()
  • 11. SKINNING • Skin Types • Drawing API • Flash Professional Graphics • MXML
  • 12. BEHAVIOR • User interaction and state defined • Listen to any interactive object • Also enhanced by ISkinnable targets • Listeners, state, skin parts
  • 13. BEHAVIOR • Behavior Types • Step behavior • Slide behavior • Cursor & Tooltip behaviors
  • 14. THE COMPONENT • Reflex component suite • Core design and functionality unified • Named package for convenience and styling
  • 15. THE COMPONENT • Containment • Layout • Replication
  • 16. THANK YOU • Tyler Wright - Legato Media xtyler.com ... @xtyler • Jacob Wright- Jive Software jacwright.com ... @jac_