EffectiveUI Blog

As many iPhone developers will tell you, provisioning an app for a device is a nightmare. The process, though esoteric at first, is actually not that difficult to understand after you go through it a few times. What IS absolutely unnerving is that the process is so fickle and often-times fails for no discernible reason.

So, here are a few tips in case you run into issues:

1. Be sure to install in this order: (1) mobile provision to XCode (you will see a warning if steps 2 and 3 have never been done before), (2) Install the WWDC certificate, (3) Install your certificate.
2. Be sure to drag the provision into both area in Organizer.
3. Clean and build, restart XCode, or even reboot before going too crazy. It’s annoying.

Posted in Uncategorized | No Comments »

Tonight I built a component that I’m sure most of us have built a half-dozen times before – a text input that displays a prompt inside of the component when no text has been entered and the component is not focused. The difference this time is that I built it as a Flex 4 Spark component, and I have to say I am pretty delighted by how simple it was.

Here are the basic steps I followed:

• Extended spark.components.TextInput to add promptText property and focused state
• Copied spark.skins.default.TextInputSkin as a new skin and added a SimpleText  component (promptView) to display the promptText
• Used a binding function to dynamically set the visibility of the promptView

View Example (view source enabled)

Once it was working properly, it was super easy to add a fade in/out when the prompt is shown and hidden.

A while back I built a suite of text input components that provide type-ahead functionality, suggestions, an inline button to clear the text, etc.  I’m looking forward to building those as Spark components, possibly with a couple of different skins.

Thanks to the Flex team for making an awesome new Flex and to Andy Hulstkamp for some great Flex 4 examples.

Posted in Uncategorized | No Comments »

I decided to give Safari 4 a try and the inability to set it to open the last set of tabs at start up is driving me crazy. I found a solution that, although not ideal, works well enough to get me by until Chrome comes out for Mac. Its an easy enough solution:

1. Create a new bookmark folder
2. Add the tabs you want to be opened to this folder and order them
3. Go to preferences and set “new windows open with:” to your start-up tabs folder

Now when Safari starts it will load those tabs. Unfortunately, these tabs will also load when you open a new window. And if you happen to have a tab open that you wanted to keep and you close the app its gone. You can go to “History->Reopen all windows from last session” in desperate situations. This isn’t as nice as just remembering the tabs that were open (like every other modern browser), but it’s passable.

Posted in Uncategorized | No Comments »

In an application I’m currently working on, I create images within the application and want to store them to load later. Because I store the image data in a model object that might be used many places in the running application, I keep the data in memory as a BitmapData object. This turned out to be a problem because you can’t write BitmapData objects to disk. Instead you have to write the data to a PNG or JPEG and then save the byte array from that object, and reverse the process to load the data. There may be another way but this is the only solution I could find. Here is my class:

