8 Replies Latest reply on May 3, 2009 8:20 AM by Gregory Lafrance

    Work with States at the same time

    lerooooogk

      Hiya,

       

      I have defined some states in my application. Basically, these states add and remove childs components.


      My question is:

       

      ¿Is it possible to have 2-3 states at the same time? Now when I choose other state I'd like to keep the previous component controls (like button, ,list, etc) and add the new ones of second state but when I do that controls of first state dissapear.

       

      Thanks all,

       

      Lerogke

        • 1. Re: Work with States at the same time
          ATIF FAROOQ Level 3

          Hi,

            Yes its definately possible lerogke.States can be categorized in

          hierarchal manner means.At Root you always have a base state.Then you

          further consruct other states within  that base state. So in this manner you can make

          infinite level of states hierarchy applying the base state concept e.g

           

          If you just created a state with name Login this login state will initaly have a textInput component

          for username and by default radio buttons for guest anad user and one button for Logging In with

          name login.Login State also defines one another state within it for Registered user with name User

          Now when user clicks on user radio button you will switch from your current

          state to this User state which is also based on Login State as i mentioned

          earlier.Now this state has defined one more textInput field of  password

          along with the the components from our base state Login.The purpose of all that Login and

          user state will be simply to provide only username textfield to the user if he wants

          to login as guest and password field also if he wants to login as Registered user.

          You can manage your states in states pannel in flex builder.

          • 2. Re: Work with States at the same time
            lerooooogk Level 1

            Hi,

             

            I'll try to explain better my question .

             

            My application is the next:

            Its base state is 'BaseState'

             

            When user clicks on LinkButton which is red circled a new panel appears on left 'ParamDetailsState'

             

            Now, if user clicks on black circle LinkButton adds a new textInput and ComboBox but the previous Panel dissapears (the reason is that both panels are based on BaseState)

             

            My question is if it's possible to keep the previous panel if user clicked LinkButton Control.

             

             

            Thanks!

             

            Lerogke

            • 3. Re: Work with States at the same time
              Barna Biro

              Hi there,

               

              The solution is quite simple: if you define your state from code then you have a property called basedOn. Simply specify the base of the state and you're kinda done ( same property is available in design view when you click the add state button ). For example: your default state has 3 circles: red, black, green. Clicking the red circle opens a panel, the state is called redState and is basedOn = ""; ( the default state ). Now, you click the black circle, that adds 2 combo boxes to your panel, the state is called "blackState" and is based on "redState" meaning that it will have all the elements redState had + the 2 new combo boxes... same thing can be applied to the green button, you can choose to base it on redState or blackState, depending on what you want.

               

              Read up on states: http://livedocs.adobe.com/flex/3/html/help.html?content=using_states_3.html

               

              With best regards,

              Barna Biro

              • 4. Re: Work with States at the same time
                lerooooogk Level 1

                Hi,

                 

                thanks for your answer.

                 

                I'd used BasedOn property but I am still having the same problem.

                 

                I'll use your example to explain better my doubt.

                 

                I have a State Base.

                 

                Then

                • 5. Re: Work with States at the same time
                  lerooooogk Level 1

                  Hi,

                   

                  thanks for your answers! But I'm still having the same problem.

                   

                  I'll use your example to try to explain better my doubt.

                   

                  I have a stateBase which has three circles:

                  1.Red Circle --> add a new Panel with a datagrid and button to come back (to hide).

                  2.Blue Circle --> add two text Input (in other Panel)

                  3.Black Circle --> add a big textArea

                   

                  When I click 'Red Circle' there isnt any problem. It's based on StateBase so adds new Panel on left. When user click on button to come back the application comes to its stateBase.

                   

                  Well, the problem is when user clicks Blue or Black circle. I want to keep the panel if user clicked on Red Circle.

                  If I put basedOn="currentState='RedCircle'" on their properties, panel will always be and If i put basedOn="currentState=''" panel will always dissapear when user clicks Blue or Black circle.

                   

                  That is the reason of my topic "Work with states at the same time". I dont know if there is some way maybe to "memorise" the status of application or other kind of solution.

                   

                  Thanks all,

                   

                  Lerogke

                  • 6. Re: Work with States at the same time
                    Barna Biro Level 3

                    Hi again,

                     

                    Sadly, I still don't see what's the problem with this. Do you want to keep the panel from the redState when you click the Back button or when? Or do you want to keep the Panel only if the user previously clicked the red button and not keep it if he hasn't and then he clicks the Back button? I really can't understand what's so hard about this one but if I'd eventually understand what you want exactly ( things are still quite vague for me ) then I could post some code to help.

                     

                    With best regards,

                    Barna Biro

                    • 7. Re: Work with States at the same time
                      lerooooogk Level 1

                      Hi again,

                       

                      not sadly I'm not a good programmer (i'd say that i am big newbie ) and my english isnt very well

                       

                      Some posts before I put images of my application but I think they dont work.

                       

                      I post some code:

                       

                      - Three States

                       

                       <mx:states>
                          
                               <!-- Estado 'ParamDetails' (Ver nombres y valores parametros) -->         
                              <mx:State name="ParamDetails">           
                                  <mx:AddChild relativeTo="{Application.application.filterView.filterPanel.lastFilters}" 
                                      position="after">
                                      <mx:Panel title="Parámetros" width="100%">
                                           <mx:DataGrid id="params_dg" width="100%"
                                                    dataProvider="{dg_events.selectedItem.params}">
                                                    <mx:columns>
                                                         <mx:DataGridColumn headerText="Nombre" dataField="name"/>
                                                         <mx:DataGridColumn headerText="Valor" dataField="value"/>
                                                    </mx:columns>               
                                               </mx:DataGrid>
                                      </mx:Panel>
                      
                                  </mx:AddChild>
                                  
                                  <!-- Modificamos propiedades --> 
                                  <mx:SetProperty target="{panelDetails}"  name="height" value="100%"/>                
                                  <!-- añadimos un LinkButton control para cambiar al estado inicial -->          
                                  <mx:AddChild relativeTo="{params_dg}" position="after">
                                      <mx:LinkButton label="Minimizar" 
                                          click="currentState='SecondFilter'"/>
                                  </mx:AddChild>
                              </mx:State>
                              
                              <!-- Estado 'SeeFile' (ver contenido fichero XML)--> 
                              <mx:State name="SeeFile">
                                   <mx:RemoveChild target="{eventsDg}"/>
                                   <mx:AddChild relativeTo="{mainVS}">
                                        <mx:Panel width="100%" height="100%" title="Contenido archivo">
                                             <mx:TextArea id="infoTA" width="100%" height="100%"/>
                                             <mx:LinkButton label="Volver" click="currentState=''"/>
                                        </mx:Panel>
                                   </mx:AddChild>
                              </mx:State>
                              
                               <!-- Añadir segundo filtro de búsqueda -->
                              <mx:State name="SecondFilter" basedOn="ParamDetails">
                                   <mx:RemoveChild target="{bt_filter}"/>
                                   <mx:RemoveChild target="{bt_removef}"/>
                                   <mx:RemoveChild target="{_lb}"/>
                                   <mx:AddChild relativeTo="{_text}" position="after">
                                        <mx:HBox width="100%">
                                               <mx:ComboBox id="_select2" dataProvider="{columnSelectProvider2()}"/>
                                               <mx:TextInput id="_text2" width="140" toolTip="Escriba aquí..." />
                                               <!--<mx:Button label="Añadir" click="prueba4.push(_text2.text); prueba5.push(_select2.selectedItem.dataField)"/>-->
                                               <mx:Button label="Filtrar" click="doubleFilter()"/>     
                                               <mx:Button id="bt_removef2" label="Borrar" click="matchFilter.removeMatch()"/>               
                                               <mx:LinkButton label="Volver" click="currentState=''"/>
                                          </mx:HBox>
                                   </mx:AddChild>
                              </mx:State>
                          </mx:states>
                      

                       

                      And some basic code:

                       

                                <mx:VBox id="eventsDg" width="100%" height="100%">     
                                
                                     <!-- Panel con Datagrid y filtrado --> 
                                     
                                     <mx:Panel id="panelDg" title="Lista Eventos" width="100%" height="100%"
                                          paddingTop="10" paddingLeft="10" paddingBottom="10" paddingRight="10">
                                          
                                          <mx:DataGrid id="dg_events" width="100%" height="100%"
                                               dataProvider="{eventList.eventCollection}">
                                               <mx:columns>
                                                    <mx:DataGridColumn headerText="Nombre de evento" width="150"
                                                         dataField="name"/>
                                                    <mx:DataGridColumn headerText="ID" width="40"
                                                         dataField="eventId"/>
                                                    <mx:DataGridColumn headerText="Propietario" width="120"
                                                         dataField="owner"/>
                                                    <mx:DataGridColumn headerText="Hora" width="55"
                                                         dataField="time"/>
                                                    <!-- <mx:DataGridColumn headerText="N. Parámetros" width="100"
                                                         dataField="numParams"/> -->
                                                    <mx:DataGridColumn headerText="Parámetros"
                                                         labelFunction="eventList.getParams"/>
                                               </mx:columns>
                                          </mx:DataGrid>     
                                          
                                          <mx:HBox id="hbFilter" width="100%">
                                               <!--<mx:Label text="Filtrar por:"/>-->                    
                                               <mx:ComboBox id="_select" dataProvider="{columnSelectProvider()}"/>
                                               <mx:TextInput id="_text" width="140" toolTip="Escriba aquí..." />
                                               <mx:Button id="bt_filter" label="Filtrar" click="matchChanged()"/>
                                               <!--<mx:Button label="Añadir" click="prueba4.push(_text.text); prueba5.push(_select.selectedItem.dataField)"/>-->
                                               <mx:Button id="bt_removef" label="Borrar filtros" click="matchFilter.removeMatch()"/>
                                               <mx:LinkButton id="_lb" label="Añadir segundo Filtro" click="currentState='SecondFilter'"/>
                                               <mx:Spacer width="100%"/>
                                               <mx:Label text="({eventList.eventCollection.length} eventos)"/>
                                          </mx:HBox>
                                          <!--
                                          <mx:HBox width="100%">
                                               <mx:Label text="Filtrado rapido"/>
                                               <mx:ComboBox id="_select2" dataProvider="{columnSelectProvider()}"/>
                                               <mx:TextInput id="_text2" width="140" toolTip="Escriba aquí..." />
                                               <mx:Button label="Añadir" click="prueba4.push(_text2.text); prueba5.push(_select2.selectedItem.dataField)"/>
                                               <mx:Button id="bt_filter2" label="Aplicar" click="matchChanged2()"/>                    
                                               <mx:Spacer width="100%"/>
                                               <mx:Label text="({eventList.eventCollection.length} eventos)"/>
                                          </mx:HBox>
                                          -->
                                     </mx:Panel>
                                     
                                     <mx:HBox width="100%">               
                                          <comp:MinMaxPanel id="panelDetails" title="Detalles" width="100%">
                                               
                                               <mx:HBox width="100%" verticalAlign="bottom">
                                                    <mx:Label id="prueba" text="Filtro actual: ninguno"/>                         
                                                  </mx:HBox>
                                                  <mx:LinkButton id="registerLink" 
                                            label="¿Ver parámetros?" 
                                            click="currentState='ParamDetails'"/>
                                          </comp:MinMaxPanel>                    
                                     </mx:HBox>          
                                     
                                     <filterView:FilterParam id="filterParam" width="100%"/>     
                                                         
                                </mx:VBox>
                      

                       

                      You wrote:

                       

                      "Do you want to keep the panel from the redState when you click the Back button or when? Or do you want to keep the Panel only if the user previously clicked the red button and not keep it if he hasn't and then he clicks the Back button?"

                       

                      I want to keep panel of "ParamDetails" independently if user click _lb button to add second Filter. Actually, such as you can see, 'SecondFilter' is based on 'ParamDetails' so always when user clicks lb_button appears panel of ParamDetails. And on the other hand 'ParamDetails" is base on StateBase so 'second filter' (text_input and button) will never appear (because on base State these arent).

                       

                      I expect that I had could explain better... but I have doubt

                       

                      Thanks for all and sorry for bothering you,

                       

                      Lerogke