4 Replies Latest reply on Aug 4, 2008 6:53 AM by Bob, Adobe Engineer

    JS CS3-- User Interface Panels

      Hi all,

      Is it possible to change panels on a single window based on an onChange event?

      For example one onChange event will display a certain Panel and onChange will change it to a different panel on the same window?

      Regards
      Norbert
        • 1. Re: JS CS3-- User Interface Panels
          Level 1
          Certainly.

          Use a dropdownlist. Have it contain the panel names.

          Then create a group, set its orientation property to "stack", create the panels inside the group. The onChange handler for the dropdownlist then sets the visibility for the panels.

          As a basic (totally untested example)

          var = new Window( "dialog", "Cheap Imitation of Tabbed Panels" );

          ... other stuff...

          w.tabController = w. add( "dropdownlist" );
          w.tabGroup = w.add( "group" );
          w.tabGroup.orientation = "stack";
          w.tabGroup.alignChildren = "fill";
          w.panel1 = w.tabGroup.add( "panel", undefined, "Panel 1" );
          w.panel2 = w.tabGroup.add( "panel", undefined, "Panel 2" );

          ... add stuff to your panels

          var item1 = w.tabController.add( "item", "Panel 1" );
          var item2 = w.tabController.add( "item", "Panel 2" );
          item1.panel = w.panel1;
          item2.panel = w.panel2;
          item1.selected = true;
          item1.panel.visible = true; // not needed but it clarifies the code
          item2.panel.visible = false;
          w.tabController.currentPanel = item1.panel;
          w.tabController.onChange = function() {
          this.currentPanel.visible = false;
          this.currentPanel = this.selection.panel;
          this.selection.panel.visible = true;
          }

          Something like that will work.

          I have some code around somewhere that does this as a generic widget. It uses a panel instead of a group to contain the "tabs", uses groups for the "tabs", and places the dropdown list over the text area part of the containing panel. Similar to the preferences panel in the ESTK 1 (NOT 2!). If I can find it, and verify that it still works, I'll let you know. It'll take a day or two to get to that.

          Regards

          Bob
          • 2. Re: JS CS3-- User Interface Panels
            Thanks Bob,

            Sincerely appreciate this!

            Cheers!!
            Norbert
            • 3. Re: JS CS3-- User Interface Panels
              Hi Bob,

              I tried your code and it worked. It's exactly what I was setting out to achieve.

              However the moment I tri resizing the window, the dropdowl list and the panels disappear. Here's how I resize

              w.location=[50,100] //works
              w.size=[400,985] //does not work.

              Regards
              Norbert
              • 4. Re: JS CS3-- User Interface Panels
                Level 1
                When you set the size, the layout manager will not place the contents. You have to do that manually. Better to never set the size or bounds and let the layout manager do its thing.

                Bob