Web Snapshot - a simple Apollo Application. 7
This simple Apollo Application takes 200×150 thumbnails of a Web page.
UPDATE: See Web Snapshot – a simple Adobe AIR application
1) Enter the URL of the page you want to “Snap”. 2) Click the Thumbnail 3) A file dialog opens and asks for the File to save.
Download it now: WebSnapshot0.1.air (right click and ‘Download Linked File’)
It uses the new HTMLControl that Apollo provides, which behind the scene is a full fledged web browser based on KTHML. Check out an extract of the source code:
//1. Load the page (asynchronously)
var html:HTMLControl = new HTMLControl();
html.width = 400;
html.height = 300;
html.load(new URLRequest(url));
//2. Draw and scale the rendered html into a bitmap
var snapshot:BitmapData = new BitmapData(200, 150);
var matrix:Matrix = new Matrix();
var scaleX:Number = 0.5;
var scaleY:Number = 0.5;
matrix.scale(scaleX, scaleY);
snapshot.draw(htmlContent, matrix);
//3. Save as JPEG
var jpegEnc:JPEGEncoder = new JPEGEncoder(75);
var jpegData:ByteArray = jpegEnc.encode(snapshot);
var stream:FileStream = new FileStream()
stream.open(file, FileMode.WRITE);
stream.writeBytes(jpegData);
stream.close(); I found the JPEGEncoder here.
And Daniel Dura had a trick to use a native save windows.
Note I need to try this application on Windows…I’ll do that tomorrow.
Enjoy! Daniel
Update:I quickly tried on Windows XP and the save doesn’t seem to work. Let me know how it works for you. Thanks.
RailsLogVisualizer meets Apollo. 12
It’s not complete yet, but for the curious out there, here is a first and “ruff” version of the RailsLogVisualizer as a pure Apollo application. The previous version was an OSX application that was embedding a Ruby http server that was used to load the Rails log files, as a Flex application didn’t provide a mean to load files directly. Here comes Apollo and lifts that restriction. So I thought…let’s try to rewrite the file loading in Actionscript. Well this is my first attempt, during the port I broke a couple of features that will need more attention in the future. Also I haven’t tried to load any file bigger than 40Mb. And I haven’t implemeted the incremental loading of large files that I had with the Ruby version. Also the keyboard navigation isn’t working…so just use the mouse for now. That’s the next thing I’ll need to fix. Let me know what you find at daniel@onrails.org or just add some comments on this entry.
- Hourly breakdown of daily request.
- Breakdown ofHttp methods (Get, post, delete, head).
- Improve progress indicator during file load and data parsing.
- Refactor interaction to allow keyboard support (basically rewrite using Cairngorm).
- Improve the File Browser.
- Support for RESTFull controllers (detect _method parameters (i.e. ?_method=put)).
- Add chart of action over time.
How to install:
1) If you haven’t yet downloaded the Apollo Runtime, get it here: Apollo runtime (8Mb).
2) Download the Rails Log Visualizer: RailsLogVisualizer0.4.air (480Kb) (right click and ‘Download Linked File’). On a side note don’t click directly as the mime type on this server for .air files is not yet set. For more info see Mike Chambers entry on the subject.
3) Follow the installation steps that Apollo provides. It’s a little strange at first as they have a custom installer.
Apple TV on my TV 7
I picked up my Apple TV today from Fedex since I wasn’t expecting the delivery a day early. It is quite a good looking device, both physically and what it puts on the screen. The little remote might bother me a little as I’ve come to expect more from remotes since I got my Logitech Harmony remote. I wonder if Apple has included discrete codes in the device, so I can setup a macro on my remote that will turn on my receiver and start shuffling through my music. I don’t want to have to turn on my TV every time I want to listen to music.
Anyway, time to play with it will have to wait since the Sweet 16 is on.
Update: Well, 2 things I was hoping to do with the Apple TV don’t seem possible. I wanted to be able to control my music playing on the Apple TV from my laptop from anywhere in the house. The 2 ways I was thinking that would work would be by having it show up as remote speakers in iTunes for playing my local iTunes stuff, a la AirTunes, or by actually selecting the media that are on the Apple TV from the iTunes devices interface. Neither of these work. Is this a deal-breaker for me? I’m not sure yet, but playing music through my stereo without the TV on was one of the things I was expecting from the Apple TV.
Update 2: So far I’ve mainly been using it for listening to music and it sounds fine, I just shut the TV off once the music starts. I don’t think it sounds better than my Archos Recorder v1 from 2002 running Rockbox through S/PDIF, but the UI is nicer looking. The only video I’ve watched so far was from The Merlin Show in hi-res, and it looked ok, better than SD but not as good as HD. I was able to hook up my Harmony remote to work reasonably well, but still discrete codes for playlists or something would make things better. These instructions helped get things setup with the remote. The slide shows are nice and look great, I think they are my wife’s favorite feature so far.
Searchcoders.com - the fastest way to search the Flexcoders group.
Tom and Robert just announced that Searchcoders.com went live. I had the chance to have met Tom and Robert at the 360flex conference and they gave me access to the beta of searchcoders.com. I have used google, the yahoo groups and several other means before to search through all the messages of the flexcoders group, and searchcoders.com just works the best for me. This group just has so much great content and is the fastest way to solve many of the issues you may encounter once you start pushing what Flex has to offer. Thank to the community of sharing all this info and thanks to Searchcoders to make it more valuable and more accessible.
Best way to reset a form using Cairngorm? 7
I just implemented some code that doesn’t feel quite right, but works and would like your input on the matter. A Payment Entry form will be used by the user several times in the life of a Flex application to enter different type of payments. So every time the user wants to pay, the form needs to cleared. I can see these different ways:
1. Ask the form to clear all it’s fields
2. Bind the fields to a model, and reset the model with the default fields values
3. Create a new instance of the form.
It’s a rather complex form with multiple steps (tabs) and the user can quit the form at any moment. So option 1 and 2 needs to reset not only the fields but also the state of each component used on the form. Therefore I opted for approach three which goes as follows:
The view contains following code that replaces the form with a new instance:
public function clearPaymentInformation():void {
var index:Number = content.getChildIndex(enterPaymentView);
content.removeChild(enterPaymentView);
enterPaymentView = new EnterPaymentInformation()
content.addChildAt(enterPaymentView, index);
}WebComponentsViewLocator.getInstance().getView("paymentView").clearPaymentInformation();
model.paymentViewState = WebComponentsModelLocator.PAYMENT_VIEW_STATE_ENTER_PAYMENT;Is there anyone out there that uses the same approach. If no, thats maybe a good answer that I am on the wrong track. Maybe I should issue an event from the command and have the view listen to the event. This would decouple both, but still doesn’t feel quite right. Maybe I just had a too long day. So any insight is welcome on how you deal with “reseting” forms in your Cairgorm applications. Thanks in advance.
Time for MotorStorm!
Apple TV ships March 20th?
I just checked my order for an Apple TV that was placed on January 10th. It now says “Ships by: Mar 20” and “Delivers by: Mar 26”
360Flex - Day three 1
08:30am Last day’s Keynote by Ted Patrick
Tom Hobbs from the Experience Design group of Adobe presents how they developed the Tour Tracker a complex application tracking a cycling race with gps locations of the racers, links to Flickr feeds of the photo, video. It was done by 3 people in 6 weeks. Tom goes in detail through the iterative development they used, the team started building upfront and gradually added complexity. He presented the values the team where using to reach a great design. Great talk.
![]()
And now Ted Patrick on the “Next Flex”. He wants to talk about what Adobe and the people using Flex are working on. What he is going to show us may not ship, Adobe tries to be open about what they are working on but may decide not to deliver it or deliver it later. They want to expand the reach of RIAs to include desktop, web and offline applications. They want to make it easier for web and enterprise application developers to learn Flex. They want to invest in the platform to server the needs of enterprises and the Flex ecosystem. They want to be much more Open and transparent, they want to build the next generation of Flex with everyone that is working with it. They are two release of Flex set for this year, Moxie and Borneo. The next generation of Flex will be build on the Flash Player 9. They want to better integrate Flex with CS3 (Flash, Fireworks, Illustrator and Photoshop). He now stops and show the integration with Fireworks. In Fireworks he can drag Flex components on a Fireworks image. FW implements scale 9. Is building a UI in Fireworks. In FW he can changes the properties of a Flex components. The he can export the image a MXML and images. Now a designer can prototype a Flex application without using Flex right from Fireworks. The next piece of the puzzle is “Borneo”, the next version of the Flex Data Services. Integrates with LifeCycle. The team has rewritten the mx:WebService to support better SOAP. Moxie is the next version of the Flex SDK and Flex Builder with improved “Language Intelligence”, integrated Profiler, enhanced Design View, Data integration, enhanced DataGrid and Lists. He now shows a demo of it. FlexBuilder 3 now has a refactor method where a method can be renamed right from it’s use. It has also variable renaming. command-shift-j finds cross class all the uses of a given method/variable. Flex and Apollo They are working on a Apollo plugin for Eclipse. Will be release at Apollo camp on March 16th. FlexBuilder will host an Apollo Project. Flex Ecosystem Flex is more than Adobe. It’s fantastic. He now shows some examples. ESRI, the world is not flat! ESRI created a set of components to allow vector mapping to be included in a Flex app with one or two tabs. Ted now shows a demo of these components. The next demo is from Farata Systems. Their background is from the PowerBuilder days and having lots of fun with Flex. FlexBI (Business Intelligence). He shows a customized data grid and can modify the view and the data to be retrieved. The gird is grouping, sorting and totaling the data. Now onto Flexlib. Darron Schall and Doug McCune published many of their components under the MIT license on google code. They also created a whole environment to allow the community to contribute. They have put a demo out at http://dougmccune.com/flexlib/keynote/.

