Amgen Tour of California bike race and Flash Platform

Although I am an European, and thus Tour de France is the “only” tour for me, I must say that Amgen Tour is quite unique. And why’s that? Because this is the third year that they have used the Flash Platform to make the race available over Internet. The race started on February 14th, and you can see all the details here.

You can see the race live at that address, and if you wonder about the technologies used, then here is the answer: Flex, LiveCycle, and Adobe AIR.

My friend Duane Nickull created an online petition here, to convince the organizers of Tour de France to use a similar solution. This would be sweet :) Tell your friends, parents to sign the petition.

February 16, 2009 | Filed Under Others | 2 Comments

mindomo.com – Flash and AIR mind mapping tool

Ryan Stewart wrote this week about an online mind mapping tool created with Flex: MindManager Web. And this post reminded me about a small Romanian company that visited Adobe’s Bucharest office in the spring of 2007, to share with the Romanian Flex Builder team their thoughts about Flex and Flex Builder.

I was at that time a Flex Builder engineer, and I must say I was amazed by these guys. Their passion and sheer will to use the Flash platform to create an online version of their desktop product was astonishing. They created a Flash mind mapping tool for web and a desktop client using Adobe AIR. They offer both free accounts, and premium accounts. So you can use it for free and see if it works for you.

Some cool things about the tool: they implemented the Microsoft ribbon in Flash, and I must say it looks very slick and cool. Also, they optimized the code, so it can handle lots and lots of nodes. You can find more about them and their offer here: http://mindomo.com/.

On March 14th we will organize the first FlexCamp in Timisoara, so I will have the opportunity to visit them on their home turf and talk more about their experience in working with our technology. I can’t wait!

February 13, 2009 | Filed Under AIR | 3 Comments

How to add a scrollbar to Text Layout Framework

Last month I wrote an article about using the Text Layout Framework in Flex 3.2 or AIR 1.5. The article was an introductory one, in which I explained the architecture and showed some basic code to use some of the main features of the framework. Some of you asked how one can add a scrollbar to scroll the text from a container that has more text than can be shown in the current viewport.

To tell you the truth, I was curious about how hard it would be, so today I just played a little bit and I managed to add a scrollbar to control the text.

You can test the code here.

scrollbar

Let me explain very quickly how I did it (if you want to see the details, click view source or scroll down this article for the code):

