IBM i Modernization - The User Interface
(Part 4)
Learning browser technologies (i.e. HTML, Style Sheets (CSS), and JavaScript) is cited as a hurdle for traditional IBM i developers. Some vendors promise to bridge the gap by providing tools that don't require developers to learn (HTML, etc.). That can be a disservice.
Knowledge and skills with browser technologies is within the grasp of IBM i developers (speaking from personal experience). And learning them opens the world of web development.
The objective of this piece is to highlight key aspects of browser technologies, to review an example, and provide a basis for an application that IBM i developers should be able to relate to. Part 5 builds on this foundation, by introducing the topic of how browsers might interact with an IBM i server.
I'd like people to understand that even basic skills can be highly effective and personally enabling. People who master these skills rarely feel constrained by browser user interfaces. You can accomplish just about any UI design objective. This article will demonstrate some of the key points that I raised in Parts 1-3 in this series.
Learning Resources
The key take-away from this section is that resources for learning, writing, and debugging HTML, style sheets (CSS), and JavaScript are plentiful and readily available. Every learner can find resources suited to their needs.
Find them using browser search engines and asking people you know. Technical forums (i.e. Midrange Lists can refer you to learning resources).
A favorite resource is W3Schools. Also, code editors that support prompting and auto-completion are handy when learning and writing code.
Web browsers include developer tools that are used for precise pin-pointing (inspecting) the visual appearance (styling) of HTML elements. They enable visual properties to be changed on the fly. Google Chrome has a tool that shows the appearance in various screen sizes and resolutions. JavaScript debugging is included.
HTML Basics
HTML is generally composed of "text", "images", and other "objects" that are enclosed within beginning and ending "tags". Tags are words and highly-abbreviated character expressions that are prefixed by a less-than sign and end with a greater-than sign (i.e. <div>...</div>).
Tags have default properties that modify the appearance and behavior of whatever they encapsulate. A good HTML tag reference will delineate the purpose, attributes, and event listeners that might pertain to each.
An HTML "page", also known as a "document" begins and ends with <html>...</html>. Enclosed within that beginning and ending, you might include any number of other elements that would be wrapped in their own respective beginning and ending tags.
HTML is relevant to application modernization because it:
- Is a recognized standard.
- Is used ubiquitously.
- Is adhered to in all current browsers.
- Is the most efficient way to render a UI in a browser.
- Offers the best UI performance.
When a browser receives an HTML page, all tags are parsed and used to instantiate page elements in a container known as the "document object model (DOM)". The DOM contains objects that generally have a visual representation. DOM objects have parent, child, and sibling relationships that follow the hierarchy delineated in the HTML markup.
It helps a lot for developers to use browser developer tools to inspect the hierarchy and contents of the DOM after pages are rendered (right click on a page to see what tool options might appear). This gives you an inside perspective of what causes the UI to look and behave the way it does. It gives you ideas of how object attributes might be modified and extended in order to change their appearance and behavior.
An effective development technique is to use an HTML editor that assists with code completion and prompting, then preview the page in the browser, then use browser developer tools to inspect element attributes and hierarchical structure.
A basic template for an HTML page might go as follows (notice beginning and ending tags):
<html>
<head>
<link href="ibmiui.css" rel="stylesheet">
<title>IBM i Page</title>
</head>
<body>
</body>
<script>
</script>
</html>
CSS Basics
In addition to the default appearance of HTML tags, an extensive list of attributes can be applied to HTML elements that further modify their look and feel. The best way to do this is to create an external text file known as a "cascading style sheet", which by convention has a (.css) extension. CSS files contain named objects that in turn contain named attribute-value pairs that define the look and feel of DOM objects.
HTML tags have a corresponding attribute named "class" that can be assigned one or more names that reference one or more objects in one or more style sheets. Over time the default look and feel of HTML tags has become less relevant as CSS standards have been extended, and as browsers have added support for animation and such via common CSS extensions.
Use Case
This section includes a series of dialog panels that prompt users to respond to an "IBM i Marketplace Survey". This is an example of an interactive application embedded in a single HTML page.
It shows what might be done with HTML, CSS, and a small amount of JavaScript. Implementation details will be delineated in subsequent sections. In my next article, I intend on extending this example to include interactions with an IBM i server. Please try it!
How Does It Work?
The survey consists of a series of HTML <table> elements such as:
<table class="dialog" cellpadding="10" id="step0">
<tr>
<td height="40" align="center"><h3 class="header">Welcome to the IBM i Marketplace Survey</h3></td>
</tr>
<tr>
<td>Participating in this survey allows everyone to gauge trends in the IBM i marketplace. Click the <em>"Start"</em> button to begin. Thank you for your input.</td>
</tr>
<tr>
<td height="40" align="center"><button class="next" onClick="dostep(1)">Start</button></td>
</tr>
</table>
Basic formatting is provided by row, cell, and other HTML elements. Extended formatting is provided by "class=" references to style objects that are defined in an external CSS file.
Consider how the default look and feel of HTML <button> elements are modified by CSS:
button.next {
height:40;
width:98;
border-radius:25px;
border:none;
background-color:#1e7d41;
color:white;
font-size:.96em;
font-weight:bold;
text-align:center;
cursor:pointer;
margin-left:10;
}
button.next:hover {
box-shadow:2px 2px 2px #1e7d41;
}
The look and feel of "next" buttons are extended as follows:
- Height and width are set in pixels.
- Shape is changed to an ellipse (border-radius).
- Border line is removed.
- Background and text colors are set.
- Font characteristics are set.
- Text is center aligned.
- White space is inserted in the left margin.
- A slight animation is triggered by a mouse hover event.
Interaction and Functionality
A JavaScript function named dostep() is referenced by an "onClick=" event listener that is attached to <button> elements.
<button class="next" onClick="dostep(-1)">Back</button>
<button class="next" onClick="dostep(1)">Next</button>
<script> tags are used to reference JavaScript code in HTML pages, including references to external JavaScript files.
<script>
var step = 0;
var maxstep = 5;
function dostep(n) {
var o = document.getElementById('step' + step.toString());
o.className = 'ph';
step = step + n;
if (step < 0 || step > maxstep) step = 0;
o = document.getElementById('step' + step.toString());
o.className = 'dialog';
}
</script>
dostep() behavior is implemented by retrieving an object reference (o) to dialog panels and toggling their visibility on or off, via class name assignments ("ph" and "dialog").
A Tip
When you view the HTML, CSS, and JavaScript source behind pages at some of your favorite web sites - the complexity or seeming lack of order may be discouraging. A lot of web pages are overly engineered. Like any kind of software, the code can end up like a big ball of mud. It's important to apply appropriate design principles such as separation of concerns. Use external JavaScript files. Use external CSS files. Keep it simple.
Summary
Attractive styling can be applied to HTML elements via "class" names referenced in external style sheets. A single style sheet can be shared by any number of applications, which is a best practice.
A relatively small amount of JavaScript can implement interactive behaviors in browsers without having to involve servers. However, as we'll learn in the next article, some background asynchronous communication with an IBM i server can easily extend functionality.
A nearly ideal balance of code and functionality can exist between browsers and IBM i servers by beginning with a set of building blocks such as those introduced here.
Continued in Part 5.