Identifying Multiple Screens with Adobe AIR

Wednesday, May 7th, 2008

While working on a presentation about Native Windows & Adobe AIR I ran into the Screen class. The screen object provides information about the display screens available to an application allowing you to position applications/windows on different screens. I say screens and not monitors because of a little caveat that the livedocs have in them:

Note that there is not necessarily a one-to-one correspondance between screens and the physical monitors attached to a computer. For example, two monitors may display the same screen.

I thought I'd have a little fun to get my code fingers back after a week in Cabo San Lucas, and create a little AIR app that identifies each screen. The basics are:

  1. Identify the Screens - I knew I had 2 screens, so that was easy. The screens property is an array of Screen objects, so you can work with as many as the user has.
  2. Create something to identify the windows - I used transparent windows with a label to make things simple.
  3. Then position the new windows on the screens.
Actionscript:
  1. private var _screenOne:Screen;
  2.     private var _screenTwo:Screen;
  3.  
  4.     private function _identScreens( p_event:MouseEvent ):void
  5.     {
  6.         // I know I have 2 screens so I'll just grab those
  7.         _screenOne = Screen.screens[0];
  8.         _screenTwo = Screen.screens[1];
  9.  
  10.         // Now lets identify the screens
  11.         var identOne:IdentWindow = new IdentWindow();
  12.         identOne.title = "Screen One";
  13.         identOne.screenLabel = "1";
  14.  
  15.         // open the irst window and set its position on the first screen
  16.         identOne.open( true );
  17.         identOne.nativeWindow.x = ( _screenOne.bounds.width / 2 ) - ( identOne.width / 2 );
  18.         identOne.nativeWindow.y = ( _screenOne.bounds.height / 2 ) - ( identOne.height / 2 );
  19.  
  20.         var identTwo:IdentWindow = new IdentWindow();
  21.         identTwo.title = "Screen Two"
  22.         identTwo.screenLabel = "2";
  23.  
  24.         // open the second window and set its position on the second screen
  25.         identTwo.open( true );
  26.         identTwo.nativeWindow.x = ( _screenTwo.bounds.right - (  _screenTwo.bounds.width / 2 ) ) - ( identTwo.width / 2 );
  27.         identTwo.nativeWindow.y = ( _screenTwo.bounds.bottom / 2 ) - ( identTwo.height / 2 );
  28. }

Very straight forward and simple, but a fun little exercise.

You can download and install the app (with source) using the badge below:

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

Or, download the zip'ed flex archive:

http://john.realeyes.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Identify Screen Sample (4.59KB)
added: 07/05/2008
clicks: 40
description:

Adobe Announces the Open Screen Project

Wednesday, April 30th, 2008

Adobe has just announced the Open Screen Project.

The Skinny:

  • Restrictions on use of the SWF and FLV/F4V specifications will be removed
  • The device porting layer APIs for Adobe Flash Player will be published
  • The Adobe Flash® Cast™ protocol and the AMF protocol for robust data services will be published
  • Licensing fees will be removed – making next major releases of Adobe Flash Player and Adobe AIR for devices free

What does it really mean? Well it could be the promise of a universal application platform and the ability to write an application and deploy it everywhere. But, we know, with the likes of Apple and Google, who haven't really taken to the flash platform, that probably isn't the case. To me it means that Adobe is allowing the community as a whole to participate in the direction that the flash platform takes. To develop what what the community wants and thinks needs to be developed. This is a good thing - yay Adobe and yay Flash!

A few more links to read:

Ryan Stewart

Techcrunch

Wired

Developers: http://www.adobe.com/openscreenproject/developers/

Businesses: http://www.adobe.com/openscreenproject/businesses/

Beatport Downloader 1.0 officially launched!

Friday, April 25th, 2008

The Beatport Downloader launched officially on April 22nd. This is an application that the team here at Realeyes built. The official downloader description follows:

The Beatport Downloader allows you to download and organize your recently purchased tracks with one click. No more incomplete or lost music, easily see the status of all your downloads. Organize your music like never before through the Downloader's folder naming preferences. This feature allows for full control of how you store and search your music library. Install the application by clicking the Install button to the right. If you do not have Adobe® AIR™, it will ask you to install that first. Learn more about Adobe® AIR™ below.

About Beatport:

Beatport is the first authentic digital music store designed to service the evolution of the digital music culture, redefining how DJs and enthusiasts acquire their music. Beatport.com allows users to access the world of club music through secure, legal, hi-speed, high quality downloads in MP3, MP4 and WAV formats on a pay per download basis. With hundreds of labels and thousands of users world wide, Beatport is recognized as the leader for online, electronic dance music.

So, if you're interested, check out the downloader at www.beatportdownloader.com.

Flex and Using Meta Data

Saturday, January 5th, 2008

"Metadata is data about data" in the case of Flex it is going to describe our components, classes and their interactions/uses. For example the most familiar metadata tag in Flex and AS3 code is [Bindable] this describes a property that can be bound to (obviously). But metadata is not limited to properties in Flex, you can describe all sorts of things with metadata to make your application code much easier to decipher, easier to user as well and add functionality that might otherwise be missed. I'll try to describe a few of these so you can be on your way to using Flex metadata to improve how you write and use Flex code.

