Custom UI Components

I In certain cases, you may want to extend the default functions of the UI components or make custom changes. To do so, you can derive from the standard components. The new UI component can then be used in the GUI Builder. 

Generate UI Component

  1. Click Project Management > User Interface Create a new GUI element.
  2. In the following dialog, choose a name for your UI component in Name, e.g. MyButton
  3. Click Superclass > Browse.
  4. In the following dialog, choose a UI component from which you want to derive your UI component (superclass), e.g. XdevButton.
  5. Click on OK.
  6. Click on Finish.
Result:
  • A new UI component of type   XdevButton  is generated.

    package com.company.example.ui;
    
    import com.xdev.ui.XdevButton;
    
    public class MyButton extends XdevButton {
    
    	/**
    	 * 
    	 */
    	public MyButton() {
    		super();
    		this.initUI();
    	}
    
    	/*
    	 * WARNING: Do NOT edit!<br>The content of this method is always regenerated
    	 * by the UI designer.
    	 */
    	// <generated-code name="initUI">
    	private void initUI() {
    		this.setCaption("Button");
    
    		this.setSizeUndefined();
    	} // </generated-code>
    
    }
  • In Project Management > User Interface a new UI component is available and can, thus, be displayed in the GUI Builder, edited, configured via Properties, and enhanced in the Java code view. 
  • The new UI component is automatically added to the Palette. The new UI component can be used in the GUI Builder like any other UI component.

Enhance UI component

The new UI component can be enhanced with any new properties and methods.

  1. Double-click the new UI component in Project Management > User Interface.
  2. Change the caption.
  3. Assign an icon to the UI component.
  4. Define a new property; e.g., MouseOverCaption.

    String MouseOverCaption = "";
    
    public String getMouseOverCaption() {
    	return MouseOverCaption;
    }
    
    public void setMouseOverCaption(String mouseOverCaption) {
    	MouseOverCaption = mouseOverCaption;
    }
  5. Click Save.
Note:
  • The properties defined in the code are later displayed in Properties Misc.

Use new UI component

The new UI component can be used in the GUI Builder in the same way as any other UI component.

  1. Click Project Management > User Interface > MainView.
  2. Choose a new UI component in the Palette and drag it to the MainView.

Use new UI component in the GUI Builder as default

  1. Click on the small arrow on the palette in the derived UI component.
  2. Click in the new UI component..