I display the text using a single container; the size of this container is about 200 x 300 pixels.
I added a mx:VScrollBar component to the page, setting the same height as the text container.
When the TextFlow composes its text for displaying, a CompositionCompletionEvent.COMPOSITION_COMPLETE event is thrown. By listening for this event, I am able to determine if the text will actually flow outside of the text container.
In the listener for CompositionCompletionEvent.COMPOSITION_COMPLETE, I get the total height of the composed text using _controller.calculateHeight() (this method returns the height in pixels. This is the height that the text needs in order to be shown entirely. If the height is bigger than the text container, then I set the max scroll value for the vertical scroll bar to that difference.
I registered a listener for the scroll event on the vertical scroll bar. And next whenever the scroll bar moves, I use the current position of the scroll bar to set the DisplayObjectContainerController’s (this is the object that wraps the text container and it is used by TextFlow for displaying the text) verticalScrollPosition property (the value for this property is in pixels): _controller.verticalScrollPosition = event.position;
This did half of the job: when the user moves the scroll bar, the text moves. Next, I had to synchronize the scroll bar when someone scrolls the text directly too.
To do that, I registered another listener for the scroll event on the TextFlow it self. And whenever the users scrolls the text from the text container directly (for example by selecting a piece of text, holding the left mouse button, and moving it downward or upward), I use the current position of the DisplayObjectContainerController’s verticalScrollPostion to set the scroll bar scrollPosition: scroll.scrollPosition = Math.ceil(_controller.verticalScrollPosition);
You have to use ceil() on the value because the verticalScrollPosition returns a Number, not an Integer.
And that’s it!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html">
<mx:Script>
    <![CDATA[
        import flashx.textLayout.events.ScrollEvent;
        import mx.events.ScrollEvent;
        import mx.events.MoveEvent;
        import flashx.textLayout.container.IContainerController;
        import flashx.textLayout.events.CompositionCompletionEvent;
        import flashx.textLayout.edit.UndoManager;
        import flashx.textLayout.edit.EditManager;
        import flashx.textLayout.events.StatusChangeEvent;
        import flashx.textLayout.elements.InlineGraphicElement;
        import flashx.textLayout.container.DisplayObjectContainerController;
        import flashx.textLayout.conversion.TextFilter;
        import flashx.textLayout.elements.TextFlow;

        [Embed(source="air.png")]
        [Bindable]
        static public var _imgClass:Class;

        private var _textContainer:Sprite = null;

        private static const _textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<div>
    <p>
        <img source="./air.png"/>
        <span>Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free Flex SDK, developers can use Adobe® Flex® Builder™ 3 software to dramatically accelerate development. Try Flex Builder 3 free for 60 days. Try ILOG Elixir to enhance data display in your Flex applications.</span>
        <br/>
    </p>
</div>
</TextFlow>;

        private var _textFlow:TextFlow;
        private var _controller:IContainerController;

        private function init():void {
            _textContainer = new Sprite();
            canvas.rawChildren.addChild(_textContainer);
            _controller = new DisplayObjectContainerController(_textContainer, canvas.width, canvas.height);

            _textFlow = TextFilter.importToFlow(_textInput, TextFilter.TEXT_LAYOUT_FORMAT);
            _textFlow.flowComposer.addController(_controller);
            _textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED, picLoaded);
            _textFlow.addEventListener(CompositionCompletionEvent.COMPOSITION_COMPLETE, composeListener);
            _textFlow.addEventListener(flashx.textLayout.events.ScrollEvent.SCROLL, scrollTextFlow);
            //adding Select/Edit/Copy/Paste/Undo features
            _textFlow.interactionManager = new EditManager(new UndoManager());
            // initialize with a selection before the first character
            _textFlow.interactionManager.setSelection(0,0);

            _textFlow.flowComposer.updateAllContainers();
        }

        /**
         * the composing of the text was finished;
         * now I can see if I my text overflow the container
         */
        private function composeListener(event:CompositionCompletionEvent):void {
            var textHeight:int = Math.ceil(_controller.calculateHeight());
            if (textHeight < _controller.compositionHeight) {
                scroll.enabled = false;
            } else {
                scroll.enabled = true;
                scroll.minScrollPosition = 0;
                scroll.maxScrollPosition = textHeight - _controller.compositionHeight;
            }
            _controller.verticalScrollPosition = 0;
        }

        /**
         * listener for the picture load event; 
         * it is time to update the flowComposer to display the picture
         */
        private function picLoaded(event:StatusChangeEvent):void {
            var image:InlineGraphicElement = event.element as InlineGraphicElement;
            _textFlow.flowComposer.updateAllContainers();
        }

        /**
         * listener for the scroll event of the scrollbar
         */
        private function scrollListener(event:mx.events.ScrollEvent):void {
            _textFlow.removeEventListener(flashx.textLayout.events.ScrollEvent.SCROLL, scrollTextFlow);
            _controller.verticalScrollPosition = event.position;
            _textFlow.addEventListener(flashx.textLayout.events.ScrollEvent.SCROLL, scrollTextFlow);
        }

        /**
         * listener for the scroll event of the text flow container
         */
        private function scrollTextFlow(event:flashx.textLayout.events.ScrollEvent):void {
            scroll.removeEventListener(mx.events.ScrollEvent.SCROLL, scrollListener);
            scroll.scrollPosition = Math.ceil(_controller.verticalScrollPosition);
            scroll.addEventListener(mx.events.ScrollEvent.SCROLL, scrollListener);
        }
    ]]>
</mx:Script>

