Binding Custom JavaScript to O4W Controls

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.

heyaexample.png

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.

 

Share this post

Leave a comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

About Us

Congruity Service is a technology solutions company bringing the best technology solutions to OpenInsight projects, Drupal sites, servers, networks, and your technology needs.