When creating metadata keep in mind that the metadata is bound to the next line in code. So if you are creating metadata for a class property or method, it should immediately precede the property declaration or method definition.

The [Bindable] metadata tag is great for class properties created in declarations but what about Getters and Setters - This is probably the next most used metadata tag that in my code and is an addition of the [Bindable] tag. In order to bind to a property that has a getter/setter you need to declare the event type that is dispatched when the property changes. We add the event="changePropertyName" to the [Bindable] tag:
[Bindable(event="changePropertyName")]

changePropertyName can be any string, but by convention "change" and then the name of the property (in hungarian notation).

Speaking of events, when a class broadcasts and event. You can add metadata for code hinting. To specify the event and its type for a class you can add the [Event] metadata tag. You'll need to specify a name and a type for this tag so FlexBuilder knows what event and type it will present in the code hinting. So the [Event] metadata tag will look like:
[Event(name='changePropertyName' type='flash.events.Event')]

One note about the name value - you'll need to use hungarian notation again so the code hinting displays correctly. So the event above changePropertyName may have a static const on the class CHANGE_PROPERTY_NAME if you follow the changePropertyName (lowercase for the first character and then uppercase for additional words) the code hinting in FlexBuilder will wake up just fine.

For Example - the following event metadata [Event(name="CHANGPROPERTYNAME", type="flash.events.Event")] results in the following code hinting:

Not very code-hinting'ish :)

Where as this [Event(name="changePropertyName", type="flash.events.Event")] results in:

Much better!

When building compoenents in AS3 you'll want to expose information about your component, default values, property names etc. In comes the [Inspectable] metadata tag. This tag is not required and there are a few rules that apply with how Flex Builder displays the information. You can check out the details in the live docs. There are many definitions that you can add to the [Inspectable] tag, but some of the more used declaration in my code are:

  • defaultValue - The initial value that is determined by the property declaration.
  • enumeration - A comma-delimited list of values that are accepted for that property's value.
  • type - Specifies the type of the value. Useful if you need a specific type instead of a generic type
  • variable - Specifies the variable to which the parameter is bound

These are just a few of the metadata tags. There is quite a lot you can do with metadata and it has solved some problems for me. If you'd like to learn more check out the live docs!

E4X XML Namespaces

Tuesday, November 6th, 2007

For XML that looks like the following response from Yahoo's weather service:

XML:
  1. <?xml version='1.0' encoding='UTF-8'?>
  2. http://us.rd.yahoo.com/dailynews/rss/weather/Sunnyvale__CA/*
  3. http://weather.yahoo.com/forecast/94089_f.html         Yahoo! Weather for Sunnyvale, CA
  4. en-us
  5. Tue, 06 Nov 2007 6:56 pm PST
  6. 60
  7.  
  8.  
  9.  
  10.  
  11.  
  12. <img alt="" />
  13.  
  14. 142
  15. 18
  16.  
  17. http://weather.yahoo.com/             http://l.yimg.com/us.yimg.com/i/us/nws/th/main_142b.gif
  18. 37.39
  19. -122.03
  20.  
  21. http://us.rd.yahoo.com/dailynews/rss/weather/Sunnyvale__CA/*http://weather.yahoo.com/forecast/94089_f.html Tue, 06 Nov 2007 6:56 pm PST
  22.  
  23. &lt;![CDATA[
  24. <img src="http://l.yimg.com/us.yimg.com/i/us/we/52/33.gif" alt="" />
  25. <strong>Current Conditions:</strong>
  26. Fair, 55 F
  27.  
  28. <strong>Forecast:</strong>
  29. Tue - Mostly Clear. High: 67 Low: 49
  30. Wed - Partly Cloudy. High: 71 Low: 49
  31.  
  32. <a href="http://us.rd.yahoo.com/dailynews/rss/weather/Sunnyvale__CA/* http://weather.yahoo.com/forecast/94089_f.html">Full Forecast at Yahoo! Weather</a>
  33. (provided by The Weather Channel)
  34. ]]&gt;
  35.  
  36.  
  37.  
  38. 94089_2007_11_06_18_56_PST

When you need to access the nodes with complex node names such as yweather:location think XML namespaces.
In the above example, look for the xmlns declaration in the rss node
- xmlns:yweather='http://xml.weather.yahoo.com/ns/rss/1.0'.
Creating a Namespace object using the declaration will allow us to access the nodes with complex names.
Creating a Namespace object is a pretty simple process:

