Jun/091
Enable iPhone 3.0 Internet Tethering
After the upgrading to iPhone OS 3.0 I haven’t been able to try out the new Internet Tethering feature of the iPhone. This can be very useful when you don’t have a Wifi connection available, and still need the internet. Turns out that enabling this feature was not that easy to do.
After some searching I found a blog post on Frank.be that describes how you can enable it. He created a custom IPCC file for Proxims users that contains the settings to enable tethering. Read more about it on his site, the explanation is pretty straight forward. Just make sure you select the option (alt) button while clicking the restore button, otherwise you will restore your complete iPhone. It worked for me.
Jun/093
Timy – Time tracking in 7th gear using Adobe AIR
Recently my company (Nascom) released beta, an Adobe AIR desktop client that we have been using internally for more than a year now. The application has a long history and was initially built to gain knowledge about Adobe AIR and to make time tracking using Basecamp easier to do. I don’t know if any of you use Basecamp for time tracking but it is not the easiest thing to do. Probably most of you use Basecamp for the project management and collaboration features, but you can also use it for time tracking. The web interface doesn’t provide you with a quick overview of projects and todo items.
The main idea was that if we had a simple way of adding hours to a project for a certain day, we could loose less time filling in our time sheets. Development started before Adobe AIR was released and at the time this seemed the perfect technology for such an application. We could leverage the power of Adobe AIR because it uses SQLite for local data, shows notifications, and runs in the system tray so that we don’t forget to fill in out time sheets. The application is built using Flex 3 and the Cairngorm framework. Credits for the design of the application go completely to Kristof who did a great job.
One of the biggest reasons for using Adobe AIR, is that the Basecamp API doesn’t allow you to get the data that’s necessary for the Timy projects tab in one API call. You need to first get all the projects, and then for all the projects the to-do lists, and then you can get the to-do items. If you work in a company that does a lot of projects this can take a while to retrieve. That’s why the application synchronizes this data (projects, to-do lists and to-do items) with a local cached SQLite database. Only when the app detects that there is a new (or removed) project it asks the user to synchronize again. Does this make any sense? Well it did for us and that’s why we released this application as it is. If you might find a use for it or not, it was still fun to develop.
We also track the usage of the AIR application in real-time itself using Pubblegum. So if you see some extra outgoing API calls, then this is what is going on. We don’t log any sensitive data, only basic actions like: open, error, sync, login and close. We also send along the version number to see which versions are running in the field. You can compare it with Google Analytics for Adobe AIR applications with offline support.
But before you get all enthusiastic and start installing the app, you should now a few things. Timy is a Basecamp client, so if you are not a Basecamp user then Timy is of no use for you. You also need to use Basecamp in certain way, and enable time tracking on your to-do lists. It’s pretty easy to do, but if you don’t work like this, there will be no tasks for your users. Also important to know is that we see the to-do item for a project as a profile (ex. Development, Design, Html, …) and not individual tickets, tasks or to-do items that you can check off. This is very important. But you can still use both normal to-do items and time tracking enabled to-do items because Timy only looks at time tracking enabed to-do lists.
You can read more about how to configure your Basecamp projects in the “get started” section, and you can find more info on how to use Timy in the “documentation” section of the site. I don’t normally read these kind of pages either, but I would strongly suggest to read the get started page. If you have any feedback for the app please add it to the feedback forum or drop me a comment here.
Jun/091
Bidirectional (two-way) data binding in Flex 4
I use data binding a lot when writing Flex applications. One of the new features in Flex 4 is bidirectional, or two-way data binding. This blog post shows you a simple example that demonstrates the difference between one-way and two-way data binding syntax.
The first example is the most commonly used data binding scenario. It uses the curly braces syntax. In the example a String variable myName binds to a TextInput field. However if you change the value in the input field, the underlying String variable is not changed. This is because this kind of data binding is only one-way. There is a way to achieve bidirectional data binding in Flex 3 and you can find more info in this article, but I will not go into detail about that in this post.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:String id="myName">Alain</mx:String>
<mx:TextInput id="nameInput" text="{myName}"/>
</mx:Application>
For example in Flex 3 the DataGrid component had two-way data binding enabled if you made it editable. In Felx 4 it has become very easy to achieve bidirectional binding. The following example is based on the same scenario as the previous one, only now the underlying String value is updated.
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<fx:String id="myName"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:TextInput id="nameInput" text="@{myName}"/>
<s:SimpleText text="{myName}"/>
</s:Application>
That’s basically it. The @{} syntax makes sure that the myName variable is changed and because the SimpleText label is also binded to the myName variable the value is also updated.
These are pretty simple examples, but you can find more information about the Flex 4 data binding techniques in the following articles:
Jun/091
Useful actionscript libraries part 2
A while ago I wrote a blog post about a list of useful actionscript libraries on Google Code. So this is a follow up post, and an addition to the previous list. Not all projects are hosted on Google Code, so hence the slightly different title.
Here’s the list:
- AlivePdf is a client side AS3 PDF generation library for Adobe Flash, Flex and AIR. It can also be used to display PDF files.
- HydraMVC is the result of a total rewrite of the PureMVC API exclusively for Flex, allowing Flex developers to take advantage of the PureMVC paradigm while leveraging native Flex features. Currently we mostly use the PureMVC framework, but this could be interesting for big Flex applications.
- FlexMonkey is a testing framework for Flex apps that provides for the capture, replay and verification of Flex UI functionality. FlexMonkey can record and playback Flex UI interactions, and generates ActionScript-based testing scripts that can easily be included within a continuous integration process.
- Open Flash Chart is a library that contains a number of frequently used charts like line, bar, pie, scatter charts and some more.
- Merapi is a Java™ application, intended to run on a user’s (client) computer. Merapi connects other Java™ applications on the user’s computer to Adobe AIR™ applications that the user has installed. In May, Merapi has officially become Open Source!
- Efflex is a library with a list of effect that can be used in Flex applications. Here’s a list of available effects: Slide, CoverFlowPapervision3D, FlipPapervision3D, GridZoom, Grid, List, Squash, FadeZoom, Fade,TileFade, MovieClipEffect,…
- Spring Actionscript aims to bring Inversion of Control to ActionScript for use in Flex, AIR and even Flash applications. It contains an IoC container, based on that of Spring, a reflection API, extensions for the Cairngorm and PureMVC frameworks and several interesting utilities.
- The last one is actually not an actionscript library, but still very interesting if you are into application development using Flex. flex-mojos is a collection of maven plugins to allow maven to compile, optimize, test and … Flex SWF, Flex SWC, Air SWF and Air SWC.We are currently using it for Flex projects that rely heavy on a Java back-end.
Some of the libraries I have used or played with already, and others I still need to checkout. Hope you find something useful here.
Jun/090
Flex 4: Create a simple Unit Test in Flash Builder
One of the new features of Flash Builder is the support for FlexUnit (the Unit testing framework for Flex applications). You could use FlexUnit in the past, but as from Flash Builder it’s a piece of cake to create Test classes for your own code. You just need to follow these simple steps.
NOTE: This demo needs the latest beta version of Flash Builder. Be aware that this is still a beta version and the following could still change in future versions of Flash Builder.
Before we start we need to create a new Flex Project. After creating your project you need to create a class with some functionality that we can use in this example. The typical classes to unit test are classes that have a public interface and have a complicated implementation. When you change something inside the class implementation, the public methods still works as expected. But for the sake of simplicity we will create a very simple class with some simple behaviour.
{
/**
* Class that does something.
*
* @author alain
*
*/
public class MyObject
{
/**
* The constructor
*/
public function MyObject()
{
}
/**
* Returns the numeric vallue five
* @return 5
*/
public function giveMeFive():int
{
return 5;
}
/**
* Returns the letter A
* @return "A"
*/
public function sayA():String
{
return "B";
}
/**
* Returns always true
* @return true
*/
public function alwaysTrue():Boolean
{
return true;
}
}
}
Alright, now we have a Class that we can test. To create a new Unit Test you select New > TestCase Class and the following window should appear:
Enter the Name of the TestCase Class (in this case: MyTestClass), select the Class to test (in this case: MyObject) and select Finish. Flash Builder now generates several items. First a new folder name flexUnitTests is generated. Also a new mxml file named flexUnitCompilerApplication.mxml is generated. This file is necessary because the Unit Tests need a swf application that can be started and the tests can be executed. The last and most important file that’s been generated is the TestCase itself. The only thing you now need to do is implement the actual test methods. In the following code example the test methods are implemented:
{
import flexunit.framework.Assert;
import flexunit.framework.TestCase;
import net.hufkens.MyObject;
public class MyTestClass extends TestCase
{
// Reference declaration for class to test
private var classToTestRef : net.hufkens.MyObject;
public function MyTestClass(methodName:String=null)
{
super(methodName);
}
//This method will be called before every test function
override public function setUp():void
{
super.setUp();
classToTestRef = new MyObject();
}
//This method will be called after every test function
override public function tearDown():void
{
super.tearDown();
}
public function testGiveMeFive():void
{
Assert.assertEquals(classToTestRef.giveMeFive(), 5);
}
public function testSayA():void
{
Assert.assertEquals(classToTestRef.sayA(), "A");
}
public function testIsTrue():void
{
Assert.assertTrue(classToTestRef.alwaysTrue());
}
}
}
If we now right-click the project and select Execute FlexUnit Tests we get the following message:
It says we need to create a Test Suite, otherwise Flash Builder can’t execute the tests. To create a new Test Suite you select New > TestSuite Class and the following window should appear:
Now select Execute FlexUnit Tests again and your Test are executed. As you can see, one of the tests has failed. A quick view in the source of sayA() method reveals the problem. Fix the problem and all the tests should succeed now.
That’s all there is to it. Flash Builder makes it a lot easier to create Unit Tests for your libraries and components. This is a good thing, so you should definitely check it out.
Jun/091
Flash Catalyst beta 1 for Mac: License Expired
After installing the latest Flash Catalyst beta 1 on my Macbook, the application didn’t want to start because this problem:
License Expired
Licensing for this product has been expired.
I had the MAX Preview version installed, so this was probably causing the problem. If you are installing the Windows version or haven’t installed the MAX Preview before, you won’t have the problem.
To solve it I tried a lot of uninstalling and re-installing, but in the end these five steps did the trick:
- Run the Adobe Licensing Repair Tool
- Uninstall Flash Catalyst
- Reboot the computer
- Running Repair Tool again but with 0 option
- Reinstall Flash Catalyst
It worked for me, so let’s hope it will work for you.
Jun/090
Flex 4: DataGroup and ItemRenderers
Today the beta’s of Flash Catalyst and Flash Builder became available for download on Adobe Labs. This means that we can now start to play with the new Flex 4 SDK. There has been some controversy lateley about the pro’s and cons of Flex namespaces. I was in the pro camp as you can see in this post I made some time ago. But enough about this discussion 
If you want to have more information about the new Flex 4 SDK and what has changed you can go to the following articles:
- What’s new in Flex 4 SDK beta by Matt Chotin (Flex 4 SDK Product Manager)
- Differences between Flex 3 SDK and Flex 4 SDK beta by Joan Lafferty
- Overview of Flex 4 by Sean More
- Flex 4 & Custom Layouts by Andrew Trice
- What’s new in Flash Builder 4 beta by Tim Buntel (Flash Builder Product Manager)
For my first blog post about Flex 4 I want to show you one of the new components, and that’s the spark.components.DataGroup component. Why? Because I have been using the old mx.core.Repeater a lot and there is no repeater in the new spark components.
In the old days of Flex 3 you could use the Repeater class when you needed a very specific view for customizing a list of data. It would look something like this:
<mx:Repeater id="myRepeater">
<mx:dataProvider>
<local:Person firstName="Alain" lastName="Hufkens"/>
<local:Person firstName="Hugh" lastName="Hefner"/>
<local:Person firstName="Jimi" lastName="Hendrix"/>
</mx:dataProvider>
<mx:HBox>
<mx:Label text="{myRepeater.currentItem.firstName}"/>
<mx:Label text="{myRepeater.currentItem.lastName}"/>
</mx:HBox>
</mx:Repeater>
</mx:VBox>
This example here is pretty simple, but it gives you a list that displays the persons showing the first and last name. You could extend this with the person’s photo or address.
With the new DataGroup component you need a different approach and you need to work with ItemRenderers, something that already existed in the Flex 3 SDK. The next code snippets show you how to do this:
The first example uses the spark.skins.default.DefaultItemRenderer that can be used for very simple lists. By default the list outputs the toString() of an Object or in this example shows the String from the DataProvider.
<s:layout>
<s:VerticalLayout gap="1" />
</s:layout>
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Frog</fx:String>
<fx:String>Cat</fx:String>
<fx:String>Mouse</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DataGroup>
The next example uses the spark.skins.default.DefaultComplexItemRenderer. This ItemRenderer renders different Graphical and complex components. You can have a Component like a Button, DropDownList, … next to a graphical object like a Rect, Ellipse, … next to each other.
<s:SolidColor id="fillColor" color="#fff000"/>
</fx:Declarations>
<s:DataGroup itemRenderer="spark.skins.default.DefaultComplexItemRenderer">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:dataProvider>
<s:ArrayCollection>
<s:Button label="Button" />
<s:Rect fill="{fillColor}" width="20" height="20"/>
<s:Ellipse fill="{fillColor}" width="20" height="20"/>
<s:DropDownList />
</s:ArrayCollection>
</s:dataProvider>
</s:DataGroup>
That’s all pretty cool but it’s not what I needed. I just needed something that can present my Person object. So in this case we need to create a Custom ItemRenderer. This is a very easy thing to do and the end result is a lot better then the Repeater solution.
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:dataProvider>
<s:ArrayCollection>
<local:Person firstName="Alain" lastName="Hufkens"/>
<local:Person firstName="Hugh" lastName="Hefner"/>
<local:Person firstName="Jimi" lastName="Hendrix"/>
</s:ArrayCollection>
</s:dataProvider>
</s:DataGroup>
And this is the code for the PersonItemRenderer:
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Declarations>
<s:SolidColor id="normalColor" color="#000000"/>
<s:SolidColor id="hoveredColor" color="#FF0000"/>
</fx:Declarations>
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
</s:states>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Ellipse fill="{normalColor}" fill.hovered="{hoveredColor}"
width="10" height="10" />
<s:SimpleText text="{data.firstName} {data.lastName}"
color.hovered="#FF0000"/>
</s:ItemRenderer>
You can see the demo (including source) here.
May/090
Silverlight and Basic Authentication
After installing Visual Studio 2010 beta 1 I decided to play around with Silverlight 3 and the new IDE. What better example to try out than connecting a Silverlight client to the Basecamp REST API. But again like the Twitter API, the Basecamp API uses Basic Authentication (see my previous post: Flex HTTPService and Basic Authentication) and also in the case of Silverlight, it appeared to be a problem.
The first thing I tried was adding the Authorization header to the Webclient, like you can do in Actionscript.
String.Format("https://{0}/{1}", basecampUrl, "projects.xml");
var webclient= new WebClient();
Byte[] authbytes =
System.Text.UTF8Encoding.UTF8.GetBytes("username:password");
webclient.Headers["Authorization"] =
"Basic " + Convert.ToBase64String(authbytes);
webclient.DownloadStringCompleted += downloadStringCompleted;
webclient.DownloadStringAsync(new Uri(url));
This didn’t work because the Authorization header can’t be set through code because it is restricted. Check this page for the list of restricted headers. Some can be set through a specific property, but not the Authorisation header. The error message I got was this:
The 'Authorization' header cannot be modified directly
Then I checked out Silverlight 3 and discovered the Credential property. You can set the Credential property to an instance of a NetworkCredential object.
String.Format("https://{0}/{1}", basecampUrl, "projects.xml");
var webclient= new WebClient();
webclient.Credentials = new NetworkCredential("username", "password");
webclient.DownloadStringCompleted += downloadStringCompleted;
webclient.DownloadStringAsync(new Uri(url));
But too bad, the exception I got this time was even more strange:
The property is not implemented by this class
Seems like there is still something missing in the beta 1 version of Silverlight 3, so please Microsoft fix this or just remove the property if it’s not implemented.
So this means that the only way to get the Basic Authentication working from Silverlight at the moment is writing an extra server-side proxy class that delegates the calls and does the authentication. Or maybe there is another trick in the Silverlight Webclient class.
May/096
Visual Studio 2010 Beta 1 on Windows 7 RC
And now for something completely different!
After installing Microsoft Windows 7 RC on my Macbook in Boot Camp I decided to give the new Visual Studio 2010 beta 1 a try. If you want to try it out yourself checkout this blog post with various links to download pages. The installation of Windows 7 and Visual Studio both went pretty smooth. I already installed Windows 7 RC in VMware, but that was too slow for doing some actual development. So I decided to try out Boot Camp for the first time and install Windows 7 in all it’s glory and all.
However there were some issues:
- My sound didn’t work. But this can be easily fixed. Go to the Realtek downloads page and click the “High Definition Audio Codecs (Software)” link and click Accept on the next screen. I downloaded the executable and after rebooting I got my sound back.
- The webcam is not supported. Actually that’s not that big of a deal, because my main OS is still OSX, and here I don’t really use it. But it would be nice if that was possible in the RTM version of Windows 7.
- And last but not least. Because it is a Macbook I don’t have a right click button. I’m still looking for a solution but working in Visual Studio without your trusty context menu is not that easy. I suppose connecting an extenal mouse will work, but I haven’t tried it yet.
UPDATE: I found a small application that enables the right click if you hold the ctrl button while clicking. You can download the Apple Mouse Utility here.
If you want to install Visual Studio 2010 beta 1, you can download the ISO file or use the Web Installer. The advantage of the Web Installer is that the inital download is only 5 MB and it only downloads what you need. If you want to create a Silverlight 3 (or 2) project you will need to install the extra Silverlight Developer Runtimes
.
Here are my first impressions of the new Visual Studio 2010 beta 1:
- Nice fresh look and feel. It’s not the Expression Blend design (luckily) because in the end it is still a tool for developers, so functionality is more important.
- It has support for .NET 2.0 up to the latest 4.0 beta. I know VS has already had backwards compatibility since 2008, but it’s still a necessary feature.
- Startup time is pretty fast. Listen up you Eclipse/Flex Builder/Flash Builder!
- Support for Silverlight out of the box. You need to install the developer runtimes, but the tools are already in the IDE. Also some drag and drop design capabilities are available for basic UI design.
- You can start experimenting with Silverlight 3 beta 1, which is cool.
Well that wraps up my experiences with Windows 7 and Visual Studio 2010 for now. I am really looking forward for the RTM version of Windows 7 so I can upgrade the laptop I work on. I have been working with Vista for the last 2 years and if I could use the 64bit version I can finally use the full potantial of my 4GB RAM.
Now back to enjoying the good weather
May/092
Retrieve Basecamp data with BasecampAS3Lib
One of the projects I am currently working on is an open source Actionscript library that wraps the Basecamp REST API in an easy to use AS3 classes. The project is called BasecampAS3Lib an can be found on Google Code. The project is still in development and I did some serious refactoring yesterday.
At this point the services can only retrieve data from Basecamp and you can already experiment with the ProjectService, CategoryService and TodoListService classes. The other services still need to be implemented. But this post will give you a sneak peak on how simple it can be to retrieve data (in this case project data) from Basecamp with this lib.
NOTE: This code only works in an Adobe AIR application (see below for more details why).
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:basecamp="net.hufkens.basecamp.*"
xmlns:services="net.hufkens.basecamp.services.*"
layout="absolute" viewSourceURL="srcview/index.html">
<mx:VBox width="100%" height="100%">
<mx:HBox width="100%">
<mx:Label text="url:"/>
<mx:TextInput id="apiurl" width="100"/>
<mx:Label text="username:"/>
<mx:TextInput id="username" width="100"/>
<mx:Label text="password:"/>
<mx:TextInput id="password" width="100"/>
<mx:Button label="get projects"
click="getProjects()"/>
</mx:HBox>
<mx:DataGrid dataProvider="{projects}"
width="100%" height="100%"/>
</mx:VBox>
<basecamp:BasecampAPI id="api"
url="{apiurl.text}"
username="{username.text}"
password="{password.text}"/>
<mx:ArrayCollection id="projects"/>
<mx:Script>
<![CDATA[
import net.hufkens.basecamp.events.BasecampEvent;
private function getProjects():void {
api.projectService.addEventListener(
BasecampEvent.GET_LIST, handleGetList);
api.projectService.addEventListener(
BasecampEvent.FAIL, handleFail);
api.projectService.getList();
}
private function handleGetList(event:BasecampEvent):void {
projects = new ArrayCollection(event.data as Array);
}
private function handleFail(event:BasecampEvent):void {
Alert.show(event.data as String);
}
]]>
</mx:Script>
</mx:WindowedApplication>
However there is still an issue with the authentication. Apparently using basic authentication from a Flash/Flex application is not that trivial as it would sound. A while ago I wrote a blog post about this (read it here), but this approach only works when you run it from an AIR application. The same code doesn’t work when running from a url on a web site.
So, if you have any suggestions or a solution for the basic authentication issue please let me know.
