Flex

July 14, 2008

Loading Remote Modules in Adobe Air Applications

I do not mean for the following post to be a permanent solution. More than likely this issue will be addressed in future releases of the flex and air sdk’s. I just need something right now and have not been able to come up with a good working solution. In fact, I hope that someone smarter than I can come along and point me in a better direction.

 

Airmods

 

The Problem : You created an AIR application that you want to distribute and you want to load modules remotely over the network or the network. It offers advantages over using the air Updater classes, mainly you can update the module without asking the user to update the installation.

The Issues : Loading a remote module is a security issue.  I first tried to use an <mx:ModuleLoader> tag in my air application and pointed it to my local web server. It did not work. I thought it was a crossdomain.xml issue. and eventually stumbled upon this example

remote modules

Which is forcing a download of the crossdomain.xml. It did not work. My next attempt was to download the module and attempt to load it as bytes. I tried multiple variations of this, even tried saving the file to the  File.applicationStorageDirectory.  It did not work.

I came across these two articles as well:

Remote Plugins and Modules in AIR by Ethan Malasky

Loading Modules / Runtime CSS into an Air App by Dan Shultz

 

 

A Solution : What I finally settled on was using the HTML class in air to load a remote application and then talking back and forth using LocalConnection.

Air App

Module App  ( you can’t have this swf running on your machine if you want the Air app to work)

 

While it’s not a perfect solution, it did allow me to accomplish what I wanted to do. Load remote modules in air and talk back and forth As I said in the beginning of this post. I do not think this will be a permanent solution.

Final thoughts on LocalConnection class.

 –  you only need one local connection / swf. The swf connects to the name of the connection it wants to collect messages from. Other swfs just need to know the name of the connection to send to.

— you set the client = to the context you want the code to be run.

— the underscore “_” on a preceding connection name is a convention in the docs that allows you to circumvent having to know the domain. Otherwise it’s something like mydomain:connectionName.

— allowDomain(“*”) and allowInsecureDomain(“*”) allows you to define what domains can send messages to the receiving local connection.

 

 

 

 

 

 

 

June 06, 2008

Flex BreadCrumb Navigator with Degrafa

BreadCrumb

I was able to catch a degrafa connect session last month in Denver and have been tinkering part time with the framework since then and I had a need to put together a bread crumb (like-ish) navigator so I decided try and use degrafa skinning to get a better look and feel, and it was surprisingly easy! Go Team.

At any rate, this was my first attempt at a BreadCrumbNavigator. I used ComboBox’s, because the lists are gonna have to be filter-able, but for now that code isn’t complete, yet. And also parts of the style is defined in the skins, so I’ll pull them out.

Here’s an example.  Here’s the code.

Learn about Degrafa here.

June 04, 2008

Displaying Character Codes in Flex

If you are capturing keyboard events and want to display the Character Code as Text all you need to do is use String.fromCharCode( …charCodes ) as in the following:

private function  keyDownHandler(event:KeyboardEvent):void

{

textInput.text = String.fromCharCode( event.keyCode );

}

 

Don’t you just love searching and searching for something that should be real simple and then feel like this:

 

Punch

 

May 20, 2008

Austin Flex User Group

I’m going to be giving a presentation this Wednesday, 5/21/2008, via Connect to the Austin Flex User Group. It will actually be two presentations. The first is a session on debugging from within Flex Builder. I’m going to focus on debugging techniques and also will explore remote debugging with ColdFusion, C# and Java. The second session will be a sneak peak on how you can leverage cloud services with a flex front end using the Smashed Apples framework, but specifically I’m going to be talking about Amazon Web Services and how you can leverage cloud services to make money. That’s always fun!

You can find out more info at: http://www.austinflex.org/.

If you’re in Austin, Texas I hope you can make it.

May 15, 2008

Overloaded Methods in Action Script ( sorta )

via wikipedia

Method overloading is a feature found in various programming languages such as Ada, C#, C++ and Java that allows the creation of several functions with the same name which differ from each other in terms of the type of the input and the type of the output of the function.