Actionscript:
  1. var yweatherNS:Namespace = new Namespace( http://xml.weather.yahoo.com/ns/rss/1.0 );

Now we can access the node with the following code:

Actionscript:
  1. yahooWeaterXML.channel.yweatherNS::location
  2.  
  3. trace( yahooWeaterXML.channel.yweatherNS::location.@city ); // outputs 'Sunnyvale'
  4. trace( yahooWeaterXML.channel.yweatherNS::location.@region); // outputs 'CA'
  5. trace( yahooWeaterXML.channel.yweatherNS::location.@country ); // outputs 'US'

With the preceding example we need to know the namespace url ahead of time. E4X gives us the namespaceDeclarations() method that will return an array that contains the namespace declarations associated with the XML document

Using the namespaceDeclarations() method from the XML object:

Actionscript:
  1. var namespaces:Array = myXML.namespaceDeclarations();

Now we have an array of namespace declarations that we can use to dynamically declare Namespace objects and access our complex node names:

Actionscript:
  1. var yweatherNS:Namespace
  2. var geoNS:Namespace
  3. var nsLen:uint = nameSpaces.length;
  4. for(var i:uint = 0; i &lt;nsLen; i++)
  5. {
  6. var newNamespace:Namespace = new Namespace( nameSpaces[i] );
  7. if( String( nameSpaces[i].prefix ).toLowerCase() == "yweather" )
  8. {
  9. yweatherNS = newNamespace;
  10. }
  11. else
  12. {
  13. geoNS = newNamespace;
  14. }
  15. }

So we can access the geo and yweather nodes without any problems now.

Thinking about a Flex Project? Start here.

Tuesday, October 23rd, 2007

Yakov Fain of Farta systems has posted a great list of information that any Flex developer should check out before jummping head-first into enterprise (or any, actually) flex project.

Check out his post: How to prevent your enterprise Adobe Flex project from failure

My New Certifications

Monday, October 8th, 2007

Well while I was at Max, I figured I'd take a couple of certifications. I'm now officially certified in:

Flex ...

and Flash.

Yay me.

Continuous Integration - The pieces and parts!

Friday, September 28th, 2007
I finally have some time to post about our Continuous Integration (CI) set up for ActionScript 2.0 and Flex/ ActionScript 3.0 projects. To continue on from the first post, I'll explain all of the pieces & parts that are needed to get a similar CI system rolling.

First, the parts that you'll need for any project:

  • The project files - I've created a very simple same project that you can download for testing.
  • SVN REPO for your project
  • Cruisecontrol to manage the CI
  • ANT so we can build the projects - This is included in the Cruisecontrol download.
  • Java

Next if you are going to build ActionScript 2.0 projects you'll need:

  • Flash IDE for ActionScript 2.0 projects - Yeah a little bit of a bummer. You'll need to install the IDE on the CI server so the projects can be built. I'm sure you could set it up with MTASC, but we needed to compile in the IDE.
  • FlashCommand to build ActionScript 2.0 projects using the IDE (Mac Version) - Mike Chambers built this nifty tool and I've been using it for a while since I work in Eclipse with my ActionScript 2.0 projects.
  • ASUnit for unit testing your ActionScript 2.0 projects
  • The stand-alone flash player

Finally if you are going to build Flex Projects you'll want the following:

Yeah, that seems like a lot, but once everything is set up it is easy to maintain...almost set and forget. As a note, this is all going to be set up on a PC, I'm not a Mac guys, so sorry there, but I would hope the set up would translate nicely from PC to Mac. We now have the basic moving parts of the system. In my next few posts, I'll explain setting up the system:

  1. Setting up Cruisecontrol
  2. Setting up an ActionScript 2.0 Cruisecontrol project
  3. Setting up an Flex Cruisecontrol project
  4. Integrating ActionScript 2.0 project unit test results
  5. Integrating Flex project unit test results

I'll also provide sample files and packages as we go so you have something to start from.

Beatport Downloader AIR Application

Friday, August 31st, 2007
We've been working with Beatport.com for the last month on a downloader for their music.

The downloader is build in Flex with the Adobe Integrated Runtime. Lots of custom skinning and some cool File API stuff going on behind the scenes, as well as custom settings. Here are a couple of screen shots:

Welcome Screen:

Preferences Screen:

Downloading:

You can download the AIR app at www.beatportdownloader.com and sign up to download tracks at the beatport site.

Continious Integration for Flash and Flex

Wednesday, June 27th, 2007

Lately I've been working with CruiseControl, a continuous integration tool, and unit testing (ASUnit and FlexUnit) for our ActionScript 2, ActionScript 3/Flex projects. With the help of a couple of some great posts from eyefodder and Peter Martin, I've finally come up with a nice little system that isn't too much of a headache to set up and is very easy to maintain once it is set up.

When I get some real time, I'll be sure to blog about the set up and give some walk-throughs on how to get everything up and running.

The basic 'gist' of continuous integration is:

To build your code as soon as it changes. This helps to identify problems with the source code as quickly as possible after the problem is introduced. By introducting unit tests into the build process, you add more integrity to the build as well as your code.

So, like I said as soon as I get some real time, I'll be sure to put together some set up information.

Find entries :

Want to subscribe?

  Subscribe in a reader or,
Subscribe via email:

About me

I'm a senior developer at RealEyes Media, Adobe Certified Instructor and Adobe Certified Professional. Here you'll get my ideas and experience Flex, Flash, ColdFusion and related technologies as well as some generally off the wall stuff.