<mx:HBox x="20" y="20">
    <mx:Canvas id="canvas" width="200" height="300"  backgroundColor="#ffffff"/>
    <mx:VScrollBar id="scroll" height="300" scroll="scrollListener(event)"/>
</mx:HBox>

</mx:Application>

I hope you enjoyed this!

February 12, 2009 | Filed Under AIR, Flex, Tutorials | 25 Comments

The new AIR Marketplace is out

We’ve just launched a new version of AIR Marketplace. You can access it through this URL: http://airmarketplace.adobe.com/

And here are some of the new features:

· Easily search and download applications. Users can rate, review, comment and flag an application to provide valuable feedback. They can share applications with colleagues and friends, and also subscribe to RSS feeds from the Marketplace.
· A self-service web interface enables developers to manage their profiles and applications. Developers can also view download statistics, ratings and reviews through a new application dashboard
· If developers want to sell their application, they can submit the app to the Marketplace. In this case the Marketplace will not enable e-commerce transactions, but the users will be taken to the developers website to conduct the transaction.

LATER UPDATE: you can read here about what is marketplace.

February 10, 2009 | Filed Under AIR, Others | 2 Comments

New features on Adobe Groups – Jobs, Calendar, Messaging

Last year we launched Adobe Groups, a platform to support the activities of Adobe User Groups and to help divelopers find communities near them. Proving a successful project, we naturally continue to add new features. So this way Jobs (a global job board, any job posted by an User Group appears in the jobs category), Calendar (a global calendar of community events, so you can keep an eye on all upcoming events), and Messaging (inbox on your profile and user to user messaging; all the posts you write are tied to your profile) appeared.

If you don’t have an Adobe User Group in your region, but you know there are people who work with our technology, maybe it is time to start one.

February 9, 2009 | Filed Under Others | Leave a Comment

Norway and Denmark trip

This week I traveled to Norway and Denmark to give sessions at two events. The first event was Monday, the first Flex Camp in Norway. About 60 people showed up, and I must say it was one of the most advanced Camp I’ve seen from the level of topics. All the people knew about Flex and AIR, and they were either Flash developers or Flex developers. I did the keynote and a session on Flex and PHP, and the rest of the sessions were about unit testing in Flex, creating scripts for automatic builds, 3D ActionScript engines, and Flash Catalyst.

Øystein did an excellent job organizing this event; the location was nice, and the pizza excellent. After the event most of the people stayed in the student pub near the venue for more talks. And some of us went for a second beer session in another pub. Thank you Peter, Ruben, Martin, Ole, and Jens for that evening. And thank you to Knut, the PHP user group manager for support too.

I can only hope that this event is the first one in a series :)

The next day I took a plane to Copenhagen, Denmark. The PHP user group manager was kind enough to set up a meeting for the group’s members to learn about our Flash Platform. About 13 people showed up, one of them was actually a Microsoft evangelist. Unfortunately he couldn’t stay up until the end, so I don’t know if he enjoyed the session. Many thanks to Troels and to the people from Peytz & Co. who let us use their office for this meeting (they had an amazing working space, lots of room and very unconventional.

After the meeting, with the help of Peter (yes the same Peter from Norway’s Flex Camp, because he actually is Danish), I discovered some local pubs and local beer, and we had more talks on technology. Actually I recorded a very short interview with him about what he thinks about Flash Catalyst (I will post the video soon).

February 6, 2009 | Filed Under Conferences | 1 Comment

Hamburg, Flex & AIR with PHP

February 20, 2009

February 2oth I will give a session about working with Flex / AIR and PHP in Hamburg, Adobe’s office. If you have interest in this session, just send me an email and I will give you intructions on how to register.

January 29, 2009 | Filed Under Events | 4 Comments

London PHP Conference

February 26, 2009

February 28, 2009

I will be in London to attend London PHP Conference, and to give a session about Flex and PHP, how to use Flex Builder and Zend Studio for creating Flex and PHP app, how to bring data from PHP to Flex.

January 7, 2009 | Filed Under Events | 1 Comment