360flex - Beyond Point and Grunt

Brain dump notes...

Get beyond point and grunt
Tony Hillerson, Effective UI

using picnik for examples

what other gestures can we use for a better experience? conveying intention with meaning
buttons, menus arrange things so they aren't in the way. tabbed menus serve similar purposes as menus.

relationships -
context menus: right-click menus and radial menus as well
keyboard shortcuts: ctrl-s
command line: ls, format c:
mouse gestures: click and drag over link to open in new tab, click and "circle" links to open all in new tab (see optimoz). less wasted mouse travel

fitts' law - law that predicts how much time it takes to point at something (doesn't have to be on a computer)
the farther away, the longer to point
the smaller size, the longer to point

QED make bigger buttons :)

Also use edges of the physical screen - can "bounce" the mouse off the edge of the screen so to speak. hot corners are similar.

make buttons closer to pointer so user doesn't have to work so hard to get pointer there

don't forget that the user has to FIND the button first!

the first time an app is used it's ok to take longer - exploratory. but as tasks become instinctive (repetitive) time to task becomes really important. think about ctrl-s, using that keyboard shortcut isn't necessarily obvious but as proficient it's fast and easy way to save!

menus
where is the item. how deep is it. sort of like how long does it take to navigate a maze.

keyboard shortcuts - good for when you are already using keyboard (ie typing) and don't have to switch to mouse!

quicksilver, cmd-space then type "f" will quick launch firefox.

Cairngorm stuff - blah blah ginger ;)

labs.effectiveui.com/commando
thillerson.blogspot.com

360flex - Stunning Flex Design

brain dump notes...

Building Stunning Flex Applications
George Comninos, Adobe

ways to skin:
css
graphics
programmatic
themes

use flex style explorer to create look, then export the css

getting graphical skins in from fireworks.
templates and commands will be available on labs... after max?
fireworks cs3, commands, flex skins
can choose one, many, or all components to modify
export from the flex skin menu
flex builder 3, import skin artwork

flex builder 3
includes css design view.
capability to automatically embed fonts.
can use scale grid to determine which items can grow or shrink.

360flex - Design Eye for the Dev Guy

...and gal too, apparently!

Brain dump notes...

Design Eye for the Dev Guy
Aaron Adams, Cynergy

Color theory and 2D design - rules to learn and follow for implementing good design

Constructing a composition - blocking things out on paper. don't worry about color. worry about flow and focal points

Present wireframes in b/w with no graphics to eliminate judgments and make it clear this is not a polished design

color theory - placing a color on different backgrounds to enhance focal points (or not), looking at distractions and visibility

distinguish focal points - use color and contrast to keep focus on important tasks. if there is an action that's important use more contrast so it is not lost.

prioritization - beware of flow and what needs to be accomplished in what order? perform tasks left to right or top to bottom so that it's logical to the person using it.

think (and build) in layers - comping in fireworks vs. photoshop - fw is higher productivity. shading, lighting, shadows improve "realism".

details - take some time to make things LOOK GOOD like buttons :) play with the elements to see what happens when you add styling to elements.

general suggestions:
eliminate excessive lines - reduce visual distraction, use implied lines instead of a physical line
allow elements room to breathe
design for consistent implementation
understand context
realism vs physical reality - ie put all shadows in same direction, so design mirrors "real world"

90% white on black is still "white" but not as intense, a little more eye friendly :)

transitions are "cool" but may not make sense in a day to day productivity setting. users don't want to wait for an animation or transition.

design still sells. if it looks good and makes sense then it will be more "popular"

get comps in front first, before functionality designed

accessibility - 508 compliant apps? might require multiple versions of applications

use familiarity with existing forms as a jumping off point. borrow from previous experiences so they don't have to relearn a process

make "design time" a phase of the project. once design is finalized then it's dev time, and you don't go back until version 2 :)

Combination of making things look "good" and enhancing productivity and storytelling. keep balance, productivity and flow in mind. Does everything have a purpose?

make sure transitions are consistent. if some items fade in and out, then all similar items should to avoid "jarring"

