|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Example Code: | |
|
|
|
AutoScroll Explorer (Flash Player 9 Beta 3 Required)
View AutoScroll Explorer Source
Download AutoScroll Explorer Source
This component is licensed under a Creative Commons Attribution 2.5 License. Feel free to download and modify the code for any use as long as my name is in there somewhere. Updates and improvements to the AutoScroll component will be appended to this entry as it grows up and gets more polish.
|
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Watcher</title> <script src="jquery-1.1.2.js" type="text/javascript"></script> <script src="watcher.js" type="text/javascript"></script> <link href="watcher.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="listing"></div> </body> </html>I'm not a CSS guru. In fact, I'm rather appalled by the current state of affairs as it pertains to browser differences in CSS implementation. Since I'm building this application for Apollo however, I know that I'll be using WebKit, and that makes my job a lot easier. One single browser that runs consistently across operating systems. That I can handle. I use some absolute positioning for the list DIV and a few other items, and then I sprinkle in some relative positioning for smaller textual regions. .bar { position: absolute; height: 6px; margin-top: 24px; border: solid 1px #446EAC; left: 28px; right: 5px; visibility: hidden; background-color: #FFFFFF; } body { background-color: #F6F5F4; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } .icon { position: relative; margin-left: 5px; margin-top: 3px; float: left; } .item { height: 36px; border-bottom: solid; border-bottom-color: #808080; border-bottom-width: 1px; cursor: default; background-color: #FFFFFF; } #listing { border: solid; border-color: #808080; border-width: 1px; background-color: #FFFFFF; overflow: auto; position: absolute; left: 5px; bottom: 5px; right: 5px; top: 5px; } .filename { position: relative; float: left; margin-left: 4px; margin-top: 5px; clear: right; } .filename span { color: #808080; position: relative; margin-left: 5px; } .pending { position: relative; margin-left: 27px; margin-top: -1px; color: #808080; float: left; clear: left; } .progress { width: 0%; height: 100%; background-color: #AEDDF2; }If we can think about having CSS consistency across OS thanks to the WebKit engine in Apollo, then it stands to reason that we can think about consistency with JavaScript too. While that is true, I'm not a masochist, and I have elected to use as a JavaScript library for this application. I'd be interested in your thoughts on jQuery and it's use in sample Apollo applications. Would you prefer samples be core JavaScript, or is a library acceptable? Which libraries would you prefer? The first thing we'll do when the application starts is check for the existence of a directory on the desktop. Apollo makes this easy, without having to think about where the desktop is located and on which operating system. The File object in Apollo has a variety of static properties to common OS locations that return a File reference. In this case we can use File.desktopDirectory and file.resolve() the specific directory on the desktop that we're interested in watching. // Watcher logic $( document ).ready( function() { // Check for directory var watching = runtime.flash.filesystem.File.desktopDirectory; watching = watching.resolve( dir ); // Create it if it doesn't exist if( !watching.exists ) { watching.createDirectory(); } // Do the initial check and updating of the UI update(); } );Once the application is started and we've confirmed the presence of our image directory (or created it if it doesn't exist), then we move on to checking for the presence of image files. The File object has a listDirectory() method that we can use to get the contents of the directory. We don't want to upload anything other than image files however, so we'll check the file extension. This isn't particularly accurate, but it's a good start. If the item in the list of files is an image, then we can build an item to render the details and then pop it into the list. In the case that there are images, we'll start uploading the files, otherwise we'll check back every five seconds via JavaScript's setInterval() function. // Checks the directory and updates the UI function update() { // HTML block for list item var itemo = "<div class="item">"; var icon = "<img src="image.png" width="18" height="18" class="icon" />"; var fileo = "<div class="filename">"; var sizeo = "<span>("; var sizec = " KB)</span>"; var filec = "</div>"; var pending = "<div class="pending">Upload not yet started...</div>"; var baro = "<div class="bar">"; var progress = "<div class="progress"></div>"; var barc = "</div>"; var itemc = "</div>"; var inject = null; // Get the list of image in the directory var watching = runtime.flash.filesystem.File.desktopDirectory; var list = null; // Get the directory listing watching = watching.resolve( dir ); list = watching.listDirectory(); // Remove existing item entries $( "#listing" ).empty(); // Find the actual image files for( var i = 0; i < list.length; i++ ) { if( list[i].name.toLowerCase().indexOf( ".jpg" ) >= 0 ) { // Build the item inject = itemo + icon + fileo + list[i].name + sizeo + formatSize( Math.round( list[i].size / 1000 ) ) + sizec + filec + pending + baro + progress + barc + itemc; // Inject the new item container $( "#listing" ).append( inject ); } } // Add mouse handlers to any new items $( ".item" ).mouseover( function() { $( this ).css( "backgroundColor", "#D4D5D8" ); } ); $( ".item" ).mouseout( function() { $( this ).css( "backgroundColor", "#FFFFFF" ); } ); // TODO: Show a means to remove an image when the mouse is over an item // TODO: Have image thumbnail appear when mouse is over icon // TODO: Show summary status bar with total upload progress // Determine if uploading needs to occur // Avoids refresh of list mid-upload // Can check for more later, after upload has completed if( $( ".item" ).size() > 0 ) { upload( null ); } else { // Check again at some point in the future setTimeout( "update()", interval ); } }Rather than check the file system again before we're done uploading, I've chosen to extract the file name from the list item and then infer the path (we know where that directory on the desktop is, right?). I figure that once we're done with this batch of uploads that we'll check the file system again later for more image files. There are some shortcomings to this approach, but I'm not trying to account for every use-case with this example. You might initially be inclined to think that we'll use an upload form in HTML to upload our files, but as mentioned previously, there's no means provided to check the progress. As it turns out the File object has an upload() method on it. The only thing the upload() method requires is a reference to a URLRequest object. This is the object that most importantly contains the URL endpoint, but it might optionally contain some additional form data. The File.upload() will actually execute a multi-part form upload to the server, and you can treat it as such once it gets there. For this example I'm using ColdFusion on the server. This is mostly because I have it readily available, and it's only a single line of code to get the uploaded bytes and store them on disk. I like easy. You can replace this with whatever you prefer on the server. The other important aspect to this is the additional event listeners I've put on the File object. The progress event let's me know periodically that the upload is taking place. It passes an event object that among other data, contains bytesLoaded and bytesTotal properties. I can use this information to determine a percentage of the progress and then tell the CSS on the progress bar to size itself to that percent. The complete event will fire when the upload is finished, and then we can take additional action. // Show progress for the image being uploaded function progress( event ) { // Determine overall percentage from event properties var percent = Math.round( ( event.bytesLoaded / event.bytesTotal ) * 100 ); // Change CSS properties to show bar width based on percent $( ".progress:first" ).css( "width", percent + "%" ); }I've chosen to call back to the upload() function when the upload operation is completed. When that event fires, it too will pass an event object along. The upload() function checks for the presence of that event object. If the event object is present, then the application knows that the upload is complete, and can clean up the file from disk. Once again the File object provides a deleteFile() method we can use for this in a simple one-liner. If the upload() method gets called an no event object is provided, then the application knows that we need to start an upload operation. // Perform the actual upload function upload( event ) { // Variables for managing the upload // Image is a reference to a file on disk from the first item in the list var img = extractAndResolve( $( ".item:first" ).text() ); var request = null; // If there is no argument value, then upload the first item in the list if( event == null ) { // Show the upload progress bar and hide the waiting text $( ".pending:first" ).css( "visibility", "hidden" ); $( ".bar:first" ).css( "visibility", "visible" ); // Destination of uploaded file request = new runtime.flash.net.URLRequest( url ); // Attach the appropriate event listeners img.addEventListener( runtime.flash.events.ProgressEvent.PROGRESS, progress ); img.addEventListener( runtime.flash.events.Event.COMPLETE, upload ); // Upload the file img.upload( request, field, false ); } else { // Remove the first image item from the list $( ".item:first" ).remove(); // Remove the actual image from the disk img.deleteFile(); // Move onto the next image if there are any available if( $( ".item" ).size() > 0 ) { upload( null ); } else { // Keep checking for new images setTimeout( "update()", interval ); } } }A word of caution here is that I have chosen to remove the files after they've been uploaded. If you're going to try this application out on your machine, make sure that you copy the files and not move them. This application has no mercy and will start uploading and deleting within seconds of your paste operation. User beware! Once the upload operation is complete, and the image file has been removed from disk, the application checks for any additional items in the list. If there are none, the process of waiting five seconds and checking for more files starts all over. If there are additional items in the list (additional files), then the next item in the list will be processed (uploaded). I've chosen to always check the first item in the list, so uploading will happen from the top down. That's all there is to it! There's a number of to-do's that I'd like to add, and I've made comments to that point, which again is all JavaScript. Since I'm using my own server for the upload, I throttle the upload image size to no more than three megabytes (3 Mb). Feel free to point the URL to your own server, or better yet Amazon S3 and not worry about it. That was beyond my scope for this little experiment. You can access the source code and application file in the archive attached to this post. |
|
|
|
|
|
|
FileIO application overviewThe File IO application contains the user interface that allows a user to upload or download files using Flash Player. The application first defines a couple of custom components, FileUpload and FileDownload, which can be found in the com.example.programmingas3.fileio package. Once each custom component dispatches its contentComplete event, the component's init() method is called and passes references to a ProgressBar and Button component instance, which allow users to see the file's upload or download progress or cancel the file transfer in progress. The relevant code from the FileIO.mxml file is as follows: <example:FileUpload id="fileUpload" creationComplete="fileUpload.init(uploadProgress, cancelUpload);" /> <example:FileDownload id="fileDownload" creationComplete="fileDownload.init(downloadProgress, cancelDownload);" />The following code shows the Upload File panel, which contains a progress bar, and two buttons. The first button, startUpload , calls the FileUpload.startUpload() method, which calls the FileReference.browse() method. The following excerpt shows the code for the Upload File panel: <mx:Panel title="Upload File" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> <mx:ProgressBar id="uploadProgress" label="" mode="manual" /> <mx:ControlBar horizontalAlign="right"> <mx:Button id="startUpload" label="Upload..." click="fileUpload.startUpload();" /> <mx:Button id="cancelUpload" label="Cancel" click="fileUpload.cancelUpload();" enabled="false" /> </mx:ControlBar> </mx:Panel>This code places a ProgressBar component instance and two Button component button instances on the Stage. When the user clicks the Upload button ( startUpload) , an operating system dialog box is launched that allows the user to select a file to upload to a remote server. The other button, cancelUpload , is disabled by default, although when a user begins a file upload, the button becomes enabled and allows the user to abort the file transfer at any time. The code for the Download File panel is as follows: <mx:Panel title="Download File" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> <mx:ProgressBar id="downloadProgress" label="" mode="manual" /> <mx:ControlBar horizontalAlign="right"> <mx:Button id="startDownload" label="Download..." click="fileDownload.startDownload();" /> <mx:Button id="cancelDownload" label="Cancel" click="fileDownload.cancelDownload();" enabled="false" /> </mx:ControlBar> </mx:Panel>This code is very similar to the file upload code. When the user clicks the Download button, ( startDownload ), the FileDownload.startDownload() method is called, which begins downloading the file specified in the FileDownload.DOWNLOAD_URL variable. As the file downloads, the progress bar updates, showing what percentage of the file has downloaded. The user can cancel the download at any point by clicking the cancelDownload button, which immediately stops the file download in progress. Downloading files from a remote serverDownloading of files from a remote server is handled by the flash.net.FileReference class and the custom com.example.programmingas3.fileio.FileDownload class. When the user clicks the Download button, Flash Player begins to download the file specified in the FileDownload class's DOWNLOAD_URL variable. The FileDownload class begins by defining four variables within the com.example.programmingas3.fileio package, the following code shows: /** * Hard-code the URL of file to download to user's computer. */ private const DOWNLOAD_URL:String = "http://www.yourdomain.com/file_to_download.zip"; /** * Create a FileReference instance to handle the file download. */ private var fr:FileReference; /** * Define reference to the download ProgressBar component. */ private var pb:ProgressBar; /** * Define reference to the "Cancel" button which will immediately stop * the current download in progress. */ private var btn:Button;The first variable, DOWNLOAD_URL , contains the path to the file, which gets downloaded onto the user's computer when the user clicks the Download button in the main application file. The second variable, fr , is a FileReference object that gets initialized within the FileDownload.init() method and will handle the downloading of the remote file to the user's computer. The last two variables, pb and btn , contain references to ProgressBar and Button component instances on the Stage, which get initialized by the FileDownload.init() method. Initializing the FileDownload componentThe FileDownload component is initialized by calling the init() method in the FileDownload class. This method takes two parameters, pb and btn , which are ProgressBar and Button component instances, respectively. The code for the init() method is as follows: /** * Set references to the components, and add listeners for the OPEN, * PROGRESS, and COMPLETE events. */ public function init(pb:ProgressBar, btn:Button):void { /* Set up the references to the progress bar and cancel button, which are passed from the calling script. */ this.pb = pb; this.btn = btn; fr = new FileReference(); fr.addEventListener(Event.OPEN, openHandler); fr.addEventListener(ProgressEvent.PROGRESS, progressHandler); fr.addEventListener(Event.COMPLETE, completeHandler); }Beginning the file downloadWhen the user clicks the Download Button component instance on the Stage, the startDownload() method is to initiate the file download process. The following excerpt shows the startDownload() method: /** * Begin downloading the file specified in the DOWNLOAD_URL constant. */ public function startDownload():void { var request:URLRequest = new URLRequest(); request.url = DOWNLOAD_URL; fr.download(request); }First, the startDownload() method creates a new URLRequest object, and sets the target URL to the value specified by the DOWNLOAD_URL variable. Next, the FileReference.download() method is called, and the newly created URLRequest object is passed as a parameter. This causes the operating system to display a dialog box on the user's computer prompting them to select a location to save the requested document. Once the user selects a location, the open event ( Event.OPEN ) is dispatched and the openHandler() method is invoked. The openHandler() method sets the text format for the ProgressBar component's label property, and enables the Cancel button, which allows the user to immediately stop the download in progress. The openHandler() method is as follows: /** * When the OPEN event has dispatched, change the progress bar's label * and enable the "Cancel" button, which allows the user to abort the * download operation. */ private function openHandler(event:Event):void { pb.label = "DOWNLOADING %3%%"; btn.enabled = true; }Monitoring a file's download progressAs a file downloads from a remote server to the user's computer, the progress event ( ProgressEvent.PROGRESS ) is dispatched at regular intervals. Whenever the progress event is dispatched, the progressHandler() method is invoked and the ProgressBar component instance on the Stage is updated. The code for the progressHandler() method is as follows: /** * While the file is downloading, update the progress bar's status. */ private function progressHandler(event:ProgressEvent):void { pb.setProgress(event.bytesLoaded, event.bytesTotal); }The progress event contains two properties, bytesLoaded and bytesTotal , which are used to update the ProgressBar component on the Stage. This gives the user a sense of how much of the file has already finished downloading and how much remains. The user can abort the file transfer at any time by clicking the Cancel button below the progress bar. If the file is downloaded successfully, the complete event ( Event.COMPLETE ) invokes the completeHandler() method, which notifies the user that the file has completed downloading and disables the Cancel button. The code for the completeHandler() method is as follows: /** * Once the download has completed, change the progress bar's label one * last time and disable the "Cancel" button since the download is * already completed. */ private function completeHandler(event:Event):void { pb.label = "DOWNLOAD COMPLETE"; btn.enabled = false; }Cancelling a file downloadA user can abort a file transfer and stop any further bytes from being downloaded at any time by clicking the Cancel button on the Stage. The following excerpt shows the code for cancelling a download: /** * Cancel the current file download. */ public function cancelDownload():void { fr.cancel(); pb.label = "DOWNLOAD CANCELLED"; btn.enabled = false; }First, the code stops the file transfer immediately, preventing any further data from downloading. Next, the progress bar's label property is updated to notify the user that the download has been successfully cancelled. Finally, the Cancel button is disabled, which prevents the user from clicking the button again until they attempt to download the file again. Uploading files to a remote serverThe file upload process is very similar to the file download process. The FileUpload class declares the same four variables, as shown in the following code: private const UPLOAD_URL:String = "http://www.yourdomain.com/your_upload_script.cfm"; private var fr:FileReference; private var pb:ProgressBar; private var btn:Button;Unlike the FileDownload.DOWNLOAD_URL variable, the UPLOAD_URL variable contains the URL to the server-side script that will upload the file from the user's computer. The remaining three variables behave the same as their counterparts in the FileDownload class. Initializing the FileUpload componentThe FileUpload component contains an init() method, which gets called from the main application. This method takes two parameters, pb and btn , which are references to a ProgressBar and Button component instance on the Stage. Next, the init() method initializes the FileReference object defined earlier in the FileUpload class. Finally, the method assigns four event listeners to the FileReference object. The code for the init() method is as follows: public function init(pb:ProgressBar, btn:Button):void { this.pb = pb; this.btn = btn; fr = new FileReference(); fr.addEventListener(Event.SELECT, selectHandler); fr.addEventListener(Event.OPEN, openHandler); fr.addEventListener(ProgressEvent.PROGRESS, progressHandler); fr.addEventListener(Event.COMPLETE, completeHandler); }Beginning a file uploadThe file upload is initiated when the user clicks on the Upload button on the Stage, which invokes the FileUpload.startUpload() method. This method calls the browse() method of the FileReference class which causes the operating system to display a system dialog box prompting the user to select a file to upload to the remote server. The following excerpt shows the code for the startUpload() method: public function startUpload():void { fr.browse(); }Once the user selects a file to upload, the select event ( Event.SELECT ) is dispatched, causing the selectHandler() method to be invoked. The selectHandler() method creates a new URLRequest object and sets the URLRequest.url property to the value of the UPLOAD_URL constant defined earlier in the code. Finally, the FileReference object uploads the selected file to the specified server-side script. The code for the selectHandler() method is as follows: private function selectHandler(event:Event):void { var request:URLRequest = new URLRequest(); request.url = UPLOAD_URL; fr.upload(request); }The remaining code in the FileUpload class is the same as the code defined in the FileDownload class. If a user wishes to terminate the upload at any point, they can click the Cancel button, which sets the label on the progress bar and stops the file transfer immediately. The progress bar gets updated whenever the progress event ( ProgressEvent.PROGRESS ) is dispatched. Similarly, once the upload has completed, the progress bar is updated to notify the user that the file has uploaded successfully. The Cancel button is then disabled until the user begins a new file transfer. |
|
|
<?php $errors = array(); function return_result($success,$errors,$data) { function echo_errors($errors) { switch($_REQUEST['action']) { case "upload": } return_result($success,$errors,$data); ?> |
|
|
|
|
An Adobe Certified Expert (ACE) has earned a certification created specifically for graphic designers, Web designers, video professionals, system integrators,value-added resellers, developers, or business professionals seeking recognition for their expertise with Adobe products. Levels:
Registration: Cost: Each exam is US$150 or local currency equivalent. How to prepare for an exam:
ACE exams are computer-delivered, closed-book tests consisting of 60 to 90 multiple-choice questions. Each exam takes one to two hours to complete, and results are given to you at the testing center immediately after you finish.Adobe recertification exams are Web administered exams that are available to current ACEs only. The exams are delivered to your desktop via the Web. The tests consist of 30-60 multiple choice questions. Each exam takes approximately 30 to 60 minutes to complete. Results are revealed immediately online after you finish. Following is a detailed outline of the information covered on the ACE Exam. 1. Flex Application User Interface (UI) Creation
2. Flex System Architecture and Design:
3. Flex Application Programming Fundamentals
4. Interacting with Remote Data and Flex Applications
Sample questions : 1. Identify the purpose of UI containers and when to use them.Which two UI containers support absolute layout positioning? (Choose two.)
Correct Answer: D, E 2. Identify how to change the look and feel of a design by using API styles and style sheets.Your application includes the following declaration: You want to assign a visual control to be a member of the myFontStyle class.Which syntax should you use?
Correct Answer: C 3. Identify how to change the look and feel of a design by using API styles and style sheets.Which statement about Cascading Style Sheet properties in Flex is true?
Correct Answer: D 4. Recognize how to customize changes, control-related presentation layouts and navigation in an application by using view states, and using transitions and effects.Which kind of data should be passed to the targets property of an effect?
Correct Answer: A 5. Identify how to build loosely-coupled components.Which statement about loosely-coupled components is true?
Correct Answer: C 6. Recognize how Inheritance, Encapsulation, and Polymorphism works You have a custom ActionScript class named MyClass that implements an interface named MyInterface. You want to create an instance of the class, and be able to pass it to a method that accepts any class that implements the interface.Which syntax should you use?
Correct Answer: B 7. Recognize how to create and use ActionScript classes.You have created a custom ActionScript class called MyClass. You want to be able to pass in an optional argument that is typed as an Object.Which is the correct signature of the constructor method?
Correct Answer: B 8. Recognize how to display data using diff erent chart types, formats, and legends.Which type of variable should be passed to the series property of a charting component?
Correct Answer: C 9. Recognize how to use Remote Procedure Call (RPC) services. You are accessing multiple remote methods from a WebService object. You need to defi ne different result events for each method call.Which tag nested inside the WebService tag block should you use?
Correct Answer: C 10. Recognize how to manage data using Flex Data Services (FDS) Your application uses the Data Management Service to manage distributed data.You have returned an instance of the AsyncToken class upon calling the DataService commit() method, using this syntax: token = myService.commit();token.action=”saved”; <!– You have defined a result handler method that is called upon the result event of the DataService. The method signature is: resultHandler(event:ResultEvent):void –> Which expression within the handler method will return the value of the token object action property?
|
|
|
From Flex builder select project -> Publish application source. Dialog box for selecting the source elements will open. By default, all project source code and assets are selected, but you can specify at your own. If the main application is an MXML file, flex builder automatically adds the necessary code to enable the view source context menu item. If you want to manually enable theat item, you should add the viewSourceURL attribute to the <mx:Application> tag such that it points to the index.html page in the published source code directory. If the main application is an AS file, you'll have to enable the context menu item using AS code. this step requires the com.adobe.viewsource.ViewSource class .You should then call the static addMenuItem() method , passing it a reference to the main class instance and the URL for the source code, like so: ViewSource.addMenuItem(this,”sourcecode/index.html”); |
|
|
MXML is the powerful way to simplify the creation of user interfaces. For example: In MXML file for creating a button: <mx:Button x=”166″ y=”56″ id=”btn” label=”Click Me”/> In AS file for creating a button: var btn:Button=new Button(); btn.label=”Click Me”; “Lets see one more example:” MXML file: <?xml version=”1.0″ encoding=”utf-8″?> AS file: package |
|
|
CanvasPopup.mxml <?xml version=”1.0″ encoding=”utf-8″?> popup.mxml <?xml version=”1.0″ encoding=”utf-8″?> Through Actionscript CanvasPopup.mxml <?xml version=”1.0″ encoding=”utf-8″?> popup.mxml <?xml version=”1.0″ encoding=”utf-8″?> |
|
|
How to create AS files for a tab navigator. // main.mxml <?xml version=”1.0″ encoding=”utf-8″?> // firstTab.mxml <?xml version=”1.0″ encoding=”utf-8″?> // FirstTabClass.as package tab |
|
|
<?xml version=”1.0″ encoding=”utf-8″?> private var myCanvas:Canvas = new Canvas(); // define properties for our Button and its click event handler |
|
|
////// img.xml ///////// <images> ////// main.mxml //////// import mx.collections.ArrayCollection; } Output would be: image1.jpg, image2.jpg, image3.jpg, image4.jpg, image5.jpg |
|
|
/// Main.mxml ////////// /// Sample.mxml ////////// |
|
|
Its not necessary to handle the events inside the tags only, you can even handle them manually as well as follows:
|
|
|
How to remove toolbar and restrict the size of browser window in Flex : There are so many methods of doing this : <?xml version=”1.0″ encoding=”utf-8″?> Normal Way: Through Javascript: Through External Interface: Through FSCommand: Since External Interface is not supported for all browsers, its recommended that you first check to see if it is supported. If not, you might want to consider an alternate approach. |
|
|
<?xml version=”1.0″?> |
|
|
Event bubbling: event.target & event.currentTarget // EventBubbling.mxml <?xml version=”1.0″ encoding=”utf-8″?> // Output is: whenever you clicked the button you'll get: // EventBubbling.mxml <?xml version=”1.0″ encoding=”utf-8″?> // Output is: |
|
|
Fullscreen on clicking of a button: <?xml version=”1.0″ encoding=”utf-8″?> Fullscreen on Creation Complete: <?xml version=”1.0″ encoding=”utf-8″?> |
|
|
Cairngorm is one of the primary open source frameworks for application architecture in Flex. Cairngorm is based on the MVC Model . In complex computer applications that present a large amount of data to the user, a developer often wishes to separate data (model) and user interface(UI-view) concerns, so that changes to the user interface will not affect data handling, and that the data can be reorganized without changing the user interface. The model-view-controller solves this problem by decoupling data access and business logic from data presentation and user interaction , by introducing an intermediate component: the controller .
How Flex fits the MVC models??
For example , with the MVC design, you could implement a data-entry form that has three distinct pieces:
Although you can consider a Flex application as part of the View in a distributed MVC architecture, you can use Flex to implement the entire MVC architecture on the client. A Flex application has its own view components that define the user interface, model components to represent data, and controller components responsible for the communication with back-end systems. This client-side separation of task is not available in HTML. |
|
|
