Uploaded image for project: 'Apache Flex'
  1. Apache Flex
  2. FLEX-16892

Add a layoutData property to UIComponent, to allow complex custom layouts

    XMLWordPrintableJSON

Details

    • Improvement
    • Status: Open
    • Major
    • Resolution: Unresolved
    • Adobe Flex SDK Previous
    • None
    • None
    • Browser: Firefox 2.x
      Language Found: English

    Description

      In SWT you have a lot of freedom to make custom layouts (though it's
      rare anyone uses it), while in Flex it seems more limited (though it's
      quite likely people might would want to). In SWT, each layout has a
      corresponding LayoutData object that you can apply to individual
      controls that are managed by the layout, in order to customize how the
      layout treats that object.

      GridLayout layout = new GridLayout(1, false);
      layout.marginTop = 5; // etc
      container.setLayout(layout);

      Label label = new Label(container);
      GridData layoutData = new GridData();
      layoutData.horizontalAlignment = GridData.CENTER;
      layoutData.grabExcessHorizontalSpace = true;
      label.setLayoutData(layoutData);

      In this way, you can specify properties on controls that relate to the
      layout, without having them declared on the UIComponent base class.

      I'd like to propose a similar approach in Flex. If the layoutData
      object of a control is null or properties are not defined, then the
      layout should use defaults. Here are some examples, which show how it
      could be used.

      <!--
      In this example, a container lays out its children using polar
      coordinates instead of x/y
      -->
      <FxContainer>

      <layout>
      <RadialLayout />
      </layout>

      <FxButton label="button">
      <layoutData>
      <RadialLayoutData angle="45" radius="200" />
      </layoutData>
      </FxButton>

      </FxContainer>

      /*
      In this example, objects are added to a dynamic physical system,
      which lays out based on charge and repulsion/attraction
      */
      var world:Container = new Container();
      world.layout = new MagneticLayout();

      var button:Button = new Button();
      var magneticData:MagneticData = new MagneticData();
      magneticData.initialPosition = new Point(0,0);
      magneticData.charge = -20;
      magneticData.inertia = 1;
      button.layoutData = magneticData;

      world.addChild(button);

      Other examples could involve complex 3D and so on.

      To make this possible, UIComponent just needs to have an extra
      'layoutData' property added to it. This could be typed as Object or a
      marker interface.

      Attachments

        Activity

          People

            Unassigned Unassigned
            adobejira Adobe JIRA
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

              Created:
              Updated: