Presentation Patterns in Flex

Hello all
I just came across a blog which sheds some light on presentation patterns. Here it is... http://blogs.adobe.com/paulw/
I was wondering whether some of these patterns or some others are very popular among flex developers.
Thanks and Regards
ShiVik

That's my old Adobe Consulting blog. We used the Presentation Model pattern a lot on AC projects. It makes effective use of bindings and can be applied within a Cairngorm architecture, which was our standard framework. I've seen some chatter about using the PM pattern with Mate too, but I have no direct experience of that. The Supervising Presenter / Passive View patterns remind me of the mediators used in PureMVC.

Similar Messages

Flex design patterns

Hi ,I would like to convert a existing struts application to
flex ,the current application has different modules,ie different
screens when converting to flex should the UI just be one mxml or
how should the segragation of module based UI's be done.
Are there any resources available for design patterns for
Flex 3.

I think you should look at this '
http://www.davidtucker.net/category/cairngorm/'
an excellent tutorial for 'Cairngorm' framework

Cairgorm 3 and Flex 4

Are there any plane to release a Flex 4 version of Cairngorm 3, in the short period? Maybe a branch of the current code?

Yes I did compile all libraries and samples with Flex 4, and after same changes to the implementation of the ModuleInfo... it compile but I'm getting an error with navigation that I cant solve:
Description Resource Path Location Type
The children of Halo navigators must implement INavigatorContent. ContactsNavigator.mxml insync-basic/src/insync/presentation line 47 Flex Problem

How to make customize Replace function with Positions not pattern ?

Hi
Due to Repalce with patterns in flex, i am facing issue.
I want to make cutomize replace function with parameters
1 Parameter - String to replace
2 Parameter - Start Posion.
3 Parameter - Last position
which return string value.
For Example
replaceInWholeString(str:String, sPos:Number, lPos:Number ):String
values like
1st paramter - "asked"
2nd Paramter - 11
3rd Paramter - 15
Original String :: I want to reply
Output string : I want to asked
Please Reply ,if someone having solution
Thanks
Sunil Rana

You can use any number of the String methods to acomplish this.
I would proabably go with something like: slice(...) + input + substr(...);

MVC pattern in flash builder

I am trying to figure out the MVC patter in flash builder. I understand we can seperate view and controller by building custom components as view and populate them in the controller file. However, I don't know how to apply the Model login in flash builder. Do i create a Model folder and file and using that file to receive data?
For example:
Main controller:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx"
                                 minWidth="955" minHeight="600"
                                 xmlns:components="components.*">
          <fx:Declarations>
                    
                    <s:HTTPService url="test.come" id="testData" result="testData_resultHandler(event)"/> //Data here
          </fx:Declarations>
          <fx:Script>
                    <![CDATA[
                              import mx.collections.ArrayCollection;
                              import mx.rpc.events.ResultEvent;
                              public var testData:ArrayCollection;
                              protected function testData_resultHandler(event:ResultEvent):void
                                        testData=event.result.something...   //How to seperate the Data with the main controller?????
                    ]]>
          </fx:Script>
//view
          <components:videoList />
     <components:videoList2 />
     <components:videoList3 />
</s:Application>
I appreciate any replies. Thanks a lot.

The usual pattern in flex is to have an mxml component 'the view', an actionscript class (the controller), and some additional actionscript classes that represent the data objects (the model). Your 'main' application class is responsible for creating a new instance of the controller, usually as response to the creationComplete event. The controller then initiallizes/retrieves the 'Model' objects and passes them back to the view which binds them to the appropriate fields. So at the bare minimum for an MVC project your are going to have Main.mxml, MainController.as, and Model.as.
This is not the most elegant solution since it tends to create tight coupling between the controller and the view. If you want to use the MVC pattern on any project that involves more than 3 or 4 simple views you will probably want to look into a custom MVC framework like Cairingorm or the Tide framework from GraniteDS. Make sure you have a solid understanding of the basics first though.

Flex 4 Advanced DataGrid Refresh with database record changes at server end