get the application WORKING functionally first then go back and add transitions as they make sense.

immediate user feedback and recognition. ie login errors, changing context

monitor testing for colors and contrast? some colors look better on mac monitors than lcd & pc monitors. ensure you have good contrast, perhaps exact colors aren't the most important thing?

use color and motion to get attention. gratuitous motion will distract user from what is important and focal points on screen

addressing gender, age, and audience of your application. know your audience!

pixel perfect suggestions:
build in layers, back to front
tackle one element at a time
don't overly depend on tools
borderSkin is your friend - export PNG out of fireworks
embed fonts in Flash - saves on file size :)
class extensions,
blendmode attributes
don't give up!

360flex - Monday keynote

Brain dump notes...

Things have changed a lot since flex 2

demands:
better experiences - intuitive, lower training costs
better user interfaces - using graphics etc to enhance
better integration - data from multiple sources
performance - faster data arrival, scrolling, etc
compatibility - build once for all platforms
just plain better :)

picnik.com
article on wsj: looking at app through users/customers eyes and noticing the experience. blur line between browser and desktop

easy to use. image processing. uses url states.

buzzword
ms word quality word processing in a BROWSER. targeted at college students for online document sharing. version control.

sliderocket
presentation software, built and delivered online. collaborate and update online so they are always in sync. changes and updates. portability

flash player adoption
passed 92% for flash player 9
8+ million installs/day
2.44 billion installs

flex growth
intranets - more companies choosing flex to power their intranet and internal apps

ribbit
soft phone to route and manage phone calls with simple flash ui

kapow
api generation tool to create xml/rest based on existing websites
EVEN IF they don't have an API (i.e. LinkedIn)

Flex history
changes to flash player
developers and structured programmers, not designers. new market and how can we make this class of developer successful
coming soon, better graphics integration, application performance, OPEN SOURCE, text formatting and control, skinning and styling, sdk faster and leaner

NEW FLEX 3 BETA IN OCTOBER

upgrade pricing will be gentle, value should be there compared to feature set.
1000 community bug base users, please register at bugs.adobe.com/flex/
flex 3 will ship as open source
flex 3 will ship in early 2008

AIR news
customer api feedback is very important
sqllite implementation added to runtime
application signing and security, certificates
onAIR leg 2 begins tomorrow
AIR 1.0 will ship in early 2008, parallel with Flex 3 ship date


MAX 2007
Chicago, Barcelona, Tokyo
over 60 flex sessions, mostly given by the engineers
flex bootcamp with dev team (also livecycle, coldfusion)
meet the flex team
registration surpassed 2006 (Las Vegas) - largest Macromedia or Adobe event ever
360flex discount code

Ted Patrick
ted@adobe.com
Flex Evangelist

360|Flex

I am at 360|Flex in Seattle this week. I know, I know... I just got home from Disneyland, and I am already back on the road. It won't end with this either - I think this weekend we will be running around checking up on family in Salem, Medford, and Klamath Falls. Hopefully after that I will get to stay put for a while.

Anyways - I am staying at the Red Lion downtown on 5th, room 1207. If you are in this neck of the woods and want to meet up drop a line. I am planning to go to a Mariners game tonight, should be fun!

The big news here so far is that Flex 3 and AIR 1 will be released in parallel early in 2008. Also next spring there will be two 360|Flex conferences - one in Italy and the other on the East coast (city TBD). Good to see they are planning ahead!

360|Flex

In early March I attended the 360Flex conference in San Jose, CA. It was such a big success that another is being organized for August... this time in Seattle, WA. If you are at all interested in Flex, or even just RIA development in general, I highly recommend attending. Visit their website for more info.

I am looking forward to reuniting with old friends as well as seeing new faces. Hope to see you there!

Exhale

