Design Studio SDK: Examples for Binding Events to ZTL Scripts

I just want to bring two examples for binding ZTL events to BIAL script, listed in the blog from Reiner:

What's Coming in Design Studio 1.4 SDK

and discussed in the threads:

DS 1.4 SDK: binding events to DS script

Design Studio 1.4 SDK - What is the correct approach for binding events to script methods for UI5-based components?

The examples are commited in the community repository in prototypes area, under:

The example is based on the question from Mustafa, how to automatically place the title from application name.

Example 1.

Use of the onBeforeRender event linked to a method.

extension of contribution.xml:

<property    id="onBeforeRender"    title="Set Application Name"    type="ScriptText"      visible="false"/>  <property    id="appName"    title="Application Name"    type="String"    visible="false"/> 
and...<defaultValue property="onBeforeRender">this.private_beforeRender();</defaultValue>

extension of contribution.ztl:

// @Visibility(private)  void private_beforeRender() {*    // APPLICATION.createInfoMessage("Name: " + APPLICATION.getInfo().name);      this.appName = "OnBeforeRender: " + APPLICATION.getInfo().name;  *}

extension in java script file:

  afterDesignStudioUpdate: function() {        // Set the logo text to the appName property filled by the onSetAppName event script      this.setLogoText(this.getAppName());  }

Example 2.

Use of implicit event which is triggered after initial rendering of the component.

extension of contribution.xml:

  <property      id="onSetAppName"      title="Set Application Name"      type="ScriptText"      visible="false"/>    <property      id="appName"      title="Application Name"      type="String"      visible="false"/>  
and...<defaultValue property="onSetAppName">this.private_setAppInfoName();</defaultValue>

extension of contribution.ztl:

/* Sets the value of the invisible property appName to the application name */    // @Visibility(private)  void private_setAppInfoName() {*  // APPLICATION.createInfoMessage("Name: " + APPLICATION.getInfo().name);     this.appName = "Event: " + APPLICATION.getInfo().name;  *}

extension in java script file:

afterDesignStudioUpdate: function() {  // Set the logo text to the appName property filled by the onSetAppName event script    this.setLogoText(this.getAppName());  // Raise the onSetAppName event to execute the script for getting the application name    this.fireDesignStudioEvent("onSetAppName");
}

Pros & Contras.

For this use case - fill in some information automatically on first rendering, example 1 is better, because:

• it is triggered on the server "before render"
• does not require additional roundtrip

Example 2 is positioned to an user action event which does not need to be coded by the application designer, therefore for this scenario it is not the best way, because:

• it triggers additional request after first rendering which causes second rendering of the component.

Learning

• the triggering of implicit events cannot be made in "initDesignStudio" method, those can be made ideally on user action, but implicitly also in "afterDesignStudioUpdate"
• there is a bug in DS 1.4 SP0 (correction will be delivered in SP1) and the marker "@Visibility(private)" is not working at all (the method is not visible)
• example 2 with the event would cause an endless loop, which is not occurring only because in this case the value is not changing and DS 1.4 supports delta rendering (is checking if the values have changed)

Code Example

• see sdkpackage/src/org.scn.community.prototypes/res at master · org-scn-design-studio-community/sdkpackage · GitHub

Application

you just need to create new application and drag&drop one of the components.

Have fun with this examples.