Click to go to the BCD homepage

SIGN UP

August 2007

Customizing WebSmart Templates: A Primer

When you work with WebSmart, one of the most important parts of the tool is the templates. Even if you have no previous experience building CGI or PHP applications, by using the standard WebSmart templates you can create sophisticated, browser-based business applications within a few minutes of installing the software. The programs you create with the templates compile cleanly on the first try, and give you a robust starting point from which to build a wide range of programs and reports. You can then customize your programs with increasing confidence as your knowledge of PML, PHP and/or HTML grows.

But even if we shipped a thousand template families with the software, we wouldn't likely have one that is exactly what you need. For this reason, all our templates have simple layouts that present the data as cleanly as possible. And by using style sheets to control every facet of the appearance and layout, we make it easy for you to create your own custom versions.

In this month's article you will learn the basics of creating your own copies of the WebSmart templates, and how to start making the most commonly required changes. Read more »

In This Issue

 RPG & Beyond Web Conference

RPG & Beyond Web Conference

BCD is sponsoring next month's System iNetwork RPG & Beyond Web Conference. Read more »
    Fort Wayne, IN WebSmart Training

WebSmart Training in Ft. Wayne, IN

A WebSmart Fundamentals class is scheduled for October 22-25. Read more »
 WebSmart White Paper

WebSmart PHP White Paper

Duncan Kenzie has completed a 28 page white paper on PHP and WebSmart. Read more »
    Essential Skills for System i Web Development

Essential Skills for System i Web Development

This new article focuses on server-side programming. Read more »
 Gantt Chart Example Program

Creating Gantt Charts with WebSmart

The latest WebSmart example program is our most ambitious SmartChart to date. Read more »
    BCD Nordic's RONI Site

WebSmart B2B & CRM Site

BCD Nordic has recently completed an extensive consulting project for RONI, a hardware wholesaler. Read more »
 iSeries DevCon

BCD at iSeries DevCon

If you plan to be at the October DevCon in Las Vegas, drop by for a visit. Read more »
    Meet BCD Staff Members

Get to Know BCD: Meet Richard Morgan

Richard is the Clover expert on the WebSmart development team. Read more »
Latest Promo

Latest BCD Promotions

Modernize to the Web Faster & Easier... Free Drawing - Win up to $25,000 in BCD software, Starbucks gift cards and more. Read more »
  

Also in this Issue....

Customizing WebSmart Templates: A Primer

The templates shipped with WebSmart have been designed with straightforward layouts and robust style sheet usage so you can easily use them as the basis of your own designs.

This month's article will walk through the process of making a few simple changes to these standard templates, and in the coming months we'll look at a variety of additional modifications you may want to make.

What Controls how my Programs Look?

Before we embark on an examination of the various design components that make up your program, it's worth emphasizing that with WebSmart you aren't creating static pages you are creating programs. This means that the text, data and HTML delivered to the browser are actually controlled by your PML or PHP code. Ultimately, good applications always start with good coding practices.

So with that proviso noted, we'll now focus on the other elements that affect the 'look' of the web pages that your users will see.

Locating the Key Components

When you first install the software, WebSmart defaults to creating new programs from the templates installed in the folder Program Files/ESDI/WebSmart, on your PC's local drive. These templates include the basic HTML for your programs, and in turn reference style sheets that reside on your iSeries IFS. The style sheets on your server are shared by all the programs created on your system.

Consider this section of HTML:

<html>
 <head>
  <title>Customer List</title>
  <link rel="stylesheet" type="text/css" href="/websmart/v6.5/idaho/css/screen.css" 
  media="screen, tv, projection" />
  <link rel="stylesheet" type="text/css" href="/websmart/v6.5/idaho/css/print.css" 
  media="print" />

This is from the ListHeader portion of a Page at a Time Maintenance program, created with the Idaho template. This template references two style sheets, where the first controls how the program is displayed on a screen, and the second sets print attributes. These style sheets are added to your IFS when you install WebSmart.

The style sheet screen.css in the folder /idaho/ controls almost every aspect of the appearance of the program illustrated below:

A list of customers created using an Idaho template.

