Agile UI

Klok + Klokwork + iPhone = :-)

noreply@blogger.com (Rob McKeown) — Tue, 10 Nov 2009 14:20:00 +0000

I lost count of the number of people who emailed me telling me how great it would be if there was some way to track time in Klok from their iPhone. Well we are getting ready to kick off the private beta of Klokwork, a hosted service for tracking time with Klok, which has the capability of syncing up time tracked from an iPhone (or any smartphone with a web browser) with time tracked from the Klok 2 desktop application.

Before the rumor mills start churning out false information, let me clarify what this is and isn't.

This is not:

an AIR application running on an iPhone
a Flex/Flash application running in mobile Safari
connecting the iPhone directly to the local SQLite databased used by Klok
going to be sold through the App store

This is:

a JQuery + JQTouch based AJAX application running in mobile Safari
able to be added to the home screen and accessed like any other application
connected to a hosted Java-based web application called Klokwork
synchronized with the Klok desktop application using Klok's new pluggable connector architecture

Agile and UX - I couldn't have said this better myself

noreply@blogger.com (Rob McKeown) — Thu, 05 Nov 2009 19:35:00 +0000

Although... I think I have said almost exactly this a number of times.

If you know me, you know that I usually don't completely agree with Jakob Nielsen. However, in this post about Agile and UX, I really can't disagree with anything he says in the post. I haven't read the entire report (I don't have an extra $148 at the moment) so it is possible that I will eventually find something that I can disagree with.

One of the things that really stands out for me is this quote:

You can't just design individual features; they have to fit together into a coherent whole — a whole that must be designed as well. Bottom-up user interface design equals a confused total user experience (the Linux syndrome)

I am not really a Linux user so I can't speak to the User Experience of Linux in general, but the idea that "Bottom-up" design leads to poor results is just plain obvious. Not to mention in my experience I have seen it happen numerous times. In contrast I have see first hand how a small investment "up front" in design proves to really pay off.

More Klok 2 screenshots

noreply@blogger.com (Rob McKeown) — Tue, 27 Oct 2009 12:37:00 +0000

Bear with me everyone. Trying to coordinate a beta program takes a bit more time than I imagined. Combine that with trying to wrap up the beta itself, and I am going slightly slower than expected.

Here are some screenshots of Klok 2 with some of the new features shown.

The main Klok 2 interface.

The Klok 2 Synchronization panel (With Klokwork connector installed)

The new Week picker

The new Time Picker

The Project view (with new Add Sub Project button) and Description tab visible

Sneak Peek at Klok 2.0

noreply@blogger.com (Rob McKeown) — Mon, 28 Sep 2009 12:00:00 +0000

More information is coming soon. There has been an amazing response to my request for beta testers. I haven't had a chance to contact everyone yet. So if you haven't heard from me, please be patient. In the meantime, here is a screenshot.

Flex Component - TimeField Update

noreply@blogger.com (Rob McKeown) — Mon, 28 Sep 2009 11:00:00 +0000

Thanks for the comments everyone. I have made a few changes to my TimePicker component based on some of the comments. The example now has the Klok 2 skin applied to it.

You can see the updated version here.

View the sample here

Flex Component - TimeField - Feedback needed

noreply@blogger.com (Rob McKeown) — Fri, 25 Sep 2009 13:16:00 +0000

While working on Klok, I have tried several different mechanisms for entering the start time or end time of an entry. Having looked at a bunch of examples such as the Yahoo Astra one, this one, this one and this one I started to see a pattern. Most of the examples are "stepper" based controls. What this means is that to get from one time to a different time it involves a varying number of clicks depending on the times. For example, if the control's current time was 3:35 AM and you need to change it to 12:19 PM, it requires a whole bunch of steps to get there.

What I really wanted was a way to pick the time in the fewest number of clicks and allow for just typing in the time directly if you happen to prefer that. The result is a true time "picker" control that is loosely based on the way a DateField works. There is still some work to be done on the skin but I think I am on the right path.

View the sample here