I've visited a number of posts regarding this problem and none of the solutions presented seem to fix the issue I'm having. I'm beginning to think it is a bug with the DataManagement functions in Flex.
In my application I have followed the example presented on the Flex 4 tutorials:
"Using data management to synchronize server updates".
http://help.adobe.com/en_US/Flex/4.0/FlexTutorials/WSbde04e3d3e6474c4292a0331216558354b-80 00.html#WSbde04e3d3e6474c4-211e6e7c12846356a0c-8000
I've tried with both client-side and server-side typing with the same issue.
I'm using Flex 4 with ColdFusion 9 connecting to an MSSQL 2008 database. The table I'm working with uses a GUID as the identifyer (I have also tried with unique numeric types too).
The application is running fine besides one issue. I am using the myService.commit(); control to do a bulk update to rows that have been added to the DataGrid. At the database end I am inserting values into some fields that are not determined at the client end. The database is updating fine, so the commit seems to be doing that part of the work. However, there does not seem to be any way of reflecting those new values provided at the ColdFusion CFC insert within the DataGrid. I've tried re-assigning the DataGrid to the dataProvider / different dataProvider after the commit. Refreshing the DataGrid using myDataGrid.dataProvider.refresh() seems to partly work. i.e. The Grid is refreshed with the records it held before I added any + the first row of the new inserts. The missing rows are only visible if I do not refresh at all (without their server side changes) or if I reload the entire page.
Any help would be greatly appreciated.
Cheers
Pat
PS. If I add further rows to the DataGrid and then commit a subsequent time then it refreshes with the rows that were missing on the previous commit and the first row of the latest commit.
Message was edited by: Pat Moody

My solution when adding new values at the server end is to modify the createEmployee in the CFC to something like this. In this example I'm using modified_date as the additional field maintained at the server end. This could be any number of additional fields.
Basically it's doing an insert and then a select. Tried returning as array / Employee but couldn't get that to work so using the query object return type of "any". Using this method, no refresh is required on the DataGrid.
<cffunction name="createEmployee" output="false" access="remote" returntype="any" >
     <cfargument name="item" type="Employee" required="true" />
         <cfquery name="qCreateEmplyee" datasource="fb_tutorial_db" result="result">
             INSERT INTO employees (first_name, last_name, gender, birth_date, hire_date, modified_date )
             VALUES (<CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.fname#">,
                     <CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.lname#">,
                     <CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.gender#">,
                     <CFQUERYPARAM cfsqltype="CF_SQL_DATE" VALUE="#item.bdate#">,
                     <CFQUERYPARAM cfsqltype="CF_SQL_DATE" VALUE="#item.hdate#">,
                     <CFQUERYPARAM cfsqltype="CF_SQL_TIMESTAMP" VALUE="#now()#">)
         </cfquery>
         <cfset var qItem="">
         <cfquery name="qItem" datasource="fb_tutorial_db">
           SELECT
           #result.GENERATED_KEY# as emp_id
           ,first_name as fname
           ,last_name as lname
           ,gender
           ,birth_date as bdate
           ,hire_date as hdate
           ,modified_date as mdate
           FROM employees
           WHERE emp_no = <CFQUERYPARAM CFSQLTYPE="CF_SQL_INTEGER" VALUE="#result.GENERATED_KEY#">
         </cfquery>
      <cfreturn qItem>
</cffunction>

MVC/MVP in Flex

Hello All,
I am realtively new user of Flex and I have a question. I would be more than grateful if you could find time to answer it.
My goal is to developed a testible Flex application, which will be developed according to an MVC or MVP concepts.
Could you please direct me to the best known document, where an MVC/MVP pattern for Flex is depicted.
There is a lot of information regarding MVC/MVP in the net, but I am looking for a learning material, which is relevant especially for Felx.
Thanks in advance,
Felix.

Here is a series of tutorials on the ADC site about Robotlegs, which is an MVC framework for AS3/Flex.
http://www.adobe.com/devnet/actionscript/articles/intro-robotlegs-pt1.html

QTP is crashing while spying on checkbox present inside a grid.

Hi,
In my flex application, QTP is crashing while spying OR clicking on a checkbox present inside the Flex Advanced grid. Any inputs please !!!!
Thanks,
Narasimha

I forgot to follow my old axiom, "never assume". Did you already run Disk Utility to repair the hard drive? Did you already run Software Updates to check for any OS X updates (such as security updates)?
It is a bit annoying that Apple likes to call almost every application download an "update". Usually, the system will not permit two versions of any Apple application to exist at the root of the Applications folder. I get around this with an "Applications old" folder. Sometimes an "update" will install a full, working version of an application by replacing the previous version. Other times it will only install updated files into an existing application package. The latter is the case for Safari 1.3.2 update. It will not install a full, working version and it will not install a second version alongside the one that is already there. It will only update version 1.3.1

Communication Throughout Application and Components

Up to now my experience with Flex/AIR has been mostly small
programs, studying Flex/AIR, and the joy of contributing to this
forum.
I'm now in the middle of developing my first "real" Flex/AIR
app, in that it is tied to a quarterly goal, and over time others
in my department will actually use it.
I've broken the app into several MXML components, and there
are components that use components, that use components (several
levels of nested components).
As you might imagine, sometimes these components need to
reference variables/functions in other components, or in the main
app, and I think I've done fairly well, based on my limited
experience with this sort of thing (I'm not a programmer by trade,
but I seem to fairly sharp ???), but I can't help think things are
too tightly coupled.
Should I be trying to push the limit in communicating between
the app and the components and among the components using only
events, often custom events, entirely if possible?
I know practice makes perfect, or well, you know..., but I
want to "do it right" as much as possible now.
Thanks very much!!!
Greg

