Uses upcoming.org REST API to show events

ColdFusion End

• basic CFC to call API (getCountryList, getStateList, getEvent, search, etc)

Mate

• easily handle flex events
• tag-based
• dependency injection
• supports modules
• flex messaging support
• extensible (extensions available)

Typical Process

• view — event –> main.mxml -> eventMap (remote objects to CF) -> manager
• result is then injected into the view

Terminology

EventMap:

• EventHandlers
• RemoteObjectInvoker
• ResultHandlers
• MethodInvoker
• EventAnnouncer
• Injectors

Manager

Setting up your Flex App

• Enable CF remoting
• Include mate.swc
• Typical folder structure

Mate does not care about how you build your view

• follow standard flex practices
• no framework references in the view (exception being dispatcher which does “private” events but this shouldn’t be used unless needed)

Events are Events

• just regular events
• dispatched using standard dispatchEvent() method
• “bubbles = true” will be helpful

EventMap handles Mapping Events

EventHandlers define

• what the event responds to

Confronting your manager

• business & app logic
• bindable properties

Injecting Data

• keep view independent of framework
• view has a setter method to update it when event happens
• injectors are defined with target and then data to pass (propertyInjector, listenerInjector).

Responding to event in the view

- cut off -

References

• http://mate.asfusion.com
• http://www.adobe.com/newsletters/edge/june2009/articles/article5/index.html

New things in Centaur

Fast Remoting

• made several times faster
• direct data translation between ActionScript and CF types
• circular ref bug is fixed
• no code changes required
• support the old style remoting for backwards compatibility

ActionSript proxies to access CF tags

• access CF tags from within MXML
• chart, image, document, mail, pdf, pop
• no server code (cfm/cfc) required
• enable access to services in CFAdmin (username/IP)
• include “services.swc” in AIR app
• use <cf:Config…> to connect to the server

? offline access to proxy?

No the processing engine is the CF server so this part will not work offline.

Built-in online support

• build offline apps without SQL mess and conflict handling
• CF-AIR persistent framework for SQLite DB on client side
• CF keeps track of all updates to local DB and syncs the server
• session.commit() will send all changes that have happened in the session since the last commit
• conflict handling is completely configurable based on operation (insert, update, delete). you get back the original object and the new object and can decide which should be saved where.

Other Enhancements

remotingFetch

• cfProperty attribute
• if false, the value is not send on the wire for flash remoting
• true by default

resetTrackingChanges

• resets all tracking data in CF offline store

ignoreLazyLoad

• on commit, need entire tree

askjayvir.blogspot.com
rakshith.net

Why?

• Everything isn’t always out of the box
• open source
• times are rough (set yourself apart)

Real world examples

Tips

• become familiar with class hierarchy
• FB keyboard shortcuts
• source location (including default CSS)
• finding component that best fits needs
• preserve compiler generated code

Class Hierarchy

• important to know wehre you are so you know whats available
• UIComponent is base case for all visual components
• ref docs contain inheritance paths (docs are your best friend)

Keyboard Shortcuts

• Quick class opener (cmd + shift + T) – opens window and filters list as your type in search
• quick class property/method (control + O) – lists all methods and properties for current file. works well for large files like UIComponent which is 9300+ lines

Source Location

• /{FlexBuilderInstall}/sdks/{version}/frameworks/projects/framework
• defaults.css

Demos

TextHeader/LabelHeader

• Extends Text & Label
• Objective: add border support
• Container supports bg and border styles but how? container base class and found the borderSkin style value

ResizableTextArea

• “gripper” was keyword

Preserving Compiler Generated Code

• not all functionality is hard coded in the source
• some is wired in generated code – deferred instantiation (tab content aren’t rendered until clicked on) and effect triggers
• -keep compiler switch in the project settings

Overall, a bit over my head but good preso. Javier really knows his stuff!

I took numerous photowalks and here are all my photos from my adventures in Indianapolis, IN.

I used my blog for notes on each session and here are links to each:

