如何在Eclipse RCP中创建自定义UI构建器

Question

I have an application based on Eclipse RCP and I would like it to create custom UI builder, in which the end user can create their own dashboard (View), which will contain a variety of gauges, buttons, text, etc. I would just like some implemented several UI builder (similarly as for WindowBuilder SWT ), ie to include the palette with UI elements, property elements UI builder, etc. the result would be stored in an XML file, which would RCP applications loaded and in this XML file should be created the View. Unfortunately I do not know where to start (what the catch), an example for creating a custom UI builder?

EDIT: I already have one UI builder I have done, so I'm a complete beginner, but I want to write a new and better. Saving / loading xml files do not need to solve. What bothers me (do not know how to do it) is the actual UI builder, ie creating a palette UI elements, copy and move elements using the mouse, select multiple elements (to move), etc.

Thanks for any advice.

Answer 1

I had a very similar requirement, but I didn't use RCP. I understand you want to save the structure of the created UI in an XML that will be loaded then whenever you want to load again the UI. So I think, if you're using XML, you have to use an schema or XSD template for the XML standard document that will represent the UI. Define what elements are allowed in your UI, sample: buttons, textfields, labels, etc. You need to have a well-defined template because whenever you write a xml or to read a xml it has to be as standard as possible.

If you don't get along well with xsd, you can define your xml first and then use an xsd generator, there are many of them online.

For instance:

<UIBuilder>
<ownerProperties>
<username>Marcelo Tataje</username>
</ownerProperties>
<ui>
<header>
<textlabel label="Welcome" />
</header>
<menu>
<button label="Home" name="btnHome">goHome()</button>
<button label="Contacts" name="btnContacts">showContacts()</button>
</menu>
<mainFrame>
<textfield label="Name:" name="txtName" canEdit=false />
<button label="Show name" name="btnProcess">processData()</button>
</mainFrame>
<footer></footer>
</ui>
<UIBuilder>

And based on this, you can create an schema:

<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified" xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="UIBuilder">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="ownerProperties">
          <xs:complexType>
            <xs:sequence>
              <xs:element type="xs:string" name="username"/>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
        <xs:element name="ui">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="header">
                <xs:complexType>
                  <xs:sequence>
                    <xs:element name="textlabel">
                      <xs:complexType>
                        <xs:simpleContent>
                          <xs:extension base="xs:string">
                            <xs:attribute type="xs:string" name="label"/>
                          </xs:extension>
                        </xs:simpleContent>
                      </xs:complexType>
                    </xs:element>
                  </xs:sequence>
                </xs:complexType>
              </xs:element>
              <xs:element name="menu">
                <xs:complexType>
                  <xs:sequence>
                    <xs:element name="button" maxOccurs="unbounded" minOccurs="0">
                      <xs:complexType>
                        <xs:simpleContent>
                          <xs:extension base="xs:string">
                            <xs:attribute type="xs:string" name="label" use="optional"/>
                            <xs:attribute type="xs:string" name="name" use="optional"/>
                          </xs:extension>
                        </xs:simpleContent>
                      </xs:complexType>
                    </xs:element>
                  </xs:sequence>
                </xs:complexType>
              </xs:element>
              <xs:element name="mainFrame">
                <xs:complexType>
                  <xs:sequence>
                    <xs:element name="textfield">
                      <xs:complexType>
                        <xs:simpleContent>
                          <xs:extension base="xs:string">
                            <xs:attribute type="xs:string" name="label"/>
                            <xs:attribute type="xs:string" name="name"/>
                            <xs:attribute type="xs:string" name="canEdit"/>
                          </xs:extension>
                        </xs:simpleContent>
                      </xs:complexType>
                    </xs:element>
                    <xs:element name="button">
                      <xs:complexType>
                        <xs:simpleContent>
                          <xs:extension base="xs:string">
                            <xs:attribute type="xs:string" name="label"/>
                            <xs:attribute type="xs:string" name="name"/>
                          </xs:extension>
                        </xs:simpleContent>
                      </xs:complexType>
                    </xs:element>
                  </xs:sequence>
                </xs:complexType>
              </xs:element>
              <xs:element type="xs:string" name="footer"/>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

I used http://www.freeformatter.com/xsd-generator.html

And use Jaxb to create the logical processing to create the UI based on the defined well-formed XML documents.

Answer 2

One starts a large project by decomposing it into smaller and smaller pieces, until you can write the code for a piece.

You can start from the bottom and work up, or you can start from the top and work down.

Here are a couple of questions that will help you in your decomposition.

What components (gauges, buttons, text, etc.) will your project support?

How many different components will a user have available for a panel?

As far as coding, go ahead and set up an Eclipse RCP project with a multi panel editor.