I am back from 360Flex... what a great week! I am a little slow getting rolling again and almost afraid to get back into the office routine since I am heading out again on Wednesday. Finally got home at 10pm last night as the Sherpa and I were bumped from our original flight. (It's all good - now I have an airline ticket that will get me to MAX 2007, 360Flex 2008... or somewhere sunny!)

Shout out's... It was fun to see familiar faces (Sim, Tom, Becky, Jared, Jennifer, Ben) and put faces to names (John, Ryan Stewart (yes, he has TWO blogs), Jesse, Mary, Drew, "the" polyGeek, Philip, Matt). I missed a couple of people I was trying to meet up with (Ann, Curt, Laura)... but I guess that is just how things go!

As far as conferences go... this had to be one of the best I have attended. The sessions were great, the attendees were there to work & play hard, and the food was AMAZING (gimme some more of those meatballs, please!). There are always hitches when you invite 400 of your closest friends to come to a party... and there were hitches... but our hosts and our venue (the eBay Town Hall Conference Center) were great and I will definitely be watching for the next event!

Play time is almost equally important at these events - and 360Flex was good for that as well. San Jose's night life scene is a little questionable, but we did manage to find some good hangouts. On Sunday night the Sherpa and I caught the CAKE show at Bimbo's in San Francisco. Monday night was the social at eBay (beer and snacks... yummm) followed by sushi at Sushi Zen. Tuesday was another social (Sim and I suggested Rogue Dead Guy Ale... and it magically appeared on tap!) followed by a fabulous "Swirled Margarita" at Aqui, then watching the boys be boys at the Blue Monkey. I confiscated laptops, Flash-enabled cell phones, PDA's, and blacklisted words including: "Flex" "Coldfusion" "FlashLite" "compile" and "API". I was holding strong with a one-drink-per-night maximum so I also became the cab driver (which was my pleasure). Everyone made it safely to the conference (if not the 8:30am keynote) on Wednesday morning, which made me proud! Wednesday was a little more low key - a lot of folks had left already or were hitting the sack early - so the Sherpa let me tag along to meet up with an old friend of his.

So... what did I get out of this experience? Got the word out about COWPU (check that spelling, John!). Came home with my backpack, laptop, brain fully loaded with books, information, software, more information, sneak peeks (not necessarily in that order)... And best of all made some new friends.

Most definitely worth the price of admission. I can't wait for next year!

360flex - Wednesday keynote

Started off with a talk about the Adobe development team for AmGen - a bicycle race tracking application. It incorporates live video, flickr content, and GPS tracking integrated with Yahoo! Maps.

This app was built by 3 people in 6 weeks. (Note: this is an incredibly short turnover. Impressive!)

Talked to their development cycle and some best practices, and recommendations for iterative application dev cycle.

Next Flex

I think this is what everyone came to see - what's coming up in the next version of Flex? Codenamed "Moxie" and "Borneo", release dates will be in 2007. Since it's still in development not all of the features are guaranteed to find their way into the final release.

Creative Suite 3 includes Flash, Fireworks, Illustrator, and Photoshop. All of these products will be tightly integrated with Flex.

Fireworks has a Common Library that includes Flex Components. This gives designers the ability to build comps - including Panels, scrollbars, and other elements - apply colors and styles - and export to MXML. (File, Export, MXML & Images) The resulting code can be pasted into new or existing Flex projects.

Borneo

The upcoming version of Flex Data Services is code-named Borneo. It will include better scalability, LiveCycle integration, and web services.

Moxie

The upcoming version of Flex Builder is code-named Moxie. Better language intelligence, profiling, design view enhancements, data integration, enhanced datagrid and list functions... just a few things that were done well in FB2 are going to be even better... or were overlooked... are high on the list of priorities.

There is a "rename function" option; go to an instance of use and in the background FB will parse your application and rename all other instances. This works for methods, variables, etc.

Code mapping includes the ability to search for all instances of usage for an element name - cross class!

Memory optimization options including variable space tracking.

Flex & Apollo

An Eclipse plug-in for Flex is coming soon. Apollo camp will be 3/16 at the Adobe campus (hint, hint).

Extending Flex

A lot of work is being done outside Adobe. Private companies (ESRI, Farata, and Yahoo!) and the community (flexlib) are working to extend the capabilities of Flex.

• ESRI demo'd a mapping app
• Farata demo'd a business reporting app
• Yahoo! term extraction application was shown
• flexlib is a great open source repository on Google Code. See sample components here

Flex API Posters

Soon these will be available online. They are working with distributors who will have the ability to drop ship them directly when orders are placed. Linkage coming soon!

What's next?

Interest for another 3-day Flex conference (360Flex) in August is high.

Possible usergroup tour for 1-day Flex trainings (120Flex) - perhaps 101 or 201 level?

Big thanks to everyone that made 360flex possible, and a huge success!

eBay Stuff

eBay is hiring. Wanna build cool Flex and Apollo apps for eBay, working from their campus in San Jose?

Hosting an eBay developer conference in Boston later this year.

Libraries for eBay/AS3 BETA are being released... NOW! Go to Adobe Labs to download the good stuff!

360flex - Flex with ColdFusion

presented by Ben Forta

(Note: he has a really cool logo on the preso title screen, with the Flex and ColdFusion logos morphing together. Cheezy happy moment!)

Brain dump stuff

Talking thru various Flex and CF integration good stuff, including FDS integration with CF.

CF and Flex were designed to work together so they compliment each other.

Flash remoting, FDS adapter, messaging gateway (CF enterprise edition only) ... all part of the CF integration package.

RDS integration includes file system, data source, sql query builder, and service browser goodies.

CF and FDS2 are both Java apps running on the J2EE Server.

Try Flex online at http://www.tryflex.org !!

Flash Remoting

Flash remoting (required for CF/Flex integration) is built into CFMX 7.0.2 with no plug in's or extras to install.

Use RemoteObject to access your CFC's. Please. :) More efficient because of the binary protocol used (AMF3) and there is no FDS required.

The CF application wizard in FB2 is really slick. There is a lot of good info about using this on the Adobe website and Ben's blog so I won't post details here. If you are starting to use CF and Flex together this is a great way to go!

CFC and AS class must have the same properties, so use the tag in your CFC. Use the full path to the CFC with a fully qualified dot notation path. AS object needs to be associated with the CFC - use the [RemoteClass] with the fully qualified path to the CFC. Or... things may work... or not. Remember that even though CF is case insensitive, AS is case sensitive ... so spelling and case (and day of the week and the current ambient temperature) all matter because AS is picky. :)

