Miti's Blog

Last week a colleague of mine called me because he got into a very HOT conversation with an open-source fan. The conversation started from a very bold and aggressive statement: “Don’t use Silverlight, don’t use Flash, they are proprietary technologies! They are bad because they are not open so they had to die!”. Now the whole thing got some juicy emotions involved cause let’s face it, this is a very emotional line. If you look at the assumption that are underneath such an statement you will find something that sounds pretty much like “Software should be free and open-source. Proprietary/commercial technologies must cease to exist because somebody is clearly profiting from that. The community should build software for itself.” … and hey, this seems to me pretty much like the communist manifesto where “each of us give according to their abilities, and receive according to his needs”. And the communication style, very accusing and unilateral, it reminds me of the communist party political discourses. And one thing is sure, this style of communication (among other things) brought communism to the Eastern Block. So it’s power and influence it has been proven at large scale. Unfortunately communism also proved to be an inefficient economic system and I lived to see both communism and also the havoc that it has produced when its economic and ideological system collapsed. I think the only comparable crises of that magnitude was Western World Great Depression, of which not that many witnesses are still alive today.

Now don’t get me wrong, I am a big fan of open-source. I strongly believe that open source brings an enormous value to the world by speeding the process of software becoming a commodity. By winning the display price battle the open source software force companies to focus on innovation and quality to differentiate themselves. That’s why I am a big fan of commercial and proprietary software too. Cause I believe that a world without one or another will be a world that will finally have less innovation at lower quality and at greater prices.

Hey but let me end with a joke about Romanian innovation during communism: Do you know what makes a lot noise, a lot of smoke and cuts the polenta in three? … well is the Romanian device to cut the polenta in four.

Guess what, just by reading this you can save 240EUR if you want to go to MAX Europe in Milan.To get this discount you just need to use the following registration code: EEB856 (*Additional restrictions apply. Please read the note below!) when you register here. I will be speaking at Milan about Flex + PHP and AIR+Dreamweaver+AJAX but you will have the chance to see a lot of cool new technologies. Hope to see you there!

* Offer good for new Adobe MAX 2008 registrations only. Offer good for Adobe MAX Europe full event pass registration only. The offer applies to an Adobe MAX full event pass only (EUR€840). Offer cannot be combined with any other offer, package or registration code. Offer expires 11:59 pm PDT November 14, 2008. Terms and conditions for Adobe MAX registrations will also apply. Void where prohibited.

As you probably know by now, Flash Player 10 has a new feature for image processing that allows you to perform some really cool effects and blends. Well actually this new feature is a little language for parallel computing. In this post I present some samples that show you how to integrate Pixel Bender with your Flex project from start to finish.

First of all you need the Pixel Bender Toolkit. You can get it from here. Second you will need to compile your Flex Project against Flash Player 10. There’s some documentation here. The whole idea behind my samples is that it took a while for me to put all things together and apply the effects on my Flex elements, and I want to make it easier for you.

In the first project I just made a simple Pixel Bender filter, which replaces the red channel with the blue one, and added it to an image.

Click here to see the demo

On the second project I used a filter with some parameters. It doesn’t do much, just clips a circle from the original image.

Click here to see the demo

The next one is a slightly more complex filter that has two input images. I use it to apply an image over a video.

Click here to see the demo

Finally, because Pixel Bender is basically a number cruncher, I use it to mix two ByteArrays. By chance these two ByteArrays are extracted from two sounds so this is also an example on how you can use Pixel Bender to mix two sounds.

Click here to see the demo (it might take a while before it starts playing because I have to load the sounds first)

UPDATE: The sound sample demo has two mixing methods. One is using PixelBender (onSampleData) and the other is using a pure AS3 code to mix. You can switch between the two (by changing the event handler at line 32) and and monitor the CPU to see if any performance improvements are detectable (on my computer is around 30%). I updated the demo to use the PixelBender method by default (thanks Chuck!)

You may want to take a look at the source code or download it.

Next Thursday, October16th at University Politehnica of Bucharest we (a bunch of people from the University, uberVU, Yahoo and Adobe) will present a new — and a little bit unusual — course. The course is about web programming and we want to teach the new old stuff in a little different manner … at least a little different than I was taught in school. If you are a student in Bucharest then you might want to give it a try and attend the opening course which will take place in Politehnica EC105 hall at 14:00h. We also made a little site (Poli20.org) where we will post stuff as the things roll on.

The course is an experiment because  … well I will give more info after the first 1-2 courses. I don’t want to spoil the fun for those who will be there

