Miti's Blog

As Flex 4 SDK is almost in it’s Beta state I took a look at his features and what impressed me the most was how the presentation is decoupled from the behavior. I remember a presentation around Max 2007 when Ely Greenfield, the principal scientist for Flex SDK, showed a sneak peek on how this will make a lot of skinning things a lot simpler. For example, it’s simple to make a list look … let’s say to make it look like the Fan effect that Mac users love so much

I found this quite easy to implement using Flex 4. Because the list can be skinned in MXML it’s so easy to program the skin and stay in MXML for the most part. The only thing that I actually needed to program was how the elements are laid out.

The basic List skin looks like this:

<s:states>
    <s:State name="normal"/>
    <s:State name="hover"/>
    <s:State name="disabled"/>
</s:states>

<fx:Metadata>[HostComponent("spark.components.List")]</fx:Metadata>
<s:DataGroup itemRenderer="components.RepeatedItem1"
        clipAndEnableScrolling="true"  id="dataGroup"
        rollOver="currentState='hover'">
    <s:layout>
        <components:LargeCircleLayout id="myLayout" radius="1400"
            stepAngle="0" stepAngle.hover="3.5"/>
    </s:layout>
</s:DataGroup> 

Notice that it’s nothing but a DataGroup that has a layout. I’ve also added the Hover state to be able to open the list when you hover over it.

To add the nice effect it’s just a matter of animating one layout property:

<s:transitions>
    <s:Transition autoReverse="true">
        <s:Animate target="{myLayout}" duration="200">
            <s:SimpleMotionPath property="stepAngle"/>
        </s:Animate>
    </s:Transition>
</s:transitions>

You can take a look at the source code here and watch the list here.

A few days ago, while heading to the Adobe offices here in Bucharest, I noticed (again) the grey communist buildings. I don’t know why, but this communism thing keeps inspiring me to think about the software industry.

Just to give you a hint: communist blocks are not the nicest type of buildings. Here in Romania they were ordered mainly by Ceausescu to displace a lot of people from rural areas into cities so that his plans of urbanization and industrialization could be sustained. So these buildings did just that … and nothing more. Very functional, that’s it. Not too much creativity, one model copied hundred of times in a row. More an engineering task than an architect’s job.

Now, if you ask a software engineer, this might sound like an efficient way to build houses, with a lot of component and design pattern reuse. If you ask people that are living in these blocks (including me) I would prefer moving. I can’t really because these are practically the only available blocks in Bucharest.

And this brings me back to the software industry and how we are building software, especially business software. Actually the verb for this is ‘engineer’: we are engineering software. And as engineers we are striving for efficiency. As a result there is tons and tons of software that is extremely … well let’s put it blunt: crappy to use. However, much of this software provides a lot of value. Like communist buildings, I would prefer using ‘crappy’ software to get a process going rather than push some paper.

But as the industry matures, the fundamental efficiency problem moves away from ‘build these two functionalities with the minimum amount of money’. As applications move more and more into our lives, they become like buildings and demand a touch of the ‘elusive’ design. For thousands of years architects have added the ‘experience’ value in the construction industry. That’s what the new Experience Designers for applications strive to do for the software industry. (They might also be known as Interaction Designers as we still struggle to define their work).

You can say that these guys make applications look nice, but I would say that it’s more than this. You can’t really put this into words, but if you come and take a walk among the grey communist blocks in Bucharest you will understand.

Adobe Romania sponsored the IT contest of BEC Competition in Bucharest. This is a cool competition organized by BEST Europe wide. I had the pleasure to choose the IT contest and I thought that a little math neuron twisting might be just great for these talented future engineers.

And I wasn’t wrong. After just two hours since their first encounter with the PixelBender language and PixelBender Toolkit here is what they did with my poor face … using only numerical algorithms that PixelBender runs in parallel:

 

You can take a look at the PixelBender kernels here.

The New York Times has just released an app for reading the newspaper on the desktop. You can get it at http://timesreader.nytimes.com. 

The first question that I asked myself was: Why wasn’t the browser enough for them? Why do you need a desktop app for viewing some pictures and text?