I’ve wanted overloaded methods in Action Script for some time now. After using it in other languages like java and c# it’s really easy to train your mind to solve one off scenarios with overloaded methods. Much more than an easy way to provide defaults for lots of different scenarios I enjoy crafting them to manipulate program behavior for base or core classes so that the actual implementation of the program becomes much more simple and easier to maintain.

I’ve tried several approaches to getting something similar and elegant in Action Script. Most everything came down to being a hack and turned out to be more work than was necessary to implement. I know overloading is more of an AS thing than an FB thing but thinking about new FB4 features  – (my comment is still awaiting approval as of this writing, I mentioned visual studio’s intellisense, oops) the other day made me decide to sit down and attempt overloaded methods one more time. This time I wanted to look at my prominent use cases and see if there was a way to solve this issue.

The two use cases I came across time and time again were 1) eventHandler methods that accept related and similar events: breaking them out to thier own function is do-able but is a lot of work when the difference of how you handle them is 1–off. And 2) methods that take a UIComponent of some sort that either gets or sets data. For example, if you were to loop over an array of form input controls reading / writing data to them you’d find the difference in how you set or get data on them is very similar but just a little different. A TextInput just reads and writes to the “text” property. A ComboBox might read and write to a selectedItem[”property”] value. Or you might want to pull the htmlText value off the RTE.

With those use cases in mind, I thought about how I could handle the two problems simply and elegantly, not necessarily by overloaded methods but just something that could slim my code down, drop a lot of casting, and at the very least make my code more maintainable and more precise in it’s intent.

The first obvious thing I saw was that I didn’t need to worry about the number of arguments, although the technique I’m gonna demonstrate can be used with multiple parameters or event the …rest params. In my case I’m handling an event or a view in both cases. The second thing I saw was that I’d almost solved this problem. In most of these methods I was just accepting either an Event or UIComponent or something similar. The next thing I noticed was that I was either casting from within switches or if statements and I was executing my computing goal from within my function or calling an outside function to accomplish something. With that in mind I decided calling an outside function was the best method. Indeed, once you identify what you want to do, with overloaded methods you can easily add more methods with different signatures that all call your most basic function. The names on all the methods are all the same. Your code becomes very clear in it’s intent. It’s not saveEmployee(), saveUser(), it just becomes save(user), save(employee).  It’s important to note that I understand the former examples are very intent. However, the latter examples, when working in teams or groups, it’s much easier to learn and remember save(variable) and when you want to save an object and you don’t know if it’s an Employee or User you don’t have to worry about it because in most languages the compiler creates your switch or if statements for you.

 ( you should be able to see the next step with overloaded methods, which is to dynamically interpret objects you didn’t know about save(order), save(product) for example. Ruby on Rails made this kind of processing retro the past few years, but I’ve been doing something similar with coldfusion argumentCollection for years now. Check out Proxy if you’re interested in that. )

So to get to the demo, I created two functions with the same name eventHandler(), eventHandler(). My first method is my bucket. It’s where I want to throw everything into. My second method is my target method, the method that does the cool kick ass thing I want it to. It takes very specific arguments. Obviously it didn’t compile. So I created a namespace in the default package ( so I don’t have to import it ) called overload. I made my first method public and put my second method in the overload namespace. I reworked how I called the overload method and it compiled. To interpret my arguments I use a switch statement or if statements depending, like i was before. My code then becomes very intent. It at least accomplishes my goals with overloaded methods.

Overloadcode

 

A couple thoughts on this technique. First, I looked for but didn’t find that overload was a future reserved word in ActionScript. It feels like something that might be. Secondly, ActionScript should define overloaded methods, the compiler should implement them and and FB should support them.

Here’s the live demo. Right click for source.

 

 

 

 

 

 

 

May 13, 2008

Have you seen my missing Event MetaData?

