User Define Control (UDC)

You can create a user control by placing the developed app in the UDC folder. A UDC can define properties to be externally bindable or publish events and APIs.

Create User Define Control

• If you create an eXBuilder6 (.clx) file in the udc folder in the source folder, it becomes a UDC control. Create a search.clx file in the udc folder.

  

• Select the button on the design editor toolbar to open the screen configuration dialog. Give it a height of 20px.

  

• Add an input box control and a button control and specify the layout as below.

  

  • Input box: Give layout settings of top, bottom, left, and right so that they can be changed as the size changes.

    

  • Button: By setting the layout settings to top, bottom, right, and width, the height changes according to the vertical size change, but the width (80px) is maintained even when the horizontal size is changed.

    

Export property

When using UDC, you can publish externally accessible properties.

• Select the app by clicking on the space in the design tab, and select the button in the [Assist - Published Properties] tab to add properties. Name the property searchWord and format it as string. The searchWord property is now externally accessible. ※ If you check Binding in the corresponding app property, you can use binding to the corresponding property (searchWord) in the file that uses UDC.

  

• Select the input box and add a property binding in [Properties - Binding]. Specify the binding target as the value attribute.

  

• Specify the type of Binding Source as App Property Binding, and the App Property selects the published property searchWord property.

  

• By specifying the binding configuration of the input box control as shown below, the value of the searchWord property of the UDC control can be set to the value of the input box.

  

Export event

You can publish events that are available externally to your user controls.

• Select the app by clicking on the white space in the Design tab, and then select the button in the [Assist - Published Events] tab to add an event. Specify the event type as search and the event class as cpr.events.CUIEvent. You can now add search events externally.

  

  Published Events Component

  Category	Description
  Event type	Specifies the type of event object.
  Event class	Supports user-specified events to be used in the studio's script editor or design editor. Specifies the class of the event object to dispatch when dispatching published events.
  Desscription	Writes a description of the published event. When using a user control, it appears as a tooltip for the event specified by the user in the event tab of the property view.

• button, select Events > in the context menu. Select the click item to add a click event to the button.

  

• When you move to the script tab, a CUIEvent named search is created and dispatched as shown below. Now, when the button is clicked, the UDC control fires the search event.

  

  search.js:

  /*
   * Called when a click event occurs on the "Search" button.
   * An event that fires when the user clicks the control.
   */
  function onButtonClick(/* cpr.events.CMouseEvent */ e){
  	var event = new cpr.events.CUIEvent("search");
  	app.dispatchEvent(event);
  }
  
  			

How to use user-defined controls (UDC)

UDC created as above can be used within the same project.

• In the eXBuilder6 (.clx) file, expand the Palette's UDC tool box to check the UDC you created. The UDC name consists of fileName. After selecting the corresponding UDC, create it in the design area.

  

• After selecting the created UDC control, if you look at the Properties view, you can check the searchWord property specified as the publishing property of the UDC. You can check the search event that was specified as a publication event in Events of the context menu by right-clicking.

  

How to use User Controls (UDC) within Grid

• Select the UDC you created in the Palette's UDC toolbox and place it in the grid detail cell.

  

• As the return value of the automatically generated getText() function, write the text to be displayed in the view mode of the grid.

  /**
   * Returns the text that will be displayed in grid with view mode.
   */
  exports.getText = function(){
  	// TODO: In view mode of the grid, you need to write code that returns the text to display.
  	return app.getAppProperty("appProperty"); // Display attribute values ​​published by UDC in the view mode of the grid tomatoSystem
  };

  

• Notice the text displayed in the grid's view mode in the browser preview.

  

Text displayed in grid's view mode

Difference between UDC and embedded apps