Google keynote video at Mobile World Congress

And here is the video of the keynote. Enjoy!

February 18, 2010 | Filed Under Mobile, Video | Leave a Comment

Why Flash: Interview with Mindomo.com

Last week I had the pleasure of interviewing Zoltán Lörincz, the guy behind Mindomo.com. Mindomo.com is one of the coolest mind mapping apps out there and it happens to be a Flex application.

I met Zoltán in 2007 when we talked about Flex Builder 2 and what they want to see in Flex Builder 3. At that time Mindomo.com was already in the market, and we knew that we could get a lot of valuable feedback about Flex and Flex Builder from someone who created such a complex app. Since that time they added many new features were added and created a desktop version using AIR. Another interesting feature of their application is the toolbar itself. They implemented probably the only Microsoft Ribbon in Flex out there.

In this interview you can find a short story about the birth of Mindomo.com, and you can learn some of the key features of this application.

I apologize for the image/sound quality. I did this interview remotely and the sound was recorded from the phones.

Enjoy!

December 15, 2009 | Filed Under Video | Leave a Comment

Magnifying Glass AIR 2 application or how to communicate with a Java program from AIR

My favorite feature in Adobe AIR 2 is, by far, Native Processes: the ability to launch and control and communicate with a native process. It could be any executable on the machine where the AIR application is installed. I think this feature opens up a whole new range of AIR applications. When you add this feature to the ability to create socket servers, you have a powerful platform to build RIA applications for desktops.

Once I heard that this feature would make it in AIR 2 I was very excited. Why? Well, back in 2008 when we launched AIR 1.0, my fellow evangelist Serge Jespers created one of the coolest AIR applications for the AIR Tour. It was the smallest video player in the world. Basically it let you watch videos in the application icon from the Dock.

The application is extremely cool, but it has a small issue: it is too damn small to be able to see what’s going on. Being an engineer, I spent some time trying to find an engineering solution. Of course, I could have asked Serge to rewrite the application to make it bigger, but this wouldn’t have been an engineering solution. It would have been something that an accountant or manager would come up with. My solution is to build a second AIR application that can be used to magnify the video played inside the icon. This application would act like a digital magnifying glass.

With AIR 2 I’m finally able to implement the magnifying glass app pretty easily. Below you can see a screenshot of my application in action. It has two windows. The first window is the view port of the magnifying glass. You can see how many frames per second it processes, you can control the amount of zooming, and you can drag it around your screen. The second window displays the magnified image.

The internals

How did I do it? The application has two main parts. One part is the AIR application itself. It renders the UI, controls the view port and the zoom factor, and scales the image. The second part is a Java program that captures a screenshot of a portion of the screen. The Java program is controlled by the AIR application.

Using the NativeProcess and NativeProcessStartupInfo classes from AIR 2, you can launch an executable. In order to communicate with the executable you can use standard input and standard output. I wrote the Java program to output the bytes of the screenshot to standard output. It listens to standard input for commands, such as take a shot, set the viewport, or terminate the program. I compiled the Java program as an executable JAR file and placed in the AIR application root folder.

In order to capture the output of the Java program all you have to do is to register a listener on the NativeProcess instance for the standard output events. When you want to send commands you write bytes to the standardInput property of the same object. Here is a snippet of code, for the complete code have a look at the ScreenShotService class from the AIR application.

private var nativeProcess:NativeProcess;
private var npInfo:NativeProcessStartupInfo;
//setting the arguments for starting the Java program
var arg:Vector.<String> = new Vector.<String>;
arg.push("-jar");
arg.push(File.applicationDirectory.resolvePath("screenshot.jar").nativePath);
arg.push("130");
arg.push("100");

npInfo = new NativeProcessStartupInfo();
//setting the path to the native process
npInfo.executable = new File("/Library/Java/Home/bin/java");
npInfo.arguments = arg;

nativeProcess = new NativeProcess();
nativeProcess.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, onStandardOutputData);
//start the process
nativeProcess.start(npInfo);

/**
 * Read the data from the standard ouput.
 * Before reading a png, first you have to read the length of the image
 */