Flex Messaging

Server initiated communication (as opposed to client request). Publish & subscribe to "push" data to anyone monitoring a "channel".

Uses RMI Registry (must enable FDS via CF server admin first) to connect CF to the messaging gateway.

It is really slick - the push is immediate and doesn't depend on polling or waiting. All initiated by the server, a la "hey all you sessions that are listening, here is the new data you need to display". Cool!

Configured as an Event gateway in CF admin, just needs to be running and connected.

All this integration is really easy with Flex and CF. Connection with Java, PHP, any other backends will require more work!! (So.. another benefit to using CF!)

Security

By default, Flex and CF will only accept connections from the same box.

You can configure a list of allowed IP addresses for both sides if CF and FDS are on different boxes.

FDS Data Sync

Eliminates data versioning problems - the "whomever saves last, wins!" scenario. Server will detect a conflict and raise an alert giving developer ability to code message box to allow the client to decide what to do - or deal with the conflict programmatically.

UNFORTUNATELY HAD TO LEAVE EARLY DUE TO FAMILY ISSUE :(

360flex - E4X

presented by Danny Patterson

New XML classes in AS3

• all old functions from AS2 still available
• XMLList - if there is only one item in the list it will act like the type of that item
• QName
• Namespace

Creating XML Objects

• Parse XML Strings - pass a string into a constructor
• Use a literal
• Create an XMLList

Using the language

Property accessors

• Everything is an XMLObject, from the children and the data contained in them... even comments!!
• Two dots returns all items, regardless of their level in the XML schema (to retrieve nested children)
• Wildcards (*) - gets all elements under the catalog, so you don't have to know the child or element names
• @* - gets all the attributes of a child, useful if you don't know the schema but want to see what's available

Filtering

• can set conditional statements in variable assignments of type XMLList (i.e.
• @id==0 will get element(s) where id value is 0
• price<5 will get elements where value of price is less than 5
• price>=35 && price <=50 will get elements where value of price is between 35 and 50
• desc="toaster" will get elements where value of desc is toaster (type string)

Iterating (fancy word for "looping")

• "for" loops similar to other PL's but in var declaration, useful for totaling columns
• "for..in" loops
• Neither of these are recommended methods... so try one of these instead!
• "for each..in" loops

Namespaces (how to group related objects) - extends Sprite

• Create an envelope with soap namespace and then create a body element
• Create a variable of type Namespace that points to the soap and add to the body
• Use a default xml namespace and add to the body

Sending and Loading

• No longer a part of the XML object
• URLRequest
• URLLoader

360flex - Flex Builder Secrets

presented by ">David Zuckerman

There were some audio difficulties during this preso, so hopefully I caught everything correctly!

Some of the items they are working on for the new version are "find all references", "refactoring" and "language intelligence".

Some tips and tricks that you might not know about Flex Builder:

Importing types

• When using code insight, if you accept a suggestion the "import" statement will be added to the document.
• This also works when you type through and complete a tag.
• In addition, when adding event listeners and other functions tag insight will prompt all relevant actions.

Context and braces

• bracket highlighting in code to help you find matching braces. Great for nested statements
• Ctrl(Apple)-Shift-P will jump the cursor to the closing bracket!
• When an opening brace is typed, a closing brace is automatically inserted on the following line.

Keyboard shortcuts

• Ctrl(Apple)-Shift-T "open type" list of all types used and available in your current project.
• Ctrl(Apple)-mouse click on any identifier will jump you to the file & location where it is declared.
• Ctrl(Apple)-O search for declaration to jump to a location in your code

Tags are automatically closed when the ">" character is typed. Line breaks are created only if appropriate (i.e. mx:String is closed on the same line).

Script blocks are automatically populated with a closing tag and the appropriate CDATA information for AS.

Integrated help

• Apple-? or Ctrl-1 opens help tag to the side with information relevant to the cursor location.
• Additional clicks causes the help screen to update. Will show the selected object and any containers.
• Shift-F2 will open full help window for selected object.
• Hover over an object for additional information, data type hinting, return type of function, etc.

ASDoc

• Ctrl-Shift-D (or Source, Add ASDoc)
• Introspects and adds documentation (comment) block with parameter information

Ctrl-Shift-O removes any unneeded import statements from the current scope.

Versioning and check in

• Checks in every time you save
• right click on file and view local history to view file changes
• can roll back files from local history
• In Prefs, Workspace, Local history you can set parms for what info to keep

Hacking Flex Builder - do this at your own risk and be careful. Backups are good. The help desk will not help you if you break FB2 with this. Hacks might not work in future versions.

Code coloring

• settings in an XML file
• backup your jar
• open in WinZip (no Mac process)
• edit colors.xml
• key values should be fairly self explanatory
• some may exist but be no-op's (i.e. identifiers)
• "Sort of" works in FB3/Moxie but the file location is changing

David's mom is in the FB2 credits because she baked them cookies and sent them from Michigan. :)

Graphical Property Inspector (GPI)

• in design mode, there is a GUI property inspector
• three main sections: common, style, and size
• built from XML file so if you create a custom component you can create a GPI for it :)
• Also works with built in controls, if there is something you use frequently. Cool!

What do you call a fish with no eyes? Fsh. (Crickets chirping...) Hahaa...

Any time a JAR file is changed you need to restart for changes to take effect.

Extending Flex Builder in Java - OK I am gonna try to hang in there for the Java stuff. ;) Looks like I am needing to learn me some Java goodness on top of Flash goodness. My brain is getting full.

