Why jQuery?

powerful, wide support, works for me (after initial period of grumpy old man whining)

History

• 3 years old
• high compatibility
• free
• minified, gziped or full fat
• available on Google CDN

What does it do?

• finds stuff
• changes stuff
• loads stuff
• and more stuff

Signs that you may be looking at jQuery

• $ is jQuery
• lots and lots and lots of stuff chained together because everything returns itself

Selectors

• find soemthing
• follows CSS rules
• Basic – $(“#someId”) $(“.someClass”) $(“p”)
• $(“#parent p”) –> all paragraphs under #parent
• $(“something:not(somethingelse)”)
• also has ^ $ for beginning and end
• $(‘a[href*=cnn]‘) –> all links to anything containing cnn
• $(‘a[href$=pdf]‘) –> all links whtat end in pdf
• $(‘#favThings > li:even and dd
• :eq
• contains
• form related (checked, selected, en/disabled)
• next, prev, parent, children, and siblings
• filter (custom JS code)

Manipulation

• adding, removing classes
• setting, getting attributes
• prepending and appending
• changing contents

Events

• what you expect (click, change, etc)
• special ones (hover, toggle)
• $(document).ready

Effects

• tick me off
• “will my client want to see this 50 times?”
• hiding/showing
• fading
• bouncing
• http://docs.jquery.com/effects

Ajax

• load
• get (has length restriction)
• post
• getJSON
• getScript

Plugins

• over 2,400
• wide range of areas: ui, form, widgets, etc
• quality also covers a wide range

Favorites

• Validate
• ThickBox
• jqGrid
• jQuery Select

jQuery+CF

Helpful

• still the glue
• native JSON format
• returnFormat
• XML generation

Not So Helpful

• onRequest (EVIL++) fixed in CF9
• whitepsace
• debugging

• CF custom tags are user created tags to extend the tag set
• written in CF
• executed on CF server
• used along side standards tags
• locally available

Why use them?

• code reuse
• encapsulation
• abstraction
• simplification
• customized control flow
• packaging

What about CFC?

• yes everything you can do everything in CFCs but sometimes cust tags can sometimes offer a more natural feeling

Basics

• stored anywhere the server has access to
• invoking: cf_, cfModule, cfImport
• execution: open, close, self-close
• scopes: attributes, thisTag, caller, variables
• passing data to/from:

Gathering and consuming data

• using custom tags as functional facades
• implicit execution

Leverage Relative Addressing of Template

• use custom tag as a proxy to CFC creation
• CFC names as relative to tag proxy location

Can be recursive!

Examples

regEx Loop  (cf_reLoop) – loop tag to easily access Java’s regular expression matching functionality (faster/more robust than CF)

template mailer (cf_mail) – tag to encapsulate passed in data into a template and then mailed

navigation/navigationItem – set of tags to create a navigation with as many items as needed. handles hover functionality. decouples where a link is going from how it works to get there makes it easier to change either property later.

• cfAssociate is used to pass attributes from parent into the child
• cfExit method=”exittag” is used at the bottom to only let the tag be called once regardless of if it is a self-closed ta

switchLoop – works like cfSwitch but allows for “resetting” of expression. allows for two different cases to be hit.

randomSwitch – works like cfSwitch but a random case is selected.

renderXml – recursive tag to loop through an XML document.

Resources

http://www.bennadel.com/

• application programming interface
• 2 types – RESTful and RPC
• offers ability to share data and functionality
• centralize functionality

Possible Problems

• poor planning can cause poor usability
• needs to be accessible across multiple langauges
• variable scope may not exist / be accurate
• documentation needs to be extensible
• security can be tested/attacked

The biggest security threat to your API

• you!

Documentation

description, parameters, example call, example response, error code

Great Examples

twitter, flickr, digg, openOffice

Development Process of an API (ideal)

1. create use case
2. document
3. test documentation
4. code API
5. test
6. hack
7. go to 4

Creating a RESTful-ish API

• URL parsing
• request type parsing
• XML responses
• requires authentication
• error handling

Resources

InfoQ article – REST Intro – infoq.com/articles/rest-introduction

What can extensions do?
Anything CF can!
•    written w/ CFML and XML
•    runs on a CF server
Common Uses
•    code generation
•    framework scaffolding
•    server management / probes
•    code analysis
•    reporting
Add New Context Menus
•    RDS View (databasees and tables)
•    Outline View
•    Resource View (projects and files)
Workspace Events
Installing a CFBuilder Extension
Preferences -> CF -> Extensions
Good practice to put extensions folder under CFIDE so they are separate from applications

ide_config.xml

• application details
• extensions are a simple zip archive
• optional collection of data during install
• responding to workspace events – onProjectCreate
• adding context menus
• filter with regEx to optionally appear

Collecting User Input
static input w/ native eclipse controls
types

• string
• dir
• boolean
• file
• password
• list

attributes

• name
• label
• tooltip
• required
• default
• checked
• pattern
• errorMessage
• helpMessage

keywords for default values
{$projectLocation}

• projectLocation
• projectName
• serverHome
• wwwroot

Handler Communication

• sends info via XML

Dynamic Input

• XML, HTML, AJAX, Flex, Eclipse SWT
• showResponse=”yes”
• response can be HTML or XML

Tips

• You can reload from prefs if you make changes to the xml
• Errors output to Eclipse logs (windows > show view > other > general > error log)
• You can also write your own log with cfLog
• Use CF to generate CF (use generated code as <:cf and rip out the :’s later)
• Adam’s Ext-Util.cfc

• Facebook -> your website -> Facebook API -> your website -> Facebook
• They scan for “bad” stuff before displaying it.
• Good though because its all secure for you.

Setup

1. name your application (read the terms – good bathroom reading)
2. make note of your API key and secret (needed for all API calls)
3. setup a facebook URL (unique) and the callback URL (your server and should be directory only as they will append different files)
4. settings page to set sandbox, app type, sms integration and iphone

1st Roadblock

• validation is carried out on form fields that have specified names (pre cf9)
• fb_sig is in the wrong format and will never validate. set to another field and clear that field.

A Look at FBML

• tag system that handles output of data
• tags display data just as the website does
• tags are mostly used for UI/layout
• conditional logic tags do exist (if/else)

Digging into the API

• RESTful-ish API
• dot delimited methods
• methods are grouped in actions
• returns XML/JSON/PHP
• access to FQL (SQL-like)
• API Key, Call Id, MD5 Hash of secret and Version needed on EVERY request

CF is your glue

• Use API to get data
• parse and loop over data with CF
• output using FBML
• store data associated with uid w/ CF + SQL
• do not use cfLocation but rather fb:redirect and you can only redirect to FB

? Can you limit who can add your applciation by FB network?

After they allow it, you would have access to all that information. If they are not in the network that you wanted then you could just show a denied message or there may be API functionality to kick them oput of the application.

simonfree.com/presentations

twitter.com/simonfree

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)