package com.effectiveui.models.widget{    import flash.display.Bitmap;    import flash.display.BitmapData;    import flash.display.Loader;    import flash.events.Event;    import flash.utils.ByteArray;    import flash.utils.IDataInput;    import flash.utils.IDataOutput;    import flash.utils.IExternalizable;

    import mx.graphics.codec.PNGEncoder;

    [RemoteClass(name="com.effectiveui.models.widget.WidgetCategoryDataModel")]    public class WidgetCategoryDataModel implements IExternalizable    {        public var imageData:BitmapData;

        protected var loader:Loader;

        public function WidgetCategoryDataModel(){            loader = new Loader();            loader.contentLoaderInfo.addEventListener(                   Event.COMPLETE, handleBytesLoaded);                   }

        public function handleBytesLoaded(event:Event):void{            imageData = Bitmap(loader.content).bitmapData;        }

        public function writeExternal(out:IDataOutput):void{            var encoder:PNGEncoder = new PNGEncoder();            var bytes:ByteArray = encoder.encode(imageData);            bytes.position = 0; // may not be necessary            out.writeDouble(bytes.length);            out.writeBytes(bytes);                   }

        public function readExternal(input:IDataInput):void{            var length:Number = input.readDouble();            var pngData:ByteArray = new ByteArray();            input.readBytes(pngData,0,length);

            loader.loadBytes(pngData);        }    }}

You can download the class here.

Posted in Uncategorized | No Comments »

This is kind of old news as I neglected to post about this project for Adobe Flex Builder 4 (Gumbo). Prior to Max 2008 in October, I was on a team at EffectiveUI that was called upon to create some themes to be packaged with Flex Builder 4. They wanted preview the feature and the designs during Max, so we were on a pretty tight schedule.

We also had to work with some of the new components using FX-G. This was a nice introduction into the FX-G framework and how their new model for components and the styling and skinning of them.
Please note:
These themes were designed to be used with the Gumbo preview release during Max 2008. Since then, there have been some changes to the SDK, most notably the use of namespaces for Gumbo and Spark skins. I will write a post on this soon.

We ended up creating 6 themes, some varying from pure CSS, to some using graphical skins as both bitmaps and Flash symbols.

• Arcade
  
• Blue Steel
  
• Breeze
  
• Cobalt
  
• Graphite
  
• Zen Natural
  

The various themes were created by a few individuals on our production team, including Todd Hebenstreit, Jeremy Graston, Juan Sanchez, and myself (Zen natural).

These themes provide several options for providing your Flex application a little more customized look if you don’t want the basic default set.

Again, please note there have been some changes to the FX-G framework since these themes were created and these were designed to work with the Gumbo Build released during Max 2008, and some new namespaces have been introduced for Gumbo/Spark skins. I’ll be writing a post about this soon.

You can download the themes directly from this link:
http://download.macromedia.com/pub/labs/gumbo/gumbo_samplethemes_111708.zip
or visit:
http://labs.adobe.com/technologies/gumbo/

Posted in Design, Development | No Comments »

First, “suck” is too strong a word. The original goal when we developed our site 3 years ago was to show what we do rather than try to describe what we do with fancy marketing copy. The site certainly does that – we often hear:

“I went to your website and instantly understood what an RIA…

Click here to view entire article…

Posted in Adobe Flex, Development, user experience | No Comments »

RailsConf has been a fun time so far. It’s halfway through the second day, which is the first of regular sessions. I went to the tutorial sessions on Chef and Sinatra yesterday and caught up on some things I’ve been behind on, like Rack.

On Thursday I’ll be talking at 10:45 on Flex and Rails using RubyAMF. I’ll describe how things fit together, workflow, and all the basics that people may have heard before, but also spend a little time on the future and begging for help.

Here are links to the slides and code
http://www.slideshare.net/thillerson/flex-with-rubyamf
http://github.com/thillerson/preso_code/

Posted in Uncategorized | No Comments »

Posted in Silverlight | 1 Comment »

As mentioned in my brief talk at Microsoft MIX 09 a few weeks ago, we are working on a Silverlight application for a major photo-sharing website. This is the first post of a couple that will explain a few issues we ran into while developing a Silverlight 2 application.

First, Silverlight does not support rendering of GIF images with the <Image> component. You can use a component from ComponentOne to display GIF’s, but it uses WebClient or HTTPRequest to grab the raw image data to process, and therefore becomes restricted by cross-domain security policies. You can find a very clear explanation of Silverlight’s URL security restrictions here, but to summarize, the <Image> and <MediaElement> components are more lax when loading from one domain to another (they do not require that crossdomain policy files live on the server) so you are allowed to load content from domains other than the one that the Silverlight app was served from. However, when using WebClient or HTTPRequest directly (or direct sockets, for that matter), you must have crossdomain policy files on the deploying server.

So, how is this worked around? You can do a few things:

1. Set up a web server proxy solution - Server-side code does not have crossdomain restrictions, so you can deploy server-side code (on the server that is serving the Silverlight application) that will broker requests from the Silverlight client application, go out and get data from wherever you need it, and then tunnel it back through to Silverlight. This has been done for years with Flash and AJAX server requests, but in my opinion, it’s still as messy as ever. Thinking about it just makes me feel a bit dirty.

2. Deploy crossdomain policy files to ALL servers hosting image content - This means that the “major photo-sharing website” that I mentioned above will have to do some work. Fortunately for us, they are in the process of doing this anyway, but if they weren’t, this wouldn’t quite be an option. Quite a few public API’s do have crossdomain policy files in place for this very reason, but many don’t (including Twitter’s API).

3. Host the Silverlight application on a subdomain off of the same domain as the images? - In other words, can we host the application on http://search.yourphotosite.com and access images on http://images1.yourphotosite.com and http://images32.yourphotosite.com? The short answer is no, not without crossdomain policy files…which, according to #2 above, would solve our problem anyway. So, that doesn’t get us anywhere either!

4. When the API returns with a list of images, filter out all images ending in “.gif” - Okay, this is easy to filter out, but not so easy when dealing with the total number of results. We pagination results and show the total, so if the API says there are 4000 images and 2000 of those are GIF’s, we’re going to have a completely incorrect count at all times. Since this is public and popular image-sharing, there are A LOT of GIF’s. This option definitely does not solve the problem.

As far as I know, these are the only options available in this particular instance. We are hoping that the photo-sharing site will expedite the installation of the crossdomain policy files on their image content servers, but without that, we’d be out of luck.

Posted in euicommunity | No Comments »

After finding out that the stateful skinning approach was hitting the CPU pretty hard we had to go back and revise some skin/styling themes. This is can be a very time consuming process pending on the size of your theme and application.

Kevin Skrenes, a coworker and friend of mine who is a Senior Developer here at EffectiveUI, help smooth out the process for the conversion by writing a couple JSFL scripts for Flash. I really want to point out that Kevin Skrenes deserves A LOT of credit for this, but he doesn’t have a site or blog to publicize about it himself.

There are 3 scripts:
1) Create Stateless Symbols.jsfl
2) Remove Linkage Class Names.jsfl
3) Select Stateful Symbols.jsfl

Download the scripts here:
http://patrickhansen.com/resources/flash/StatefulToStatelessScripts_v1-0.zip

Install them in:
user/Library/Application Support/Adobe/Flash/en/Configuration/Commands
* this is on a Mac, not 100% sure what it is on Windows.
Make sure to quit Flash before installing.

Open Flash and you should see these commands under the Commands menu.

To convert:
Select the symbol(s) from the library you want to convert and use Create Stateless Symbols.

Linkage Class correction
Now, you may have some issues with the linkage Class. You should probably run this secondary script just in case to ensure you correct the linkage Class and ID to optimize it for stateless.

Removing old symbols
There is also a script to select any stateful symbols in the library, so you can delete them.

So, if you have some old legacy skins that are holding down your performance, go ahead and use these scripts to convert them, and hopefully save some time.

CSS
Remember, you will also have to correct your CSS for the new stateless skins.

Notes:
This is in its first round and there may be some issues with these scripts, so please let me know if you come across any.

Also, everything is not fully automated, so you may have to do some things manually.

It is possible to consolidate all of this into a single script, but we left them separate for our unique circumstances and scenarios.

Posted in Design | 1 Comment »