Monday
addEventListener() now what? – Josh Buhler
Degrafa: Declarative Graphics Framework
Yet Another Flex Mapping API, NOT! – Mansour Raad
Custom Item Renderers – Ryan Frsihberg and Joan Lafferty

Tuesday
Putting the UX in Flex – Joe Johnston
Axiis Release! – Tom Gonzalez
Making your Flex Apps Standout with Great UX – Francisco Inchauste
Programmatic Skinning – Jeremy Saenz
Breaking Down your Apps with Mate – Laura Arguello

Wednesday
Integrating Accessibility in an Enterprise-Level Flex App – Michelle Bagur
Using RSLs – Chase Brammer
Building Real-Time Applications in Blaze DS/LCDS – Dan Blackman
Flex, CF, and LCDS Magic – Nick Kwaitkowski

That’s all folks! Getting in the car with @betsyweber, @babarakus, and @quetwo to head home. I am sure there will be some more interesting conversations on the way home. Spirit babies? Gorilla legs? Bacon suckers? What?

CF –> Adobe CF 7+ works but 8+ has LCDS baked in. No Railo/BlueDragon/etc.
LCDS –> middleware app designed to move data
Flex –> 2.0.1+
Data –> any serializable data including DB, LDAP, email, FTP, mapping software, web services, etc.

LCDS – expensive? yes and no.
BlazeDS is light, open source version without data management
LCDS ES – J2EE app that Adobe sells that includes all the features of BlazeDS, plus DM, NIO messaging, etc.
LCDS ES Single CPU License (was Express Edition) – free version that works on 1 CPU and will not cluster. Can be used for dev/testing/production environments. based into CF8 download. MSU has done 3-400 clients on this free version.

Flex SDK “Next” will be offering client side data management. Why should I care?
great for small data but not much else.
no data sync, data caching, or conflict resolution

Data Management
pass data to LCDS and let it handle passing it to the client. You can control how it passes including pagination and data sync.
LCDS assumes its the only one interacting with the DB.

Data Messaging
allows flex clients to communicate with each other without tying up resources on the app server
over TCP, HTTP polling, etc.

Data Proxying
you can proxy your web sevice or remoting calls through the LCDS to help get around restrictions in firewalls and policies

Example of data management
2 clients. change data on one and see the changes on another. reduce the chances of clients having conflicting data. Revert is built-in with hardly any code.

Coding the Flex Side
create a new collection to store the data
create a value object so the data serializes properly
utilize the DataService MXML tag and call the fill function

Why it works?
data is packaged up into value objects or packages of data
each VO is tracked separately as to who is viewing, editing, etc.
users then subscribe to a set of data
LCDS will ‘listen’ to any changes made to the data in the client
if the collection that holds the data is changed, LCDS will take change, change VO in memory, send change to app server and update clients
when an update is sent to other clients, it will check its local copy to make sure it hasn’t changed. if it has, it will issue “conflict” event and allow the client to choose.
on the client, 95% of work is handled by collection class
handles updating LCDS with changes and notifying other visual components of the change
when a dataGrid broadcast the change event, the collection hears, updates its own data and passes on the change.

Blackbox of LCDS
config files in wwwroot
master is services-config.xml
other files include channel info (services), messaging config (messaging), DM (data-management) and flash remoting (remoting)

Channels
Default Channels:
my-cfamf –> does AMF endpoints. binary over HTTP. firewalls might break it but normally a good way to go.
cf-polling-amf –> works well with nasty firewall. every X seconds ask server if there is new data
air-rtmp (Nick will provide downloads) –> direct connection through tcp socket which stays open. offloads some i/o from your application server. port 2050
cf-rtmp –> port 2048
port range recommendation: typically stay around 2048. that is registered by Adobe for RTMP. above 1024 because below that is well defined ports. it will all depend on the client firewalls.

Destinations
a destination needs an endpoint which is used to encapsulate your data based on server.
multiple channels are allowed as fall backs. if the first is not available, the next in the list is used after a “reasonable amount of time”. limit of 16 channels.

