Intro to LCDS
consists of: flex messaging service, flex data management, flex proxy service, and remote object service

Push vs Pull
pull is client asks server for data
push is server actually pushing data to client

Types
Simple AMF – stateful approach
RTMP – real time messaging protocol
maintains persistent connection
allows real time
uses java-nio facilities
Polling
flex client sends requests for messages periodically

Configuring channel/destination
-CFGateway: messages sent between cf8/flex
-JMS Adapter: allows to use both JMS/Flex clients to communicate
-AS Adapter: flex default allows only flex clients to participate in communication

Channels
my-cf-amf
cf-polling-amf
cf-long-polling-amf
cf-streaming-amf
cf-rtmp

Examples using LCDS (chat) and then CFGateway (Facebook notifications)

Disadvantages
cross domain issues
can’t create signed RSLs
debugging
quick editing
must download the whole RSL (doesn’t trim unused classes)

RSLs act like diet pills for the size.

What is an RSL
Purpose
To quickly reduce your apps file size
code one, use in many places
How do it do that?
Kung Fu.
separates large code of flex into other places

Terms
RSL – runtime shared library
Signed RSL – Adobe published RSL
Unsigned RSL – the RSL for the rest of us
SWZ – an adobe signed RSL
SWC – zip file contains compiled Flash/Flex project that is not standalone code
Library.swf – one of the two files that are in a SWC
Catalog.xml – second file in a SWC
Compc – component compiler
Browser cache – your browsers of choice cache, not to be confused with Flash Player Cache
Flash cache – Flash Player’s internal cache
ANT automated command line built utility

Where do I find my RSLs
SDK/frameworks/rsls

Flex Core RSLs
how to speed up your apps? make the file size smaller.
1. use case: app is big. too big. you need it smaller and faster.
solution: separate your flex framework from your RSLs
2. use case: you have a project that has a core set of components, libraries, or utilities that are pretty much stable and you dont want to force the users to re-download all of that every time on release.
solution: create an RSL
3. use case: you, a friend, a co-worker or some dude in India just gave you a SWC and you want to use it as an RSL
solution: import into your project and make it an RSL
4. use case: your company has a common set of components, libraries, or assets that you want to share across multiple projects
solution: create a cross-domain RSL
digest must be enabled “-compute-digest=true”
5. use case: feeling good but client wants even faster!
solution: run the optimizer
6. collaborative work
7. automated builds for deploying RSLs

Something to laugh
http://www.youtube.com/watch?v=xUosP0Hkoek

programmatic skinning provides the power to create a skin that is just as flexible, if not more, than the default Flex skin (Halo)

Flash Drawing API
kind of a pain
lots of numbers/math
25%

Degrafa
really cool!
uses states that look more like regular Flex states
clean and reusable
75%

What else? Flex 4
new skin lifecycle
new idea is skin “parts” ie label is part of a button.

Three type of parts
static, deferred, dynamic (the cool one)

Gumbo skinning looks pretty sweet.

UX Recession Challenges
scarce resources ($)
rush to market (if I am out there first, I will win)
UX isn’t understood

Why of UX?
Foundation is more important than a bunch of tips

Emotion
3 levels of processing: appearance, ease of use, satisfaction
attractive things make people feel good. mind is more open.
people pay to be scared
*IKEA video about lamp* fun! http://www.youtube.com/watch?v=I07xDdFMdgw
“do any of these package-design people actually shop for orange juice? because i do and the new cartons stink.” – customer

Principles
divine proportion/golden ratio/rule of thirds
found everywhere.
usually it can actually help improve aesthetics and communication of the experience.

Fitt’s Law – time to acquire a target is a function of the distance to size of the target.
Mac OSX is 5 times faster to get to the application menu
Gestalt Laws – while is different than sum of its parts
law of proximity – flickr without borders
law of similarity – grouping pieces based on something (color)
law of closure – flickr images as one
law of continuity – follows 2 lines
law of simplicity – mind looks at simplest thing
80/20 Rule – application should meet needs of 80% of users. The other 20% are probably expert users. Designing to their needs, the main audience can’t use it.

Process
code -> ship
initiate -> code -> ship
initiate -> code -> qa -> design look feel -> ship (today)
initiate <*-*> design <-> code <-> qa <*-*> ship (goal)
* = user input

