best of webfocus - information · pdf filebest of webfocus jquery and ajax technologies...

Best of WebFOCUS

jQuery and AJAX Technologies

Anthony Alsford Senior WebFOCUS Consultant Professional Services Information Builders (UK) Limited

Introduction

• Joined IB (UK) 4 ½ years ago

• Prior to that, contracted for 17 years

• Using IB products since 1987

• Regular contributor to Focal Point

What is jQuery?

• jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Benefits of using jQuery

DEVELOPMENT

• Open Source

• Easy to use and easy to understand

• Never make changes to jquery.js

• It does not require advanced programming skills

• Refer to jQuery documents how to call functions


VISUALISATION

• Improves user productivity

• Animation without downloading any plug-ins like Flash

• Interactive


PERFORMANCE

• Filter multiple reports with a single click

• Run multiple reports using AJAX without reloading page

• View real-time data


COMPATIBILITY

• Works with all browsers

• Runs on mobile and tablet browsers

Note: If it doesn’t show up properly then it’s probably the CSS not jQuery

Where can I learn jQuery?

• From the jQuery official website

– http://learn.jquery.com/

• Or the w3schools site

– http://www.w3schools.com/jquery/default.asp

http://learn.jquery.com/

http://www.w3schools.com/jquery/default.asp

What do I need to run jQuery?

• If you have a WebFOCUS 8 version then nothing as it is installed alongside WebFOCUS.

– Current level (WF8.0.08) is Version 1.7

• You can download the latest version from

– http://jquery.com

– Current level 1.11.1 or 2.1.1

http://jquery.com/

What components are installed?

• WebFOCUS 8.0.08

– accessible via /ibi_apps/ibi_html/javaassist/jquery

• jquery_min.js

• jquery_mobile_min.js

• jquery_mobile_min.css

– accessible via /ibi_apps/jquery

• jquery-ui.min.js

• jquery-ui.css

• plus others to use as your experience develops or needs arise

jQuery Construction

• Use $ to instantiate a jQuery call

– e.g. $(selector).action();

• Uses selectors to identify DOM elements

– $(document).action();

– $(“elementname”).action(); e.g. $(“body”).action();

– $(this).action();

– $(“#elementid”).action();

– $(“.classname”).action();

• Note: you can also use jQuery(document).action();

Including jQuery in HTML Composer

• In App Studio, jQuery is ready loaded for you

• In Dev Studio, you need to add the library yourself. – Create a new HTML file.

– Add link to jQuery via “Insert / CSS/Scripts” menu.

– Reference via /ibi_apps/ibi_html/javaassist/jquery/jquery_min.js.

– Before you add components, save and edit using text editor.

– Move the link to before the window_onload() function.

– Change the syntax to “src=../ibi_apps/ibi_html/ja....”

– Save, but you will always be notified that the file has been edited manually from this point.

Including jQuery in HTML Composer

• .... Or .... //Begin function window_onload

function window_onload() {

loadjQuery();

UpdateData();

// TODO: Add your event handler code here

//add onInitialUpdate() function to make changes before initial run of the reports

$(document).ready(function() {

alert("Hello World");

});

}

//End function window_onload

function loadjQuery() {

var element = document.createElement('script');

element.async = false;

element.src = '/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js';

element.type = 'text/javascript';

(document.getElementsByTagName('head')[0]||document.body).appendChild(element);

}

Using in a procedure

• Use –HTMLFORM BEGIN and END

• Allows dynamic build using dialogue manager

• Variables are available to use

Dynamically adding an element or 2

• -HTMLFORM BEGIN • <!DOCTYPE html> • <head> • <script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js"></script> • <script> • $(document).ready(function() { • var myhtml = "<div id='divnum_1'></div>"; • $("body").append(myhtml); • $("#divnum_1").html("Hello World"); • }); • </script> • </head> • <body style="overflow: hidden;"> • </body> • </html> • -HTMLFORM END

jQuery Questions

What is AJAX?

• Asynchronous JavaScript And XML

• A group of interrelated Web development techniques used on the client-side to create asynchronous Web applications.

• With Ajax, Web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behaviour of the existing page.

Brief History of AJAX

• 1996 - the iframe tag was introduced – First asynchronous implementation

• 1998 - first implementation of XMLHTTP component – using client script in MS Outlook

• 1999 – IE(5), followed by other browsers harness XMLHTTP – plus XMLHttpRequest in JavaScript

• 2005 - The term "Ajax" was publicly stated on 18 February by Jesse James Garrett

• 2006 - On 5 April, the World Wide Web Consortium (W3C) released the first draft specification for the XMLHttpRequest object in an attempt to create an official Web standard

jQuery example of AJAX call

1. <!DOCTYPE html>

2. <head>

3. <script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js”>

4. </script>

5. <script type="text/javascript">

6. $(document).ready(function() {

7. var myhtml = "<div id='divnum_1'></div>";

8. $("body").append(myhtml);

9. var _ajaxurl = "/ibi_apps/WFServlet?IBIAPP_app=ibisamp";

10. _ajaxurl += "&|IBIF_ex=carinst.fex";

11. $.get(_ajaxurl, function(data){$("#divnum_1").html(data)});

12.});

13.</script>

14.</head>

15.<body style="overflow: hidden;">

16.</body>

17.</html>

6.Declare function to be executed once DOM is fully loaded. 7. Basic HTML for a div to be added to DOM. 8. Append that DIV to the BODY object. 9. Declare the base URL to be used within the Ajax call 10. ... and add the procedure 11. Execute the Ajax call and push the result into the HTML attribute of the DIV added in step 8.

Very rudimentary example without error checking etc. but this is how simple it can be.

jQuery example of AJAX call

• Historically XML (hence the acronym) – often transformed using XSLT

• XML used by IB to supply data for web control population – manipulated by JavaScript functions to build and append inner HTML

such as <option> etc.

• Essentially can be anything – XML

– HTML

– TEXT

– BLOB • not with jQuery .... Yet! Due in v1.12 allegedly.

• use XMLHTTPRequest in the meantime.

Answerset of an AJAX call

AJAX Questions

<script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js"></script>

<script src="/ibi_apps/jquery/jquery-ui.min.js" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="/ibi_apps/jquery/jquery-ui.css" />

<script type="text/javascript">

// Remove the div collection

function closeit() {

$("#divdrill").remove();

}

Focal Point – Drilldown using jQuery

-DEFAULT &COUNTRY = '_FOC_NULL';

TABLE FILE CAR

SUM SALES

BY COUNTRY

BY CAR

BY MODEL

WHERE COUNTRY EQ '&COUNTRY'

ON TABLE SET STYLESHEET *

TYPE=DATA, COLUMN=COUNTRY, JAVASCRIPT=drillto('CARINST' COUNTRY 'Example Drilldown using jQuery'), $

ENDSTYLE

ON TABLE HOLD AS H001 FORMAT HTMTABLE

END

-RUN

-HTMLFORM BEGIN

<!DOCTYPE html>

<head>

<style type="text/css">

-* I'm using the id of each div to assign CSS

#divdrill {

position: absolute; top: 100px; left: 200px; background-color: #fff; z-index: 100; border: 1px solid;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

#hdrdrill {

background-color: #f00; width: 100%; height: 22px;

-moz-border-top-left-radius: 3px; -moz-border-top-right-radius: 3px;

-webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px;

border-top-left-radius: 3px; border-top-right-radius: 3px;

}