FB2 is built on Eclipse so it is extendable. You can add actions to the FB editor. (I am pretty sure I messed up something in this process so please don't take my notes as gospel for this section!

• create extension point
• add needed FB IDs
• change the Eclipse class to trigger

The precursor to FB2 was code named Monk. It was scrapped when the team decided to move to the Eclipse platform. The original was written in C++!

Code model projects allow you to find the parse tree for a given file and access language indices. Supports block level scoping which is at odds with AS3.

One of the FB directors used to be a fairly well know techno DJ in Detroit.

Good information and demos... will definitely need to make myself a cheat sheet with the keyboard shortcuts as these are things I regularly do "the long way". :)

360flex - Enterprise Apps

presented by Anatole Tartakovsky

When developing enterprise apps, particularly for outside customers, there are many considerations. Users may not know about "UI" or "Flex" or other buzz words but they DO know how they get their job done today. They will want to figure out ways to make things comfortable - by exporting to Excel or other familiar platforms. Your goal should be to design the enterprise app to empower users and keep it simple and maintainable so they do not try to circumvent the app. It should be customizable and extensible in real time

The demo code and information from this session are available on Adobe Developer Exchange.

DAOFlex - completely automates manual Java coding for CRUD tasks.

This is really for Java developers (which I am not)!