User Observation/Research (Personas)
*video about team passes* LOL http://www.youtube.com/watch?v=Ahg6qcgoay4
you might have one idea of what people need but they are the ones with the needs
Who is the user?
basic/intermeadiate(majority)/expert
Models
UI should be based on user mental models
The implementation model from the developer reflects the technology
The mental model from the user reflects their own vision
In between are versions with pieces of each.

Flip
can’t do – tiny screen, no tapes/discs, fold out screen, effects.
can do – capture video, self contained, USB plug, formatted for quick sharing
yet took 20% of market share
1 page instructions. Sony Handycam -> 40 pages.
extra features may actually REMOVE value from your product/application.
Fact: 90% of the feature requests MS gets about Word are ALREADY in MS Word.

SpatialKey
What it does? patrol operations, patrol, special units, command staff, dispatch.
Entire team went to Ogden Police Dept to see how things work. worked well because everyone came out on the same level.
Goals come from the research/observation/personas
Wireframes come from goals
User Feedback
Design product
*Looking at font sizes and where its going to be used*
*37 Signals yellow fade technique to highlight changes*
User Feedback
Good for QA/technical bugs/features/UX

Fighting UX Recession
time = understanding
educate clients
UX concerns lead to improvements
survival of the fittest – worse experiences will die off
not an afterthought – more planning
better experiences

Books
Emotional Design
About Face

Blog: http://www.getfinch.com/
Twitter: http://www.twitter.com/iamfinch/

Questions

How do you sell it? user cases of why its successive are key.

What?
more than just a set of charting components
lightweight framework used to assemble and development charting functions
way to describe patterns in data

Why?
Client needs are normally quite specific leaving the developers feeling like they need “one more feature” to fully meet the needs. End up diving into the code and doing things on your own.
Trying to provide developers with tools to do this easier.

Before we started, we looked at: *insert crazy charts here including one looking like a tube*

How is it different?
its all about describing patterns driven by data and your imagination
conceptually we wanted it to be flexible, lightweight, and elegant.

How did we do it?
reference repeater (shape) for layout
describe a pattern, bind some data, draw a picture

Goals:
Expressive (ideas to easily transfered to screen) Framework
lots of mxml
data binding
degrafa

someone at Adobe has said “the heart of Flex is lots of [mxml] markup and [data] binding”

Concise
less code
flattened inheritance chain
mxml in the core

Modular
granular building blocks
mix and match components
no sacred cows (got away from some OO best practices)

Magic Sauce
mxml (pros/cons)
lose some ability but decided it was worth it
binding (pros/cons)
costly but trying to optimize that
degrafa (its all pros)

Examples
barchart grouped into groupings of bars (some stacked) – code seems quite simple for the layouts (groupings/stacks)
line area group with toggles for groupings/markers/flow
pie chart with states (olympic medal count)

Does that come with fries?
DataSet
Column/Bar Clusters and Stacks
Line/Area series group
Wedge Stack, Plots and More
Axis, Scale, Expressions
States
Source, Examples, Docs

Where are we today?
Alpha 1.0
core defined and working
some pre-built components
has bugs and needs more testing
ready to take on contributors (experience in charting/open source)

What’s next?
performance (works to a couple hundred)
states/tweens (animation) – bubble to column with Degrafa SuperShape
transitions
more visualizations (hopefully contributor driven)
beta 1.0 (sometime in August)

How do I get a copy?
http://www.axiis.org/ under MIT license
http://code.google.com/p/axiis/ for source/svn

UX Process
1 Research
2 Persona Development
3 Wireframe Development
4 Design Framework
5 Vision Prototype

Timeframe is highly dependent on other project load and budget for this specific project.

Research
“customers sometimes do not know what they want” or most of the time
“it can be dangerous to just listen to what users say they need” – John Seely Brown
“it is more from engaging with user, watching what they do, understanding their pain points, then you get big leaps in design.” – Debra Dunn
This doesn’t mean input from the users is unimportant.
Immerse yourself in the culture of the user (as fast as possible)
Create goals (single sentence)
Do user interviews (using open ended questions)
“what makes it a good or bad day?”
“what activities currently waste your time?”
“How do you find workarounds/shortcuts?”
Types of Users – Beginners, Intermediate (most important), Experts
Competitive research is important while immersing yourself in the industry

