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
Benefits of using jQuery
VISUALISATION
• Improves user productivity
• Animation without downloading any plug-ins like Flash
• Interactive
Benefits of using jQuery
PERFORMANCE
• Filter multiple reports with a single click
• Run multiple reports using AJAX without reloading page
• View real-time data
Benefits of using jQuery
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
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
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
<!-- Within WF8, these JS and CSS Libraries are installed as standard -->
<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
function drillto(fex, country, title) {
if ($("#divdrill")) {closeit();}
// Build the div collection that will house the drill down report
var myhtml = "<div id='divdrill‘><div id='hdrdrill'><span>"+title+"</span>";
myhtml += "<div id='btndrill' onclick='closeit();'></div></div>”;
myhtml += "<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();
}
</script>
Focal Point – Drilldown using jQuery
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>
Focal Point – Drilldown using jQuery
<!-- Within WF8, these JS and CSS Libraries are installed as standard -->
<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" />
<!--
This is thejQuery that is executed on drildown click
All it does is to remove the drilldown div (in case it already exists)
and then create an outer div containing 3 inner divs, 2 for the heading
and 1 for the drill down report content.
The 2 heading divs contain the title plus the image for closing the pop-up.
-->
<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
Focal Point – Drilldown using jQuery
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