Screens, keys and mice ->

June 15th, 2009

imagine walking into a coffee shop and seeing a few booths with thin lcd screens, keyboards and mice. you notice the screen is attached to the wall with a flexible monitor arm. it looks like the screen can swivel around in all directions. the lcd is plugged into the wall but oddly there is no computer connected to it. on the screen is only the logo of the coffee shop. as you are pondering the scenario a man walks in, orders a drink and sits at one of these booths. as he sits down the screen changes, the keyboard and the mouse briefly light up. the man pulls out an cell phone and sets it on the table. a message on the lcd screen says, “device detected. connect to device?”. the man grabs the mouse and clicks the “yes” button shown on the screen. just then a message appears on his cell phone, “connect to screen at sbs2012?”. he clicks yes and the lcd screen goes blank briefly and then fades in and shows what looks like the mac os desktop. using the mouse he opens his email program. in he receives a message with an excel spreadsheet attached. he double clicks it and it opens up in microsoft excel. he clicks on a link in the excel spread sheet and firefox is opened. a few minutes later he opens photoshop and starts editing a photo. after a few more interactions, it is becoming apparent that he is running a full version of mac os.

just then a lady walks up to another table nearby that also has a lcd monitor on it. she sets her purse down and pulls out her iphone. this table doesn’t have a mouse or keyboard. are they out of stock? she reaches out and grabs the monitor in front of her, bends it back, pushes it down and pulls it toward her. it is nearly flat on the table but the back is tilted up to face her. like at the first table, it also asks her if she wants to connect her device to it. she touchs the “yes” button on the screen. ah, the lcd is a touchscreen! a message appears on her iphone and she confirms the connection. the lcd touchscreen goes black briefly and then her iphone screen displays on the monitor in high resolution. you can’t really see the screen so you sit up a bit. it doesn’t look like the full version of the mac os. it just looks like her iphone screen but a lot larger and much more space.

she then opens a white board program. as it opens she pulls out a fancy stylus pen from her purse. the white board program loads up. it looks like there is a chat module with some people already chatting in it. she clicks on the chat window and up pops a virtual keyboard. she types, “hi” and clicks send. the keyboard disappears. another person mentions they should get started. she types, “i’m ready”. just then a floor plan appears in the main area of the screen. with her stylus she circles some areas on the floor plan and makes some notes. she then clicks a button on the screen and she says out loud, “here is where i want the new room”.

another man walks in and he looks around the room. all the booths with lcd monitors are taken. he sits at a table with out either. he puts down his brief case and pulls out what looks like a laptop. it looks super light. he opens it up and the screen comes on instantly with just a logo on it. he pulls out a phone as well and pushes a few buttons on it. the screen on the laptop dims briefly and then the screen lights up with the windows operating system. he loads up a couple programs and then walks up to the counter to get a napkin. when he sits down he accidently bumps his coffee and it spills on his laptop. “ah crap” he says, “there’s another $60 down the drain.”

you look over at the first man. he is saving an excel file. it looks like he made some changes to it. in the lower corner of the screen he clicks the a button called “disconnect”. the screen dims and then displays the logo of the coffee shop. he puts his phone in his pocket and starts to head out. as he does he turns to the second man and says walmart has a sale on virtual laptops with oled screens and 1 month battery life for only $50.

so what’s this all about? it’s about having a larger interactive screen for portable or small devices. for example, a toaster, a refrigerator, a watch, a remote, etc. basically any electronic device that has options can connect to a remote screen and send a application to it. so for a toaster, you’d have a toaster app that lets you set the toast time. for a refriderator app you’d set the temperature. for a microwave you’d be able to save custom microwave settings. for a watch you’d be able to set the alarm or synchronize it to atomic time clocks. the thermostat would have a nice interface to set the temperature, etc. when phone or pda’s get powerful enough to run full software applications, i’d like to have the option to send the screen to a larger interactive screen and get input from it through a standards based protocol.

Cache busting your Flex SWF and the SWF Compilation Date

March 25th, 2009

So you’re working on a project and you go to check it in the browser and hit refresh. You test it again and the same problem exists. But wait! Are you looking at the SWF you just compiled or a cached SWF!??!?! There have been so many times I’ve been working on a problem and didn’t realize the SWF was cached in the browser. What if there was a way to tell if you are looking at a cached SWF or a newly compiled SWF? Well NOW YOU CAN!

Taking Igor and Paul’s work a bit further I created a class you can drop into your project with one line of code, that will tell you the compilation date of your swf, if the swf is being viewed for the first time or if it is cached and a version number you can use for testing. It also provides a reload button handler.

Here is a live demo.