Personas
fictitious people who represent the archetypal qualities of your audience
drawn from field research
named as individuals
developed for specific contexts
typical and believable

Personas are not
based on demographics or market segments
drawn from gut feelings about your audience

Example: photo, name, age, relationship to project, background, day-to-day activities, goals

Context scenarios – taking one persona, narrate that persona using one product to achieve a specific goals.

Wireframes
brainstorming with fellow designers, developers, and clients
wireframe the user screens and interactions (start to place content)
no design applied (try to stick to BW)
several iterations/refinement
pretend the interface is magic (helps ignore which technology is used)
the client saying “no” is definitely a good thing since it is their field

Design Framework
collaborating with designer
several iterations/refinement again

Vision Prototype
most important deliverable
a real working app in the deploying technology
can capture key problems before full app is built
apply design framework
rapidly built from a couple days/weeks
created and skinning in Flex/AIR using CSS/Degrafa
devs can take and reuse skins (saves time later)

Purposes:
user testing (robust formal to friends/family) – Silverback
stake holder buy in
data/service validation
marketing
demos for trade shows, other

What is an itemRenderer?
a list renders data usually in a label
property on list classes typed to take an IFactory

Types of ItemRenderers
2 main types: custom and drop-in item rendereres
3 ways to create them:
Custom MXML Class
Separate Actionscript 3 file
Inline with mx:Component tag

Custom IR
Most basic is just a label with two pieces of data

Drop-in IR
Some flex framework components implement this.
implement IDropInListItemRenderer
doesn’t give you the data property but gives you listData
doesn’t care what the data is. just display it.

Reusable Renderers
do not associate it with a column
to use listData, your IR must implement IDropInListItemRenderer
some such as checkbox, button, numericsteper, text, and datefield already do this
you have to define the getters/setters for listData in the custom IR

Sizing an IR
always the width of the container
height is the rowHeight unless variableRowHeight = true

Virtualization of ItemRenderers/Renderer Recycling
if value>10 then turn color = red. make sure to say “else color = default” as well otherwise you will have scrolling problems.
renderers are only created for the cells that are shown on screen then re-used when those are scrolled off the screen and others are shown.

Renderers as Editors
there isn’t any connection to data by default.
set list component to editable
set rendererIsEditor=true
set editorDataField property if your renderer is not “text”

Example: Slider as Renderer and Editor
slider does not implement IDataRenderer
set editable=true, itemRenderer=MySlider, rendererIsEditor=true, editorDataField=value
further code on their blog

Building for Performance
we are smart about creating them but if you have a 20×20 grid then there are 400 on the screen.

layout’s are expensive an unnessary for IR.

• instead base your renderers on UIComponent and layout stuff yourself.

developing your IR’s in MXML can be more expensive. you won’t need data binding (sets up lots of listeners).

• instead use ActionScript – you know when data is changing

example shown changing from HBox to UIComponent increased performance by around 33% with a decent amount of data and 5 children.
alway use UIComponent if you know how its going to look

Flex 4 IR’s
DataGroup is the basic, skinless component used to render data on screen
SkinnableDataContainer is skinnable version of DataGroup
list extends SkinnableDataContainer and adds selection, keyboard handling, and a few other things
itemRendererFunctions make it easy to deal with heterogeneous data items
data containers support both data items and visual elements
no more IDropInListItemRenderer – those props are pushed down to item renderer directly now
IR are in charge of all aspects of it’s visuals, which means it must draw highlighting for hover selection
support for differently sized IR is much improved – new typicalItem prop

Ryan’s Blog – http://frishy.blogspot.com

Joan’s Blog – http://butterfliesandbugs.wordpress.com

Services:
Tiles can be hosted by yourself, they host some, MS hosts some. Google is coming.
Geocoding/Reverse
Query/Identiy
Routing w/ barriers and time windows (no left turns)
Buffer/projection
GeoProcessing

Lots of examples about processing. Very cool stuff but not really applicable to GV. The simple map stuff with hosting our own tiles might work.

Notes:
DriveTime polygons
Collaborative mapping with updating another clients that are looking at the same data.
Client side clustering/routing with barriers
Great book – ActionScript 3.0 Animation by Keith Peters
http://thunderheadxpler.blogspot.com

Cost:
“Right now it’s free”