Screencast: Watch a Flex app built in 11 minutes

[Update: This screencast has been updated for Flex 3. Read more about it here.]

Many times I am asked “Where do I start learning about Flex?”. Most of the time I point them to flex.org as a starting point. However it is often just easier to see the product in action. So I recorded a screencast of me building a simple Flex app with Flex Builder. Here it is:

http://www.adobe.com/products/flex/media/flexapp/

I hope this is helpful to those of you new to Flex. After you watch the screencast, download Flex Builder and give it a try. If you find yourself saying things like “Wow! Coding is fun again!” or “I had no idea RIA programming was so easy!”, Welcome to Flexland! A few years ago I found myself in Flexland and to me it’s like being in the mountains… Once you are there, you never want to be anywhere else. :)

This entry was posted in Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • guillermo Pared

    Thanks, cool

  • Mark Murphy

    You might consider linking straight to the SWF in addition to providing a link to the HTML wrapper. Your screencast doesn’t work in Linux using either Flash 7 (in Firefox) or Flash 9 (standalone player). But, then again, I might not have extracted the link to the SWF correctly, so I might have not done the Flash 9 test properly.

  • James Ward

    I will try to get a standalone version of the SWF hosted here for download. However, just so you know, the video is probably streaming a flv and it does work fine on Linux with the Flash 9 plugin.

  • http://www.mywebfavorites.com Stewart Grainger

    Can you make available the code for this project….! As it has some nice bits that I would like to use if possible….?

  • Pingback: 2 Sentences or Less » Blog Archive » Try Flex()

  • James Ward

    Sorry it took so long. You can get the code here:

    http://www.jamesward.org/phones/

    Start with the FlexStore code that ships as a sample with the free Flex SDK and Flex Builder. Copy the assets and data folders into a new project. Then copy the PhoneDetails.mxml and PhoneRenderer.mxml files into the assets folder. Then copy the phones.mxml file into your project root, compile and run it! Let me know if you have any problems.

    -James

  • Dave

    Thanks for the PhoneRenderer.mxml etc. I’m following along with the online demo and I find the data and assets in my install of flex2, but none of the .mxml files. tThis should help things.
    Dave.

  • Rachid

    Hmm,

    “Definition assets:PhoneRenderer could not be found.”

    Why is that ?
    Pretty much followed the video…

  • Rachid

    Ah, it seems that my browser is downloading the mxml files as xml files.
    That doesn’t work obviously. :-)

    Too bad that they don’t show how this itemRenderer is made, and how it works.
    Looks like an incomplete tutorial to me this way…

  • http://www.jamesward.org James Ward

    Hi Rachid,

    The PhoneRenderer.mxml should either be in an assets dir or you can change the itemRenderer to just be “PhoneRenderer”. I hope that helps.

    -James

  • Pingback: [ ? ? ] ??????? » Blog Archive » ?Adobe Flex?????()

  • http://timescourier.com Jason

    Could you give a brief tutorial, on how to add a close “linkbutton” to the details mxml in your phone example. so that the details panel could close.

    Thanks, and “wow, flex is fun and easy!”

  • http://www.jamesward.org James Ward

    Hi Jason,

    The best way to do this would be to add the close button to the PhoneDetails component. On click of that button dispatch a custom event. In the main application handle that event and switch the currentState to the default state (specified by ”).

    I hope that helps.

    -James

  • ashok

    hi james,
    will it be possible for you to provide a link to the phone live app link. I was making my sample aplication, and all of a sudden the live flex app link to the phones application is no more there.

    thanks,
    ashok

  • http://www.jamesward.org James Ward

    I’ve uploaded the demo and code: http://www.jamesward.org/phones-demo/phones.html

    Right-click to get the code. I hope that helps.

    -James

  • Andriy Drozdenko

    Phones? The video is about cover flow. The <local:VideoCoverFlow is not bounded you used Doug McCune’s CoverFlow component and people dont understand where the VideoCoverFlow component came from… go on this link and see for yourself http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1340534 . Can you post the code for CoverFlow video tutorial please?

  • Pingback: James Ward - RIA Cowboy » Blog Archive » New Flex Screencast and VideoCoverFlow Component()

  • http://www.jamesward.org James Ward

    Hi Andriy,

    The screencast has been updated for Flex 3. More details here:
    http://www.jamesward.org/wordpress/2008/03/11/new-flex-screencast-and-videocoverflow-component/

    -James

  • cojack cool

    hi James
    iam from egypt thanks for the src i realy like it and it help me alot it more than i was looking for
    god bless you
    so have fun
    bye

  • http://www.techforlunch.com Pascal

    Hi there!

    Any chance we could get a link to the first screencast? I’ve seen it before and wanted to go back to it because there were a couple of cool things you did in there that I can’t remember how you did.

    thanks!

  • http://www.techforlunch.com Pascal

    well I don’t know what I was on, but I just noticed the link to the live app a bit higher.. so nevermind my previous post and thanks for the screencasts :-)

  • Srikanth

    Hi James,

    I am trying to a similar application.I am able use the video cover flow component to display videos and play mp3 files that are streamed from Flash media server 3.

    Now what i am trying to figure out is how do let the user search these videos ?In order to do that i will definitely have to put some meta-data associated with the video/audio files.I also want to do display some information about the videos/audio files when the user plays them.The information would typically be some few sentences about the video,about the author etc.

    Is there a simple to achieve this by just using FMS and some action script?

    Any information or pointers towards this will be very helpful.

    Regards,
    Sri

  • http://www.jamesward.org James Ward

    Hi Sri,

    You could probably just have some web service which searches your database of videos.

    -James

  • Rajat

    well neither the code , nor the demo is workin for me …
    i am getting following errors..

    [RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]
    at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::faultHandler()
    at mx.rpc::Responder/fault()
    at mx.rpc::AsyncRequest/fault()
    at DirectHTTPMessageResponder/securityErrorHandler()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/redirectEvent()

    any comments ???

  • http://www.jamesward.org James Ward

    Thanks Rajat for letting me know. I need to update the demo to use my new .com URL instead of my old .org URL. That is why this no longer works. Sorry.

    -James

  • Reshmi

    i need a code in flex for displaying a video at the same time showing the timer.

  • http://www.jamesward.org James Ward

    Hi Reshmi,

    That is easy to do. Basically just a VideoDisplay and a Label bound to some variable that changes in response to some event.

    -James

  • Ajit

    Hi James,

    Iam a begineer in the Flex environment.I have seen your video on how to build flex applicaiton in 11-min. I downloaded Doug Mccune coverflow source code. I don’t know how to add that project into the workspace.

    Do you mind to walk me through the steps in add a library project into the workspace.

    Your help will be greatly appreciated
    Thanks
    Ajit

  • http://www.jamesward.org James Ward

    Hi Ajit,

    Just copy the .swc file into the libs folder of your Flex Project. That’s the easiest way.

    -James

  • Mohini

    Hi,

    I read your blog site.
    I am new to Adobe Flex and trying to build and application using Adobe Flex and interacting with Oracle database.
    I started with some basic applications on Flex Builder 2. But now I want to start retrieving and saving data from database.
    We use Oracle 10g as database.
    Please let me know how to configure database with Flex Builder2 .
    Or how can I write an simple application to retrieve data from oracle database using JDBC and show in mxml page.

    Can you help me by mailing me some hint or code.

    Thanks and Regards,
    Mohini

  • http://www.jamesward.org James Ward

    Hi Mohini,

    You can’t talk directly from the client to the database server. So you need to expose your database CRUD methods out to the Flex app as web services or using BlazeDS / LCDS.

    -James

  • http://no gopalakrishnan

    Hi james,

    i am working as a 3D graphics designer, i am planing to change my technology dude , zero knowledge about this technology, one of my friend told me this is upcoming technology, so can u tell me about this technology….

    thanks and regards
    gopalarkishnan

  • http://www.jamesward.com James Ward

    Hi gopalakrishnan,

    I recommend you check out Tour de Flex:
    http://flex.org/tour

    -James

  • Joan

    “I need to update the demo to use my new .com URL instead of my old .org URL. That is why this no longer works.” – How does the code need to change? I am getting the same rpc errors. What do i need to change. Thanks very much.

  • http://www.jamesward.com James Ward

    Hi Joan,

    Did you change the url in the HTTPService?

    -James



  • View James Ward's profile on LinkedIn