O4W is a useful web framework for OpenInsight programmers by abstracting web technologies and them into OpenInsight in a way that is familiar to OpenInsight developers. This is great if you are inside of OpenInsight looking out to unfamiliar things like JavaScript and HTML5 but when you're familiar with web technologies and on the outside looking into OpenInsight the O4W framework can seem limiting due to the abstraction. This is the first of several blog articles designed to help bridge the gap between standard web technologies (Query, JavaScript, HTML5) and OpenInsight O4W by showing you how to leverage standard web technologies in O4W. Since O4W is based on jQuery the first example will be constructing a basic jQuery plugin for use in O4W.

Prerequisites

To follow along with this blog article you'll need a working OpenInsight system configured for O4W. A basic understanding of jQuery is helpful but not required.

Binding a Custom jQuery Plugin to and O4W Control

The example code below walks through adding a custom jQuery plugin to your O4W installation and then modifying an existing O4W routine to utilize it. The plugin simply posts an alert in the browser when the control it is bound to is clicked. After the alert closes the existing O4W event handler runs the associated OpenInsight code click event.

1. Copy the following code into your OpenInsight system and register it for use with O4W. This is the example routine which will be modified for use with the plugin. You can run this routine as is to see the results before we modify it. Assuming your O4W development system is local you can run the routine by accessing http://localhost/o4w/oecgi3.exe/O4W_CS_TEST_DIALOG_HELLO_WORLD
   

   Subroutine O4W_CS_TEST_DIALOG_HELLO_WORLD(CtrlEntId, Event, Request)
   
   $Insert O4WEquates
   $Insert O4WCommon
   
   BEGIN Case
   	CASE EVENT _EQC "CREATE"
   		
   		O4WForm()
   		O4WHeader("Hello World Example")
   				
   		O4WSectionStart("mainSection")
   		O4WText("Hello world example. Click the button to see the greeting.")
   		O4WBreak()
   		O4WButton("Hello World", "BTN_HELLO_WORLD")
   		O4WQualifyEvent("BTN_HELLO_WORLD", "CLICK")		
   		
   		O4WSectionEnd("mainSection")
   		
   		O4WSectionStart('DialogSection')
   		O4WSectionEnd('DialogSection')
   			
   	CASE EVENT _EQC "CLICK"
   	
   		Begin Case
   				Case ctrlentid _eqc 'BTN_HELLO_WORLD'
   				
   					
   					O4WSectionStart('DialogSection', O4WResponseOptions())
   					O4WText("Nice to meet you.")
   					O4WBreak()
   					O4WButton('OK','DIALOG_OK_BTN')
   					O4WQualifyeVENT('DIALOG_OK_BTN','CLICK') ;
   					O4WSectionEnd('DialogSection')
   								
   					O4WDialog('DialogSection', 'Hello World')
   					
   				Case ctrlentid _eqc 'DIALOG_OK_BTN'
   					O4WDialog('DialogSection')
   
   		End Case
   		
   END Case
   
   RETURN 0
   

2. Copy the following code into a file named jquery.sayhello.js and place it in a new folder named o4w\plugins\sayhello under your OpenInsight directory.
   
3. Modify the O4W_CS_TEST_DIALOG_HELLO_WORLD routine to include the jQuery plugin during the create event handler.
   

   CASE EVENT _EQC "CREATE"
   	//Include the plugin for use in this routine
   	O4WScript("/o4w/plugins/sayhello/jquery.sayhello.js")
   	O4WForm()

4. Lastly we need to add code to bind the plugin to the button. Add this code after the O4WQualifyEvent function of the button.
   

   O4WButton("Hello World", "BTN_HELLO_WORLD")
   O4WQualifyEvent("BTN_HELLO_WORLD", "CLICK")		
   //Bind the sayhello plugin to the button
   O4WPlugin("BTN_HELLO_WORLD", "sayhello", "") 

5. Be sure to re-start your engine server for the changes to be reloaded.

Here is a complete copy of the stored procedure with the required modifications.

Subroutine O4W_CS_TEST_DIALOG_HELLO_WORLD(CtrlEntId, Event, Request)

$Insert O4WEquates
$Insert O4WCommon

BEGIN Case
	CASE EVENT _EQC "CREATE"
		//Include the plugin for use in this routine
		O4WScript("/o4w/plugins/sayhello/jquery.sayhello.js")
		O4WForm()
		O4WHeader("Hello World Example")
				
		O4WSectionStart("mainSection")
		O4WText("Hello world example. Click the button to see the greeting.")
		O4WBreak()
		O4WButton("Hello World", "BTN_HELLO_WORLD")
		O4WQualifyEvent("BTN_HELLO_WORLD", "CLICK")		
		//Bind the sayhello plugin to the button
		O4WPlugin("BTN_HELLO_WORLD", "sayhello", "") 
		O4WSectionEnd("mainSection")
		
		O4WSectionStart('DialogSection')
		O4WSectionEnd('DialogSection')
			
	CASE EVENT _EQC "CLICK"
	
		Begin Case
				Case ctrlentid _eqc 'BTN_HELLO_WORLD'
				
					
					O4WSectionStart('DialogSection', O4WResponseOptions())
					O4WText("Nice to meet you.")
					O4WBreak()
					O4WButton('OK','DIALOG_OK_BTN')
					O4WQualifyeVENT('DIALOG_OK_BTN','CLICK') ;
					O4WSectionEnd('DialogSection')
								
					O4WDialog('DialogSection', 'Hello World')
					
				Case ctrlentid _eqc 'DIALOG_OK_BTN'
					O4WDialog('DialogSection')

		End Case
		
END Case

RETURN 0

Result

When clicking the 'Hello World' button the jQuery plugin will first execute the client side JavaScript code and display an alert message.

After the alert is closed the next event handler will run which makes an ajax call back to OpenInsight to run the click event code which displays the normal response.

This is a very simple example showing a simple jQuery plugin, how to load it into OpenInsight, and access it from your code. From here we can expand to more sophisticated examples in upcoming articles.