Here is the project download. You must go to https://www.assembla.com/wiki/show/flexcapacitor and follow the online getting started guide to pull the class into your project.

Extending Flex Builder – some resources

March 16th, 2009

Extending Flex Builder has been extremely high learning curve and I’m not any where near accomplishing anything to finish this project.

I’ve collected links to some resources but I still can’t figure out the most basic thing. How do I capture an event when someone selects an item in design view? I really want to know how to do this simple task. Why is this so difficult?

Anyway, if you want to get started building a plug in for Flex Builder I’ll give you the resources I’ve found so far. Keep in mind that to create a plugin you will need to write it in Java and not Flex Builder.

Tutorial on creating your first Flex Builder Plug in
preface
link

Eclipse Plug Ins, 3rd Edition – Book
link

Extending Flex Builder by David Zuckerman and Mike Morearty – Video
video
example projects
Much gratitude for the previous two resources. Unfortunately neither go into the design view.

Adobe Documentation
docs
CodeModel
DesignModel
(out of date)

Design Model Example – Code Example
link (out of date)
Design Model Example 2 – Code
link (out of date)

It’s been a very frustrating experience. I would be happy if the design model code examples were up to date and could be project that I could import. I would be happy if I had an example on capturing events in the design view. I would be happy to know what classes are connected to what dependencies. For example, where do I find the class, “com.adobe.flexbuilder.editors.mxml.MXMLEditor” and “com.adobe.flexbuilder.editors.mxml.document.MXMLDocument”? This means the classes can’t be found and projects can’t be compiled. I would be happy if there was a Extending Flex Builder online group to discuss these issues. I would be happy if the documentation on this subject is connected to live docs so you can leave comments or get feedback.

What you need to know about Setters in AS3 Flex and the Bindable tag

March 3rd, 2009

If you ever put code into your setter you need to be aware that it may not run in some cases.

Update: As mentioned by Jabby Panda this has to do with the Bindings tag more than setters. Thanks again JP.

Look at the code below:

Actionscript:
  1. private var _currentId:String = "";
  2.        
  3. [Bindable]
  4. public function set currentId(value:*):void {
  5.     trace("code in the setter")
  6.     var x:Number = 10;
  7.     _currentId = value;
  8. }
  9.  
  10. public function get currentId():String {
  11.     return _currentId;
  12. }

The code in the setter will not run if the value matches the _currentId. If you follow the debugger when you set a value it steps through your code like this:

1. Some code sets the currentId property in some class
2. We enter line 0 of the currentId setter, the "public function set currentId" line
3. Next we go to line 0 of the currentId getter, the "public function get currentId" line
4. Then we go to the next line, "return _currentId;"
5. Finally, we jump back to the 0 line of the currentId setter where we started

If the "value" passed in matches the "_currentId" and if somewhere in the setter we are setting
"_currentId" to "value" then we exit the setter immediately and no code in the setter is run. The trace statement and the code beneath it isn't run.

To get around this wrap the code in a method, like this:

Actionscript:
  1. private var _currentId:String = "";
  2.        
  3. [Bindable]
  4. public function set currentId(value:*):void {
  5.     // we call updateId because if the value is the same as the _currentId
  6.     // then nothing inside the setter is run
  7.     updateId(value);
  8. }
  9.        
  10. public function get currentId():String {
  11.     return _currentId;
  12. }
  13.        
  14. // code
  15. public function updateId(value:*):String {
  16.     trace("code in the setter");
  17.     var x:Number = 10;
  18.     _currentId = value;
  19. }

I'm not sure if this is a framework thing or a AS3 AVM optimization. Anyway, now you know.

How to test your site across all browsers and OS’s on one computer

February 19th, 2009

This is still a work in progress but this is how I test my sites across all browsers and operating system's without uploading to a server and using only one computer. What's the catch? You need a Mac. ...wait for it. Ok, now that the Windows and Linux readers have stopped reading let's make fun of their operating systems. Windows is all like, too blue and stuff. And Linux users have to type a lot of stuff. HAHAHA. (long pause) Anyway, my disclaimer. I'm not a Mac fanboy. I like it now that I've been using it for a while. Before this I used Windows PC's and through a series of work related events I purchased a Mac. It wasn't "all that" but I prefer it now for development and if I need to I can run Windows independently through a separate partition using bootcamp or from within Mac OS X through VMware Fusion. Moving on...

Requirements

VMware Fusion 2
Mac
I have a Macbook with OS X 10.5.6, 2.4 GHz Intel and 4GB Memory. I don't know if it will work on your computer but if you can run VMware Fusion 2.0 then you should be good.