Last thing is Yahoo. Yahoo provides open apis to allow 3rd party developers to make their site better. At this conference Yahoo provided the AS3 apis to their different services. Flex API Posters Everyone on the 360Flex mailing list (at the conference or on the waiting list) will get an email and will get the Flex API poster. Next 360Flex Now Ted asks Tom and John who created the conference to come up on stage and he talks about the future of the conference. Tom is asking who would be interested to do another 3 day conference in August. About half of the audience responds. He also asks who would be interested in a one day event in your city, 120Flex, and who if the topics should rather be introduction or advanced. Lots of interest for the one day event and no interest in the beginner sessions. And now three quick announcements from the Ebay team. 1) they are hiring 2) they are holding their developers conference in June 11th-13th in Boston ($350 for 3days) 3) An Ebay Actionscript open source library that is released today. Allows to use ebay easier. (http://adobe.com/go/ebaylibary, will be available shortly). Tom now thanks his team has he wasn’t very productive during this conference. End of Keynote.
11:00am Model-Driven Integration Strategies by Joe Berkovitz
Modeling: describing software abstractly
Integration: hooking up disparate components
Strategy: an overarching approach to a problem
Model-Driven Integration Strategy: An approach that uses abstract descriptions of drive the hookup of disparate components.
He will mostly talk about transformation tools: Axis, xdoclet, xdoclets2, XSLT. He will not talk about these tools directly but about Hamachi, a generator generator. Hamachi can generate Value Object, and Cairngorm classes. Hamachi use a language neutral XML format. All right…I am out of this talk. If I need Hamachi I will look it up, but some guys from Adobe are about to publish a FlexBuilder plugin for Cairngorm, that’s all I would need for now.
05:10pm Ok it’s a wrap. I am at the airport on my way back to Denver and a little dazzled. Lot’s of Flex during the last three days. But I must admit that the Flex team created an awesome platform that showed it’s potential during this conference. It’s gonna be the year of Flex and many companies at the conference (Yahoo, Allurent, Ebay, Adobe, Userplane and others) where looking for people willing to dive into Flex. There will more Flex applications developed this year than ever before. So keep an eye open for Flex. For me it’s gonna be back to consulting work tomorrow and I have a big Flex project to “finish” for the end of the month. So I may not have time to play with all the cool new stuff I learned. I hope you enjoyed my attempt of live coverage of the event. Have fun!
FlexBook 4

This is the most amazing example of a Flex component I saw. I missed the ‘Making Components’ at the 360Flex conference in favor of the E4X talk. But thankfully the E4X talk finished early and left me 15 minutes seeing the end of the Making Components talk…and I was blown away. Ely Greenfield presented how he created the FlexBook component and presented some of the important concepts behind it. I know Flex is powerful but I didn’t realize you can achieve what Ely did, so maybe this is just the start. So check out these two examples to get a fell what your browser can do for you:
http://demo.quietlyscheming.com/book/app.html http://demo.quietlyscheming.com/book/Anatomy.html
Ely also showed some Apollo application that implements paged browsing…Like Firefox on steroids!!.
Mapping Rails Errors to Flex Fields. 7

We extended the com.wheelerstreet.utils.ValidatorForm to add support for Rails Errors. Saving a form is a two step process. First, client side validation, the Signup button only gets enabled if the form is valid from a client side point of view. Step 2, server side validation, the user press the signup button and invokes the Rails UserController#create method
class UsersController < ApplicationController
def create
@user = User.new(params[:user])
respond_to do |format|
if @user.save
self.current_user = @user
format.xml { head :created }
else
format.xml { render :xml => @user.errors.to_xml(:dasherize => false) } end
end
end
endIf saving the user fails then Rails return the xml version of the errors:
@user.errors.to_xml(:dasherize => false)Now we need a generic way to deal with these errors. We created the Flex RailsErrors class to manage the returned xml. And we created the RailsValidationForm that extends the com.wheelerstreet.utils.ValidatorForm. The RailsValidationForm class can be bound to a RailsErrors instance. So the result handler of the Flex Cairngorm Flex SignupCommand we just set the errors on the model locatorL
var errors:RailsErrors = new RailsErrors(data.result as XML);
MySpyderModelLocator.getInstance().signupErrors = errors;The signup.mxml page contains the following signup form
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:rails="org.onrails.rails.*"
>
<mx:Panel x="162" y="64" title="Signup - Your Account Details.">
<!-- Instance of org.onrails.rails.RailsValidationForm -->
<rails:RailsValidationForm
id="submitForm"
defaultButton="{signupButton}"
validators="{validators}"
fieldMap="{{Email:email, Password:password}}"
railsErrors="{MySpyderModelLocator.getInstance().signupErrors}"
x="98" y="89">
<mx:FormItem label="email">
<mx:TextInput id="email" />
</mx:FormItem>
<mx:FormItem label="Password">
<mx:TextInput id="password" displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem label="Confirmation">
<mx:TextInput id="passwordConfirmation" displayAsPassword="true" />
</mx:FormItem>
<mx:Button id="signupButton" label="Signup >>" click="signup()" enabled="{MySpyderModelLocator.getInstance().signupButtonEnabled}"/>
</rails:RailsValidationForm>
</mx:Panel>
<rails:RailsErrorBox x="487" y="64" width="301" height="178"
errorMessage="errors prohibited this new account to be created"
errors="{MySpyderModelLocator.getInstance().signupErrors}"
visible="{MySpyderModelLocator.getInstance().signupErrors && MySpyderModelLocator.getInstance().signupErrors.hasErrors()}"
/>
</mx:Canvas>The RailsErrorBox just displays the text of all error messages and is only visible if there are any Rails errors.
Now all the magic happens in the org.onrails.rails.RailsValidationForm railsErrors setter.
public function set railsErrors(errors:RailsErrors):void {
_railsErrors = errors;
if (_railsErrors==null || !_railsErrors.hasErrors()) {
resetErrors();
} else {
for each (var field:String in _railsErrors.fields) {
if (_fieldMap[field])
_fieldMap[field].errorString = field + ' ' + _railsErrors.getFieldErrors(field).join(', ');
}
}
}The key is to associate the Rails error message with the field is simply to set the errorString on the field.
I just created this code this morning at breakfast so it’s really a work in progress. For instance it doesn’t support Rails attributes that are more than one word. But this goes hand in hand with the ActiveResourceClient and can be useful I hope to others trying to integrate Rails and Flex. So we will create a Google project and post the RailsErrors and RailsValidationForm.
360Flex - Day two
All right, here we go again.
08:30am Flex Data Services by Jason Williams FDS is a J2EE Application that provides data synchronization between a client and a server. Provides Messaging, RPC Services and Data Management. All these services use service adapters on the server to get the job done. All the other services are build on top of Messaging. Jason goes through the various ways to configure these services, way to much data to blog about. Jason will post his slides online. I will point to them as soon as I gound out.
10:00am Flex Builder Secrets by David Zuckerman Change in plan, I won’t attend the Modules presentation as I played with Module last week and it works pretty well. So Let’s see if there are some good FlexBuilder secrets out there. If not that will give me some time to play with handling Rails Errors from Flex. I’ll blog about that shortly. David will briefly show some editing features, the will dive into hacking FlexBuilder, hacking the property inspector and use the APIs exposed by FlexBuilder. David is part of the FlexBuilder development team and is currently working on ‘Find all references’ and Refactoring support.
| apple-shirt-t | Open Type |
| apple | Turns an identifier into a ‘navigate to’ link |
| ctrl-o | Outline view |
David mentions’ that everything he shows now is at our risks and can damage the installation. He shows or the color syntax settings can be modified. There are defined in the Colors.xml file inside of a .jar file that is part of an eclipse plugin. Note sure that I want to mess with that stuff. Graphical Property Inspector. You can create your own customer common property inspector. This inspector is defined by by an xml file. David nows describe how to extend FlexBuilder using java. I guess that these notes won’t be to useful, so hopefully he will provide his slides.
01:00pm MXML vs. AS3 by Ted Patrick His goal is that we understand MXML as a medium to write applications. Apparently I am the trouble maker for the bad sound with the mikes that the presenters experienced since the beginning of the conference..as my EDVO card may interferer with their microphones. So I will start taking notes offline and post them here after the talks are over. MXML gets translated to AS3, so it’s the same. MXML Tags are instances of AS3 classes. 100% compatible, 100% the same. To see how the translation work use the compiler flag -keep-generated-actionscript. Best way to understand inner workings and what’s going behind the scenes.
02:30pm E4X by Danny Patterson Danny co-authored the ActionScript 3 with Design Patterns book. He described the new XML related classes and showed examples for each of them: . XML, XMLList, QName, Namespace.
Filtering:
catalog.product.(price < 50).name,
or using a variable
var findPrice =50;
catalog.product.(price < findPrice).name
Chained Filter:
catalog.product..(name.toString().length >0).(price < 50).name
Namespaces
//xmlns
var envelop = <soap:envelop xmlns:soap="{uri}" />
envelop.body = <soap:body xmlns:soap="{uri} />
//Namespace
var soap:Namespace = new Namespace(uri);
envelop.soap::body = new XML();
//Default namespace
default xml namespace = soap;
envelop.body = new XML()04:00pm Flex and Flash Together by Jesse Warden Jesse goes fast through lots of material. Call Flash from Flex directly But he shows how to load a swf file using the SWFLoader into flex, cast the loader.content to the interface you would to use, then then Flex can call the methods you want on the Flash movie.. You can do that today with the Actionscript 3 plugin for Flash 8. addFrameScript addFrameScript(39, stop)...show a way to load dynamically code inside you application by using Embed…he uses this to build a nice Flash components that can be used straight from Flex. He makes a compelling case of using Flex and Flash together.