14 Replies Latest reply on Jul 1, 2010 4:36 AM by RonnieCR7

    Persisting a geometric layout in Flex

    RonnieCR7 Level 1

      Hi All,

      I have an application where i have a few icons embedded on buttons. I drag and drop them onto a canvas and connect them by drawing lines between them. Once i do this, i want to save this configuration or geometrical layout to the database, so that, the next time i log in to the application i should be able to see the last saved layout. How do i do it?

        • 1. Re: Persisting a geometric layout in Flex
          rootsounds Level 4

          You have to create some sort of data model to pass through to whatever you have handling the database end of things. Just consider what you would need to recreate a user's layout. My guess based on your description:

          • button ids
          • button types
          • button positions
          • a link table to represent the lines between the buttons (button id to button id)
          • 2. Re: Persisting a geometric layout in Flex
            RonnieCR7 Level 1

            Hi rootsounds,

            I do have all those properties that you mentioned, that can be saved. But how i save the geometrical properties of the canvas and replicate it everytime i log into the application?

            • 3. Re: Persisting a geometric layout in Flex
              rootsounds Level 4

              So the width and height of the Canvas? Is there something that I'm missing?

              • 4. Re: Persisting a geometric layout in Flex
                RonnieCR7 Level 1

                Ok Rootsounds,

                Lemme explain my app a little in detail. Well, the first time i log into the app, i ll see a plane canvas on the right, and on the left i ll have a few buttons embedded with different icons to represent different components. Now i drag and drop them one by one(can drop same button multiple times) and then connect them by drawing lines. Then i want to be able to save it(the geometrical layout) to the database. So when i log into the app again i shud be able to see the last saved lay out on the canvas that is on the right side.

                • 5. Re: Persisting a geometric layout in Flex
                  rootsounds Level 4

                  That much I understand. What I'm not clear on is what part of the process you are seeking help with. Is it the process of rounding up that information and sending it off to the server and then doing it in the other direction to restore a state?

                  • 6. Re: Persisting a geometric layout in Flex
                    RonnieCR7 Level 1

                    Tats exactly wat iam seeking help for rootsounds. How do i go about sending tat info to the server and retrieving it back.

                    • 7. Re: Persisting a geometric layout in Flex
                      rootsounds Level 4

                      Alright, so what you need to do is come up with a data model for conveying the state from which provides everything that you will be storing in the database.You should be able to pretty much mimic that structure.  When you are ready to save off the state, you run through and populate the data model that you will be sending off. To load a state, you just parse through the model and populate your canvas accordingly.

                      1 person found this helpful
                      • 8. Re: Persisting a geometric layout in Flex
                        RonnieCR7 Level 1

                        rootsounds,Your solution makes sense. What i had in ma mind earlier is pretty close to your solution. But it would be helpful if you could be a little more discrete, functionally.

                        • 9. Re: Persisting a geometric layout in Flex
                          rootsounds Level 4

                          If I were to create XML, it may be something like this:

                          <layout>
                               <user></user>
                               <timestamp></timestamp>
                               <title></title>
                               <layout-geometry>
                                    <buttons>
                                         <button id="" x="" y=""/>
                                    </buttons>
                                    <links>
                                         <link startButtonId="" endButtonId=""/>
                                    </links>
                               </layout-geometry>
                          </layout>
                          1 person found this helpful
                          • 10. Re: Persisting a geometric layout in Flex
                            RonnieCR7 Level 1

                            Great rootsounds,

                            Thank you for your continued support. Now i have the mxml where the app is created which handles all the dragging and dropping and creation of the layout process. Once the layout is done, i could save the data as you mentioned and save it. But when i relogin, that is the same mxml that access to load the app. So, how do i get to load this xml instead of the actual mxml???

                            • 11. Re: Persisting a geometric layout in Flex
                              rootsounds Level 4

                              Glad to help and good to hear that you've made some progress!

                               

                              You will have to dynamically populate the canvas based on the received data using ActionScript. Assuming the canvas is clear, you create Button objects with properties set appropriately form the data and and them as children to the canvas. Same with the lines.

                              • 12. Re: Persisting a geometric layout in Flex
                                RonnieCR7 Level 1

                                Rootsounds,

                                I think you did not understand my question. Let me frame it properly. Suppose i create the layout the first time and save it to the database. Then when i log in to the application again i should be able to show the last saved layout. But the problem is, my application will load a plain canvas since it is what the application finds. I have to overwrite the canvas with the saved data in some way. How could i do that.

                                 

                                Let me put it like this: My application is a collection of mxml components. One of those components is the layout designing canvas. So the main app will look like this:

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:TabNavigator xmlns:mx="http://www.adobe.com/2006/mxml"
                                  xmlns:view="com.tcs.infra.dashboard.view.*" creationComplete="init();"
                                  >
                                <mx:Script>
                                  <![CDATA[
                                   import com.dashboard.model.ModelLocator;
                                    
                                   private function init():void
                                   {
                                    if(!(ModelLocator.getInstance().isAdmin))
                                    {
                                     this.removeChild(configCanvas);
                                    }
                                   }
                                  ]]>
                                </mx:Script>

                                <view:Home id="powerCanvas" label="Home" width="100%" height="100%" />
                                <view:About id="coolingCanvas" label="About" width="100%" height="100%" />
                                <view:Products label="Products" id="reportsTab" width="100%" height="100%" />
                                <view:Contact id="configCanvas" label="Contact" width="100%" height="100%"/>
                                <view:Layout id="pdnCanvas" label="Layout" width="100%" height="100%"/>

                                </mx:TabNavigator>

                                 

                                So the 'layout' canvas is where i have the structure to design the layout and save it. So when i re login to the app, it ll load the basic 'layout' structure rather than the stored one. So how do i override it?

                                • 13. Re: Persisting a geometric layout in Flex
                                  rootsounds Level 4

                                  Put the default layout into a State that is not initially used on load. Provide a loading indicator while you attempt to retrieve a stored layout for the user. If there is one, display it. Otherwise, enter the default layout State.

                                  • 14. Re: Persisting a geometric layout in Flex
                                    RonnieCR7 Level 1

                                    Oh States...

                                    It somehow slipped ma mind.. Guess it shud work. I will try it out and get back to you rootsounds...

                                    Thank you very much once again...