360flex - Yahoo! AS3 and Flex 2 Libraries - Part

presented by the Yahoo! Flash platform team

A bit of background about the Flash platform team. They are the "evangelists" for projects that should be coded on the Flash platform. They develop corporate implementation, code, library, and component standards. Some of the projects with API's available include: Weather, Answers, and Search. (Other API's will be covered tomorrow!)

Yahoo! Weather is a coordinated effort with the Weather Channel to supply detailed meteorological data, forecasts, and other info. Data is updated hourly. This library is the simplest.

Yahoo! Answers is a community driven resource, and is the largest Q&A site on the web. It was launched in Dec 2005 and already has >90% of the market share. This library is a bit more complicated, but still is pretty elegant.

Important: You will need to register for a free API key in order to access these services. I noticed that they don't have a listing for a Coldfusion developer center... but there is a sample app for the Search API that was written in Coldfusion so hopefully that is coming soon. ;)

The team demo'd some cool applications built using Flex: an Answers GUI, a Weather GUI with Answers "hints" based on current conditions. All of the apps were built in under a day, using the API's. Pretty neat stuff!

Yahoo! Search can find images, video, audio, song downloads, album info... tons of other stuff! This is the simplest API of all... just bind the data provider for your control to the results of the service! A simple example was demo'd where the user can enter a search string and present the results in a SWF. They added a couple of different states for different search types (i.e. display image thumbnails in an image search).

Tomorrow... more AS3 libraries, upcoming.org, maps & pipes!

360flex - Component Development in Flex

presented by Chafic Kazoun

A bit of a history lesson, a few years ago the expectations were very different. The bar is being set higher for good UI and business rules. Because of this we as developers need to carefully consider the architecture of Flex applications.

Break the application into smaller components. Allow yourself to focus on one component at a time. Since everything in Flex is a component, it allows reuse of code... AND a 3rd party market for components is now feasible. This is a strength over AJAX-based applications since they are javascript based.

What are application components? Higher level information. For example, a datagrid list of names (not editable). Decide what will be a component, then create the component, decide and implement the API. Don't overthink things - it doesn't have to be perfect. It's OK to go back and make changes during the dev cycle.

Layout the component as if it is a standalone application and save. Then import the file as a namespace [i.e. xmlns:pf2="com.subfolder.views.*] in your main application MXML file, and invoke the file. Congrats! You just wrote your first component.

Best practices... Remember that the component should be a "black box". That is, the application should never "reach inside" the component. This is especially important as you start to reuse components! Use the Inspectable meta tag to provide insight for enumerations. Use the Bindable meta tag to make the getter and setter accessible. Use dispatching and event listeners (add the event info to a meta data tag in the component).

Don't go too crazy and go to a lot of depth... try to keep things simple. For example... don't put styles into your component, do that at the application level.

What are custom components? You can create complex/advanced components, at a commercial level. Can be distributed or shared among other developers. Recommended to develop them in AS3, not Flex. An important difference is that for custom components you must author the validation steps. This step is not necessary for application components... and if your application component is that complicated you should consider writing it as a custom component!

Always check to see if there is already an instance of your component. This is especially important because someone could write a component to extend your component, and you wouldn't want them to fight one another.

From here we get into a lot of technical detail that I don't quite understand yet. ;) But I am pretty sure that as I use this stuff it will make sense. (At least, I hope so!) The lifecycle of a custom component is fairly complicated, and the steps of invalidation, commitment, measurement and validation have to be coded properly. In ActionScript. Again... I need to learn me some Flash goodness.

360flex - Flex Hearts Flash

presented by Grant Skinner, who finally found eBay after a half hour walk thru beautiful San Jose. ;)