OK, although I am not the best at Flex, here is what I think.
"Should I be trying to push the limit in communicating
between the app and the components and among the components using
only events, often custom events, entirely if possible?"
No, well maybe or sure. It depends...
There are major segments in a Flex swf: Application, UI
views, components and controls... As well as different kinds of
events, say user gestures and system events.
And there are many design patterns that make the application
lifecycle manageable: development, testing and maintenance.
Design patterns differ in approach: some tightly couple a
view to it's controller/model. Even there the view may be active or
passive. A tightly coupled active view would simply call methods on
it's associated model/controller whereas a passive view may have
data pushed into it via bindings and injectors.
The controller may use events to access services from the
main application controller.
So it is the design structure (design pattern) that guides
one along with a consistent set of guidelines for the development:
events vs calls vs bindings vs injectors vs observers...
Consistence is the key. And a good proven design pattern that
fits your particular application needs is the key design guide:
events vs method call; passive vs active view; ...etc.
And finally, it is often a "framework" that provides the
foundation and supplies the specialized classes to ease the
implementation.
This set of articles on the "Presentation Design Pattern" is
a good read and I recommend you read it for a far better
understanding that I can offer. That is simply the Presentation
Pattern and of course there are many others like MVC.
Mate is simply a framework; a lib of tag elements that better
enables the application of your selected design pattern into the
Flex framework. It is event and injector oriented.
Well, I hope that helps.

Best practice for large form input data.

I'm developing an HIE system with FLEX. I'm looking for a strategy, and management layout for pretty close to 20-30 TextInput/Combobox/Grid controls.
What is the best way to present this in FLEX without a lot of cluter, and a given panel being way too large and unweildy.
The options that I have come up with so far.
1) Use lots of Tabs combined with lots of accordions, and split panes.
2) Use popup windows
3) Use panels that appear, capture the data, then, make the panel go away.
I'm shying away from the popup windows, as, that strategy ALWAYS result in performance issues.
Any help is greatly appreciated.
Thanks.

In general the Flex navigator containers are the way to go. ViewStack is probably the most versatile, though TabNavigator and Accordion are good. It all depends on your assumed workflow.
If this post answers your question or helps, please mark it as such.

File structure in large applications

Hello,
I have a fairly large application, totaling around ~150,000 lines of code.
Unfortunately, when I first began building this application, my understanding of file structure and various architectural patterns was quite limited, and the code could easily be labeled as "spaghetti code."
Since then, I have begun migrating everything over into an MVC structure, but was not entirely sure how to proceed.
I have one primary file, let's say Application.as that is essentially the main actionscript class, and I am using 'include "com/controller/hello.as"' instead of importing classes because I did not want to clutter up my code by using classes all over the place and having to instantiate them.
Would creating classes instead of having flat actionscript files be a better way to proceed?
How do you structure your large applications?
Are there any resources out there, articles, books, etc., that discuss enterprise level architectural patterns in Flex?
Thanks!

Flex is an Object Oriented environment and so NOT using classes and objects will generally lead to the architectural anti-pattern (read Bad) sometimes refered to as the Big Ball Of Mud (aka spaghetti code).
Just using classes and objects isn't always enough though. If a class is larger than 500 lines of code, it is very probably too big and doing too many things - try and split it up into smaller classes that each do exactly one thing and do it well. If a function is longer than one screen on your display, it is too big and should be broken down into smaller functions.
One good indicator as to whether or not you have a good class is to use a unit testing framework (http://flexunit.org/) and write tests for the class. If it's hard to test it then it's probably still too complicated.
How the classes are organized into packages is a less interesting, though if a package has more than 30 classes then there's a good chance that it's too big and you should try and divide it up.

Allow users to Download documents from server

Hello Everybody,
I am working on an Flex application where I have to allow the
users to Open/Save documents such as Word document, Excel sheet,
PDFs, Jpeg, Media files (any digital format document) when a user
clicks on a link present in a Flex application. To do this I am
using the navigateToURL() method and simply passing the URL string
as a URLRequest to the navigateToURL method. This works fine but
whenenver the link is invoked and the user selects to Save the
Excel sheet or any document it displays an unwanted browser window
behind the Open/Save/Cancel dialog box saying action cancelled.
I can not use "_self" as I require the Flex application to
run as is. I tried using the javascript:window.open() but this did
not work.
1) Is there a process to stop the browser window from
opening?
2) How can we invoke a javascript using navigateToURL(), I
tried to invoke javascript.alert('Ok') and also
javascript:window.open() both did not function.
3) Is there any other method or flex classes etc. to invoke
external applications (allow to download documents from server)?
Please help me.
Thanks and Regards,
Paromita

