Focal Point
[SOLVED] JavaScript/jQuery for Dummies

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/2897047476

February 16, 2015, 03:17 PM
Joel Elscott
[SOLVED] JavaScript/jQuery for Dummies
I’m trying to wrap my head around how to incorporate JavaScript and/or jQuery into WebFOCUS, and after reading through dozens of threads I think I’m getting more confused. In many of threads I’m seeing coding examples of where there is both HTML code and jQuery included. My company has given us the direction to use the WebFOCUS UI tools as much as possible, but incorporating some custom style sheets or JS is acceptable. Basically I need to use the HTML Composer tool, and not freehand HTML.

So the following questions come to mind. Please note that I’m very much a novice and trying to learn.

1 – Is the jQuery JavaScript library installed by default? Do I need to reference anything when using the commands?
2 – Where should the JavaScript be coded? In the embedded JavaScript tab of composer? In the fex?
3 – What is the purpose of including “-HTMLFORM BEGIN” code in a fex? Is it required?
4 – Are there any simple examples for me to take a look at to learn these concepts?
5 – Suggested websites or documents to further my learning?

I really appreciate any help you can provide, even if it’s to point me in the right direction.

Joel Elscott
WebFOCUS 8.0.08

This message has been edited. Last edited by: <Kathryn Henning>,
February 16, 2015, 04:03 PM
Mike in DeLand
I would love to see the answer to those same questions!


Webfocus 8
Windows, Linux
February 17, 2015, 02:53 AM
Dave
Let me try...

1.
Javascript is always available. It's embedded and supported by all browsers. If it isn't, WebFocus wouldn't work either.
JQuery is an extention to javascript and needs to be installed and/or referenced.

2.
Javascript works on the client browser. So you should add it to anything that ends up in browser. HTML obviously, but it could also be embedded in fex ( see answer 3 ).
If you want javascript to help improve the HTML file ( e.g. input validation ) you could/should use "embedded JavaScript tab" (*WF8).

3.
This can be used to direct create HTML from within a fex.

4.
-SET &SAMPLEPARAMETER = 'Hello, world!';

TABLE FILE CAR
	SUM SALES
	BY	COUNTRY
ON TABLE HOLD AS SAMPLEHOLD FORMAT HTMTABLE
END

-HTMLFORM BEGIN
<html>
<body>
<b>!IBI.AMP.SAMPLEPARAMETER;</b><br>
<hr>
!IBI.FIL.SAMPLEHOLD;
<hr>
</body>
</html>
-HTMLFORM END



...and with embedded javascript code:
-SET &SAMPLEPARAMETER = 'Hello, world!';

TABLE FILE CAR
	SUM SALES
	BY	COUNTRY
ON TABLE HOLD AS SAMPLEHOLD FORMAT HTMTABLE
END

-HTMLFORM BEGIN
<html>
<head>
<script>
alert('javascript says: hello world!');
</script>
</head>
<body>
<b>!IBI.AMP.SAMPLEPARAMETER;</b><br>
<hr>
!IBI.FIL.SAMPLEHOLD;
<hr>
</body>
</html>
-HTMLFORM END


5.
If you want to learn javascript go to http://www.w3schools.com/js/



Hope this helps.
Greets,
Dave


_____________________
WF: 8.0.0.9 > going 8.2.0.5
February 17, 2015, 09:28 AM
BarryS
Hi

jQuery is imported and used by App Studio the calendar control is jQuery. jQuery is just javaScript code that is prewritten for you to use and can be applied to any control an HTML Composer page. You put the code in the embedded JavaScript text area. First learn the webFOCUS Coding and the HTML Composer tool before you venture out into jQuery land.

HTMLFORM is a way to add HTML/JavaScript to a report. When using HTML Format the report is written using HTML and you can use HTMLFORM to customize the look and feel as well as functionality.

Good luck learning all this stuff. IBI has courses and there are a lot of books on jQuery.

Happy coding.

Thanks Barry,


WebFOCUS 8103, Windows, App Studio
February 17, 2015, 09:41 AM
dhagen
quote:
Originally posted by Joel Elscott:

3 – What is the purpose of including “-HTMLFORM BEGIN” code in a fex? Is it required?



I know I will get into a bunch of trouble with the online community for this, but you should ignore this code ... pretend you never saw it. If forces your report developers to be HTML coders as well, and it makes support of the resulting code a lot harder. I hate this so much, that I will not allow anyone working for me to use it.


"There is no limit to what you can achieve ... if you don’t care who gets the credit." Roger Abbott
February 17, 2015, 12:32 PM
Francis Mariani
The jQuery and jQuery UI libraries are automatically installed when WebFOCUS 8.x is installed.

The jQuery and jQuery UI libraries are automatically referenced in your HTML file if you use App Studio HTML Composer GUI to build your HTML pages.

The installed versions of jQuery and jQuery UI aren't the latest, but they will do...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
February 17, 2015, 10:17 PM
David Briars
Hi Joel,

It was great meeting you in class a while back.

Just some thoughts that come to mind, while reviewing your post and great question list...

Basically the browser is looking for/ready to interpret the following code:
1. HTML, for Page Structure
2. CSS, for Styling
3. JavaScript, for Behaviors

The browser doesn’t know/care how this code created, only that it can be rendered.

jQuery is a JavaScript library that supports coding web page behavior with more compact/easier to write and understand code, as compared to JavaScript. (‘j’ is for JavaScript, ‘query’ is for the ‘asking’ you do, for information related to the page.)

Two basic ways WebFOCUS developers can create the HTML/CSS/JavaScript code that the browser is willing and able to render:
1. HTML Composer (GUI Tool)
2. Coding within a focexec, using the -HTMLFORM construct.

Both of these methodologies have something very important in common. They each harness and leverage the power of the WebFOCUS reporting/visualization language (TABLE FILE… GRAPH FILE…).

(To add to the fun, TABLE and GRAPH, can be written with a WF GUI Tool or coded within a focexec. :-))

List of considerations when choosing between the two, that I have used. (There are others.):
1. User requirements.
2. Current level of staff expertise in HTML Composer/HTML/CSS/JavaScript.
3. Career goals of staff... Do they want to learn more about coding? Do they want to learn more about using GUI tools?
4. IT Standards... GUI Tools only? Coding only? Hybrid? Best tool for the job at hand?
5. Current installed WebFOCUS release.

In practice I’ve built web page with both, and have obtained excellent results with each, that have solved problems and made users happy.

The IB manuals are my primary source of examples of both methodologies. I then supplement with FocalPoint, internet searches, and (ok I admit it) books. I am currently reading ‘Head First jQuery’ and am finding it enjoyable as well as educational.

Good luck!

Regards,
Dave
February 18, 2015, 08:59 AM
Joel Elscott
Thank you all so much for your responses! This gives me a good starting spot to learn.


WebFOCUS 8.2.03
z/OS
February 18, 2015, 10:21 AM
Anatess
quote:
Originally posted by dhagen:
quote:
Originally posted by Joel Elscott:

3 – What is the purpose of including “-HTMLFORM BEGIN” code in a fex? Is it required?



I know I will get into a bunch of trouble with the online community for this, but you should ignore this code ... pretend you never saw it. If forces your report developers to be HTML coders as well, and it makes support of the resulting code a lot harder. I hate this so much, that I will not allow anyone working for me to use it.


I understand your position on this.

For most of us Webfocus Developers we're both Report Coders and Web developers so we use
-HTMLFORM
so we can use FocExec and Dialogue Manager to have the flexibility to manipulate the HTML using report conditions.

But yeah, you can definitely run robust applications without it.


WF 8.1.05 Windows