Recently got around to checking a couple of items off of my todo list that had been on there way too long. In summary:
Sometimes the simple things take the longest time.
Seven Languages in Seven Weeks by Bruce A. Tate
My rating: 3 of 5 stars
This book offers an exploration of various programming paradigms (object oriented, prototype, constraint-logic, and functional), concurrency models (actors, futures, and transactional memory), and programming constructs (list compression, monads, and matching). None of the topics are covered in great detail but for those curious what Ruby, Io, Prolog, Scala, Erlang, Clojure, and Haskell are all about, this book does a reasonable job of introducing and demonstrating each language. The writing is uneven between the chapters and some concepts (like monads and monitors) could use much better code examples. As the introduction emphasizes, to really get the most put of the book, you will want to work through the exercises at the end of each day, as that is the best way to get a feel for each language. Be warned there aren't answers to these problems, despite what the introduction alludes to.
View all my reviews
Having spent some time using the new ActionScript Code Coverage Plug-in for Flash Builder, I thought I'd compare it to the existing Flexcover tool.
litl Lab by Ryan Canulla and Kathryn Rotondo
Not nearly enough hands on coding, especially since half of the session was devoted to their upcoming set-top box product but for which they didn't have a hardware demo.
Flash based SDK for developing channels. Each channel has three views: card (menu with optional slideshow), focus (mouse, keyboard support), and channel view (passive view, swipe type gestures only).
Real Component Development on the Flex 4 Architecture by Michael Labriola
This was a hands on lab so these notes just capture general concepts discussed.
Think of Flex 4 components as the atoms of the system.
Beyond IoC: Advanced Experiments with Swiz by Ben Clinkinbeard
Swiz is all about custom meta-data parsing as returned from describeType(). Recent changes have exposed that meta-data processing to anyone. General switch from autowire to inject.
Continue reading "Beyond IoC: Advanced Experiments with Swiz (RIA Unleashed: Boston 2010)" »
How to Launch a Small Software Product by Jesse Warden
Why do it?
Continue reading "How to Launch a Small Software Project (RIA Unleashed: Boston 2010)" »
ColdFusion, Solr, and Killer Robots by Raymond Camden
Solr gives us better searching and file and data indexing versus SQL.
Continue reading "ColdFusion, Solr, and Killer Robots (RIA Unleashed: Boston 2010)" »
Adding 3D to Your Arsenal by Charlie Schulze
Can find a bunch of information on his blog at papervision2.com. Working on redoing site with Away3D examples as almost everything is Papervision3D focused at this point.
Talk is more about how to add 3D to your application than how to do 3D modeling.
Continue reading "Adding 3D to Your Arsenal (RIA Unleashed: Boston 2010)" »
Keynote by Ryan Stewart and Terry Ryan
Flash has seen a rise in competition: Silverlight, Java FX, JS/HTML
Flash adoption is getting faster. To get penetration from 0 - 80%
As part of my work on the Zeo Data Explorer I found myself in need of a generic CSV parser that could handle quoted text, escaped commas, etc. While I found a few solutions none solved the problem completely or correctly. To that end I wrote a pure AS3 implementation of RFC 4180 (Common Format and MIME Type for Comma-Separated Values (CSV) Files) specification.
It does require Flash Player 10 as I really dig Vectors. I haven't done optimization of it as the speed was good enough for my purposes. For the time being this code is bundled into the Zeo Data Explorer project, but the files can be easily found in the parser package. If you have any suggestions or bugs leave a comment below.
I'm pleased to announce the first release of Zeo Data Explorer. For anyone that uses a Zeo to track their sleep, I've been playing with different ways to visual my sleep data, which some of you may have heard me talk about at BarCamp Boston 5. To that end I put together a generic library for parsing the CSV file you can export from the myZeo site. Along with the generic parsing library I've started exploring different ways to visual my sleep, beyond what you can do on myZeo, in an application called the Zeo Data Display. All of the source code is available on bitbucket at Zeo Data Explorer. This includes a pure AS3 library for parsing the data and a sample Flex application for visualizing it. For those that don't have a Zeo I've included a sample of my own data to get an idea of what it tracks. As time permits I hope to add additional visualizations to the tool now that the overall framework is in place. Enjoy and let me know what you think.
I recently came across a need to use a user supplied input in a regular expression. To prevent any special characters in the user's string from being treated as a regular expression control character I stumbled upon this solution. Alas I can't remember where I found it but wanted to share.
/** * Convert a random string into a format that will make sure it doesn't * impact a regular expression when inserted into it. * @param string String to sanitize. * @return Sanitized string */ public function sanitizeForRegExp(string:String):String { if (string == null) { return null; } return string.replace(new RegExp("([{}\(\)\^$&.\*\?\/\+\|\[\\\\]|\]|\-)","g"), "\\$1"); }
Being Geek by Michael Lopp
My rating: 5 of 5 stars
This book contains many astute observations about the life of a software developer combined with practical advice about how to approach your career. The book touches on aspects like interviewing for a job, office politics, transitioning to new responsibilities like becoming a manager, how to manage your time, dealing with crises, and thinking about when it's time to find a new job. I found the book did a great job of helping me think about the three questions it lays out at the beginning: What am I doing?, What do I do?, and What matters to me?.
View all my reviews
A former co-worker of mine just announced an awesome new Facebook game that they built with Flex, Swiz, and AS3Signals. It's called Urban Warfare, plays like Civilization, and can be found at http://apps.facebook.com/urbanwarfaregame/.
I've recently run across the need to have a optional int field. That is a property on a class that is of type int but can be left unset (or null). AS3 doesn't provide the Java equivalent of the Integer class so I was curious what my options are. Below are four options that I played with. If you know of others leave a comment.
This isn't the technical book I'm reading as part of my 20x2x20 experiment, instead it was one kicking around the office. By far the best introduction to HTML5 I've come across yet.
HTML5 For Web Designers by Jeremy Keith
My rating: 5 of 5 stars
Great introduction to what HTML5 is and how to start using it today. Having heard the term HTML5 tossed around a lot over the past year this book finally presented it in a concise and useful format. This isn't a technical deep dive but instead clearly outlines what HTML5 adds and provides plenty of links to find out more. Definitely spend the hour a quick read through requires.
View all my reviews
After getting the latest update to Firefox (3.6.4) yesterday, when I was debugging some Flash code this morning, my debugging session got disconnected in the middle of looking at some variables. Returning to Firefox I was greeted with the following:
In the middle of helping a co-worker debug a unit test, we had a test method that ran fine by itself but failed when run with the rest of the tests in the same class. Looking over the code there was no obvious reasons why when both test methods were run the second one failed.
Turned out to be a duh moment. At the top of the unit test there were a bunch of XML fragments declared with private static const. Problem was one of the two test methods was modifying the children of the XML. XML is a complex Object, unlike an int or a String, so the constant keyword doesn't prevent changes to the structure within the XML, it just prevents the reference from changing. A couple of simple fixes:
With the release of Flash CS5 we have an issue that some files we distribute to customers need to be saved as Flash CS4 compatible. I'm looking for a cross-platform utility that I can easily call from Ant that will report the Flash version that an FLA file was saved as. The goal being to add a source control hook that prevents an FLA in the wrong version from being checked in. Anyone know of such a tool?
Had a blast at BarCamp Boston 5. Learned about some new technologies and topics that I'd love to play with and learn more about. Some of my favorites Cooking for Geeks, OpenFrameworks, Wolfram Alpha, and Introduction to jQuery.
I threw some slides together and gave a talk about Agile Programming Methods since there looked to be a bunch of interest. Kind of hard to compress everything cool about agile into 25 minutes, but hopefully I got a couple of points across.
What I was more excited to talk about was my continued sleep tracking with Zeo. I'm not quite ready to release a version of the software (still in prototype phase) but I've got an updated set of slides and screenshots. Thanks to those that attended and gave great suggestions on data that I could pull in and plot against.
Got an idea for an Adobe product in the Flash Platform that isn't quite a bug? View and rate ideas at: http://ideas.adobe.com/.
Tonight I spoke at the Boston Flex User Group about AIR 2.0 with a focus on the new Native Process API and Networking APIs. Alas the talk didn't go as planned since I forgot my bag of video output adapters at home and didn't notice until I was setting up. The meeting was only a few blocks away from the Allurent offices so I ran (more like a sprint) back to find suitable replacements. Alas in my rush to borrow an adapter (only being able to find a mini display port to HDMI) I ran afoul of the old Mac VGA/HDMI mechanical virus issue. However, it wasn't until after sprinting back to the meeting and futzing with projectors for 15 minutes that I realized this issue. Thankfully a fellow attendee loaned me his computer and using the USB drive I did have on me, I managed to gave a modified version of the talk sans running demo code. I'd like to thank those in attendance for their patience, apologize for my forgetfulness, and hope that at least a little information was conveyed. A copy of the presentation is available in PDF format. The most import code snippets are below:
For most of this year I've been collecting frequent data snapshots of the Atheists, Agnostics, Skeptics, Freethinkers, Secular Humanists and the Non-Religious Kiva Team. I've been a member of Kiva for some time and thought it would be neat to track the success of the group leading up to our one million dollar goal. A few months ago I started playing with the Flex Charting Components to see what I could do with the data I'd been collecting. I don't have the graphical touch (as anyone who has looked at this website can attest to) but working with the charting components made it easy to throw together some basic visualizations of the data.
The code for the application is ugly, so unlike most of my other sample applications, I didn't view source enable it. Given the plethora of other sites talking about the same material this isn't a loss, trust me :) One thing that I'd like to experiment with is other ways to visual the data. Any recommendations are welcome.
Shannon Hicks
Misconceptions
* You are not just using a Mac
* You are not immune
Finder
* Verbose boot using CMD-V
* Use the Go menu (Go to Folder)
* Keyboard Shortcuts (Screenshots)
* Show Hidden files
* Hidden preferences: secrets.blacktree.com
* Spotlight
* Quick View (space to preview)
Terminal
* Can be faster than the finder
* The Tab key is your friend
* Use nano for editing instead of vi
* Copy and paste work in the terminal
* Reference: ss64.com/osx/
Ports
* Most applications for Linux also exist on the Mac
* MacPorts www.macports.org (Requires Dev Tools developer.apple.com)
GUI Tools
* Console
* File Merge
* iCal/iChat
Backups
* Time machine is handy
* Off-site backups are critical (JungleDisk)
Passwords
* 1Password
Virtualization Software
* VMWare Fusion
* Parallels Desktop
* Sun VirtualBox (Free!)
Source Code Control
* Versions (best out there, but still bad)
* Cornerstone (okay, but still bad)
* Everyone misses TortoiseSVN
Services
* MAMP Pro
* xampp or MAMP are free alternatives
* Navicat as MySQL GUI
Editors
* TextMate
Demos
* Camtasia
* Jing (free/cheap alternative)
Chris Scott
What is Swiz:
* Simple IoC for Flex / AS Development
* MVC Architecture
* Simple tools for common tasks: remote methods, event handling, modules
What Swiz is not:
* Excessive JEE patterns
* Boilerplate code
* Verbose XML configuration
* Overly prescriptive
Swiz uses dependency injection to satisfy component requirements.
Common dependencies:
* Remote services
* Data
* Logic
* Views
Other approaches:
* Wire ourselves
* Use Service Locators
* Verbose XML configuration
Swiz application:
* Define application it needs to use: remote objects, controllers, presentation models
* SwizConfig component in top level application
* [Autowire] metadata for dependency injection, two flavors (type reflection) or by bean name
* [Mediate(event="", properties="")]
* Swiz class called AbstractBaseController: executeServiceCall(async token, result, fault, arguments)
* Immediate run-time checking of event names
* Swiz:Prototype using class reference or name
* Module specific scope for Swiz config
Ryan Stewart (Using Mike Chambers' Slides)
What did Adobe announce:
Adobe Flash CS5 can create native stand-alone iPhone Applications
Flash Player 10.1 that is smartphone enabled (see keynote)
Did not announce Flash Player for Safari Mobile on iPhone.
Flash based iPhone applications exist today
LLVM (Low Level Virtual Machine) previous used in Alchemy
* Open source compiler with optimizations for any input language
* Capable of generating machine code for various targets
Front-end (SWF/ABC) -> LLVM -> Back-end (ARM)
Just like building an .air but with the descriptor capturing additional iPhone .app properties.
Flash Pro CS5 -> SWF, app.xml, app:/resources & Apple Certificates -> ADT -> .ipa
ADT does ahead of time (AoT) complication. Can't do JIT so you need to bundle code in, compiles ABC byte code from SWF and then pass through LLVM
Can use Flash Player 10.1 and Adobe AIR 2.0 APIs to get access to:
* MultiTouch
* Screen Orientation
* Media Library
* Accelerometer
* Geo-Location
* Cut, Copy, Paste
* Native rtextinput
* tel:, mailto: maps:, video:
* AMF, Flash remoting, RTMP
Can't do these
* Keyboard events outside of textfields
* Rollover or Hover
* ActionScript 1 or 2
* Loading SWF with ActionScript
* LocalConnection
* PixelBender
* H.264 and Speex codecs
* Microphone / Video Camera access
Still need to go through Apple certificate process, public key request, key signing request, application provisioning, etc.
Demo of Flash CS5 iPhone development process.
This allows you to build iPhone applications on Windows.
Current application use software rendering, latest releases are using GPU which will be part of the first public release.
Lots of tips and tricks for getting Flash based applications to perform well on an iPhone.
iPhone isn't like a Mac G5, much less power and performance so you need to think about your application development differently.
Device fonts for input fields, Helvetica is default.
Primary input is a finger (less accurate than mouse, larger hit area, no modifier keys, obscures the screen) 44x44 pixel recommended hit area size.
Text Input is the only component that launches virtual keyboard (get undo, magnifying glass, cut/copy/paste all work)
Resources
* bit.ly/arnoiphone
* bit.ly/mobilehig
Code Optimizations
* Improve performance and memory on desktop
* Some are AOT specific
* Test and profile in Flash Builder
* Grant Skinner Testing harness bit.ly/as3performance
* Reuse Instances
* Cleanup unused event listeners (especially ENTER_FRAME and Timers)
* Event dispatching can get expensive (use callbacks instead)
* Disable unused mouse events (don't use mouse_move use interval checks instead) or use mouse_down/mouse_up instead
Lots more information at www.mikechambers.com
Kevin Hoyt
Flash Collaboration Services: Collaboration in the cloud
afcs.acrobat.com for an account
SDK includes samples and an AIR application with lots of goodies in it: room console, local server (for easier testing/data only).
API
* Session and authentication (0 = nothing, 100 = owner, # = application assigned)
* Shared model components
* Shared managers
* Collaboration components (whiteboard, chat, are built in)
Room Concepts
* Users and roles
* Audio/video streams (including peer-to-peer via RTMP)
* Content from collections and nodes
Authenticator
ConnectionSession (Synchronization change events used for both connected and disconnected)
ConnectSessionContainer (show hides children based on connectedness)
SharedObject (RTC specific, different than standard Flex one) Used to share data into the cloud
Build in WebCamera wrapper that broadcasts video feed.
GPS Tracker Demo using Flex for web, AIR for data acquisition, and CS4 mobile application all talking to same room.
Golden rule: Do not take action until data arrives (including echo back)
Website Watcher Demo
Technology being used for education (RosettaStone), customer service call center, anywhere where you need real-time capabilities.
Audio echo is a big issue.
Jesse Warden
Custom components are important
* Flex based application instead of just Flash
* Designers don't know flex
* Memory constrained
* Isolated and encapsulated for code reuse and testing
Types of components
* Visual
* Non-visual (data/service manipulations)
* Either Facades or Proxies
Base class versus component
* Shape (best for drawing), Bitmap (rastering), Sprite (Flex), MovieClip (Sprite with Animation)
* De-coupling through composition
Component Libraries (Take care of low level Flash player stuff for you, when to draw, event handling, etc.)
* Flash CS3 (Build quickly, small file size)
* Minimal (Keith Paters, up and running quickly, RAD)
* Flex (Enterprise quality stuff)
Custom Components
* UIComponent
* Model, View, and Controller
* Invalidation
* Embedded Content
* Styles
Place custom components in a library project so that you can see them in design view.
For complex processing use green threads.
Testing
* fluint
* FlexUnit4
* visual test harnesses (Application that just shows the component you care about)
Monkey Patching
* When the framework doesn't do what you need (like making a private variable public)
* Makes it hard to follow Flex SDK updates (copy and edit the file along with version file)
Conclusions
* Components are building blocks of Flex apps
* Extend UIComponent
* static children in createChildren()
* draw stuff in updateDisplayList()
* data setter sets internal value, and flags to redraw and call invalidate methods
Jeff Tapper
What is bad code
* Doesn't meet needs of the project: efficiency, maintainability, time to develop
* Code which doesn't make sense
Why do we write bad code
* Lack of time
* Lack of knowledge
* Lack of caring
What bad code leads to
* Delays
* Project failure
* Job loss
* Death
Bad code samples
If you are doing something wrong note it, add comments about why so you know you need to fix it later
Bad Code Sample 1
<mx:VBox styleName="doubleLine"/> .doubleLine { background-image: Embed("/assets/images/doubleLine.png"); }
* Bad use of container (don't use if it won't have children)
* Better to replace with mx:Image
Bad Code Sample 2
<mx:List itemRenderer="see below" selectable="false"> <!-- item renderer --> <mx:VBox> <mx:Image/> <mx:Label/> </mx:VBox>
* Use of list when you don't need it's features: virtualization, selectability
* Better to replace with mx:Repeater
Bad Code Sample 3
public function setDate(u:String, p:String):void { username.text = u; password.text = p; } <mx:TextInput id="username"/> <mx:TextInput id="password"/>
* Properties set on controls instead of a model (race conditions, control names, additional fields)
* Modify the model let the view follow using Bindings
Bad Code Sample 4
<mx:Form currentState="{ModelLocator.getInstance().loginState}"/> new CarignromEvent("changeState");
* View events handled in top level component
* Local property changing local state is best unless other people need to know about it
Bad Code Sample 5
<mx:VBox borderStyle="solid" backgroundColor="" otherCSSStyles> <mx:Text/> </mx:VBox>
* Inappropriate container nesting (mostly for styling, not child layout, i.e. container with only one child)
* Exception is mx:ViewStack and mx:TabNavigator require children be containers
* Better to use mx:TextArea as that supports background and border styles
Bad Code Sample 6
<comp:Comp1 id="menuChooser"/> <comp:Comp2 menuForDisplay="{menuChoose.menuGroup.selection.label}"/>
* Bad coupling (two dots and you are out)
* Better to dispatch event that others can listen for
Bad Code Sample 7
<mx:Button enabled="foo && (bar != '' || bar == '') // etc."/>
* Being too clever (hard to maintain and debug)
* Move the logic into a function
Ryan Steward
Three trends being focused on right now:
Rich Internet Application which Adobe have been doing for a long time.
Cloud Computing is coming to the forefront. Have your data available anywhere. SoA is becoming the norm. Clean separation between front-end and back-end.
Desktop and Devices making the experience available everywhere.
All rolled into contextual applications. Applications where and how your users want them.
finetune.com example of contextual applications. Explore with the traditional browser, then use desktop specific application, iPhone version, and Wii specific version.
Take advantage of device specific features.
Move data and state between contexts.
New runtime support:
Flash Player 10.1 geared for smart phones. Approximate 60% memory reduction with no code changes. Better battery performance.
AIR 2.0 extending ability to leverage native code. Native installer and application support.
Code an application in Flash CS5 and run it natively on iPhone.
New tooling support:
Flash Catalyst is all about designer having more control over UI without touching Flex.
Flex 4 is all about separating logic and look. Components based on states and skinParts.
Demo of Flash Catalyst.
Adam Lehman
New IDE for ColdFusion development called ColdFusion Builder also Eclipse based. CFML support for: code assist, insight, debugging, and ORM insight. Also have code assist for: HTML, DOM, CSS, JavaScript, AJAX (jQuery, ExtJS, etc.), and SQL. Code snippets, log viewer, AIR 2.0 Support. IDE can be extended through CFML extensions. CFScript allows tag-less components. Additional ORM support for CFCs based on Hibernate with CFML languages but still have access to low level settings. Expanded access to ColdFusion services for PDF, charting, document services, etc. all exposed through a SOAP & AMF interface with granular security control.
New CF SWC that will give AS3 / MXML libraries for accessing these functions like:
ColdFusion 9 has many PDF enhancements. Headers, footers, optimize, extract text and images, and converting Word to PDF. Has support for working with spreadsheets.
Demo of ColdFusion.
Ryan Steward
New Flash Builder adds data centric design features, better refactoring, performance optimizations, network monitor, and many others.
Demo of Flash Builder.
For people at the conference you have access to AIR 2.0 bits.
Continue reading "Tell Your Story, Ask a Sincere Question, Interpret Generously" »
I just wanted to recommend to anyone who will be in the Boston area on November 13, 2009 that you should head to RIA Unleashed. Formerly called Flex Camp Boston this is one the lowest cost highest content conferences I've attended. Tickets for this year are going for $60 or less depending on how early you register. Not being above a little self promotion, when you register let them know I (Daniel Rinehart) sent you :) For those that weren't able to attend the last couple of years, a list of talks is below.
Unlike my previous experiments with Pixel Bender, today I set out to implement a basic image manipulation routine, image rotation. While Flash natively provides the ability to rotate a DisplayObject that doesn't help if you want to combine multiple Pixel Bender filters that should use the rotated image as the source image. Turns out rotating an image in Pixel Bender was a little harder than I thought, but I ended up with a nice solution.
I've seen some links recently to the Round up of ActionScript 3.0 and Flex optimization techniques and practices and I'm afraid. I'm afraid that entries on that list are going to become gospel and code that doesn't use the tricks listed will be labeled bad. Knuth said it best, "We should forget about small efficiencies say about 97% of the time: premature optimization is the root of all evil." While the author frames the discussion correctly stating "You have to learn when to use some techniques and when to leave some out." I don't think he does enough to call out the type of optimization each entry is, or more importantly, how these techniques were derived.
Continue reading "Be wary of micro-benchmarks baring speed improvements" »
HP has released a tool called SWF Scan for decompiling and looking at SWFs for security issues. Available from http://www.hp.com/go/swfscan.
Joe Berkovitz is speaking about Building Muscular Graphical Editors in Flex.
Focus on how people build and edit visual documents. Amazed at the problems that come up building visual editors like that.
Continue reading "Building Muscular Graphical Editors in Flex (BFUG March 2009)" »
I'll been a little quite on the blogging front as of late, besides the occasional user group post. The main reason for that has been the last couple of months I've been heads down doing server side Java development for a cloud computing infrastructure using Amazon's Web Services for S3, EC2, SimpleDB, and CloudFront. All that is the back end for some amazing Flex based applications that Allurent has in the works.
Eric Hilfer from Tom Synder Productions is speaking about Flex Automation Framework and automated testing.
Continue reading "Flex Automation Framework (BFUG Jan 2009)" »
An Introduction to AIR Development, Security, and Deployment
J. Philip Camp, IBM Interactive - Boston
Moving from Flex to AIR isn't that big of a deal. AIR is as easy as Flex. Coding is the same, just the top level application changes, additional styling options for the chrome.
Use external style sheet to help style the application (could be done by the designer and just included by the developer with an mx:style tag).
How to get rid of the Native OS look and field. Set application chrome to none. All pieces of the Flex chrome are standard Flex components. Those can also be styled using CSS.
Using code behind can further reduce the coupling between the MXML and the ActionScript code. Programmatic setting of UI component properties.
Now we want to add data persistence. With code behind we can add in persistence as needed instead of always using HTTPService to request the data on demand. SQLiteAdmin is simple tool to look at a SQLite DB.
Security:
All apps use the same engine, one app can read another application. Possible to use encrypted database.
Deployment:
Need certificate to sign it (available from most certificate provides) can create temporary certificate. Bundle with AIR Badge to create a nice installer that can be run from the web.
Building Mashups with Flex and AIR
Oscar Cortes, BrightCove
What is a mashup? Borrowed from music. Could be a dish (with potatoes). Web application that defines data from different sources. Not only about pulling together APIs, the sum should be better than the parts. Like the love song from Moulin Rouge, it combines many to make a more interesting whole.
Mashup sources: database, web services, media, xml, are some of the key ones.
Protocols: REST (64%), Soap (22%), JavaScript (7%), XML-RPC (3%), Atom (2%).
Who: Used to be only flickr, now also enterprises like Google, salesforce.com, and Yahoo. But developers are key player.
Flex maps strongly to APIs and models these services supply. Advantage of web services are that other people are providing data and maintaing it. The barrier to entry is low so you can experiment quickly. Build your own portfolio and try out new stuff.
Typical REST call: URL, API Key, API version, method to call, parameters, maybe digest or checksum. Can also use Web Libraries, JavaScript, and SWC libraries.
Typical result: XML or JSON, CVS or Text, Docs or PDFs, media (growing trend).
Can use native flex classes for REST (HttpService) and Web Services (WebService).
Demo using NYTimes community API (comments by URL). http://developer.nytimes.com/, Ribbit API http://developer.ribbit.com/, Google Maps (http://code.google.com/apis/maps), Google translator (http://code.google.com/apis/ajax/language/), Proxy (simple JSP Proxy)
Translates comment to Spanish. Visualizes locations of where people making the comments are from.
Tools and Techniques: Cairngorm (organized codes and ideas), AS3CoreLib (JSON parsing), E4X (XML parsing).
Durango: Mashup creator available from Adobe Labs.
Merapi
Andrew Powell, Universal Mind
Only a couple people have used it.
Grew out of old Apollo project. Named after volcano on Java. What AIR to talk to Java.
AIR does what it does well, but we want it to do more. How do you extend AIR? Have it talk to GPS. Make mashups that just aren't components but also bring hardware into the mix. Anything that has Java library or JNI will work. Main component is called a Bridge because it is all about moving data back and forth between AIR and Java.
Need to create a connection, could be local or remote. AIR/Flex runs on OS. Bridge runs on OS. Hardware and applications also running on OS. AIR and Bridge are connected via AMF using BlazeDS serialization/deserialization techniques. Bridge then talks to applications and hardware.
var message:Message = new Message(); message.data = "Hello World"; message.type= " Reply"; Bridge.instance.sendMessage(message);
BridgeInstance has result event that you can handle.
Bridge API is easy, complexity is all in external APIs Merapi talks to.
It's alpha so security, reliability, installer, etc. are still being worked on.
merapiproject.net (where to get)
infoaccelerator.net (Andrew's site)
All applications have a Java piece and a Flex piece.
Demo of AIR application controlling bluetooth connected robot. Lego Mindstorm.
Demo of Google translator and text to speech.
Demo of Growl for the Mac. This also works from the browser.
Demo showing data grid in Flex exported to Excel. Data updates in Excel when saved update the data grid. Can create and send email message, update contacts, meetings, etc. If you can do it in Java you can do it with Merapi.
If within the browser, can it be an applet or if it is an application. Right now it needs to be a Java application, possibly a service.
Remote Java objects and competing with BlazeDS. Some overlap, but Merapi is more about hardware connections.
It is all Flex based. Next beta will also include Flash support.
Excel formula values are sent back. Word formatting probably comes back over RTF.
Public beta in the next couple of months.
Is it open source? It is open source, value is in derivative work.
How would the browser and desktop piece work? Still TBD.
Only limit is your imagination. Anything Java can do you can send it back and forth.
Data access size and transfer rate limits are not known, probably limited to hardware.
Flex for ColdFusion Developers
Mike Nimer, Digital Primates
What is Flex, presentation is CF application stack. CF connects to everything. Flex Data Services ship with Cold Fusion (BlazeDS RPC and Messaging wrapped with LCDS' Data Management).
How to connect a Flex application: RPC using HTTP, AMF, RTMP (no server required). Flash remoting requires server side piece like CF that translates protocol to CFC. Flex messaging can push message to all clients through an event gateway.
Need: CF 7.0.2 or 8. CFEclipse as an IDE. Flex Builder IDE. CF plug-ins for Flex Buidler (optional but you really want them) many wizards. Can also have separate LCDS but not needed as it is already part of CF.
Hybrid application, HTML and Flash. Full application, takes over entire page. Desktop application, using AIR with CF server.
Break out of page model and switch to event model. Small self contained components. Application around widget decides what to do with events. Properties in events out (rule of thumb for components).
Only writing CFC no need for CFMs. Binding to data grid the call service.method.lastResult. Can also use bindings if needed.
Any data type in CF can be set back. Can use either array, structs, queries or strongly types entities like User, Products, and other CFCs. CFC instance on server and AS class in Flex. Public only properties. Easy if you get it right. CF case insensitive and not typed. AS is case sensitive and typed. CFProperty used for WSDL generation and Documentation generation. Also used to specify contract between CFC and AS (uses case defined in CFC and property type). CFC also specifies alias (optional but really required for Flex). AS object uses RemoteAlias meta-data. Have to mark a cffunction method with access="remote" to be called by Flex.
CF by default runs as a service. Turn that off and run it from the command line. cfdump is a handy tag and you can see the output in the CF console. Can also turn on Flex logging to see the traffic. Very handy for debugging. ServiceCapture is a network tool or Charles. For a Flex debugging on server, primarily look at body property for requests and responses.
With the CF administrator you can turn on very detailed debugging that is returned to the client. Flex supports browser cookies. Need to specify services config when you compile the Flex application. With server config you can control what the client is allowed to do. Flex can only request CFCs under web root. Flex remoting adapter configuration can change how CFCs and methods are found, secure by default but you can open them up, force certain casing type.
Session and client variables are supposed in Flex. Can't persistent CFC to Flex Session.
Tour de Flex (Released at MAX)
How to use Flex 3 & Cairngorm with LiveCycle Data Services 2.6
Brian O'Connor, Universal Mind
Material is on his website. Going to cover what it takes to develop with these technologies today, versus the brave new world that the other Adobe folk presented earlier.
Only a couple of people have used LCDS. About half the audience have used Cairngorm. Really looking to remove a lot code that you have to write.
BlazeDS versus LCDS: Data management only in LCDS and has better Service Adapters.
What is data management: Need paging, collaboration, automated CRUD, offline capabilities. Client has data service that connects to destination on server that uses an adapter.
Fill method gets all data from data source and caches it in middle tier and paged to client. Have the ability to control auto commit of changes to the data. Page fill gets only a subset of data at once. Can configure the fill type to use. How you program your adapter to execute it is a hot topic of performance consideration. refreshFill() can be a performance bottleneck. Is determined by the return value of method calls. For example 4000 clients shouldn't all refresh their data at once.
Data grid and data service cooperate to only request new data when needed (i.e. when user scrolls down).
Dispatch event, front controller, service locator, response populates data or view. Get garbage collected which isn't what you want. One class per data service with a manager. Have Singleton for getting access to the method.
Data Service Transactions handle multiple different access methods. Can start transactions on destinations with either commit or rollback after a bunch of changes. Can hookup with JTA. External updates to database aren't reflected to clients. Better to code in middle tier so that it can participate in refreshing clients.
Can also use data services to persist it to AIR SQLite database. Data service has saveToCache method (which is asynchronous). Don't have autoSaveToCache set to true. With a 4 level deep object hierarchy and 4000 rows it takes about 10 seconds to save. Hard to tell when your data is finished loading (fill is problematic). Have to daisy chain clearCache calls when working with multiple data managers. Client sometimes see managed object proxy instead of strongly typed wrappers. need to add properties.
Data manager handles sending back conflict events. Can determine how it gets resolved.
No built in locking support.
Model Driven Development Using Flex Builder and LCDS "Next"
Christophe Coenraets, Adobe
Only three people in audience are using LCDS, but that is part of the problem. Hard to use, hampering adoption.
Showing demo with data grid editing. Refreshing page shows changes were not lost. Two different clients against same data are synchronized. Showing multiple views of the same data. Two different companies and a search results window. Multiple view synchronization. LCDS is all about data management.
Why aren't people using it: Price shouldn't be the issue, it's all too difficult. Not focusing on server.
Currently: must create destinations (XML), create assemblers (Java), create DAO (Java), VDO (Java, AS), keep everything in sync. Don't have code completion, binding is difficult, no service introspection.
Accessing data is first hurdle. Configure server through Flex Builder wizard. Normal server properties (server name, port, context root). Can now explore data exposed by server. New "Adobe Data Model" wizard as part of project. Select server and tables you want to work with. Right now it produces XML but many have GUI later on. Including associations. Deploying data model generates code. Includes base class and subclass generation so that the base class can be regenerated without disturbing your extensions. We didn't build "demo ware" code can be used for simple to complex applications.
Dropped company list that show up as data grid. Dropping detail table in prompts for needed data based on dropped table from data model. Do have to manually write handler to connect the two data grids.
Why a custom data model? Wanted to do more than just describe data structure also wanted to define behaviors. You may have more than one data model.
Manually editing generated model to include a derived property. I.e. full name which is a combination of first and last name with some formatting. Change to data model synchronizes to other generated code.
Adding constraint to data model. Boolean variable showing valid state was added. Constraint also added to server side data model checking. Need to cast the data object in client code in order to get compile time checking that all properties are valid.
Business logic location? Can specify where a validation rule gets run. Constraint automatically would reject edit.
How it happens on the standards can't talk about how it happens yet. Is standards based, currently using Hiberante but that is subject to change.
Do you care how your data is updated in database? Will have hook before persistence but really shouldn't care about how is is saved.
Now have Flex and Spring integration. With remoting have SpringFactory that determines what method to call buts has lots of configuration today. Not really Spring like (connections are too loosely correlated as part is Sping and part is LCDS). New model is all Spring based with LCDS, easier to maintain.
Changes to schema will require refreshing the client's data model.
Unit Testing Flex Application with Fluint
Mike Nimer, Digital Primates (presented for Jeff Tapper who was unable to make it)
Testing is like source control. You don't know how much you need until you start using it.
Cold Fusion started out without much testing.
Ever bug has to have a unit test that exercises the bug before fixing it. Regression bugs discovered as part of testing are show stoppers.
Testing methods
Manual testing: humans create and run, low cost to start high cost to maintain, testing happens less often
Automated testing: humans create and computers run, higher cost to develop but lower to run, more often
Testing as part of development
Code until the red goes away
Developers create code and write tests, focus on test driven development
Automated build checkout, build, and test running, various tools to do that
Test types
Unit tests: individual method testing
integration tests: combination of test components
Tools for testing
FlexUnit: Original testing framework, based on JUnit
Flunit: Better asynchronous testing, better UI testing support, and sequences
Integartion testing is hard: Visual Flex Unit does bitmap comparison,
Fluint checks sequences and events
Test methods , test cases, test suites, and test runner. Various types of assertions. Comes with runner and has file watcher to pickup modules and run tests on change.
Asynchronous Testing
Events can occur at any time so you need to handle it sometime later. Uses asyncHandler which is a function that you pass as the event listener. Also want to pass data through to handler. Second argument to event handler. Can have asyncHandler as part of setup step.
UIComponent Testing
TestCase is a UIComponent so it can have components added to it as a child. Still need to what events to listen for.
Sequences
String together many sets and event waiting.
Test meta-data flag
Meta-data is copied over and available in the reports. Also produces XML like file in a JUnit like format.
Test filter and sorting
Only run certain tests, headless test runner
Configuring Fluint and test setup: Writing libraries can have another test application. Flex projects can't link so
Migrating from Flex Unit to Fluint? Best to ask on the forumns.
Mocking data? Nothing tied into Flinut, framework can support it.
Code coverage: using Flex Cover.
AIR test runner: looks for directory changes and runs it.
Introducing Flash Catalyst ("Thermo") and Flex Builder Gumbo (Flex 4)
Tim Buntel, Adobe
Overview of the Flash platform.
Design and Develop: Flash CS4 Professional, Flash Catalyst, Flex Builder
Framework: Flex
Clients: AIR, Flash Player and Servers, but not the focus of today's talk
Two different drivers for application, coming at it from the design side versus the data side. Independent of starting point you end up with code.
Focus Areas for the Flash Platform
Design tools focused on: Flash Catalyst, Flash Pro CS4, FXG
Data: Data-Centirc Development
Code: Developer Productivity
Flex Framework: Next-gen components, declarative states and behaviors
Tight integration across teams
"Thermo" introduced at MAX 2007 have been laying the foundation since then, FXG, component model, CS4 FXG support, argue with marketing
Flex 3 had baked in presentation: can only replace individual components, non-boxy designs are hard.
Next-gen components separate presentation from controller: layout almost all controlled by the skin,.
Next-gen: graphics and text as first-class citizens, revised component architecture, declarative states and behaviors
FXG: Graphics format based on MXML, supported in key CS4 applications, just another file format for the CS4 suite, needed a portable notion of states and transitions that could be more declarative.
Flash Catalyst
Why? Harder for one person to do everything design to development. Web applications are getting bigger, "Developer-Designers" are harder to find.
Today: limited roles, designer creates visual design and developers adds interactivity, linear process making it hard to incorporate visual updates, interactivity is hard for designer to add.
Pre-alpha released at Max 2008, public beta early next year
Flex Builder 4
Designer/developer workflow improvements: introduces FXP, launch Flash Professional from Flex Builder
Data centric applications: making visual connectivity easy, end-to-end development with BlazeDS and LiveCycle Data Services, common application templates, code generation for common tasks
Feature improvements: Refactoring, code generation (get/set) debugger, profiler, improved compiler speed, bi-directional text, automated unit testing, network monitor
Demo of Flex Builder 4
Data Centric Application
AMF is now part of the Zend framework, project explorer now has package views instead of folder based,
Data and services tab, new cold fusion IDE called Bolt built on Eclipse, does introspection of the service and builds internal data model, can drag and drop data type into design and generate data grid that can call backend. Can manage a data type and map client side operations like update to the server side calls. New generate event handler from either design view or within code assist. Strongly typed wrapper of data returned can call something like "actorService.comit()", where actor is the manager data type. Network monitor will let you see the traffic between the client and server. Can setup data type to support paging, will call backend as needed. Service also adds support for easy revert of changes.
Flash Catalyst and Flex Builder 4 have pages on labs where you can keep track of the progress of the tools.
Does client side data management work with LCDS? Preview release has some issues that will be fixed by first public.
Network monitor support RTMP? Not yet.
Will real-time protocols be supported? Not implemented at this time, but will expand in the future, no firm timeline. Right now only HTTP and AMF, maybe .NET in the near future.
Flex Builder on Linux? Only a few people raised their hands for using Flex Builder on Linux. Some supporting tools not on Linux yet so the support is lagging. It is a stated goal.
Workflow flow such as Catalyst, Builder, Catalyst. Yes the two projects will work well together. FXP is a way to move between the two with tools to manage it. Difference view for merging FXP projects.
How much data access will be available in Catalyst? Know designer needs data access within Catalyst, sample data available now, trying to figure out the best approach. No live connection but most likely representative data.
I wasted, well maybe wasted is too strong of a word. I used way more time than I should have on Sunday playing with Pixel Bender trying to figure out how to make it sort values. In my trend to make Pixel Bender do stuff besides manipulate pixels I thought a fun mental exercise would be to implement a parallel sort. Now I've not come up with any good use for this yet, considered if this is the best performing parallel sort, yadda, yadda, but it works, which is what I really wanted to get out of this experiment.
Continue reading "Sorting out Pixels or How I Didn't Plan to Spend My Sunday" »
Architecting a Shared Codebase from Browser and Desktop
By David Coletta
Maybe more hacking than Architecting. First time giving the talk so all feedback is welcome.
Goal: Build a browser application and an AIR application from a single shared codebase.
Continue reading "Architecting a Shared Codebase from Browser and Desktop" »
Using Flex & Cairngorm with LCDS Data Management from Brian O'Connor, Principal Architect at Universal Mind.
Will focus on Flex 3.0 &LCDS 2.6 and post the slides and sample code on his blog.
Previously with Macromedia consulting and Adobe consulting. Some of the audience have used Cairngorm and a few have used LCDS.
Really looking at Data Management as the focus since it has a lot of power. Lots of problems with how best to model data management and data services this type of application.
Continue reading "Using Flex & Cairngorm with LCDS Data Management" »
Antennae 1.2.2 has been released. This is a very minor update that just changed the bundled version of FlexUnit. I'm now bundling the version from the Adobe Open Source Site. I've also created a discussion group for Antennae available at http://groups.google.com/group/antennae-discussion.
GameOfLifeServer
I've been following the progression of the tool AppFuse for some time now but haven't had a chance to use it. This seems like a prime time (cue learning curve for first new technology). While there are many Java frameworks I could use, I've found the Spring Framework to be rock solid and know that it covers everything I could want to do with this simple application. Spring has also created Spring Web MVC to support the front-end pieces. I think it offers a cleaner solution than Struts. AppFuse supports Spring Web MVC based projects so that should make this straight forward.
The most tedious part of any project I find is getting the skeleton setup. Thankfully Flex Builder's project wizards make this easier. I'll be creating two Flex projects, one called GameOfLife, which will hold the UI application, and one called GameOfLifeTest, which will hold the testing code. Additionally I'll create a Java project called GameOfLifeServer which will hold the back-end code. Both the production and test code will reside in the same Java project since you can easily mix them in Eclipse's Java mode, unlike with Flex. These will all be sibling projects in a top level directory.
I've been toying with the idea of building a site around the game of life simulator. In the spirit of just playing, I figured I'd blog about my process and thinking to see where it goes while keeping a record of it. With that broad mandate some rough idea of what I could see happening along the way.
As I've been toying with some new application ideas I've been curious what the current state of Amazon Web Service (AWS) support for ActionScript 3, Flex, or AIR is. Most of the sample code I've found so far is for Ruby, PHP, or Java, basically languages that have a rich server side presence. The lack of AS3 libraries makes some sense given security issues with running code on the client and its need to access your AWS secret key to create valid requests. However, management applications or user based services (i.e. the user must sign up for an AWS account) that could hold the keys for a session or store securely for AIR applications would benefit from such an interface. Below are the libraries that I've been able to find so far, if there are additional resources out there I'd love to hear about them.
Given the lack of cross domain files for certain AWS services, the lack of ActionScript only APIs kind of makes sense.
Continue reading "Amazon Web Services (AWS) for ActionScript 3, Flex, or AIR" »
When I started reading about Pixel Bender and realized at its core it was a cellular automaton engine I immediately thought of Conway's Game of Life. I started looking into how to use Pixel Bender to render generations in the game of life.
Marc Hughes spoke at the Boston Flex User Group on Making Applications With Degrafa and ObjectHandles.
All of the talk materials are available on his blog.
Continue reading "Making Applications With Degrafa and ObjectHandles" »
Part of the new FlexUnit release is a new TestCase subclass called EventfulTestCase. It provides convenience methods for testing objects that emit events. This new class can streamline your testing code and help catch unexpected events. Below is some sample code that demonstrates this new framework.
Continue reading "New Event Testing Framework in FlexUnit" »
On Monday Allurent will be in a new larger office. We are moving to 222 Third Street,
Cambridge, MA 02142, which is in the American Twine Building. Our phone number is changing to 617-374-8800.
[Update: I've posted some pictures of our new digs.]
A different office decor is being designed, so there was a raffle for those interested to pick up any of the old Allurent office decorations. Since most of our initial clients were apparel focused, we had mannequins in the office to give it a retail theme. I won the female mannequin and after an adventurous ride bringing it home on my bicycle (pictures coming soon) I'm trying to figure out what to do with it. It's a reclined model mannequin which makes it a little harder so all suggestions are welcome. A picture of the mannequin is below.
Continue reading "Allurent is moving and mannequin suggestions" »
The newest version of FlexUnit released on Adobe's Open Source site includes a spiffy new UI. It's much easier to see what test failed, where, and why. It also includes a feature to help identify tests that don't make any assertions! Below are a couple of screen shots showing the new UI in action.
Adobe has decided to move FlexUnit to their Open Source site. You can now download and find FlexUnit at http://opensource.adobe.com/wiki/display/flexunit/Flexunit. As part of this move, they have also released a new version. The change history is a little sparse so if I find anything of note I'll write up a post.
There is some subtle behavior in FlexUnit's addAsync() that can lead to false positives and false negatives. In each case code that one expects to be called fails to run, which means that your tests may not be covering everything that you hoped they would. To kick off this discussion I'll present some code that should fail, but doesn't.
Continue reading "Odd addAsync() behavior when handling asynchronous events" »
At the start of this month I attended the Boston Flex User Group Meeting where TR Coffey, Design Lead at Allurent (where I also work) gave a talk about Advanced CSS Techniques and Programmatic Skinning. Below are some rough notes I took during his talk.
Continue reading "Advanced CSS Techniques and Programmatic Skinning" »
I spent way too long yesterday debugging a stupid typo all the while thinking maybe I'd stumbled across a compiler bug. The code in question:
for (var name:String in _data); { trace(name, _data[name]); }
In the debugger I could clearly see that my _data object had multiple dynamic properties but I only ever saw one value printed out. In retrospect it was code blindness that comes from working with too many languages that use semicolons at the end of lines. While semicolons are optional in ActionScript, I always put them on, so my eyes just kept skimming over the fact that at the end of the for loop I had a stray one kicking around. Removing it magically made everything work again.
Antennae version 1.2.1 has been released. Grab it from http://code.google.com/p/antennae/. Highlights of this release include:
For anyone not familiar with Antennae here is a brief description:
Antennae is an open-source project designed to automate the building and testing of Flex applications. It uses Ant and Java to provide cross platform utilities to compile Flex libraries, Flex applications, generate FlexUnit TestSuites, and run FlexUnit tests in an automated manner. Antennae also defines a framework for building complex projects with multiple dependencies and intelligently handling recompilation.
This past Tuesday the Boston Flex User Group held its second meeting. David Coletta from Adobe's Buzzword team spoke about Automated Testing Framework. This was a deeper dive into the topic he presented at Flex Camp Boston 2007. I counted about 50 people at the meeting. It was a very interactive session with a bunch of good questions coming from the audience. Below are my rough notes from the presentation.
Continue reading "Adobe's David Coletta on Buzzword's Automated Testing Framework" »
Some of the first hints about Flex 4 have been posted to the Adobe Open Source site. Great to see the future development of the Flex platform starting off this open.
At last night's BFUG meeting Peter Farland demonstrated an undocumented class called BindingManager that is handy for debugging bindings in Flex. This class exists in both Flex 2 and Flex 3. Below is a quick example of how it is used:
Adobe has dropped the first public bits in their effort to port Adobe AIR to the Linux platform. You can download them from Adobe Labs. Keep in mind this is an alpha release and everything definitely isn't there, yet.
An article I wrote for the Adobe Developer Connection entitled "User experience considerations with SQLite operations" has been published. Its focus is on issues Allurent uncovered while working with a SQLite database on the Allurent Desktop Connection application for Anthropologie that was demoed at Adobe MAX 2007 in Chicago.
Antennae version 1.2.0 has been released. Grab it from http://code.google.com/p/antennae/. Highlights of this release include:
For anyone not familiar with Antennae here is a brief description:
Antennae is an open-source project designed to automate the building and testing of Flex applications. It uses Ant and Java to provide cross platform utilities to compile Flex libraries, Flex applications, generate FlexUnit TestSuites, and run FlexUnit tests in an automated manner. Antennae also defines a framework for building complex projects with multiple dependencies and intelligently handling recompilation.
Wow, it's amazing to think about all of the wonderful work that Adobe put into getting Flex 3 and AIR 1 out the door. My congratulations to everyone involved. Lastly the source for the Flex compilers is open source, I've already thought of some things I want to try with that. Download, play, enjoy.
As a side note, I've updated my simple Window Explorer application to run on the released version of AIR.
While looking something else up in the AS3 documentation this long weekend, I ran across this comment:
Typically, you throw instances of the Error class or its subclasses (see the Example section).
Emphasis added by me. If one typically does something, that means you can also not do it :) The throw statement takes an expression as its argument. The convention is to have it be a subclass of Error. This post isn't about that. In fact this post is a mental exercise as I don't recommend breaking from that convention, but I'm sure it might get someone's creative juices flowing, as I've not thought of a compelling use case, yet.
The short version is what AS3 operator triggers a call to the isAttribute() method of a Proxy? The answer, none. isAttribute() is a utility function provided by Proxy that can be called to determine if the name passed to a function was specified as an attribute. A couple of Proxy's methods can't be called in an attribute context, as noted below. I've created a sample Proxy class called MyProxy to help show what's going on:
package com.neophi.test { import flash.utils.Proxy; import flash.utils.flash_proxy; public dynamic class MyProxy extends Proxy { override flash_proxy function callProperty(name:*, ... rest):* { trace("callProperty", name, rest); flash_proxy::isAttribute(name); return null; } override flash_proxy function deleteProperty(name:*):Boolean { trace("deleteProperty", name); flash_proxy::isAttribute(name); return false; } override flash_proxy function getDescendants(name:*):* { trace("getDescendants", name); flash_proxy::isAttribute(name); return null; } override flash_proxy function getProperty(name:*):* { trace("getProperty", name); flash_proxy::isAttribute(name); return null; } override flash_proxy function hasProperty(name:*):Boolean { trace("hasProperty", name); flash_proxy::isAttribute(name); return false; } // Don't override isAttribute(), it is a utility function // used by methods that specify a name:* parameter // to determine if the name argument was specified as an // attribute. It doesn't look like there is any other // way to determine if a name was specified as an // attribute besides calling Proxy's isAttribute() // implementation. override flash_proxy function isAttribute(name:*):Boolean { var result:Boolean = super.flash_proxy::isAttribute(name); trace("isAttribute", name, result); return result; } override flash_proxy function nextName(index:int):String { trace("nextName", index); return null; } override flash_proxy function nextNameIndex(index:int):int { trace("nextNameIndex", index); return (1 - index); } override flash_proxy function nextValue(index:int):* { trace("nextValue", index); return null; } override flash_proxy function setProperty(name:*, value:*):void { trace("setProperty", name, value); flash_proxy::isAttribute(name); } } }
When an mx:Label is created, truncateToFit is true, and a percentage is specified for its width the label will show all of its content even if placed inside a fixed width container. The following example shows this scenario:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:HBox width="100" horizontalScrollPolicy="off"> <mx:Label text="This is a really long label" width="100%" truncateToFit="true"/> <mx:Button label="X"/> </mx:HBox> </mx:Application>
The result is 
which is not what I had hoped would happen.
Continue reading "Truncating labels that use a percentage width" »
I've added some more advanced FlexUnit cookbook recipes that cover testing visual components and automated TestSuite generation. These can be found at Testing Visual Components with FlexUnit and Automated TestSuite Generation respectively.
I'm happy to relay the announcement of the first public release of a new visual testing framework built on FlexUnit and AIR known as Visual FlexUnit. Some of you may have heard me make reference to this framework at my recent talks on Continuous Integration with Flex, FlexUnit, and Ant. Douglas McCarroll a recent inter at Allurent (the company I work for) developed the release. Here is what he had to say:
Visual FlexUnit (VFU) is a FlexUnit extension that allows you to do automated testing of components’ visual appearance using “visual assertions”. In a nutshell, a visual assertion asserts that a component’s appearance is identical to a stored baseline image file. These visual tests can be run in either a GUI or an Ant-based build process.
Another great tool to help with automating your testing.
I've been thinking about the startup experience a user sees when launching applications. In particular I've been using a bunch of AJAX and Flex based RIAs recently. This observation is still gestating so I've not compiled a well defined list. It's one of those thoughts that I'm pretty sure is there and I'm just looking for additional evidence.
When browsing the web many HTML pages haphazardly form into the final view. Some of this is due to the order that the images, CSS, and other content pieces are loaded by the browser and some of it is the rendering speed of the browser, which has mostly become a non-issue. This experience is something that I think has fallen into the background consciousness of most people browsing the web. The thinking has become, that's just how HTML sites and web browsing work. Contrast that with how most desktop applications launch. There is still some waiting but aspects of the interface only appear when they are ready to be shown, instead of the half rendered state many a web page is briefly shown in.
I've updated Window Explorer to work with AIR beta 3. I think I've also got the new badge install for 9.0.115 working. I don't have my PC with Flash Switcher handy so I'm not 100% sure, will have to double check tomorrow. A quick recap of what Window Explorer is: Utility designed to allow easy exploration of the various Flex Window and Native Window options available in AIR. Code generation for selected options is included.
Updating to beta 3 was mostly painless, primarily I just had to remove stuff from the UI which Adobe took out.
Last night I started playing with the public beta 3 drops for Flex 3 and AIR. Using the project creation wizard I created a new Flex based AIR application. After looking at the new application descriptor format which has changed a lot since beta 2 I started to customize it so that I could use it as a template for sample applications I was updating to beta 3. When running the Export Release Build... wizard it got through most of the .air creation process but then erred out at the end with the following message:
Error creating AIR file: 103: ERROR, application.name
Continue reading "Error creating AIR file: 103: ERROR, application.name" »
When using Antennae or some other tool to run automated FlexUnit tests to Linux, it should be possible to use xvfb to create the display that the standalone Flash needs to run. With this approach you avoid the need to have a full X instance running while still being able to use the standalone Flash player to run the test SWF. I won't claim that this is any great insight, but I found a piece of paper on my desk with xvfb scribbled on it and I figured this was as good a place as any to record it :)
Rough draft notes
Panel: Dave Gruber, Tim Buntel, Phil Costa, Jeffry Houser, Todd Prekaski, and Paul Reilly
Q: When can Flash be multi-threaded?
A: Not for awhile. Tricky to do. Not in 10.
Q: What more will be in Flex for designer work flow?
A: Thermo is a new designer tool for converting wire frame into an interactive application. Also giving them tools to handle behavior. Improving skinning models and more declarative. Ely gave talk about this, should be up on MAX website.
Q: Best resource for a designer to get up to speed on Flex?
A: The Adobe Developer center. Grouped by background. Flex Cookbook. And watch for Thermo. Programming Flex is a great for an understanding of Flex in general.
Q: Any plans for different LiveCycle polling options?
A: Server side polling channel configuration (requires thread per socket). LCDS 2.5.1 should have examples about how to mimic real time latency. RTMP is best for non-blocking IO.
Q: Any ability to expand HTTP components to support additional REST capabilities beyond GET and POST?
A: Short answer yes. Flash player is limited by Flash and plug-in APIs. Workaround is to use the LCDS proxy.
Q: How best to handle authenticated remoting?
A: Use a session token. Usually rely on cookies with HTTP.
Q: Why use J2EE session ID as opposed to CF token ids?
A: J2EE session ID are superior to CF token ids.
Q: Any plans to include component that can display web pages in Flex?
A: Support is there for AIR. Can use frames to overlay SWF to get the behavior. No current plans since it requires Flash changes. Look at Drumbeat.
Q: Any plans to have .NET AMF tier?
A: No plans for .NET version of LCDS. Adobe is using a 3rd party Midnight Coders to provide similar services.
Q: Updated version of Cairngorm?
A: Run by Adobe Consulting. Best way to find out more is use their mailing list. Announced at MAX a data driven site version.
Q: ColdFusion application with CFCs for Remoting, what needs to change for AIR?
A: Hopefully nothing! Compiling against the services config does require a little tweaking when using AIR since config isn't parameterized in AIR. Pier (one of the sponsors) gave a talk on that behavior.
Q: Any mechanism to provide synchronous event handling?
A: AIR provides both synchronous and asynchronous. Log enhancement request against Player.
Q: Better Flash and Flex component integration?
A: On the radar to make it better. Flash to Flex is there. Flex to Flash isn't there yet. The component model conversion is a problem.
Q: Flex Builder 4?
A: Looking to users for ideas. Broadening audience that uses it. Let them know if you want to be involved in product planning. Put feature requests into open Flex bug system.
Q: How to synchronize SQLite to MySQL?
A: LCDS may do something in the future. ColdFusion at MAX showed some of the online/offline connection data management.
Q: Additional SQLite support for full SQL syntax?
A: Frozen for AIR 1.0.
Q: Status of code coverage tools?
A: Adobe consulting was looking to build an open source project but don't know the status. Plumbing has been added to player. Should be available soon.
Q: Ted Patrick commented about AMF being released?
A: No.
Q: Issues with profiler on 64-bit.
A: Player doesn't work on 64-bit machines, everything runs in 32-bit mode. Does work on Vista and Leopard.
Q: Linux support for Flex Builder?
A: Alpha of Flex Builder for Linux announced and released at MAX. Development ongoing.
Rough draft notes
Matt Woodward is talking about Flex and ColdFusion: Mysteries Revealed!
For ColdFusion people why use Flex: Very powerful. Simple. Big wow factor. Fun new technology. Don't limit yourself.
Sample photo gallery application, uses custom Flex components, ActionScript, and Events. ColdFusion back end that with RemoteFacade and DB layer.
Flex Builder needs to see ColdFusion's WEB-INF/flex directory.
Forget about request/response when dealing with Flex development. It's all event-driven and much more stateless. Events can be announced at any time. Request to server can be made but the response will come back at some undetermined time.
Business logic should not care who is talking to it. Can get input from anyone. Allows either ColdFusion or Flex to act as front-end. Facade isolates what Flex is talking about.
ColdFusion Components (CFC) and ActionScript (AS) can be translated between if done right. Must have mirrored properties. Have AS define "[RemoteClass(alias="path.to.cfc")]" and CFC define "<cfcomponent alias="path.to.cfc"/>". To return a collection use "<cffunction returntype="path.to.cfc[]"/>". Has good performance for most applications with reasonably sized collections.
Custom Events let you include your own custom data in the Event.
Accessibility questions about Flex? Doesn't have to worry about them. Member of the audience finds Flex easier to make accessible then HTML sites.
Will be posting sample code to his blog.
Where to do error handling? Has person making the call handle what to do if there is an error. Flex can handle ColdFusion error since it gets the error back.
Rough draft notes
Thomas Burleson is talking about FlexUnit Testing with Cairngorm
Looking at StormWatch and TestStorm used to test that information.
Showing demonstration of StormWatch. Loading XML data of stock market information.
Unit Testing: Test all the functionality of a single unit.
Continuous Testing: Test all units each cycle (each commit). Locally.
Continuous Integration: Test all units created by other developers.
Test API server exposed, transformations in Flex, business logic, event processing, and model updates. Not testing UI (hard to do).
Custom extensions to FlexUnit and Cairngorm to aid testing. Should be live on Google code early next year. Universal Mind (UM) Cairngorm.
Traditional testing approach requires extracting stuff. Bad because: Tests performed outside MVC, requires many test shells, and boundary conditions are not tested well. Focus on human issue (functional test) versus tool issue (unit test).
Uses parallel but different base package naming com..commands.* versus tests..commands.*. 1-to-1 for package, classes, functions.
UM Cairngorm adds: view responders, command event dispatching, delegate queues, batch events, command logic aggregation, and FlexUnit support.
Different unit testing frameworks include: ASUnit, FlexUnit, dpUInt, and UM Wrappers (builds on FlexUnit).
Cairgorm Explorer is a handy application.
Showing how the unit tests are constructed and run. Importance of testing with events to mimic what the UI is doing as much as possible.
Have Synchronizer that watches for code changes and creates stubs automatically. May not be opened sourced but good to think about the ideas.
Rough draft of notes
David Coletta is talking about Building Buzzword.
Jan 2006, started coding in an attic. Oct 2006, public demo at MAX and funding from Adobe. Nov 2006, more people and real offices. May-Aug 2007, monthly preview releases. Fall 2007, open for real use.
Show documents by alphabetically, author, role, last viewed, last modified, # of pages. Custom scroll bar with numbers in it. Able to click on scrollbar to jump to location. Leave comments in document. Also supports tables and advanced formatting capability.
Text on page. Three main pieces: document (content being saved to server), layout (transient position of the content, relay out after every character), and display (Flex/Flash objects on display list). Flow: document to layout. Tries to optimize what changed and handle as few things as possible.
Document internals: Body with one Section has multiple Paragraphs each with multiple Runs. Run has AnchoRun and FontyRun as subclasses. FontyRun has BreakRun, FieldRun, and TextRun and subclasses.
Use custom Tree ITreeDataDescriptor to provide custom tree data providers that can manage any custom data type. Not just XML.
Screen metric - print metrics = micro-spacing to get consistent layout between screen and printing. Very expensive to calculate but vital to getting consistent layout between the two.
Cache of display elements so that only certain objects are shown at once. Buzzword controls what is rendered on screen since the number of text fields for a document would overwhelm the Flash player.
Buzzword back end is .NET and uses low level HTTPService for back end communication. Backend does comment notification, document locking, and other raw CMS features. Login over SSL. Parking HTTP request on the server which then responds when it has data to send to the client.
Testing was vital primarily used FlexUnit. Spent a lot of time developing custom test framework called LiveTest. Focused on document command validity not focused on UI (like QTP). Able to record, debug, train, and playback a test. Generated ActionScript code can be copied back into the platform. Wrote custom framework instead of something like QTP required more constant feeding of unit tests.
Custom skinning scroll bar in Flex 2 was difficult. Hard to get skin to draw text (much improved in Flex 3 with UIComponent skinning model).
Has modular loading. Caches editors, styles, fonts, but if not there is displaying a progress loading bar. Pro: Improves build times, background loading, and good design through information hiding. Con: Can increase overall download, slow overall build, and increased complexity. Debugging across modules is hard, need runtime switching of loading debug versus production. Centralized control of what gets loaded when based on startup mode to prioritize based on startup mode.
Merge user dictionary on a collaborative document into a document dictionary to provide consistent spell checking. Look at gskinner.com for spell checking libraries.
Rich Text Copying is not supported by Flash. Hidden IFRAME or DIV render content from HTML control to allow clipboard content to be rich content. Push focus back to browser so that it picks up copy/paste events.
Off the shelf Flex isn't used much (more for debugging components), leveraging low level components (UITextField). 90% custom AS versus 10% MXML.
David's blog: TheJoyOfFlex.com
Rough draft notes
Joe Berkovitz and Tim Walling are speaking about Bringing Rich Commerce to the Desktop with AIR.
Case study and development notebook presentation.
Wanted to provide rich vibrant shopping experience online and/or offline. Utilize local persistence mechanisms for shopper customization. Business users can author experience. Fast local database. Online conduit for checkout.
Showing a demo of the demo application developed with Anthropologie, a canned demo online. System tray notification, scrolling of primary view, continuity of experience with zooming into product details, ability to locally tag items, search by color, with drag and drop image support, and the ability to have the merchant modify the content shown in the application.
Architecture for final product: web server provides updates and AIR application with an existing commerce server and analytics engine. Update manager supplies catalog meta data, media and markup. Content integration merges local files with web server supplied content to provide a uniform interface to the rest of the client. Personalized data persisted locally in the SQLite data.
Demo made everything local, minimal fixed product catalog, and tweaks to make the data work for the demo.
WindowedApplication is the primary application instead of Application. Chromeless window to get complete control over the look and feel. Different application modes are accomplished by command line arguments. These alternative modes much be manually created. Able to have application startup in system tray only mode.
The AIR application descriptor defines how the application startups. Key values are systemChrome, visible, and transparency are used to control the look and feel. Controlling window is through simple calls like minimize() and startMove().
System tray notifications are custom coded. Need to make sure you take into account screen size and multiple monitors.
Able to use "like" query against SQLite for simple text based searches.
Color search requires custom cursor management to provide custom color widget overlay. Color wheel itself was an image versus dragged in image handled the same way. When using drag managers in AIR there is a NativeDragManager that gives you access to the Clipboard format. Different applications supply drag data differently, such as IE giving a URL for an image versus Firefox giving the raw bitmap data. BitmapData.getPixel(x,y) can be used to color sample images.
The navigation strip navigation is about content. Uses goal based animation to provide smooth scrolling to handle rapid changes in what the user wants to see. Setup want you want to change and how it should change over time. Just supply the value you want and the engine maps to that goal.
Database populated for SQLite by using existing database file. Custom AIR application was created that could read in and populate the SQLite database. Some SQLite tools are available on labs to make working with the files easier (run queries, create tables). Rewrote integration to pull form SQLite database instead of a web service.
SQLite usage internals. DAO to isolate database gunk from the rest of the application getProduct(uri:String, handler:Function). Translator handles SQLResult translation into ActionScript objects.
Asynchronous API to keep event loop alive. ConnectoinPool and StatementPool to manage connections and statements to improve performance. Caching statements saves the need to reparse the statement.
Color match requires looking at color wheel. A given RGB value wasn't matched exactly by anything in the database. How to get close. Instead used HSV (hue, saturation, luminescent). See wikipedia for more details. Used color swatches to extract data for every product. Extract all HSV values and then do a linear search. Not that much data to pull into memory. Animate product results by looking at intersection of two result sets. Fade out what went away, fade in what is new, and move anything to its new position.
Goal based animation is about providing seamless animation experience. All about getting to some state. Doesn't use easing or tweans to apply real-time updating of what the goal is. Can work on multiple properties at once (alpha, position, size). Takes the most direct path to get to the target goal.
To get to the pilot: need to have the application download more content, update mechanism to see the new edition, enable offline cart, and additional personalization capabilities.
Rough draft notes
Tom Jordahl is talking about Using ColdFusion with LifeCycle Data Services.
Why Data Services?
Powerful back end. Talk to ColdFusion. CFML to manage complex data.
LCDS with CF 8 installed by default.
Messaging: Publish & Subscribe, asynchronous communication, message header and body (can contain complex types CF components or ActionScript types), CF can both produce and consume.
Why messaging?
Real-time notification to your Flex application.
Triger long running server side processes
Notify multiple clients at once
messaging-config.xml contains the data along with reasonable defaults.
Easy to have CF both handle and publish messages that will be broadcast to all clients that are listening.
Client can do HTTP pooling to get around RTMP firewall restrictions.
Data Management
Distributed data management, data replication and synchronization, able to manage large data, nested data one-to-one or one-to-many, has some occasionally connected clients.
All clients that are looking at data will get notifications based on updates that are made. The changes are batched up.
Why Data Management?
Easily synchronization data between clients with conflict detection, data replication, and performance optimization (such as data paging and lazy loading).
Assemblers manage the data. Can be written as ColdFusion Components or Java, leverage Hibernate. Four main mehtods: Fill, Get, Sync, Count.
CF 8 extension for Eclipse are freely available. Gives you RDS (Remote Development Service). Includes query builder. Automated creation of ColdFusion Components and ActionScript classes related to database object management including the Assembler.
Special CF channels: cf-polling-amf (work around firewalls), cf-rtmp (off by default).
Possible to have existing Java or CF applications notify clients of data changes using new Event Gateway.
Able to configure that certain data pieces don't trigger changes being published as a way to optimize changes.
JSP tag to compile MXML applications on the server available on Labs.
All data transmitted via binary AMF3 protocol.
www.adobe.com/go/lcds_devguide
www.adobe.com/go/lcds_javadoc
Rough draft notes
Paul Reilly is speaking about Using the Flex Profiler
Memory profiling lets you look at objects being created, take snapshots and compare them. Performance profiling allows snapshots for looking at cumulative and internal time.
Memory profiling is light-weight compared to performance profiling when configuring the settings.
Profiler runs at the end of the frame which is why there maybe delays in getting updates to the profiler in Flex Builder.
Memory leak detection work flow: select app and take memory snapshot, switch to application and perform an operation, then take a second memory snapshot. Select both snapshots and view loitering objects. Can look at back references to determine who is holding onto something. Most common memory issue is strong references with event listeners. Can either remove the listeners manually or in most cases it is possible to use weak references. Best to reset profile information at the start unless you want to focus on initialization phase.
Can profile any external SWF, in general this is done with the standalone Flash player. Filtering of artificial functions isn't there yet (such as reaping, mouse handling, etc.) but you can change what gets shown such as removing the mx.* filter.
With performance profiling you can look at callers and callees to see how a function is being used. Important to remove filters so that mx.* abd flash.* are included in the list unless you want to focus only on your code.
Profiler supports debugging capabilities. mm.cfg file can be used to control settings. flashlog.txt doesn't get created if using a release version, good way to test that you are using a debug version of the player.
ErrorReportingEnable=1
TraceOutputFileEnable=1
PreloadSwf=ProfilerAgent.swf?debug=true
Additional information outputted into flashlog.txt that shows what the profiler is doing.
mm.cfg is only read once so if you are using multiple tabs in a browser it is only read the first time.
Runtime exceptions or infinite loops will cause the profiler to not work very well.
Taking a memory snapshot implicitly makes a garbage collection call.
Internally the player is using a stack trace (once every millisecond) for performance timing, new object samples (every time an object is create), and delete object samples (every time the GC collects an object). flash.sampling package includes way to get at the same information if you want to roll your own profiler.
DisplayObjectContainer and EventDispatcher are classes that are hard to get the internals of and there are back door methods to get access to data useful for profiling.
Profiler is sample based (not trace based), provides quicker profiling but not as detailed.
When is the best time to take snapshots? Look at overall memory chart to see where the issue might be. Try to narrow down operation in application that causes memory increase. Then start taking snapshots before and after performing that application.
Can you programmatically trigger a snapshot? Not at this time but create an enhancement bug and vote for it.
It is possible to profile AIR applications.
Rough draft of notes
Peter Farland is talking about Configuring, Debugging and Deploying LiveCycle Data Services.
Notes from the talk will also be posted to his blog.
Version issues with LCDS
A LCDS version is best used with the version of the Flex SDK that comes with it, in most
Flex 2.0.1/FDS 2.0.1
Flex 2.0.1 HF2/LCDS 2.5
Flex 2.0.1 HF3/LCDS 2.5.1
Flex 3/LCDS 2.5.1
Client side: rpc.swc and fds.swc and services-config.xml are the key pieces to keep synchronized. Don't forget fds_rb.swc.
If you find a bug open up the swc and look in catalog.xml to report the version you are using. The jar file has a similar version in the manifest.
Performance very tied to java version. 1.5.0_07 is very bad for performance. Avoid 1.4.2_02 to 1.4.2_05 and 1.4.2_10. 1.5.0_13 is recommended.
Configuration
Flex compiler knows about services-config.xml. -services compiler flag generates needed AS3 code. -services isn't needed if you want to roll your own ChannelSet management code.
Multiple Channels in a ChannelSet provides failover.
Use a single ChannelSet for all services in the client.
Only authenticate once per client ChannelSet.setCredentials().
Allows runtime determination of secure channel selection.
Programmatically create the ChannelSet to provide a poor man's load balancing. Randomize the order that the Channels are defined is. Still give you fail-over but the random list gives some load balancing (Math.random()).
LCDS messages brokers can create MessageDestinations on start programmatically instead of having to specify everything in a services-config.xml.
Important to optimize your configuration file and get rid of sample pieces and channels that are not used. Can improve compiler performance since it is less data to parse and manipulate. Be sure to remove debugging and redployer watchers from a production configuration file.
Sun's JDK XML parser should be replaced by xalan.jar.
Flex Builder only supports one project in memory at a time. Only the last edited project is retained in memory for incremental builds.
When debugging make sure you have references to data types retrieved from runtime otherwise they won't be linked in. Missing flash.utils.IExternalizable leads to "one of the parameters is incorrect" error which can be solved by referencing the class.
Client side debugging:
Server side debugging: Can configure debugging levels in services-config.xml. LCDS includes a server side tool sniffer.exe.
Common browser issue is non 200 HTTP status codes.
When doing deployment compile your SWF and simplify your web.xml file. LCDS 2.5.1 allows configuring client point to be secure while server uses HTTP to allow using SSL accelerators. RTMP can use the bind-address and bind-port to allow hooking it up to a load balancer. Resource availability can be problematic on hosted web servers since most are tuned for short lived connections on persistent connections that LCDS uses.
With LCDS express (limited to 1 CPU) 1000 plus users with RTMP should be possible since it is multiple threaded. Other techniques like servlets would block too many threads.
Rough Draft Notes
Christophe Coenraets is giving the Keynote
Talking about Flex 3 Improvements
Advanced DataGrid: hierarchical data, flexible grouping, custom formatting
Charting Enhancements: data-oriented graphical APIs, per-item labels and fills, region selection
New List and Data Effects: choreograph data
Showing iLog charting example
3D bar and data charts
Organizational chart example with grab and pan
Showing code example with the AdvancedDataGrid
<mx:AdvancedDataGrid>
<mx:GroupingCollection>
<mx:Grouping>
<mx:GroupingField name="category"/>
</mx:Grouping>
</mx:GroupingCollection>
</mx:AdvancedDataGrid>
Need to tell grouping collection to refresh itself.
Persistent Framework Caching
Flash player caches Flex framework across projects and sites.
Size of target SWF can now be as small as 50KB.
Base application size 600KB, removing debugging via compiler flag -compiler.debug=false 380KB, Flex Build path/library path/framework linkage, change that to runtime shared library, 200KB. Has fall back capability to support loading SWF instead of using signed SWF caching.
Memory and profiling and code refactoring are two big improvements in Flex Builder 3. Demonstrating sample application called Salesbuilder as a way to show these two new features. Source code is available off of his blog. Application is AIR based and supports desktop drag and drop to save graphs along with offline data synchronization using the SQLite DB and LCDS. Next talk is about profiler so this he isn't talking about it. Showing find references and rename variable support.
Designer and developer workflow is improved through skin asset importing and CS3 Flex component support in Flash. Showing Fireworks example of show to easily skin a button, export the asset and pull it into the Flex CSS file. Once in Flex Builder one can use the new CSS Design view to manipulate the file. Ability to graphically assign Scale 9 parameters that it updates the CSS file with. Can also export style information from Flash.
Flex Builder 3 now supports wizards for working with data and web services. Will generate both client side and server side code in PHP and some other languages for data access. Can introspect a web service through a wizard, select desired methods, and generate stub code on the fly that is strongly typed.
Flex 3 has enhanced JavaScript/AJAX wrappers and improves the deep linking support from Flex 2. Showing deep linking support in Buzzword. All about anchor management. Can leverage the existing URLKit.
Showing new Flex pricing and packaging. Flex 3 SDK, free, Flex Builder 3 standard is $249, there is other pricing.
bugs.adobe.com/flex
www.flex.org/community
I added a couple more introductory FlexUnit recipes to the Flex Cookbook. They are titled Understanding FlexUnit Output and Run code before and/or after every test. Next up will be some intermediate recipes.
I've posted round one of some Flex Cookbook entries that focus on FlexUnit. I welcome any feedback on have about them.
Allurent the company I'm working for has been doing well lately and as such we are starting another major hiring push. We've recently signed a strategic deal with GSI Commerce to provide our full product suite to their customers and have closed a $7.5M Series B.
Our details, inline cart, and checkout are live at Anthropologie. To see details you need to visit a product category page and then click on the hotspot marked by a magnifying glass icon below any product image. To see inline cart, just hover over the "shopping bag" link at the top right of the page.
The growing Flex Cookbook is great for finding answers for a wide range of problems. The problem is the site doesn't make it clear what license everything is under. For a developer creating a product that uses some of the cookbook code what might it mean? Your guess is as good as mine. For an entry I posted I cited the license the code fell under. While other examples are not as clear. What does that "@author" mean?
I think for the Flex Cookbook to be a general purpose reference it really needs to clearly state the license all code falls under. Ideally it should establish a blanket public domain license. If I'm missing something please let me know.
There has been some recent conversation about the impact of styles and fonts on compilation time in Flex Builder 3. I figured I'd take the project I'm currently working on and see what the numbers came out as.
Some more details about the test: About 700KB of raw .as and .mxml code. 2 separate CSS files are imported. 120KB of TTF fonts. 650KB of SWF fonts. Compiling using Flex 2.0.1 Hotfix 3 SDK. Each tests was run 3 times with the average time reported. Each test was run by changing text in the top level MXML component, saving it, and timing a manual build. Timing was from time of click until the progress view reported the build was finished. Copy non-embedded and generate HTML template were disabled.
As with all measurements these should be taken with a grain of salt and are meant to be representative. Your project will vary, yadda, yadda, yadda.
I'm pleased to announce Antennae release 1.0001 has now been posted. The full release notes are available online. Please leave me any feedback if you run into issues or have feature requests. Below is a summary of the key updates:
Flex based AIR application support
New targets and tasks have been added to support the building, running, and packaging of Flex based AIR applications.
A sample project has been put together that demonstrates the use of these new targets.
A key concept used in AIR application support is the concept of an "assets" directory. Since the AIR ADT application packager requires you to specify each file that should be bundled into the application, Antennae has instead chosen to specify a single directory. The goal being that by default all files under "assets" will be packaged with the application and there is no need to include these files in the source tree.
Simplified importing
All template applications have been updated to use the new single build-common-imports.xml file to pull in all standard Antennae build files.
Source code included
The source code for the ARC-FlexUnit pieces are now bundled with Antennae. This is for reference purposes. To rebuild the platform please grab the latest source code from the SVN repository for Antennae. http://antennae.googlecode.com/svn/
Linux fixes
Fixed bug about not being able to run automated unit tests on Linux.
Adobe announced today that beginning in November qualified education end-users will be able to get Adobe Flex Builder 2 for free. I think this is another good move on Adobe's part to help open up and promote the platform.
I spent most of today putting the finishing touches on a utility AIR application. The application is geared towards making it easy to explore what kind of custom Flex Window and Native Window objects you can create and how they look. It includes some debugging features and the ability to generate AS3 and MXML (Window only) code that matches the selected options.
I played around with the latest SWFObject and the badge install so that grabbing the application should be painless. Window Explorer Download Information.
Let me know if you run into any issues or have ideas for improvement :)
I've posted a version of my slides (0.5MB PDF) that were used for my Flashforward talk and MAX talk under the titles "Automation of Flex Building and Unit Testing" and "Continuous Integration with Flex, FlexUnit, and Ant" respectively.
The demonstration files used in the talk are mostly equivalent to the tutorial and template directories that are included in Antennae.
The resources mentioned in the talk are listed below:
Rough Draft Notes
Kevin Lynch
adobe.mtv.com Adobe AIR contest now open
Bruce Chizen
Financial community is like tooth drilling without novocaine. Press is fascinating. Print the words he says but surrounding it with other stuff, which isn't what I meant. As as CEO privacy is an issue. How much he makes is public. Now as a CEO there is legal risk, signing his life away.
Saturday. Dave Mathews Band concert. Back-stage pases. Talking about Adobe products.
In Keynote, sneak peaks, what developers/designers do with tools Adobe provides.
Kevin
Server, Services, and Tools
Back common server side patterns into server code and reuse there.
Steven Webster
Experience matters, that happens on the glass. Experience behind the glass. LiveCycle ES, back-end to rich experience front-end.
Mitch Fried (mfg.com) online marketplace, geographically diverse, RFQ lots of data. Real-time back end matching., 3D PDFs with policy settings.
Steven
LiveCycle on top of Java SOA. Data services (what was FDS) is one piece of LiveCycle.
LiveCycle workbench (Eclipse based). Form guide builder. Getting to scan a piece of paper and turn it into an RIA.
Rights Management and Digital Signatures. Prevent printing or emailing. Assure return of confidential information.
Process Management. Workspace ships with LiveCycle to define and work with processes.
LiveCycle is available free on devnet.
Kevin: Adobe looking to create hosted services.
Scene7 Imaging, Share, Pacifica, CoCoMo
Doug Mack: Scene7, Rich media service and automation. Single master image. Many parameters to control flow. Demo of online uniform creation. Take content for granted and just design the experience. Delivered as SaaS. Scene7 image portal. QVC demo with AIR, Scene7, and Video. Looking to be as strong with print and online.
Andrew Shebanow: SHARE, file sharing in and outside firewall. 1GB of storage. Uploaded file from desktop, virus scanned, emailed person data was shared with, thumbnailed document. Viewer is Flash Paper on steroids. Embed file into HTML page through custom control. REST APIs (upload, share, retrieve). Also have AS3 libraries. In the future more improvements with file formats and organizations.
adobe.com/go/share/ beta available now.
Danielle Deibler: Pacifica, high quality voice, messaging, and presence. Almost like HD voice. Video preview sharing. Point-to-point connection on top of Pacifica service. High quality voice, text messaging, presence, NAT and F/W traversal. Roadmap: video, p2p, air, pstn access.
Private Beta starting this month, looking for people with applications that would fit the platform, also they are hiring.
Nigel Pegg: CoCoMo, Adobe Connect, been working on new client-server platform. Client UI now in Flex, now UI component framework, have access to lower level APIs. Opening up hosting infrastructure, real-time data messaging, av streaming.
Kevin: Thermo (Designers to create RIA)
Mark Anders, Stephen Heintz: Thermo, RIA Design Tool. Creating Flex applications. Own design. In context (x, y, width, height) display. Flex framework extensions (mx:Graphic, mx:Rect). Import PSD. Options to treat layers. (mx:BitmapGraphic, mx:TextGraphic). "Convert Artwork To". List management (auto random data). State management and automatic transition creation. Visual bind of controls. Automatically repeat sample data. Thermo and Flex Builder share project definitions.
Start to be available next year.
Kevin: XD
Mike Sundermeyer: What makes a great experience. Adobe inspire experience design site.
xd.adobe.com (alpha) Case studies, design patterns, hot topics.
Kevin: Biggest Flash Device. Susan B Yacht, Captain Kirk. InteliSea.
Rough Draft Notes
Lucas Adamski
AIR Threat Model
Installation
Runtime managed dialog, application signed by CA, self-signed = unsigned
Line between guaranteed harmless/automatic execution to full privilege/explicit install.
Only time user makes a decision is on the security dialog
AIR updates must be signed by the same publisher
Elevation Attacks
Remote content should not be able to discover anything about local system.
Should not be able to cross sandboxes.
Injection Attacks
JSON isn't a problem, JSON by eval() is the issue.
Smallest sandbox is a frame.
Injection Vectors: Code importing, DOM manipulation, URI schemes, Code generating functions.
Focused on protecting the user, not the developer.
Mitigations: Escaping or stripping (requires diligence). Clearly separate code and data (SQL prepared statements are a good example).
Typical Desktop Application Threats
Writable files
Credentials stored insecurely
Default passwords
Buffer and stack overflow
Upgrade/downgrade attacks (manually uninstall to downgrade)
Applications should not update without explicit user permission, no runtime importing to application content from remote servers.
AIR Security Model
Scripting languages have greater access than browser
Dynamically loading shouldn't have access
Provide loading mechanism that puts loaded data in its own sandbox
Explicit communication mechanisms
Safer cross domain data
AIR Does Not
Can't run untrustworthy applications
Prevents security mistakes
Has sandbox to guarantees security
AIR Does Provide
Full system access
Explicit installation
Signed applications
Guiding Principles
Local and remote data is like running in a browser
AIR shouldn't be natively more dangerous than other platforms
AIR shouldn't be a vehicle for attacking machines
AIR shouldn't require security guru
Develop paradigm during beta process
Flash in AIR
app-resource vs. app-storage
Application content: no asfunction, loader.loadbytes(),
Non-application content: no direct AIR API
No one: no write to app-resource, sandboxBridge
HTML Security Model
Application (desktop model) vs. Classic Sandbox (Browser like)
Application: direct air access, set innerHTML but script ignored, dynamic allowed only during load
Classic: dynamic always permitted, script for JSON are fine, no direct AIR API
Have to wait for parent Sandbox bridge before you can do anything
Cookies can be turned on/off.
SSL supported
Secure local store API, generic secure key storage (app ID and user Key)
Q: If I download a SWF into application-storage will that have fewer privileges than a SWF loaded from application-resource? Yes. Looking in the long term to provide plug-in API (not 1.0). Bridging will get you there. In general it's not prevented just discouraged.
Rough Draft Notes
Mansour Raad
ArcWeb Services, APIs for adding GIS data to applications.
Data Visualization: GeoRSS includes lattitude, longitude, point, line. Looking to create 2D/3D map interaction. Vector data is much faster to work with (Poly 9). gwx:Map and poly9:Globe are a couple of components that make it easy to work with the data.
Mashups: Edge 305 to gather data. Created a GPX feed. Combined with photos and leveraged ESRI map data to show route and tag with photos. gpx:GPXLayer and awx:BubbleMarker were some of the components used.
Framework in general. User has full control over draw methods. Supports client side spatial searches. Showed example of circling section on map and highlighting those points within it. Uses client side RTree. Using the server select a point and call utility.getDriveTime returns geometry object with real-time 5 minute drive time radius. Has server side natural language processing to determine location. Example was "Let's get a Chicago deep dish pizza at the corner of main and elm in Boston." Determines that Chicago isn't a location.
Mentioned MIT Simile AJAX project to combine GIS data with time line visualization.
SHP file format. There is a Google code library that can read it.
Modify display with things like Graphics.curveTo with a control point.
ERS demo application. Placed barricades on map and allowed people to determine how to route around them. Used to help Minneapolis public after bridge collapsed.
Beta of APIs and services available at www.esri.com/flex
Other URLs of interest
www.arcwebservices.com
thunderheadxpler.blogspot.com
Rough Draft Notes
David Hassoun
Talk will focus on resources and guides, this isn't a how to.
Three main pieces: Analysis (what to do), Design (how to do it), and Implementation (creating code)
Saffron AIR UML Tool, Enterprise Architect, UML and a focus on class diagrams
Unit testing frameworks include FlexUnit and ASUnit
Coding Guidelines: Doesn't matter what you pick, but consistency is key.
Areas to consider: object creation policy, variables typing and scoping, package structure, class structure, naming conventions, code commenting, and curly braces
Not confirmed but mentioned something about declaring multiple variables on a single line as being more efficient. (ala. private var foo:String = "", bar:String = "";)
Program to interfaces.
Memory and performance. Areas to consider include: deferred instantiation, paging in data, don't load assets until needed, remove references, remove trace statements, use the mxmlc optimize flag (on by default I believe), use int as type of loop counter.
Unconfirmed but mentioned accessing static member variable in a loop is more expensive then copy value to local variable and referencing that instead.
Architecture: Create and use frameworks (reusable code blocks).: provide proven and targeted solutions and the expense of code size and potential bugs. Design patterns are repeatable solutions and should be used as needed. RSLs and modules great for sharing code and leveraging testing effort (once tested can be used again with higher confidence). Look at using -link-report and -load-externs command line options. Flex 3 is adding cached framework library. Flex Builder 3 has UI for setting up and using modules.
Best practices: code management and version control. Create code integrity, do unit testing, and continuous integration.
Rough Draft Notes
Kevin Lynch is giving the keynote.
Connect. Discover. Inspire.
MAX around the world. MAX the dog is in the AIR park.
Adobe Developer Connection is launching.
Connect beyond the conference with Intronetworks.
25th year anniversary of Adobe. Going to keep staying on the leading edge. Pushing technology forward.
Shantanu Narayen. Best attended MAX ever. Time is right for brand new type of application. Combine power of desktop with interactivity of the web. How to engage customers, need to keep them front and center.
5 rules for experiences.
Take quality of digital experience to a whole new level. The Internet, Remixed.
Kevin is back:
Video:
70% of video on web is Flash. H.264 is becoming widely adopted, now in Flash player. Yahoo video: view HD content with custom UI without re-encoding. Plan to playback support iwht Adobe products. Up to 1080p, full csreen hardwrae acceleration. 480p versus 720p video comparison at full screen. Halo 3 Great job of Microsoft using Flash on their website.
Adobe Media Player: Bring in video, streaming or download. Catalog of video feeds. CBS, PBS, and long-tail content. Associate Ads with content or free stuff. Pre/post, on top, and overlay ads. Available on labs today.
FlashLite 3.0 will be available on Nokia soon. Video being brought to mobile phone. Nokia N95 with video demonstration, same CSI clip. Flash Media Server delivering video.
Websites:
United Way example being improved with Cold Fusion and Dreamweaver, presented by Ben Forta and Scott Fegette. Cold Fusion 8 is out, Dreamweaver CS3. What features could be added. Custom experience based on combining form data with custom generated PDF based on data entered. Dreamweaver CS3 Spry 1.0.6 available on labs. Using accordion framework. Apply source code formatting in CSS file. ColdFusion ships with LifeCycle Data Services. Capture bitmap data send it to the server, save as a JPG and then AJAX to include it on the page.
Applications:
Scrapblog built with Flex. Get desktop applications connected with AIR.
Giving an overview of AIR is Ed Rowe. Custom Manager by Nitobi. Sales representative to use in the field and integrates with Salesforce.com. Putting rich experience on more than one application. Dragging VCard from desktop and loading into desktop application that is syncing up to website. Beat 2 of AIR, Beta 2 of Flex 2, Dreamweaver AIR Extension, and Flash Authoring AIR Extension are now all available on Labs.
300,000 downloads of AIR runtime and 100,000 downloads of SDK. Flex is now free, best way to build RIAs.
Flex Team Heidi Willimas is talking about developer features. 4 new features.
Giving profiler demonstration. Jump from report to method. Refactoring of method name. Lots of styling with advanced data grid. Drag select and drill down information. Multiple column sorting.
Kevin is talking about AIR Developer Derby. Five winners.
Spaz.AIR, Ora Time Tracker, Agile Agenda, SearchCoders, Digimix. Agile Agenda is overall winner. Demonstration of application.
eBay launching their AIR application today. Bob and Cary from Disney and Frog are showing their application online. Travel agent application that is outside clutter of email and Disney branded. Frog Design was doing design work. Store offers locally. Customer management list. Drag and drop selected text from PDF. Created PDF right from application.
Tweetair (sp?) (Twitter application), Snippage (make your own desktop widgets by clipping websites), Pronto! (Calendar application with Google analytics integration), Paypal (Transaction history, charts of history, showing drag and drop between AIR applications), SAP Briefing book (Synchronizing data, charting against dragged in Excel data), Digimix (Audio editing, save as WAV to disk), Pownce (Social networking application), Nick.com (puzzle, tied into web site), AOL Top 100 Videos App (Video browsing and viewing), Buzzword (Flex word processor, desktop AIR and online, documents optionally saved online, Microsoft DOC import) Adobe has acquired Buzzword company, Anthropologie (Cross media experience, print catalog, email, website, and desktop application, search by color, personalized note experience, build by Allurent),.
MTV and Adobe AIR Challenge.
Announced Facebook chat application using their API and build on AIR being worked called WaveIM (sp?)
Astro Flash player being presented by Emmy Huang and Justin Everett-Church: Advanced Text Layout Support (bidirecitonal language support). Correct word wrapping. Multiple column support. Native support for perspective transforms. All display objects can be transformed in 3D and maintain full interactivity. Rotation X, Y, and Z. Custom filters, blends, and fills. Hydra (sp?) new effects language. Toolkit available on labs today. Pixel sampling technology.
Rough Draft Notes
Erik Natzke, Natzke Design
comes to interactive design from a design background.
looking to animate things in an organic manner
Flash is a digital sketch book
freeze and analyze life.
everything in advertising needs to have reflection
system based on percentages so that 15 second always takes 15 seconds
need to account for resizing
inventing new ways to be lazy
how do you make things file size sensitive.
build tools for yourself
curves and way points are a big thing
phenomenal flash generated video for an art installation.
Rough Draft Notes
Paul Ortchanian, Goodby Silverstein & Partners
Effects don't all need to be done with OOP
Don't always view in terms of x and y. view in circle instead 0, 180, 360 degrees.
think in circles, best way to think of programming in 3D
cerate illusion of depth by scaling elements.
scale=fl/(fl+_z);
_x=x*scale;
_y=y*scale;
_xscale=_yscale=scale*100;
principal rotations
pitch, roll, yaw
find formulas on wikipedia
need to eliminate objects in background
bezier formula
model tween as line that point follows x, y determine speed at each point
Flash 8 added Flash Image API.
bitmap color: argb (alpha, red, green, blue)
can apply masks
DisplacementMapFilter
ColorTransformMatrix
3d radian manipulation
3d skew
Transform matrix is very complex but very powerful.
Tons of examples with code at: reflektions.com
Rough Draft Notes
Jared Ficklin, frog design
Want to flatten learning curve, inspire with examples, remove barriers to entry, expose enabling technologies.
Sounds visualization: it is fun, enhance experience, increase usability
What is sound visualization. Standard visualization partial effects, are cool but you can do so much more. vectors and drawing, time line, interaction, sound engine, cell animation, rich media.
Sound is vibration. Author of flame sound visualization (Ruben Tube). Net result is what we consider digital music.
Sound terminology: wave length, period, amplitude, pitch, tone.
To visual: need sound and data. Sounds is easy, data has been hard. imported data: picture of the future. Marmalade FlashAmp.
frogDB WMP sound visual
native data: microphone object, SoundChannel.leftPeak & SoundChannel.rightPeak, SoundMixer.computerSpectrum(). In client and can be called dynamically.
active_mic.activityLevel (version 6 and above) between 1- 100.
SoundChannel: version 9, value between 0-1. current amplitude.
SoundMixer: version 9. 512 value byte array. waveform or FFT frequency and sampling rate. -1 to 1 waveform or 0 to 2 for frequency. 256 left next 256 right.
Be concerned about security. Security.allowDomain("*");
With the frequency output, there will be holes. bass 50-80Hz. vocals 200Hz-1000Khz. Snare. 10000 KHz to 30000KHz.
Need to think about frequency to make good sound visualization.
Multipliers, segmenting, and averaging to make the data useful.
50Hz per array value
Data stacked to the low end since that is what we hear most. Need to average samples on the high end and stretch out the lower end data to see real data.
Tactics:
direct interpolation: manipulate property, frame manipulation,
threshold spawning: values measured against a threshold
algorithmic spawning: funnest one: values processed and measured against rules
interaction: have user setup basis for visualization
self assembling music video
Rough Draft Notes
John Maeda
MIT Media Lab
Did a lot of old school work on a Mac
Focus on local goods. Focus on local crafts. How to marry creative folks with business outlets.
Wasn't allowed to do art. Paul Rand. ABC, Limited, Next, logos.
Media Lab. Technology lab with good branding. Muriel Cooper. Pioneer of digital graphical design space. Art director of MIT press for 30 years. Lead visual language workshop.
If you just make stuff good things will happen. Phantom relax with physical material.
Classics are waiting. Do something young. Computer is a different kind of system, it doesn't get tired.
Gone from visual range but still there on the computer. Go into infinity.
Do these things, what is it for?
program inks of page but leave it open for interaction
Inverse paint. Fixed brush, program moves.
Radial paint.
Time paint. Draw in time. Sculptural view
Reactive tools. All available on the web. Color type writer.
Tap Type Write
2001 Media Lab didn't want to run media library. Retired in 2002.
4 grad students
openstudio.media.mit.edu
interactive art studio, networked world, and how to be profitable. Creativity, collaboration, and commercialism.
opencode.media.mit.edu
Jello based processing language. All development on the web site.
E15
Take all content on the web and display it in a non browser environment. Change, modify, and organize how a user wants instead of viewing data as presented.
python code to generate 2d code onto 2d canvas. leverage ability to change things on the fly.
richer perception of time
3d browser history to view where you've been
load up a bunch of pages at once
e15.media.mit.edu (new project)
relation databases
social networking relationships
making the system easy to use
aggregating data to generate complete picture of someone online.
Rough Draft Notes
robert hoekman, jr.
Need to get user up to speed, help to get through your application.
What's this button do?
I'm feeling lucky?
suffer from a lack of explanation, or lack of context, don't install confidence
Talking about instructive text:
Using senduit as an example. (upload file and get temporary URL for that file)
Need to communicate: purpose, benefit, usage
need to keep it short
using default value in field to prompt user
show default zip code value (5, 9, 5+4)
Squidoo (create pages to market things)
inline help balloons for instructive text
command line (something that triggers action) "call to action" verb-noun pair
people don't like object based actions "page organization"
people have gotten used to dragging, almost expect it on the web. People that have been on the web a long time might not expect drag and drop may not work. Be explicit.
once over drag, cursor changes. when dragging move other modules around to show them the change.
"I'm done editing" sense of closure
Old Version of WordPress.com page doesn't have clear way to sign-up. Links hidden in text. Redesigned to big green button (contrasting color, different background) "sign up now". Jumped up 10-12%. Instructive piece more obvious.
RSS. Most web users still don't know what RSS is. Why would a user click a button that says RSS if I have no idea what this means. "Subscribe to this blog" is a better way to approach it.
Feedburner has a good approach. Creates a stylized version of your feed. "Syndication" and "content" are stuffy words. XML is a scary word.
Addthis.com has a different approach. Easy one click subscription, but doesn't help inform a user if they don't know what RSS is.
commoncraft.com/ Screencasts are a great way to explain a concept or a new idea.
BaseCamp.com: Disposable constructive element. New page has text that goes away when user performs the action.
GoogleReader for a new user has a screencast that talks about what it does with screen shots. Put a personal face on the experience.
Software for making screencasts.
Windows: Jing, TechSmith Camtasia Studio.
Mac: Jing, SnapzProX.
Flickr and most popular tag page. Size reflects popularity. No one gets tag clouds. No real life methaphor. Big doesn't mean more popular.
LibraryThing.com "What are tags" link. Very scary tag cloud page. Information overload.
NYTimes.com has explanation of tag cloud above cloud. Still a horrible interface...
miva.org
miskeeto.com (new design firm)
updownrepeat.com (The art and science of web forms)
Q: How to capture the content scrolled off the web.
Snagit (handle captures all scrolling of the web page)
Rough Draft Notes
Craig Swann, CRASH!MEDIA
Chief imagination officer
interactive toy maker
not about flash or flex or as3
want to talk about ideas
R&R=R&D blurring line of work and play
happiness is fuel of creativity
work less play more
creative cross-pollination
all about changing the way you look at things, makes the things you look at change
everything is an API, HAPI, hates the word user
listen, watch, touch, sense
ambient awareness, listen 360 degrees (built-in microphone)
visualization of microphone input, how it plays into environment design. Line in audio and.
kaleidescope video example, stop video example triggered on sound
speech recognition
watch (like a computer with a set of eyes)
motion threshold (detecting presence)
more about the idea dn how to interact with the computer.
userface (computer vision)
video difference visualization to show motion
motion mapping example, going beyond simple interactivity.
gesture based interface.
color tracking.
how to simulate mutli-touch
multi color tracking color mixing interface
time delay video across a grid
line based video delay
how to control time through the interface
video displacement of time, linear record and playback versus real-time
physical realm
IPAC (USB)
wind chimes are constantly touching tie to sound samples, virtual wind chimes
lock that can be wired up (physical control)
rings on fingers connected to wires, contact with thumb, 8 connection gives a scale
conductive paint and pencil to create interface
painting with light: litegraf
ipac on painters palette plugged into computer
many forms of control, make controller, arduino
light sensor and cover it, phidgetRFID
radio control car controller to remotely control flash
SMS sudden motion sensors
using accelerometers for physical version of breakout
monome
OSC (way to get data into flash)
midi controller
wii interface to flash and ability to play with it
try something different today
Rough Draft Notes
Marc Leuchner, Almighty
Matt Wright, ROKKAN
Everyone is working together to make projects happen. Most common sense but people aren't really calling it out.
Industry overview: Best area related to Internet. Unique people, extremely creative, lots of technologies continually expanding. FWA tracking latest and greatest. newstoday.com, Communication Arts Magazine.
Subcultures: code fiends, design junkies, framework freaks, application addicts, game gurus, usability nuts.
In larger companies: role strictly defined, objective, performance, but hard to communicate. While in a small company: roles loosely defined, absorb responsibilities, easier communication.
Can people work together? Yes if we talk and compromise.
Look at current workflow. If it is working, maybe you don't need to change anything. Some areas could be improved, need to really pinpoint weaknesses and admit your faults. Focus on opportunities to collaborate.
Education is key to working together. Need to educate each other about what you do and why it matters.
Some people don't want to change (don't force it), start with something fun. You will probably fail a few times but learn from your mistakes.
Designers: should ask for help with programming tasks to get into it more.
Developers need help with: UI design, typography, color theory, photoshop.
Brainstorming: invite everyone, technology can drive ideas, PM as moderators, open mind (no egos).
Creative Development: narrow ideas, define technologies. Need to be as clear as possible and justify. Talk about why a technology is good/bad, don't throw around buzzwords, stay open minded. Last time to argue.
Information Architecture: Don't work in a vacuum, avoid nonobjective views, run ideas by developers, keep yourself in check.
Art Direction & Design: Need prototypes, solicit developer feedback, might need to sell your idea, may require longer design.
Production and Development: After hand-off check in frequently, nit-picking is okay, way to get back to idea since translation to code may have lost something. Pixel perfect isn't always possible. Motion comps are helpful and remember that some compromise maybe needed.
Testing & QA: Not just for developers, learning experience, help prevent future issues
Project Review: discuss positives and what went wrong.
Workflow: Layer comps, motion samples, functional specs, Flex skins, separate style information, consistent folder structure.
Ted Patrick has some good articles on skinning Flex components.
Breaking communication barrier: active early communication helps build trust, respect and learn about everyone's role, don't be afraid to ask questions. Keep an open mind. Don't build barriers creates clicks and makes it hard to cross the bridge.
Middle Man: Hard to find but good for bridging the gap.
Deadlines = stress = fights. It is unavoidable but strive to work together.
nobien.net
Rough Draft of Notes
Joey Lott The Morphic Group
Main application to be styled is just using standard components. VBox, List,
Inline attribute on List: backgroundColor
This isn't preferred since you have no centralized location of what your style information is.
Adding
<mx:Style>
List {
backgroundColor: #0000FF;
}
</mx:Style>
Applies to all components. Another List in the program would also get it. To have more control you can use a style selector. Need to set it via styleName on a target component.
.exampleStyleSelector {
backgroundColor: #0000FF;
}
Why do this. Can reuse selector on any other component while keeping the style information centralized. Camel case for style names or hyphenation. Inline styles must use camel case but CSS information can use either.
Moving selector into external styles.css file via:
<mx:Style source="styles.css"/> Application { background-color: #000000; }
Precedence of style application: Type selector applied first, then class selector, lastly inline style attribute.
What to style items in the List. Going to use an item renderer. Like Cell renderer in Flash. Using another MXML component to show the list item. Gets passed a data property which contains the list item.
<mx:HBox> <mx:Image source="{data.image}"/> <mx:Text text="{data.title}"/> </mx:HBox>
Add itemRenderer="com.example.DataRenderer" to List we want to render items of. Always need to use full class name can't use class name only even if imported.
Style scrollbars with a type selector. It is using custom images for arrows.
ScrollBar {
up-arrow-up-skin: Embed('images/scrollArrowUp.png');
}
Embedding fonts can use url or local directive can be used to reference font file.
@font-face { src: url("Verdana.ttf"); font-family: Morphic; }
Styling some of the other components. Some type selectors can reference other class selector names.
TabNavigator {
tab-style-name: tabButtons
}
.tabButtons {}
VBox with nested image. Using scale 9 to control embedded image.
.framedImage {
background-image: Embed('image.png', scaleGridTop=30, scaleGridBottom=59, scaleGridLeft=30, scaleGridRight=59);
}
Programmatic skinning. Consider a general style that you want to have many variations of. Graphic assets would require unique file for each variation and increase file size. A programmatic skin let's you do it in code instead.
public class ButtonSkin extends ProgrammaticSkin { // key method to override override protected function updateDisplayList(...); if (getStyle("backgroundColor") != null) { //pikcup value } // name property of programmatic skin if (name == "upSkin") { //skin specific style } } // in css Button { upSkin: ClassReference("com.example.ButtonSkin"); }
Customizing the preloader. Make sure you only use ActionScript stuff, nothing from Flex framework since they won't be available yet.
public class CustomDownloadProgress extends DownloadProgressBar { override public function set preloader(value:Sprite):void { // progress and init_complete events } // dispatch complete event when done and application should start } <mx:Application preloader="com.example.CustomDownloadProgress"/>
scale9.com for premade styles
Rough draft of notes
Dave Schroeder, pilotvibe.
Sound is a powerful communicator
Sometimes more powerful than visual and can be misused
Design is about seeing what isn't there as much about as what is there. Design is inventive and reductive. Sound design can be dangerous.
Sound design: Voice over, sound effects, navigation sounds, ambiance, music.
Visual story-telling: on screen, off screen, non-digetic (out of story space).
Sound relationship: sympathetic, contrasting, abstract/emotive. Bad day movie clip shown with 3 different sound tracks. showing each relationship.
How plan audio in interactive. Goal of audio, time & budget, mission statement + asset list, reference points hard to talk about sound (almost like a foreign language).
Working with sound.
Music: focus on mood versus genre, creates singular/linear space, it can convey abstract things. Tempo and complexity. May focus your attention.
Voice overs: pro talent, one file = one thought, location recording (consistent background noise), inflection. Record some quick / fast and make sure it works before doing it all.
Ambiance: complete the picture, hard to find the perfect loop (build with layers instead), only need essential sonic cues. Non routine sounds can't loop. Speaking, accidents, etc.
Navigation Sounds: help user navigate and explore, focus attention on visuals, meaning derived from relationship with sound, reinforces communication goal.
Same sonic space (wet & dry sound). Reverb (delay) does a lot, helps to locate and place objects. EQ helps with that. Easier to make a dry sound wet.
Spatial sound: x: balance/pan, rising less low end, moving away less high end
Audio editing: Likes Pro Tools, important to input/export .wav, .aiff, .mp3, record to wav, high quality master files, import movies to work against
Tracks: 4 tracks of playback, separate tracks fof VOs/effects, layer sounds to ceate sounds, mock up a sound scheme.
MP3: compression is hard. Use EQ to shave off the top freqs. length is important, trim tight, respect tails. 80kpbs or higher is great, but be consistent.
Pro Tools example. Cut in middle drag end to beginning and overlap in middle with cross fade. Easier way to make a good loop.
Voice overs: Find highest peak across all files and make it louder. Normalize across all takes.
Rough draft of notes
Audience poll: Some people have done accessibility testing, but most have mot done so with disabled users.
Need to understand your users.
Accessibility is for everyone vs. technology or device. Focus on users with disabilities.
Accessibility in the real world, no technology is 100% accessible to all users. Aim to achieve best solution, maybe multiple technologies are needed. Combine Flash and HTML.
Definition of Accessible: To be able to be accessed. Want to break down barriers to accessing information.
Two main barriers:
Controls outside of Flash control: no tabbing between Flash and HTML site, wmode setting issues along with MSAA issues, MSAA didn't work with prior versions of Flash player, can't tell screen reader "I've made an update", can't set reading order on static textfields, Flash doesn't support voice over on Mac, Flash doesn't take high contrast settings on Windows.
Content and presentation barriers: stuff we build in that we need to think about (not everything needs to be accessible). Understand where the user is coming from. Screen reader users probably can't use mouse, need keyboard control.
Disability categories (these are all muddy and shouldn't be a taken as hard and fast):
visual (color blindness biggest issue), audio, motor, cognitive (good understand, foreign language).
Legal and General UK case study of accessibility and ROI.
Color and contrast (don't care about colors, need to distinguish content). Showing contrast demo with memoriaduo.com. Mac system settings has built in contrast control. Some tools available on other platforms. Don't talk about a color without a non-color cue ("Click on the green button") Provide tools to switch within your application if possible.
Size: Provide mens of controlling font size.
Keyboard Access: Provide logical structure. Flash accessibility dialog (easily set tab index). Focus highlighting is important if you have keyboard controls. Shortcuts make sense if someone is going to be using the site multiple times. Non visual users need to have them explained.
Audio: Provide textual or graphics of audio information. Using weebls-stuff.com videoas an example. Text on screen of audio lyrics. Harry Potter website is another good example.
Screen reader access: Auto next doesn't force update. Yahoo developer network has videos about screen readers and explanations from blind users and screen magnifier example. Set the name of buttons for non text buttons. Flash auto labels textual buttons. Specify reading order (tab index). Avoid using wmode.
Demo of Inspect tool part of Microsoft accessibility suite to show what is being sent to screen.
swffix.org Going to be best embedding technique, currently in public Alpha. Will replace SWFObject and UFO joint project.
http://www.adobe.com/accessibility/
http://blogs.adobe.com/accessibility/
How big is big enough for font size: Niqui recommends minimum of 11 or 12 for Arial. Font and context specific.
Standalone player and AIR don't communicate with MSAA.
Flash vs. AJAX accessibility. Flash is more accessible by default. osflash.org has AJAX aid which detects virtual buffer refresh. Easier to control visual output (contrast, fonts, etc.) in Flash.
Flash components can destroy tab ordering. Something on stage that that isn't labeled will throw off tab order. Best to set tab enabled to false.
Rough draft of notes
Aral Balkan is talking about SWX.
Some post lunch jumping to capture a room of a full of people in the air yelling SWX.
Aral likes to consult, speak, and teach about user experience design, development processes, and software architecture. Works primarily with Flash, Flex, and a focus on open source. Founded osflash.org. Currently working on SWX.
What is SWX: new and native data format for Flash platform. Like JSON which is data in JavaScript. SWF is the native format for Flash. Want to put data in a SWF.
Terms:
SWX: Native format for Flash.
SWX RPC: RPC protocol encoded in SWX.
SWX PHP: PHP backend for SWX.
SWX Tools: Service Expolkire
SWX AS Lib: Optional, high-level AS library that handles SWX RPC calls.
SWX APIS: APIS for Flickr, Twitter
Public gateway: Open SWX RPC endpoint
Why SWX: Issue with existing data formats.
loadVars, loadVariables: deserializing string is complicated, it's plumbing, should be handled for you
XML: What data structure is being loaded, first child, last first, what child
Remoting: Created SWX because of remoting. Go to Adobe and search for remoting classes. Barrier of entry is too high. Doesn't work with Flash Lite.
SWX just works. SWX is easy. swxformat.org
Demo of Services Explorer: Test services installation of PHP SWX Services.
Launch Data Analyzer, Launch Flash, AS 2 FLA: Create MovieClip named loader, In actions panel:
loader.serviceClass = "Flickr"; loader.method = "swxPhotosGetRecent"; loader.debug = true; loader.loadMovie("http://swxformat.org/php/swx.php", "GET");
Data Analyzer has data that was returned. Creating second MovieClip called image:
// hack to get things up and running, see if it works function onEnterFrame() { if (loader.result) { image.loadMovie(loader.result.photo[0].src); onEnterFrame = null; } }
swxformat.org/faq/ for information about Flash IDE Sandbox warning issue
swxformat.org/download (SWX ActionScript library) comes with classes and examples.
import org.swxformat.SWX; var swx:SWX = new SWX(); swx.gateway = "http://swxformat.org/php/swx.php"; swx.debug = true; // got rid of loader MovieClip var callParameters:Object = { serviceClass: "Flickr", method : "swxPhotosGetRecent", result: [this, resultHandler] } swx.call(callParameters); function resultHandler(event:Object) { trace("Hello"); var imageSrc:String = event.result.photo[0].src; image.loadMovie(imageSrc); }
Currently this only works with AS2.
How to create your own service side class. SWX MAMP Bundle to work with PHP on a Mac allows working with things easily. One click run on Mac, just download ZIP for Windows or Linux if you have a running web server with PHP.
HighScores.php SWX services example
<?php class HighScores { function getNames() { return array('Branden', 'Mario', 'Chafic'); } } ?>
Changing example from above:
swx.gateway = "http://localhost:8888/phph/swx.php";
serviceClass: "HighScores",
method: "getNames",
// updated resultHandler
var names:Array = event.result;
for (var i=0; i < names.length; i++)
{
display.text += names[i];
}
TextField component called display
FlashLite 2.0 and 2.1 are supported.
Showing demo of miniflickr using CS3. Trying to demo it on his Nokia N95 (couldn't get network).
Showing application with SWX that pulls Twitter data.
SWX Ruby (Locomotive one click Mac installer for Ruby)
creating swxrpc ruby application. Line of code to install SWX Ruby.
Showing example using Ruby service, same loader calls.
SWX uses: Mashups for Flickr, Twitter, Jaiku, Numpa, Nabaztag, etc.
Flickr API: current, MIT license, upload, actively maintained
Mobile applications: Limitations no POST. DeviceCentral doesn't support LocalConnection.
Games, Kiosks, CDs, Wrap it with AIR (Twimpa is an example)
SWX has a showcase on swxformat.org
AS2, Flash 6+, Flash Lite 2.0, 2.1 Mobiles, Wii, PS3, PSP, Chumby
Soon: AS3/Flash 9
Roadmap: Writting RFCs for SWX and SWX RPC, bundles for other platforms, more APIs.
nabaztag.com
Due to a scheduling conflict the time of my talk has been moved up a slot. The new details: Grand Ballroom, Salon E: Friday, September 21, 2007 1:30 PM-2:45 PM.
Rough draft of notes
Flickr tag with flashforward
Kevin Lynch from Adobe
Pushing Flash forward with AS3. Complimentary copies of Essential ActionScript 3.0.
With FP9 and AS3: E4X, regular expressions, strong and lose typing.
Inside Tamarin is the Virtual Machine within FP9. Core of VM has been opened sourced to Mozilla. 10 times speedup in FP9. Also have this is as the scripting language for the web. FireFox and Flash Player 9. ECMAScript standard. Includes Just-in-Time compiler.
Showing RSS XML data and E4X possibilities:
feed.channel.title.text()
feed..title.text()
feed..item[1].text()
feed..item.(@id =="82").title.text()
Power of regular expression.
Showing comparison of AS3 and JavaScript 1.7. In general 10 times faster.
Flash Player adoption. Fp7 70% in 1 year, FP 8, almost 90% in one year, FP 9 90% in one year.
Picnik. Online photo editing. Zoom, rotate, alignment, color editing (saturation, temperature), sharpness, real-time editing.
Joshua Hirsch from Big Shapeship (Digital Creative Agency) talking about HBO.
8 apartments single building, like no walls. Projected onto side of building. Watch on-demand on digital cable. Also put the web.
HBO Voyeur. Using papervision for 3d effects. Full video.
Kevin: Adobe is focusing on digital technologies. Video workflow from creation to distribution. Adobe media player to view video on desktop.
H.264, multi-core cpu, full screen hardware scaling, bitmap downscaling, secured delivery of streaming video. IPv6, ISO video standard video camera, personal media players, set-top boxes, tvs. FP9 being updated to include H.264 code named Moviestar.
HD Video Demo. Releasing soon, new component for CS3 to use H.264 right in Flash. CSI HD video example. 70% of web video is in Flash.
Papervision example with multi-core speedup.
Adrian Ludwig talking about Flex. Already two versions of Flex. Currently working on Moxie. Language intelligence, profiler, visualization, workflow.
Flex is moving to be open source. bugs.adobe.com. Profiler demonstration. Memory usage. Object creations. Snapshot of application. Application is running faster than he expected (had to muck code). Zoom in on method that is taking a long time. Who was calling.
Showing refactoring example. Method rename. Workflow speedup.Sample application is using charting controls. Advanced data grid, has per column formatting.
Flex perceived as too big. Flex framework cache. Download framework code only once.
Kevin back talking about AIR. Flash, PDF, and HTML. AIR platform overview.
AIR sample applications. AIR Samples.
Showing badge install process. One click to install AIR and your application. PixelPerfect example.
artMusheen. Paint with shapes example. Native chrome.
digimix, mixing audio.
Finetune. Streaming music on your desktop.
Buzzword. Word processor. Edit locally or shared thorugh a cloud. Lists, tables, pictures, graphic editing. No drag'n'drop support out of the box yet.
Flickair searches Flickr for photos, nice chromeless application.
CS3 extension for Flash to just package application as AIR, should just work.
If you are interested in using the Flex automation features, this is a collection of links which might be helpful:
On Friday I attended the on AIR bus tour in Boston. It was a free one day conference primarily sponsored by Adobe. The conference focused on getting people introduced to the AIR platform. While I was already familiar with most of AIR's capabilities I thought it would be a good opportunity to network with other Boston developers and meet a bunch of people from Adobe.
The last session was a collection of quick demos from the speakers and audience members. My apologies in advance if I missed your contact information.
Todd Prekaski (audience): Demoed a photo album builder application. Allows pulling in pictures from the local file system. Has some integration with Flickr and zoomr (wasn't completely clear on what that functionality was). Has random photo placement mode for viewing a collection of pictures. Has ability to email collection to contacts. Hopes to add online synchronization to pull down additional image presentation components (stylized borders, filters, etc.). Tool also supports photo resizing, rotation, and other simple effects.
Daniel Dura: TwitterAIRCamp is a way to do a nice public presentation of Twitter data. If you want to get in on the fun onairbustour is the Twitter name.
Salsa created by Christian Cantrell. Application that does drag and drop file uploading/downloading to Amazon S3.
Johnny Boursiquot (audience) from Pier: Business value calculator being used by companies like HP. Goal is to make sales people mobile and allow offline ROI value calculations. It uses Flex charts, graphs, and HTML output (will switch to PDF when supported). Took approach of what is the business value of AIR. Primary reasons for going with the platform included: way to extend backend service onto the desktop, easy to update, and online integration allows robust security model.
Kevin Hoyt demoed some more applications from Adobe labs. He created an AIR version of MapCache. Allows saving maps, copy to clipboard, and drag and drop. Rendering an HTML version. Mentioned source is on his site.
Geocode allowing geo tagging an image by dragging it onto the map. Still working on this application. Again an HTML/JavaScript application. It handles such activities as copying images, extracting thumbnails, and displaying the images in the UI. Makes heavy use of asynchronous events to do it on the fly without hanging the UI.
Kevin also ported a version of Ted Patrick's AIR Chat to HTML/JavaScript. The application uses Amazon EC2, running Python socket server, to provide simple chat services. The port uses the Ext JS Framework. HTML version is not posted yet.
Mike Chambers: Is a World of Warcraft player and uses Wowhead to track game information. Wrote an AIR wrapper around Wowhead. It is an always on top window that allows typing in a search term and launching the results in a browser window.
Hubble: Geo tagging image uploader for Flickr. Shows where images are located on the map. Nice UI to geo tag and upload. Can drag image onto map to tag it with drop location. He mentioned that the application is fairly buggy right now.
GeoPlotter: Show a Yahoo map and you can plot any latitude longitude pair on the map. Supports ability to drag a data file of way points and plot them all on the map. Most of his code is on Google code.
Ascension: One of the first AIR applications. It is an MP3 player and way to explore your music. Supports importing your music from iTunes, grabbing album art of Amazon, and displaying lyrics from lyricwiki. Has ability to display a slide show of images from Flickr that match the artist's name.
Mike Chambers gave a talk about some of the technology being used on the tour bus. Using AIR applications to help track the location, what is going on, and display the information on the web.
Code for all the applications is available from Google code.
AIRTracker: Application that gets GPS info periodically and posts it to the server. The AIR application is passed the GPS coordinates via command line arguments. Uses a program called GPSBabel to get the GPS information. Command line arguments are handled through an invoke event.
Shell.shell.addEventListener(InvokeEvent.EVENT, handler);
If your application is already running, the handler will get called again with the new arguments. The application queues up GPS point data to handle server up/down and connection online/offline. Stores them in a local file using binary serialization of the AS3 array. It waits for ACK from server before removing data from the array. In order to serialize the custom class in the array you need to add metadata to the class.
[RemoteClass(alias="com.adobe.onair.geo.GeoPoint")]
He pointed out that there is no compile time checking so you could type the class name wrong. Showed an example using SocketMonitor to do a low level check for connectivity. The application demonstrates a common pattern of queuing and saving data locally and pushing the data up to server as connectivity is available. Handles both connectivity issues and application crashes. Shows a good robust application. Application and server interaction is easy since there is a single source of data which removes the need to handle conflict resolution.
He next showed pictures of the hardware on the bus. The hardware for grabbing the GPS coordinates was a Garmin GPS 18, which is a hockey puck sized device that attaches to the top of your vehicle.
AIRSnapshot: Application that every minute takes a picture (JPG format), geo encodes it, and uploads it to Flickr with appropriate tags. Application shows handling bigger data and multiple queues. It has to go to the server twice, first to upload the picture and a second time to add the geo tags.
flump: Application that downloads all of your raw Flickr images. Used this to pull all of the pictures from the bus and put them together into a movie available on The Flex Blog.
Audience asked about using AIR to broadcast a live video stream, which sounded like it was possible.
Andre Charland from Nitobi gave a talk about AJAX in AIR.
Why is AJAX in Air a good thing: code reuse, skills reuse, HTML is really good at some things, and maintaining existing UI patterns.
He talked about the benefits AIR gives over browser. This was a quick rehash of the list from the AIR API overview.
He showed an AJAX Fisheye Menu Example. Demonstrated that the same AJAX code works in a browser as in an AIR application, very little code shown.
Offline Saleforce.com demo. Showing online/offline sync capabilities. No code shown.
MultiVista: Construction document management application. Showed dragging and droping pictures from desktop into application as an alternative to uploading through a browser dialog. Directory scan to keep folders in sync. No code shown.
Thierry Curis from Akami gave a talk about using Flash Video in AIR.
Akami is creating an open source connection class (main site) that is robust, lightweight, and flexible, with credits to Will Law. Pure AS3 code. Setup to handle on demand content and protocol detection.
He gave a demo using the AkamaiConnection class to show streaming content. Some sample code is below. The complete source is available.
public function init():void { var ak:AkamaiConnection = new AkamaiConnection(); // Some of the setup properties ak.createStream = true; ak.maxBufferLength = 5; ak.useFastStartBuffer = true; // Some of the events // handle connecting to the content ak.addEventListener(AkamaiNotificationEvent.CONNECTED, connectedHandler); // handle network connection going online/offline ak.addEventListener(AkamaiStatusEvent.NETCONNECTION, netStatusHandler); // know when the length of the stream becomes available // read it through the ak.streamLength property ak.addEventListener(AkamaiNotificationEvent.STREAM_LENGTH, streamLengthHandler); // where the stream is located ak.connect("hostname"); } public function connectedHandler(event:AkamaiNotificationEvent):void { var video:Video = new Video(); video.attachNetStream(ak.netStream); ak.requestStreamLength("filename"); } // once enough content has streamed ak.play("filename"); // methods to control the playback ak.resume(); ak.pause(); ak.seek(#);
Daniel Dura gave an overview of the AIR APIs.
Air provides a rich stack of APIs that is available to both Flash/Flex and HTML and runs on multiple platforms. These APIs cover: network detection, file I/O, custom window chrome, multiple windows, native menus, drag and drop with clipboard, system tray and dock notifications, application signing, application icons, file type registration, background applications, application updates, and network support.
He next drilled into some of the above areas in more detail. AIR specific classes are included in the Flex 3 documentation available on LiveDocs.
Windowing: Multiple window support, transparent windows, different window types (lightweight, utility, and standard), z-index ordering, and always in front.
Pixel Perfect: Alpha window overlay that shows width and height with no standard window chrome.
HTML Control: Integrated into Flash rendering pipeline (can apply effects to it), script bridging, and override default behavior (navigate, history, window, resize).
File I/O: Full read/write access, native file dialogs (save, select, select multiple, directory), and Async and Sync APIs.
Database: SQLite embedded database, zero setup, single file, and based on SQL92.
Drag and Drop/Clipboard: System level drag and drop (AIR to AIR, AIR to OS, OS to AIR, etc.), multiple formats (URL, files, text, serialized AS objects), and modifiers (link, copy, move). Drag and drop is handled through TransferableData objects.
Application Icons: No feed to know about icon format, can just supply PNG images.
Service Monitoring: Monitor network interface changes, monitor services, and extensible (supports multiple service types). URLMonitor class is one example.
Flex Builder: Debugging, code hinting, packaging, and application signing.
j r conlin gave a talk about What can Yahoo! Do For You?
Yahoo Developer Network provides lots of tools, largely free to use, with Flash/Flex specific content. These include: Maps, Search, YUI, Flickr, del.icio.us, Upcoming, Pipes, MyBlogLog, BBAuth, YSlow, Astra, etc.
YUI: Lots of widgets that you don't have to build. Calender, grid, etc.
Pipes: RSS type mashup capabilities for non programmers.
AirMail: Drag and drop mail application written in AIR (not public yet).
Astra: YUI for Flex developers, BSD style license.
Chafic Kzoun gave a talk about how to use Native Windows with AIR.
He showed a bunch of simple examples which demonstrated the native window capabilities in AIR. Best was a screen size tester called PixelPerfect available from Adobe Labs.
NativeWindow is the core of what you will work with. Keep in mind Window is also just a class. Some options need to be setup before the window is created, while others are runtime properties. This is why the AIR application descriptor forces you to specify certain options.
// Create a simple utility window and display it var options:NativeWindowInitOptions = new NativeWindowInitOptions(); options.type = NativeWindowType.UTILITY; var nativeWindow:NativeWindow = new NativeWindow(true, options); nativeWindow.activate();
A more complex example that uses more options.
package com.example { import flash.display.NativeWindow; import flash.display.NativeWindowInitOptions; import flash.display.NativeWindowSystemChrome; public class StandardWindow extends NativeWindow { public function StandardWindow() { var options:NativeWindowInitOptions = new NativeWindowInitOptions(); options.systemChrome = NativeWindowSystemChrome.STANDARD; options.maximizable = true; options.minimizable = true; super(true, options); alwaysInFront = true; title = "Custom NativeWindow"; } } }
Many options available with the NativeWindow API, best to look at the documentation. "bounds" gives you lots of flexibility. Lots of good events (resize, move, moving, etc.)
The Window component is a wrapper around the NativeWindow. Flex provides an out of the box chrome with standard minimize, maximize, and close buttons and adds a status bar. Can be easily used in MXML. Use open() after creating the instance instead of activate() like you would with a NativeWindow. The showFlexChrome Window attribute can turn off the default Flex chrome. The Window class also provides access to the native window through its nativeWindow property.
<?xml version="1.0" encoding="utf-8"?> <mx:Window xmlns:mx="http://www.adobe.com/2006/mxml" systemChrome="none" showFlexChrome="true" showStatusBar="false" transparent="true"> </mx:Window>
The Screen singleton gives you access to information about the users' monitors. Has support for multiple displays along with supplying sizes and capabilities. Screen.mainScreen.visibleBounds will return visual area that is available taking into account task bar or dock (doesn't look like this is working in the current AIR beta on the Mac).
The Flash CS3 AIR update allows you to export and run your Flash application as an AIR application.
Charles Freedman gave a couple of demos for Saleforce.com and Ribbit.
Salesforce provides a set of AIR specific classes to ease creating RIAs which leverage the data in Salesforce. AIRConnection.as is the main class which provides a layer between Flex and the AIR database which is based on SQLite. Looks like registration is required to get access to the toolkit.
Showed an example of how to use the AIR URLMonitor class to detect online and offline status. When online the sample application pulls data from the online database and caches it locally. Can then run queries against it and queue updates while offline.
Fully functional Flex based phone that allows adding telephony to any web page. Online version allows you to listen and read voice mail (they do some speech recognition). The AIR application downloads your call history to allow displaying it offline. Didn't feel like a convincing use of an offline application since it didn't look like it cached voicemail (even the transcribed version). He gave a live demonstration of calling someone in the audience.
developer.ribbit.com has developer tools.
Kevin Hoyt is back with a second talk about how to integrate ActionScript with JavaScript within a single AIR application. Currently on the web you have an HTML page and throw in an embed to display some video, but it is a black box. Likewise a Flash application is mostly not interacting with HTML at all. Script bridging is the magic that makes it all possible.
He showed a simple Flex application with a location field that loads and displays an HTML page within AIR. Currently AIR can't display Flash embedded in an HTML page that it is rendering. That should be supported in a later beta.
AIR has a Flex tag called
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:TextInput id="input" enter="web.location = input.text;"/> <mx:HTML id="web" width="100%" height="100%"/> </mx:WindowedApplication>
In ActionScript you have full access to the HTML object and through it access to all JavaScript like functions such as getElementById. To read an HTML value in ActionScript:
// Read an HTML text field var name:Object = web.javaScriptDocument.getElementById('txtName').value; // Update an HTML text field web.javaScriptDocument.getElementById('txtName').value = "text";
Data comes back as a JavaScript String, which doesn't map directly to an ActionScript String. The returned value should be stored as an Object. He didn't mention about gotchas when going in the other direction.
Next he showed how to use native drag and drop. The example took a desktop image and droped it on the Flex application. NativeDragEvent and friends let you handle the drag and drop. Once the Flex application got the image, it introspected the HTML and replaced all images in the rendered web page with the dropped in image.
The next example showed how JavaScript can leverage and manipulate ActionScript. JavaScript developers should consult the Flex 3 SDK documentation to know what is available and what packages the classes are in.
The application's back story is about wanting to display the user's version of an icon for a specific file extension. Showing a sample from the core in the Aptana (source available) that knows how to determine and show the custom icons. OS returns an Array of different icons. The example uses PNGEncoder in ActionScript to render the information. HTML can include ActionScript libraries by specifying the SWF as the script source.
<script src="library.swf"></script>
The last example was showing that HTML rendered in AIR can be manipulated by Flash. It loaded a simple HTML page and then applied Flash filters to various divs. Really cool capability. No source shown.
Kevin Hoyt gave a talk about how to use the AIR SDK to develop an AIR application using HTML and JavaScript.
The AIR SDK includes:
Binaries:
adl: Launcher for AIR applications
adt: Packager for AIR applications
Frameworks:
AIR Aliases: shortcuts for HTML development
Service Monitor: ability to detect if you are online or offline
Application descriptor template, code samples, and badge packager and source are also included. Currently 4 clicks to install and launch an application from a website using the badge process.
HTML Main Application:
He created a standard HTML file and saved it as index.html (not a requirement to be named index.html).
From a terminal running the adl command with -help will give you information on the command line syntax. Besides launching your application, adl can also pass command line arguments into your application.
He created an application descriptor from the template. Import difference from the Flex example was to set the rootContent to index.html. Descriptor also supports fileTypes which lets you associate a file extension with your application.
WebKit will include CSS3 support.
DreamWeaver has extensions that suppy AIR capabilities. Can launch applications and edit descriptors from within DreamWeaver.
He added an HTML text form field and button. Created an event listener which is registered as part of a body onLoad function. The first version of the event listener function popped up an alert to test that everything was working. Next he pulled the text form value out and saved it to disk.
In JavaScript, the rough code is:
var file = window.runtime.flash.filesystem.File.desktopDirectory.resolve('boston.txt'); // If you include AIRAliases.js this can be shortened to var file = air.File.desktopDirectory.resolve('boston.txt'); // Now that we have a file reference: var stream = new air.FileStream(); stream.open(file, air.FileMode.WRITE); stream.writeMultiByte("text", air.File.systemCharset); stream.close();
The AIR API also has support to read and write in an asynchronous mode using events.
Aptana: Open Source Eclipse IDE for JavaScript/HTML development and debugging. Includes built in support to run and package AIR applications. Best part is the sample applications that come bundled with it. Meebo directory includes custom HTML chrome application example.
Mike Chambers gave a presentation about building your first Adobe AIR application with Flex.
A quick poll of the audience showed about 60% of the audience develops with Flex/Flash and 40% develops with HTML/ColdFusion/PHP.
For the demonstration he used the Flex Builder 3 Beta to create a sample application. This version has native support for AIR applications. You can extend the beta by using your Flex Builder 2 license key.
There is an included Flex AIR project wizard. Creates an Application.mxml (Flex Code) and Application-app.xml (metadata) file in your project.
The Metadata file is well commented, but he called out certain values:
appId: Used to distinguish each application, only used internally by the installer process. Next beta will using code signing to handle identifying applications.
name: Application name as it is displayed to the user and used by the OS to display the application in the process viewer, etc.
title and description: Name and description shown in the AIR installer.
rootContent: Most important tag. Defines what and how your application gets launched. "systemChrome" is standard or none, it toggles native window chroming. "transparent" determines if the background of the application is rendered or not (use this to create non standard chrome). "visible" determines if your application is visible when it launches. Flex Builder has special syntax for the rootContent text, but in most cases it points at your Application.mxml.
The main application code works like a standard Flex application:
Using design view he quickly threw together the application. In this case it was just a simple button. Primary change for a standard Flex application is that the root MXML tag is WindowedApplication instead of Application. WindowedApplication gives access to native window APIs. With Flex Builder you can easily run and/or debug your AIR application. The work flow is similar to a Flex application.
Packaging your application:
Badge based install process which can install both the runtime and your application all through a single website click. Flex Builder includes the ability to export your code as an AIR application. Dialog lets you select which files get included. Currently there are some cryptic errors when you don't include required files which should be fixed by the next beta.
In descriptor file you can specify application icons:
Give AIR an PNG file for your application and it will handle making it work on all the different platforms. Back in the metadata file uncomment the icon block and set just the 128x128 icon and the others are taken care of. Icons aren't required, but they add polish.
Doubling clicking exported .air file launches the installer. Still tweaking install dialogs. Under the hood it sets up everything needed to run the application. On Mac it gets installed into the user's application directory (this may change). Looks and acts like a native application.
Other Resources:
Apollo for Flex Developers Pocket Guide: Released under Creative Commons License.
Adobe Integrated Runtime (AIR) for JavaScript Developers: Released under Creative Commons License.
adobe.com/go/air/: Best link to get started.
onair.adobe.com: All of the sessions from the tour are online in video format (recorded at various stops along the tour). Code created on the bus is available on Google code including media assets. They are also publishing different data feeds that people can play with.
Ryan Stewart gave the keynote as part of the on AIR Bus Tour here in Boston.
Adobe has primarily become a web company. Flash penetration is happening quickly, Flex is gaining ground, and other standards like PDF are being used everywhere.
Adobe has lately been focusing on: Runtime Performance (AVM2 and AS3), Development Model (Flex and Flex Builder), and Desktop Runtime (AIR). I'd also add that the CS3 enhancements for Flash/Flex sharing are another great example of recent improvements.
AIR is focusing on existing standards. Gives the ability to create an AIR application without needing to touch Flash at all, can be entirely HTML and JavaScript. The real advantage of AIR is the tight integration, like having JavaScript call Flash and vice versa. One of the key technologies included in AIR is WebKit, the same HTML rendering engine behind Safari. Better support for PDF will be included in later AIR releases.
AIR enables desktop interaction through AIR specific APIs for accessing the file system, network detection, notifications, application updates, drag and drop (with the host OS), and local databases using SQLite. More details in the AIR API Overview.
AIR support is currently only for Mac and Windows. Linux version should exist after 1.0 release. I think not having Linux out of the gate is sad, but nice to know they do have a road map which includes intended support for it.
Next up were a bunch of demos showing AIR applications. Some of them extended an existing website down to the desktop to make interaction easier and provide capabilities not available in a browser only experience.
finetune.com: Site is a combination of AJAX and Flash. AIR application extends music capabilities onto the desktop. Able to reuse most of the code. Hook into iTunes XML file to drive what music it will play. Shared profile information between website and desktop.
pownce: Micro blogging website. AIR application allows sending data by dragging and dropping it from the host OS. Website is in AJAX but they wrote the AIR application in Flex to provide additional flexible.
simple tasks: Quick AIR application thrown together using HTML and JavaScript.
buzzword: Still in private betas. Originally build in Flex as an online word processor. Created an entire text rendering engine in AS3 (possible because of the speed of AVM2). Document sharing, comments, fully WYSIWYG editing, and online/offline synchronizing.
Adobe Media Player: New way to deliver video content to users through channels.
airapps.pbwiki.com: Registry of publicly available AIR applications. People are encouraged to add links to their application.
At the upcoming MAX conference (more information below) Adobe will release Beta 2 of AIR and announce the winners of AIR Dev Derby contest. There is still time to enter the derby, deadline September 5, 2007.
If you can only make it to one conference, the MAX conference September 30 - October 3, 2007 in Chicago is highly recommended.
I'm going to be speaking at the upcoming MAX about Continuous Integration with Flex, FlexUnit, and Ant. The talk description is:
Learn about tools and techniques needed to get continuous builds, integration, and testing running with a Flex project. I'll cover the fundamentals of build and test automation, the popular open-source Ant build tool, setting up and running FlexUnit tests from the command line, and integrating the entire process into an automated build system. I'll also demonstrate Antennae, a publicly available set of templates for building even very complex Flex applications using Ant.
If there are particular topics that you'd like to see covered let me know.
A problem I've run across a couple of times when moving a component from one parent to another is the following error:
RangeError: Error #2006: The supplied index is out of bounds. at flash.display::DisplayObjectContainer/getChildAt() at mx.core::Container/getChildAt() at mx.containers.utilityClasses::CanvasLayout/measure() at mx.containers::Canvas/mx.containers:Canvas::measure() (... some of stack trace deleted ...) at mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher2() at mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher() at [renderEvent] at [mouseEvent]
You'll notice that the stack trace is nothing but framework code. An error in a callLater that I didn't make? The problem is simple. When moving a component from one parent to another you have to call removeChild() on the current parent before calling addChild() to attach it to the new parent.
Continue reading "RangeError: Error #2006: The supplied index is out of bounds." »
I'm pleased to announce the release of Antennae version 1.0000. This is the first release since Antennae was migrated from Joe Berkovitz's blog up to Google Code. You can access the project at http://code.google.com/p/antennae/. This release includes a bunch of tweaks and new functionality. For those that are not familiar with Antennae it covers:
This release is primarily aimed at getting the tools out there for public consumption. Future releases will focus on additional documentation and other ways Ant can help automate your Flex builds. Please let us know what other improvements you would like to see.
I'm going to be speaking at the upcoming Flashforward Boston about Automated Flex Building and Unit Testing. The description hasn't made it up onto the site yet but is roughly something like:
A talk focusing on tools and techniques needed to get continuous integration running with a Flex project -- that is, ensuring that at any given point in time, your application is buildable and free of errors. I'll cover how to automate the build process with Ant, setting up and running unit tests both interactively from the command line, and integrating the entire process into an automated build system. All tools used are open-source and publicly available.
If there are particular topics that you'd like to see covered let me know.
At the recent BFPUG Design Patterns Meeting I gave an overview of Inversion of Control. Unfortunately due to time constraints I wasn't able to also put together a compelling example and as such I won't be posting the lame example I did put together. Instead I'll point you to an example that demonstrates the concepts and gives you something more to play with.
The ReviewTube source contains an example of IoC. The main file to look at is "com/joeberkovitz/reviewtube/services/ReviewTubeComponents.mxml" which is pulled in from "ReviewTube.mxml".
Sometimes you want to change the behavior of a Flex component but its hidden behind a private method or variable so you can't subclass it. Thankfully they provide the source so you can just create your own version. This is heavy handed and in some cases you just need to tweak things a little. Many components within the Flex framework have methods and properties flagged as mx_internal. These you can access without having to do anything too funky.
I recently had an issue where in Flex 2 I had to load and play a Flash 4 SWF that had embedded sound in it. I'm not a Flash developer so I'm not 100% sure if the sound was encoded as an event or what have you. In any case as soon as the SWF was loaded it would start playing and it would loop. Since Flex 2 uses Flash 9 the Flash 4 SWF shows up as an AVM1Movie when loaded which means you can't do much of anything to the movie once it's loaded. Most annoyingly the sound keeps playing and playing.
Problem 1: How to stop the sound?
The only fix I found was to call SoundMixer.stopAll();. Drastic, but it worked.
Continue reading "Stopping Flash 4 SWF with Sound in Flex 2" »
The Flex world is abuzz today with the announcement from Adobe that the next version of Flex will be released as open source. While the Flex SDK already includes the source for the Flex framework components, this change will also provide the source for the compiler, debugger, and other SDK pieces. Moving forward Adobe also hopes to add community driven sub-projects and even allow people from the community to commit directly to the platform. A public bug database and repository will be part of the initial roll out with additional features being rolled out later. More information is available on the Adobe site.
When testing components that have asynchronous behavior you need to use FlexUnit's addAsync() method in order to correctly handle the events that fire. The reason for this is that unless you tell FlexUnit that you are expecting an asynchronous event, once your test method finishes FlexUnit will assume that the test is done and there were no errors. This can lead to false positives and annoying popup error dialogs with an assert fails. Below are some examples of how to use addAsync().
I'll start off with what not to do so you can get an idea of why you need addAsync(). Let's write a simple test that verifies that the flash.utils.Timer class fires events the way we think it should. The first attempt might look like this:
Recently I found myself refactoring an MXML component into an AS base class to make it easier to provide multiple views of the data. I wanted to factor as much of the code as I could into the base class including some of the bindings. While I've known for some time that Flex has programmatic binding support I'd not had a real use for it until now. The documentation is reasonable but I think I couple more examples would have helped. Below is a sample binding and the corresponding programmatic equivalent along with some gotchas.
Take an example MXML component that has a model Object set on it. The model exposes an enabled flag which the view needs to respond to in a complex fashion, beyond just disabling itself. If you want you can also replace the setter with a variable in these examples and it all works the same. It might look something like this (a bunch of code has been removed to focus just on the binding):
The Flex documentation is a a little misleading in regards to the RegExp Constructor. Livedocs has this to say:
public function RegExp(re:String, flags:String)Lets you construct a regular expression from two strings. One string defines the pattern of the regular expression, and the other defines the flags used in the regular expression.
Notice the lack of a default value for the flags argument? One would think that would mean you should get a compilation error if you don't supply both arguments to the constructor. However, both of these compile without error:
var regExpA:RegExp = new RegExp("^http://www.google.com/(.*)$"); var regExpB:RegExp = new RegExp("^http://www.google.com/(.*)$", "");
I would expect the first one to cause this error:
1136: Incorrect number of arguments. Expected 2.
Often when refactoring code I'll extract ActionScript code out of an MXML file into an ActionScript based superclass to get a cleaner separation between logic and the view. In doing so I sometimes forget to update MXML variable declrations, leading to the confusing error:
Could not resolve <mx:states> to a component implementation.
Continue reading "Could not resolve * to a component implementation." »
In some recent coding I was playing with a custom type system and needed to add some type checking to it. What this means is that at some point I need to verify that some object is really the type I think it should be. Normally when you are coding in AS3 and need to check a type you do something like:
I couldn't find much official documentation (if you have links please pass them along) about static initializers in ActionScript 3 so I thought I'd put together a little quick reference. A static initializer is run once when a class is first loaded by the AVM. The typical user of such a block is the compiler, which uses it to assign values to static variables of the class. You also can use it to do more complex static object initialization. The example that I needed it for was to create a lookup object based on constants defined in the class. Consider a class that defines some handy constants:
package com.example { public class MIME { public static const GIF_MIME_TYPE:String = "image/gif"; public static const JPG_MIME_TYPE:String = "image/jpeg"; public static const PNG_MIME_TYPE:String = "image/png"; public static const SWF_MIME_TYPE:String = "application/x-shockwave-flash"; } }
In most object oriented languages you can cast an object to something more specific in order to be able to call methods particular to the type it was cast as. This frequently comes up when you have a rich class hierarchy and for some reason can't use polymorphism to separate out behavior or more commonly have a factory like method that needs to take in a bunch of different object types but always return the same type. Since AS3 doesn't support method overloading you can't easily separate out the different object types into specialized methods and instead end up with a big if then else block.
My issue with AS3 comes in with the fact that in such as if then else block you can't easily cast primitive objects without getting some funky behavior or without needing to wrap your cast in order to detect errors. I'm sure that there are some techniques out there to avoid this issue entirely, but having now seen it come up more than once I figured I'd jot down my observations on the issue.
One of the features that I really like about AS3 is its support of closures. There are many instances when you want to do something to an argument but don't really need or want a full blown class to encapsulate the logic. Lately I've been trying to apply this approach to event listeners and in general it just works. My problem can up when I wanted to have the event listener run only once or stop listening after some point in time. Since the removeEventListener method requires a reference to the listener that you want to remove and the listener in this case is a closure I need a way to get a reference to it. Thankfully closures provide a way to do that but it requires introducing another variable into the mix. Thankfully ActionScript provides another way to get access to the same information arguments.callee.
Arguments is a variable available in every function that is automatically supplied by the system. It is the older style of getting access to the arguments of a function that takes in an arbitrary number. In this case though the callee also gives you access to yourself. In the case of an anonymous event listener, this is all that is needed to remove it as an event listener. Now for the example:
If you didn't catch Joe Berkovitz's talk at MAX 2006 about an architectural blueprint for Flex applications, it is now posted on Adobe's Flex Developer Center. Joe is the Chief Architect of Allurent, where I work. It is a great read and introduces the concept of Model, View, Controller, and Service (MVCS). Best of all it comes with a sample application that embodies all of the principles outlined in the article.
AS3 does not support private or protected constructors which makes it harder to implement the singleton pattern. Below are some approaches I've run across on the Internet, problems with them, and what I hope (please tell me if I'm wrong) corrections to get a real singleton pattern working.
Adobe's Flex Team has released their first component on the Flex Exchange. It is an AutoComplete Text Input. Cool stuff.
While working on a transition recently in Flex 2 I had some issues with button text not fading along with the rest of the components. Digging into the documentation I ran across this nugget of information:
The Dissolve, Fade, and Rotate effects only work with text rendered using an embedded font. If you apply these effects to a control that uses a system font, nothing happens to the text.
Maybe this is just known but it was a surprise to me. There are other helpful font tidbits on the Using embedded fonts with effects page.
I lead the discussion at tonight's BFPUG Pattern Meeting on the topic of the Template Method. For the discussion I put together some overview and simple examples. You can find the Flex 2 project, source, and raw Eclipse files all online.
Another strange problem has popped up with the use of runtime modules. CSS type selectors don't work correctly. The compiler optimizes the CSS such that it only includes information for types that are actually used, based on the class dependency hierarchy. Since with a runtime module you are indirectly using classes, the dependency isn't found and the CSS information is excluded. Consider the following type selector:
SampleClass {
backgroundColor: #FFFFFF;
backgroundAlpha: .5;
borderColor: #000000;
borderThickness: 2;
borderStyle: solid;
paddingTop: 4;
paddingBottom: 4;
paddingLeft: 4;
paddingRight: 4;
}
If you don't have a dependency on SampleClass in the main application you will end up with the following compiler warning:
"The type selector 'SampleClass' was not processed, because the type was not used in the application."
Right now I don't have a good solution for this. The simple work around is to not use a type selector but instead just make it a style selector (i.e. .sampleClass instead of SampleClass), but that requires you to set the styleName attribute on every instance you create. I'm open to other ideas.
Update
There are a couple of compiler options that help with this issue. If you are getting the warnings and don't care about them you can turn them off like this:
-show-unused-type-selector-warnings=false
This can be either a command line parameter, stuffed into a flex-config.xml file, or setup as an additional compiler argument in Flex Builder. If instead you want to include every CSS type selector, without having to do the static reference nonsense, you can do this:
-keep-all-type-selectors=true
Again that can be setup as either a command line parameter, part of a config, or enabled in Flex Builder. For additional information on the two options see LiveDocs.
While working on an AS3 class today I had the following message appear in the debug console:
warning: unconverted Bindable metadata in class 'com.example::SampleData'
Everything still seemed to work correctly, but the fact that the message was getting reported concerned me. Unfortunately, this message doesn't appear in the run-time error documentation, which makes some sense since there was no error number associated with the problem and it just a warning. Doing a little more digging I found that the message is coming from the class mx.binding.BindabilityInfo.as. Thank you Adobe for including sources with the framework!
While the following error is most often encountered when trying to access a property or function through a null object reference, it can also rear its head when working with runtime modules.
TypeError: Error #1009: Cannot access a property or method of a null object reference. at mx.containers::Panel/mx.containers:Panel::layoutChrome() at mx.core::Container/mx.core:Container::updateDisplayList()[C:\dev\GMC\sdk\frameworks\mx\core\Container.as:2910] at mx.containers::Panel/mx.containers:Panel::updateDisplayList() at mx.core::UIComponent/validateDisplayList()[C:\dev\GMC\sdk\frameworks\mx\core\UIComponent.as:5672] at mx.core::Container/validateDisplayList()[C:\dev\GMC\sdk\frameworks\mx\core\Container.as:2731] at mx.managers::LayoutManager/mx.managers:LayoutManager::validateDisplayList()[C:\dev\GMC\sdk\frameworks\mx\managers\LayoutManager.as:594] at mx.managers::LayoutManager/mx.managers:LayoutManager::doPhasedInstantiation()[C:\dev\GMC\sdk\frameworks\mx\managers\LayoutManager.as:646] at Function/http://adobe.com/AS3/2006/builtin::apply() at mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher2()[C:\dev\GMC\sdk\frameworks\mx\core\UIComponent.as:7789] at mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher()[C:\dev\GMC\sdk\frameworks\mx\core\UIComponent.as:7732]
The problem seems to be that if the runtime module makes a side-effect reference to a component, which is not included in the main application, it never really gets included in the SWF and as such causes problems when accessed. That's a jumble of words so I think an example is needed.
Continue reading "Flex 2 Runtime Error 1009 and Runtime Modules" »
Today while working on some code I started getting this error and stack trace:
ReferenceError: Error #1065: Variable LoadTest is not defined.
at global/flash.utils::getDefinitionByName()
at ... (rest of stack trace deleted)
Looking the error up in the documentation didn't help point the way to what might be going on since this had nothing to do with a "variable":
1065 Variable _ is not defined. You are using an undefined lexical reference. For example, in the following statements, the statement trace(x) generates an error because x is undefined. However, the statement trace(y) doesn't generate an error because y is defined: trace("hello world") trace(x) // x is undefined var y trace(y) // No error, y is defined.
Note A code coverage tool is now available at http://code.google.com/p/flexcover/.
This maybe a little crazy but I'm going to throw it out there. I've been thinking about a way to get code coverage reports for Actionscript 3. We make heavy use of FlexUnit at work, but I'm always curious just how much of our code is really covered with the tests. I've not found anything about code coverage tools with the few Google searches that I've run hence my search for other solutions.
My current idea is to leverage the Flex debugger. Something along the lines of creating a break point on every line in ever file that you want to check coverage of. As the break points get hit, remove them. Once all of the test code is done running, see if there are any break points that haven't been hit.
This isn't elegant by any means but it should be possible to test the theory with a few hours work. If someone knows of a tool that already does this I'd love to hear about it. Otherwise I'll see how my hacking goes.
With the public release of Flash player 9, I've updated the regular expression tester to use the latest version.
I also fixed a bug with the display of optional groups.
NOTE: If the screen is blank, that probably means that you don't have the correct Flash version. Stop by the Flash version page and make sure you have at least 9.0.15.0 installed. If you don't you can easily download it.
Adobe is now shipping Flex 2 and Flash 9. Get them now!
The best part is that the Flex 2 SDK is FREE.
Check out the new Flex.org site for everything about Flex.
Since it has come up a couple of times these past two days, I'm a little disappointed that AS3 interfaces don't support constants. I guess I'm too used to Java's interfaces and really wish AS3 interfaces were as versatile. I've ended up using a class which just has static constants in it to simulate the constants that I would normally have applied to the interface.
If I'm missing some syntax or a better way around this issue, please let me know.
I would like a way in AS3 to define an interface as being dynamic. In some cases I want all classes that implement an interface to also have to be dynamic. Why might this be useful? I find the chained property accessors much nicer to deal with. I'm not as concerned about adding new methods to the interface and some of the other stuff that you can do with a dynamic class, I just want easy access to unspecified attributes. The fact that you can still use the associative array style lookup on an interface to get the same result only strengthens my belief that you should be able to mark an interface as dynamic.
Since you can't apply the dynamic keyword to an interface and there doesn't seem to be a system interface that endows dynamicness on an interface, you are forced to either use looser typing or use the alternative syntax. I think this calls for an example.
I've been playing around with Flex 2 for some time at work. One of the neat things that Actionscript 3 adds is native regular expressions. As part of an ongoing effort to share knowledge I volunteered to give an informal talk about regular expressions. To help with the talk I created this visual regular expression viewer. It helps show you what matched along with any groupings and other standard stuff. Additionally it can also perform a regular expression replace operation or a simple split operation.
You will need the Flash 9 in order to run the application.
If you find any bugs, have comments, etc. please leave me a comment.
Today I got a familiar error while working with some event code:
TypeError: Error #1034: Type Coercion failed: cannot convert flash.events::Event@35f04c1 to com.neophi.events.CustomEvent.
The short answer is that this error results from failing to implement a clone() method on a custom event class. The long answer is that most of the time not implementing a clone() method won't hurt you, based on how you use your custom events, but you really should create one. In fact the Actionscript 3 (AS3) documentation is pretty clear about this:
When creating your own custom Event class, you must override the inherited Event.clone() method in order for it to duplicate the properties of your custom class.
This is a time that I wish AS3 had abstract methods.
I've found a feature of Actionscript 3 (AS3) that I've not seen in other languages that I think is pretty cool. It's taken me awhile to come to terms with it, but now that I've getting more comfortable with it I'm really starting to appreciate it. That feature is what is known as E4X or more officially Standard ECMA-357 ECMAScript for XML (E4X) Specification. At its core is the ability to work with and manipulate XML data in AS3 using standard language syntax instead of having to do everything through an API.
For example to create a variable that contains some hard coded XML you could just write:
I'm sure this would be obvious for anyone that has been programming in Actionscript 3 for awhile, but coming in from the Java world I'm still trying to find the matching idioms. In particular I wanted a way to dynamically load a class based on its name. In Java this is the Class.forName() construct. Luckily AS3 also has a similar mechanism:
// return the class as a Class object
var temp:Class = flash.utils.getDefinitionByName("com.example.Sample") as Class;
// you can now call new it to create an instance along with passing constructor args
var instance:Object = new temp(arg1, arg2, ...);
If when doing this you get an "Runtime Error 1065" see this post.
Note: Update Nov 6, 2007
It looks like flash.util.getClassByName() has gone away. The example above has been updated to use the new mechanism called flash.utils.getDefinitionByName().
I didn't find this well documented when I was looking it up so I thought I'd post a sample. While Actionscript 3 (AS3) doesn't support protected and private classes like Java does, you can have helper classes that are only visible within the file that they are defined. The syntax for them is a little weird but the Flex 2 Beta 2 compiler seems to like it. The syntax is that after the package you define the helper class:
package com.example {
public class Sample {
private var _helperClass:HelperClass = new HelperClass();
}
}
// imports for the helper class go here
import com.example.xml.SaxHandler;
class HelperClass {
private var _saxHandler:SaxHandler;
}
As part of my new job I've started programming in ActionScript 3. Its syntax is similar to JavaScript and is based around the upcoming ECMAScript 4 standard. The thing that has caught me off guard the most is the "variable:type" declaration syntax versus "type variable". It's only a minor thing, but I'm amazed at some of the subconscious cut'n'paste'n'edit keystrokes I have. I find this most prevalent when writing unit test code, where often you are creating similar but varied objects. The jump to home shift ctrl right keystroke doesn't help to change the type when it's after the variable.
One of those simple things that you don't really notice you are doing it until it doesn't do what you should. Joel Spolsky had a recent article taking about usability (it's a draft so I'm not going to link to it) and one quote from it was "Something is usable if it behaves exactly as expected." Right now my finger memory isn't that useful because it isn't behaving as expected. It isn't that there is anything wrong with it, as soon as I'm back in Java land it will be very helpful, but while I'm working in ActionScript it's just plan annoying :)