Playing with Custom Layout in Flex 4

May 29th, 2009

gumboListAs 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.

mpricope flex, ria, tips & tricks

Experience Designer – from blocks to something more

May 26th, 2009

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.

umbraBlocuriJust 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.

mpricope thinking

BEST Engineering Competition – PixelBender Contest

May 20th, 2009

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.

mpricope Uncategorized

New York Times on your desktop – version 2.0

May 11th, 2009

Picture 5 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?

mpricope Uncategorized

Environmental Friendly Bug Killing @ bugquash

May 8th, 2009

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.

mpricope Uncategorized

Moving the session from Flex to AIR – PHP Version

May 5th, 2009

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

mpricope Uncategorized

Adobe Developer Day – Bucharest

April 29th, 2009

Next to my desk sits a crazy lady named Magda. A few months ago Ben Forta, the “father” of all evangelists at Adobe, told us he would like to pay us a visit. So the crazy lady I mentioned thought: “If Ben is coming to Bucharest why not have him speak with the local Flex community? And if he speaks with the local Flex community, why not have all the evangelists speak with them? That might attract some people. And if these people come, maybe we can move the AIR team to leave their coding for a day and also talk with them. And if there are so many interesting people there maybe not only the Flex and AIR community will show up but also other people that are interested in our technologies. … and if … what the heck let’s just make a BIG Event and invite everyone!”

So she did that! And it’s going to take place on 19 May at Hotel Intercontinental. Here is the schedule (it might change a little but not too much):

  Main room Speaker
9:30-10:00 Registration  
10:00-10:15 Introduction - Agenda Alexandru Costin
10:15-11:15 Adobe and RIA Ben Forta
11:15-11:45 Making of Adobe Romania Digby Horner
11:45-12:00 Coffee break  
12:00-13:30 Flex for Enterprise Cornel Creanga
13:30-14:30 Lunch  
14:30-15:30 Flex 4 SDK and Flash Catalyst Mihai Pricope
15:30-16:00 Intro to ColdFusion for Enterprise Ben Forta
16:00-16:45 InContextEditing - First Adobe Romania Product Lucian Cozma
16:45-17:30 Mobile Mpackager Mihai Pricope
17:30-18:00 Flash Player 10 - FMS Cornel Creanga
18:00-18:30 Closing session  

Oh … and there’s more. We have some bootcamps (you can call them hands on seminars if you like) also:

Bootcamp room Speaker
11:30-12:00 Open Doors Alexandru Costin + Upper Management
12:00-13:30 Pixel Bender Skinning Bootcamp

Dragos Dascalita
14:00-14:30 Open Doors Dragos Georgita+ AIR team
14:30-16:30 BlazeDS + LCDS Bootcamp Advanced Mihai Corlan + Cornel Creanga
16:30-18:30 Introduction to Flex and AIR Bootcamp Mihai Corlan

Ah … still more, Digby Horner, the man who was behind the InterAKT acquisition and the opening of the Romanian campus will be there too. And also some guys from management, they call themselves “upper management”. And they are open for questions about our campus too.

I hope you are convinced by now to book 19 May for Adobe Developer Day.

mpricope Uncategorized

Can Flash Player help your research project?

March 23rd, 2009

Last autumn I gave a talk at RoCHI (http://rochi2008.utcluj.ro/) a Romanian academic conference about human computer interaction. I wasn’t very excited to attend the talks there since I didn’t have very high expectation about the research activities in Romania. Well, I was very wrong. About half of the subjects and presentations there left me “mouth open’” .I also  had the pleasure to meet Mr. Sabin Buraga who I can say is a true Teacher 2.0 :) and who was one of the main responsible for putting together that inspiring conference.

But there is one subject in particular that I want to talk about: Augmented Reality. Because at that little conference I had the pleasure of staring at some extremely cool augmented reality demos. They were based, I think, on some versions of ARToolKit, also a joint research effort from multiple universities. And I was thinking: How can this technology be put to use on some real projects? How can it be evangelized?

Then I forgot about it until a colleague of mine showed me this demo. It was made with a Flash port of ARToolKit called FLARToolKit by Saqoosha. How cool was that, augmented reality in Flash!

And then the creative agencies got them and now it seems to be a fad:

http://ge.ecomagination.com/smartgrid/#/augmented_reality

http://www.topps.com/

and I think that BMW is preparing one for Mini.

I realized that once the ARToolKit algorithms got to run in Flash Player and thus reach 98% web audience and some creative agencies figured out they could do something with them, the technology just got free advertising worldwide. I am thinking that if you are working on the next graphical or visualization algorithms you might really want to consider them running on Flash Player. Just for the sake of a cooooool demo that can be seen by everybody. Not to mention that with Alchemy you can still have all or part of your algorithms written in C or C++ and compile them to run on Flash Player.

mpricope Flash Player 10, alchemy, thinking

ODE (Open Dynamic Engine) for Flash

February 23rd, 2009

I’ve took Alchemy for a test and decided to compile ODE (Open Dynamic Engine). Just to add yet another physics engine to the Flash World. It was a hell of a ride but I finally got to produce some bouncing balls :). For a still unknown reason some as 3d libraries have been very slow to render 6 translucent walls and 2 balls. Papervision3D seems to move quite decent.

You can download the ode sources from here. To recompile them do (you need to have the Alchemy  environment turned on):

./configure

make clean

cd OPCODE

make

cd ../ode/src

make

cd ../swc

make

And here are the bouncing balls:

mpricope alchemy, flex

Speaking at Digital Marketing Forum

February 19th, 2009

micro-dmf-2 Next week I’ll be speaking at Digital Marketing Forum. It will be a 15 minute talk. This short talks I find the hardest thing to do. Before you start warming up … the show is over. You don’t have too much time for details. Only one idea! So I asked myself, what idea is worth saying? … and HOW?Well I think I found one that is deep, philosophical, practical and inspiring altogether and I will manage it to deliver it in a funny way. Do you think I am exaggerating?  Well I might be… but I might not! The only way to really find out is to experience it yourself. Let me tell you that I’ve planned crazy talks, crazy gesture and crazy demos. Even my marketing manager was impressed :)

mpricope conferences