|
*dhtml
|
Adobe Flex BuilderAdobe Flex Builder is an integrated development environment (IDE) built on the Eclipse platform meant for developing rich Internet applications (RIAs) and cross-platform desktop applications, particularly for the Adobe Flex platform. Support for cross-platform desktop applications was added in Flex Builder 3 with the introduction of AIR. WYSIWYG EditorIn addition to the built-in code editors for MXML and ActionScript, Flex Builder supports a WYSIWYG editor for modifying MXML applications and components. DebuggerFlex builder includes an integrated interactive debugger that lets you step through the execution of the code while inspecting variables and watching expressions. ProfilingThe release of Flex Builder 3 added support for profiling or performance analysis. The profiling view displays statistical information about where and how much memory is being consumed in addition to the execution time of function calls. To read more please follow this linkIf you are interested in flex tutorial, please signify before i continue, i must be sure i am not wasting my time here. . . In summary, flex builder is for building flash applications. . .to run on internet / intranet . . .
|
|
|
|
|
|
segsalerty (m)
|
Uhmm , Lovely Into to a new thing to me ! go on DHTML sir ! Students Listening,  |
|
|
|
|
|
*dhtml
|
Only one student? i am still not encouraged. . .
|
|
|
|
|
|
segsalerty (m)
|
You know NUT just called off the strike  Students will resume soon in class , but before then , Pls carry go and make the board full for students to gothru when they arrive ! |
|
|
|
|
|
webdezzi (m)
|
we are here sir, carry on
|
|
|
|
|
|
|
|
*dhtml
|
Wow! Maybe i should stop freelancing and start working as a flex programmer. . . .ok, i am encouraged. . .i will try to do what i can. . .
and hope the flex masters in the house will pop in when we need them. . . .
So for now, you should should get the IDE and install. The one i have is flex builder 3.0
For newbies, please make sure you learn your xml, php and mysql properly. . .they are all very important in learning and using flex builder.
Javascript is optional. . .not even needed like that self. . .the only place you may need javascript is to communicate between two flex applications running on the same page, or to communicate from a flex application (embedded as flash on a web page) to a DOM element such as form or whatever object you have on a web page. . .
|
|
|
|
|
|
*dhtml
|
By the way, i will like you to read the former thread to know a little bit more about flex Flash / Flex Builders: Please Let's Know YouTHat shows the screenshot of flex builder 3.0 and you will also get to learn some stuffs about flex builder. . . |
|
|
|
|
|
*dhtml
|
Please if anyone has installed the flex builder IDE, lemme know so i start the tutorial proper. . .by building a sample project. . .
By the way, we are going to integrate the IDE with an offline server like wamp, reactor or even IIS sef. . .
|
|
|
|
|
|
cyberomin (m)
|
Ogar DHTML i have installed Flex 3 IDE so u can start your lessons
|
|
|
|
|
|
*dhtml
|
No problem, i have prepared the first set of lessons, when i get back to my pc later in the night, i will start posting. . .meanwhile if you have started using flex already, you can ask questions so that everyone will learn o. . .
|
|
|
|
|
|
*dhtml
|
Here we go. For the purpose of this class, i decided to use reactor 1.4 - lemme explain the mapping. I created the local folder: C:\Reactor\Core\htdocs\flexbuilder On local server will be: http://localhost/flexbuilder/I want to create a blank flex application inside the folder and view it on my local server. . . Please note that on step 3: you need to do a validation. To do that validation, your local server must be running. On that step, as you will see on the screenshot, i specified web root: C:\Reactor\Core\htdocs\flexbuilder and Root url of the project as: http://localhost/flexbuilderand then clicked validate - that will crosscheck and give you valid if it is correct. . .let us call it resolving the paths. |
|
|
|
|
|
|
|
*dhtml
|
Hope you are following. . .
|
|
|
|
|
|
*dhtml
|
Aaaaand, them decide to carry the light go (to the non-nigerians, that is the local term for power failure). . .oops. . .guess i will continue tomorow. . .
|
|
|
|
|
|
pc guru (m)
|
nice job i'll join you guys when am thru still on php.as for javascript i've covered them but i need to practice.no pc in village here.Good Work Dhtml
|
|
|
|
|
|
*dhtml
|
By now, a sample project has been built. . .we now want to execute it. . .
|
|
|
|
|
|
prodgalson
|
good effort on spreading the word, dhtml.
If I have the time, I may start a complementary thread on building non server-dependent desktop apps, using free tools and the flex sdk.
|
|
|
|
|
|
*dhtml
|
Thanks man. . .i was hoping you will show up sooner or later. . .And if i go wrong at any point, or paste an inefficient code. . .or anything, please
give us the correct one o. . .my flex is rather limited. . .i did not even create an AIR application sef. . .just learnt how to build some web server
dependent application. . .
For those that are learning, please feel free to ask questions o . . . so that ends our first sample projects. . .let us try to move forward. . .
There are so many different controls in flex like textbox. . .image. . .some of which we are already familiar with.
And there are also some weird looking objects in flex. . .i am going to skip those simple ones like textboxes for now. . .i will still use them
later. . .those ones are easy to learn. . .it is the complicated ones that i am going to put emphasis on. . .like all of those them repeaters. . .
tile list. . . connect to xml. . . connect to mysql database. . .
|
|
|
|
|
|
*dhtml
|
I have been getting feedbacks offline that i should go right on. . .so lemme proceed quickly to the first real project here. . .how to build a
simple slideshow with flex. . .
|
|
|
|
|
|
*dhtml
|
The necessary items in this project will be posted into my dhtml browsera utility i introduced in another thread. . .i am extending it here. . .it was [http://www.nairaland.com/nigeria/topic-213492.32.html#msg3449080]introduced here[/url] and further explained hereSo you will find the flex projects stored on: flexi/slideshow/step1 . . . later step2 . . . screenshot will be seen shortly Step 1: i added some photos into a folder. . .of people like usher ramoni, jlo. . . step2 : i want to read the images folder with php and render the output as xml . . . so the output i want you to see at this point is: the generated source |
|
|
|
|
|
*dhtml
|
It is very important for you at this point to know how to code xml . . . if you have never written xml before, please learn it from w3schools.com If you examine the structure of that xml well. . .you will see a childnode of image is repeated each time, and carries 2 things, src and caption These will be used by flex to get the information and translate them accordingly. . .as you will see later. . . |
|
|
|
|
|
*dhtml
|
At this point, i will want you to do a quick checkup on the datagrid control. . .it is somewhat similar to a table in html. . .but the differences is like night and day. . Anyway, when data repeats itself, like xml data, datagrid can help you build something like a table to render those repetitive elements. . . Instead of using our regular looping codes. . .for. . . .while. . .a datarepeater will just do the magic. gbam! This is the reason why i want to use slideshow as a good way to start. . .as you will see. . .i will not use any loop at all. . .and yet flex actionscript contains all those loops too. . .! The first mistake i made when i went into flex was, after learning few things. . .i though i could just rough my way through it because i am a grade A+ actionscript user. . .only to discover that i was wasting my time. . .writing what is staring at me in the face. . . So my advice is to learn the regular flex objects first, before rushing off to create your own components and libraries. . . So slide1.mxml will be: <?xml version="1.0" encoding="utf-8"?> <mx:Application creationComplete=" userRequest.send();" xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" xmlns:ns2="myComponents.*"> <mx:HTTPService id=" userRequest" url=" http://localhost/slideshow/index.php" useProxy="false" method="POST"> <mx:request xmlns=""> </mx:request> </mx:HTTPService> <mx:DataGrid id="myGrid" width="350" height="200" dataProvider="{userRequest.lastResult.slideshow.image}" > <mx:columns> <mx:DataGridColumn dataField=" src" /> <mx:DataGridColumn dataField=" caption" /> </mx:columns> </mx:DataGrid> </mx:Application> That will be responsible for displaying the image below: |
|
|
|
|
|
*dhtml
|
I made use of the xmlhttp service up there. . .that is what is responsible for fetching the slideshow data located in http://localhost/slideshow/index.phpwhile the datagrid is bounded to that service like this: {userRequest.lastResult.slideshow.image} so that if the data in xmlservice changes. . .the datagrid will automatically read the new xml data available. . . The grid has 2 values it displays, the src and the data. . .which are the repeating elements in that xml. . . I know my information is not sufficient on xhmlhttpservice and datagrid. . .but read it up in the flex builder help. . .then come back to read what is here. . . |
|
|
|
|
|
*dhtml
|
By the way. . .i think you guyz should read this infoThat gives more insight into flex building. . .pending my next post. . . |
|
|
|
|
|
*dhtml
|
So now, we have been able to render the content of the xml correctly in the datagrid. . .but we want the src to display as image. . . So we now bring in another technique in flex, using what is called item renderersNow, as we all know, you can return various kinds of information through xml. . .it may be number, it may be text, it may be image or whatever. . .so flex knows this, and so there are times you need to specify a renderer aside of the default text. . . check this out slide2.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application creationComplete="userRequest.send();" xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*"> <mx:HTTPService id="userRequest" url=" http://localhost/slideshow/index.php" useProxy="false" method="POST"> <mx:request xmlns=""> </mx:request> </mx:HTTPService> <mx:DataGrid id="myGrid" width="350" height="200" dataProvider="{userRequest.lastResult.slideshow.image}" > <mx:columns> <mx:DataGridColumn dataField="src">
<mx:itemRenderer>
<mx:Component>
<mx:Image height="45"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="caption" /> </mx:columns> </mx:DataGrid> </mx:Application> I have introduced an image item render. . .so the output becomes. . . |
|
|
|
|
|
*dhtml
|
So now, i decided to another of them data repeaters called tile list: slide3.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application creationComplete="userRequest.send();" xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*"> <mx:HTTPService id="userRequest" url=" http://localhost/slideshow/index.php" useProxy="false" method="POST"> <mx:request xmlns=""> </mx:request> </mx:HTTPService> <mx:TileList dataProvider="{userRequest.lastResult.slideshow.image}"> <mx:itemRenderer> <mx:Component> <mx:Image source="{data.src}" height="60"/> </mx:Component> </mx:itemRenderer> </mx:TileList> </mx:Application> Notice the similarities in all of these steps. . .we are almost there. . . |
|
|
|
|
|
*dhtml
|
So now. . . i need a control that will show the image and the caption below. . .oops there is none So. . .i created my own custom control ImageViewer.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="92" height="108"> <mx:Image x="8" y="9" source="{data.src}" width="75" height="72"/> <mx:Label x="0" y="86" text="{data.caption}" textAlign="center" width="100%"/> </mx:Canvas> And decided to use my own control with the TileList to render the images with caption slide4.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application creationComplete="userRequest.send();" xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" xmlns:ns2="myComponents.*"> <mx:HTTPService id="userRequest" url=" http://localhost/slideshow/index.php" useProxy="false" method="POST"> <mx:request xmlns=""> </mx:request> </mx:HTTPService> <mx:TileList dataProvider="{userRequest.lastResult.slideshow.image}" itemRenderer="ImageViewer" width="342" height="291" y="0"> </mx:TileList> </mx:Application> |
|
|
|
|
|
*dhtml
|
So read-up creating custom components. . .at least i have given an instance of a real-world stuff. . .
That is it for today. . .
So on our next session, we are going to look for how to now zoom the image when it is clicked. . .
A little actionscript will be needed there. . .just little. . .that will be easy to follow. . .have 9ce day.
Aaaaand, questions are most welcomed and will be appreciated. . .i hate posting on and on like this. . .
it makes me feel like a spammer. . .
|
|
|
|
|
|
![Nairaland [Nigerian Forum] Home](http://www.nairaland.com/Themes/default/images/english/home.gif)
Author
Untitled-1.jpg (64.49 KB, 1280x800 )