To see how this works, just look through some of the HTML for this program:

  <body>
    <div id="headline">
      <div id="logo" title="Logo"></div>
      <div id="title">Display Customer List</div>
    </div>
    <div id="divider"></div>
    <div id="contents">

      <table class="mainlist">
        <tr>
          
         <th width="15">Action</th>
         <th width="7" valign="top">Customer Number</th>          
         <th width="50">Customer Name</th>

Notice the copious use of 'div' tags. With the exception of the individual table columns (the last three rows) where the width is generated by the wizard based on the attributes of the particular field displayed in it, every important element of your page is within labeled divisions or tagged with an ID.

How Does My Program Get the Style Sheets?

Our program is looking for the style sheet "/websmart/v6.5/idaho/css/screen.css". This is within the IFS folder /esdi/, installed at the root of your IFS.

Here is what /esdi/ looks like in Windows Explorer:

Opening the CSS file for all Idaho programs.

You can use WebSmart to open and edit the file screen.css in another tab of your main IDE window (v6.5 and higher).

Two of the elements in the HTML above are the page title and header logo. In screen.css, the lines that relate to the title and logo look like this:

#logo { float: left; width: 86px; height: 60px; background-image: url(../images/pagelogo.gif); background-position: left; }
#title { padding-top:26px; padding-bottom: 10px; font-size:26px; font-family: Georgia, "Times New Roman"; color:#097ABA;}

As you can see, the page division tagged as 'logo' includes the header image used in all Idaho templates, and for the divisions tagged 'title', the style sheet specifies a particular font face, size and color.

How do I Change a Style Sheet?

The first rule in changing the style sheets is this: DO NOT change the style sheets! At least, don't change the standard ones never let yourself forget that these are shared by every program created by any user on your system. So if you change them, you are instantly affecting every existing program you or anyone else has created. Also, the standard set of templates are frequently improved in many software updates and all upgrades, so your changes will be overwritten.

To make a change, start by choosing the 'look' that you want to use as a starting point (Idaho, MacLeod, etc.). Then copy that entire IFS folder. When you do this for the first time, we recommend that you put the copied folder in /esdi/websmart/. If you put in another folder, you may need to change your HTTP server configuration so your program can open the .css file.

For this example, we have made a copy of Idaho and renamed it Yoyo (and a free BCD t-shirt to the first person who emails us the reason why we chose this name):

The pagelogo image in Yoyo.

By using the style sheet to load this image, WebSmart makes it easy for you to update the appearance of all your programs by simply editing the referenced image. So there are two easy ways to change the header logo displayed with the Yoyo stylesheet:

  1. You can create a new image and replace pagelogo.gif.
  2. Or you can change the image reference in screen.css from 'background-image: url(../images/pagelogo.gif);' to something like 'background-image: url(http://bigcompany.com/images/pagelogo.gif);', to reference an image that is already used elsewhere on your company site.

And you can change the appearance of other formats in your program in the same way. Just find the element, note the ID tag, and find that entry in screen.css.

Back to the Program

The final step is to change the style sheet references in your program from 'idaho' to 'yoyo':

<html>
 <head>
  <title>Display Customer List</title>
  <link rel="stylesheet" type="text/css" href="/websmart/v6.5/yoyo/css/screen.css" 
  media="screen, tv, projection" />
  <link rel="stylesheet" type="text/css" href="/websmart/v6.5/yoyo/css/print.css" 
  media="print" />
Regenerate and recompile your program, and presto your program has a new look.

Conclusion - And Looking Forward

In this first tutorial we have identified the key components controlling the appearance of your WebSmart programs. You then saw how to add a new set of style sheets, by copying the IFS folder for one of the shipped template families. Next, by editing either the style sheets directly, or the files they reference (as in the case of the program logo), you can create a new, custom look you can use in your programs. Finally, you can change the style sheet references in any programs that need to have that new look.

So changing your style sheets is a simple and powerful way to update the look of your programs. But some important questions remain:

  • What is the best way to change templates? And where should you change them?
  • What if you need to add more images or objects to the program header, and not just change the ones that are already there?
  • What if you need to make significant structural changes to your pages?
  • What if you want to change the template wizard, to add or remove steps or fields?
