Skip to Content

Design Studio currently supports only single-click events (“On Click” and “On Select”) but an often asked question is how can we implement double-click?  This post has been inspired by the scenario discussed in Geomap of SAP Design Studio which asks this question.  Here I will describe a more generic approach, based on the Timer component, that can be tailored to your needs.

 

The steps to be carried out are as follows:

1.  Create a Global Script Variable of type int named clickCount with a default value of 0 (zero);

2.  Add a Text component to the application;

3.  Create a Global Script Function named processDoubleClick().  This should include the desired code for your double-click processing.  For the purposes of this example we simply include:

TEXT_1.setText("Double-click");

4.  Create a Global Script Function named processSingleClick().  This should include the desired code for your standard click processing.  For the purposes of this example we simply include:

TEXT_1.setText("Single Click");

5.  Add a Timer component to your application with the following settings:

(i)  Interval in Milliseconds property equal to 500.  You can experiment with values from 100 to 900 to apply your ideal click speed;

(ii)  Script code in the “On Timer” event:

me.stop();

if (clickCount == 1) {
	GLOBAL_SCRIPTS_CLICK_PROCESSING.processSingleClick();
	
} else 

if (clickCount == 2 ){
	
GLOBAL_SCRIPTS_CLICK_PROCESSING.processDoubleClick();
	
}

clickCount = 0;

The “On Timer” event is triggered when the time interval specified for the Interval in Milliseconds property has elapsed.  Therefore, at this point we stop the Timer to check how many clicks occurred during the time interval (in this example 500 milliseconds) and call the appropriate global script function to process accordingly, after which the click counter is reset.

6.  Add an Icon component to the application.  This serves as the trigger for click events.  You can use any component with an “On Click” or “On Select” event, as relevant to your needs.  In this example we include the following code in the “On Click” event of the Icon component:

if (TIMER_1.isRunning()) {
	
	clickCount = 2;
	
} else {
	
	clickCount = 1;
	TIMER_1.start();
	
}

The logic behind the above code is that if the Timer is already running when an “On Click” event is triggered then this means that a single click must have already occurred, so this is the second click.  If on the other hand the Timer is not running when the “On Click” event is triggered, this implies that this is the first click, so we start the Timer in order to check if any subsequent click falls within the time interval to be classified as a double-click (in this example 500 milliseconds).

 

The completed application looks like this:

 

 

Blog Series Index:  Design Studio Innovation Series – Welcome

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Mike Howles

    Interesting way to simulate a double-click.  🙂  My only concern would be when server latency is a factor, as each BIAL statement is technically a round-trip.  A shame we cannot do this purely client-side…  Maybe an SDK component is in order 🙂

    (1) 
    1. Mustafa Bensan Post author

      Yes, I guess it could be considered a creative approach 🙂  You make a valid point about server latency but I guess that would also apply to any script sequence.

       

      An SDK component could certainly be a good exploration exercise.  I’d be interested to see how a double-click event could be attached to a standard component via the SDK 🙂

      (1) 
      1. Mike Howles

        I was more thinking just a visible SDK component that itself accepted double-clicks, rather than monkeying with the DOM of a different component.  Should be a rather simple one to write.  Maybe in the airport Monday 🙂

        (1) 

Leave a Reply