#btndrill {

height: 20px; width: 20px; float: right;

background-image: url(/ibi_html/javaassist/icons/Exit16.gif);

background-repeat :no-repeat;

}

span {

margin-left: 4px;

}

</style>


<script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js"></script>

<script src="/ibi_apps/jquery/jquery-ui.min.js" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="/ibi_apps/jquery/jquery-ui.css" />



<script type="text/javascript">

function drillto(fex, country, title) {

// If the drill down div exists then "close it"

if ($("#divdrill")) {closeit();}

// Build the div collection that will house the drill down report

var myhtml = "<div id='divdrill'>";

myhtml += "<div id='hdrdrill'><span>"+title+"</span>";

myhtml += "<div id='btndrill' onclick='closeit();'></div>";

myhtml += "</div><div id='divnum_1'></div></div>";

// Append the div collection to the document body

$("body").append(myhtml);

// Build the URL required to execute the drill down report

var _ajaxurl = "/ibi_apps/WFServlet?IBIAPP_app=ibisamp";

_ajaxurl += "&|IBIF_ex="+fex+".fex&|COUNTRY="+country;

// and insert the html from the drill down report as the innerHtml

$.get(_ajaxurl, function(data){$("#divnum_1").html(data)});

// This is the "magic" that allows the drill down div to be dragged!

$("#divdrill").draggable();

}

// Remove the div collection

function closeit() {

$("#divdrill").remove();

}

</script>

</head>

<body style="overflow: hidden;">

!IBI.FIL.H001;

</body>

</html>

-HTMLFORM END

Thank you for listening

Example of what can be achieved

• Imagine being able to build a quick dashboard using the following code –

<script>

var _Dashboard = ["Sample Dynamic Dashboard from Array", 0, 0, 100, 7, -1, "app", " ", " ",

"Report 1", 7, 0, 33, 47, 0, "app", "dsh_chartmap1.fex", " ",

"Report 2", 7, 33, 34, 31, 0, "app", "dsh_chart3.fex", " ",

"Report 3 - frame refresh 30 seconds", 7, 67, 33, 31, 0, "app", "dsh_chart4.fex", " ",

"Report 4 - Drill to Iframe", 38, 33, 17, 31, 0, "app", "dsh_chart1.fex", "iframe_6",

"Report 5 - Drill to Modal", 38, 50, 17, 31, 0, "app", "dsh_chart2.fex", "modal",

"Drilldown Target", 38, 67, 33, 31, 0, "app", "../approot/dshbrd_frmwrk/blank.htm", " ",

"Report 7", 54, 0, 33, 46, 0, "app", "dsh_chartmap2.fex", " ",

"Report 8 - Drill to Modal", 69, 33, 34, 31, 0, "app", "dshreport.fex", "modal",

"Report 8 - Drill to Iframe", 69, 67, 33, 31, 0, "app", "dshreport.fex", "iframe_6"];

</script>

Dashboard Array using jQuery

best of webfocus - information · pdf filebest of webfocus jquery and ajax technologies...

Documents