2 Replies Latest reply on Dec 13, 2010 5:37 PM by Marc Autret

    Making a Group or Panel Scroll

      I have an application that builds a dynamic group object with controls shown in rows based the number of fields returned from an xml file. The window looks something like this:
      GROUP
      ----------------------------------------------------
      checkbox | statictext | edittext| checkbox |
      checkbox | statictext | edittext| checkbox |
      checkbox | statictext | edittext| checkbox |
      checkbox | statictext | edittext| checkbox |
      checkbox | statictext | edittext| checkbox |
      checkbox | statictext | edittext| checkbox |
      checkbox | statictext | edittext| checkbox |
      ----------------------------------------------------

      I cannot control how many fields are returned as it is variable for each publication. The problem is that the UI grows vertically to match the size using the autolayoutmanager and may push the window size outside of the screen. I can constrain the Group UI object by setting the maximumSize = [400,400], but if the size of the controls in the group overflow there is no way to make them scroll. So they get clipped. So I thought it might be possible to create a group container that contained a scrollbar and a inner group object that would house the gridrows and use the onDraw method of most scriptUI controls. But I am finding this hard to do. Has anyone encountered a similiar situation or can help guide me on how to do this?

      I have attached a prototype that I was working on below

      var resUI =
      "dialog{ alignChildren:'stack', \
      outerContainer: Group{ \
      groupContainer:Group{\
      orientation:'column', \
      maximumSize:[400,400] \
      }, \
      scroll:Scrollbar{ \
      preferredSize:[20,400] \
      } \
      }}";
      var dialog = new Window(resUI);
      with(dialog.outerContainer.groupContainer)
      {
      for(i = 0; i < 25;i++)
      {
      add("button",undefined,i);
      }
      }
      //When the user changes the scrollbar determine
      //how to make the groupContainer scroll to match the appropriate
      //viewport
      dialog.outerContainer.scroll.onChange = function()
      {
      var ticks = this.value;
      //gfx = dialog.outerContainer.groupContainer.graphics;
      var groupContainer = dialog.outerContainer.groupContainer;
      for(var i =0; i < groupContainer.children.length;i++)
      {
      if(i < ticks)

      groupContainer.children[i].visible = false;

      else
      groupContainer.children[i].visible = true;
      }
      dialog.layout.layout(true);
      }
      dialog.show();