What should you, as an RPG programmer, know about jQuery?
For a very long time, I've been writing about jQuery, and some of you might wonder why on earth I keep "preaching" about this. I'll tell you why. Based on the email I get about my articles, the user group meetings I attend, and the programmers I work with on a daily basis, I really think jQuery is the medicine that can save us from being one of those old green-screen programmers who just sits there in the back, writing batch programs for our beloved IBM i.
It's no secret that I spend most of my time writing PHP, HTML, and jQuery/JavaScript, but just the other day I did a subfile program, and it was like coming home. RPG is such a great language, but DDS sucks—well, it gets the job done, and you can do good things with RTNCSRLOC, WDWTITLE, and ENTFLDATR, but whatever keyword you pick to spice up the DDS interface, it will never beat the onClick, onFocus, and similar JavaScript events.
So I keep talking about jQuery because it, combined with RPG or PHP, gives the users that little extra flavor that makes them feel that your application is just a bit better; it leaves them with the feeling that this old dog really can learn some new tricks.
This series of TechTips will show you some basic jQuery stuff that at first glance might seem very basic, but combined with your knowledge of RPG, it will give you a powerful tool pointing to the future.
jQuery Selectors
When you want to manipulate one or more HTML elements on a Web page using jQuery, you do it by using a selector. A jQuery selector is one of the most important parts of the jQuery library, and it's therefore vital that you understand it.
All types of selectors in jQuery start with the dollar sign and parentheses, like this: $().
Below I have listed the selectors I use the most in my daily work:
- $(this)—The current HTML element
- $(".myClass")—Selects all elements with class="myClass"
- $("#myID")—Selects the first element with id="myID"
There are of course a lot more, but these will sure get you started.
Some Examples
I will now start showing some examples. The examples are not necessarily very useful and are not supposed to be, but they serve the purpose of showing you how you can do things on a Web page.
Example 1: Reading the Content of an Input Field When Clicking a Button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd value="
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Get the jQuery library -->
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script>
//===========================================================================
// jQuery loaded
//===========================================================================
$(document).ready(function() {
a)
$("#myButton1").click(function() {
var myValue = $("#myInput").val()
$("#myOutput").val( myValue + ' (1)');
});
b)
$("#myButton2").click(function() {
$("#myOutput").val( $("#myInput").val() + ' (2)');
});
c)
// When placing the cursor in the input field select all text and save it in the saveText container
$("#myInput").focus(function() {
var myValue = $("#myInput").val();
// Save it in <div> container
$("#saveText").append( myValue + '<br>' ) ;
// Clear input field
$("#myInput").val('');
});
});
</script>
</head>
<body>
<b>Reading the content of an input field when clicking a button</b>
<hr>
d)
Enter some text: <input id="myInput" type="text" size="40" value="Enter some text">
<hr>
e)
<input type="button" id="myButton1" value="Get Text (1)">
<input type="button" id="myButton2" value="Get Text (2)">
<hr>
f)
Output<br>
<input readonly id="myOutput" type="text" size="60" style="border: 1px solid #999999">
<hr>
g)
<div id="saveText"></div>
</body>
</html>
In this first example, I have listed all the code just to give you an idea what happens. In the following examples, I will not list the code because of the lack of space. But each one has a link you can click to see the example in action and a short description of what the example does. Then, just right-click on the example page and select Source to see all the code. At the end of the TechTip, you can download a zip file that contains all the examples.
So here's what happens in example 1.
a)
Bind the click event to the button named "myButton1". This means that when you click the button, the code inside the function will be executed.
To address the ID of the input field named "myInput" by using the ID-selector, the program will use the .val() function to retrieve the input of the field and save it in a variable named "myValue". It will then use the ID-selector named "myOutput" and the .val function to write the retrieved content into the myOutput field.
To show you which button was clicked, the constant (1) will be added to the end of the data.
b)
When you click "myButton2", the same happens as when clicking "myButton1", but instead of using a variable, the selectors are merged into each other. The result is the same, and the reason I show you the two examples is that despite the fact that the click on "myButton2" saves a variable, the code very often gets hard to read and hard to debug if any of those parentheses or brackets gets mixed up. So my preferred method is the one shown at a), but of course it's up to you.
c)
Here, I made a little logging feature mainly to show just how easily you can do things in jQuery.
What the .focus function does is the following:
When the field is focused, retreive the content.
Append it to a div container using the .append function.
Clear the input field.
d)
Define the input field with id "myInput".
e)
Define the buttons to handle the text.
f)
Define the output field with id "myOutput" and with a delicate little touch of CSS.
g)
The div container holds the text from the input field when the .focus event is fired.
As you can see, not much code is required to do all this stuff because everything is hidden away inside the jQuery library.
So let's move on to some more examples.
Example 2: Using a Class Selector to Manipulate Buttons and Text
In this example, I show you how a simple mouse-click can change the whole look of a Web page by using a class selector and some CSS classes. The jQuery .addClass and .removeClass functions are used to handle the layout. Also note that the buttons defined with <input> and <button> have to be handled a little differently to accomplish the same effect.
Example 3: Reversing Background Color and Font Size Using Odd/Even Selector
This example shows how to use the even/odd selector to change the background color of the <tr> element within a <table>. By clicking a button, that background color will be set, and another button will reverse the colors.
Summary
This is the first TechTip in my jQuery fundamentals series, and I hope it raises an eyebrow in an office somewhere.
I will keep writing about jQuery in the near future, and you will be presented with things like CallBack functions, ways to save data on the fly using AJAX, and much more. So stay tuned, and give jQuery a chance to prove its value in your everyday programming life.
If you want to download the examples, click here or here.
Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.
IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn:
LATEST COMMENTS
MC Press Online