To use, just click the icon and pick the time. Or, just enter the time directly. The following formats are accepted:

1:49 PM
1P (Shortcut for entering 1:00 PM)
13:49

This control is my proposed solution to be used in Klok 2.

Please give it a try and see if it works for you. (Please try to break it if possible.) Whether you like it or not, please leave some comments so I can improve upon it.

UPDATE - I made some changes based on the comments and updated the demo. Which now has the Klok 2 skin applied to it.

Introducing KlokWork and Klok 2.0 Beta Programs

noreply@blogger.com (Rob McKeown) — Tue, 22 Sep 2009 12:25:00 +0000

I know it has been quite some time since I put out an update for Klok. In that time, I have been working on it... I promise. We have made the decision to go right to version 2.0. This is mainly because of the required changes to the way data was being stored in 1.x. Version 2 stores data in two ways. The standalone version stores its data in a local SQLite database. The version with KlokWork embedded, connects to an external system to store its data. This will be able to connect to external systems such as FreshBooks and Harvest as well as home grown systems that can expose an AMF based API.

So we are getting ready to have a select few users and small teams try out some of the new functionality. For more information on this program visit the Klok Beta Program page.

FlashBuilder 4 silently fails while launching

noreply@blogger.com (Rob McKeown) — Wed, 16 Sep 2009 20:42:00 +0000

Imagine this... You double click the icon to launch FlashBuilder and see the splash screen show up. Then you glance away from the screen and when you look back, FlashBuilder isn't running. No error Alert. No phantom process running in task manager... just nothing at all.

This happened a few times because I started to think I was imagining the part where I clicked the icon and saw the splash screen. So I would try to launch it again. It turns out that I am not going mad. FlashBuilder was really failing silently and just failing to launch. I tried deleting my workspace and launching again, but every time I did that it would recreate the workspace directory automatically and then fail to start.

Searching Google for "FlashBuilder won't start" yielded only one promising result but >the link was to a Jira defect that I can't see. I was about to call the professionals at ITFixed to have someone perform CPR on my machine when I figured I would try one last thing. Since FlashBuilder is basically Eclipse, I tried the old -clean command and like magic it came back to life.

Just open a command prompt to the directory where FlashBuilder is installed (On Vista: C:\Program Files (x86)\Adobe\Flash Builder Beta2) and execute the magic command:

Gumbo.exe -clean

I'm not quite sure what caused the problem in the first place. I had gotten a few out of memory errors (even though my machine has 4GB or RAM) but I can't say for sure that the problems are related.

LiveCycle Data Services 3 - Pricing

noreply@blogger.com (Rob McKeown) — Fri, 11 Sep 2009 15:17:00 +0000

I was poking around the Adobe Labs site and came across the Model Driven Development Getting Started Guide. This looks really, really cool. However, I couldn't find any information regarding which version of LiveCycle DS it will be part of. Given the hype about the new capabilities of Flash Building and LiveCycle, I'm sure there are many developers getting very excited about using it in real world projects. It definitely seems like it can save a lot of time.

I am anxious to download it and try it out, but before I put the time and effort into it, I would like to know if it is really feasible for the types of projects I work on and the budgets I need to work within. If there is going to be a $5000 per CPU type price tag on it, I will have a hard time justifying it to my clients.

To put my conspiracy theorist hat on for a moment, I wonder if Adobe is withholding the price until we all get "hooked." Once hooked, we may never want to go back to writing server side code which would allow them to charge us an arm and a leg.

Adobe InContext Editing problem with SIFR

noreply@blogger.com (Rob McKeown) — Wed, 26 Aug 2009 10:00:00 +0000

I recently had an opportunity to try out InContext Editing on a client project. Of course, 5 minutes after hooking it up I ran into a problem. If you happen to be using sIFR to add nice typography to your site, you will notice two problems.

First, the sIFR Flash content appears to be in front of the InContext Editing interface;
Second, the sIFR replaced text is not editable. If you make an editable region around sIFR replaced text, you get an error when you edit the page.