Then something popped into my head. I asked myself: When do I read the newspaper? Well, I read the news in the metro, when waiting in line for something, when sitting on the … well toilet … and sometimes on weekend mornings while still in bed. Except for the weekend mornings (when I read it on my laptop) at all other times I use a mobile device. And the experience on the mobile device is less than stellar.

Now one thing that I immediately noticed about TimesReader was how easy it is to navigate and how nice it resizes (The resize is way tooooo cool). And that is when ‘that something’ popped into my head: This is perfect for devices that are NOT standard PCs. I mean it is cool for PCs too but it might not justify the effort when the browser might be good enough (except that you can also download a week’s worth of content and read it offline). But if you have something that you can hold in your hand and read it on the metro, this kind of interaction is just PERFECT.

I think this piece of software could be the beginning of a revolution. If you take this reader, add reasonable cheap tablet PCs or capable phones and a runtime that can run consistently on all these hardware … well it sounds like a revolutionary way to deliver a newspaper in a digital way. (I know Adobe AIR is not yet on my phone, but I urge the engineers to hurry up). Why? Because this way a digital newspaper can really pass the hardest test of all: Can you read it easily when sitting on the toilet?

It is said that reading other peoples code is 10x times harder than writing yours. That’s why I think that solving bugs (without messing everything up around them) is more of an art and black magic than a science. I find it easier to teach architecture and algorithms than debugging.

So if you think that you’re a black belt programmer then come and measure your Kung Fu skills against Flex Framework bugs (yeah you can do this because Flex is an Open Source framework). Killing these bugs does not harm the environment and the entire Flex community will benefit.

So on the 17th of may we will attack them again in an organized manner. You can participate from wherever your are. Find more about the Bug Quash at bugquash.com.

Recently I was working to enable a common workflow for a Flex application in the browser and an AIR application. So basically your Flex application is working in a Browser, it does some stuff there and then you decide you want to move everything into an AIR app, let’s say because your user just decided in the middle of the workflow that he wants to switch to the AIR app that you provide.

So now the state of the application needs to move between Flex and AIR and it would be nice if you could move the server session from the browser application to AIR.

For this example I will use PHP as a server side technology but it will work very similar for other server technologies as well. Basically I want to:

• get the session ID/cookie in the Flex Application
• send it over to the AIR application
• use the session ID in the AIR application to make requests that will access the same session as in the browser

Getting the session ID in the Flex Application

First I need to get the the session ID from the Flex App. One simple way to do that is to just grab the whole cookies string. This can be done through the ExternalInterface mechanism. So I inject a little JavaScript function that gets the cookies string from the browser and then call it:

ExternalInterface.call('eval','window.cookieStr = function () {return document.cookie};')
var cookieStr:String = ExternalInterface.call('cookieStr');

 

Communicating with the AIR App

 

To communicate with the AIR app I use LocalConnection. In the AIR app I register to an inbound connection:

var inbound:LocalConnection = new LocalConnection();
inbound.allowDomain('localhost');
inbound.client = new Object();
inbound.client.notifyMe = function (cookieStr:String):void {
    //add Code here to use the Cookie String
}
inbound.connect("session");

 

and in the Flex App I register to an outbound connection and call the notifyMe() function

outbound.connect("session");
outbound.send("app#phpSessionAIR:session","notifyMe",cookieStr);
//outbound.send("app#phpSessionAIR.F0B3F68E1857B8A07069FED1D0638CAF200F76EB.1:session","notifyMe",cookieStr);
outbound.close(); 

 

Please notice that when launching from Flex Builder, the AIR Application has no Publisher ID so the connection name is “app#phpSessionAIR:session”. After packaging and installation, the AIR app will get a Publisher ID and the connection name will be something like this: app#phpSessionAIR.F0B3F68E1857B8A07069FED1D0638CAF200F76EB.1:session

You can get the publisher ID of the installed AIR App by looking into META-INF/AIR/publisherid file within the application install directory.

 

Use the session id in the Air App

Now all that remains to be done is to use the cookies string when making the next request from the AIR app:

var myService:HTTPService = new HTTPService();
myService.url = "http://localhost/phpSessionFlex/sessionGet.php";
myService.headers.Cookie = cookieStr;
myService.send();

 

Here are the source files for the AIR and the Flex App