Paromita,
You could use the file download functionality. This is from
the docs:
You can let users download files from a server using the
FileReference.download() method, which takes two parameters:
request and defaultFileName. The first parameter is the URLRequest
object that contains the URL of the file to download. The second
parameter is optional--it lets you specify a default filename that
appears in the download file dialog box. If you omit the second
parameter, defaultFileName, the filename from the specified URL is
used.
The following code downloads a file named index.xml from the
same directory as the SWF document:
var request:URLRequest = new URLRequest("index.xml");
var fileRef:FileReference = new FileReference();
fileRef.download(request);
To set the default name to currentnews.xml instead of
index.xml, specify the defaultFileName parameter, as the following
snippet shows:
var request:URLRequest = new URLRequest("index.xml");
var fileToDownload:FileReference = new FileReference();
fileToDownload.download(request, "currentnews.xml");
I think this will accomplish what you are trying to do.
Vygo

WSDL to Chart/Graph

I'm trying to convince my company to start using Flex for BI
projects because of it's ability to produce impressive dashboards
and scorecards. It's a .NET shop and probably very little chance of
using Flex Data Services (at least, at first).
I'm looking for good examples of graphing and charting Web
Service data. I've looked all around for this, and it seems like
it's not as simple as making the WebService a chart's dataprovider.
There's usually some intermediary step (setting up models, parsing
the data into other datatypes, etc...), all which complicate the
"simplicity" that I'm trying to sell to my company.
Is there a simple means (and by simple, something someone
could write in a demo and have the audience follow along) for
charting Web Service data in Flex. I realize that it's not always
this simple, but I'm looking for an approach or examples to make
for an intriguing demo.
Any recommendations, methodologies, examples would be most
appreciated!
Thanks in advance!

Hi - I don't see a problem with using WebService results for
a chart - I think the question of complexity comes with matching
the data to the chart, but I'm not sure if that's what your problem
is. I've put some presentations together for Flex charting, so I
may be able to help you in some manner. Can you tell me the kind of
data you are looking to chart?
Cheers,
David

Communicate between responders and events in Cairngorm

Hello all
I am implementing presentation model pattern in Cairngorm. Now I generally separate the responder from command classes for the sake of dividing the responsibilities - command basically set the properties on model & execute sequence commands (if any), while responders handle the task of acting on the response received from server side.
But I have a scenario where I have defined a callback function in my event class and need to call it in the responder. How can I do that? Does the responder have any idea which event triggered the whole process? If yes, how can it refer that particular event class and its methods/properties?
Can somebody help me out here?
With best regards
ShiVik

Thanks Paul.
I have basically understood the cairngorm workflow and the presentation model. I have implemented Cairngorm quite easily in many of my views. But the problems were there to see as you mentioned in your blogs about presentation patterns. Since then, I have been seeking out best practices using presentation model. But it keeps on giving me a hard time.
Sometimes it just doesn't seem worth it. Like I had created a loginState property in modelLocator to manage the view states in a login screen app. The states were ERROR, LOGGED_IN, LOGGED_OUT. The view was bound directly to modelLocator's property.
But when I thought about implementing it in presentation model, I could think about following things:
Creating a viewState property in presentation model for the view.
Binding the view to the property in presentation model. Till here everything goes smoothly.
When I update the loginState of modelLocator, I also need to update viewState of presentation model????
To update the viewState of presentation model, I need to create a callback function in presentation model.
I need to update the event as shown in this example and update the instance of that event, but what do I pass as reference to callback function?
Too much going on for me to pickup.
With best regards
ShiVik

Global Username Variable

Coming from a CF background, I have always been able to set
my user's login username in a variable scope that the entire
application could reference (session). I know that in Flex/Flash
there is no sessions since Flex is a persistent application.
How do you set a global variable that can be used by the main
application, component, and modules to help thin out data?

"projectproofing" <[email protected]> wrote
in message
news:g96a2b$pv3$[email protected]..
> Coming from a CF background, I have always been able to
set my user's
> login
> username in a variable scope that the entire application
could reference
> (session). I know that in Flex/Flash there is no
sessions since Flex is a
> persistent application.
>
> How do you set a global variable that can be used by the
main application,
> component, and modules to help thin out data?
Google the Singleton pattern in Flex.
HTH;
Amy

Presentation Patterns in Flex

Similar Messages

Maybe you are looking for