Luckily, there is a simple solution to the problem. If you open up the sifr.js file you will immediately notice that the Javascript is compressed in such way that it is pretty unfriendly. However, since luck is on our side, the only line you need to edit is human-readable. Scroll to the bottom of the file and you will see a line that looks like this:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac && (!sIFR.UA.bIsWebKit || sIFR.UA.nWebKitVersion >= 100)) {

That IF statement checks to make sure sIFR is ready to be setup. In our case what we want to do is make sure that that condition checks to see if you are in InContext Editing. We can tell by looking at the top.document.location to see if the page that is currently in the location bar is the ice/ide.html page. Changing the condition above to:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac && (!sIFR.UA.bIsWebKit || sIFR.UA.nWebKitVersion >= 100) && top.document.location.toString().indexOf("ice/ide.html") <= 0){

Doing so will cause sIFR to be enabled unless you are in the InContext Editor...problem solved.

Vista 64 bit and Type 1 fonts

noreply@blogger.com (Rob McKeown) — Mon, 24 Aug 2009 21:00:00 +0000

I came across a weird problem today where after installing a Type 1 font, it was still not available in Illustrator or Photoshop but was available in MS Word. It turns out that you need to install it in the normal fonts folder and put it in C:\Program Files (x86)\Common Files\Adobe\Fonts as well.

I don't know if this violates any font licenses so you should verify that you are allowed to have two copies installed this way.

I hate error messages like this

noreply@blogger.com (Rob McKeown) — Thu, 02 Jul 2009 18:55:00 +0000

TypeError: Error #2007: Parameter blendMode must be non-null.

I was working away on an AIR application and all of a sudden I started seeing this error message. It would show up when I had focus on something and clicked a button that removed the component's parent from the stage. As a result of the error, my app would stop working in all kinds of weird ways. For example, TabNavigators stopped working, but List controls worked fine. Some changes to my display list would work ok while others would result in part of the screen going blank.

I will spare the details of how I figured out what the problem was, but the root cause seemed to be that I was compiling my application with the 3.2 Flex SDK but I was compiling one of the Library projects that I was depending on with the 3.3 SDK.

Setting them all to the same version fixed the problem.

I didn't see any other posts through a Google search of that error, so I figured I would post it here.

It IS possible to do this in an AIR Application...!

noreply@blogger.com (Rob McKeown) — Fri, 12 Jun 2009 18:04:00 +0000

A couple hours ago, I posted a question regarding loading classes from a local SWF file. I poked around a bit more thinking that the problem had something to do with the ApplicationDomain. I took another look at the LiveDocs for ApplicationDomain and tried out the example on that screen without any luck. I even commented on the LiveDoc page. I was about to go file a bug but figured I would do one more Google search on the subject. I found this a post at Actionscript.org that seemed to describe the same problem. One on the replies mentioned that he was able to work around the problem by putting a half second delay betweeen the loading of the swf and any attempt to access the classes. So, I took the ClassLoader example from the ApplicationDomain LiveDoc example and added a 500ms delay to the complete handler:

private function completeHandler(e:Event):void {
      setTimeout(function(...params) {
         params[0].dispatchEvent(new Event(ClassLoader.CLASS_LOADED));
       }, 1000, this);
     }

After that small change I was able to load the classes from the external SWF. However, this doesn't solve the FlexUnit problem because internally, FlexUnit loads the test classes using getDefinitionByName(). Even if you pass the test cases in as Classes, it gets the qualified name and then calls getDefinitionByName() resulting in the error.

Is this possible in an AIR application?

noreply@blogger.com (Rob McKeown) — Fri, 12 Jun 2009 14:54:00 +0000

I have what appears to be a common question regarding a requirement that has come up two of my current AIR application projects. Here is the basic requirement.

The ability for an installed AIR application, to access and load Classes from a separate SWF that is located on the file system

I consider this to be a "plugin" architecture. Let me give you a concrete example. I am working on various AIR projects at any one time. For each I write FlexUnit tests. Because my tests are used to test my AIR applications, they need access to the AIR specific libraries. Rather than compile a unique FlexUnitRunner for each set of tests, I would like to create a single FlexUnitRunner application that allows me to load and run the tests from any of my projects.

I want to be able to have my test projects get built automatically when I change a class in FlexBuilder and then be able to hit a "refresh" button on my FlexUnitRunner application to rerun the tests with the changes.

My initial thought was that I could package my unit tests in a SWC and then have my runner unzip the SWC, pull out the library.swf, load it using RSLItem, SWFLoader or Loader. Then get amd instantiate my TestSuite from that set of tests and run it. This seemed to work in AIR 1.1 but doesn't work in AIR 1.5. The result in 1.5 is always "the Variable PreSaveProcessorTest is not defined"

My second thought was to compile a Module and load that at run time. I can load the module, but I can't figure out how to use AIR specific classes File, FileStream, etc. in the module. There is no option to "include Adobe AIR Libraries" like there is when compiling an SWC.

If I put my tests in a SWC project and reference them from my Module, the module can't use any of my classes that reference File for example. This isn't necessarily needed for my FlexUnit problem.

But if I reference the SWC project from my Module and try to get an instance of my ModuleTestSuite class, I can instantiate it. However I then get a FlexUnit error when I try to FlexUnitCore.run(...) my suite that says: Property metaData not found on ModuleTestSuite and there is no default value.

I have read many articles and posts regarding this, but none do exactly what I want:

http://weblogs.macromedia.com/emalasky/archives/2008/04/remote_plugins.html

http://stackoverflow.com/questions/344705/building-a-plugin-architecture-with-adobe-air

http://livedocs.adobe.com/flex/3/loading_applications.pdf

Has anyone actually got a working example of how this kind of thing can be done in AIR 1.5?

This RSLItem method is exactly what I was doing in Klok, to allow installation of my 3rd party app connectors at runtime. However, that no longer seems to work.

If someone from Adobe can show a working example that would be really helpful. I imagine there are quite a number of people wondering how to create a "plugin" architecture.

UPDATE: I resolved the issue with the FlexUnit error but I am now back to "the Variable PreSaveProcessorTest is not defined". I think the issue is that FlexUnit is doing a getDefinitionByName() which seems to be the problem.

Designing RIAs...the Right Way

noreply@blogger.com (Rob McKeown) — Tue, 12 May 2009 20:15:00 +0000

Anyone who knows me will tell you that I frequently preach that the only way to successfully design an application that is easy to use and meets user goals is to take a step back and think about it as a whole. I often get pushback with the usual "That sounds like waterfall to me" argument. Like I have said before, it doesn't matter what it is called to me as long as it works.

So the folks at Forrester set out to investigate how to create successful RIAs. The report focuses mostly on Cynergy who is one of the big guys in the field of RIA development (so they know what they are doing). I have to say that I am not surprised by the findings or by the way Cynergy designs and builds applications. To me it seems like common sense. But I am glad that this "official" report calls some attention to it.

You can buy the report from Forrester or get a free PDF of it from Cynergy.

Oracle Buys Sun - The future or MySQL

noreply@blogger.com (Rob McKeown) — Mon, 20 Apr 2009 19:36:00 +0000

With the news that Oracle is to buy Sun, I can't help but wonder what will happen to MySQL. Maybe it won't mean anything. Any thoughts?

Using Blaze DS in Commercial Applications

noreply@blogger.com (Rob McKeown) — Fri, 17 Apr 2009 15:07:00 +0000

A couple of days ago (Apr. 15, 2009) a post popped up on my blog reader titled "Using BlazeDS in Commercial products" which immediately caught my interest. I just assumed that you could use it in commercial products but I have never actually looked into the license. Basically the post indicated that you can't use BlazeDS in commercial products without buying an OEM license from Adobe but you can use it for internal applications. Of course I immediately commented and said that given that, why wouldn't I just always use GraniteDS. I went back a few hours later and found that the blog post was not even there anymore, let alone my comment.

So my question has yet to be answered... If I can't use the opensource BlazeDS for anything but internal applications, why would I spend any effort in every getting familiar with it?

If you want to read the original post, you can view the cached version here, at least for now.

Arabic Text as a Flex Button label?

noreply@blogger.com (Rob McKeown) — Fri, 20 Mar 2009 19:02:00 +0000

The Text Layout Framework that Adobe has made available on the labs site is a very cool display of the capabilities of Flash Player. However, what seems to be suspiciously missing from all the demos is an example of how to use Arabic text on a button. Just putting arabic in the MXML as the button label obviously doesn't work (otherwise... I wouldn't be posting this). What happens is the letters look like they are in reverse order. I can't read Arabic, but I don't think that would make much sense. Especially since none of the letters get connected with the appropriate ligatures.