Setup your Virtual Machines

1. Create a new virtual machine for Windows XP - Tutorials

Create a Virtual Machine and Install Windows XP
Create a Virtual Machine from an Existing PC
Create a Virtual Machine from a Boot Camp Partition
Handle Windows Activation Issues

Note: It may ask you during setup if you want to share files or have a shared folder. You can choose no.

In general you might have 3 or more virtual machines. The main ones I have are:

Windows XP with IE7, Firefox, etc
Windows XP with IE6, Firefox, etc
Windows Vista with IE7, Firefox, etc

Virtual Machines

2. Once you have a virtual machine up and running power it down and go into the settings for that virtual machine. You can get to the settings by selecting the virtual machine in the Virtual Machine Library and clicking the Settings button.
Virtual Machine Settings

3. In the Network settings make sure the Network is set to use NAT. This option will, "Share the Mac's network connection (NAT)" with this virtual machine and ultimately share the site across all our testing browsers.
NAT Connection

Setup your local server

4. Install web server if you don't have one already. I recommend MAMP, XAMPP's inbred cousin (a PHP, mySQL and Apache server).

5. Start your web server. If you are using MAMP you can go to the MAMP Control Panel, Applications > MAMP and click the Start Servers button. When your server is running this button will change to "Stop Servers". MAMP Control Panel

6. Once your server is running open your browser to, "http://localhost:8888/" or "http://localhost:8888/MAMP/". It should show the MAMP start page. MAMP Start Page

Note: If you have more than one website, which I'm sure you do, you can separate them by placing each site in it's own folder in the MAMP > projects folder. You may need to create the projects folder if it isn't created already.
MAMP Projects

Note: You can switch between which projects you see when you go to, "http://localhost/" by opening the MAMP Control Panel and going to Preferences > Apache.
Setting the default project

Find your Server IP Address

1. Go to Applications and open Utilities > Terminal
2. Type ifconfig vmnet1 and press Enter. This will tell you the IP address of your server. You are interested in the address after the word "inet".
3. Copy and write down the inet address. This is an alias or loopback IP address, like http://localhost/, that points specifically to your pc. If you go to another computer and type this address, it will point to their pc.

Confirm the Connection

1. Open your browser that you had open before.
2. Browser to these url's again, "http://localhost:8888/" or "http://localhost:8888/MAMP/" except this time replace "localhost" with your "inet" address. For example, change this, "http://localhost:8888/" to "http://172.16.152.1:8888/" using your inet address.

It should point you to the same web pages as before. This is because "localhost" and your inet address point to your computer and the port, "8888" points to the MAMP server. If you couldn't get this to work go back and check that the inet address is correct. If you haven't got this step to work the following steps won't work.

3. In your browser window Copy the URL

Test the Connection in a Virtual Machine

1. Open VMWare and open a VM. For example, your Windows XP VM.
2. Open a browser and paste the URL into the address bar or type in, "http://localhost:8888/" or "http://localhost:8888/MAMP/" and replace "localhost" with your "inet" address. View the page. It should point to your server.

What I usually do at this point is bookmark the address on the virtual machines browser, place the bookmark on the toolbar and name it, "machost".

I also take the virtual machine window, drag it into another "Space" (drag to a corner) and display it full screen. I've setup a key combination to switch (ctrl + left arrow / right arrow) to switch between spaces. Now, when I switch spaces I go directly from full screen Mac OS X to full screen Windows XP and back again. It's really cool. You can also drag your browsers to the Mac dock and launch them from there.

Workflow

So, now that it's setup here is my workflow:

  • Create a site or project
  • Publish it to it's own directory in "Applications/MAMP/projects/project_name"
  • Point the server to it using MAMP Control Panel. MAMP > Preferences > Document Root > "Applications/MAMP/projects/projectName"
  • Test the site in Firefox using Firebug to inspect HTML elements and check for JavaScript errors.
  • Confirm it works in Firefox
  • Since I use Flex Builder which publishes a Flash Player swf I'm done. I don't have to test it on every browser.

If you are a poor soul who has chosen to work in HTML you know what you have to do and how much it sucks. I feel for you. If I was in your situation, which I was, I would learn Flex, which I did. Flex jobs are in high demand. And now with Flash Catalyst coming out (eta. late 2009) there are going to be new jobs for that.

BTW I'm working on a new Flex framework that would let you transition to Flex from HTML easily. Watch this blog for it. I've also wrote an article that shows you the differences between HTML and Flex code (the good stuff is after the first page). I wrote it just for you. The article contains a Flex project file that contains more than 10 examples of things with code comparisons between Flex and HTML.