Missing_Milk_CartonMy new colleague and old college buddy jeremy mooer and I found some interesting things with metadata going on in the flex framework today. We had extended UIComponent and had a custom function that we had marked with a

[Bindable("enabledChanged")]

metadata tag so we could bind it because we wanted our bindings to execute when our component was enabled and disabled. Our bindings didn’t work and it turned out because the there was no

[Event(name="enabledChanged",type="flash.events.Event")]

metadata tag on the UIComponent. After a bit of researching I found this bug base issue. Turns out the status is closed however, which I hope means the flex team is double checking the metadata tags. There also seemed to be several bugs on other event and effect metadata tags. At any rate, we added the event metadata tag to our component and it worked.

 

May 05, 2008

The Smashed Apples Open Source Development Platform

Smashedapples2

The Smashed Apples Development Platform is an open source development platform that aims to help flex developers easily and quickly develop flex applications on cloud services, like Amazon Web Services, Google App Engine, the Google Web Api’s.

Many Clouds, 1 App.

Flex is perfect for leveraging cloud services. It was designed to have multiple sources of data. Your data can be in an xml file, a web service, or come from remoting directly into backend code. You can use Google App Engine to host your database, store your images in Amazon S3 and deploy the messaging through BlazeDS running on an Ec2 instance.

Smashedapples1

Why not all, and more.

 

V 099 Beta

We’re still currently in version 099 beta. But we decided to go ahead and solicit help and feedback from the flex community. We have ideas about what other flex developers might want, but it’ll be better if you just tell us.

More than a swc

Smashed Apples is more than a swc. It’s a development platform. The SmashedApplesSDK is just one piece of a much bigger puzzle. For example on Amazon we created a public Amazon Ec2 ami  ( ami-5640a53f -) that starts up an apache web server that deploys blazeDS and a java project that allows you to access the Amazon SimpleDB from within flex. The swc just ties it all together from within flex. Also, with that image you can open up messaging ports and do push pulls off of Amazon Web Services.

Besides being a swc to leverage cloud services, I’ve also been incorporating enterprise-level dynamic flex computing components that will help you create flex apps faster. Forms that know how to submit themselves. DataQuery objects that allow you to consistently create dynamic queries on backend resources.

Harnessing Cloud Services as Needed

Last August at Flex 360 Seattle I had the simple idea of using flex with Amazon Web Services to build a photo viewer using Amazon S3. The problem was I knew nothing about using Amazon Web Services. I wasn’t a linux administrator and every time I tried to use Amazon Web Services from within flex I just got frustrated. (What’s up with that freaking SSH KeyPair!!) I mentioned it to long time friend Jeremy Mooer and it turns out he knew everything about using linux on amazon web services that I didn’t. That simple idea turned into a full blown open source project. As I started looking into Cloud Services, I found there were alot more out there than I suspected. Jeremy Got busy creating Ec2 ami’s and I went about creating the flex sdk, and the smashed apples java ec2 java api. BlazeDS went Open Source, Google came out with AppEngine and it became very apparent to me that the applications of tomorrow are going to be built off of cloud services. ( Get ready to dump your RDBMS btw ). Businesses are going to create thier own mini cloud services. Relational Database Management Systems are going to give way to Object Persistent Systems. Words like Hadoop, MapReduce, Erlang and Mnesia are going to be found on more and more resumes. Smashed Apples has turned into my goto for being able to harness cloud services from within flex applications. Pay for what you use, right?

 

 

Future Development

We’ve already been looking into ways to incorporate Google App Engine, and more code will be coming soon. 

But in the future, we’d also like to support:

 

Learn More

Site: http://www.smashedapples.com/

Code: http://smashedapples.googlecode.com/

 User Group: http://groups.google.com/group/smashedapples

Simple Explorer: http://www.smashedapples.com/samples/explorer/SmashedExplorerApp.html

It currently runs off of the public smashed apples ami, it use blazeds for remoting, to the smashed apples java api that stores data in SimpleDB.

Help is Welcome