We'll look at these questions, and others, in the coming months.

WebSmart Example Programs: Gantt Chart, Header-Detail File Relationship

We have published two more WebSmart example programs this month. Example 134 walks you through the process of setting up a header-detail relationship between two files, in two separate programs. This is a common task, and if you haven't yet written any programs that

Gantt Chart Created with WebSmart & SmartCharts.
do this, the clearly laid out steps in this example will help you along.

Example 135 (illustrated at right) is one of the more complex examples we have created to date. The data illustrated in the graph is read from the text fields shown below it. The data fields are loaded from files on your iSeries, and you can edit the fields on the web page to update both the files and the chart. To build the chart, the program reads the data from the files and generates the required XML.

You can download the iSeries database files we're using in this example from the Download tab, and use them as the basis of your own design. In the example program you can also hover over the fields and text (in the form area) to see brief explanations of how they are used.

If you have any questions about any of the examples posted, please drop a note to Technical Support.

Business Partner Profile: BCD Nordic Completes CRM and B2B site for RONI

SmartChart showing the number of site users.

Customer part selection and preview.

Customer order and purchase confirmation.

Store locator. Clicking on a region of the country displays a list of stores..

BCD Nordic (Denmark) is a long-standing BCD partner offering a comprehensive mix of software, after-sales support and professional services. Olav Christensen, with the assistance of his son, Martin, has recently completed a CRM and B2B project for RONI, a hardware wholesaler. The new site replaces an existing Lotus Notes application, and combines a several important WebSmart features.

RONI carries many different brands from different vendors (the tool makers), and subsequently distributes these to stores. In their application, if you sign in as Salesperson, your are shown your customer's order. It allows you to place mass orders by copying existing ones. There's also a screen to add rebates and it highlights inventory levels with + signs.

Most importantly, stores can sign up to review available items and place orders. Within 3 weeks of going live 240 stores had registered, and a further 120 registered during the following 3-week period (over the holidays there).

The application also features a CRM interface where salespeople can add comments (public or private) and notes about customers, while also being able to review the customer's own comments as well as their order history.

The customer (the hardware stores) log in and review an item list with SQL search, Order Confirmation and History screens displaying the order status (completed, error, sent).

As noted above, this WebSmart application replaces an existing Lotus Notes solution. The WebSmart app has been much more flexible in terms of adding new features, it directly accesses DB2 data, and it does not require any software installed on the PC - all the customers need is a browser.

If you have any questions about this application, please contact Olav Christensen.

RPG and Beyond Conference

BCD is pleased to be sponsoring System iNetwork's 5th Annual RPG & Beyond Web Conference. The conference will take place over 4 days, September 18-19 and 25-26, 2007.

System iNetwork web conferences provide a great opportunity for you to keep on top of the latest trends in the industry, and

educate yourself without the hassle and downtime of travel. Click on the image above to go to the conference home page, to learn more about the sessions that will be offered each day.

WebSmart Fundamentals Training in Ft. Wayne, IN

We have scheduled a 4-day WebSmart Fundamentals public training class the week of October 22-25 in Fort Wayne, Indiana. Fort Wayne is within driving distance of Detroit, Chicago, Columbus, Cincinnati & Indianapolis; so if you are in the area this is an opportunity to minimize your training travel costs.

To sign up for this class or request further information, please fill out our online training request form.

Course Content
The WebSmart Fundamentals class is a comprehensive course that will give you a working knowledge of all the areas you need to be familiar with in order to begin developing applications with WebSmart. The course begins with an introduction to HTML (page structure elements, tables, images and links), then continues on to creating simple WebSmart programs. As you familiarize yourself with the tool, you'll add more features to your application: passing parameters between programs, customizing file access, and then prompting users for input and validating what they enter.

The class concludes with some exercises in securing applications, SQL, WebSmart's Change Management interface and the new interactive debugger integrated into the WebSmart IDE.

WebSmart PHP White Paper

The WebSmart PHP 28-page white paper is now available. This white paper discusses PHP as a technology and how WebSmart PHP leverages that technology on the System i and other platforms to provide you with a highly productive method of transforming legacy applications or creating new web applications.

