14 Replies Latest reply on Feb 5, 2008 2:09 PM by DominicV

    Dynamic UI creation

    DominicV Level 1
      Can anyone help? What I would like to be able to do is have a flex 3 application that includes a designer for users to add content in a publishing fashion; for example this is a representation of what would be generated via the designer:
      <mx:VBox backgroundColor="#FFFFFF">
      <mx:Canvas width="200" height="200">
      <mx:Text x="10" y="10" text="This is example content."/>
      </mx:Canvas>
      <mx:Canvas width="200" height="200">
      </mx:Canvas>
      </mx:VBox>

      this "page" content would then get saved to a database and can be retrieved later from the database and viewed by other people.

      Does anyone have any ideas on how to save the Flex objects to the database, and when retrieved recreate the objects in the Flex application? My aim is to provide users with something like the scrapblog.com designer but to create content such as a WIKI page.

      Thanks,

      Dominic.
        • 1. Re: Dynamic UI creation
          Michael_Latta Level 1
          You would need to serialize the objects to something like XML and back again. The Flex compiler does MXML to compiled code, but I am not aware of any system function that would do this for you at run time.
          • 2. Re: Dynamic UI creation
            DominicV Level 1
            Hi Michael, the problem is I can't figure out how to serialize / deserialize the flex objects in as3/flex.
            • 3. Re: Dynamic UI creation
              Michael_Latta Level 1
              That would be a non-trivial piece of work. You could use something like:

              for (var key in obj) {
              var val = obj[key];
              }

              to get all the attributes of the object, but then you need to deal with related objects (children), and event handlers, etc.

              As I said there is no easy/system provided way to do this to my knowledge.
              • 4. Re: Dynamic UI creation
                DominicV Level 1
                Michael,
                I'm not bothered about events; as this is solely to render static content. I'm wondering if something like this would work?
                var buffer:ByteArray = new ByteArray();
                buffer.writeObject( mx:canvas or other);

                trying it now... but any advice people can offer is appreciated.

                thanks.

                D.
                • 5. Re: Dynamic UI creation
                  Michael_Latta Level 1
                  I look forward to your reporting the results. I am not sure if that will work or not.
                  • 6. Re: Dynamic UI creation
                    DominicV Level 1
                    Hi Michael,
                    well... I got progressively more frustrated and then came across this http://bugs.adobe.com/jira/browse/SDK-11682 and according to a comment from Gordon Smith
                    quote:

                    Player 9 doesn't support deserializing-and-reserializing DisplayObjects.
                    . That suck's :-) I guess I will have to come up with an alternative approach...

                    It would be very cool if one could inject markup like you can with html during runtime.

                    C'est la vie.

                    D.
                    • 7. Re: Dynamic UI creation
                      Michael_Latta Level 1
                      Be careful about that quote. DisplayObject is not the mx hierarchy, but the hierarchy of objects used to render them. I suspect that the Flex UI objects like TextInput and such may also not support serialization, but he may have been just talking about the display list not the Flex UI objects.

                      • 8. Re: Dynamic UI creation
                        DominicV Level 1
                        Hi Michael,

                        I'm not sure I follow how that helps though as presumably it relies on DisplayObject to render; therefore if DisplayObject can't be serialized and deserialized this will not work using that technique? I think I may have misconstrued what you have said; so if you can think of an approach and illustrate it that would be very helpful.

                        D.
                        • 9. Re: Dynamic UI creation
                          arthaxbantral
                          My suggestion would be to integrate this: http://labs.adobe.com/wiki/index.php/Flex_Module_for_Apache_and_IIS
                          Basically make a script on the back end with your template UI then have it save the mxml file and associate it with the user. If I'm not mistaken, the flex module is a runtime compiler which would compile and spit out the application by requesting the mxml file in a browser
                          • 10. Re: Dynamic UI creation
                            DominicV Level 1
                            Hi I have actually had it confirmed by Adobe that its not possible to use the serialization approach.

                            arthaxbantral. your suggestion might work but to the best of my knowledge the Flex Module is not designed for a production environment; there may be issues therefore with using it in this scenario. Its a good idea though if someone has experience with it - how does it perform and scale under load? Is anyone using it in this way?
                            • 11. Re: Dynamic UI creation
                              cxf02 Level 1
                              Okay, I’m going to weigh in on this subject since I have at least an opinion on the subject of dynamic content, if not a few years of experience in designing content management systems. You have presented a small example of what you want to do, so I’m going to assume that you may want more complex objects that the user can populate with content. Try building a list of objects that you will use for content display. Design a data model that allows you to save the values that you want to use for attributes for your list of objects. Design a data model of content management tables that will store the content you want your users to save. Create one or many RSL’s (depending on what your overall design goals are) to store the base definitions of your objects. Design your application to instantiate objects based on roles, or users or whomever is going to be able to use them and request xml from either SOAP services or an http request that describes the properties, values and content you would like to display and populate and present the objects that your user “built” for themselves using some predefined process you designed to allow them to “have it their way”.

                              Please don’t take this as a criticism, but this idea that keeps popping up for dynamic objects from MXML is adding a layer that on the surface may seem easier, but in my opinion was not why MXML was created in the first place. MXML is a 4th generation language for describing Action Script objects instead of coding them. It serves a purpose of abstraction and allows an XML view of visualization and through a compiling process, and renders an object on the screen, be it the development environment, or within a Flash player. Either rendering requires full compilation to AS and then to byte code to view the results.

                              Why place any dynamic compilation in the process workflow for your user? It will slow things down, and in the case of stateless requests, could lose objects or corrupt statefull information contained in the client because of slowdowns on the server or less than perfect error handling between the two. There are “more better” ways to accomplish dynamic objects/content than storing MXML objects in a database.

                              If I have misunderstood the purpose of your request, please accept my apologies. This is just another opinion…

                              Sincerely,
                              • 12. Dynamic UI creation
                                DominicV Level 1
                                Hi Curtis,

                                Having read your post I'm not sure if you have missed the point or not.

                                The original question was not one of dynamic compilation. One does not need to use dynamic compilation in order to create new objects that are displayed to the screen in Flex. I can quite easily write some ActionScript that will create red canvases all over the screen by clicking a button; no problem. The issue is that I want to create a DTP'esque content designer that allows a person to design a news article, as an example, and save it for other people to view. In an html based content management system you could just save the html to the database (for simplification) and retrieve it for display. However, in Flex there is no easy way to do this without tediously creating separate code to extract properties and style values for every type of object (and all the nested objects); you then need to recreate them when retrieving the values. The simple way (that requires no compilation on the fly) is to serialize / deserialize the objects and then save the bytearray into the database - no messing around. Unfortunately for objects that are DisplayObjects the platform does not support this approach. There are different approaches that I am aware of but none are as simple as the serialization / deserialization technique (hopefully support will be included in a future Flash player).

                                quote:

                                Why place any dynamic compilation in the process workflow for your user? It will slow things down, and in the case of stateless requests, could lose objects or corrupt statefull information contained in the client because of slowdowns on the server or less than perfect error handling between the two. There are “more better” ways to accomplish dynamic objects/content than storing MXML objects in a database.


                                A Flex application isn't stateless, so I am unsure what relevance this paragraph holds? If it refers to the MXML compiler idea that arthaxbantral suggested; as I said in response I don't know what performance / scalability issues it might have; but the dynamic compiler is not for production use at any rate. I have not used it so I don't know much about it. If it wasn't for the guidance on its recommended usage by Adobe, I wouldn't have dismissed it as an idea until having investigated the technique, but it would not be my ideal way to do things. Either way you have to think of the server in a very different way than when using a stateless application.

                                Regards,

                                Dominic.
                                • 13. Dynamic UI creation
                                  cxf02 Level 1
                                  Dominic,

                                  Thanks for the clarification, but I respectfully disagree that the "shortcut" you propose for content management is not an enterprise solution and would be limited by performance issues as it grew. Yes, the design and construction efforts for a CM system are far greater than what you propose as a solution, but this is where the OO qualities of FLEX really shine. It sounds like a pretty cool application, but as far as performance, it might have some limitations. Look at the Adobe Shopping Cart application as an example of populating objects from data. With binding and the event model, the dynamics of “on the fly” object generation are well suited for creating your own content management framework. There might even be something available out there, who knows?

                                  You might however, consider saving your representation back to a process that could build MXML from your XML request (a service that calls XSLT is one technology), then compile it using the FLEX compiler as a separate step, store the library either on the file system (with a unique filename) or in the database (probably another performance hit) and then store the user information that points to this library and use that as your key to load the library dynamically. This is kind'a how we create PDF's for users to store and display at a later time.

                                  Whew! Sounds like a bunch of work :>).

                                  Anyway, if you’re at the 360 conference this month look me up and we can discuss it. You sound quite passionate about this, and I hope you find something that works for you. Also, my apologies, I wasn't very clear when I used the term "stateless requests". As I’m sure you’re aware, all http requests are stateless, and the fact that the data in the client represents a state, was not what I was referring to. My meaning was that if the object definition was part of the request to the server, you would have to have error checking on the server side to handle missing or malformed requests, then on the round trip, you would have to also have something in place to handle an error gracefully, should the returned MXML be malformed or damaged. A schema could handle this on the server side, and it could be used for both the request and the response, so that might do it. Anyway, it’s nice to think about how to make the complex simpler, thanks for the feedback and I wish you well in your design endeavors.

                                  Sincerely,
                                  • 14. Re: Dynamic UI creation
                                    DominicV Level 1
                                    Hi Curtis,
                                    Thanks again for responding, I will try and address your points:
                                    1) I haven't acctually specified that this has to be for an enterprise system, although ideally it would be nice if it scales up for a large user population.
                                    2) that said in (1). serialisation / deserialisation is actually used in enterprise systems i.e. SharePoint uses it as does ASP.NET 2.0 for profile provider / web parts etc. I don't want to get into the pro's and cons I'm just illustrating it is valid (whether it is valid for Flex UI maybe not?).
                                    3) Since the serialisation / deserialisation is done in the Flex application on the client computer - the load wouldn't be taken by he server; except for the data going between servers (and being stored in a database).
                                    4) I wouldn't use web services i.e SOAP or REST; but would use Remoting e.g. using BlazeDS.

                                    Anyway, it can't be done using Flex so this is largely irrelevant :-)

                                    I'm not sure of the feasibility but perhaps an html parser that maps html tags to Flex objects would be an approach (obviously not all html would map); or my own custom xml tags and parse them.

                                    Otherwise, it would be interesting if this can be integrated inside a Flex application since it is written in ActionScript! http://code.google.com/p/htmlwrapper/ - this would obviously make life easier!

                                    I'm afraid I won't be able to make the 360 conference; otherwise, I think a chat would have been beneficial on this topic (and maybe others too).

                                    Thanks again for your help it has been very much appreciated hearing your views.

                                    Regards,

                                    Dominic.