Archive for the 'Flex' Category

Accessibility and Flex: we can do better.

Published on May 3, 2008 in Accessibility and Flex. 4 Comments

By default, Flex Builder creates inaccessible SWF files.

Bad decision. This needs to change.

Enabling accessibility features for The GAE SWF Project resulted in an 8KB file size increase in the SWF file. I can live with that. Creating inaccessible SWF files to save a couple of KB is no savings at all.

The Flex accessibility overview page feels woefully outdated and mention Adobe Flash Player 7. We're on 9 now. Let's update these, guys!

It also reads more like marketing talk then factual information for developers with phrases like "designers and developers can create powerful, exciting, and engaging experiences on the web that are accessible to all" and "it's never been easier to design accessible Rich Internet Applications." Let's cut out the marketing talk and concentrate on the facts. If we feel that we need to dilute or detract from the facts with marketing talk, maybe we need to concentrate on changing the facts.

The Accessibility Best Practices for Flex document, on the other hand, does an admirable job of disseminating important information that is useful for developers.

It is also important to note that the accessibility features of the Flex components have been optimized for use with JAWS on Windows and that users will need to install additional JAWS scripts to enable these features. Why aren't these scripts included by default in JAWS?

The best practices document is very useful but I feel that we would benefit for a short, succinct and no bullshit summary to quickly inform developers on the state of accessibility in Flex. Something along the lines of:

The State of Accessibility in Flex

  • Accessibility is not enabled by default for Flex applications (ideally with a note stating: "We will be changing this in the next release.")
  • Accessibility in Flex is optimized for JAWS on Windows. (This is not necessarily a bad thing; better to have great support for one accessibility aid than shoddy support for several.)
  • JAWS users will need to install additional scripts to take advantage of advanced accessibility features.
  • Accessibility is more than adherence to standards and screen-reader support. For a full discussion, read Accessibility Best Practices for Flex.