Properties
component: cfc that does the data handling
scope: how long the data lives
access: remote (default) corresponds to the access of the cfc
property-case: change the case of functions/variables
metadata: identity – normally ID of the table ie PARKNAME, query-row-type – path to value object

Documentation in default file contains all the options/values.

Lots of channel options
AMF typically run over HTTP. Tend to be slower or designed for one time polls and can be combined with HTTPS.
RTMP typically run over 2048. real-time, quick, easy but firewalls have been known to block on occasion.

Don’t worry about selecting a single channel. Normally RTMP and then polling is a good option.
Each destination can define channels which it wants to use
Each destination is just a name but must be unique to the server.

CF Fun!
final part of this puzzle is the CF side. could be any language by why?
traditional CRUD
fill() – think of this as the get all
get() – this is to get a single item
sync() this performs create, delete, and update
count() – this needs to return the number of records for pagination, finding updates, etc

Unsolicited Updates
one of the coolest features is the fact that you can push unsolicited updates to clients
examples: non-flex client update data, customer buys something from your store, or new email comes in

Creating unsolicited updates
3 easy steps:
create event gateway of type “DateManagement”
create some sort of VO
pass this VO to the event gateway – the update will be pushed to your clients.

With FB/RDS, there is a wizard for creating the value object/cfc. Flex 4 will include more wizards.

Examples of uses:
CRUD for DB
Directory watcher
collaborative doc management
email client
collaborative GIS app

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

Section 508 – 1998
required federal agencies to make their technology accessible to people with disabilities
any group that gets money from the federal government also falls under this
ie. universities, benefits,
http://section508.gov/

Principles of accessibility (developed by WCAG)
perceivable
operable
understandable
robust

Compliance
How do you know? test, find impaired user, combination of automated tools/best judgement
Is the “spirit” of compliance good enough? alternative approaches, are they different but equal? some say yes, some say no.
For example, 2 steps vs. 10 steps? equal?

Why does it matter?
Target Lawsuit
Why? not section 508 compliant b/c of alt tags
By whom? national federation of the blind
Results? working with org to fix the site. $6 mil in damages

Assistive Technologies
Keyboard navigation
no extra requirements
tabbing/hotkeys

Screen Readers
JAWS by Freedom Scientific (has the market share)
Windows Eyes by GW Micro
VoiceOver by Apple (sounds the most like a human)
the first two work with Flex

How do Screen Readers work?
MSAA (Microsoft Active Accessibility)
API – 1997
IAccessible COM interface
4 pieces exposed by API: name, type, value, state
UIAutomation

Client is assistive technology and server is the application.

Communication is through properties (client asks server) and events (server broadcasts)

Examples:
Good?
amazon.com – tells you that there is an accessible version right away. much simpler.
dignubia.org (IE only) – read all links/buttons

Bad?
google.com – didn’t tell much from the start. one tab brought to the search box and worked well.
contrast is normally a big issue.

Flex 3 and MSAA
three main classes
Flash.accessibility.AccessibilityImplementation
Flash.accessibility.AccessibilityProperties
Flash.accessibility.Accessibility

compile with “-accessible = true”

Official Flex 4 statement
When it ships, spark components will not be accessible/nor automation. 4.1 will include this and won’t be far behind. Next version of the player will look to get past MSAA but this isn’t even in the playing stages yet. So… continuing to work on it.
- Matt Chotin

How is it supposed to work?
Flex 3
JAWS 8,9,10 with IE. JAWS scripts have to be installed.

Chain of command:
Flex SDK
Flash Player
JAWS scripts
JAWS

Official documentation says there are 28 accessible components but the data visualization is separate from this.
Do not try to retro-actively put accessibility into a Flex project –> nightmare!

Tips/Tricks
make sure scripts are installed
start tabIndex at 1
don’t be afraid of the focusThickness property (3)
get focus into Flash app (semi successfully)
possible method to force the tab to stay without app
tooltips – pay attention to name/description and the 4 values of them

Seems like a great framework that is headed in the right direction without much overhead. Definitely going to look into it more.

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.