9 Replies Latest reply on Dec 28, 2006 10:30 AM by artoix

    Dynamic Layout in Flex 2?


      I am trying to write a SWF application that after loading in the browser, reads the data and the page view definition from the server and based on that definition draws the page. All the meta-data for the page definition is in XML and is dynamically generated (so cannot be pre-compiled). With user clicks, the Flex code will need to blank out the existing page, read another dynamic page definition (as XML) from the server and redraw the page.

      Is it even possible in Flex and if yes what is the best way to achieve this? I probably can do this if I draw the whole page in ActionScript dynamically instead of using MXML based layout? But is there a better way, I mean is it possible to send a new definition of the page in MXML to a SWF code where actionscript could simply do something like 'page.redraw(newDef)' where newDef is the new MXML?

      Essentially, if we do this the generic page renderer SWF code will basically behave as a XSLT file only that it would be doing that on the browser.

      Any help would be greaty appreciated.


        • 1. Re: Dynamic Layout in Flex 2?
          Matlus Level 1
          This is not possible using the free SDK. However, if I'm not mistaken, the Data Services version of Flex does have this ability (except that the mxml page it compiled dynamically on the server into an swf file and sent to the Flash Player.

          • 2. Re: Dynamic Layout in Flex 2?
            allnighter Level 1
            Thanks for the quick reply Matlus. I actually don't want every page to be compiled. I want the page definition to be delivered to the SWF running in the browser and for it to redraw the page based on that.

            I guess that is not possible? Probably the only way is to send the page definition as some XML format, read it in the action script running in the browser and have actionscript code that first blanks out the current page and then draws the new one manually. Is there a better approach?
            • 3. Re: Dynamic Layout in Flex 2?
              peterent Level 2
              From your description I have to ask why are you using Flex? One of the major benefits of Flex is that you can avoid page refreshes/redrawing. By giving the user the same experience with Flex that they get from other web technologies you kind of defeat the purpose.

              However, you can do what you want, but it will take some work. Suppose the XML you generate looks like this:

              <formItem label="First Name">
              <textInput id="firstName" />

              You will have to create the objects using the new operator and add them as children. For instance, you can remove all of the children from an Application and then process the above XML where you walk the XML structure and do things like:

              if( node.name() == "form" ) {
              currentContainer = new Form();
              } else if( node.name() == "formItem" ) {
              var formItem:FormItem = new FormItem();
              } etc etc.

              Another approach would be to have your server-side generate the XML, but as real MXML, then call upon the mxmlc compiler to build the SWF, then return the name of the SWF to the Flex application. The Flex application can then use a SWFLoader to bring that in.

              This approach allows the generated "page" to contain ActionScript whereas the first approach does not.

              You can do this with the SDK. Your server-side tech can be whatever you want as long as it can get the file compiled via mxmlc which comes from the SDK.
              • 4. Re: Dynamic Layout in Flex 2?
                allnighter Level 1
                Thanks for a detailed reply Peter. As I suspected, we really have just two options i.e. either (a) draw the page programmatically in actionscript which I think is like drawing the DOM in javascript and is thus really ugly (b) generate MXML dynamically for every page and get it compiled to SWF before sending it to the browser. This sounds like a unscalable solution - I mean for an application that has every page dynamically generated from the meta-data, compiling every page for every user sounds like a major overhead. Are there scalability studies done on your dynamic compiler?

                As per your other comment, we generate user interface dynamically based on the meta-data i.e. there is never any page design step or any such thing as a page designer. Page view definition is automatically generated based on the application meta-data. Don't get me wrong, we have a lot of uses for AJAX (or Flex equivalent) stuff for all intra-page updates but one page differs so significantly from another that we will need a complete page redraw for all inter-page transitions. I think every non-trivial application needs that. How can you not have a page redraw if you are going from an expense report page to a customer contacts page where the two are totally different, dynamic, user and business logic dependent and have nothing to do with each other. The most you can share are the tabs and menu links. If for such page transitions, we want to avoid the compilation step, the only way to do this, it seems, is to use heavy duty and ugly actionscript to manipulate the DOM-like structures on the flex page.
                • 5. Re: Dynamic Layout in Flex 2?
                  peterent Level 2
                  Most applications (99.9%) design their interfaces (reports, charts, forms, etc) and then just fill their contents from the data services. So while a report page is different from a contacts page, there are only a handle of report page styles. Same for contacts.

                  I'm pretty sure we have not done any performace studies on the compiler since no one uses it that way. The first time an MXML file is accessed via Flex Data Services, the web tier compiler builds the HTML wrapper and SWF. After that, unless the MXML changes, no more compilations are needed.

                  Sounds like you are building something very different and unique. It will be interesting to see when you are done what the outcome is, no matter what technology you use.
                  • 6. Re: Dynamic Layout in Flex 2?
                    allnighter Level 1
                    Hi Peter, we already have one user interface that has been running well for the past many months. It uses AJAX on the browser and XSLT+Java on the server to transform the meta-data dynamically into HTML. We have a lot of interactivity in every page, it is handled today by AJAX. We are evaluating Flex as an alternative UI for the whole application i.e. instead of generating HTML pages, we would like to use Flex because of its superior user interfaces, better development time and UI performance.

                    However, it seems like Flex has never really been used as 'the' user interface for an entire enterprise application like CRM or Financials etc. From your reply, it seems that Flex has only found niche uses such as in reporting (due to nice charting features) or simple stuff like contacts management. In heads down data entry applications such as the ones that ERP systems provide, there can be literally thousands of dynamic pages (e.g. one big ERP vendor had >1000 different pages in its single application and they were not crazy, the world is indeed different on the other side of the tracks). Our approach is unique in the sense that we don't design these pages before hand but generate them dynamically. Regardless of that, even if we had a page designer, it's the application developers designing the pages and such pages differ from each other. Not only that, they depend on a lot of dynamic factors such as the user and the state the data is in. The template based approach that you are describing still has the ugliness of using AS to insert nodes into pre-defined areas on the page and is not scalable as soon as you have more than a few trivial templates anyway. The 'compile every page' approach is obviously not feasible.

                    For transitioning from one page to another, I don't understand why Macromedia/Adobe decided not to allow sending MXML directly to the swl file in the browser (i.e. without compiling it on the server), have the Flash player read the new definition and simply display it. For all intra-page tasks, leave it to action script and data services to handle that. XAML, XUL etc. don't require compilation on the server, why does MXML require that? It looks like a big short-coming in the Flex architecture that Microsoft will easily take advantage of with its XAML initiaitive. In trying to sell its sever-side software, Adobe might have missed a critical requirement for enterprise applications to adopt flex as the platform for UI.
                    • 7. Re: Dynamic Layout in Flex 2?
                      peterent Level 2
                      To understand our approach to Flex you have to know something of its history. Flex is built on Flash technology. Flash and the Flash Player are highly valued for its compact size, streaming capabilities, and ubiquity. The Flash Player only knows SWFs - it just runs the byte code it is given. That makes it small and highly efficient - something greatly desired in a web application. Because SWF is a streaming format, the player can begin showing the SWF as soon as enough information arrives to get it going.

                      Sending MXML to the player goes against the philosophy the Flash platform. It would require that the player contain a compiler and all sorts of JAR files. In would turn out to be so large and cumbersome, no one would want it.

                      Flex makes writing Flash movies easier for enterprise developers because it allows them to work in a way that fits better into their environment: text files, source code control, centralized server, familiar(-ish) language, and so on.

                      When people see what Flex can do they get all sorts of wonderful ideas of how to apply the technologies. But there is a limit today as to how far you can extend that. There is only so much bandwidth available from a server to a client, so the SWF still must remain at a manageable size. The data going back and forth, too. The Flash Player is in the same boat there as any client/server application. But at least with Flash you can send compressed binary data rather than HTML and leave the rendering on the client rather than the server.

                      You can partition a large application up into "application domains" - separate SWFs which can be dynamically loaded and unloaded and you can use RSL (runtime shared libraries) that contain common UI elements (buttons, skins, etc) shared among the SWFs.

                      For example, if your app has reports and charts but one person never uses any charts, then the chart SWFs never need to be downloaded. But when they go for a report, the report SWF(s) can be loaded on demand. Having most of their controls (buttons, text input fields, etc) already in the Player as the result of an RSL, means the report SWF is much, much smaller and so quick to load.

                      You might consider an approach like this: place common controls into an RSL so that can be loaded with the main SWF. Then generate your page SWFs as MXML and compile it on the server, telling the compiler to use the RSL. This way the resulting SWF is small and then can load more quickly.

                      For your specifications, I don't see that it would work any other way.
                      • 8. Re: Dynamic Layout in Flex 2?
                        allnighter Level 1
                        Thanks very much Peter. This has been a really informative discussion. I think we will start with prototyping clearing out the existing page and building new pages in ActionScript based on the page definition (our own XML format) when a user goes from one page to another. So basically, we will have a SWF shell running in the browser but all page building will be done by the actionscript files reading the XML. Let's see if it performs well.
                        • 9. Re: Dynamic Layout in Flex 2?
                          artoix Level 1
                          Is there any way to compile SWF from MXML using PHP?