8 Replies Latest reply on Jul 9, 2010 6:00 AM by BhaskerChari

    View States Flex3

    PHANTOMIASA Level 1

      Hello to all.

       

      I have a big problem with view states. I have this source code and you can see I want to switch the main view:

      <mx:HBox x="0" y="0" width="100%" height="100%" horizontalGap="0">
          <mx:VBox width="100%" height="100%" verticalGap="0">
              <MyComp:Header id="header"/>
              <mx:states>
                  <mx:State name="all">
                      <mx:AddChild>            
                          <mx:HDividedBox width="100%" height="100%">
                              <MyComp:Tree id="tree"/>
                              <mx:VBox width="100%" height="100%" verticalGap="0">
                                  <mx:VDividedBox width="100%" height="100%">
                                      <MyComp:Listing id="listing"/>
                                      <MyComp:Details id="details"/>
                                  </mx:VDividedBox>
                              </mx:VBox>
                          </mx:HDividedBox>
                      </mx:AddChild>
                  </mx:State>        
                  
                  <mx:State name="special">
                      <mx:AddChild>    
                          <MyComp:Special id="special"/>
                      </mx:AddChild>
                  </mx:State>
              </mx:states>
              <MyComp:Footer id="footer"/>
          </mx:VBox>
      </mx:HBox>
      

      But with this code, I get the error:

      Initializer for property 'states' is not allowed here.    Main.mxml    /MyProject/flex_src    Flex-Problem

      What can I do to solve this problem?

      Possible is to create these two view states, so that "footer" and "header" are twice in the Main.mxml listed. So it is possible to wrap alle the code and make view state "all" and another view state with alle the source code as view state with name "special".

      But so I would have code duplication with footer and header and the other layout stuff and I have to change the IDs of header and footer.

       

      What can I do? I use Flex 4 SDK but all components are done with mx and Halo and I do not want to change the whole app to Spark.

       

      Best Regards PHANTOMIAS

        • 1. Re: View States Flex3
          BhaskerChari Level 4

          Hi PHANTOMIASA,

           

          Place states tag in the root tag of your component and check once ..I think by doing this your problem should go away..

           

          <mx:states>
                      <mx:State name="all">
                          <mx:AddChild>           
                              <mx:HDividedBox width="100%" height="100%">
                                  <MyComp:Tree id="tree"/>
                                  <mx:VBox width="100%" height="100%" verticalGap="0">
                                      <mx:VDividedBox width="100%" height="100%">
                                          <MyComp:Listing id="listing"/>
                                          <MyComp:Details id="details"/>
                                      </mx:VDividedBox>
                                  </mx:VBox>
                              </mx:HDividedBox>
                          </mx:AddChild>
                      </mx:State>       
                     
                      <mx:State name="special">
                          <mx:AddChild>   
                              <MyComp:Special id="special"/>
                          </mx:AddChild>
                      </mx:State>
                  </mx:states>

           

          Say if HBox is the root tag of your component...then place the states inside your root tag..

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalGap="0">

           

               <mx:states>
                      <mx:State name="all">
                          <mx:AddChild>           
                              <mx:HDividedBox width="100%" height="100%">
                                  <MyComp:Tree id="tree"/>
                                  <mx:VBox width="100%" height="100%" verticalGap="0">
                                      <mx:VDividedBox width="100%" height="100%">
                                          <MyComp:Listing id="listing"/>
                                          <MyComp:Details id="details"/>
                                      </mx:VDividedBox>
                                  </mx:VBox>
                              </mx:HDividedBox>
                          </mx:AddChild>
                      </mx:State>       
                     
                      <mx:State name="special">
                          <mx:AddChild>   
                              <MyComp:Special id="special"/>
                          </mx:AddChild>
                      </mx:State>
                  </mx:states>
          </HBox>

           

          Thanks,

          Bhasker Chari

          • 2. Re: View States Flex3
            PHANTOMIASA Level 1

            Thanks a lot for your reply.

             

            But I am not sure if I understand you.

            My source code is in between <mx:Application>

            So I should take the main-view and create a new component MainView.mxml and put your code inside and then do a

            <MyComp:MainView id="mainView"/>
            

            in my Main.mxml?

             

            So I have to change all

            details. ...

            to

            mainView.details. ...

            ?

            • 3. Re: View States Flex3
              PHANTOMIASA Level 1

              Is my last post right?

              Or should I change something?

              • 4. Re: View States Flex3
                BhaskerChari Level 4

                Hi PHANTOMIASA,

                 

                As said by you in your post the code is in your <mx:Application /> tag right so ...

                 

                Instead of using this code as you are using currently use the code in the blue...

                 

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

                <mx:HBox x="0" y="0" width="100%" height="100%" horizontalGap="0">
                    <mx:VBox width="100%" height="100%" verticalGap="0">
                        <MyComp:Header id="header"/>
                        <mx:states>
                            <mx:State name="all">
                                <mx:AddChild>           
                                    <mx:HDividedBox width="100%" height="100%">
                                        <MyComp:Tree id="tree"/>
                                        <mx:VBox width="100%" height="100%" verticalGap="0">
                                            <mx:VDividedBox width="100%" height="100%">
                                                <MyComp:Listing id="listing"/>
                                                <MyComp:Details id="details"/>
                                            </mx:VDividedBox>
                                        </mx:VBox>
                                    </mx:HDividedBox>
                                </mx:AddChild>
                            </mx:State>       
                           
                            <mx:State name="special">
                                <mx:AddChild>   
                                    <MyComp:Special id="special"/>
                                </mx:AddChild>
                            </mx:State>
                        </mx:states>
                        <MyComp:Footer id="footer"/>
                    </mx:VBox>
                </mx:HBox>

                </mx:Application >

                 

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

                <mx:states>
                            <mx:State name="all">
                                <mx:AddChild>           
                                    <mx:HDividedBox width="100%" height="100%">
                                        <MyComp:Tree id="tree"/>
                                        <mx:VBox width="100%" height="100%" verticalGap="0">
                                            <mx:VDividedBox width="100%" height="100%">
                                                <MyComp:Listing id="listing"/>
                                                <MyComp:Details id="details"/>
                                            </mx:VDividedBox>
                                        </mx:VBox>
                                    </mx:HDividedBox>
                                </mx:AddChild>
                            </mx:State>            
                            <mx:State name="special">
                                <mx:AddChild>   
                                    <MyComp:Special id="special"/>
                                </mx:AddChild>
                            </mx:State>
                </mx:states>

                 

                <mx:HBox x="0" y="0" width="100%" height="100%" horizontalGap="0">
                    <mx:VBox width="100%" height="100%" verticalGap="0">
                        <MyComp:Header id="header"/>
                        <MyComp:Footer id="footer"/>
                    </mx:VBox>
                </mx:HBox>

                </mx:Application>

                As if you observe the code in blue I have removed the <mx:states/> tag from the VBox and placed in the Application container directly...that's what I am talking about...Put your states in root Application and not in any subcontainer...Hope you understand now what I am talking ...

                 

                Thanks,

                Bhasker Chari

                • 5. Re: View States Flex3
                  PHANTOMIASA Level 1

                  Thanks for the reply.

                   

                  But the "view states" part must be in between these tow lines:

                   

                          <MyComp:Header  id="header"/>
                          <MyComp:Footer id="footer"/>

                   

                  How can I do this? Because otherwise my layout is broken.

                   

                  Best Regars PHANTOMIAS

                  • 6. Re: View States Flex3
                    BhaskerChari Level 4

                    Hi PHANTOMIASA,

                     

                    Try Something like below So that your design doesn't get disturbed:

                     

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


                      <mx:states>
                             <mx:State name="all">
                                 <mx:AddChild relativeTo="{mainBox}">           
                                     <mx:HDividedBox width="100%" height="100%">
                                         <MyComp:Tree id="tree"/>
                                         <mx:VBox width="100%" height="100%" verticalGap="0">
                                             <mx:VDividedBox width="100%" height="100%">
                                                 <MyComp:Listing id="listing"/>
                                                 <MyComp:Details id="details"/>
                                             </mx:VDividedBox>
                                         </mx:VBox>
                                     </mx:HDividedBox>
                                 </mx:AddChild>
                             </mx:State>       
                            
                             <mx:State name="special">
                                 <mx:AddChild relativeTo="{mainBox}">   
                                     <MyComp:Special id="special"/>
                                 </mx:AddChild>
                             </mx:State>
                         </mx:states>  


                      <mx:HBox x="0" y="0" width="100%" height="100%" horizontalGap="0">
                          <mx:VBox width="100%" height="100%" verticalGap="0">
                              <MyComp:Header id="header"/>
                              <mx:VBox id="mainBox" verticalGap="0" />
                              <MyComp:Footer id="footer"/>
                          </mx:VBox>
                      </mx:HBox>
                    </mx:Application>

                     

                     

                    Thanks,

                    Bhasker Chari

                    • 7. Re: View States Flex3
                      PHANTOMIASA Level 1

                      That works great!

                       

                      Thanks a lot for your help & Best Regards.

                      • 8. Re: View States Flex3
                        BhaskerChari Level 4

                        Hi PHANTOMIASA,

                         

                        I am glad that it worked out in resolving your problem...

                         

                        All the best for rest of your work..:)

                         

                        Cheers,

                        Bhasker Chari