Thinking in Flex : Thinking in Flex
Relevance & Perspective : Relevance & Perspective IT Consulting (Market Rate)
$600 - $2,500 AUD / day – varying role and skills sets
IT Full Time Employee (FTE) – (Total Employment Cost)
$50 K - $110 K - $150K or $200K / year– varying role and skills sets
IT Projects : Budgeted 8 Hour Day – in general never respected
IT Infrastructure
Increasingly outsourced with strict access rights, controls and SLA’s
Incomplete Development, Quality Assurance and User Acceptance environments
IT Roles (traditional):
Sponsors and User Representatives
Relevance & Perspective (contd.) : Relevance & Perspective (contd.) IT Roles (contd.):
Project Manager
Business Analyst
Architects – Technical, Business
“Developer Pool”
With mix of FTE’s and Consulting, with varying degree’s of buy-in to given Projects / Company
IT Plans, Specification and Methods
Corporate Charter
Project Plans, including deadlines for phased delivery and Go-Live – mostly in Microsoft Project
Array of BRD’s, RDD’s, FDD’s, TDD’s – Architecture, Minutes, Meetings
Methods: Waterfall, Iterative or Extreme
Relevance & Perspective (contd.) : Relevance & Perspective (contd.) IT Requirements
Centralized / Web Delivered / Packaged
Browser Compatible
SOE (Standard Operating Environment) Compliant – Mac, Windows and/or Linux
Service Oriented, Secure Reliable Messaging
Integrated with:
Heterogeneous back-end systems ERP’s, CRM’s, HRMS … and bespoke… and talk to Microsoft Exchange
Support Corner-case client-side applications … and import / export to Microsoft Excel
Online Transaction Processing, Business Intelligence …
Scalable and robust with 100’s to 1000’s of transactions per second, per minute
Relevance & Perspective (contd.) : Relevance & Perspective (contd.) IT Requirements (contd.)
Secure and Authenticated
Encryption Standards
Single Sign On, LDAP, NTLM
Database Support
Exploit key features - if all.
Multi Lingual – Multi-Currency
… and this list goes on…
Relevance & Perspective (contd.) : Relevance & Perspective (contd.) Enterprise Application Development
Build employee- or customer- facing applications in order to generate revenue – e.g. $$$’s
Return on Investment Vs Opportunity cost to access a market window
Well known, tried-and-true, predictable estimates and margins
The problem ?
“Creativity has a timeline of its own …
… and Flex is a blank canvas”
Thinking in Flex : Michael Leahy Wise
omniEffect : Director & Founder Thinking in Flex
About Michael Leahy Wise : About Michael Leahy Wise Director & Founder, omniEffect – information company
Build & integrate Enterprise Applications with a particular focus on User Experience
Understand how to invoke existing assets in the IT infrastructure
3 years: offer agile consulting services, products and sales – buy FB2 and FDS2
Based in Brisbane
Focus on FSI, Media, Manufacturing, Life Sciences, Aircraft & Telecommunications
13 years IT – OO / Java / .NET / C++ … and Flex.
Adobe Flex circa. Royale
Adobe Flex Instructor, completed all current courses
Blog: blogs.omnieffect.com/mlwise
Email: michael.wise@omnieffect.com
Thinking in Flex : Thinking in Flex Disciplined Developer
Background & Experience
Formative or tertiary qualification
Access knowledge via continuing- , self–, course- or internet- delivered education.
Exposure to technology, methodologies and practice
Programming background – Loops. Iteration and Switches
C / C++, Visual Basic, Oracle, Power Builder, Lotus Notes, Java AWT & Swing and Framework, or Microsoft Access (c;
Database – understands an ERD, Detail, Master/Detail, knows importance of validation and List-of-Values.
Used / worked with a Reporting Tool – has written a bit of SQL in their time.
Terminal (Character), Desktop (thick client / thin client), Network Computer and now Web Browser
OO techniques – difference between an object or class, inheritance, interfaces - heard of- or use- design patterns
Understands, and is part of a development process, makes predications about task effort and completion
Understands value of reuse of code and skills
Can interpret / create a specification
Thinking in Flex (contd.) : Thinking in Flex (contd.) Adobe Flex – (internally championed, promoted or sold)
Cross-Platform & Browser independent
Rapid prototype, development and deployment model
Plays nicely with existing Internet technology and standards, easy to connect with back-ends.
OO language / ActionScript 3 (ES4), Virtual Machine (Flash Player 9 - AVM) JIT processing power
Potential for engaging Interaction Design – Information Architecture – express data.
Bruce Eckel – enters the debate
C++, Java, Continuous Integration and Best Practice –numerous books, highly influential
Statement: “The Web is a Mess”
Growing developer adoption especially in the Java community
Cross Road of next generation Applications
Adobe Flex 2, Java, .NET & WPF, AJAX
Thinking in Flex (contd.) : Thinking in Flex (contd.) Yes - sort-of-one of these Disciplined Developers
more of a Web Developer these days
Followed, skilled with Macromedia stack – ColdFusion – DHTML / JavaScript
Recommending Adobe Flex as a way forward, see the issues with AJAX
Users dislike Browser page refresh and often confused with Back / Forward buttons.
Great - Apollo offers a cross-platform Desktop Application, double-click Icon answer for broad reach and depth to solution.
Drag-n-Drop file integration
However the learning curve is steep … what do I need to know !
Just tell me.
FLEX - Concepts : FLEX - Concepts Flex Applications are built on ActionScript 3
Adobe Flex Framework brings your Application to life – SDK ships with Flex Builder 2
Components as button, containers, controls etc…
ActionScript 3 – “Everything is an Object”
ActionScript 3 ( ES4 ) is an Object-Oriented language
Supports basic concepts such as classes, inheritance, interfaces, method hiding, overrides & protection
Doesn’t support abstracts, and private Constructors (not the part of the ECMAScript standard)
Packages, Class Path and Class Loading
Object class is at the root of the class hierarchy, created by constructors using the NEW operator.
FLEX - Concepts : FLEX - Concepts Declarative Programming
XML to quickly realize ActionScript 3 code, that is, using XML to generate and create ActionScript Objects
MXML –references the Flex 2 Framework API
XML “rules” apply, special characters, CDATA, Namespaces etc…
NO relationship with HTML – this is a hard thing to overcome never encountered before.
Not a new concept – see Mozilla XUL and Oracle UIX
MXML vs AS3
var myVBox:VBox = new VBox();
myVBox.percentWidth = 100;
FLEX – Concepts (contd.) : FLEX – Concepts (contd.) Declarative Programming (contd.)
“Parenting” - child components
Functionality inherited from the Flex Framework
Based on Composite Pattern
addChild, addChildAt, removeChild, removeChildAt
var myLabel:Label = new Label();
myLabel.text = “Yoh Sushi”;
var myVBox:VBox = new VBox();
myVBox.percentWidth = 100;
myVBox.addChild ( myLabel );
FLEX – Concepts (contd.) : FLEX – Concepts (contd.) Component Oriented
Extending Flex Framework Components - MXML
File: com/company/components/MyVBox.mxml
… inside our Flex Application, reference the component
FLEX – Concepts (contd.) : FLEX – Concepts (contd.) Component Oriented
Extending Flex Framework Components – ActionScript 3
File: com/company/components/MyVBox.as
import mx.containers.*;
package com.company.components
{
public class MyVBox extends VBox
{
}
override protected function createChildren():void
{
super.createChildren();
var myLabel:Label = new Label();
myLabel.text = “Yoh Sushi”;
this.addChild ( myLabel );
}
}
FLEX – Concepts (contd.) : FLEX – Concepts (contd.) Event Driven
Flex Application is an entirely Event driven, familiar with Java Swing or Visual Basic
Established by having Flex components extending EventDispatcher or implementing its interface
dispatchEvent ();
Capture and Bubbling
Custom Events though extending flash.events.Event class
Loose Coupling & Components
Outward communication via Events
MXML [Event(name="login", type="events.LoginEvent")]
ActionScript 3
[Event(name="sessionStart", type="com.oe.shaper.events.SessionEvent")]
FLEX – Concepts (contd.) : FLEX – Concepts (contd.) Event Driven (contd.)
Listening for;
MXML – events as attributes of the mx:Button element
AS3 myButton.addEventListener( name, handler );
Binding
Watch the change and communicate the change in the property
[Bindable] meta tag - generates ActionScript code
ActionScript: BindingUtils.bindProperty(textarea, "text", textinput, "text");
FLEX – Concepts (contd.) : FLEX – Concepts (contd.) Service Oriented
Service calls to interact with back-end
HttpService, WebService ( SOAP )
RemoteObject (AMF) & DataService (RTMP)
Request / Response Handling
Producer / Consumer - Messaging (Java Message Service)
Program Flow
MXML entry points
or new in 2.0.1
Flex Framework Events
INITIALIZE
CREATIONCOMPLETE
ActionScript 3 entry point
package {
import flash.display.Sprite;
public class MyApplication extends Sprite
{
public function MyApplication ()
{
// begin coding here
}
}
}
FLEX – Concepts (contd.) : FLEX – Concepts (contd.) Program Flow ( contd.)
Control and Execution
Familiar JavaScript or Java syntax
{} Braces for code blocks etc…
Try / Catch Exception Handling
ActionScript Cheat Sheet - http://actionscriptcheatsheet.com/blog/
Object Creation - when do you have access to your objects ?
Initialization & CreationComplete Events.
Collections
Array and ArrayCollection
FLEX – Concepts (contd.) : FLEX – Concepts (contd.) Flash Player 9 – ActionScript Virtual Machine
Native Interfaces
External Interfaces
Web Browser Interaction
Development Eco-System : Development Eco-System Flex is a Blank Canvas
Flex has no immediate Application Development Framework
MVC & Cairngorm
Flex has a default “Look & Feel”
Default “HALO”
Skin with CSS, Assets & Programmatic (ActionScript)
Doesn’t assume the Look & Feel of the host.
Emphasis on Components
Easy to “roll-your-own”
At this point not-enough and not mature Vs other frameworks
DataGrid
Do not blend in the Host – for example In-Place editing on Mac
Development Eco-System : Development Eco-System Flex is a Blank Canvas (contd.)
Scalable ?
Flex 2.0.1 supports Modules and Module Loading.
Vs Oracle Forms ?
“Outré du support” – out-of-the-box
Templates
Best Practice for SDI / MDI – no real concept of a Window – Resize, Max/Min, Tile etc…
SAP Portal Templates
Potential for Flex development to be become Time Consuming – ( Demonstration )
Uptake of the technology
Impedance Mismatch
User’s specification & expectation
Overheads of a Desktop Application
Development Eco-System : Development Eco-System Operational
Java Foundation
Based on JDK 1.4.2
J2EE Container ( Tomcat, JRun, Oracle Application Server, Web Sphere)
Flex Data Service 2 – JAR, WAR, EAR
Flex Builder 2 – Eclipse Based tool
Flex 2 SDK – Framework Code and binaries for compiling Flex Projects
Managed as directories of files, .MXML; .AS etc…
Apache Ant – (http://ant.apache.org/)
Process control
Command line compilation of Flex projects – http://labs.adobe.com
CVS & SVN Source Control
“Development Pool” scales around the sandbox
Development Eco-System : Development Eco-System Operational (contd.)
Generation Tools
XDoclet (http://xdoclet.sourceforge.net)
Cairngorm Plug-in (http://blog.thinkingdigital.org/?page_id=4 )
ColdFusion Plug-in (http://www.cfreport.org)
Development Eco-System : Development Eco-System Approach
Project Management
Story Cards – Pictorial BRD’s
RDD’s, FDDs and TDD’s
Task Estimation
Rapid Prototyping
Rigging
Assets
Asset Complete
Fit and Finish
Development Eco-System : Development Eco-System Organization
Interaction Designer – User Experience
Information Architect
Design Process
Increased demand due to overheads of being a Desktop Application
Navigation
Look and Feel
Components
Assets
Interaction Design : Interaction Design Flex - Desktop Application
What does that mean ?
What is the impact ?
Engage the User’s Workflow
Actions
Finding Something, Learning Something
Performing a transaction, Controlling / Monitoring
Creating / Sharing or being Entertained
Interaction Design : Interaction Design Engage the User’s Workflow (contd.) Patterns
Safe Exploration / Gratification
Satisfying / Change in mid stream
Incremental Construction / Habituation
Spatial Memory / Prospective Memory
Streamlined Repetition / Keyboard Only
Advise
Interaction Design : Interaction Design Information Architecture
Structuring information ( knowledge or data ) for a purpose – wikipedia
Lists of Objects, Actions, Subjects / Categories or Tools
Structure and Layout
MDI / SDI, Title Panels, Two Panel Selector
One Window Drill, Alternative Views
Wizards, Extras on Demand, Intriguing Branches
Multi-level Help
Slide31 : Demonstration
Relevance : Relevance Keep it simple
Exploit CSS, limit your assets (most likely buy Icons and avoid Copyright issues)
Avoid building components in the Project timeline
Target a Portal-style Application
Lock-in the Interaction Design first
Perform a pre-project “Discovery”
Personas, Use Cases
Volumes, Frequency, Effects and Trends
Blend HTML and Flex is a good starting point
Incremental development
Small things more often
Generate as much as possible – ActionScript / Java etc…
Relevance : Relevance Keep it simple
Daily builds
“Daily Rush” - regular previews with Sponsors & User representatives
Its “OK” to have an Alert “No yet complete”, promotes attention and action
Don’t hold off finding out that your Application is “clunky”
Limit scope creep
Establish key difference in effort between Web and Desktop development
Resources : Resources Forums
Flex Coders http://groups.yahoo.com/group/flexcoders/
Internet
CFLEX - http://www.cflex.net
Books
Iteration Two – Developing rich clients with Macromedia Flex
RIA Book - http://www.theriabook.com/ - Farata
ActionScript CookBook – Joey Lott
Design Patterns in ActionScript 3 – Joey Lott, Danny Patterson
Slide35 : Thank you !
Blog: http://blogs.omnieffect.com/mlwise
Email: michael.wise@omniEffect.com
Slide36 :
Finally, no more Flicker Applications!