How to create group property on xsp-config?

Question

I am learning how to create UI Control on XPAGES ( http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Master_Table_of_Contents_for_XPages_Extensibility_APIs_Developer_Guide )

And I have created my own control and I have set single property in xsp-config using property tag. But when I try to set group property using property-type tag, that group property is not shown.

Here my xsp-config

<faces-config>
 <faces-config-extension>
  <namespace-uri>http://fortedynamic.org/xsp/control</namespace-uri>
  <default-prefix>forte</default-prefix>
 </faces-config-extension>

 <component>
  <description>Forte Input Text</description>
  <display-name>Input Text</display-name>
  <component-type>com.forte.InputText</component-type>
  <component-class>com.forte.component.InputText</component-class>
  <component-extension>
   <component-family>com.forte.InputText</component-family>
   <renderer-type>com.forte.InputText</renderer-type>
   <tag-name>inputText</tag-name>
    <designer-extension>
     <in-palette>true</in-palette>
     <category>Forte Library</category>
    </designer-extension>
  </component-extension>

  <property>
   <description>Data Source</description>
    <display-name>Data Source</display-name>
    <property-name>value</property-name>
    <property-class>string</property-class>
     <property-extension>
     <designer-extension>
      <category>forte</category>
     </designer-extension>
    </property-extension>
  </property>

  <property-type>
   <property-name>event</property-name>
   <display-name>Event</display-name>
   <property-extension>
    <container-class>java.util.Collection</container-class>
    <collection-property>true</collection-property>
     <designer-extension>
       <category>forte</category>
     </designer-extension>
  </property-extension>       
  <property>
    <property-name>refreshId</property-name>
    <property-class>string</property-class>
    <property-extension>
      <designer-extension>
        <editor>com.ibm.designer.domino.xsp.idpicker</editor>
      </designer-extension>
    </property-extension>
  </property>
  <property>
    <property-name>clientEvent</property-name>
    <property-class>string</property-class>
    <property-extension>
      <designer-extension>
        <editor>com.ibm.designer.domino.client.script.editor</editor>
      </designer-extension>
    </property-extension>
  </property>
  <property>
    <property-name>serverEvent</property-name>
    <property-class>com.ibm.xsp.actions.ExecuteScriptAction</property-class>
  </property>
  <property>
    <property-name>onStart</property-name>
    <property-class>string</property-class>
    <property-extension>
      <designer-extension>
        <editor>com.ibm.designer.domino.client.script.editor</editor>
      </designer-extension>
    </property-extension>
  </property>
  <property>
    <property-name>onError</property-name>
    <property-class>string</property-class>
    <property-extension>
      <designer-extension>
        <editor>com.ibm.designer.domino.client.script.editor</editor>
      </designer-extension>
    </property-extension>
  </property>
  <property>
    <property-name>onComplete</property-name>
    <property-class>string</property-class>
    <property-extension>
      <designer-extension>
        <editor>com.ibm.designer.domino.client.script.editor</editor>
      </designer-extension>
    </property-extension>
  </property>      
  <property>
    <property-name>immediate</property-name>
    <property-class>boolean</property-class>
    <property-extension>
      <designer-extension>
        <editor>com.ibm.std.BooleanCheckBox</editor>
      </designer-extension>
    </property-extension>
  </property>
</property-type>
</component>
</faces-config>

Note :

Result of this xsp-config can display : "Data Source" property but "Event" group property is not shown.

Do I miss something to configure on xsp-config ?

Answer 1

I'm not sure about the use of property-extension, but when I manually create a group of properties in a Custom Control, then look at the xsp-config file in Package Explorer under Custom Controls, it looks like the classes are wrong.

Do you want a single property where the users enter an instance of a java.util.Collection? If so, try this:

<property>
    <property-name>event</property-name>
    <display-name>Event</display-name>
    <property-extension>
        <property-item-class>java.util.Collection</property-item-class>
        <collection-property>true</collection-property>
        <designer-extension>
            <category>forte</category>
        </designer-extension>
    </property-extension>
</property>

If you want a property with multiple instances, try:

<property>
    <property-name>event</property-name>
    <display-name>Event</display-name>
    <property-class>java.util.Collection</property-class>
    <property-extension>
        <property-item-class>YOUR INDIVIDUAL PROPERTY TYPE</property-item-class>
        <collection-property>true</collection-property>
        <designer-extension>
            <category>forte</category>
        </designer-extension>
    </property-extension>
</property>

You can allow the users to enter it using the SSJS Editor by adding <editor>com.ibm.workplace.designer.ide.xfaces.internal.editors.MethodBindingEditor</editor> to <designer-extension>

Answer 2

So, it sounds like you want to provide a combo-box for selectable property values. To do this follow this pattern in the property:

    <property id="scrollDirection">
        <description>The direction to scroll. Use "v" for vertical or "h" for horizontal. Defaults to "v"</description>
        <display-name>Scroll Direction</display-name>
        <property-name>scrollDirection</property-name>
        <property-class>java.lang.String</property-class>
        <property-extension>
            <designer-extension>
                <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
                <editor-parameter>
                    v|Vertical
                    h|Horizontal
                </editor-parameter>
            </designer-extension>
        </property-extension>
    </property>

To create an actual group:

<group id="Some meaningful name">
    <description>A description of the group</description>
    <group-type>some.name.space.name</group-type>
    <property>
        <description>A normal property definition</description>
        ....
    </property>
</group>

You can find the total xsp-config/faces-config reference here: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_configuration_file_format

EDIT: Ah, ok. So after reading your comment I think I understand. You want to be able to add items to something like a list. So, you'll have to create a complex type to support this.

<complex-type id="CustomProperty">
    <description>Custom Complex Type property</description>
    <display-name>Custom Complex Type Property</display-name>
    <complex-id>com.acme.xsp.CustomProperty</complex-id>
    <complex-class>com.acme.xsp.components.CustomComplexType</complex-class>
    <property>
        <description>Name of the property to pass to the custom control</description>
        <display-name>Property Name</display-name>
        <property-name>name</property-name>
        <property-class>java.lang.String</property-class>
    </property>
    <complex-extension>
        <tag-name>customComplexType</tag-name>
    </complex-extension>
</complex-type>

And then in your component property (NOTE: The property-add-method tag, this will be a method in your component that in this case will add CustomComplexType objects to a java.util.List):

    <property id="customProperties">
        <description>A list of complex types</description>
        <display-name>Custom Properties</display-name>
        <property-name>customProperties</property-name>
        <property-class>java.util.List</property-class>
        <property-extension>
            <designer-extension>
                <category>basics</category>
            </designer-extension>
            <allow-run-time-binding>true</allow-run-time-binding>
            <collection-property>true</collection-property>
            <property-item-class>com.acme.xsp.components.CustomComplexType</property-item-class>
            <property-add-method>addCustomProperty</property-add-method>
        </property-extension>
    </property>