Looking at the source code for the examples doesn't shed any light on the problem. If you have seen this done please comment with an example.

Klok - Linux Support - finally

noreply@blogger.com (Rob McKeown) — Fri, 20 Mar 2009 14:59:00 +0000

If you have tried Klok on Linux, you may have noticed that most fo the drag and drop functions didn't work. It turns out that, there were some issues in the AIR runtime that prevented this from working correctly. I have been told the the AIR 1.5.1 runtime for Linux fixes this issue. I have tested it out with Ubuntu and I have had one report of SUSE working correctly too. If you are using Linux upgrade you AIR runtime and let me know if you still see issues by submitting a bug report. Please be sure to specify your version of Linux.

Worst UI Ever - Another Error Message

noreply@blogger.com (Rob McKeown) — Wed, 04 Mar 2009 14:36:00 +0000

Its been a while since I last posted a Worst UI Ever entry. It seemed like most of my posts were about error messages and here is another one for the list.

This was an error message I received when activation a gift card. The form itself could not be much simpler, but the error message left a lot to be desired. What lead me to the error message was another seemingly simple set of instructions. In order to fully understand the situation, here is the quick back story. Stay with me, I'll be quick. As you have read on my blog I recently bought an IPhone. When I did so, my wife and I both switched to AT&T. When we got our phones we got gift cards in the mail as rebates for some accessories we each purchased. So we each got a gift card in the mail today.

