Customizing WebSmart Templates Part 2: Sharing Custom Templates
In last month's tech update we introduced the process of editing WebSmart's program templates. We noted that a key element in our template design approach is to use Cascading Style Sheets to control almost every aspect of the appearance of your programs. So by copying one of the shipped style sheets on your IFS to a new name, and then editing that set of css files and images, you can easily create new custom looks to apply to your programs. However, unless you changed the style sheets we ship (which we don't recommend!), you still need to make a small change to your program's HTML to adjust the reference to the new style sheet and images. In this second article we'll look at how you can make a simple template change to reference a different style sheet in all your new programs, and the best strategy for sharing the updated templates between multiple developers.
Where do Templates Come From?
When you first install WebSmart, the style sheets and images for the standard template families are installed on your System i IFS. In that location, they are accessible via the web server to everyone who needs to run your programs in their browser.
Recall this illustration from last month's article, showing this location within the /esdi/ folder on your IFS:
Opening the CSS file for all Idaho programs.
Here you can see the style sheets and images for each of the shipped template families. But the templates themselves are not installed here; they are installed along with the WebSmart IDE on each individual PC. Unlike the CSS files, the templates are just starting points for building definitions, and don't need to be accessed at runtime. By installing them with the WebSmart IDE we make it as easy as possible for you to get started on the design process.
However, if you do decide to you need to change some aspect of the appearance of all your programs, the best way is by editing the templates. And after making the necessary adjustments, you'll need to make the new versions available to all the developers at your site, and store them in a location where they won't be overwritten by software upgrades.
Look back at the image above: while we don't create a specific IFS location for your templates, we do create the folder named 'wcm' (WebSmart Change Management). WebSmart Change Management is where we intend for you to create and save your own custom templates. In the rest of this article we'll walk through the process of making a minor template change, and then make the template available to all developers by saving it to a new WCM project.
Making a Template Change
In last month's article we copied the Idaho CSS and image files to a new folder named Yoyo. As our last step we simply changed the style sheet reference in an existing program to point to the new css file. While that approach is adequate for a few programs, it still means you need to make that change to every new program you create. A better solution is to create a new template.
Here is an illustration of the WebSmart template directory on any PC where the WebSmart IDE is installed:
Creating a new templates folder and adding a template.
In the illustration above we have proceeded to create a new template. To do this, we first added a new folder at the same level as Idaho, Lincoln and McLeod. We named this folder Yoyo (to match the IFS folder of the same name, where in last month's article we created new style sheets and header images). Then we copied the Page at a Time Maintenance template from the Idaho folder to the Yoyo folder.
Editing the Template
We'll discuss the structure of the templates in a future article. For now, it's enough that you know that you can open and edit the templates in either the WebSmart IDE or any plain text editor (such as Notepad).
In this illustration we have opened the Page at a Time Maint template in the WebSmart IDE (File/Open) and searched for the text 'css':
Locating the style sheet references in the template.
The first reference to a css file is found in the base HTML for the Page Header segment of our program. To update this template, we need to change these (and any subsequent) 'idaho' references to 'yoyo'. The best way to do this is a Find/Replace All.
Using the New Template
After saving your template changes, how do you use it? To create a new program using this template, just click the Browse... button at the WebSmart New Program window. Then navigate to the new folder Yoyo and select this template file. The wizard will walk you through the rest.
But that solution only works for you, unless you go ahead and save your template file to a shared directory on your network. But a better solution for sharing and securing templates is to use the facilities built into WebSmart Change Management. Then, when you enable the WCM options within WebSmart, the IDE will automatically prompt you to select a template from the right location.
Creating a New WCM Project
The first step is to create a new WebSmart Change Management project (if you are already familiar with WCM, you can add this template to an existing project). You'll do this from the Manage menu in the WebSmart IDE. At the WebSmart Change Management window, select the Project/Add... option to present a window similar to this one:
Creating a new WCM project.
When you click OK at the small window above, the new project is added to your list. The next step is to add a template to this project:
Adding a new template to a WCM project.
In this illustration we first selected the Templates option from the Project menu, to present the small window at the front. Now we are about to add a template to this project, by selecting Template/Add. When you select this option, WebSmart prompts you to find and choose the template to add to the project. Find the template you created in the Yoyo folder and add it to the project.
One step remains: to enable the WCM menu options in the WebSmart IDE.
Enabling WebSmart's WCM Options and Using a Saved Template
Back at the WebSmart IDE, go to Tools/Options, and at the window that appears, select the iSeries options. Check the option 'Enable menu options for mixed change management environment'. At this stage you are probably not ready to completely constrain yourself within the change management options, so this will allow you to select templates owned by projects, as well as the default set installed on your PC.
Now, restart WebSmart (to enable the new menu options) and from the File menu, select the New Managed... option to present this window:
Selecting a template from a WCM project.
Once you select this template, the wizard design process is identical. When you get to the IDE, you'll see your template change is reflected in your new program.
Review
In this article we have discussed how to make a very simple template change, and then save that template within WebSmart Change Management. This is the most effective way to organize your custom templates and make them available to everyone developing WebSmart programs on your iSeries.
In next month's article we will look at using include files to share images and other structural elements across multiple templates.
WebSmart 6.6 Feature List: Field Re-names, Support for JDBC Connections to any JDBC compliant DB (MsSQL, etc.)
WebSmart 6.6 is currently in preview mode and available for installation upon request. Release 6.6 includes several exciting new features, including the oft-requested support for field renames, and new functions to support establishing JDBC connections to any JDBC-compliant database. This means that beginning with this release, you will be able to create WebSmart ILE programs that access MySQL and Microsoft SQL Server databases, among others. Another important new feature is Intelliprompting. This feature provides realtime prompting for PML and PHP function names as you type in the code editor. For example, if you type the letter ‘g’, all functions starting with that letter appear, along with a descriptive line for each function, showing any parameter types and return values. As you keep typing, the list is further subsetted. For example, typing ‘get’ shows a list of all functions starting with ‘get’, such as ‘getparm,’ ‘getrcd,’ etc.
You can find a complete list of the new features available in WebSmart 6.6 at myBCDSoftware.com.
Beginning with WebSmart 6.6 we hope to deliver more frequent, smaller upgrades to the product. This will give you faster access to key features as they are developed, rather than having to wait until the next 'major' release. Releases will be available for about two months as 'preview releases', during which time you can get early access and provide feedback that will be incorporated into subsequent versions.
If you have any questions about WebSmart 6.6 or our new development schedule, please contact Technical Support.
WebSmart Example Programs: Creating a Gauge Chart
The latest WebSmart
example program describes how you can build a Gauge Chart. If you haven't yet tried to build any SmartCharts with WebSmart or Clover, this is a good example to start with.
Gauge Created with WebSmart & SmartCharts.
You can use this and other examples at our website as your starting points, and then refer to the SmartCharts online documentation to tweak the final appearance of your chart, graph or gauge.
To create this example you can just start with the A Simple Page template, and follow the instructions to create the necessary HTML segments and PML functions.
If you have any questions about any of the examples posted, please drop a
note to Technical
Support.
|
SystemiNetwork Webcast: Rapid Web App Development with PHP on System i
Visit the BCD website to listen to several free educational webcasts. The highlight is this week's Rapid Web App Development with PHP on the System i, with Don Denoncourt and Duncan Kenzie. In this recent webcast, Don (System iNews Tech Editor, and consultant for CAS Severn, Inc.) explains why you should consider using PHP to modernize and transform your System i business applications. Don will discuss how PHP is implemented on the System i and what the advantages are of writing applications using PHP. He'll also discuss some of the tools that are available for coding PHP.
During the second part of this one-hour webcast, Duncan Kenzie, President and CTO of BCD Technical Services presents a 30-minute demonstration of WebSmart PHP, BCD's Rapid System i Application Development (RAD) tool for PHP. Duncan also demonstrates BCD's Nexus Portal with tighter security, application frameworks and executive dashboards that integrates with WebSmart.
Earlier this month, Duncan Kenzie led another webcast entitled Create Dynamic Web 2.0 Applications with AJAX, PHP and RPG, where he walked through some detailed examples of you can meld the 3 best technologies for System i hosted Web 2.0 development - AJAX, PHP and RPG. Listen to this webcast to learn how you can transform your applications into highly responsive Web 2.0 applications that will get your users excited about the web all over again.
If you have any questions about these webcasts, please contact Technical Support.
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.
BCD at October's COMMON Focus and iSeries DevCon
BCD will have a booth at COMMON Focus in Columbus, Ohio, October 14-16. COMMON Focus 2007 is their first annual workshop conference event, featuring three days of intense, focused education. It will be a smaller, more intimate event than a traditional COMMON conference with a limited number of attendees - allowing attendees for more one-on-one interaction with the speakers, vendors and each other. For additional information, visit their website.
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.
If you plan to attend either event, look for BCD's booth, where we'll be happy to show you what's cooking in our labs these days.
New "Rate this Page" Option on Knowledge Base Articles and WebSmart Example Programs
BCD's Technical Support and Development team first implemented a call logging system in 1993. From the start, the log system was also tied to a 'Task' application where we tracked reported software issues.
Over the years our task list has undergone a few significant transformations and grown to include feature requests, reported problems (and solutions) and How-to items with answers to frequently asked questions. All these articles form the backbone of our online Knowledge Base.
The new Rate this Page option on all KB items.
We have now added a new Rate this Page section to all our posted KB items. You can use this area to provide us with valuable feedback about the entries you've looked up. If you find errors or imprecisions, or items that have been particularly useful, let us know!
The same option has been added as a new tab in all our WebSmart Example Programs. We look forward to hearing from you, and remember that if you want us to get back in touch with you, just add your name and contact details to the text. Your information is immediately emailed to the support supervisor, so you can also use this as a means to submit requests for technical support.
Katie Bateman has been a member of BCD's Professional Services group for almost two years now, using WebSmart to develop websites for our customers. Katie has helped create several of the sites listed in our Professional Services Success Stories, and is currently involved in a large project for a North American beverage company.
Katie grew up right here in Southern Vancouver Island, where she also graduated from the University of Victoria with a degree in Computer Science. One of the highlights of her experience at UVic was the opportunity to work on the software for the Canadarm2 during one of her work terms.
More recently, Katie took a 4-month break this summer to tour Europe. Her longest stop was at a pottery studio in Tuscany, where she spent a month creating (by her own admission) mediocre pottery which she plans to sell to celebrities for unreasonable amounts of money.
Katie claims that she returned to work because she loves the interaction with our customers, as well as the people she works with here in our office. But it's also possible that she just ran out of money, and needs a day job until her earthen ambitions come to fruition.
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
Spool-Explorer 4.33
A new version of Spool-Explorer has been released. You can download it from myBCDSoftware.com if you have a user profile, or visit the Free Software Trials page. Changes in this version include:
- An information message is displayed when attempting to view a file type the default viewer is not configured to read.
- EZPickin's autoscripts now work correctly in conjunction with ZDWNSPLF when run interactively.
- Catapult Quick Rule is working again after resolving an Exodus communications issue.
Please visit the Spool-Explorer Updates History page for further information on the available updates.
Organizations
that Recently Purchased BCD Software
AHS • Basler Electric • City Furniture • City of Carrollton, TX • Columbus Salame • Crudi d'Italia Euromobil • Express Services • FDFP Ivory Coast • FiliVivi • Fortis Insurance • GE Inspection Technologies • Golden Flake Snack Foods • Harker's Distribution • Industrial Motion Control • Ingersol Rand • Isanti County • Johnson & Johnson Middle East • KTH Parts Industries • Lacks Enterprises • Marley New Zealand Ltd • Med-Equip • Nobles County • Polish National Alliance • Portneuf Medical Center • Redwood Capital Partners • Sillo Giovanni • SKF USA, Inc. • Sully Cooperative Exchange • Technology Consultants • Valley Mental Health • Wahl Clipper • Western Digital Fremont
|