We are an open source project! If you’re a flex developer with some free time and would like to get involved please email me. There’s plenty to do. We’re easy to get along with, like to joke around and doing an open source project is a great way to get your name out there. We give credit where credit is due. 

Corporate Sponsors

Finding corporate sponsors has not been our goal when we created this project. That being said, I have received several inquiries about whether or not we have corporate sponsors for the project and we are open to the idea of having a corporate sponsor(s). If you would like to become a corporate sponsor please contact me.

 

 

 

April 16, 2008

My Struct() Custom Data Type that Binds

I’ve wanted to have a struct (hashtable) class that I can use for some time that also bind to controls like List, DataGrid, etc… Dictionary works fine, it just didn’t update the bindings. I just hadn’t figured out how to make sure how to make sure it’s dispatching events.  But I finally got around to creating a class that behaves more like a cold fusion struct that I can bind to. You can’t bind to it using brackets, but you can read values by key and set values by key. To bind by key there’s a method you have to go through.  You can get the class here

Struct.as (1 KB)

Here’s a brief run down of use cases:

Create a new Struct

[Bindable]

public var struct : Struct = new Struct();

Set a value 

struct[key] = value or struct.addByKey(key,value);

Read a value

struct[key] or struct.getByKey(key);

Bind to a value by key

{ struct.getByKey(key) }

April 14, 2008

Me to Flex Builder Additional Compiler Arguments: "UR Dumped"

I’ve never been dumped via text message but I hear it’s en vogue these days. If it happened to KFed I guess it could happen to anyone. So don’t be so surprised when I say I gotta give the boot (If i knew who to text about this I would) to the Flex Builder Additional Compiler Arguments. I will no longer waste my time fiddling around with a growing list of compiler options that runs off my screen and

Compilerotpions

makes me wanna pull my hair out. I really only have about a quarter of my compiler options visible in the image above. So I’m moving on to a flex-config.xml file. It offers easier readability ( who doesn’t like easy). There’s an example that comes with the SDK and best of all I can now use the same config file in Flex Builder as I do in my automated Build Process. ( We use Microsoft build btw ). Isn’t that nifty. There’s some other great benefits to this as well. If you’re sharing projects and using custom meta data or other custom compiler options and you are not checking in your .actionScriptProperties and .flexProperties files (because you all don’t have the exact same system configuration), just Check the flex-config.xml file in with your code and then your developers now only have to remember one command line option as stated below:

Compilerotpions2

( so fresh and so clean )

Simplify your ANT builds as well. Instead of having alot of <args> you can just use one.  -load-config. You get the same build in ANT as you did in Flex Builder. Also, you’re not limited to an all or nothing load-config=flex-config.xml file. If you change the = to a += you get the options in Flex Builder Plus whatever you define in your config file. So you can have yer cake and eat it too. The syntax for customized config files follows the same pattern as the flex-config.xml file. So you can use it as a template to get started or use it as a reference as you go.

This was a dumping that was a long time in the making. I need more granular control of my projects.

 

 

 

 

 

 

 

Every little -as3 namespace bit helps ... I think

While trying to eke out every little last bit of performance in my flex app I ran across the -as3 compiler option. The LiveDocs state

Defines methods and properties of the core ActionScript classes that are fixed properties instead of prototype properties. When you set the "-as3" compiler option to true, the AS3 namespace is automatically opened for all the core classes. This means that an instance of a core class will use fixed properties and methods instead of the versions of those same properties and methods that are attached to the class's prototype object. The use of fixed properties usually provides better performance, but at the cost of backward compatibility with the ECMAScript edition 3 language specification (ECMA-262). 

I added it to my app, and ran some profiling. Not sure what to look for. If you have experience using it feel free to chime in now. Otherwise I guess I'll get back to trying to out-fox myself  doing nothing because there is no more hope.

 

— UPDATE : hat tip to josh for pointing this out. The -as3 compiler is automatically turned on. You’re supposed to use the -es compiler option if you do turn it off. Here’s a current link to the livedocs that gives more info.