The instructions said that you needed to go to this website and enter the card number and you will need to use your phone number ending in 8... yes that's right, the phone number ending in 8. Now, I'm no statistician but it seems fairly likely that you may have two phone numbers in a family that both end in the same digit... as was our case.

Given the situation, one of my phone numbers was correct, the other was wrong so I was presented with this form with a 1 in 2 chance of "failing". My first flip of the coin was incorrect, resulting in the error message. The first problem with this process is the failure of the system to understand users beyond the data associated with the card. It is true that the card in question was associated with a specific phone number ending in 8, but there is more to my and my account with AT&T than just that. If that level of consideration could not be built into the system, then at least the system that prints the letter that is mailed with the card should give you more than the last digit of the phone number. Using the last two digits would dramatically reduce the liklihood of getting this error.

The second, more obivious problem was that the error message was obviously written by a programmer. The fact that there is nothing on the screen labeled as a PassCode is more than a little confusing. Here is a rule for anyone involved with delivering a software product:

"Don't let programmers write text that is presented to the user."

Chances are, they don't want that responsibility anyway.

Programmatic Yahoo Skin Library update 2

noreply@blogger.com (Rob McKeown) — Tue, 03 Mar 2009 14:51:00 +0000

I have just posted another update to the Yahoo Programmatic Skins. This update includes the Radio Button, TabBar/TabNavigator, and Accordion skins.

You can see the demo and download the source here.

Free Flex Component - Gradient Editor

noreply@blogger.com (Rob McKeown) — Fri, 20 Feb 2009 14:05:00 +0000

I can't take credit for this component, but I came across it and thought is was pretty useful. It was created by Mariusz Tkaczyk (http://mariosh.com/)The original post is a few months old and I don't remember ever reading about it, so I figured that many of us may have never seen it. The screenshot below is from his blog, where you can download the source.

PixelBender Filter required... I think?