Hope to see you next Thursday … and keep seeing you!

I needed a book control for an AIR app and the best that suited my needs was Ruben Swieringa’s Flex Book component (many thanks for building this). I had to use this for a 200+ page magazine and I quickly discovered that it worked a little slow for this amount of pages. After a profiling session I realized that what took so long was the Flash pre-render time because all the pages are in the display list (one on top of another). So I wrote a some code to use only 8 pages (4 pairs): the rest are stored in an array. I also added a jumpToPage method to make navigation easier in a 200+ page book.

Still to be done:

• if you have more than one transparent page one after another it will look very messy because at any given moment the book has only 8 pages. This can be done by configuring how many real pages are stored … but the logic of navigating through get’s very nasty.
• tearing pages doesn’t work (not implemented yet)
• lot of traces are still enabled
• BEWARE of bugs

Give it a try:

• Demo
• Source

Are you using HTML/JS to build AIR Applications and wondering how to automate functional testing for your app? Here is some news that might put a smile on your face. In few words, the guys across my desk have been tweaking Selenium to work on AIR. Mihai wrote a cool blog post about how you can test drive this bit of code so if you are interested please take it for a spin. Don’t forget to tell us how it was!

If you followed my previous post you probably now have a Flex + .NET project that makes a WebService call. If not, here’s a project you can use testDotNet.zip. To import this in Flex Builder choose File->Import->Flex Project and follow the steps.

Next open Visual Web Developer and open a Web Site in the same location as the Flex Builder project.  Open web.config and make sure you have <compilation debug=”true”> (this inserts debugging symbols for the .NET code).

Now we need to use the same ASP.NET Developer Server for both the Flex Builder and Visual Web Developer. Since by default both tools try to start one instance we need a little trick to do that:

Start the MXML project through Flex Builder; this will start ASP.NET Developer Server usually on port 3000. Then go to Visual Web Developer; on Project Property Page (Right Click on the Project in the Solution Explorer) click Start Options and select Use Custom Server and enter http://localhost:3000/testDotNet/

Start also the .NET project just to connect the Visual Web Developer to the ASP.NET Developer Server instance. Now you will be able to debug both Flex and .NET code:

Since I was deeply involved in Flex Builder support for working with .NET I thought that it would be a good idea to write some articles on how you can use these technologies together. I will create a “Hello World” project but the focus will be on how you can better make use of the available tools.

For tooling I will be using Flex Builder and Visual Web Developer 2008 Express Edition (VWD).

First let’s create a simple ASP.NET Web Service project using VWD:

I slightly modified the HelloWorld method in Service.cs to receive a parameter:

[WebMethod]

public string HelloWorld(String name) {

    return "Hello " + name + "! Nice talking to you!";

}

Now let’s get into Flex Builder and try to get something from the .NET Server. First we will create a new Flex Project on top of the .NET one. To do that click on New->Flex Project and choose ASP.NET as the server technology:

Make sure the location is the same as the VWD .NET project. Now run the default MXML file to start the ASP.NET Developer Server.

Next we will generate the glue code for calling the Web Service using the Import Web Service Wizard. Choose Data -> Import Web Service (WSDL) from the Flex Builder menu. On the first page the main source folder is selected by default. You can leave it like this. On the second page you need to choose the WSDL URI. When you launched the MXML application the ASP.NET Developer Server should have started by default on port 3000 (see the tray icon). In this case the WSDL URL should be something like http://localhost:3000/testDotNet/Service.asmx?WSDL.

The third page should look like this:

Now you should have some typed AS classes that provide easy access the .NET Web Service methods. The cool thing about this is that Flex Builder knows now how to do autocompletion on Web Service calls. So making a little application that will showcase this is just too easy:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>

        <![CDATA[

            import mx.controls.Alert;

            import generated.webservices.HelloWorldResultEvent;

            import generated.webservices.Service;

            public function sayHello():void {

                var service:Service = new Service();

                service.addhelloWorldEventListener(

                    function (event:HelloWorldResultEvent):void {

                        Alert.show(event.result);

                    });

                service.helloWorld(myName.text);

            }

        ]]>

    </mx:Script>

    <mx:TextInput x="176" y="171" id="myName"/>

    <mx:Text x="70" y="173" text="Enter Your Name"/>

    <mx:Button x="344" y="171" label="Click to receive greeting" click="sayHello()"/>

</mx:Application>