private function onStandardOutputData(e:ProgressEvent):void {
    //reading the available bytes from the standard output buffer of the process
    nativeProcess.standardOutput.readBytes(_processBuffer, _processBuffer.length, nativeProcess.standardOutput.bytesAvailable);
    ...
}

//sending take command to the Java process
nativeProcess.standardInput.writeMultiByte("take\n", "utf-8");

This is the relevant Java code (you can find the complete code inside the source folder of the application, ScreenShot.java):

/**
 * @param width of the screen capture
 * @param height of the screen capture
 * @param args
 */
public static void main(String[] args) {
     if (args.length == 2) {
         width = Integer.parseInt(args[0]);
         height = Integer.parseInt(args[1]);
     }

    ScreenShot s = new ScreenShot();
    BufferedReader in = new BufferedReader(new InputStreamReader(System.in));
    String text = "";
    String[] tokens;

    while (true) {
        try {
            text = in.readLine();
            if (text.equals("take")) {
                s.capturePortion(x, y, width, height);
            } else if (text.equals("terminate")) {
                return;
            } else if (text.length() > 0) {
                tokens = text.split("\\|");
                if (tokens.length < 4)
                    continue;
                x = Integer.parseInt(tokens[0]);
                y = Integer.parseInt(tokens[1]);
                width = Integer.parseInt(tokens[2]);
                height = Integer.parseInt(tokens[3]);
            }
        } catch (IOException e) {
            System.err.println("Exception while reading the input. " + e);
        }
    }
}

/**
 * Capture a portion of the screen
 */
public void capturePortion(int x, int y, int w, int h) {
    try {
        if (robot == null)
            robot = new Robot();
        BufferedImage img = robot.createScreenCapture(new Rectangle(x, y, w, h));
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        ImageIO.write(img, imageType, output);

        DataOutputStream dataOutputStream = new DataOutputStream(System.out);
        //output the buffer size
        dataOutputStream.writeInt(output.size());
        //output the buffer
        dataOutputStream.write(output.toByteArray());
        dataOutputStream.flush();

        output.close();
    } catch (AWTException e) {
        System.err.println("Exception while capturing screen. " + e);
    } catch (IOException e) {
        System.err.println("Exception while writting the image bytes. " + e);
    }
}

I am by no means a designer. Still, I think I managed to get a decent look of the main application window using Adobe Illustrator and Flash Catalyst. I created the design in Illustrator, and then using Flash Catalyst I transformed the graphics into a Flex application. And finally using Flash Builder 4 I added the logic.

Source code and native installers

You can download the Flex project from here, Mac installer from here, and Windows executable from here. This program requires Java 5 or newer and the Adobe AIR 2 runtime.

Things to know when working with Native Processes in AIR

In order to enable this feature you need to add the extendedDesktop profile to the application descriptor file. Add this tag as a child of the application tag:

   1: <supportedProfiles>extendedDesktop</supportedProfiles>

When using this feature you can’t package your application as an AIR file for distribution. You have to use the native installer. The easiest way to do this is to export for release from Flash Builder (you get the AIR file you normally use to distribute your application). And then you use adt at the command line to create the native installer. If you want a Mac installer you do it on a Mac, if you want a Windows installer you have to do it on a Windows. The command looks like this:

   1: adt -package -target native myApp.exe myApp.air

More on how to create native installers for AIR applications here (make sure you use the adt from AIR 2 and not one from an older version).

If you see an error like in the picture below when you install an application using the generated native installer, you should create a file named .airappinstall.log in your home folder. This log file can tell you what was wrong. In my case the error was “failed while validating native package: Error: Missing digested package file: .DS_Store starting cleanup of temporary files” (I fixed the problem by deleting the .DS_Store file from the source folder).

Finally, you can check at runtime if the application has extended desktop capabilities by using this:

if (NativeProcess.isSupported)
    //extended desktop profile is available
else
    //extended desktop profile is not available

What’s next?

If you haven’t already, download the Adobe AIR 2 runtime and SDK and play with the new features. You can find a nice article about the new features from AIR 2 on Christian Cantrell’s blog.

I already have another idea: what about an AIR application that does screen sharing? Keep an eye out I might be able to pull it off!

PS. Many thanks to my friends Chicu and Raul from the Romanian AIR team for their help.

Later Update: My friend Benjamin Dobler created a nice screen recording application with AIR 2 (it captures the sound as well). Although for now the source code is not available, I still think it is worth having a look.

November 30, 2009 | Filed Under AIR, Flex, Tutorials, Video | 6 Comments

Flash Builder 4: Network Monitor and new features for debugging

In case you haven’t played yet with Network Monitor and the new features for debugging from Flash Builder 4, maybe it is time to see what it’s all about. Enjoy!

August 31, 2009 | Filed Under Tutorials, Video | Leave a Comment

Screencast on data paging with Flash Builder and PHP

Not so long ago I wrote an article on how to enable data paging for a data grid using Flash Builder and a PHP backend. Today, I added a screencast for those of you who prefer to watch instead of read.

Enjoy!

or view in HD

August 23, 2009 | Filed Under Flash Builder, Tutorials, Video | Leave a Comment

Creating a custom scrollbar in Flex 4

In this screen cast I show you how you can use Adobe Illustrator, Flash Catalyst, and Flash Builder 4 to create a scroll bar that looks different depending on the OS that it is used to run the Flex application.

Creating a custom vertical scrollbar in Flex 4 from Mihai Corlan on Vimeo.

August 13, 2009 | Filed Under Tutorials, Video | 1 Comment

Adobe User Group Tour

As you probably know, we launched the first public betas for Flash Builder 4, Flash Catalyst, and Flex SDK 4 in June 2009. And we had about 100 events across the world, events that were driven by the communities (Adobe User Groups). I had the pleasure to present at four events: Amsterdam, Netherlands; Bucharest, Romania; Zagreb, Croatia; and Pavia, Italy.

I think all the events went great, and personally I had great fun doing the presentations and talking with the people afterwards. But, from my point of view the Adobe User Group from Netherlands deserves a special mention. Somehow the Netherlands, of all the events I’ve attended so far, has something special that is hard to find in other places. And I am not talking only about the Adobe User Groups events, I found that this is true also for events organized by the PHP community for example.

The location was extraordinary, the audience was big (more than 200 people) and very eager to ask questions, and there was good food and cold beverages, including after hours beer. I can’t stop thinking how it would be to have a MAX event in Amsterdam

The organizers taped the event. So, in case there wasn’t a Tour event near you, you can see here the presentations Christoph Rooms and I gave on Flash Catalyst, Flex SDK 4, and Flash Builder 4.

July 2, 2009 | Filed Under Conferences, Flash Builder, Flash Catalyst, Flex, Presentations, Video | 4 Comments

Webinale Berlin 2009

At the end of May, I had the pleasure of attending the Webinale 2009 conference in Berlin, and presenting two sessions on AIR and Flex. Because Adobe also had a booth, I hung around the sponsors area quite a bit, and I found some interesting projects that were worth shooting a video.

In the first video you can see some iPhone apps that use Augmented Reality created by Metaio (http://www.metaio.com). Next year we’ll have Flash Player 10 on mobile; maybe we’ll see more examples with FLAR Tool Kit and Flash Player

The second video presents a project from CSCM (a research group at Bundenswher University of Munich). They said that basically you can call it “Community Wall”. The idea is you can have this system installed, for example, at a conference. And people can use it to find other people that are attending the same conference and are in the same room. You can select the people you want to talk with by looking at their interests, profession, and so on. It looks cool, and I for one, would love to have this system at conferences. Interestingly, the project was created in Java. I think they worked hard to make it to look so good. I had a chat with one of their engineers, and maybe they will try to use Adobe AIR for the client. I really think this could be a perfect match.

June 6, 2009 | Filed Under Conferences, Video | 3 Comments

Video tutorial on LiveCycle ES

Duane Nickull posted a video tutorial on LiveCycle ES. You can learn how you can call a function from LiveCycle ES. Watch the video here.

April 16, 2009 | Filed Under Java, LiveCycle, Tutorials, Video | Leave a Comment

Adobe TV segment: Generate a Flex/J2EE Database Application

Another segment has been released on Adobe TV, this time on how to generate a Flex and J2EE Database Application. I was a little bit sleepy and tired after three and a half days of MAX . I show how to create such applications using the data wizard, or LiveCycle Data Services and SQL Assembler. Enjoy!