noreply@blogger.com (Rob McKeown) — Thu, 19 Feb 2009 21:53:00 +0000

If you read my blog you know that I don't currently have a Mac. This is true, however I have used enough of them to really fall in love with some of the UI details. One of them is the way in which when you minimize a window it kind of warps as it shrinks into the dock.

I don't know much about PixelBender effects, but this seems like something that could be accomplished. I am not even sure what keywords to use on Google to search for such an example. So, if you know of an example of how that effect might be accomplished in Flex using PixelBender (or without using PixelBender) I would really like to see it.

Programmatic Yahoo Skin Library update

noreply@blogger.com (Rob McKeown) — Thu, 12 Feb 2009 04:41:00 +0000

I have added some new skins to my programmatic version of the Yahoo Skin Library. The new additions are the ComboBox, CheckBox, PanelTitleBar, PanelControlBar, PanelCloseButton, ToggleButtonBar.

The demo below is the actual Yahoo Skin Demo MXML with my CSS attached. So, you will see that not every component in it is styled correctly yet. As I add new skins to the library, this demo will be updated.

You can see the demo and download the source here

The Case Against Flex-Based App UIs...Really?

noreply@blogger.com (Rob McKeown) — Wed, 11 Feb 2009 19:56:00 +0000

Last week, someone pointed out to me this article from intelligententerprise.com and asked for my thoughts on the author's arguments. In his article the author compares RIAs built with Flex to those built with Java Applets. While there are similarities between the two conceptually, any Flex developers who experienced building an enterprise application with AWT and Java 1.1 will surely agree that they have many differences.

So, here is my take on his "arguments".

"They almost always violate web accessibility guidelines"

No platform for web-based applications gives you accessibility entirely for free. Flash(Flex), AJAX and even web 1.0 HTML applications require effort to make them accessible. Flex gives developers an API to make applications keyboard accessible and able to be used by JAWS. If I am not mistaken, this capability existed with Flex before any AJAX framework had it. One could argue that making a straight HTML application accessible is far easier than making a Flex or AJAX application accessible. However, there are a lot of other user experience benefits that you can't get with plain old HTML.

"They create support nightmares"

He seems to be confusing AIR with Flex. Flex is a technology used to build applications. AIR is a desktop runtime used to run applications. AIR applications could be created with Flex, Flash or AJAX. Like any desktop application, pushing updates is not as simple as web-based ones. However, AIR does provide the ability for automatic updates that is easy to implement. "The potential for trouble remains" sounds to me like "There is no problem now but someday there might be"... you could say that about any technology. Flex applications that run in the browser have very little need to worry about this type of issue. Adobe frequently updates the Flash player but maintains backwards compatibility better than anyone I have ever seen. Applications built for Flash 5 will still run in the Flash Player 10. The only changes that may have caused problems are some security changes. While this is something that could break backwards compatibility, I would argue that it is worth it in those cases.

"They are prone to performance problems"

Memory leaks are just as likely in non-Flex applications. With JavaScript (AJAX) based applications it is very easy to cause memory leaks. Even Microsoft points out some patterns that cause them (http://msdn.microsoft.com/en-us/library/bb250448.aspx). Good developers can watch out for the types of coding patterns that cause memory leaks. FlexBuilder has tools to help developers identify leaks. With AJAX applications, it is more difficult.

"You can't easily modify them"

This is probably the most outrageous claim on here. He clearly doesn't understand how Flex applications are built. Changing the look and feel is one of the key features of Flex. Scalenine.com and fillcolors.com both showcase the ability to change the appearance of Flex applications in some cases very dramatically. The decision to not allow this type of "skinning" is really a business decision not a technology limitation. The demo situation he describes is rather amusing. None of the problems he describes had anything to do with Flex as the technology. Rather, they point out the vendor’s lack of a good interaction designer. He points out that the answer they wanted to hear was "You can modify the UI yourself on a role-by-role basis, and our platform is properly tiered, so we can show you how to customize it in a release-safe way." This is exactly what a well-designed/well-implemented application does allow for…regardless of technology.