Today I saw an interesting post on FlexCoders. Suppose you have an editable DataGrid and you want to confirm through an Alert if the change should be made or not. Preventing the change is easy, you just need hook onto the itemEditEnd and call event.preventDefault(). The problem arises when you want to confirm this with the user using an Alert. This is because the Alert.show call is asynchronous. This means that the grid event will complete before the user can choose Yes or No.

public function editEnd(event  ataGridEvent):void {

  Alert.show("Do you want to save changes?","Save changes",Alert.YES | Alert.NO,null,function(ev:CloseEvent):void {

      if (ev.detail == Alert.YES) {

        //LABEL2: This will be reached long after the LABEL1 has been reached. 

        //So at this point the grid has been executed the default behavior for the change event

      }

    });

    //LABEL1: Because of the asynchronous nature this will be reached right after the Alert.show call    

}

So my idea of solving this was to save the new value, prevent the default grid behavior of updating the dataProvider and update the data provider manually on the Alert.show closeHandler.

Here is some code that illustrates this:

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"

        initialize="initData()" layout="absolute">

  <mx:Script>

   <![CDATA[

       import mx.controls.TextInput;

       import mx.controls.Alert;

    import mx.collections.*;

    import mx.events.*;

      private var DGArray:Array = [

         {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},

         {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];

      [Bindable]

      public var initDG:ArrayCollection;

      public function initData():void {

         initDG=new ArrayCollection(DGArray);

      }

      public function editEnd(event:DataGridEvent):void {

          //Save the data before calling Alert

        var myEditor:TextInput =

                    TextInput(event.currentTarget.itemEditorInstance);

        // Get the new value from the editor.

        var newVal:String = myEditor.text;

        var dataObject:Object = event.itemRenderer.data;

        var property:String = event.dataField;

        Alert.show("Do you want to save changes?","Save changes",Alert.YES | Alert.NO,null,function(ev:CloseEvent):void {

            //If we have clicked YES then update the data collection manually

            if (ev.detail == Alert.YES) {

                  dataObject[property] = newVal.toString();

                  initDG.itemUpdated(dataObject,property);

            }

          });

          //prevent data grid to update his dataProvider collection

          event.preventDefault();

      }

   ]]>

   </mx:Script>

   <mx:DataGrid id="myGrid" width="350" height="200"

      dataProvider="{initDG}" editable="true" itemEditEnd="editEnd(event)" >

      <mx:columns>

         <mx:DataGridColumn dataField="Album" />

         <mx:DataGridColumn dataField="Price" />

      </mx:columns>

   </mx:DataGrid>

   <mx:DataGrid id="readOnlyGrid" width="350" height="200"

      dataProvider="{initDG}" x="0" y="208">

      <mx:columns>

         <mx:DataGridColumn dataField="Album" />

         <mx:DataGridColumn dataField="Price" />

      </mx:columns>

   </mx:DataGrid>

</mx:WindowedApplication>

A few days ago I was trying to use the FDS AJAX Bridge to push some messages in an AJAX grid. So I created a Flex + WTP + BlazeDS project and went to change the default Application from the default MXML file to my FDMSBridge.as (The 1×1 pixel SWF). Guess what? You can’t add AS files, only MXML ones

This might be a little bug, but I found a workaround. I manually edited .actionScriptProperties file and in the <application> section added the FDMSBridge.as:

<?xml version="1.0" encoding="UTF-8"?>

<actionScriptProperties mainApplicationPath="testBlaze.mxml" version="3">

<compiler additionalCompilerArguments="-services "C:/work/wksp/samples/testBlaze/WebContent/WEB-INF/flex/services-config.xml" -locale en_US" copyDependentFiles="true" enableModuleDebug="true" generateAccessible="false" htmlExpressInstall="true" htmlGenerate="true" htmlHistoryManagement="true" htmlPlayerVersion="9.0.28" htmlPlayerVersionCheck="true" outputFolderPath="bin-debug" rootURL="http://localhost:8080/testBlaze" sourceFolderPath="flex_src" strict="true" useApolloConfig="false" verifyDigests="true" warn="true">

<compilerSourcePath/>

<libraryPath defaultLinkType="1">

<libraryPathEntry kind="4" path=""/>

<libraryPathEntry kind="1" linkType="1" path="flex_libs"/>

</libraryPath>

<sourceAttachmentPath/>

</compiler>

<applications>

<application path="FDMSBridge.as"/>

<application path="testBlaze.mxml"/>

</applications>

<modules/>

<buildCSSFiles/>

</actionScriptProperties>

Now the FDMSBridge.as should be compiled as a normal Flex application: