WaitCursor: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
m (Ghenne moved page Waitcursor to WaitCursor)
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
WaitCursor true|'''false'''
WaitCursor true|'''false'''|cursorStyle|filename
 
[[File:Ajax-loader.gif]]


== Description ==
== Description ==


Set WaitCursor to true to display a wait cursor. The design of the cursor depends on the device. Set it to false to turn the waitcursor off again.
Set WaitCursor to true to display a wait cursor. The design of the cursor depends on the browser and whether you are running on a mobile device. Set it to false to turn the WaitCursor off again. The WaitCursor state will change when your app goes into an inactive state. It will not change while your app is processing.  


== Example ==
If you are running on a non-touchscreen device, a number of cursorStyles are built in. They are: alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, URL, vertical-text, w-resize, wait, zoom-in, zoom-out, initial, inherit. Call WaitCursor False to hide it again.
 
You can also give the name of a gif file. You can create your own custom WaitCursors at http://www.ajaxload.info. Remember to also add the name of the file to the manifest. If you give a name, it will display on both touch and non touchscreen devices. Call WaitCursor False to hide it again.
 
The default wait cursor is a file named ajax-loader.gif. If you are using any jQuery Mobile controls, it is added to your manifest by default. If you are not using jQuery Mobile, add this line to 'manifest' in Project Properties:
<pre>
nsb/images/ajax-loader.gif
</pre>
 
The Waitcursor will only take effect when your app pauses processing. If you set it just before a hard loop or a synchronous [[Ajax]] call, it will not be invoked until that operation finishes. Use [[SetTimeout|SetTimeout]] to start the hard loop or asynchronous Ajax.
 
== Example (Basic) ==


<pre>
<pre>
Rem WaitCursor Example
Rem WaitCursor Example
WaitCursor TRUE
WaitCursor True
Sleep 5000
</pre>
WaitCursor FALSE
Show WaitCursor while processing
<pre>
Rem Show WaitCursor while processing
WaitCursor True
SetTimeout(myCalculation,0)
 
Sub myCalculation()
  For i=1 To 500000
  Next
  WaitCursor False
End Sub
 
</pre>
 
== Example (JavaScript) ==
<pre>
// Cursor Example with Delay
 
sleep=function(ms) {
  //used for delay to avoid loop that uses up CPU
  var caller = sleep.caller;
  if (caller.sleepTimer) {
    delete caller.sleepTimer;
    return true;
  }
  caller.sleepTimer = window.setTimeout (function () {
    caller.apply ([]);
  },ms);
  return false;
}
 
delayPostProcessing=function(ms) {
  /* if you need a delayed response, put all post processing in this function
  * anything outside this function will execute prior to the delay even if it
  * comes after calling this function */
 
  document.body.style.cursor = 'wait'; //busy style cursor during delay
  NSB.Print("Cursor changed to busy");
  if (!sleep (ms)) return;
  document.body.style.cursor = ''; //normal cursor
  NSB.Print("Cursor restored to normal");
  NSB.Print("Continue processing inside the wrapper after delay");
  NSB.Print("... and continue processing inside the wrapper");
}
 
preProcessing=function() {
  //do your pre-processing before delay here
  var delayMS=5000; //5000 ms equates to 5 seconds
  NSB.Print("After processing this line, cause delay of " + (delayMS/1000).toString() + " seconds");
  delayPostProcessing(delayMS); //force delay now
  NSB.Print("This line ignores the delay");
}
 
preProcessing(); //this runs all code prior to the delay
NSB.Print("This line ignores the delay also");
 
</pre>
</pre>



Revision as of 20:31, 31 May 2016

WaitCursor true|false|cursorStyle|filename

Description

Set WaitCursor to true to display a wait cursor. The design of the cursor depends on the browser and whether you are running on a mobile device. Set it to false to turn the WaitCursor off again. The WaitCursor state will change when your app goes into an inactive state. It will not change while your app is processing.

If you are running on a non-touchscreen device, a number of cursorStyles are built in. They are: alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, URL, vertical-text, w-resize, wait, zoom-in, zoom-out, initial, inherit. Call WaitCursor False to hide it again.

You can also give the name of a gif file. You can create your own custom WaitCursors at http://www.ajaxload.info. Remember to also add the name of the file to the manifest. If you give a name, it will display on both touch and non touchscreen devices. Call WaitCursor False to hide it again.

The default wait cursor is a file named ajax-loader.gif. If you are using any jQuery Mobile controls, it is added to your manifest by default. If you are not using jQuery Mobile, add this line to 'manifest' in Project Properties:

nsb/images/ajax-loader.gif

The Waitcursor will only take effect when your app pauses processing. If you set it just before a hard loop or a synchronous Ajax call, it will not be invoked until that operation finishes. Use SetTimeout to start the hard loop or asynchronous Ajax.

Example (Basic)

Rem WaitCursor Example
WaitCursor True

Show WaitCursor while processing

Rem Show WaitCursor while processing
WaitCursor True
SetTimeout(myCalculation,0)

Sub myCalculation()
  For i=1 To 500000
  Next
  WaitCursor False
End Sub

Example (JavaScript)

// Cursor Example with Delay

sleep=function(ms) {
  //used for delay to avoid loop that uses up CPU
  var caller = sleep.caller;
  if (caller.sleepTimer) { 
    delete caller.sleepTimer;
    return true;
  }
  caller.sleepTimer = window.setTimeout (function () {
    caller.apply ([]);
  },ms);
  return false;
}

delayPostProcessing=function(ms) {
  /* if you need a delayed response, put all post processing in this function
   * anything outside this function will execute prior to the delay even if it
   * comes after calling this function */

  document.body.style.cursor = 'wait'; //busy style cursor during delay
  NSB.Print("Cursor changed to busy");
  if (!sleep (ms)) return;
  document.body.style.cursor = ''; //normal cursor
  NSB.Print("Cursor restored to normal");
  NSB.Print("Continue processing inside the wrapper after delay");
  NSB.Print("... and continue processing inside the wrapper");
}

preProcessing=function() {
  //do your pre-processing before delay here
  var delayMS=5000; //5000 ms equates to 5 seconds
  NSB.Print("After processing this line, cause delay of " + (delayMS/1000).toString() + " seconds");
  delayPostProcessing(delayMS); //force delay now
  NSB.Print("This line ignores the delay");
}

preProcessing(); //this runs all code prior to the delay
NSB.Print("This line ignores the delay also");

Output