6 Replies Latest reply on Jul 30, 2012 2:43 PM by GaryDJ

    Code Structure / Component Question

    GaryDJ

      I'm new to Flex and trying to learn as much as I can on my own without help, but I've run into a question that I'm not finding an answer for.

       

      I've read about creating MXML components and understand that, as well as creating AS classes, that that makes sense too.

       

      I have code in the default package which displays the Datagrid component (MXML) but also has ActionScript code in the same source file to load the datagrid via PHP (HTTPService) as well as define what happens when cells are updated (sending data back to update the DB via PHP).

       

      This is all pretty much a self-contained "component" for manipulating data from a particular MySLQ table from this single datagrid.  I have the grid displayed on one tab of the tab navigator.

       

      My problem is that I'd like to create a similar datagrid on a separate tab which does the same thing for a different table.   I know this code needs to be separated and not in one MXML file, but I'm not finding how to either structure my project to do this, or else make each datagrid (along with the associated AS code) into a separate component.

       

      Would appreciate any help or examples you may have.

       

      Thanks,

       

      Gary

        • 1. Re: Code Structure / Component Question
          Flex harUI Adobe Employee

          An MXML file with DataGrid as the top tag defines a component that can be used multiple times throughout the application.

          1 person found this helpful
          • 2. Re: Code Structure / Component Question
            GaryDJ Level 1

            Thanks for pointing me in this direction -- I had started that way, but got confused.  Here are the first few lines of my current code:

             

            -----

             

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                                                    width="998" height="656" creationComplete="init()" layout="absolute">

                      <mx:Script>

                                <![CDATA[

                                          import mx.controls.Alert;

                                          import mx.events.PropertyChangeEvent;

                                          import mx.events.CollectionEventKind;

                                          import mx.events.CollectionEvent;

                                          import mx.events.DataGridEvent;

                                          import mx.controls.TextInput;

                                          import mx.rpc.events.ResultEvent;

                                          import mx.collections.ArrayCollection;

                                          import com.adobe.serialization.json.JSON;

                                          import com.adobe.viewsource.ViewSource;

             

             

                                          [Bindable]

                                          private var callbackUrl:String;

             

            .....

            ----

             

            Naturally, my datagrid tag is dozens of lines below this:

             

            ------



            <mx:TabNavigator x="23" y="10" width="831" height="506">



            <mx:Canvas width="100%" height="100%" label="Learners">




            <mx:DataGrid id="dgData"







            x="27"







            y="19"







            width="778"

            .......

             

            Can you show me a quick example of how I'd put this together with the top tag as you described?

             

            Thanks again,

             

            Gary

            • 3. Re: Code Structure / Component Question
              Flex harUI Adobe Employee

              More or less:

               

              <mx:Application .... xmlns:local=”*” >
                  <mx:TabNavigator>
                      ....
                      <local:MyDataGrid id=”dgData” x=”27” y=”19” width=”778”></local:MyDataGrid>
              

               

              And

              ---MyDataGrid.mxml ---

              <mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml" >

              ...

              </mx:DataGrid

              1 person found this helpful
              • 4. Re: Code Structure / Component Question
                drkstr_1 Level 4

                Depending on your personal preferences and skill level, you may want to look into using a framework to handle these kind of separations in a uniform way.

                 

                http://www.adobe.com/devnet/flex/articles/flex_framework.html

                 

                My preference is Swiz, because it is light weight and gives you a bit of freedom to choose your own methodology. Keep in mind that an IoC framework (like Swiz) can be a bit heavy on a mobile device, if you're not careful.

                1 person found this helpful
                • 5. Re: Code Structure / Component Question
                  GaryDJ Level 1

                  Thanks for this suggestion, drkstr_1.  As far as personal preference, I'd strongly prefer to go the route you suggested and use a framework -- my problem is on the skil level.  I'm a former Flash AS2 programmer trying to understand Flex and AS3, and while I've done a ton of reading, when I sit down and start to code I see I still have alot ot learn.

                   

                  I'll get through this iteration of the project if I can and then hopefully in a few days try to go deeper into a framework like Swiz.

                  • 6. Re: Code Structure / Component Question
                    GaryDJ Level 1

                    Thanks for the example code, harUI.

                     

                    I'm converting the code in the direction you suggested, but am unfamiliar with the way you are using <local:MyDataGrid.  What should I read up on to understand that?  It seems that all the instruction on creating custom components never address any which contain logic in a script tag.

                     

                    I've also noticed that for my custom component, everything in the script/CDATA tags is being ignored, even with code hints/coloring as soon as I moved this code from my main application to the component source code, as if the component is not allowed to have any logic (loading the datagrid) but visual elements only.

                     

                    I'm sure I'm just missing something in my learning.