The document, authored by BCD CTO Duncan Kenzie, also explains what makes PHP so popular, how it is different from other technologies, and how you can develop PHP applications easily with WebSmart PHP

If you have already signed up for information on WebSmart PHP from our website, you will get the white paper shortly. Otherwise, visit our website to request it.

Essential Skills for System i Web Development (Part II)

Duncan Kenzie has recently published the second part of his 'Essential Skills' series of articles in MC Press online. In Part I of this two-part series, he reviewed essential skills for client-side Web development, and in this installment

Web programming is tons of fun, and once you get started on it, you'll never want to see another green-screen again!
he's focusing on server-side programming.

Duncan reviews the type of application tasks that need to be handled with server-side programming, and makes a detailed comparison of the advantages and disadvantages of the various approaches you can choose between. Finally, he draws some conclusions about which solution makes the most sense for the current capabilities of the System i.

If you have any questions or comments about this article, you can add your comments directly online.

BCD at October iSeries DevCon

The next iSeries DevCon will be held October 29-31 in Las Vegas. You can visit their website for an overview of the various tracks and sessions you can sign up for.

iSeries DevCon

If you plan to attend look for BCD's booth, where we'll be happy to show you what's cooking in our labs these days.

BCD Staff Profile: Richard Morgan (WebSmart Developer)

Richard Morgan is a member of the WebSmart development team, where he has been particularly instrumental in the creation of Clover, WebSmart's report-generating cousin. Richard was primarily responsible for designing the Clover wizard and other features

BCD Staff Photo
related to the IDE.

Richard came to ESDI in 2004 after spending 3 years in the steamy jungles of Panama, where he'd been on a church mission stint with his family.

Originally from Wales, where he completed his studies in Business Information Systems, Richard had previously worked in companies on both sides of the water. One highlight was a job at an Ontario company where he did some coding on the software side of an electrophysiology (an amazing medical procedure!) system, tackling projects like capturing and storing streaming data output from a 3D representation of a patient's heart.

Richard now lives a short, 30-second drive from the office, with his wife and three daughters who he tells us "thankfully take after their mother". When he's not occupied with work and family, he devotes his time to activities in his local church, and to solving Japanese-style puzzles (his favorites are Shikaku, Nurikabe, Heyawake and Akari, which you can try at www.nikoli.com).

Finally, concerned that the above would slot him firmly in the ranks of "complete nerds", Richard requested that we add for the record that he is also very much into cricket, rugby, volleyball and squash.

Current BCD Software Release Levels

These are the current release levels for all our products:

If you have any questions about how to get to the latest versions, please contact Technical Support.

Summary List of Recent Updates

Nexus 3.3

Nexus 3.3 update  NX33005 was released on 2007/08/01. This update was created primarily to resolve an issue when an ECM document is selected from a menu and that ECM document has a target of New Window - the window wasn't popping up correctly.

update also changes the default skin option used when creating new users: rather than defaulting to the first skin listed, new users default to the "Inherit Site Skin" option.

For additional information please visit the Nexus Updates page.

Organizations that Recently Purchased BCD Software

AHS • Basler Electric • Cereal Food Processors, Inc. • City Furniture • Columbus Salame • Coty, Inc. Computer Operations • Cox & Company • Express Services • Fortis Insurance • General Electric - Inspection Technologies • Industrial Motion Control • Ingersol Rand • Isanti County • Isle of Capri Casino • J & R Schugel Trucking Inc • Johnson & Johnson Middle East • Med-Equip • Miller Electric Manufacturing • Navajo Express • Nestle Ivory Coast • Nobles County • Oman Arab Bank • Pennsylvania College of Technology • Plaid Enterprises • Plano Women's Healthcare • Polish National Alliance • Portneuf Medical Center • Redwood Capital Partners • RSR Corporation • Saitt • Scott Specialty Gases • SKF USA, Inc. • Sully Cooperative Exchange • Synergy Medical • Technology Consultants • Wahl Clipper • Waynesboro Area School District • Western Digital Fremont

Sign Up | Feedback | 2007 BCD Int'l, Inc.