Does Flex love Flash? From the POV of an ActionScript (not Flash) developer...

Embed... you can get rich contact into Flex apps via metadata, directives, or styles [i.e. @Embed(source='myfolder/myfile.png') in the MXML]. The 4 non-flash data types you can embed are images, audio, fonts & binary.

• Images: supports formats jpg, png, gif, etc; no compression (native); complex formats not supported [i.e. SVG files with animations]; compiler is smart enough to recognize the same asset if embedded more than once


• Audio: supports formats mp3, etc


• Fonts: trueType, in short - don't do it. It's a really big pain in the tookus. But it's available "mileage may vary"; system, just like it sounds - reference by system name not the file name, more compatible with CSS and web standards; Resource hog if not controlled with Unicode ranges [i.e. in declarations include 'UnicodeRange=englishRange' - as long as the language range is set up in the flex-config.xml]; no support for bitmap fonts.


• Binary: supports formats octet stream, swf, etc.; can decompress files; "shake & bake" swf's (a la Talladega Nights)

BUT... sometimes it's easier to just do all this in Flash. It does a much better job of prepping and managing assets (library). Note that symbols must be set to "Export for ActionScript". It centralizes embed statements instead of sprinkling them thru your code. Access is straightforward dot notation. Disadvantage is that it's easier to have dead assets... resource hog.

There is a "Create Flex Asset Library" tool to assist with this process. It autogenerates files and puts assets in the correct locations. Generated code is pretty clean, with little waste. Subsequent instances of running the tool, the form fields are pre-filled to the last settings so you don't have to remember the settings.

Flash 9 also has better integration with designer tools, so it's easier to bring in collateral from files created with Photoshop (for example). It can bring in vector data (or can flatten to bitmap). Text is text. Compression settings can be tweaked. It helps you import the designer elements pretty intelligently and looks like it will work well!

Fonts are still a little tricky. Flash gives bitmap fonts an auto-assigned name that you have to use (which will be similar to "Arial_12pt_st").

Here's where things get interesting...

Embedded symbols are stripped of all ActionScript.

So... how to get around this?

• Shake N Bake: Embed the SWF as an octet stream, use loadBytes and getDefinition to access classes and symbols. No code hinting and no strong typing

At least... until Flash 9 comes out

• Then use FlashCS3 SWCs. Code hinting is supported. However you cannot directly specify a location for a SWC. Bummer dude.

Since the Flex framework only "likes" Flex-y display objects, there are a couple of work arounds that "avoid" this issue. But since there isn't any intelligence... do it right the first time please. Better idea would be to write a class to extend the UIComponent to deal with the asset properly. (Ack... I am not even going to try to cover the details here!) In short, I need to learn me some Flash goodness.

Side note - Grant has been trying to build a rhythmic gymnastic "ribbon" game for the Wii in Flash, using gestures from the WiiMote. I heart geeks.

360flex - 5 minute CRUD with FDS

presented by Kevin Hoyt

FDS = Flex Data Services - a server side product from Adobe
CRUD = create - read - update - delete

Kevin's background is in Sales, but prides himself in knowing the Flex product. Background in C programming, Java, RPG, AS/400 and more... so please don't be afraid and run away.

We've made things look nice... but now we need to actually work with the data. We have to get the data from where it resides (db, XML, whatever), present it to users, and allow users to change the data simultaneously.

SOAP and REST are great... but scalability becomes an issue quickly. How do we write an application to keep everything in check, and make sure it's scalable?