Finally, bookmark the Accessibility Resource Center on Adobe.com and keep checking back for new articles (and bug Adobe if you don't see any!) :)

Picture this!

Published on May 2, 2008 in Flex, google app engine and the gae swf project. 2 Comments

In version 1.53, you can now add a photo to your profile at The GAE SWF Project Flex sample (and see other user's profiles).

It was a bitch to get FileReference working as I wanted it to (look ma, no sessions!), but it was well worth the effort. The sample uses an authentication-token based system instead of the less secure hack of tacking the session ID on to the request URL method (yuck!)

The example demostrates File Upload via File Reference, outputting an image via Python/webapp and both sending and returning images as ByteArrays from webapp.

The PhotoCropper component lets you upload photos, crop them, and rotate them. I started building it by expanding on Arpit Mathur's ScrollImage component (thanks, Arpit!) :) It's not complete yet but it is functional. Specifically, I don't like how it zooms and a future update will handle that. If you notice any issues, please do let me know in the comments so I can tackle them.

The updated ScrollImage class includes the following features:

  • Correctly scrolls both zoomed in (<1) and zoomed out (>1) content.
  • Correctly frames scrolled content so that no whitespace shows.
  • Supports the loading of images via the load() method.
  • Applies smoothening to the bitmap when zoomed in/out (not when at 100%).
  • Implements "natural" click and drag scrolling (reversed).
  • Image does not get stuck to the sides when user keeps scrolling after an edge has been reached.
  • Component displays the hand cursor when over the image.
  • Allows rotation of the image.
  • Provides a ByteArray snapshot of the image.

I also made use of Joel Connect's FlexMatrixTransformer class (thanks, Joel!) :)

Remember that The GAE SWF Project is completely open source so you can grab the source code and use it to build your own applications (have fun!)

Getting started is as easy as 1,2,3:

  1. Download Google App Engine and install it.
  2. Download The GAE SWF Project and unzip it.
  3. Navigate to the folder you unzipped it to in Step 2, and start the Development Web Server by typing ./start in Terminal. Go to http://localhost:8080 to see your local version of The GAE SWF Project and start hacking!

(The above instructions are for OS X, please adapt as necessary for your platform.)

The features I'm spiking out and sharing with you in The GAE SWF Project are the ones I'm using to build the web application for the Singularity Web Conference. Expect some updates on that front in the coming days. I am going to release the Singularity app and open ticket sales as soon as the core features are in place.

Also expect some more cool Singularity-related speaker and sponsor updates this week :)

Oops, I broke Google?

Published on April 24, 2008 in Flash, Flex, google app engine and the gae swf project. 0 Comments

Update: They're on it! :) In the meanwhile, the suggested workaround is to add debug=True to your template.render() methods (pass it as the third argument, i.e., after the context).

Update: As of 2.30pm (when I last checked), the app appears to be working again. I've made no changes whatsoever.

If you hit the Flash or Flex client on The GAE SWF Project right now, you will be greeted with a page long traceback.

I've just opened issue 273 on the Google App Engine Issue Tracker to track this and added this comment on the forums.

The problem is that the error never occurs locally when developing and testing with the Development Web Server and randomly starts happening on appspot (the app will work well for stretches of time and then start failing 100% of the time.)

The last time this happened, issuing an appcfg.py update . fixed the issue but I'm not going to do that now in hopes that seeing the error will make it easier for Google's engineers to fix it.

The GAE SWF Project version 1.33

Published on April 22, 2008 in ActionScript, Flash, Flex, google app engine, python and the gae swf project. 2 Comments

I just released version 1.33 of The GAE SWF Project and, as tradition would have it, need to head to bed in the next few minutes lest I should expire.

The updates in a nutshell:

  • The Yahoo! Astra TabBar component does not show the focusRect when navigating by keyboard. I fixed this for the example but I'm going to talk to my friends at Yahoo! so that this can be implemented in a reusable way in the component itself. See the latest Flash 9 client demo and navigate with the keyboard to see the focusRect in action.
  • Added tab indexing to the Flash 9 client.
  • Added an extra (optional) field to the profile page so you guys can express yourselves!
  • Synced the Profile screens for the Flash and Flex clients.
  • Lowered the keyboard delay on server-side validation to 500ms
  • Server-side validation no longer locks the submit button on the Profile screen.
  • Released version 1.33 of the source code.

Check it out here.

The GAE SWF Project Featured Application on Google App Engine Application Gallery

Published on April 22, 2008 in ActionScript, Flash, Flex, Google, Open Source, google app engine and the gae swf project. 5 Comments

Screenshot of The GAE SWF Project as Featured Application on the Google App Engine Application Showcase

How cool, I just heard from Brajeshwar on Twitter that The GAE SWF Project is currently the featured application on the Google App Engine Application Gallery.

I released the proof of concept Flex 3 client late last night after the initial Flash 9 client release last week and I'm look forward to writing more about it in a future blog post.

And, far from being a theoretical exercise, the very pragmatic GAE SWF Framework is going evolve and get put through its paces as we use it to build the web application for the Singularity Web Conference. I can't wait!

Exciting times!

New: Flex on Google App Engine - proof of concept and source code

Published on April 22, 2008 in ActionScript 3, Adobe, Development, Flex, google app engine and python. 2 Comments

I just updated The GAE SWF Project to add the proof-of-concept Google App Engine Flex 3 client. The source code download now includes the source code for the Flex project.

The Flex client works exactly like the Flash 9 client and shares an almost identical codebase. 99% of the framework is the same.

I'm going to document that differences, etc., but it's past 1am at the moment and I need to sleep!

The GAE SWF Project

Published on April 19, 2008 in ActionScript, ActionScript 3, Applications, Architecture, Best Practices, Community, Conferences, Development, Flash, Flash 9, Flash Remoting, Flex, OS X, OSFlash, Open Source Flash, Projects, RPC, Rich Internet Applications, Singularity, Standards, Usability Design, google app engine, pyamf and python. 2 Comments

The GAE SWF Project: Knowledge and tools to help you build Flash and Flex apps on Google App Engine

Today I'm releasing The GAE SWF Project, a resource of Flash and Flex-related knowledge specifically aimed at getting you up and running quickly with Google App Engine. If you want to skip all the details and start playing with it, skip to the Getting Started section.

Everyone else, read on!

When Google announced Google App Engine last week, I couldn't believe what I was hearing. It was as if someone had said, "Hey, Aral, tell us what your perfect development environment is and we'll build it for you."

In recent weeks, I had started playing with Python and Django and experimenting to see whether I could use it to build the web application for the Singularity web conference that I'm organizing at the end of October. Turns out that I could not have picked a better time to invest in learning Django and brushing up my Python as Google App Engine is heavily influenced by (and supports) Django and is written in Python.

A framework for the Singularity Conference

Singularity is shaping up to be a really great conference. I'm honored to have a constantly-expanding stellar line-up of speakers and yet the sessions are just one very important aspect of the conference. I find that you get as much out of your social interactions with speakers and other attendees at conferences as you do from the sessions. And Singularity is no exception.

The Singularity conference application is not something you will login to on October 24th and never visit again beyond October 26th. On the contrary, I plan to launching the application as early as possible and add features as we go so that we can start building the community around the conference. This is essential for the organization of the local conference hubs, for building friendships months in advance of the conference, and so that you can influence what the conference ultimately becomes (you do not have to attend the conference to join the online community.)

When I initially announced the Singularity conference two months ago, I stated in the About page that Singularity would have a "focus on open source, the community, and on giving back."

Today, I'm taking the first step towards delivering on that promise by releasing the initial underpinnings of a framework that will eventually power the Singularity conference web application. I present to you The GAE SWF Project.

The GAE SWF Project

The GAE SWF Project (hey, Google chose the name, I only provide the juvenile attempts at humor) is a resource of Flash and Flex-related knowledge specifically aimed at getting you up and running quickly with Google App Engine. The initial release contains a proof-of-concept Flash 9 client showcasing a pre-alpha version of The GAE SWF Framework. The framework is a very light-weight combination of Python and ActionScript 3 that uses some of the best open source components available today on the Flash Platform and Python ecosystem. It is inspired at its core by best practices and a pragmatic approach to application development.

The proof of concept (and, indeed, the whole project) specifically targets Google App Engine. This is by design. The framework is not a generic one (although, by all means, feel free to get inspired and port it if you wish). The dedicated focus is part of the appeal. It means that we can make things simpler.

There will be no abstraction for the sake of abstraction and no premature abstraction; the framework will evolve by encountering real-world problems and solving them.

Finally, keep in mind that you are viewing the fruits of three days of work at the moment (this, in itself, should be testament enough to how easy -- and fun -- Google App Engine makes development). It is early days but I feel that we've made a good start. I hope to hear your thoughts and feedback in the comments.

The Proof of Concept

The proof of concept is built on Google App Engine using Google's webapp framework.

It showcases several fundamental architectural considerations, the most important of which I've outlined for you below.

HTML and Flash in a tree...

You use handlers in app.yaml to host a mix of Flash and HTML content, including the Flash Remoting gateway, in a single Google App Engine app.

Embed Flash content using SWFObject

SWFObject is the way to embed Flash and Flex applications in your HTML. Use it. 'Nuff said.

Deep links

You implement deep linking using a combination of server-side Python and SWFAddress so that both SWFAddress-style and regular URLs are supported. Regular URLs are translated to SWFAddress-style hash/anchor URLs on the server.

Thus, both of the following URLs are valid ways to reach your profile page on the proof of concept Flash 9 client:

Regular URL:

http://gaeswf.appspot.com/examples/initial/profile

SWFAddress-style URL:

http://gaeswf.appspot.com/examples/initial/#/profile

Flash content that obeys browser text-size changes

Users with poor eyesight or in environments with reduced-visibility (such as bright sunshine outdoors) may want to increase the size of the text displayed in the browser. By default, Flash and Flex content does not react to these text-size changes. However, it is possible to make Flash content obey browser text-size changes and the proof of concept implements one such method that does not involve any alterations to the Flash app.

(You can read more about similar issues -- and see some juicy Flash myths debunked -- in my review of the talk I gave at Highland Fling this month titled Bare-naked Flash: Dispelling myths and building bridges.)

PyAMF

PyAMF is a Flash Remoting implementation for Python. It has a dedicated and responsive group of passionate developers working on it, led by Thijs Triemstra, Nick Joyce, and Arnar Birgisson. On Tuesday, the team released PyAMF 0.3 with support for Google App Engine.

The GAE SWF Framework uses PyAMF as a core component to communicate with the server and the various Google App Engine APIs. It is currently running PyAMF 0.3.

The PyAMF gateway is setup as a regular mapping, and mapped to /gateway in app.yaml.

Users API

You use the Google App Engine Users API to login and out of the Flash application. The current Flash 9 proof of concept implements one of three possible ways of handling logins (see the note in my earlier blog post about the other two ways.)

Intelligent forwarding after login

When you hit a deep link in the application without logging in, you are automatically forwarded to the link after you login. This is a behavior that you are accustomed to seeing (and expect) in HTML-based applications but I have rarely seen it implemented in Flash and Flex applications.

DataStore API

The Google App Engine DataStore is a massively scalable database based on Google's Bigtable (the same distributed database that powers their search and services like Google Earth).

The proof of concept has a profile section where you can fill in your name and a URL (the Users API currently does not provide your GAE app with the user's name, just their email address). This data is saved via PyAMF and the DataStore API.

(All server-side services are in the /services package.)

Client-side and server-side validation

The Profile Screen shows you how to implement two different types of validation: simple client-side validation and server-side validation.

The Name field performs simple client-side validation that stops the user from submitting the form without entering a name.

The URL field, on the other hand, actually hits the server and asks the DataStore to verify that the URL is valid. When you think about it, it makes sense to use server-side validation code to validate more complex data types using the exact same code that the DataStore API uses.

The user experience is managed via visual cues that are carefully scripted using the excellent KitchenSync AS3 sequencing library by Mims Wright. (Mims just added me as a project member so I can contribute a small update I blogged about earlier.)

(I'm still working on tweaking the timing of the type wait duration for firing the server-side validation code to make it as seamless as possible.)

As the framework develops, I know that the KitchenSync library is going to be an essential, core element, and I look forward to contributing back as much as I can to the project.

Mail API

The proof of concept also makes use of the Google App Engine Mail API to send email confirmations to your Google Accounts email address after you update your profile.

When initially working with this, I was searching for a simple way to monitor the mail that was being sent from the app. Although the Development Web Server allows you to specify an SMTP server when you start it, I couldn't get it to work with either GMail or my web host's mail server. And setting up sendmail or postfix was a pile of worms I didn't want to sample.

Instead, I found a simple, open source SMTP server written in Python that's perfect when developing locally with the Development Web Server. It's in The GAE SWF Project app that you can download. To start it, simply change to your The GAE SWF Project folder and type:

./monitor_mail

You will see all email sent from your application in the Terminal window. (Note: I run on a Mac and all the commands in this article are meant to be run in Terminal on OS X. You may need to tweak them slightly for your operating system of choice.)

CSS, etc.

I may introduce myself as a Flash Developer but that doesn't mean that I don't care about the rest of the web. With good friends like Andy Budd, Richard Rutter, Paul Annette, and Jeremy Keith living almost a baseball-bat-wave away from me, I'd be scared silly implementing a new site with anything less than pristine markup. So that's what I've strived for here and I hope I've at least come close. (I did use one <br/> tag, for which I feel very dirty indeed!)

Nearly all of the credit for the CSS goes to the excellent YUI Grids CSS library that Rob Knight clued me into via Twitter last week when I was battling with altering the K2 theme on Singularity to make it into a cross-browser three-column fluid layout.

(The scale9-esque fluid download cell is courtesy of the even more rounded corners with CSS technique.)

The HTML content is structured using several Django templates, which are supported by Google's webapp framework.

Finally, the Flash client uses the TabBar component from the open source Yahoo Astra Flash components and Uza's AS3 Global Object to implement several global convenience properties (like the current SWF's URL).

Getting Started

Getting started with The GAE SWF Project couldn't be easier.

1. Download and unzip

First off, download the Google App Engine SDK (includes the local Development Web Server and webapp framework.)

Next, download the latest release of the The GAE SWF Project and unzip it.

(Or, you can check out the unstable, bleeding-edge version from The GAE SWF Project Subversion repository's trunk on OSFlash.)

2. Start the server

Open up Terminal and navigate to the folder you unzipped The GAE SWF Project to. To start the Development Web Server type:

./start

This is a convenience script that I made that starts the Development Web Server and sets the mail server as localhost:5000. You can change these in the script of just use dev_appserver.py . to start it up without mail support.

If you want to monitor the email that gets sent, open up a separate Terminal window and, in The GAE SWF Project folder, type:

./monitor_mail

3. View the app and start hacking!

Now that the app is running, view it in the browser by hitting http://localhost:8080.

You can now open up the source folder and start exploring!

Trace you, trace me, trace it for always...

Wow, did I just paraphrase Lionel Richie?

Anyway, I find it useful to tail the Flash trace log (especially to see trace results in the browser and online). Here's how you do it:

Before you start, you need to enable logging by creating a file called mm.cfg in /Library/Application Support/Macromedia.

In it, enter:

ErrorReportingEnable=1
TraceOutputFileEnable=1

You only need to do this once. After that, whenever you want to tail the log, open up a new Terminal window and type the following, replacing USER with your home folder:

tail -f /Users/USER/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt

Play, enjoy, share, have fun!

As I state on The GAE SWF Project site, I hope that this open source effort will help you to get started quickly with building Flash and Flex application on Google App Engine. In the past few days, I have had more fun developing this than I can remember in a long while. I love Python, I love Django, I love Google App Engine, and I love Flash and Flex. To have them all together... well, that's a dream toolset, right there!

And, there's something to be said about writing your app and then letting Google handle the rest. Personally, I can live with that.

(Oh yes, and I do desperately need to talk to someone at Google about hosting the Singularity conference web application on Google App Engine with regards to the quotas -- if you know whom I should contact, please either let me know directly at aral {at} aralbalkan(.)com or leave a comment below -- thanks!)

The GAE SWF Project is currently a proof-of-concept; it's a three-day old baby that I hope will blossom into a useful resource.

I hope you you enjoy it and I hope that it makes your life a little easier or at least gives you food for thought.

Play with it and let me know what you think in the comments.

New Flash and Flex jobs

Published on April 18, 2008 in ActionScript, Flash, Flex and Jobs. 2 Comments

Here are the new Flash and Flex jobs from the OSFlash job board for this week:

Bare-naked Flash: Dispelling myths and building bridges

Published on April 6, 2008 in Community, Conferences, Flex, Open Source and Presentations. 20 Comments

Bare Naked Flash Splash

As I mentioned previously, I gave a new talk titled Bare-naked Flash: Dispelling myths and building bridges at Highland Fling this week. What follows is a comprehensive live-blog style commentary of the session with slide highlights.
Continue reading 'Bare-naked Flash: Dispelling myths and building bridges'

OSFlash Job Board relaunch: Flash, Flex, and ActionScript job listings at half price

Published on March 25, 2008 in ActionScript, Adobe, Community, Flash, Flex, Jobs and Open Source. 2 Comments

Do you have a Flash, Flex, or ActionScript job to post? Post it on the OSFlash Job Board.

I've just relaunched the OSFlash Job Board and all jobs listings are 50% off this week if you use the coupon code RELAUNCH. This expires on April 1st, 2008 (no joke!) :)

If you want to get notified of new jobs, you can get job alerts by email or subscribe to the RSS feed.

The OSFlash Job Board initially launched last year using the Joard system that my friend and business partner Dave Stone was developing. Dave decided to discontinue Joard at the start of this year so we were left without a job board.

It has taken a little while to get everything set up again but the job board is now back up and running using the excellent JobThread system.

OSFlash gets over 120,000 unique visitors every month. We also have a new job board widget that is featured on the OSFlash.org home page and here on my blog (I get around 70,000 unique visitors a month on this blog). By putting your job listing on the OSFlash Job Board, you'll thus be reaching a very tightly-focussed group of close to 200,000 Flash, Flex, and ActionScript developers, designers, and creatives.

Check out the OSFlash Job Board for Flash jobs, Flex jobs, and ActionScript jobs and don't forget to use the RELAUNCH coupon code to get 50% off your job listing until April 1st, 2008.

If you want to help support OSFlash, tell your friends about the OSFlash Job Board by adding the OSFlash Job Board widget to your site.

OSFlash Job Board Widget (JavaScript)

<script type="text/javascript">
<!-- 
var jobthread_jobroll_title = "Jobs";
var jobthread_jobroll_outer_style = "background-color:#dddddd;border:1px solid #999999;width:160px;";
var jobthread_jobroll_inner_style = "background-color:#ffffff;color:#666666;border:1px solid #999999;margin-left:10px;margin-right:10px;padding:10px 10px 2px 8px;font:11px Arial, Helvetica, Sans-serif;line-height:16px;";
var jobthread_jobroll_title_style = "color:#313131;font-weight:bold;";
var jobthread_jobroll_link_style = "color:#0464bb;font-size:11px;font-weight:bold;text-decoration:none;border:none;";
var jobthread_jobroll_featured_style = "";
var jobthread_jobroll_featured_link_style = "";
var jobthread_jobroll_top_style = "padding-top:8px;";
var jobthread_jobroll_bottom_style = "padding-bottom:4px;";
//-->
</script>
<script type="text/javascript" src="http://jobs.osflash.org/feeds/jobroll/?num_jobs=5&num_featured_jobs=1&display_method=default&version=2.0"></script>

OSFlash Job Board Wordpress widget

I also made a simple Wordpress Widget that you can use to add the Job Board to your Wordpress blog's sidebar. Download the OSFlash Job Board Wordpress widget.

Once you've downloaded it, simply extract it into your wp-content/plugins folder, activate it, and add it to your sidebar from the Widgets section of the Wordpress administration tool. (Note: The CSS positioning is set for my site, you may need to modify it to make it display correctly for yours.)

Here's the source for the OSFlash Job Board Wordpress plugin. It's released under the open source MIT license, so please feel free to use and adapt it to make your own Wordpress plugins too. 

<?php
/*
Plugin Name: OSFlash Job Board Badge
Plugin URI: http://aralbalkan.com
Description: Displays the OSFlash Job Board Badge on your Wordpress blog. Released under the MIT License. Copyright (c) 2008 Aral Balkan. http://aralbalkan.com.
Author: Aral Balkan
Version: 1.0
Author URI: http://aralbalkan.com
*/
 
function osflash_job_board_widget_init()
{
	if ( !function_exists('register_sidebar_widget') || !function_exists('register_widget_control') )
		return; 
 
	function osflash_job_board_widget($args)
	{
		extract($args); 
 
		echo $before_widget; 
 
		?>
<div class="osflashJobBoard">
				<script type="text/javascript">
				<!-- 
				var jobthread_jobroll_title = "Jobs";
				var jobthread_jobroll_outer_style = "background-color:#dddddd;border:1px solid #999999;width:160px;";
				var jobthread_jobroll_inner_style = "background-color:#ffffff;color:#666666;border:1px solid #999999;margin-left:10px;margin-right:10px;padding:10px 10px 2px 8px;font:11px Arial, Helvetica, Sans-serif;line-height:16px;";
				var jobthread_jobroll_title_style = "color:#313131;font-weight:bold;";
				var jobthread_jobroll_link_style = "color:#0464bb;font-size:11px;font-weight:bold;text-decoration:none;border:none;";
				var jobthread_jobroll_featured_style = "";
				var jobthread_jobroll_featured_link_style = "";
				var jobthread_jobroll_top_style = "padding-top:8px;";
				var jobthread_jobroll_bottom_style = "padding-bottom:4px;";
				//-->
				</script>
				<script type="text/javascript" src="http://jobs.osflash.org/feeds/jobroll/?num_jobs=5&num_featured_jobs=1&display_method=default&version=2.0"></script>
			</div>
 
		<?php
 
		echo $after_widget;
	}
 
	// Register widget
	register_sidebar_widget('OSFlash Job Board', 'osflash_job_board_widget');
}
 
function osflash_job_board_style()
{
	?>	
<style type="text/css">
		.osflashJobBoard
		{
			position: absolute;
			left: 20px;
		}
		</style>
 
	<?
}
 
// Add widget once plugins are loaded.
add_action('plugins_loaded', 'osflash_job_board_widget_init');
 
// Add the badge's CSS to the head.
add_action('wp_head', 'osflash_job_board_style');
 
?>

Update: There was a small hiccup right after the blog announcement. If you couldn't reach OSFlash.org or jobs.osflash.org, please try again. It's back up and running! Thanks!

« Older Entries

Bad Behavior has blocked 0 access attempts in the last 7 days.