[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. :)
32 Comments
Thanks, cool
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.
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.
Can you make available the code for this project….! As it has some nice bits that I would like to use if possible….?
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
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.
Hmm,
“Definition assets:PhoneRenderer could not be found.”
Why is that ?
Pretty much followed the video…
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…
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
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!”
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
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
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
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?
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
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
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!
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 :-)
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
Hi Sri,
You could probably just have some web service which searches your database of videos.
-James
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 ???
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
i need a code in flex for displaying a video at the same time showing the timer.
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
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
Hi Ajit,
Just copy the .swc file into the libs folder of your Flex Project. That’s the easiest way.
-James
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
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
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
Hi gopalakrishnan,
I recommend you check out Tour de Flex:
http://flex.org/tour
-James
“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.
Hi Joan,
Did you change the url in the HTTPService?
-James
3 Trackbacks
[...] Screencast of a simple application being built using Adobe’s Flex Builder. [...]
[...] ??Flex????Ward??????????????Flex??????????????????????????Flex?Java?????? Adobe Developer Connection? ? [...]
[...] the Flex 2 product pages on adobe.com I recorded a screencast of a Flex app being built in 11 minutes. For Flex 3 I recorded a new version of that screencast. In the new version I used Doug [...]