That's what Adobe is trying to do with Flex Data Services (and LiveCycle). In fact, as this technology generalizes it is starting to be known as LiveCycle Data Services. There are adapters for CF, Java, and other backends. Data management and messaging "push" technologies are key.

Going into the code... will hopefully post linkage to demo later! :)

360flex - Monday keynote

Good morning from the 360flex Conference, at the eBay Town Hall in San Jose, CA!

Mark Anders @ Adobe is presenting the keynote this morning.

How many Flash developers? A few. Mark used to work at M$... glad to hear that he is now with Adobe! He is talking about trying to develop web biz apps in Flash. Ouch! Lots of respect for the Flash developers who were/are able to make that work.

Flex was designed for developing biz apps on Flex. It leverages the best of two worlds: HTML and Flash. Flex uses MXML markup language. It's XML based, describes the UI and ties to AS for heavy lifting.

Some code... heavy stuff on Monday morning.

Talking about components and composition. Some good components and apps in the community:
- Taking a peek at the fisheye component from the quietly scheming blog - Ely Greenfield.
- LightTable (which was demo'd at the last COWPU meeting) also being shown off
- Picnic.com is a cool Flex app for photo editing!
- Virtual Ubiquity (login required) - web based word processor. (The dev team for this project is sitting behind me) Image and text alignment. Zoom. Typography. Table editing with sizing handles and guides. List Handling. (Take that, AJAX!!)

Bottom line... Flex is Flash! Cool stuff!!

Talking about AS2 vs AS3, power and speed between the two versions. Using the Ring of Fire applet to demo. (Linkage?) AS2 looks like, well, random orange blobs. AS3 actually looks like a fiery blast on the screen (don't melt the LCD panel). It renders that much faster!!

Mike Downey - Senior Product Manager for Apollo. This is the new cross platform environment for RIA's. Some of the great features coming with Apollo include local file access, offline/online detection and events, drag and drop between the local system and RIA, clipboard access, background processing, multiple window support, custom chrome and more...

An example in development is the "gTimer" calendar for organizing tasks. Sounds simple - but there are some really powerful features for the presentation management and repurposing of code.

Combining AJAX with Flex, another team created "Maptacular". You can import vCards into the app, and drag a "pin" to a Google map. It automatically shows you the pin location from the vCard on the map. That's not all... if you drag a second pin to the map it shows the location and generates driving directions. Very cool!

The next version of Flex (version 3, code named "Moxie") is coming soon, and now we get to hear more! :) One of the main themes is the designer/developer workflow - Enhancing the tie ins with other Adobe products. Working with data and connecting Flex to backends should become even easier. The ability to generate Apollo apps will also be built-in. (Woot!) Debugging and productivity are also of high importance. Mark doesn't get to show us anything today... but we will get to see more later this week. We can expect Flex 3 "Moxie", Apollo 1.0, and Creative Suite 3 ("Philo") all to ship in the second half of 2007. (hmmm... MAX?)

Braindumb

I am currently attending the 360flex conference in San Jose, CA. Most of my posts over the next few days will pertain to the conference and the sessions I am attending. They will be titled "360flex" and the session name.

Most of the info is braindump and notes for personal use - but I am publishing them to the blog in case visitors also find the info useful. Let me know if you have any questions about the conference or the info, and I will try to answer your questions.

Away

The bags are packed...

The downloads are downloaded...

Music and movie for the trip are queued up...

I'm ready!

Really wishing this was my "off to Mexico" post... but not yet. First I am off to the 360Flex conference at eBay in San Jose, CA. I will be getting "Flex-y" with 399 of my closest web geek buddies! This should be a good trip - I am getting more comfortable with the "community" of developers that attend these shows. There should be a lot to learn and plenty of networking opportunities.

As a bonus I am looking forward to having dinner with some old friends from the Gannett days, on Wednesday night.

And... If traveling all goes smoothly and we arrive in time, the Sherpa (as the Troll is now known) and I will catch a show in San Francisco tomorrow night!