The most powerful

way to develop
Web applications!

CodeCharge Studio 2.1

User's Guide

6330 S. Eastern Ave. Suite 5 Las Vegas, NV 89119 USA

Telephone: + 1 (888) 241-7338 Fax: + 1 (866) 312-8049
[email protected]
http://www.codecharge.com
Copyright © 2000-2003 YesSoftware, Inc.
All rights reserved.
This manual, as well as the software described in it, is furnished under license and may be used or copied
only in accordance with the terms of such license. The content of this manual is furnished for informational
use only, is subject to change without notice, and should not be construed as a commitment by YesSoftware,
Inc. YesSoftware, Inc assumes no responsibility or liability for any errors or inaccuracies that may appear in
this documentation. Except as permitted by such license, no part of this publication may be reproduced,
stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or
otherwise, without the prior written permission of YesSoftware, Inc.
Reproduction or translation of any part of this work beyond that permitted by Sections 107 and 108 of the
1976 United States Copyright Act without the permission of the copyright owner is unlawful. Requests for
permission or further information should be addressed to YesSoftware Inc., 6330 S. Eastern Ave. #5, Las
Vegas, NV 89119.
YesSoftware, the YesSoftware logo, CodeCharge and the CodeCharge Logo are either registered
trademarks or trademarks of YesSoftware, Inc in the United States and/or other countries. ASP, IIS,
Microsoft, Windows and Windows NT are either registered trademarks or trademarks of Microsoft
Corporation in the United States and/or other countries. JavaScript and JSP are trademarks or registered
trademarks of Sun Microsystems, Inc. in the United States and other countries. All other trademarks are the
property of their respective owners.

2
Table of Contents
1. Introduction.............................................................................................................................................5
1.1 About the CodeCharge Studio Documentation..................................................................................5
1.2 What is CodeCharge Studio? ............................................................................................................5
1.3 Who Should Use CodeCharge Studio? .............................................................................................6
1.4 How it Works ......................................................................................................................................6
1.5 Product Features................................................................................................................................7
1.6 Prerequisites ....................................................................................................................................14
1.7 Contacting Product Support.............................................................................................................15
1.8 Terms and definitions.......................................................................................................................15
1.9 End User License Agreement ..........................................................................................................19
1.10 For More Information ...................................................................................................................21
2. Introduction to Web Programming .......................................................................................................22
2.1 Introduction to Web programming....................................................................................................22
2.2 The Internet......................................................................................................................................22
2.3 Connecting to the Internet................................................................................................................22
2.4 Using a Firewall for Secure Internet Access....................................................................................23
2.5 Web Servers ....................................................................................................................................23
2.6 Running Programs on a Web Server...............................................................................................23
2.7 Obtaining a "Permanent" Web Server .............................................................................................23
2.8 Domain Names ................................................................................................................................24
2.9 Creating HTML Content ...................................................................................................................24
2.10 Publishing Web Content ..............................................................................................................25
2.11 Type of Websites .........................................................................................................................25
2.12 Benefits of Using Web Technologies...........................................................................................25
2.13 Challenges Encountered Using Web Technologies ....................................................................26
2.14 Architecture of Web Applications.................................................................................................26
2.15 Choosing Web Technology .........................................................................................................27
3. Getting Started .....................................................................................................................................29
3.1 Downloading CodeCharge Studio....................................................................................................29
3.2 Installing CodeCharge Studio ..........................................................................................................29
3.3 Upgrading, Repairing or Uninstalling CodeCharge Studio ..............................................................33
3.4 Starting CodeCharge Studio ............................................................................................................35
3.5 What You Need to Get Started ........................................................................................................37
3.6 Setting up the work environment .....................................................................................................38
4. Working Environment ...........................................................................................................................47
4.1 Command Area ................................................................................................................................47
4.2 The Project Explorer ........................................................................................................................53
4.3 The Properties Window....................................................................................................................54
4.4 Message Window.............................................................................................................................55
4.5 ToolBox ............................................................................................................................................55
4.6 Working with Documents .................................................................................................................58
4.7 Customizing the Workspace ............................................................................................................62
4.8 Keyboard Accessibility .....................................................................................................................67
4.9 IDE Translation ................................................................................................................................69
5. Working with Projects...........................................................................................................................70
5.1 Creating a New Project ....................................................................................................................70
5.2 Adding New Pages ..........................................................................................................................71
5.3 Saving a Project ...............................................................................................................................72
5.4 Specifying Project Settings ..............................................................................................................73
5.5 Connecting to Databases.................................................................................................................78
5.6 Implementing Security .....................................................................................................................95
5.7 Multiple Directories within a Project ...............................................................................................100
5.8 Using Include Pages ......................................................................................................................101
5.9 Using the Page Template ..............................................................................................................102

3
 5.10 Working in Design Mode ...........................................................................................................103
5.11 Editing HTML Source Code.......................................................................................................105
5.12 Using JavaScript/Jscript ............................................................................................................106
5.13 Editing Programming Language Source Code..........................................................................108
5.14 Working with Themes ................................................................................................................109
5.15 Searching and Replacing ..........................................................................................................113
5.16 Using Site Diagrams ..................................................................................................................116
5.17 Using External HTML Editors ....................................................................................................118
6. Deploying Projects .............................................................................................................................120
6.1 Deploying .Net Applications ...........................................................................................................120
6.2 Deploying ASP Applications ..........................................................................................................123
6.3 Deploying ColdFusion Applications ...............................................................................................124
6.4 Deploying Java & JSP Applications...............................................................................................126
6.5 Deploying PERL Applications ........................................................................................................130
6.6 Deploying PHP Applications ..........................................................................................................131
7. Working with Forms and Controls ......................................................................................................134
7.1 Working with Controls ....................................................................................................................134
7.2 Form Data Source..........................................................................................................................136
7.3 Grid Form .......................................................................................................................................149
7.4 The Editable Grid ...........................................................................................................................151
7.5 Record Form ..................................................................................................................................155
7.6 Search Form ..................................................................................................................................159
7.7 Login Form .....................................................................................................................................161
7.8 The Directory Form ........................................................................................................................164
7.9 Building Forms Manually................................................................................................................170
8. Working with Builders.........................................................................................................................176
8.1 Builders ..........................................................................................................................................176
8.2 Application Builder .........................................................................................................................176
8.3 Grid Builder ....................................................................................................................................188
8.4 Editable Grid Builder ......................................................................................................................192
8.5 Record Builder ...............................................................................................................................198
8.6 Grid and Record Builder ................................................................................................................200
8.7 Search Builder................................................................................................................................204
8.8 Directory Builder.............................................................................................................................206
8.9 Date Picker Builder ........................................................................................................................208
8.10 Authentication Builder................................................................................................................209

4
1. Introduction

1.1 About the CodeCharge Studio Documentation

The CodeCharge Studio documentation is divided into four main volumes:

• The User Guide introduces you to CodeCharge Studio and explains how to make use of the various features
available in the CodeCharge Studio IDE. If you are new to CodeCharge Studio, you should read the User Guide first
and acquire a working knowledge of the CodeCharge Studio environment.
• The Quick Start contains detailed step-by-step instructions aimed at guiding new users through the process of
performing various types of functions within CodeCharge Studio. As such, the Quick Start provides a hands-on
approach to learning the software by building sample web applications from the bottom up.
• The Component Reference contains programming level information about the different components that are
used to create web applications using CodeCharge Studio. This includes the different Controls, Methods, Properties,
Events and Actions. The Component Reference should be read after acquiring a good understanding of the
CodeCharge Studio IDE using the User Guide. The Component Reference also serves as a point of reference when
writing event code or custom code.
• The Examples and Techniques section contains tips and programming examples of how to achieve various
common tasks using event code and custom code. In essence, the Examples and Techniques section demonstrates
practical ways of applying some of the constructs detailed in the Component Reference. The techniques
demonstrated can also be used in actual projects to achieve various goals.

1.2 What is CodeCharge Studio?

CodeCharge Studio is a visual application builder and code generator that provides a feature-rich environment for rapid
application development for the web. It is the most productive way available today to create powerful, scalable, and
secure web applications quickly. Based on a sophisticated code generation engine, CodeCharge Studio opens up new
possibilities for web developers by automating the creation of virtually all web application components and by generating
robust, professional-level server code in any of the following programming languages: ASP.NET (C# and VB),
• ASP 3.0,
• PHP 4.0,
• Java Servlets 2.2,
• JSP 1.1,
• ColdFusion 4.01, and
• PERL 5.
By leveraging CodeCharge Studio's core technology and development environment, users are able to take advantage of
a database-centric model that creates separate HTML and server code. The generated code can be easily modified using
the internal code editor, which locks and protects user-modified blocks of code such that improvements and
customizations are persistent in all subsequent code generations.
CodeCharge Studio includes security management, role-based access and is fully integrated with Microsoft FrontPage for
those developers who use FrontPage for web design. Its powerful visual design features, fully extensible environment and
support for virtually all popular databases and server technologies make CodeCharge Studio the ideal web application
development environment.

5
1.3 Who Should Use CodeCharge Studio?
CodeCharge Studio is an especially powerful tool in the hands of software developers, even those unfamiliar with web
technologies. CodeCharge Studio allows users to automatically generate 80% to 100% of web applications that would
otherwise have to be created manually.
CodeCharge Studio can also be used by those who are new to programming. However, it is highly recommended that
you be familiar with programming concepts and database design or have an already existing database that you want to
integrate into a web site. Prior programming experience is recommended and sometimes required if you wish to create
complex applications. The section "Introduction to Web Programming" describes many concepts of web development that
can help you understand how web applications generally work and how they differ from the standard client/server and
desktop applications.
CodeCharge Studio is best suited for the following types of users:
• Web Application Developers: CodeCharge Studio provides developers with all the functionality necessary to
create powerful, scalable and secure web applications rapidly. Developers can focus on programming the essential
business logic behind the application rather than the core application framework. This group of users consists of
corporate developers, consulting companies, and individual programmers and consultants.
• Database Developers: Database developers who are comfortable with visual database and application design
tools will appreciate the natural, data-centric nature of CodeCharge Studio. Microsoft Access programmers will
especially find the CodeCharge Studio interface strikingly familiar.
• Legacy Programmers: Sophisticated and advanced system architects are often not familiar with web
application development. Visual Studio or other Windows programming environments are often too complex and do
not offer an easy way to understand Web application development. CodeCharge Studio simplifies and accelerates
the process of web application development through a variety of features including drag-and-drop components,
application builders, and pre-built business solutions.
• Webmasters and Designers: Webmasters and designers are realizing the benefits and need for storing web
content in databases-especially when faced with the prospect of maintaining hundreds of web pages. They are often
expected to produce dynamic content such as an employee directory or portal for their company. CodeCharge Studio
addresses these needs and allows anyone to create database-enabled applications without the need for extensive
programming. For designers comfortable with the host of existing design applications, CodeCharge Studio is tightly
integrated with Microsoft FrontPage and can work in conjunction with virtually any HTML design tool.
• Systems Integrators, VARs and ISVs: Companies which produce, sell or support any software applications will
find CodeCharge Studio valuable for creating Web interfaces for their solutions. For example a CRM software vendor
offering Windows solution can easily create the Web equivalent of their product, or at a minimum, Web-enable parts
of an application and its functionality.

1.4 How it Works

CodeCharge Studio is functionally and visually similar to other RAD tools, such as Microsoft Access and Visual Studio,
with the ability to maximize developer productivity while keeping the cost of development at a minimum. While visual
programming tools are traditionally used for developing desktop and client applications, CodeCharge Studio is ideal for
developing sophisticated web applications.

6
 Figure 1-1: CodeCharge Studio User Interface
CodeCharge Studio incorporates many features that aid developers in the process of building web applications. These
include builders, that create pages and forms, and data-aware components and controls that can be placed on a page.
CodeCharge Studio web-enables your databases by providing the foundation for information exchange between
databases and web browsers. A powerful Application Builder is also provided to get you started. The builder automatically
uses your database's structure to automatically create a set of web pages that use the database as the back-end.
The following steps demonstrate how to create a basic application using the Application Builder:
• Start CodeCharge Studio.
• Create a new project.
• Name the project and select Application Builder.
• Specify project settings such as the programming language and path to the web server.
• Specify the database connection type and establish a database connection. (Alternatively, you can select one of
the sample databases: Intranet or Internet.)
• Configure site authentication by specifying the database table and columns that contain user login and password
information as well as security groups and roles.
• Select the database tables based upon which the web application will be created.
• Specify the type of web page to be created for each of the previously selected database tables. Specify if you
want to create Search, Grid, and Record maintenance pages for each table.
• Specify a theme to be applied to the site. The theme defines the basic layout and appearance of different
elements within a page.
• The Application Builder will automatically create a project with sets of pages that make up the web application.
You can then publish the pages to the server and test them.
• If you wish, you can make further modifications to the created application by using the integrated development
environment (IDE).
CodeCharge Studio does not create or help creating databases since there are many other tools that already perform that
function. For example, you can easily create a database using Microsoft Access for Windows and even export it to
MySQL for use on Linux. CodeCharge Studio also comes with two sample databases, and several web applications that
use the databases, that can be used as a starting point for creating simple web applications.
CodeCharge Studio runs exclusively on the Windows platform. However, the web applications that it generates are
platform-independent and can run on any system (i.e., Windows, Mac, Linux and others) as long as the system has a
suitable server. Windows IIS server can execute ASP scripts while many Linux servers are pre-configured to run PHP
scripts. The programs generated by CodeCharge Studio do not require any custom components to be installed and can
run on virtually any applicable web server. However, it is recommended, and sometimes required, that the latest scripting
engine be installed (e.g., ASP3 or PHP4). The specific requirements are listed in the "System Requirements" section.
When you work with CodeCharge Studio, you can usually connect to a remote database residing on your server. In some
cases, (e.g., when working with Microsoft Access) you may need to have a copy of the database stored locally on your
desktop since remote connection may not be possible. Each project within CodeCharge Studio can have two distinct
connections. One connection is the design-time connection, used during the development process, and the other is the
server-side connection, used by the generated pages after they have been deployed. Therefore, if you use the MySQL
database, you would use the MyODBC driver to establish the design-time connection via ODBC, but the generated
programs will usually connect to the database with PHPLib-a native PHP database connectivity library.

1.5 Product Features

What's new in CodeCharge Studio 2.1

CodeCharge Studio 2.1 introduces many new powerful features as well as makes improvements to some of the already
existing features. Like its predecessor, CodeCharge Studio 2.1 is geared towards drastically reducing the time and cost
involved in creating web applications. CodeCharge Studio 1.x set new standards with regard to rapid application
development and following in its footsteps, CodeCharge Studio 2.1 presents an even more powerful and robust tool for all
its users. The improvements made in this release ensure that CodeCharge Studio 2.1 remains the leading tool of choice
as far as web application development is concerned. While introducing many new features to further automate and
improve the web application development process, CodeCharge Studio 2.1 remains an easy to use tool.

7
The following are some of the new features introduced in CodeCharge Studio 2.1:
• Editable Grid: Our users asked for it and in this release, we are proud to introduce the editable grid component which
enables the editing of multiple records simultaneously. Users will be able to leverage this component to create order
processing, inventory management, shopping cart, or any other ERP-type system whose integral functionality involves
the manipulation of multiple records. For the end user of the web application, the editable grid will greatly speed the
process of adding, editing or deleting multiple records since only a single button click will the required to initiate the
processing of multiple records.
• Index/Directory: The Directory component facilitates the creation of a Yahoo style Directory or Index. The Directory is
made up of a hierarchy of categorized listings which the user can navigate through. This makes the Directory component
especially useful when creating Web portals where information is provided taxonomically. Using CodeCharge Studio 1.0
users were able to create Web Portals and Content Management Systems using customized grid forms. With the
introduction of the Directory component, the creation of such systems will be easier as well as produce more robust and
navigable systems. This feature should also prove useful when implementing applications where end-users can define
and then represent organizational structures or define and assign roles to users in a hierarchical fashion.
• Site Diagram: The site diagram feature enables the developer to produce a visual representation of the pages within
the site as well as show how the pages are linked to one another. The diagrams can be used to document the site as well
as make presentations about the site pages for the purpose of analyzing and discussing the site structure without getting
into the details of the underlying code. For someone who is not involved in the creation of a site, the site diagram provides
a relatively easy way to understand what the site is made up of and how it works.
• Date Picker: The Date Picker component enables the user to specify date values by selecting a date from a pop-up
calendar. The pop-up calendar is a small browser window which contains a monthly view of dates and also has the
capability of scrolling backwards and forwards to other months.
• File Upload: The process of transferring files from the end users machine to the server can now be accomplished by
using the File Upload component. This component generates the necessary code to enable an end user to select files
from their machine and submit the files so that they are uploaded to the server.
• Expanded Documentation: We have made a concerted effort to release more comprehensive documentation as well
as example code to ease the learning curve on the part of the user. This expanded documentation should greatly aid the
user in realizing the full potential of CodeCharge Studio 2.1. In addition to this, the documentation shall be provided and
maintained in electronic format so that necessary updates can be delivered quickly.
• Multi-Select ListBox: The listbox component has been improved to allow the end user to select multiple values within
the listbox, unlike in previous versions where only one value could be selected. The Multi-Select listbox can therefore be
used in database tables with one-to-many relationships.
• Search and Replace: The seach and replace functionality within the CodeCharge Studio 2.1 IDE has been greatly
enhanced to support searches across multiple files as well as use advanced features such as regular expressions to
specify the criteria.
• Optimized Grid Component: The grid component has been improved to support a larger number of fields.
• Japanese Version: CodeCharge Studio 2.1 will also see the release of a localized Japanese version to be distributed
by AG Tech in the Japanese market.

Key Features and Benefits of CodeCharge Studio

CodeCharge Studio generates structured object-oriented code that is easy to maintain and extend. CodeCharge Studio
makes code generation very practical by taking the hassle out of the process of generating professional-level code.
Developers can easily modify any part of the generated code using a powerful code editor included with CodeCharge
Studio. Code that has been modified in the editor by the user is not overwritten during subsequent code generation.
CodeCharge Studio offers an unprecedented way for users to quickly build powerful database-driven web applications.
By using a simple point and click interface, users can select desired components, programming language, presentation
schemes and database queries-without any programming or without the need to fully understand the underlying web
technologies.
What further sets CodeCharge Studio apart from all other products is sheer speed. For example, CodeCharge Studio
makes it possible to create a simple task management system in under five minutes. Several pre-built application
templates are included and can be adapted to the developer's needs and extended into full-featured web systems.

Application Builder
The Application Builder of Figure 1-2 is perhaps the most advanced web development automation tool available to web
developers. With just a few clicks, users can create complex database-enabled Web applications with dozens-or even
hundreds-of web pages for data management and administration. For example, a user with a database of employees,
projects and tasks, can use the Application Builder to automatically create a Task List page, Employee Search page,

8
Employee Maintenance page, Project Maintenance page, and complete an entire application project in a few short
minutes.

Figure 1-2: Application Builder

Integrated Development Environment (IDE)

CodeCharge Studio combines visual interface design tools with an integrated development environment (IDE) to enable
developers to create powerful and sophisticated web applications in record time. CodeCharge Studio features powerful
HTML and code editors, a HTML design component, project explorer, property browser, dockable tool windows, and
many other features desired by professional developers. The built-in HTML editor lets users quickly design their
program's user interface and add database-connected grids, record maintenance forms, text boxes, list boxes, labels,
buttons, etc.
CodeCharge Studio gives users full access to the generated programming code through a full-featured, customizable
code editor with syntax highlighting and smart indenting to help distinguish different source code elements. Developers
can modify any part of the generated code without losing their customizations during subsequent code generations. This
translates to having complete control of the generated programs and eliminates the need to use external code editors.
The code editor also allows users to attach code to objects on the web page, for example, to send a confirmation email
when some information is submitted via the web.

Form and Component Builders

Component Builders are key constituents of CodeCharge Studio and help users assemble Web pages from multiple
components such as Grid, Editable Grid, Record, Directory, Login, or Search. A Builder is a dynamic wizard that creates
the appropriate component on the page by allowing the developer to specify the database table and fields that are used
to display, validate or accept information.

Figure 1-3: Component Builders

Visual Query Builder

Developers can easily select tables and stored procedures or custom SQL as the data source for their data-aware forms.
A Visual Query Builder is provided for visual creation of SQL statements. For example, a user can create a query that
displays the list of employees, along with corresponding departments and roles. Developers can also specify filtering

9
criteria, for example, to display only the employees with names that match search criteria entered in another page or
form.

Figure 1-4: Visual Query Builder

Security Management/Role-based Access Control

CodeCharge Studio goes the extra mile in protecting generated Web applications by implementing additional security
features that prevent users from externally modifying forms and submitting invalid data to the server. CodeCharge Studio
allows developers to define secure role-based access to each page or form. Web users who don't have sufficient
privileges to access a page will be automatically redirected to the login page. The users who are authorized to access a
page but are not permitted to view or update a particular form will see the page without the form or will not see the
Insert/Update/Delete buttons needed to update the form.

Figure 1-5: Security Management

Support for Multiple Programming Languages

CodeCharge Studio can generate programming code in C# and VB. Net (ASP.NET), VBScript (ASP), ColdFusion, Java
(Servlets or JSP), PHP, and PERL. Since the project model is stored in XML format, the programming language can be
changed at any time and the same project can be regenerated in multiple programming languages.

Extensibility
CodeCharge Studio has an open architecture and is fully extensible. Most of the functionality is implemented as HTML,
JavaScript, XML, and XSL. Users can customize almost any part of the built-in functionality or develop their own
components, such as Builders, Components, Actions, and Themes. In the future, users will be able to obtain the
CodeCharge SDK and develop their own code generation templates.

Multiple Database Connections

CodeCharge Studio supports multiple database connections to allow Web applications to utilize multiple data sources, for
example, to validate user access against an external user database.

Figure 1-6: Database Connections

10
Microsoft FrontPage Integration
CodeCharge Studio can be installed as an Add-In for Microsoft FrontPage. The Add-In extends Microsoft FrontPage
using a set of code-generating Builders, a project explorer, properties browser and code editor. FrontPage users can use
all of CodeCharge Studio's features directly within their familiar environment.

Figure 1-7: FrontPage Integration

Integration with Other Products

Web pages created with CodeCharge Studio can be opened with any web editor, either by opening the HTML files saved
by CodeCharge Studio on the disk, or by right-clicking on a page within the CodeCharge Studio IDE and selecting Open
Externally.
After a page is modified and saved, it is automatically available back within CodeCharge Studio. For example, users can
create a simple web page with CodeCharge Studio, then open it in Macromedia DreamWeaver and add sophisticated
graphics and layout features. Users can also copy and paste HTML code from any existing web page into a CodeCharge
Studio web page.

Separation of Programming logic from the Presentation Layer

CodeCharge Studio fully supports the separation of programming logic from the presentation layer by generating source
code files (.asp, .php, .jsp, etc.), which are separate from their corresponding HTML files (HTML templates). This
approach allows web teams to utilize best practices by allowing designers to work separately and in parallel with
developers.
Many other technologies force developers to perform design tasks and designers to deal with code. The CodeCharge
Studio approach allows the developer to produce applications that can be further customized by modifying the HTML
template files within CodeCharge Studio's IDE or through a suitable design environment, all this while leaving the code
untouched.

Extensive Database Support

CodeCharge Studio supports most existing databases via JET and ODBC to establish the design-time connection. The
server-side connection can be made using JET, ODBC, JDBC, ADO, DBI and PHPLib to connect to databases during
run-time. For example, the connection from a JSP project to an Oracle database can be established using the Oracle
JDBC driver. CodeCharge Studio goes as far as implementing bug fixes to PHPLib library for reliable use of PHP with
Oracle.

11
 Figure 1-8: Database Support

Application Templates (Solutions)

CodeCharge Studio comes with ten templates and examples of pre-built web applications that can serve as starting
points for your applications. These applications are ready for customization and adaptation for organizational needs. The
templates include intranet applications such as Bug Tracking and Task Management systems as well as an Employee
Directory. Internet application examples include an Online Store, Community Portal, Classifieds, Yellow Pages,
Discussions Forum, and an Event Management system.

Custom Code and Actions

Applications generated with CodeCharge Studio can be easily extended by adding custom code or by using any of the
predefined Actions. Actions are user-definable code components that are inserted into events. Many actions are provided
with the product, while additional actions can be created by users and shared with others. Internally, actions consist of
XML and XSL code that can be easily customized.

12
 Figure 1-9: Events

Figure 1-10: Actions

Unlike manually edited code that cannot always be recovered without the use of a versioning system or a backup, actions
can be regenerated at any time.

Fast, Practical Code Generation

One of the biggest challenges of making code generation practical is to provide developers with full flexibility of modifying
the generated code while not losing the advantage of automation. CodeCharge Studio's core technology handles these
requirements very well and gives users the full flexibility of working with the generated code. Modified portions of the code
are locked from being overwritten during subsequent code generations, therefore eliminating the need of importing
modified code back into the application source.
When publishing a project or page, CodeCharge Studio generates source code that is then copied to the web server to
run the application. Users can choose and change the programming language at any time, for example, generate an
application in Active Server Pages on their local Windows computer, then generate the same application in Java (as
Servlet or JSP) for final deployment on any Java application server. The code generated by CodeCharge Studio is very
similar to human code and can be easily enhanced outside of CodeCharge Studio by any developer. No other software

13
on the market generates usable, practical programming code in as many technologies as those supported by
CodeCharge Studio.

Code Generation Engine

CodeCharge Studio users create web applications by connecting to a database and placing data-aware forms and
components on a page. During the page design process, the representation of the project and all of its pages is saved in
XML format in addition to HTML code that contains the page design. During project publishing, the HTML files are copied
to the server while the XML files are used to generate server code using XSL code templates. This flexible architecture
allows users to regenerate their web application in any programming language at any time. For example, users can
generate a C# application then regenerate it in Java. More advanced users can even create their own XSL processing
templates that automatically generate the documentation, UML diagrams, or test scripts for their applications.

Figure 1-11: Code Generation Engine

On the server, the generated code is fully separated from the HTML. During execution, the code files load corresponding
HTML files into memory, replace static content with database values and output the final HTML to the browser. This
method of separating the code from the HTML design content allows designers to make future changes to the site without
having to modify the code.

Sample Databases
Several sample databases and applications are provided with the distribution to help you get started with CodeCharge
Studio.

1.6 Prerequisites
To use CodeCharge Studio for creating web applications, it is highly recommended that you be familiar with database
design or have an existing database that you want to use as the basis for your web application. It is also desired that you
have prior programming experience in any programming language, as this will greatly help you make program
customizations that sometimes may be required.
Although CodeCharge Studio can automatically generate up to 100% of simple web applications used for data
administration, no tool can create complex applications without some level of custom coding. Many CodeCharge Studio
users are able to generate 80% to 90% of their web applications using CodeCharge Studio, then manually add
programming code that provides additional functionality (e.g., to send an email or update multiple database tables).

System Requirements

Development Environment Requirements

CodeCharge Studio is available for computers running the following operating systems and environments:
• Intel Pentium Processor or equivalent
• 64 MB available RAM
• 30 MB available disk space
• 256-color monitor capable of 800 x 600 resolution
• Windows 95, 98, ME, NT4, 2000 or XP
• Microsoft Internet Explorer 5.5 or higher

14
• Databases Supported
CodeCharge Studio can connect to virtually any ODBC compliant database using the appropriate drivers installed on
the computer where CodeCharge Studio is present. Supported databases include:
o Microsoft SQL
o Oracle
o MySQL
o Microsoft Access
o All other databases with an appropriate ODBC driver
The generated code does not require ODBC connectivity and connects to the database using the method appropriate
for the particular environment, for example ADO for ASP, JDBC for Java, PHPLib for PHP, or DBI for PERL.
• Server Requirements
Generated code runs on all operating systems with installed application servers capable of executing the following
programming languages:
o ASP 3.0 (runs on IIS and PWS servers with VBScript 5.5)
o ASP.NET (C#) 1.0
o ASP.NET (VB) 1.0
o ColdFusion 4.0.1
o PHP 4.0
o J2EE 1.2
o PERL 5

1.7 Contacting Product Support

Free online support for CodeCharge Studio is offered worldwide in English, 24 hours a day at
http://support.codecharge.com. When submitting support issues or questions, please always specify the operating
system, server and programming environment you are using and describe the details of your issue. For example, if
something doesn't work, specify the exact error message or symptoms of the problem. Please also state if the issue is
reproducible and the steps to replicate it.
If you would like to obtain telephone support and are a registered user, please provide the telephone number and the best
time to reach you. Support personnel will contact you via phone if it is determined that a phone conversation is required.
An annual priority support option is also available for purchase, which additionally includes product maintenance in the
form of free upgrades.

1.8 Terms and definitions

Action
User-definable code generation component, which inserts a block of code into an event procedure. CodeCharge Studio
comes with several predefined Actions, which are installed into the following folder:
(CodeCharge Studio folder)\Components\Actions
Internally, actions consist of XML and XSL code that can be easily customized by experienced developers. The utilized
XSL code will be documented in a future SDK (Software Development Kit).

Authentication
The process of verifying if a user has sufficient security privileges to view a web page. If a web page requires
authentication and a user is not logged in, generated programs automatically redirect the user to a specifically designated
Login or Access Denied page. Once a user logs in, generated programs can utilize Sessions or Cookies to store user
access information for limited number of time.

Code Generation

15
The process of translating project model into executable programming code.
CodeCharge Studio uses an open XML file format to describe all project components and properties, while during code
generation, it applies proprietary code templates to the project model, which results in the final code output.

Component
A component is an object that makes up a Web page or a CCS project and can be used for displaying data and accepting
user input. Many components are assigned a data source to bind their controls.
Components can be divided into
- Forms, such as Grid, Record, Directory and Editable Grid
- Controls, including Label, TextBox, etc.
- Supporting controls, such as Sorter, Navigator and Date Picker
Users may add, modify and delete components on a page, just like working with objects in Visual Basic and other
integrated development environments.
Components placed on a page make up the hierarchical structural of such page and are represented via HTML within the
page's HTML template, and via XML within the page's definition stored in the corresponding .ccp file. When adding a
component to a page, its position and layout are stored in the appropriate .html file, while its properties and attributes are
stored in the corresponding .ccp (CodeCharge page) file.

Control
A low-level component (object) that can be placed on a page and has a set of properties and events. Controls can be
used to receive user input or display dynamic content. They are also visible in Project Explorer, where together with
pages and forms they make up the object model of the Web application.
A Control cannot have child components. Example controls are Label, TextBox, TextArea and ListBox.
Certain controls can be further categorized as "supporting controls" because their purpose is to enhance and support the
functionality of forms, for example a Sorter and a Navigator can be used to allow users to sort and navigate the data
presented in a Grid form.

Design-Time
The process and the time of creating web applications by working with CodeCharge Studio, usually performed by a
developer.

Dynamic Content
The content that is not defined during design-time.
Dynamic content is usually retrieved from the database during run-time, but may also be calculated during program
execution.
Dynamic content is output directly to the browser or can be embedded within HTML by replacing template blocks.

Event Procedure
A procedure automatically executed in response to an event initiated by the program code during execution.

Form
A high-level component that is placed on a page to display and/or accept information from users, such as login
information or user data. Forms usually perform a specific task via a group of controls, which are its child components.
Example forms are Grid, Record, Editable Grid and Directory.

Non-templated technologies
See Templated technologies.

Object
A representation of a component (such as form or control) within the generated programs. Objects often have properties,
methods and events that can be used to alter its behavior or execute custom programming functions.
See Referencing Objects.

Page
A web page that holds components (forms and controls) and is used to present information to a user via a web browser,
or to accept and process user data. CodeCharge Studio creates one Program for each Page. Multiple pages make up the
web application.
Pages are executed in one of the two following modes:

16
• HTML Output mode - Parses HTML Template and shows resultant HTML output.
• Data Processing mode - Receives Data submitted via form or URL and processes it accordingly.
Generated Pages consist of the following sections (in execution order):

Section Description
Include Common Files
Common files are loaded and included into the page.

Initialize Page Variables Variables, events, connections, and controls are defined and initialized. Initial values
are assigned to variables.
Authenticate User (Pages with User authentication is performed. Unauthorized users are redirected to the Access
Restricted access only) Denied page.
Initialize Objects Database Connection objects, page controls, and events are defined and initialized.
Execute Components (Data
Operation method is invoked for all record controls on the page. This causes the
Processing mode only)
submitted data to be processed by each control. If no data was submitted,

Go To Destination Page (Data If Operation method for all components was executed successfully, page operation is
Processing mode only) stopped and the browser is redirected to another page.
Initialize HTML Template Initializes Template object and loads template into web server memory for
processing.
Render Page Processes all Controls and Components on the page, then outputs rendered HTML to
the web browser.
Unload Page Defines the UnloadPage Subroutine. Clears page objects and controls.
Include External Pages Includes external pages, such as Header and Footer.
Component Classes Implements component classes for controls present on the page.

Property
A container that stores the information about specific component's configuration or controls its behavior. Certain
properties are read-only and cannot be altered during the run-time, while others can programmatically accessed and
modified during the program execution.

Run-Time
The time when generated web application is being run without dependence on CodeCharge Studio, for example to allow
users to interact with the generated application.
Run-time is also referred to as program execution.

Template
Specially formatted HTML file that generated programs process and output to the web browser. Template files consist of
standard HTML content, plus specially marked template blocks that are replaced with database values or expressions
during run-time.

Templates are used by CodeCharge Studio during the design-time, and optionally are utilized by generated programs
during run-time.

Template use during design-time

Template is one of the key components in designing web applications with CodeCharge Studio.
Working with templates is the same as working with standard HTML, however CodeCharge Studio embeds template
blocks within the template to store additional information about components.

Template use during run-time

When working with Templated technologies such as PHP&Templates, during code generation CodeCharge Studio
publishes templates to the server ‘as-is', which are later utilized by the generated programs during run-time.
Templated programs utilize templates as follows:
1. A user points their browser to a page on the web server, for example www.site.com/Default.asp
2. A program (Default.asp) is executed on the web server, which then loads the template into internal memory and

17
renders it by replacing template blocks with dynamic data.
3. The program then outputs rendered template to the browser

When working with non-Templated technologies, such as PHP or ASP, Templates are not being used.
CodeCharge Studio converts templates during code generation to standard HTML and programming code necessary to
output information to the browser.
Non-templated programs work as follows:
1. A user points their browser to a page on the web server, for example www.site.com/Default.asp
2. A program (Default.asp) is executed on the web server, which then outputs appropriate HTML to the browser and
embeds dynamic content within it.

Template Block
Specially marked place within HTML Template usually used to mark the position of dynamic content within the page.
Template blocks are replaced during run-time with sub-content, such as variable or database output. Unused blocks are
removed.
The following two types of template blocks are utilized by CodeCharge Studio:

Tags
CodeCharge Studio uses text within curly brackets to mark the position of dynamic content.
Usually a tag is replaced with the value of a database field that has the same name as the tag.
An example of a tag is:
{employee_name}

Blocks
Blocks mark HTML sections for possible replacement or removal during run-time.
For example, forms generated with CodeCharge Studio are embedded within HTML between block comments that
indicate starting and ending position of the form, thus making it a Block that later can be removed, for example to hide a
form from unauthorized users.

The example below shows an Error Control block that is a part of a Search Form and displays error message, for
example if a required field doesn't contain data. An {Error} tag is also shown, which will be replaced during run-time with
an error message or removed if not needed.

<!-- BEGIN Error -->

<tr>
<td colspan="2" class="KnockoutDataTD">
{Error}
</td>
</tr>
<!-- END Error -->

Templated technologies
The methodology utilized by CodeCharge Studio to separate programming code from HTML.
CodeCharge Studio generates two versions of most of the languages it works with:
Templated, such as PHP&Templates or ASP&Templates, where generated programs utilize templates
Non-Templated, such as PHP or ASP, where HTML is embedded within generated programs

The main difference between the two is that Templated technologies utilize HTML templates during both the design-time
and run-time, while Non-templated technologies utilize HTML templates only during the design-time.
A Developer may switch between Templated or Non-templated technologies at any point during design of his web
application. The only difference will be in the generated code, where for example generating ASP&Templates would
result in 2 files: an .asp program and an .html template, while generating ASP would result in generating single .asp
program file.

Query string
Query string is a string containing variable names and their values. It is commonly used to pass some input variables to a
page by appending the string to the page's address. Query strings are unique to Web applications (versus client-server
and other forms of software applications) because Web applications are stateless and a variable set on one Web page
usually cannot be retrieved on another Web page unless it is passed between pages in the form of a query string or a
session variable or a cookie.

18
1.9 End User License Agreement
End-User License Agreement for CodeCharge Studio 2.1 ("Software")
Copyright (c) 2000-2003 YesSoftware, Inc.
All Rights Reserved.

BY DOWNLOADING AND/OR IMPLEMENTING THIS SOFTWARE YOU AGREE TO THE FOLLOWING LICENSE:

DEFINITIONS
"You" and "Licensee" refers to the person, entity or organization which is using the Software known as "CodeCharge
Studio", and any successor or assignee of same.
"YesSoftware" refers to YesSoftware, Inc. and its successors, or manufacturer and owner of this Software.

AGREEMENT
After reading this agreement carefully, if you ("Customer") do not agree to all of the terms of this agreement, you may not
use this Software. Unless you have a different license agreement signed by YesSoftware that covers this copy of the
Software, your use of this Software indicates your acceptance of this license agreement and warranty. All updates to the
Software shall be considered part of the Software and subject to the terms of this Agreement. Changes to this Agreement
may accompany updates to the Software, in which case by installing such update Customer accepts the terms of the
Agreement as changed. The Agreement is not otherwise subject to addition, amendment, modification, or exception
unless in writing signed by an officer of both Customer and YesSoftware.
If you do not wish to agree to the terms of this Agreement, do not install or use this Software.

1. OWNERSHIP OF SOFTWARE AND COPYRIGHTS.

The Software is copyrighted and protected by the laws of the United States and other countries, and international treaty
provisions. You may not remove any copyright notices from the Software.
YesSoftware may make changes to the Software at any time without notice, but is not obligated to support or update the
Software.
Except as otherwise expressly provided, YesSoftware grants no express or implied right under YesSoftware patents,
copyrights, trademarks, or other intellectual property rights. You may transfer the Software only if the recipient agrees to
be fully bound by these terms and if you retain no copies of the Software.

2. GRANT OF LICENSE AND PROHIBITIONS.

Title to all copies of the Software remains with YesSoftware.
This Software is licensed to you. You are not obtaining title to the Software or any copyrights. You may not sublicense,
rent, lease, convey, translate, decompile, or disassemble the Software for any purpose.
The license may be transferred to another Licensee if you keep no copies of the Software. Permission must be obtained
before mirroring or redistributing the evaluation copies of the Software.
You may not convert this Software or its parts to a different computer language or environment, either manually, or using
an automated conversion tool, such that this Software or any modification thereof will run under any language, software,
or program other than implemented by YesSoftware. You agree that any modifications made to this Software belong to
YesSoftware and are permitted for your exclusive use during the period of this License Agreement, and may not be
transferred, sold or licensed to another entity.

3. USE AND EVALUATION PERIOD.

You may install and use one copy of this Software on one client computer for software development purposes.
Subsequent installations require you to obtain additional licenses unless you are transferring this Software to another
computer.
You may not network this Software or otherwise use it on more than one computer or computer terminal at one time.
You may not lease or otherwise rent the Software, but you may transfer the Software and accompanying written materials
on a permanent basis provided the recipient agrees to the terms of this Agreement.
You may not sublicense or permit simultaneous use of the Software by more than one user.
If you are evaluating this software, you may use an evaluation copy for the maximum of twenty (20) days in order to
determine whether to purchase this Software.

19
4. LIMITED WARRANTY.
THE SOFTWARE IS PROVIDED AS IS AND YESSOFTWARE DISCLAIMS ALL WARRANTIES RELATING TO THIS
SOFTWARE, WHETHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.

5. LIMITATION ON CONSEQUENTIAL DAMAGES.

NEITHER YESSOFWARE NOR ANYONE INVOLVED IN THE CREATION, PRODUCTION, OR DELIVERY OF THIS
SOFTWARE SHALL BE LIABLE FOR ANY INDIRECT, CONSEQUENTIAL, OR INCIDENTAL DAMAGES ARISING OUT
OF THE USE OR INABILITY TO USE SUCH SOFTWARE EVEN IF YESSOFTWARE HAS BEEN ADVISED OF THE
POSSIBILITY OF SUCH DAMAGES OR CLAIMS. IN NO EVENT SHALL YESSOFTWARE'S LIABILITY FOR ANY
DAMAGES EXCEED THE PRICE PAID FOR THE LICENSE TO USE THE SOFTWARE, REGARDLESS OF THE FORM
OF CLAIM. THE PERSON USING THE SOFTWARE BEARS ALL RISK AS TO THE QUALITY AND PERFORMANCE
OF THE SOFTWARE.
IN NO EVENT WILL YESSOFWARE BE LIABLE FOR ANY AMOUNT GREATER THAN WHAT YOU ACTUALLY PAID
FOR THE SOFTWARE.

6. TERMINATION.
This Agreement is effective until terminated.
This Agreement terminates on the date of the first occurrence of either of the following events: (1) The expiration of one
month from written notice of termination from Customer to YesSoftware; or (2) At any time if you violate the terms of this
Agreement.
Upon termination you shall destroy the written materials and all copies of the Software, including modified copies, if any.
You agree that monetary damages alone is not an adequate and just relief resulting from any breach of this License, that
a court order prohibiting any further breach of this License is necessary to prevent further damages, and that you will not
oppose any reasonable request for a temporary restraining order, preliminary injunction, or other relief sought by
YesSoftware in the event of a breach of this License.
YesSoftware shall not be required to notify you of any breach, nor make any demand or claim against you resulting from
any such breach, or for a demand to stop any use or distribution in violation of the terms of this License, and you agree
that any breach of this License and damages resulting therefrom shall relate back to the first and earliest breach thereof.
Failure of YesSoftware to enforce its rights pursuant to this License shall not constitute a waiver of such rights, and shall
not prejudice YesSoftware in any later enforcement of its rights or rights to seek damages therefrom.

7. UPGRADES.
If you acquired this Software as an upgrade of a previous version, this Agreement replaces and supercedes any prior
Agreements. You may continue to use the previous version of the Software, provided that both the previous version and
the upgrade are installed on the same computer at all times. You may not have a previous version and the related
upgrade version installed on separate computers at any time.

8. ENTIRE AGREEMENT
This End-User Agreement is the entire agreement between you and YesSoftware relating to the Licensed Software, and
supercedes all prior written or oral statements, promises, representations and agreements.

9. GOVERNING LAW.
The agreement shall be governed by the laws of the State of California. Any action or proceeding brought by either party
against the other arising out of or related to this agreement shall be brought only in a state or federal court of competent
jurisdiction located in San Mateo County, California. The parties hereby consent to the personal jurisdiction of such
courts.

10. U.S. GOVERNMENT RESTRICTED RIGHTS.

This Software is provided with RESTRICTED RIGHTS. Use, duplication, or disclosure by the Government is subject to
restrictions as set forth in subparagraph (c)(1)(ii) of the Rights in Technical Data and Computer Software clause at
DFARS 252.227-7013 or subparagraphs (c)(1) and (2) of the Commercial Computer Software -- Restricted Rights clause
at 48 CFR 52.227-19, as applicable. Contractor is:

YesSoftware, Inc.

20
6330 S. Eastern Ave. #5
Las Vegas, NV 89119
E-mail: [email protected]

1.10 For More Information

CodeCharge Studio provides a rich array of options for generating sites that correspond to common business
applications. The depth of automation in the process, the degree to which the resulting pages can be integrated into an
existing site, and the level of customization offered to the web designer support superior productivity with a high degree of
attractiveness in the end result.
If you have questions, go to http://www.gotocode.com, the CodeCharge Studio developer community site, to get
answers and pointers. Or visit http://support.codecharge.com for the latest bulletins, product updates or to submit
email support requests.

6330 S. Eastern Ave. Suite 5

Las Vegas, NV 89119
USA
Telephone: + 1 (888) 241-7338
Fax: + 1 (866) 312-8049
[email protected]
http://www.codecharge.com

21
2. Introduction to Web Programming

2.1 Introduction to Web programming

Many developers and programmers face the dilemma of how to begin a web development project. While many
developers can create extensive desktop applications with ease, they are not well versed in creating web applications.
Most developers have some level of familiarity with HTML as well as the deployment of static pages on web servers.
With the Internet playing an increasing role in most application development efforts, it can be expected that there will be
an increasing need for web applications. Sometimes legacy systems require the creation of a web-interface, for example,
to allow a company's customers to lookup their order status online.
To assist in the transition, and to understand the general architecture of the web and web applications, the following
information provides an introduction to the realm of web application development for developers who are new to this field.

2.2 The Internet

The Internet is a network of computers. If you dial-in from home to America Online or an Internet Service Provider (ISP),
your computer is connected to the Internet.
Every device on the Internet has a unique Internet Protocol (IP) address. This is a 32-bit number that allows your
computer to be found by other computers. This IP address is assigned to you dynamically by the ISP when you connect
to its computers, and may change each time you connect to the system. Alternatively, if you use a high-speed connection,
such DSL or cable, you may have a static IP address that never changes. You can usually view your IP address on a
Windows computer by using the command "ipconfig /all".
To find out who owns a particular IP address, you can search for it at ARIN's web site (http://www.arin.net/), a non-profit
organization that assigns and maintains the IP addresses for North America.

2.3 Connecting to the Internet

If you are connected to the Internet from your workplace, you are usually not connected directly, but via a router which is
used to join two networks. A router that connects a private network to the Internet is also known as a gateway.
The router "routes" the traffic between computers and networks and sends the packets of information to the destination
through the shortest available path on the network. If you send information to the computer next to you, for example, the
router does not need to send anything to the Internet. However, if you want to view a web page on the Internet, the router
will send your request to another gateway that it determines as being closest to the destination server.
If you connect to the Internet from home, you will need a router, bridge, or a modem to translate signals from your local
computer or network to the format needed to enable data to travel to and from the Internet. The modem is usually used to
connect a single computer to the Internet via an ISP by converting digital data into analog signals for transmission over a
telephone line. If you use a DSL connection, you can connect to the DSL line via a DSL bridge or router. The bridge
converts the DSL signal to the format used by your local network and can be used to directly connect several computers
to the Internet. A DSL router is more expensive, but can provide an Internet connection for your entire local area network.
A router can also include a proxy server that provides the ability to share a single IP address among multiple computers
connected to the Internet. This preserves the number of IP addresses you use and adds extra security since the public IP
address belongs to the router and your local computers cannot be accessed from the Internet without a valid IP address.
Another function of a proxy server is to store and cache the data, so that local computers can obtain some of the
frequently accessed information without connecting to the Internet.

22
2.4 Using a Firewall for Secure Internet Access
Computers that are publicly accessible via the Internet are exposed to various security risks such as hacking or virus
infections on your computer. Due to these risks, it is recommended that you use a firewall, which filters unwanted
requests that may come via the Internet.
The firewall can be setup to meet specific criteria and filter both incoming and outgoing traffic. Many firewalls also act as
proxy servers and routers allowing you to use a single device for all your Internet connectivity needs. Due to the increase
in security risks, firewall popularity has grown exponentially and Windows XP currently includes a simple built-in firewall.

2.5 Web Servers

Now that you have a better understanding of Internet connectivity, you should understand how an actual web site
functions on the Internet.
When you surf the Internet, your browser acts as the client that connects to various web servers and displays the
information returned from a server. Your computer can also act as a web server if you install and run a Web server
application, such as Personal Web Server (PWS), IIS (Internet Information Services) or Apache.
The web server listens for incoming Hypertext Transfer Protocol (HTTP) requests and responds by sending back the
appropriate information. HTTP is an Internet protocol that defines the format used to exchange information over the
Internet. HTTP requests usually come from browsers in the form of a URL, which is then used by the web server to
determine which file should be sent back to the browser, such as an HTML page or an image.
Many popular web servers are freely available. You can download Apache for Linux, Windows, or another platform from
http://httpd.apache.org/. IIS is included in Windows 2000 and Windows XP Professional. PWS is available for Windows
95/98 and Windows NT. Although Windows XP Professional comes with a web server, unfortunately the Standard
Windows XP doesn't come with a web server and setting one up is very tricky.
Once your web server is up and running, you should be able to access it by starting the browser on the same computer
and using the URL http://localhost. You can also test the server from another browser by typing your computer's IP
address as the URL. If your computer is on a local network within a company, you can ask your colleagues to try typing
your computer's name into the address field in their browser. This should work as well and display the default web page
setup during server installation.

2.6 Running Programs on a Web Server

Besides serving static HTML pages, many web servers can also execute programs that create the HTML output for the
browser. To do this, the web server must be running a server-side programming language. Some of the most popular
languages are PHP, ASP, Java, PERL, ColdFusion, and now VB.NET and C#.
The most popular web server, Apache, doesn't directly support any specific programming language, but is very often
configured to work with PHP, Java, or PERL. You can also install any of the other supported languages yourself.
Windows based web servers usually support ASP (Active Server Pages) applications that are written in VBScript, a
simplified version of Visual Basic. The newer, .NET servers can execute VB.NET and C# programs.
If you do not have experience with these languages, you can use a code generator, such as CodeCharge
(http://www.codecharge.com) to generate your web applications in many popular technologies.

2.7 Obtaining a "Permanent" Web Server

Assuming that you already have, or plan to have content that you'd like to make accessible to other Internet users, you
will need a web server that is always running. If you have a high-speed connection at your home, you may be able to run
a web server on your local computer, as long as your computer always stays on (or whenever you want your server to be
accessible) and your IP address doesn't change. You'll need to find out from your ISP if your IP address is static or
dynamic.
A dynamic address is reassigned to you each time you connect to the Internet and the address will probably be different
on each connection. Therefore, if you provided others with your dynamic IP address to access your web server, you
would need to resend the IP address each time it changed, which is obviously inconvenient.

23
A reliable and commonly used option is to find a web hosting company that has a web server installed and running 24
hours a day. Unless you purchase a dedicated server, you will usually obtain a space on a shared server that hosts
hundreds of web sites. This is often called virtual hosting. The hosting company divides the space on their server's hard
drive into partitions which they then allocate to domain names that they host. Visit TopHosts (http://www.tophosts.com/) to
find a hosting company that matches your needs. If you plan to create Web applications, make sure that the plan you
choose includes database hosting such as MS Access, MS SQL, or MySQL.

2.8 Domain Names

When you purchase a hosting plan, you will be asked to transfer or obtain a domain name for your web site. The domain
name is a string of characters and numbers, usually a set of words that is easier to remember than the IP address that is
assigned to your computer.
The domain names are stored in a Domain Name Server (DNS), which is part of a distributed database system that is
queried whenever someone requests a URL or machine name. The DNS facilitates the location of a host where, when
you type a URL in your browser, the browser is able to lookup the IP address then send an HTTP request to the correct
web server.
To obtain a domain name, you need to find one that is available and purchase the rights to use it on an annual basis. You
can check the availability of the name you want at http://www.register.com/ and if your domain is available, you can buy it
there as well. If you want to buy multiple domain names to reserve for future use, you can use a less expensive, bulk
alternative, such as http://www.namebargain.com/.

2.9 Creating HTML Content

Assuming that you have acquired a web service, the next step is to create content that you'd like other people to see. The
Internet is best suited for serving documents written in Hypertext Markup Language (HTML). HTML is a very simple
language that uses tags to specify the content of a page rendered in a browser (e.g., font size and color, the position and
size of images, and other elements on the page). The basic structure of HTML documents consists of the tags and format
of Listing 2-1.
Listing 2-1: Basic HTML Structure
<html>
<head>
<title>
This is the document's title.
</title>
</head>
<body>
This is the document's body
</body>
</html>
You can copy and paste the above text into notepad, save the file as test.html, and open it in your browser. You should
then see the message This is the document's body.
Instead of manually writing HTML, you can use any of the available HTML editors, such as Microsoft FrontPage, Adobe
GoLive, and Macromedia DreamWeaver to visually design the page then generate the HTML. Each of these editors can
easily be integrated into CodeCharge Studio for a familiar web development experience.

What is Dynamic HTML (DHTML)

Dynamic HTML (DHTML) is a script-based program executed by the Web browser. Such programs can be written in a
client-side scripting language such as JavaScript or VBScript. For example, the server can include VBScript or JavaScript
code within the HTML, which can be loaded and executed by the browser to perform various tasks without contacting the
server until a later stage. Note however, that browsers don't have direct access to the database and cannot read or
update the data without sending a request to the server. Thus, DHTML cannot be used by itself to create database-
enabled Web applications, but it can be used to offload from the server certain tasks that can be performed by the client.
For example, the validation of form field values can be performed entirely on the client side. One negative aspect of using

24
DHTML is the lack of standards among various browser types. Some Web browsers may not be able to process specific
DHTML pages, or may display them differently.

2.10 Publishing Web Content

When you create content, you will need to publish it to your web site to be visible on the web itself. You can do this by
copying the files you created to a specific location on your web server that is used specifically for web pages. Each web
server has a configuration screen or a file where you can specify the main disk folder that maps to the root of your web
site.
The files placed in the folder, or its subfolders, automatically become available on the web. For example, if you copy a file
Page.html to the test sub-folder on your web server, this page should be accessible via a URL such as
http://www.mydomain.com/test/Page.html, where www.mydomain.com can be replaced with your own domain name, or
the IP address if desired. When users request the URL in their browser, the browser will contact the web server, which
will send the contents of the corresponding file back to the browser.

2.11 Type of Websites

Static
A static web site is one in which the pages contain hard-coded content. All of the content is edited and added using a
standard editor and saved as a file with a .htm or .html file. When a user accesses the page, the page is loaded and
displayed. Content is only changed through an editor by the page developer.

Dynamic
Dynamic web sites, also referred to as web applications are programs that run on the web server and submit HTML to a
web browser on a client computer. These programs can be written in the same languages as standard Windows and
UNIX applications, although certain languages are better adapted to take advantage of the web.
For example one of the most popular programming languages, Visual Basic, was adapted for web use in the form of
VBScript on which most ASP programs are based. The latest modern web technologies utilize Java and .NET, both of
which have roots in C++. If you are already developing Windows or other client/server applications, you should be able to
create web applications as well. However, the main difference lies in the output, whereby in standard applications you
print text at specific screen coordinates or set the value of an object that is drawn on the screen, while with web
applications you would print HTML formatting tags with the text mixed-in so that it is shown properly formatted in the
desired place on the page.
The latest technologies, like CodeCharge Studio, make it possible to design the HTML page, then place various active
objects in desired positions on the page. This approach reduces the amount of time and effort required in creating full
web applications.

2.12 Benefits of Using Web Technologies

Web technologies confer many benefits over other technologies, including client/server. These include:
• Less Expensive Infrastructure: Since every desktop can be equipped with a free browser, the users only need
inexpensive, low maintenance computers that run the browser software.
• Rapid Software Distribution: Thanks to the web, there is no need to distribute new software to any of the client
browsers. Once programs are updated on the server, users can instantly see the changes the next time they load the
page into their browser. Troubleshooting is also improved since most issues can be investigated and resolved on the
server.
• Low Network Usage: In a web environment, the client application (browser) doesn't access the database over
the network to retrieve or update the data. The browser only sends instructions to the server with as much
information as necessary to execute the server program. The server software is responsible for communicating with
and retrieving any content from the database and composing the page to be sent back to the client. As such there is

25
 no need to exchange large amounts of data. Because of this, web applications often run faster than applications
based on fat clients.
• Platform Independence: Most web applications can be accessed through a variety of web browsers, such as
Internet Explorer, Netscape Navigator, Opera, and Lynx. Web browsers exist for virtually any operating system and
since they receive only the HTML document, it is irrelevant if document is being viewed on Windows, Linux/UNIX,
Mac, or any other system. Additionally, certain web applications are accessible through wireless devices equipped
with a browser and Internet connection.
• Usage Accounting: Developers can find out how many times the web application is accessed, something which
may not be possible when distributing standalone applications to customers. Because of the web, the vendor can
also offer a per-usage fee structure.

2.13 Challenges Encountered Using Web Technologies

Although it has many benefits, the Web also carries certain challenges:
• Limited Interactivity: Interactivity is limited since a web page cannot communicate with the server in real-time
except when the page is submitted to the server by the user. For example, if a program needs to populate a
particular list box field, it needs to refresh the whole page when the user reaches a particular field on the screen.
• Lack of Skills: The web is still foreign to many developers who have been busy developing mainframe,
client/server, and standalone applications. These developers are often unfamiliar with web technologies, web
programming, and web scalability issues.
• Security Risks: Utilizing the web exposes the company's network to new security risks and programming
vulnerabilities that can expose private data to the public.
• Browser Compatibility: Unfortunately, the competition between web browsers has resulted in many differences
in supported standards, thus creating confusion between users, and more importantly, compatibility issues with web
applications. It is recommended that you test your web application with several browser versions, on several
operating systems. A useful tool for this task is NetMechanic's Browser Photo service at
http://www.netmechanic.com/browser-index.htm.
• Lack of Web Development Tools Until Recently: The development of web applications is time-consuming due
to the lack of professional web development tools. The available tools are usually coding environments that require a
solid programming foundation and experience. Only recently have new tools become available that facilitate the
creation of web applications with little programming experience. These include Macromedia Dreamweaver MX,
Microsoft Visual Studio.NET, and YesSoftware CodeCharge products. Of these, CodeCharge is perhaps the most
useful because it automatically generates programming code in a variety of programming languages, and enables
users to learn by examining and tweaking the code.

2.14 Architecture of Web Applications

Generally, web applications use the client/server architecture (i.e., two-tier) where the browser acts as a thin client.
However, the three-tier architecture is becoming more popular and even necessary when implementing enterprise
systems that require better scalability.

Application Servers
An application server is the middle tier in the three-tier architecture. Application servers process the business logic on the
Web server and communicate between the web browser and the database, or another system.

Web Services
Web Services are programs that do not output information to the screen or Web browser but instead send the output to
other programs in the form of XML. Similarly, they do not take input from users via the keyboard, but rather read the
information send to them by other Web services in XML format. Thus Web services allow programs to exchange
information across the internet and even allow running of remote applications as part of a local software system.

Cookies

26
Cookies are small amounts of data sent by a program to the browser and stored on the user's machine to be retrieved
later. They are usually used to recognize users who come back to visit the same Website again, after several hours, days
or months.

Session Variables
Session variables are similar to standard local variables, but are used to store information that can be retrieved by other
pages during the course of a user session. Session variables usually store information in a special session file on the
server, and use a cookie to store corresponding information on the client. You would usually create a session variable to
store the ID of users when they log in. In fact, the action of logging in often consists of just creating a session variable by
the server program.

Application Variables
Application variables are also available to all pages in one Web application. However, they can be accessed by all users,
not just the current session. They are cleared when the server is restarted.

GET and POST methods

When you create Web pages that contain data entry fields, the fields should appear between the <form> and </form>
tags which make up a form. The form tag has additional attributes, one of them being Method="GET" or Method="POST".
This method indicates how the information entered on the form should be submitted to the server when the user clicks the
"Submit" button. The "POST" method causes the information to be sent via a data stream, invisible to the user. If "GET"
method is used, the browser will redirect the page to a new URL, which will be constructed from the base URL (also
specified by a form parameter), followed by a question sign (?) and all form information separated by an ampersand sign
(&).
For example, if a form asks the user to provide the first name and the last name, after submitting the form, the user would
be redirected to a URL like this one: http://www.mysite.com/page1.asp?first_name=James&last_name=Bond.
Users can manually emulate form submission by entering into their browser a URL that contains information similar to the
one submitted via a form. Of course, the server program that is being executed should accept and process only the
information that it uses.

2.15 Choosing Web Technology

Making technology choices is one of the most difficult yet critical decisions at most organizations. It happens quite often
that even after the web application is built, future developments may require that the application to be converted to
another programming language or integrated with software that utilizes a different technology. CodeCharge Studio makes
it easier to convert a web application created with it from one language to another, yet it can still be quite consuming
when the application is large and complex.
Technology decisions are often based on the available budget, the operating system preference and available database.
Here we describe how these factors influence your decision. But, note that the following subsections are meant for
informative purposes to those who are new to web development and do not yet have a technology preference. Ultimately,
the final decision is up to you and you should always perform proper research before making long-term decisions.

Cost
If you're looking for the most inexpensive solution then you've probably heard that Linux with the Apache web server,
MySQL database, and PHP scripting engine can be obtained and installed for free. This is also the technology of choice
for many small web sites, though it is also used with large web projects, such as parts of the Yahoo web site. Some
flavors of Java for Linux can also be obtained at no cost, as well as PERL.
Another popular alternative is Windows with IIS and MS Access running ASP or .NET programs. This environment can be
installed at a cost below $500, but at some point you could outgrow MS Access as it is a limited database sufficient for a
small number of users. The CodeCharge community Website, http://www.gotocode.com successfully used MS Access for
over a year. However, we found that the server occasionally crashed when more than 10 users submitted information at
exactly the same time. Thus the recommended alternative for Windows users is to use MS SQL database, although this
brings the cost of the system to over $1,000 and even much more if you plan on implementing a scalable, multi-server
solution. If you're willing to spend the extra money then you can also consider obtaining ColdFusion or Java for either
Linux or Windows.

27
If you do not require to have your own dedicated server, then you can easily find many web hosting companies that offer
both Linux and Windows Web hosting plans for anywhere between $10 and $50, or more, for advanced needs. The price
usually covers support for a variety of technologies, including PHP, Java, PERL, and ColdFusion for the Linux platform as
well as ASP, .NET, Java, and ColdFusion for the Windows platform.

Operating System Preference

If you love the Linux operating system or your management requires the use of Linux for web hosting then you are most
likely to use the Apache web server and a MySQL database running PHP, Java, or ColdFusion applications. Choose PHP
if you're new to the web and do not have specific requirements. Otherwise, if you need to make a long-term decision, then
it is important that you research all available technologies.
If you prefer the Windows operating system, or Windows is your organization's standard, then you'll most likely use it with
the IIS web server and MS SQL database running ASP or .NET (C# or VB) programs. Choose ASP if you need a
technology that is easy to understand and learn, but keep in mind that Microsoft's current focus is on .NET technologies,
thus you should strongly consider using it sooner rather than later. It is also possible that ASP will be slowly phased out
and not available in future versions of Windows. If you're already familiar with any object-oriented technologies, then
.NET is probably the best choice for you anyway. C# is derived from C++, while VB.NET is derived from Visual Basic but
adapted to support object-oriented programming constructs similar to C#.

Database
If you already have an existing database and want to create a web interface for it, then your technology decision may be
related to the type of database. For example, if you use a Windows compatible database, such MS Access or MS SQL,
you should probably consider using the ASP or .NET technology on a Windows-hosted IIS server.
If your existing database is MySQL, then you are probably already familiar with Linux and you may want to consider using
it with PHP. If you do not have a database yet, then you should first become familiar with the database concepts and
create your database for use with CodeCharge Studio. Choose MS Access if a visual interface and ease of use is
important to you, or choose MySQL if you need better scalability and don't mind learning a little bit of SQL.
Also refer to the section "Setting up the work environment" for additional information.

28
3. Getting Started

3.1 Downloading CodeCharge Studio

You can acquire a copy of the CodeCharge Studio installation executable from the CodeCharge web site at
http://www.codecharge.com. The installation features a 30-day trial period that allows prospective users to test run the
system before deciding on whether to make a purchase. Note that both licensed users and trial users download a fully
functional version, but it is time-limited unless activated using a valid serial number.

3.2 Installing CodeCharge Studio

Before beginning the installation process, you should ensure that your system meets the requirements stipulated in
Section "Prerequisites".
To begin the installation process, locate the CodeCharge Studio setup file and double-click on it. Before you can proceed
with the installation process, you should read and agree to the License Agreement. Click on the Yes button to indicate
your acceptance of the License Agreement and proceed to the next step.

Figure 3-1: License Agreement

In the next window, you are presented with fields to enter your name, company name, and serial number. If you don't
have a serial number and want to take advantage of the 30 day trial period, simply enter Trial in the Serial Number field.
Click Next to proceed.

29
 Figure 3-2: User Information and Serial Number
In the following window, confirm or specify the destination folder where you want CodeCharge Studio to be installed. The
default recommended path for installing CodeCharge Studio is C:\Program Files\CodeCharge Studio. However, if you
wish to change this path, click Browse and specify an alternate path. Once completed, click Next to proceed to the next
step.

Figure 3-3: Destination Installation Location

30
In the next window, you are presented with three setup options from which to choose. The Typical option installs all the
CodeCharge options. The Compact option installs the CodeCharge application files but does not install the examples or
Microsoft Jet 4.0. Finally, the Custom option allows you to select the specific components to be installed.

Figure 3-4: Installation Options

If you selected the Typical or Custom installation options, you are then presented with the window of Figure 3-5 that
shows the components to be installed. You can then specify the components that you want installed.

Figure 3-5: Installation Component Selection

31
After all the necessary files have been installed and configured, you will then be presented with the window of Figure 3-6
to confirm the success of the installation. If you have both CodeCharge and CodeCharge Studio installed on the same
machine, you have a choice of deciding the default application to be used to open files with the (.ccs) extension. If only
CodeCharge Studio is installed on the machine, you should associate the .ccs extension with CodeCharge Studio.
At this point, if you want to launch CodeCharge Studio, you can select the Launch CodeCharge Studio checkbox then
click on the Finish button to complete the installation process.

Figure 3-6: Installation Complete

If you installed CodeCharge Studio in trial mode, you have 30 days during which to evaluate the fully functional software.
When you launch the software, a flash screen will show the number of days remaining for the evaluation. The screen will
also have four buttons, one of which will be the Try button. Click on this button to start using the software in trial mode.
On the same flash screen, there will also be an Activation button that can be used to activate the software using a valid
serial number. This can be done by entering the serial number directly into the activation window. Alternatively, you can
use a browser to navigate to the web address indicated in the activation window. Use your Serial Number and
Installation Code to acquire an activation key. Once received, enter the key into the Activation Key field. Click OK to
complete activation.

32
 Figure 3-7: CodeCharge Studio Activiation

3.3 Upgrading, Repairing or Uninstalling CodeCharge Studio

In the event that a current CodeCharge Studio installation is corrupted or otherwise damaged, you can run the same
setup file to modify or repair the installation or remove it entirely. To initiate the process, double-click on the setup file to
begin the process.
In the window of Figure 3-8, select whether you want to Modify, Repair, or Remove the current CodeCharge Studio
installation then click the Next button.

33
 Figure 3-8: Application Modification Window
For the Modify option, you will be presented with a list of components that you can install or remove. To install a currently
unavailable component, activate its respective checkbox. Similarly, to uninstall a component that is already installed,
uncheck its checkbox. After making your selections, click the Next button to proceed.

Figure 3-9: System Modification Options

If you selected the Repair option, the wizard will now proceed to check the current installation and repair any problems
that may be diagnosed while a dialog window shows the progress of the repair operation.

Figure 3-10: System Repair Option

34
If you selected the Remove option, you will be presented with a dialog window asking you to confirm whether you want to
proceed with the removal. At this point, you can either cancel and return to the main installation window or proceed with
the un-installation.

Figure 3-11: System Removal Option

Finally, when all the operations have been completed successfully, a window appears to confirm the completion of the
maintenance process. Click on the Finish button to close the dialog box.

Figure 3-12: Maintenance Completion Dialog

3.4 Starting CodeCharge Studio

To start CodeCharge Studio select Start | Programs | CodeCharge Studio | CodeCharge Studio in Windows. From
Figure 3-13, CodeCharge Studio displays a splash screen when it loads, and it prompts you to create a new project or
open an existing one.

35
 Figure 3-13: Opening Project Selection Window
If you like to create a new project (i.e., web application) then select New project and click OK. If you would like to open
an existing project, choose and double-click it in the list of recently opened projects, or select More Files... and click OK
to browse and find the project on your computer.
If you are evaluating CodeCharge Studio and have not registered it, CodeCharge Studio displays a splash screen with
several options that allow you to view the license agreement, try the product, activate it, or exit. If your evaluation period
has expired, the Try button will be disabled and you will have a choice to activate the product or exit by selecting the Quit
button.

Figure 3-14: Evaluation Copy Splash Screen

Product Activation
When you purchase CodeCharge Studio, you will receive a Serial Number that allows you to activate the product and
remove the 30-day trial protection (20-day in some versions). Product activation also removes the message Generated

36
with CodeCharge Studio, which is included at the bottom of web pages generated by the trial version of CodeCharge
Studio.
To activate CodeCharge Studio select Tools | Activate Product ... from the CodeCharge Studio menu, or press the
Activation button on the initial splash screen that is shown after CodeCharge Studio is launched. In the CodeCharge
Studio Activation dialog of Figure 3-15, enter the information that identifies you as a registered user. Note that the Name,
Company, and Address are optional, but the Serial Number is a required field. Once you enter the Serial Number and
other information, click OK to activate the product via the Internet.
CodeCharge Studio attempts to connect to a server that validates the Serial Number and provides an Activation Key that
activates CodeCharge Studio. If you are behind a firewall, or don't have Internet access from the host computer, auto-
activation is not possible. In such a case, uncheck the Auto-activation through the Internet option and visit the URL shown
on the screen to obtain the activation key. You can also email [email protected] to obtain the activation key via
email. In such case please include both your serial number and the Installation Code shown on the activation screen.

Figure 3-15: CodeCharge Studio Activation Dialog

Once the activation key is obtained and the software is activated, the dialog of Figure 3-16 is displayed.

Figure 3-16: Successful Activation Dialog

3.5 What You Need to Get Started

Having setup CodeCharge Studio, you are almost ready to start generating and viewing dynamic database driven web
pages. To use CodeCharge Studio to produce Web applications you will need the following:

Database
As you may be well aware by now, CodeCharge Studio works in concert with a database, which should be put in place
before creating an application with CodeCharge Studio. If you have a Windows web server, the database is usually MS
Access or MS SQL. If your production web server is hosted on Linux, Sun, or another UNIX flavor, then you will most

37
likely use the popular and free database-MySQL. Although MySQL can be accessed remotely, you can also install
MySQL locally on your Windows computer for testing your programs.

Test Web Server

This web server is usually installed on the same desktop computer where you installed and run CodeCharge Studio. It is
used to test web pages during the web application development process. For example when you create a new page, you
can go to Live Page to see how it works-CodeCharge Studio will generate and open the web page. Although you can use
an externally hosted web server for testing, it is usually much quicker to generate programs to your local hard drive and
then have a local web server run them.
Obtaining a web server is quite easy since many Windows operating system come with free IIS, while PWS (Personal
Web Server) is also freely available for Windows 95, 98 and Me. Refer to "Web Servers" of Section 2.4 for more
information.

Note that some organizations also use a staging web server, which allows end-users or customers to perform the final
testing before approving the launch of the site. This also allows developers the ability to continue making changes and
testing on the test web server. Such a server is especially useful if there is already an existing live web site, which you
don't want to replace until your customer or users approve the new web site.

Production or Live Web Server

This is the main web server where you'd publish your final application after it is completed and successfully tested.
In some cases this can be the same server as the test Web Server, although in most cases you'd have a separate,
externally hosted Web server that is publicly accessible. There are varieties of Web hosting companies that offer
Windows-based Web hosting for anywhere between $10 and $50 (or more for advanced needs).

Scripting Engine
Scripting Engines, such as ASP or PHP, are usually pre-installed on most systems that have a web server. Therefore, if
you use a web hosting service, it consists of a web server and one or more scripting engines. Check with your web
hosting provider to obtain the list of supported web technologies or refer to "Choosing Web Technology" of Section 2.14 if
you need help making this decision.

3.6 Setting up the work environment

Considering that there are several different programming languages that CodeCharge Studio generates, plus upwards of
a dozen possible databases, there are obviously many configurations that could be used. Each combination of language
and database has its own unique merits. In each of the following tables, we examine some of the more typical setups for
each language. Note that this is not to say that you cannot use setups beyond those stipulated here.

ASP Setup
A common configuration for the development of ASP applications is as follows:

Development Environment (for the development and testing of applications):

• A Windows desktop computer with an installation of CodeCharge Studio
• A local MS Access database (or a copy of a remote MS Access database) or a local or remote SQL server
• PWS or IIS Web Server with VBScript 5.5 support or higher

Server Environment (for hosting the final application):

• A Windows server, such as Windows NT Server or Windows 2000 Server.
• An MS SQL database
• IIS Web Server with VBScript 5.5 support or higher
For ASP and Templates, Table 3-1 provides a list of applicable operating system, web server, database, and language
version options.

38
 Table 3-1: ASP Setup

Server Operating System Windows 95, Windows 98, Windows NT, Windows 2000, Windows XP
Web Server Internet Information Services (IIS) 4.0 or 5.0, Personal Web Server

Scripting ASP 3.0 with VBScript 5.5+

Engine/Language
Microsoft Access, MS SQL Server, Oracle, MySQL, PostgreSQL, DB2, FoxPro, or other
Database Server database via ODBC

The following is a list of steps that should be performed to setup and test the environment where the ASP pages will be
published. These steps don't have to be followed strictly in the order in which they are presented here.

Install and configure the web server software

.
Some versions of Windows such as Windows NT Server, Windows 2000 Server and Windows XP Professional have the
option of installing IIS server during the operating system installation process. Alternatively, the server can be installed
later from the operating system setup CD. If your version of Windows does not allow the installation of IIS (e.g. Windows
98), you can install Personal Web Server (PWS) which is a scaled down version of IIS Server. The CodeCharge website
carries a tutorial which contains more information about installing and configuring PWS.

Test the Web Server

After installing the web server software, you should run a test to make sure that the server is functioning properly. For a
server that has been installed on the local machine, the URL http://localhost/ or http://127.0.0.1/ can be used to test the
server. When you type in this address, you should be able to see the default page in the root directory of the server. In
particular, you should test a .asp page since this is the language you will be generating pages in. By default, the IIS
server will bring up the .asp page (http://localhost/localstart.asp). Both IIS and PWS come with extensive documentation
which you should consult for detailed setup, configuration and testing instructions.

Setup the Database

Once you confirm that you have a fully functional web server, you should then make sure that you have a suitable
database to use. In the case of ASP, the easiest database to use would be Access. In order for the web pages to be able
to use the Access database, the security settings for the database have to be setup correctly. Make sure that the
database file is not opened in exclusive mode by any other user. Using Windows Explorer, right-click on the database file
and open the properties dialog. Under the security tab, make sure everyone has access to the file or at the least the
IUSR_MachineName account should have Read and Write Permissions on the file. The IUSR_MachineName account is
the account which is used by the web server to access the database.
If you are using a different database such as MS SQL server or Oracle, make sure that you have an account in the
database with which you can access the required tables.

Create and Test a CodeCharge Project

CodeCharge Studio comes with a number of example projects which you can easily generate and publish as a way of
testing that you have a functional setup. Each of these examples comes with an Access database as well as a database
script file which you can use to recreate the database. Please refer to the section on the example solutions for detailed
instructions on how to setup and use them.
You can also refer to the Quick Start section within the documentation for step by step instructions on how to create and
publish your first web application as well as the section on deploying ASP projects.

Troubleshoot Errors
If you encounter errors when you attempt to view the published pages, there are a number of things you can do to
troubleshoot the problem. To begin with, you should make sure that you have a detailed error message. If you are using
the Internet Explorer browser, make sure that the Show Friendly HTTP error messages option is disabled under the
Advanced tab of the Internet Options dialog window. Once you have the error message, you can check the
knowledgebase at http://support.codecharge.com/kb_search.asp to see if the matter is addressed there. If you are
not able to find a solution for the problem, you can open a support request at
http://support.codecharge.com/support_new.asp.

.NET Setup

39
A common configuration for the development of ASP.NET applications is as follows:

Development Environment : (for the development and testing of applications):

• A Windows 2000 or Windows XP desktop computer with an installation of CodeCharge Studio
• A local MS Access database (or a copy of a remote MS Access database) or MSDE (recomended) or remote
SQL server
• IIS Web Server 5.0 or higher
• Microsoft .NET SDK 1.0.3705 (Service Pack 2 is higly recomended) or later
• Optional - if using an ODBC connection - ODBC.NET Managed Provider
• Optional - if using an Oracle connection Oracle.NET Managed Provider

Server Environment (for hosting the final application):

• A Windows 2000 or higher server computer
• IIS Web Server 5.0 or higher
• Microsoft .NET SDK 1.0.3705 (Service Pack 2 is higly recomended) or later
• Optional - if using an ODBC connection - ODBC.NET Managed Provider
• Optional - if using an Oracle connection - Oracle.NET Managed Provider
For ASP.Net (C# and VB.Net) projects, Table 3-2 provides a list of applicable operating system, web server, database,
and language version options.
Table 3-2: .NET Setup

Server Operating System Windows 2000, Windows XP, Windows .Net Server
Internet Information Services (IIS) 5.0, (requires installation of the Microsoft .Net SDK
Web Server 1.0.3705 or later)

Scripting C# 1.0 or Visual Basic.NET 1.0

Engine/Language
Microsoft Access, MS SQL Server, Oracle, MySQL, PostgreSQL, DB2, FoxPro, or other
Database Server database via ODBC

The following is a list of steps that should be performed to setup and test the environment where the .Net pages will be
published. These steps don't have to be followed strictly in the order in which they are presented here.

Install and configure the web server software

In order to publish .Net pages, you need to have an installation of the IIS 5.0 server. The IIS server is available on
Windows 2000 and XP Professional operating systems as well as the Windows .Net server which is still in development
as of this publishing. In addition to the IIS 5.0 server, you also must download and install the .Net Framework. This can
either be the .Net Framework redisributable or the .Net Framework SDK (http://www.asp.net/).

Test the Web Server

After installing the web server software, you should run a test to make sure that the server is functioning properly. For a
server that has been installed on the local machine, the URL http://localhost/ or http://127.0.0.1/ can be used to test the
server. When you type in this address, you should be able to see the default page in the root directory of the server.
In order to test whether the .Net Framework was sucessfully installed, you need to test a .aspx page. Please refer to the
documentation that accompanies the .Net Framework for information on how to test that the installation was successful.

Setup the Database

Once you confirm that you have a fully functional web server, you should then make sure that you have a suitable
database to use. In the case of .Net, the easiest database to use would be Access. In order for the web pages to be able
to use the Access database, the security settings for the database have to be setup correctly. Make sure that the
database file is not opened in exclusive mode by any other user. Using Windows Explorer, right-click on the database file
and open the properties dialog. Under the security tab, make sure everyone has access to the file or at the least the
IUSR_MachineName account should have Read and Write Permissions on the file. The IUSR_MachineName account is
the account which is used by the web server to access the database.

40
If you are using a different database such as MS SQL server or Oracle, make sure that you have an account in the
database with which you can access the required tables. Also, if you intend to use an ODBC connection, you need to
download and install the ODBC.Net managed provider as indicated in the table above

Create and Test a CodeCharge Project

CodeCharge Studio comes with a number of example projects which you can easily generate and publish as a way of
testing that you have a functional setup. Each of these examples comes with an Access database as well as a database
script file which you can use to recreate the database. Please refer to the section on the example solutions for detailed
instructions on how to setup and use them.
You can also refer to the quickstart tutorial for step by step instructions on how to create and publish your first web
application. Note that .Net projects have special publishing requirements which you can read about in the section on
deploying .Net projects.

Troubleshoot Errors
If you encounter errors when you attempt to view the published pages, there are a number of things you can do to
troubleshoot the problem. To begin with, you should make sure that you have a detailed error message. If you are using
the Internet Explorer browser, make sure that the Show Friendly HTTP error messages option is disabled under the
Advanced tab of the Internet Options dialog window. Once you have the error message, you can check the
knowledgebase at http://support.codecharge.com/kb_search.asp to see if the matter is addressed there. If you are
not able to find a solution for the problem, you can open a support request at
http://support.codecharge.com/support_new.asp.

ColdFusion Setup
A common configuration for the development of ColdFusion applications is as follows:

Development Environment (for the development and testing of applications):

• A Windows desktop computer with an installation of CodeCharge Studio
• A local MS Access database (or a copy of a remote MS Access database) or a local or remote SQL server
• PWS or IIS Web Server with ColdFusion server

Server Environment (for hosting the final application):

• A Windows server, such as Windows NT Server or Windows 2000 Server.
• An MS SQL database
• IIS Web Server with ColdFusion server
For ColdFusion, Table 3-3 provides a list of applicable operating system, web server, database, and language version
options.
Table 3-3: ColdFusion Setup

Server Operating System

Windows 95, Windows 98, Windows NT, Windows
2000, Windows XP, Unix/Linux
Internet Information Services (IIS) 4.0 or 5.0, Personal Web
Web Server Server, Apache server

Scripting Engine/Language ColdFusion 4.0.1, 4.5, ColdFusion 5.x, ColdFusion MX

Microsoft Access, MS SQL Server, Oracle, MySQL, PostgreSQL,

Database Server DB2, FoxPro, or other database via ODBC

The following is a list of steps that should be performed to setup and test the environment where the Cold Fusion pages
will be published. These steps don't have to be followed strictly in the order in which they are presented here.

Install and configure the web server software

In order to deploy ColdFusion pages, you need a web server which also has the ColdFusion engine installed. The
minimal Cold Fusion version you can use is 4.0.1. This means that you can use any version higher than this i.e. 4.5, 5.0
and MX. Each of these different versions can be installed on a varying number of web servers ranging from Microsoft IIS

41
and PWS to Apache and Netscape Server. Please consult the documentation for the version that you intend to use to find
out which web servers are supported and how to install and configure the Cold Fusion engine on the web server.

Test the Web Server

After installing the web server software and the ColdFusion engine, you should run a test to make sure that the server is
functioning properly. Please refer to the ColdFusion server documentation which includes directions on how to test
whether the server is working correctly.

Setup Database
Database connections in ColdFusion can be made using ODBC DSN's or data sources that are configured in the
ColdFusion Administrator panel.

Create and Test a CodeCharge Project

CodeCharge Studio comes with a number of example projects which you can easily generate and publish as a way of
testing that you have a functional setup. Each of these examples comes with an Access database as well as a database
script file which you can use to recreate the database. Please refer to the section on the example solutions for detailed
instructions on how to setup and use them.
You can also refer to the quickstart tutorial for step by step instructions on how to create and publish your first web
application as well as the section on deploying Cold Fusion projects.

Troubleshoot Errors
If you encounter errors when you attempt to view the published pages, there are a number of things you can do to
troubleshoot the problem. To begin with, you should make sure that you have a detailed error message. If you are using
the Internet Explorer browser, make sure that the Show Friendly HTTP error messages option is disabled under the
Advanced tab of the Internet Options dialog window. Once you have the error message, you can check the
knowledgebase at http://support.codecharge.com/kb_search.asp to see if the matter is addressed there. If you are
not able to find a solution for the problem, you can open a support request at
http://support.codecharge.com/support_new.asp.

JSP Setup
A common configuration for the development of Java applications is as follows:

Development Environment (for the development and testing of applications):

• A Windows desktop computer with an installation of CodeCharge Studio
• Local or remote MySQL database
• MyODBC driver
• Tomcat server
• JDK 1.3 or higher
• Ant build tool

Server Environment (for hosting the final application):

• A Linux server
• MySQL database (local or remote)
• MySQL JDBC driver
• Tomcat Web server
• JDK 1.3 or higher
For JSP and Java Servlets, Table 3-4 provides a list of applicable operating system, web server, database, and language
version options.
Table 3-4: Java Servlets and JSP Setup

Server Operating Unix/Linux, Windows 95, Windows 98, Windows NT, Windows 2000, Windows XP
System

42
 Tomcat, Resin, BEA Weblogic, IBM Websphere, Macromedia JRun, Apache + Tomcat, Internet
Web Server Infomration Services (IIS) + Tomcat, or other Web Server that supports Servlet API version 2.2.

MySQL, PostgreSQL, Oracle, DB2, MS SQL Server, Informix, or other database via JDBC or
Database Server
JDBC-ODBC Bridge

The following is a list of steps that should be performed to setup and test the environment where the JSP pages or Java
Servlets will be published. These steps don't have to be followed strictly in the order in which they are presented here.

Install and configure the web server software

The Servlet engine is implemented by a variety of web servers including Tomcat, Resin, Sun ONE, Weblogic, and
WebSpheher. The procedure for installing the Servlet engine depends on the web server that you are going to use. You
can download the free Tomcat web server along with its documentation from http://jakarta.apache.org/tomcat/.

Test the Web Server

After installing the web server software, you should run a test to make sure that the server is functioning properly. For a
server that has been installed on the local machine, the root URL http://localhost:8080/ or http://127.0.0.1:8080/ can be
used to test the server. Please refer to the documentation for the server you have installed for information on how to
confirm that the installation was successful.

Setup the Database

It is common to use the MySQL database when publishing in JSP. You can download MySQL from
http://www.mysql.com/ where you will also find documentation for the database as well as a link to download the
MyODBC driver which can be used to make an ODBC connection to a MySQL database during desgin time. The MySQL
JDBC driver can be downloaded from http://www.mysql.com/products/connector-j/.

Create and Test a CodeCharge Project

CodeCharge Studio comes with a number of example projects which you can easily generate and publish as a way of
testing that you have a functional setup. Each of these examples comes with an Access database as well as a database
script file which you can use to recreate the database. Please refer to the section on the example solutions for detailed
instructions on how to setup and use them.
You can also refer to the quickstart tutorial for step by step instructions on how to create and publish your first web
application as well as the section on deploying Java projects.

Troubleshoot Errors
If you encounter errors when you attempt to view the published pages, there are a number of things you can do to
troubleshoot the problem. To begin with, you should make sure that you have a detailed error message. If you are using
the Internet Explorer browser, make sure that the Show Friendly HTTP error messages option is disabled under the
Advanced tab of the Internet Options dialog window. Once you have the error message, you can check the
knowledgebase at http://support.codecharge.com/kb_search.asp to see if the matter is addressed there. If you are
not able to find a solution for the problem, you can open a support request at
http://support.codecharge.com/support_new.asp.

PHP Setup
A common configurations for the development of PHP applications is as follows:

Development Environment (for the development and testing of applications):

• A Windows desktop computer with an installation of CodeCharge Studio
• Local or remote MySQL database
• MyODBC driver (required during the design mode, but not during run-time)
• Apache Web server
• PHP 4.0b3 or higher

Server Environment (for hosting the final application):

• A Linux server

43
• MySQL database (local or remote)
• Apache Web server
• PHP 4.0b3 or higher
Note that the MyODBC driver is needed only during the application design stage. The generated code can access the
database directly without an ODBC driver. You can obtain the MyODBC driver from www.mysql.com
For PHP, Table 3-5 provides a list of applicable operating system, web server, database, and language version options.
Table 3-5: PHP Setup

Server Operating System Unix/Linux, Windows 95, Windows 98, Windows NT, Windows 2000, Windows XP
Web Server Apache, Internet Information Services (IIS) 4.0 or 5.0, Personal Web Server

Scripting PHP 4.0b3 or higher

Engine/Language
MySQL, PostgreSQL, Microsoft Access, MS SQL Server, Oracle, DB2, FoxPro, or other
Database Server database via ODBC

The following is a list of steps that should be performed to setup and test the environment where the PHP pages will be
published. These steps don't have to be followed strictly in the order in which they are presented here.

Install and configure the web server software

The PHP engine can be installed on a wide variety of web servers including IIS, PWS, and Apache. The procedure for
installing the PHP engine varies depending on the web server that you are going to use. The PHP engine can be
downloaded from http://www.php.net where you will also find information on how to perform the installation. You can
also download the free Apache web server along with its documentation from http://www.apache.org.

Test the Web Server

After installing the web server software, you should run a test to make sure that the server is functioning properly. For a
server that has been installed on the local machine, the root URL http://localhost/ or http://127.0.0.1/ can be used to test
the server. Please refer to the documentation for the server you have installed for information on how to confirm that the
installation was successful.

Setup the Database

It is common to use the MySQL database when publishing in PHP. You can download MySQL from
http://www.mysql.com where you will also find documentation for the database as well as a link to download the
MyODBC driver which can be used to make an ODBC connection to a MySQL database during desgin time.

Create and Test a CodeCharge Project

CodeCharge Studio comes with a number of example projects which you can easily generate and publish as a way of
testing that you have a functional setup. Each of these examples comes with an Access database as well as a database
script file which you can use to recreate the database. Please refer to the section on the example solutions for detailed
instructions on how to setup and use them.
You can also refer to the quickstart tutorial for step by step instructions on how to create and publish your first web
application as well as the section on deploying PHP projects.

Troubleshoot Errors
If you encounter errors when you attempt to view the published pages, there are a number of things you can do to
troubleshoot the problem. To begin with, you should make sure that you have a detailed error message. If you are using
the Internet Explorer browser, make sure that the Show Friendly HTTP error messages option is disabled under the
Advanced tab of the Internet Options dialog window. Once you have the error message, you can check the
knowledgebase at http://support.codecharge.com/kb_search.asp to see if the matter is addressed there. If you are
not able to find a solution for the problem, you can open a support request at
http://support.codecharge.com/support_new.asp.

PERL Setup
A common configuration for the development of Perl applications is as follows:

44
Development Environment (for the development and testing of applications):
• A Windows desktop computer with an installation of CodeCharge Studio
• Local or remote MySQL database
• MyODBC driver
• Apache Web server
• Perl 5.0 or higher

Server Environment (for hosting the final application):

• A Linux server
• MySQL database (local or remote)
• Apache Web server
• Perl 5.0 or higher
Note that the MyODBC driver is needed only during the application design stage. The generated code can access the
database directly without an ODBC driver. You can obtain MyODBC driver from www.mysql.com
For PERL, Table 3-6 provides a list of applicable operating system, web server, database, and language version options.
Table 3-6: PERL Setup

Server Operating Unix/Linux, Windows 95, Windows 98, Windows NT, Windows 2000, Windows XP
System
Web Server Apache, Internet Information Services (IIS) 4.0 or 5.0, Personal Web Server

Scripting PERL 5.0 or higher (i.e., some popular distributions of PERL include ActiveState PERL,
Engine/Language Mod_PERL for Apache, and Indigo PERL)

MySQL, PostgreSQL, Microsoft Access, MS SQL Server, Oracle, DB2, FoxPro, or other
Database Server database via ODBC

The following is a list of steps that should be performed to setup and test the environment where the Perl pages will be
published. These steps don't have to be followed strictly in the order in which they are presented here.

Install and configure and test the web server software

The Perl language comes in many distributions as shown in the table above. Among the most popular are ActivateState
Perl and Indigo Perl. You can also find more distributions at http://www.perl.com. Depending on the distribution of Perl
you decided to use, the accompanying documentation should contains information on how to install, configure and test
the server. Note that the Perl distribution is installed ontop of a web server such as Apache or IIS. If you already have a
web server, you can examine each of the distributions to see which is compatible with your web server. If you don't have
a web server, you can download the free Apache web server from http://www.apache.org. Most Perl distributions are
compatible with Apache.

Setup the Database

Database connections in Perl require special modules known as database interfaces.
It is common to use the MySQL database when publishing in Perl. You can download MySQL from
http://www.mysql.com where you will also find documentation for the database as well as a link to download the
MyODBC driver which can be used to make an ODBC connection to a MySQL database.

Create and Test a CodeCharge Project

CodeCharge Studio comes with a number of example projects which you can easily generate and publish as a way of
testing that you have a functional setup. Each of these examples comes with an Access database as well as a database
script file which you can use to recreate the database. Please refer to the section on the example solutions for detailed
instructions on how to setup and use them.
You can also refer to the quickstart tutorial for step by step instructions on how to create and publish your first web
application as well as the section on deploying Perl projects.

Troubleshoot Errors

45
If you encounter errors when you attempt to view the published pages, there are a number of things you can do to
troubleshoot the problem. To begin with, you should make sure that you have a detailed error message. If you are using
the Internet Explorer browser, make sure that the Show Friendly HTTP error messages option is disabled under the
Advanced tab of the Internet Options dialog window. Once you have the error message, you can check the
knowledgebase at http://support.codecharge.com/kb_search.asp to see if the matter is addressed there. If you are
not able to find a solution for the problem, you can open a support request at
http://support.codecharge.com/support_new.asp.

46
4. Working Environment
This section introduces the CodeCharge Studio workspace, illustrating the main areas of the interface and shows how
you can customize the workspace to maximize productivity. The workspace is the graphic user interface (GUI) with which
you interact during the process of using CodeCharge Studio. The following are the main portions of the CodeCharge
Studio workspace: The illustration below shows the main parts of the CodeCharge Studio workspace.

Figure 10-1: CodeCharge Studio Workspace

• Command Area: This is the top portion of the workspace that consists of the Title bar, Menu bar and various Toolbars
used to provide quick access to different commands.
• Project Explorer: This panel contains a list of the various elements that make up a project.
• Document Window: This is where most of the action goes on. It is here that project pages are opened, edited and
viewed. The document window can either be in Design, HTML, Code, Preview or Live Page mode.
• Toolbox Window: This panel provides one-click access to various builders, forms and controls that can be used to add
features to project documents.
• Properties Window: As the name suggests, the properties window displays relevant information pertaining to the
currently selected document element. It can be used to adjust various properties depending on the currently selected
element.
• Messages Window: This window provides feedback concerning processes that are executed such as publishing of a
project.
Apart from the above major components, the workspace also has other minor components such as the Status bar and
Tooltips.

4.1 Command Area

From Figure 10-2, the title bar contains the name of the application (i.e., CodeCharge Studio) as well as the name of the
currently open project. The right end of the title bar also contains buttons that can be used to minimize, maximize, or
close the application window.

The menu bar features seven drop-down menus (i.e., File, Edit, Project, View, Table, Tools and Help). Each of these
menus contains a series of options that carry out various functions when clicked. Notice that the main menu names as
well as some of the sub-menus have an underlined letter. This is indication that that menu can be executed using a short-
cut key combination by pressing the Ctrl key together with the underlined letter.

47
 Figure 10-2: Menu Bar and Title Bar
From Figure 10-3, the toolbar provides quick access to many of the commonly used commands that are available in the
menu bar. If you are concerned about screen space, you can use the View menu in the menu bar to hide some or all of
the toolbars. Each of the toolbars can be dragged and docked on the top, left or right sides of the application window.

Figure 10-3: Toolbar

From Figure 10-4, you can also drag the toolbars away from the sides of the application window and in so doing create a
floating toolbar.

Figure 10-4: Floating Toolbars

The following is a description of the commands available in the different toolbars.
Table 10-1: Standard Dialog Functions

Commands Description
Create a new Page.

Open an existing Page.

Save the current page.

Save all changes made in multiple documents.

48
 Undo the last action.

Redo the last action that was undone.

Cut the current selection and place it in the clipboard.

Copy the current selection to the clipboard.

Paste the current contents of the clipboard.

Open the Project Settings window.

Synchronize code to reflect changes made.

Publish the project.

Publish the current page.

Open an external browser window to view the current page.

View the Project Explorer window.

View the Properties window.

View the Toolbox.

View the Message window.

Show borders.

Reveal paragraph and new-line tags.

Table 10-2: Table Functions

Commands Description

Open the Insert Table window of Figure 10-5.

Insert a row above the current row.

Insert a column before the current column.

Delete the current row.

49
 Delete the current column

Move Column Left

Move Column Right

Table 10-3: Formatting Functions

Commands Description
Select a format for the currently selected text.

Select a font.

Select a font size.

Convert the selected text to bold typeface.

Convert the selected text to italics typeface.

Underline the selected text.

Insert line numbers.

Insert bullets.

Decrease indentation.

Increase indentation.

Left align.

Center align.

Right align.

Select a font color for the current text.

Select a background color for the current font.

Table 10-4: Positioning and Alignment Functions

Commands Description
Align the position of the control to the closest grid line.

50
 Assign the current control an absolute rather than relative position.

Fix the position of an absolutely positioned control.

Table 10-5: Web Functions

Commands Description
Navigate backwards.

Navigate forwards.

Stop the current operation.

Refresh the current page.

The URL of the current page.

Go to the URL specified in the URL field.

The Insert Table dialog of Figure 10-5 accepts the paramters required to generate a table within an HTML document.

Figure 10-5: Insert a Table Dialog

The parameters accepted are listed below:
• Rows: Specify the number of rows for the new table.
• Columns: Specify the number of columns for the new table.
• Alignment: Select an alignment for the table [Default, Left, Center, Right]
• Border Size: Specify the width of the table borders.
• Cell Padding: Specify the amount of space between the border of the cell and its contents.
• Cell Spacing: Specify the amount of space between adjacent cells.
• Width: Specify the width of the table in pixels or as a percentage of the available space.
• Using the Tools | Customize Toolbar... menu option, you can configure the appearance of the various toolbars
as well as add new toolbars. The options of Figure 10-6 include:
• Show Tooltips: When this option is activated, informative Tooltips appear when the mouse hovers over an
option in the toolbar.

51
• New...: Clicking on this button adds a new toolbar to which you can later on add buttons using the Command
tab.
• Delete: Use this button to delete a toolbar you created yourself. The six default toolbars cannot be deleted.
• Reset: The Reset button appears in place of the Delete button mentioned above when one of the six default
toolbars is selected. The reset button has the effect of returning the toolbars to their factory appearance after they
have been customized to look differently.
• Toolbar name: If you add a new toolbar, you can use this field to alter its name.
•

• Figure 10-6: Customize Toolbars

• Under the Command tab of Figure 10-7, you can:
• View the various options available in a particular toolbar as well as see the tooltip text associated with the option.
• Add commands to a new or existing toolbar. To add a command to a toolbar, click and hold drown the mouse
button as you drag the command icon to the location where you want it to appear on the toolbar. Note that you can
also remove command icons from a toolbar by clicking and dragging the icon away from the toolbar.

52
 Figure 10-7: Command Customization

4.2 The Project Explorer

The project explorer is essentially a hierarchical drop-down menu that provides access to the main components that
make up a project. If the Project Explorer is not visible, you can use the View menu to make it visible. Like the toolbars
and other windows, the Project Explorer window can be docked to the side of the application or against other windows
such as the Toolbox. Alternatively, it can be a floating window.
The Project Explorer window works in conjunction with the Document window and the Properties window. Double clicking
on a page within the Project Explorer window will cause it to be opened in the Document window. At the same time, the
Properties window displays the various properties for the currently selected component. Using the Project Explorer, you
can drill down to the basic elements of a project and execute various commands by right clicking on an element to bring
up a popup menu.

53
 Figure 10-8: Project Explorer

4.3 The Properties Window

As mentioned earlier, the Properties window acts in conjunction with the Project Explorer as well as the Document
window. The Properties window consists of three tabs (i.e., Format, Data, Events). You will notice that the contents of
each of the tabs in the Properties window changes according to the currently selected element in the Project Explorer or
Document window.
When using the Properties window, a caption that appears between the tabs and the list of properties displays the type
and name of the currently selected element. For example, in the illustration below, a Grid form called events is the
currently selected element.
It is advisable to make a habit of checking the caption before setting any property or event values so as not to end up
making changes to the wrong element.
All the items in the Format tab and the Data tab display properties and events in a Name-Value format. The name of the
property or event appears to the left of the window while its attendant value, if any, appears to the right. In some of the
properties, drop-down lists are used to specify a series of options from which to pick a value while in others you can
simply type in a value. Additionally some properties use popup dialogs of varying complexity and functionality to specify
the property's value.
Unlike the otherwindows that we have seen so far, the Properties window features its own Status bar that is used to
display helpful information about the currently selected property. For instance, in the illustration below, the status bar at
the bottom of the Properties windows displays information about the height property of the <TR> tag.

Figure 10-9: Format Properties

• Format Tab: The Format tab contains properties and events for various HTML/CSS elements. For the most part,
the Format tab is mainly used when a page is opened in the Document window in HTML mode. In this case,

54
 selecting a HTML tag within the document will cause the Format tab to display the Properties and events applicable
to that particular tag.
• Data Tab: Whereas the Format tab displays HTML/CSS properties and events, the properties displayed under
the Data Tab are implemented at the programming language level and can usually be controlled programmatically.
As with the Format tab, the properties displayed under the Data tab vary depending on the currently selected control
in the Project Explorer or Document window.

•
• Figure 10-10: Data Properties
• Events Tab: Events are designated points that occur during the process of code execution. Using the Events
tab, it is possible to add Actions or custom code that would then be executed at the point in the code where the event
occurs. Actions are predefined snippets of code that perform common functions such as validating a value such as a
phone number or zip code or sending an email message. However, since there cannot be actions for all the possible
operations that you may want to perform in an event, you can also enter your own custom code into an event. Note
that any code added into a Server event is language specific. If you change the language in which the project pages
are generated, you have to write new event code in the new language. However, Client events are implemented
using browser scripting languages (JavaScript, JScript) and as such are universally applicable regardless of
programming language choice.

4.4 Message Window

The message window, usually docked at the bottom of the main window, provides feedback as to the status of operations
occurring within the environment. Such status information can include errors as well as the current build or upload
operation currently executing.

4.5 ToolBox
The Toolbox consists of three tabbed windows featuring a series of commands for adding various components to a page.
From Figure 10-11, the toolboxes are described as follows:
• Builders: Series of dialogs spanning the process of creating a page or form.
• Forms: Section of a page containing normal content, markup and/or labels.
• HTML: HTML Elements which can be customized using the options.

Figure 10-11: Toolbox

55
Depending on how familiar you are with the various options on the Toolbox you can opt whether or not to have it display
text along with the Icons. You can also enable tooltips to be displayed when the mouse pointer hovers over a particular
option. Right clicking within the Toolbox brings up a popup menu where you can toggle these features.

Figure 10-12: Builders Toolbox

Builders
A builder is essentially a series of dialogs spanning the process of creating a page or form. The user configures the
various options available in the series of dialogs, at the end of which the builder generates forms based on the selections
made.
Table 10-6: Builders

Icon Commands Description

Application Builder Used to create multiple project pages based on the tables or queries in a designated
database connection.

Grid Builder Used to create grid forms that can optionally have a related search form.

Record Builder Used to automate the process of creating record forms where database content can be
inserted, edited or deleted.

Grid and Record Used to display multiple records and a link is provided from the grid form records to the
Builder record.

Editable Grid Builder Used to create grid forms with multiple line inputs.

Search Builder Used to enter values into controls such that when the values are submitted.

Directory Builder Used to create a directory on the page based on the database table.

Date Picker Builder Used to place the date picker/selector on the page.

Authentication Used to input authentication details (Login and Password) that are required to grant access
Builder to users in sites that implement security.

Forms
A form refers to a section of a page containing normal content, markup, labels and optionally may contain a HTML form
element with form controls in it. A CodeCharge Studio form is visually demarcated using one or more HTML tables with
various content appearing in the table rows and columns.
Controls are dynamic elements placed on a page and are often used to display database content. Controls play a central
role in any given form that deals with database content. Controls and their values can also be controlled
programmatically.

56
 Table 10-7: Forms

Icon Commands Description

Button Serves the purpose of submitting all the fields within the form to the designated action page.

Check Box Used to toggle the selection of an option.

Check Box Used to toggle the list of option selections.

List

Date Picker Used to toggle the date selector.

Directory Used to present the directory.

Editable Grid Used to present the multiple line inputs placed inside the table.

Grid Form Used to display multiple records of data.

Hidden Equivalent of a Text Box except that a hidden field has no visual representation on the rendered
page.

Image Used to embed an image into the current page.

Image Link Used to represent the link, an image is used.

Include Page Used to include pages, e.g. header and footer pages

Label Used to represent a wide variety of content.

Link Used extensively in grid forms whereby you can have a simple link that links to another page.

List Box Used to present a list of options from which the user can select one.

Navigator Used exclusively on grid forms. A navigator provides functionality that allows the database
records within a grid to be browsed.

Path Used to represent a path.

Radio Button Used for the selection of mutually exclusive options.

Record Form Used to add, edit or delete database content.

Sorter Used exclusively on grid forms. It allows the data within the grid to be sorted according to a
particular field.

Text Area Used to when a large amount of data needs to be entered.

Text Box Used to provide single line input.

HTML Controls
You can add HTML elements to the page as needed. After adding a HTML element, you can further customize it.

57
 Table 10-8: HTML Controls

Icon Commands Description

Form A form is a container object within which you can place other form controls that submit values.

Text Box Used to provide single line input.

Password Same as Text Box except that all characters entered are masked using asterisks.

Text Area Used when a large amount of data needs to be entered.

Radio Button Used for the selection of mutually exclusive options.

Dropdown Used to present a list of options from which the user can select one.

Listbox Same as a dropdown with the distinction of being able to display multiple options.

Button Performs a specified action when clicked.

Submit Button Serves the purpose of submitting all the fields within the form to the designated action page.

Reset Button Used to return the fields in a form to the state they originally were in when the page loaded.

Image Button Graphical equivalent of the Submit Button.

Label used to provide text that identifies other elements within the page.

Hyperlink Link to another resource.

Image Used to embed an image in the current page.

ImageLink Same as a HyperLink, an image is used to represent the link.

Space
Non-breaking space meaning that a line break cannot occur in its place.

Line Break Ends the current line of text and continues the flow of content on the next line.

Horizontal Rule Used to demarcate sections of a page.

Paragraph Break Represents a paragraph.

Bookmark Named anchor that can be the destination of another link.

4.6 Working with Documents

58
A good deal of the time spent using CodeCharge Studio will involve the use of the document window. The document
window serves multiple purposes depending on the mode in which it is currently set to. The five different modes in which
the document window can be set are:
• Design: This is a visual representation of the HTML content of a page as it would appear if rendered by a web
browser. The user is able to add, modify and remove different forms of the page. The Design mode is also known as
'What You See Is What You Get' (WYSIWYG).
• HTML: This shows the actual HTML code for a page as well as any style and Javascript code that might be on
the page. If you are familiar with HTML, you can add your own HTML code or adjust the existing code as desired.
Switching to Design mode will show the appearance of the HTML code when rendered in a browser.
• Code: This shows the language specific code for a page. For instance, if using the ASP & Templates language,
this mode will display the ASP/VBScript code for a page.
• Preview: This mode is used to preview a page without actually running it off the server. The page is shown
without the special tags or borders that are visible in Design mode. The user cannot make any changes to the page
while in Preview mode.
• Live Page: This involves actually executing the page from the server. Any database content, include pages and
styles are displayed in their entirety. The page is fully functional and can be used to navigate, post or adjust database
content or perform any other function that the page is designed to have. Error messages are displayed if problems
are encountered with any of the page code.

Design Mode
Design mode allows the user to construct a page while being able to immediately see the appearance of the different
components on the page. As the name implies, Design mode is more concerned with the appearance of the page as
opposed to it functionality. While in design mode, you can use the Toolbox to add various components to the page such
as form controls, plain text and images. Tables and cascading style sheets can be used to format the layout of the page.
The Properties window displays the pertinent properties based on the component that is selected in the document
window. You can set or adjust these properties as needed. While in design mode, a number of icons are used to give a
visual representation of otherwise non-visual elements. The following table shows the meaning of these icons.
Table 10-9: Design Mode Tools

Icon Description
Beginning and end paragraph tags <p> </p>.

Line break tag <br>.

Beginning and end form tags <form> </form>.

Submit button <input type="submit">.

An Include page.

Mark the beginning and end of a Grid form.

Mark the beginning and end of a Record, Login or Search form. These forms submit values and have a
HTML form (<form></form>) within them.

A Label control based on database content.

A Link control based on database content.

Comment tag <!-- -->

59
 Style tag <style>

Mark the beginning and end of a Editable Grid form.

Mark the beginning and end of a Path component.

Mark the beginning and end of a Checkbox List component.

Mark the beginning and end of a Directory component.

Mark the beginning and end of a Date Picker component.

Unknown tag

Represents an ImageLink or Image control. The actual image will be visible when the page is viewed
in Live Page mode.

While in design mode, you can toggle the display of the Paragraph and Line break icons by pressing the ctrl+/ shortcut
key or using the View -> Reveal Tags menu option.
You will also notice that some of the text displayed will be enclosed within curly braces (e.g., {article}). The content in
curly braces are termed as Blocks and are indication that the text will be substituted for database content when the page
is viewed live. Care should be observed when handling any blocks since if they are inadvertently changed, then the
corresponding database content would not be displayed. As a rule, you should always use the Properties window or the
Project Explorer window to change the properties of this content or if you need to rename or remove it. Note that you can
change the position of the blocks relative to the other page contents without causing any harm. What could be potentially
harmful is changing the block itself i.e. spelling, or deleting a block.

HTML Mode
This displays the raw HTML code for a page. Along with HTML content, there could be Javascript code that was added
manually or using the events tab of the Properties window. For pages that make use of Cascading Style Sheets, style
content will also be visible depending on the method used to apply the style.

Just as was the case in Design mode, you will see content within the HTML code that is enclosed within curly braces.
Caution should be observed when editing this content and this should only be done using the Properties window or
Project Explorer window. In HTML mode, there is another form of block that is not evident in Design mode. This occurs in
the form of HTML comments and is used to mark out the beginning and end of content that can be viewed as a logical
unit.
Listing 10-1: HTML Block

<!-- BEGIN blockname -->

Block contents go here
<!-- END blockname -->

There are numerous types of logical units that are represented by blocks. The common denominator is that there is a
HTML comment to mark their beginning and another to mark their end. Additionally, it is possible to have nested blocks
such that one block is within another. In such scenarios, the naming of the blocks makes it clear where each of the blocks
begins and ends. It is therefore important to make sure that none of the block comments are altered or removed
otherwise the page would not function as correctly.
Any client side events that are added using the Events tab of the Properties window are also visible in HTML mode. The
script code appears at the top of the page in the <head> </head> section. The illustration below shows the code that is
added for an OnLoad event of a page to set focus to a field in a form.
Listing 10-2: Sample Source Code

<script language="JavaScript">
//Begin CCS script

60
function page_OnLoad() { //page_OnLoad @1-1C723708

//Set Focus @5-84B91275

document.Form1.TextBox1.focus();
//End Set Focus

} //Close page_OnLoad @1-FCB6E20C

//bind_events @1-F4D605D7
function bind_events() {
page_OnLoad();
}
//End bind_events

window.onload = bind_events; //Assign bind_events @1-19F7B649

//End CCS script

</script>

Notice that event code is displayed with a different background color compared to the rest of the HTML content. Usually
the background color is light gray and signifies that the code was generated by CodeCharge Studio and has not been
altered. If you modify or add your own code anywhere within the gray background, the background will change to the
default color of the rest of the document. This is an indication that the code is different from what CodeCharge Studio
generated.

Code Mode
Code Mode displays the programming code for a page. By default, the code in a page is displayed against a gray
background to indicate that it has not been altered from its original state. Making changes to the code will cause the
background to change to white by default. In addition to this, all the code will be color coded in order to distinguish various
parts of the code. For instance, commented code will appear in a different color compared to Strings or even reserved
words.
It is usual to have pages with upwards of a thousand lines of code. To assist in navigating large amounts of code, the
document window makes it possible to jump to specific points in the code by selecting an object then a member of the
object to bring into focus.

Figure 10-13: Code Navigator

Whenever appropriate, the two listbox fields at the top left of the document window will display the Objects in the page as
well as the members of that object if any. Selecting a particular Object then its member in the Code field will cause the
window to scroll to the location where the relevant code is located.
In each project, regardless of coding language, there is always a set of Common Files. These files contain functionality
that is needed in multiple pages and hence it is placed in central files. In order to access these files, click on the Common
Files Icon in the Project Explorer. The files will be opened in the document window and you will be able to access a
specific file by clicking on the tab with its name.

Figure 10-14: File Navigator

The number and names of the Common Files will vary depending on the coding language being used. The illustration
above shows the common files for the ASP language.

Preview Mode

61
Preview mode shows how the static HTML part of a page would look like when viewed in a browser. None of the
programming code is executed or published to the server. Preview mode is intended to show the layout of the page
without the editing features that are visible in HTML mode. It is not possible to make changes to a page while in Preview
mode.

Live Page
In Live Page Mode, the page is published to the server and executed such that dynamic content is made available for
viewing. Before attempting to view a page in Live Page mode, you should make sure that the Project Publishing settings
have been properly configured so that the pages are generated to the correct location.
In this mode, you can navigate to other pages and manipulate database content as you would normally do if the page
were viewed using a browser window.
If problems are encountered during the process of generating or publishing the page, the Messages window will show
appropriate error messages. Additionally, if the generated pages themselves are not properly created, the document
window will show the error message returned from the server.

4.7 Customizing the Workspace

By using the Tools | Options... menu, you can access additional configuration options that further customize the
CodeCharge Studio workspace. The Options window has a list of six categories each with a set of configurable options.
• Code Editor Options
• HTML Formatting Options
• Design Editor Options
• General Options
• Generator Options
• Paths Options

General
The general options of Figure 10-15 establish the basic features and functionality of the environment. Table 10-10
provides an overview of the various settings.

Figure 10-15: General Settings Dialog

62
 Table 10-10: General Settings

Parameters Description
Sort Database If selected, database tables used in the project will be ordered alphabetically rather than in the
Tables order in which they appear in the database.
Alphabetically
Sort Database If selected, database fields listed in the CodeCharge Studio IDE during design time will be ordered
Columns alphabetically rather than in the order in which they appear in the database. For instance, when
Alphabetically using the builders to create components, the fields will be shown alphabetically if this option is
selected.
Check for updates If selected, CodeCharge Studio will connect to the internet and check for new software updates. If
on launch there are new updates, a window will open with the details of the update including where to obtain
it.
Show text If selected, caption text will appear next to each of the buttons in the Toolbox
Show tooltips If selected, caption text will appear as a tooltip when the mouse pointer hovers over each of the
buttons in the Toolbox.
Show existing events If selected, the existing events will be shown in the Project Explorer.
Use external web In this field, you can specify the path to an external editor that you would like to use to edit the
editor HTML pages.

Generator
The generator settings of Figure 10-16 provide basic information for the visible functions of the code generator. Table 10-
11 provides a description of the various settings.

Figure 10-16: Generator Settings Dialog

Table 10-11: Generator Settings

Parameters Description
Indent Type Select whether to uses spaces or tabs to indent the generated code
Indent Specify the number of spaces to be used for indenting
Synchronization
During the process of creating a page, the user often deletes some components from the page and
Mode
this is subsequently detected by CodeCharge Studio during the process of synchronization. This
option allows you to specify the action to be taken when synchronizing page content: • Show Confirm
Dialog - A dialog appears asking the user to confirm the deletion of components that were not found
on the page. • Delete by default - Any components not found on the page are automatically deleted. •
Don't Delete by Default - Components are not deleted from the page even if they are not found in the

63
 page code.

Use Message If selected, the Message window will also be used to display synchronization warnings.
Window

Design Editor
The generator settings of Figure 10-17 provide basic information for the functional features of the design editor. Table 10-
12 provides a description of the various settings.

Figure 10-17: Design Editor Settings Dialog

Table 10-12: Design Editor Settings

Parameters Description
Show All Tags: If selected, Line Break and Paragraphs Breaks will be shown using icons.
Show Borders: If selected, a border will be shown around all HTML tables in Design mode.
Delay before displaying tag or Set the amount of time to wait before switching the Properties window to the currently
component in Properties Window selected control.
(seconds):
Horizontal spacing
While in design mode, the document window has an imaginary "snap to grid" that can
be used to position elements on the page using the Positioning toolbar. Use this
option to specify how far apart the grid lines should be horizontally.

Vertical spacing Specify how far apart the lines of the snap to grid should be vertically.

HTML Formatting
The generator settings of Figure 10-18 provide basic information for formatting of HTML within the editor. Table 10-13
provides a description of the various settings.

64
 Figure 10-18: HTML Formatting Settings Dialog
Table 10-13: HTML Formatting Settings

Parameters Description
Indent Type Select whether to use space or tab indenting.
Indent Specify the number of spaces to be used for indenting.
Margin: The maximum number of characters that a string in a page can span.
Break within tags: If a tag is longer than the Margin length, a line break will be inserted even if the tag is
not closed.
Break between tags: Line breaks for strings longer than the Margin length will only be inserted in between
tags.
Attribute names are in Attribute names for tags will be in lowercase.
lowercase:
Tag names are in lowercase: Tag names will be in lowercase.
Tags
Indent Contents Specify whether a specific tag will be indented.
Line Breaks
Before Start: Insert a Line break before the start of the tag.
After Start: Insert a Line break after the start of the tag.
Before End: Insert a Line break before the end of the tag.
After End: Insert a Line break after the end of the tag.
Reset: Revert to the factory settings.

65
Code Editor
The generator settings of Figure 10-19 provide basic information for internal formatting of the code editor. Table 10-14
provides a description of the various settings.

Figure 10-19: Code Editor Settings Dialog

Table 10-14: Code Editor Settings

Parameters Description
Tab Width Specify the number of spaces to be used to represent a tab.
Auto Indent If selected, code will be indented automatically.
Show Line If selected, line numbers are shown on the left margin of the code editor
Numbers
Show whitespace If selected, white spaces are visually represented by periods (.) and tabs are represented using the
symbol >>.
Font & Colors
Font Select the font in which the code will be displayed
Size Select the size of the display font
Display Items Select either Normal Text or CodeCharge Blocks to configure their display options
Foreground Select the foreground color for the selected display item
Background Select the background color for the selected display item.
Sample This shows a preview of the display item according to the selections made

Paths

66
The generator settings of Figure 10-20 provide basic information for internal formatting of the code editor. Table 10-15
provides a description of the various settings.

Figure 10-20: Path Settings Dialog

Table 10-15: Path Settings

Parameters Description
Default Server Path: Specifies the default path to the web server where pages will be published.
Default Server URL: Specifies the HTTP URL that maps to the default server path mentioned above.
Components: Specifies the path where CodeCharge Studio components are located.
HTML Page Specifies the path to a HTML template page that will be used as the base for all newly created
Template: pages.
.Net SDK: Specifies the location of the .Net framework SDK if available.
Java JDK: Specifies the location of the Java JDK if available.
Java ANT: Specifies the location of the Java ANT if available.

4.8 Keyboard Accessibility

Many of the commands available on the Menu bar can be assessed using keyboard keys rather than using the mouse.
This is done by using combination keys that map to particular menu options. Looking at the Menu bar options, notice that
each of them has a single letter underlined. Holding down the Alt keyboard key then typing the underlined letter has the
same effect as clicking on the menu option concerned. For instance, typing the Alt-F keys will open the File menu shown
below.

67
 Figure 10-21: Menu Bar
Notice that within the menu option, some of the sub-options also have underlined letters too. You can navigate further to
these sub-options by simply pressing the underlined letter. For instance, within the File menu, you can open a page by
pressing the O key followed by P.

Figure 10-22: Menu Shortcut Keys

Some of the sub-options under the Edit menu are unique in that they can be accessed directly without first opening the
Edit menu option. These are commands that are very frequently used when working with documents and as such, they
have dedicated access keys that are not only used within CodeCharge Studio but would also be found in most windows
applications. The commands are as follows:
Table 10-16: Command Key Combinations

Command Key Combination

Cut
Ctrl + X

Copy
Ctrl + C

Paste
Ctrl + P

Select All
Ctrl + A

Find ...
Ctrl + F

Replace ...
Ctrl + H

68
Go to...
Ctrl + G

Committing these keys to memory could significantly improve the efficiency with which you edit documents.

4.9 IDE Translation

It is possible to significantly localize CodeCharge Studio as well as the pages generated by using translation files. Within
the CodeCharge Studio installation folder, the Components folder has a folder called Translations that contains two
folders: IDE and Site.
The contents of the IDE folder are plains text files that contain the text that appears within the CodeCharge Studio IDE.
The IDE translation files are located in the following folder:

c:\Program Files\CodeChargeStudio\Components\Translations\IDE\*.txt
Each line within the text files is a name-value pair representing an IDE component and its corresponding text. You can
create files for different languages by duplicating an existing file and altering the value that appear to the right of the
equals sign.
Once you create additional files, you can select the language to the used by using the Tools | Language menu option.

Figure 10-23: Selecting a Language

69
5. Working with Projects
The standard unit for working within CodeCharge Studio is a project. A project is composed of multiple files which
together makeup the composition of a web application. The project files are ultimately used to generate the final web
application that is published to the server.

5.1 Creating a New Project

To create a new project, select the New project option in the screen of Figure 5-1. This dialog appears each time
CodeCharge Studio launches.

Figure 5-1: Creating a New Project

Alternatively, if you are already within CodeCharge Studio, you can create a new project using the menu option File |
New | Project. This brings up the Add New Project dialog of Figure 5-2 where you can specify the properties of Table 5-
1.
Table 5-1: New Project Properties

Property Description
Name the name of your project, similarly to creating a title of a document.
Location the location/folder where the project should be saved on the disk.
Language the programming language (or technology) for your Web applications.

Click OK when all the information is entered. CodeCharge Studio will then create and save the new project on the disk
within the specified folder. The project file name will be the same as the project name with the extension .ccs. For
example, if your project name is My Project then the file name will be named My Project.ccs. The .ccs file stores the
global project settings in XML format, which can be viewed or edited with any XML editor.

70
 Figure 5-2: Add New Project Dialog

5.2 Adding New Pages

While working within a project, there are several ways of adding new pages to the project.
• Using the File menu, you can select the New --> Page... option or press Ctrl+N

• Click on the New Page button on the Toolbar

• Right Click on a folder in the Project Explorer window and select the New Page option.

Regardless of the method you use to initiate the process, you will then be presented with the Add New Page dialog
which has to two tabs. The first tab called Pages allows you to create CodeCharge Studio pages (.ccp). Using this page
you can elect to create:
• A new Blank Page
• Create one or more pages using the Application Builder

71
 • Create a Login Page which will automatically have a Login form. (The site Security settings must be
configured before selecting this option)

Under the Files tab of the Add New Page window, you can add different types of files which aren't in CodeCharge Studio
format (.ccp).

Note that these files cannot be used to add CodeCharge Forms, Controls or Components from within the CodeCharge
Studio IDE. If you add Text, XML, or JScript files, you will be able to open and see the raw code within the files. If you
add a HTML file, you will be able to see the raw code as well as switch to Design and Preview mode to see the code as
it would appear in a browser window. With a HTML file, you can also use the HTML tab of the Toolbox to add pure HTML
controls. However, you cannot add any of the controls or components listed under the Builders and Forms tab of the
Toolbox. Note that for any of the HTML controls that you add, you can use the Format tab of the Properties window to
examine and modify their properties.

5.3 Saving a Project

You can save your project at any time by selecting File | Save All from the CodeCharge Studio menu, or clicking the
Save All button in the top CodeCharge Studio toolbar.

72
 Figure 5-3: CodeCharge Studio Environment

5.4 Specifying Project Settings

Project settings allow you to specify how to generate your web application and where to publish it. You can also specify
the programming language, publishing directory, database connection, site authentication and various additional details
concerning the project's configuration.
From Figure 5-4, to access the project settings, select Project | Settings... on the main menu bar.

73
 Figure 5-4: Specifying Project Settings
As demonstrated in Figure 5-5, you can also right-click on the project name in the Project Explorer window and select the
Settings... option.

Figure 5-5: Dropdown Project Settings Menu

Configuring General Project Settings

Each CodeCharge Studio project requires certain parameters to generate the proper programming code. Here you
specify the general project parameters, as shown in Error! Reference source not found..

74
 Figure 5-6: Project Settings Dialog

Code Language
The Code Language specifies the type of the programming code that you will generate from your project to create the
web application. The currently available programming languages are:
• ASP 3.0 with Templates: Generates ASP 3.0 (VBScript) programs that use separate .html files as templates
during run-time.
• ASP.Net 1.0 C#: Generates .aspx files with C# code.
• ASP.Net 1.0 VB: Generates .aspx files with C# code.
• CFML 4.0.1: Generates ColdFusion 4.0.1 code.
• CFML 4.0.1 with Templates: Generates ColdFusion 4.0.1 code (.cfm) and separate .html template files.
• JSP 1.1 JDK 1.3: Generates JSP 1.1 code.
• PHP 4.0 with Templates: Generates PHP 4.0 code (.php) and separate .html template files.
• PERL 5.0 with Templates: Generates PERL 5.0 code and separate .html template files.
• Servlets 2.2 JDK 1.3 with Templates: Generates Java Servlet code that utilizes .html templates.
• Culture
• The Culture parameter affects how the web application behaves with a specific language or in a specific region.
For example, changing the Culture automatically changes the Date Display Format parameter. Additionally, the
Culture controls the following default values for the project:
• Date Display Format: Only if the Date Display Format parameter is blank.
• Character Set: Also known as the codepage. Only modified if the Character Set (CodePage) parameter of an
ASP project is blank. This is a future implementation.
• LCID: Only if the Geographical Locale (LCID) parameter of an ASP project is blank. This is a future
implementation.
The Culture parameters can be edited with an XML editor in the file (CodeChargeStudio
Root)\Components\Cultures\Cultures.xml.

Site Language
The Site Language is the spoken language to use when generating text messages for the site. For example, the text No
records that appears when no more records are to be displayed within a grid could be generated in any one of the
supported languages.
These translations can be edited with an XML editor and are stored in the file (CodeChargeStudio
Root)\Components\Translations\Site\(language).xml , for example:
.../CodeChargeStudio\Components\Translations\Site\English.xml
.../CodeChargeStudio\Components\Translations\Site\Deutsch.xml

Date Display Format

The Date Display Format is the default format of the dates shown on the web pages generated by CodeCharge Studio
(e.g., if you display the employee hiring date on a page). You can also select a generic date format, such as Short Date
or Long Date, which are specific to the web server on which the web application executes.

Boolean Format
The Boolean Format specifies the default format, or rather the text that will be displayed on a page, when presenting
Boolean values. For example, you may store the Active status in a database table as Yes/No (e.g., MS Access) or
True/False format, but you want to display specific text on a grid that shows such values, for example Active/Inactive, or
Yes/(blank). You can select the appropriate Boolean format from the list, or enter your own format in the form of two
comma separated values (e.g. Active;Inactive or Yes;).

Home Page
The Home Page specifies the main page of your web application, which you can later launch with the F7 key or from the
menu with Project | Home Page. The specified home page will then be generated, published, and opened within
CodeCharge Studio in Live Page mode.

75
Project Path
The Project Path specifies the current location of the project and its file name. This is for informational purposes and
cannot be edited from this dialog.

Configuring the Publishing Settings

When you publish a page or the whole project, CodeCharge Studio first generates the programming code to the same
folder where your project is stored, then it copies the generated files to the web server. The Publishing settings allow you
to specify the folder where CodeCharge Studio should output the generated files during the publishing process. You can
generate the web application files locally to your hard drive or network, or to an external web server via FTP.

Figure 5-7: Local Publishing Settings Dialog

Publishing Files Locally

You can publish the generated files to a local or network web server by selecting the Location "Local/Network" and then
configuring the parameters of Table 5-2.
Table 5-2: Local Publishing Parameters

Parameters Description
Server Path
The file system path where the generated files should be published. In case you use the IIS web server,
the server path is usually c:\Inetpub\wwwroot\(project name). If you use Apache, locate the
DocumentRoot variable in your configuration file, httpd.conf, and set it to the desired web folder (e.g.,
c:/web) then set the Server Path in CodeCharge Studio to the same folder. You can also specify a
network path here, such as \\network computer\web\My Project.

Server URL
This is the web address corresponding to the Server Path. This URL will be used to view the page in Live
Page mode. By default, local web servers can be accessed using the URL http://localhost, therefore the
Server URL for your project should be http://localhost/MyProject.

76
You can also use the IP address of your computer, such as http://68.100.100.100/MyProject or the domain name, like
http://mydomain.com/MyProject.
The Server URL parameter is also used in the generated programs, for example to redirect users with insufficient
privileges to the Login page.

Publishing Files By FTP

You can publish the generated files to a remote Web server by setting Location property to "FTP" and then configuring
the following FTP parameters:

Figure 5-8: Remote Publishing Settings Dialog

Table 5-3: Remote Publishing Parameters

Parameters Description
Server The location of your FTP server which can be identified by the domain name or IP address, for example
ftp://codecharge.com or ftp://123.123.123.123 etc.
Path/Folder
This is the relative folder on your FTP server where the published files should be placed. This path can
start with a "/" if your FTP server logs you in at the root folder or if you are aware that the path should start
at the FTP server's root.

Login The username to be used to login to the FTP server.

Password The password corresponding to the user login name used to login to the FTP server.
Live site URL
This is the web address corresponding to the Server Path. This URL will be used to view the page in Live
Page mode. By default, local web servers can be accessed using the URL: http://localhost, therefore the
Server URL for your project should be <http://localhost/MyProject>. You can also use the IP address of
your computer, such as http://68.100.100.100/MyProject or the domain name, like
http://mydomain.com/My Project.

77
The Server URL parameter is also used in the generated programs, for example to redirect users with insufficient
privileges to the Login page.

Specifying the Files to Publish

In addition to specifying the local or remote/FTP publishing settings, you can also indicate which types of files you want to
publish to the Web server. Table 5-4 depicts the available options.
Table 5-4: File Selection for Publishing

Parameters Description
Project Files (code, This is the default and recommended option for publishing. It copies to the web server all file types
template and that are commonly used by web applications. For example in case of PHP, these files are: .php
database files) (PHP programs), .html (templates), .js (JavaScript), .gif and .jpg (images), and .css (cascading
style sheets). And if you store your MS Access database (.mdb) in the project folder, it will be
copied to the web server as well. This is also the fastest publishing option.
All files with This option can be used to publish files with specified extensions, for example if you utilize custom
extensions: file extensions in your project and want to publish them. Note: this publishing option works slower
than the publishing Project Files option since CodeCharge Studio needs to search the project
folder for all specified file extensions.
All files excluding This option can be used to publish all files, but exclude files with specific extensions. For example
extensions: to avoid copying MS Access databases to the server each time the project is published. Note: this
publishing option works slower than the publishing Project Files option since CodeCharge Studio
needs to search the project folder for all specified file extensions.

5.5 Connecting to Databases

One of the main features that makes CodeCharge Studio stand out from other web development tools is its ability to put
database content on the web. There is a wide range of applicable options each with its own pro's and con's. It would be
inconceivable to accommodate all or the vast majority of the different options if each were unique. Thankfully, this is not
the case since the Structured Query Language (SQL) provides a uniform way of interacting with databases and the
content contained therein. Broadly speaking, four main components make up the database experience:
• Database Software: Otherwise known as archive or repository (e.g. Access, Oracle, MySQL, etc).
• Driver/provider To Connect to the Database: Essentially, this acts as a bridge between the database and the
language being used. (e.g. ODBC, OLE-DB, PERL DBI).
• Programming Language: The programming language includes programming constructs that enable it to
establish connections to the database and execute SQL commands against it. (e.g. ASP, PHP, PERL, etc).
• SQL Language used to Instruct the Database: It is important to make the distinction that it is SQL and not the
programming language that actually instructs the database. The programming language is used to establish a
connection to the database and sends SQL commands to be executed over the opened connection. The SQL
transmitted is largely standard but different products do have proprietary SQL commands above and beyond the
standard commands.
• Various factors influence the choice of database used. These include but are not limited to:
• the amount of information being stored;
• the speed and versatility required of the resultant application;
• security, backup and recovery concerns;
• price as well as operating cost of the database;
• compatibility with the intended programming language;
• availability of database drivers to connect to the database using the chosen programming language;
• availability of enhanced functionality such as stored procedures, procedural programming, replication, etc.;
• availability of a web host who supports the database; and
• ease of use.

78
Having selected the database to use and ensured that all the necessary components are in place, the next step is to
make the connection within CodeCharge Studio. Note that you are not limited to a single database, but can use multiple
databases within the same project.

Database Connections
Within CodeCharge Studio, a connection is a link to a database for the purpose of creating pages based on the structure
and contents of the database. The majority of the forms and field controls used within CodeCharge Studio draw their
content from database fields. CodeCharge Studio uses database connections for two major purposes:
• a design connection is used for designing pages within CodeCharge Studio; and
• a server-side connection is used by the generated pages to communicate with the database.
The design connection is the connection that CodeCharge Studio uses to communicate with the database. For example,
the Application Builder in CodeCharge Studio connects to the database and then automatically creates a set of Web
pages that are based on your database tables and fields. The most common design-time techniques of connecting to a
database include ODBC/DSN and JET.
The server-side connection is used by the generated pages to communicate with the database. Often times, the design
connection is the same as the server-side connection. However, various situations warrant the use of a server-side
connection that is different from the design connection. This is usually the case when remote database access is
undesired or not allowed. For example, if you use PHP and MySQL, you may want your generated programs to use the
PHPLib database connectivity library to connect directly to MySQL without the use of drivers.

Creating a New Database Connection

There are two ways of creating a Connection to be used in a particular project.
From Figure 5-9, the first method is to select Project | Settings, select the Connections tab, then click Add....

Figure 5-9: Adding a Database Connection

From Figure 5-10, the second method is to right-click on Connections in Project Explorer and select New Connection from
the pop-up menu.

79
 Figure 5-10: Creating a Database Connection from the Project Explorer

Configuring the Design Database Connection

Depending on the database that you're working with, you will be able to use one or several database connection
methods. The common methods include ODBC/DSN and DSN-less/JET. Other connection methods may also be
available if you install appropriate database drivers on the computer where you are running CodeCharge Studio.
The following are the configuration options available for the Design Connection.

Figure 5-11: Database Connection Configuration

Table 5-5: Database Connection Configuration Parameters

Parameters Description
Connection
This unique user-selected name identifies the connection. No two connections within the same project
Name:

80
 can have identical names. You can use multiple connections with different names to, for example, use
multiple databases in your project.

Use ODBC Data

This option should be selected if the connection to the database will be through ODBC. Using the list
Source Name:
box field, you can select one of the ODBC DSN's that is currently registered on the machine.
Alternatively, you can create a new ODBC DSN by clicking on the New... button.

Use Connection
This option specifies a connection string that contains the details necessary to make a connection to
String:
the database. Some of the details included in the connection string are: database driver to be used,
location of the database file, and the username and password needed to connect to the database. If
you are an experienced user, you can simply type in the proper connection string into the provided
field. However, most people would find it necessary to click the Build button and use the Data Link
Properties windows to create the connection string.

User Name: This is an optional field used to specify the username required to login to the database.
User Password: This is an optional field used to specify the password required to login to the database.

ODBC Data Sources

ODBC (Open Database Connectivity) is a driver interface that allows CodeCharge Studio and the generated programs to
communicate with the database. ODBC needs to be configured to access specific databases by, for example, providing
the information as to where the database is located or its IP address. Just like you can create many MS Word documents
and save them with different file names, you can configure many ODBC Data Sources and name them differently. A DSN
(Data Source Name) is the name of such ODBC configuration.
One of the benefits of using an ODBC connection during design-time is that several people can work on a single project
and each can have their own database in a different location, or connect to different test databases and perform testing
with their own data. All that is required is that everyone names their ODBC Data Source with the same name, while the
ODBC settings may be different. The benefit of using ODBC connections during run-time, in the generated programs, is
that you can copy programs between servers without the need to modify the database connection, if all those servers
have equivalent Data Source Names created with the same name.

Creating an ODBC Data Source Name (DSN)

You can create a new ODBC DSN from either within CodeCharge Studio or by using the Data Sources (ODBC) option
available in your system's Control Panel or administrative tools. In either case, the steps involved are essentially identical
so we will demonstrate how the process is accomplished from within CodeCharge Studio.
The first step is to open the Add New Connection dialog of Figure 5-12. This can be done by right-clicking on the
Connections option in the Project Explorer window and selecting New Connection from the pop-up menu. Select the
Use ODBC Data Source Name radio button to indicate your intention to use an ODBC DSN then click on the New...
button to begin the process of creating a new DSN.

81
 Figure 5-12: Creating an ODBC DSN
Once in the ODBC Data Source dialog, select the System DSN and click Add to create the new data source. You are
then presented with a list of ODBC drivers, from Figure 5-13, that are currently installed on the local machine. Scroll
through the list to locate the driver for the database you intend to use then select it and click Finish.

Figure 5-13: ODBC Data Source Dialog

82
Depending on the driver you selected, you may or may not be required to enter additional information. For an Access
database driver, you are presented with the window of Figure 5-14 to specify the name of the DSN, an optional
description, as well as the location of the Access database to be associated with the DSN.

Figure 5-14: ODBC Setup Dialog

Creating an ODBC DSN for other databases such as MSSQL, Oracle, and Microsoft Excel are inherently similar to these
steps, except for the last step that varies depending on the database driver. However, once you have created a DSN, you
can use it in multiple projects by simply selecting it from among the list of available DSN's.

Design Time Connection to a MySQL Database

A design-time connection to a MySQL database must be made by using an ODBC DSN created using the MyODBC
driver. This is because It is not possible to connect directly to MySQL at design-time as can be done with an Access
database using OLE DB. As such, if you intend to connect to MySQL at design-time, you need to first download and
install the MyODBC driver which can be obtained from http://www.mysql.com/downloads/api-myodbc.html.
After installing the MySQL driver, proceed to setup an ODBC DSN (Data Source Name) to point to the MySQL database.
Figure 5-15 depicts the dialog used to setup the DSN. The fields that need to be configured are listed in Table 5-6.

83
 Figure 5-15: Configuring MySQL Driver
Table 5-6: MySQL Configuration Parameters

Parameters Description
Windows DSN Name: Specify a name of your choice to be used as the Data Source Name
MySQL host: This is the IP address of the machine where the MySQL server is located. For a local database,
you can enter 'localhost'
MySQL database The name of the database within the MySQL server
Name:
User: The user account to be used to access the database
Password: The password corresponding to the User name.
Port: By default, MySQL listens to port 3306. If a different port number is used, enter it here.

The rest of the fields in the DSN configuration windows can be left blank unless you have a specific reason for configuring
them. Once the DSN has been setup using the MyODBC driver, you can now use it for the design-time connection within
CodeCharge Studio as illustrated in Figure 5-16.

84
 Figure 5-16: Setting Up a MySQL Connection
Table 5-7: MySQL Connection Parameters

Parameters Description
Connection Name: Specify a name of your choice to identify the connection within CodeCharge Studio.
Database: Select MySQL
Use ODBC Data Source With the radio box checked, select the DSN you previously created using the MyODBC
Name: driver
User Name: The user account to be used to access the database
Password: The password corresponding to the User name.

DNS-Less/JET Connections
An alternative to using a DSN connection is using a DNS-Less connection that is in essence a connection string
containing the details necessary to establish the connection to the database. The makeup of a connection string varies
depending on the database being used as well as the provider/driver. While it is possible to simply type out a proper
connection string, the better alternative would be to use the Data Link Properties window to construct one for you.
The Data Link Properties window of Figure 5-17 can be accessed from the Add New Connection or Modify Connection
windows by clicking on the Build button. The following list defines the important tabs of the dialog:
• The Provider tab is used to specify the database provider/driver to be used. Under this tab will be listed all the database
providers currently installed on the machine. Select the appropriate provider for the database you want to connect to then
click on the Next button to move to the Connection tab. In the illustration, the Microsoft Jet 4.0 OLE DB Provider has
been selected to create a connection string to a Microsoft Access database.

85
Figure 5-17: Data Link Provider Properties

86
 Figure 5-18: Data Link Connection Properties
• The fields displayed in the Connection tab of Figure 5-18 will vary depending on the provider selected in the Provider
tab. In the case where the Microsoft Jet 4.0 OLE DB Provider was selected, the Connection tab will resemble the
illustration. In this case, it is necessary to enter a path to the Microsoft Access database file in the Select or enter a
database name field. If the Microsoft Access database file is password secured, you would also need to enter the
necessary authentication details in the User name and Password fields. Otherwise, as is most frequently the case, the
Blank password checkbox is activated to indicate that no authentication is required to access the database.
• After entering the necessary details, it is a good idea to click on the Test Connection button to make sure that the
configuration works correctly. If all is well, a dialog box appears to confirm the integrity of the connection, otherwise, an
error message is displayed depending on the specific error.

Configuring the Server-Side Database Connection

The server connection is the database connection used by the generated pages to retrieve and update data. This
connection can be different from the design connection used by the CodeCharge Studio, especially if you are publishing
your web application to a remote web server. Note that the process of configuring the server-side database connection is
different for different programming languages.

Server-Side Connections for ASP

When using ASP, there are two common methods used to create the server-side connection. The first method involves
using an OLE DB provider such as the Microsoft Jet 4.0 OLE DB Provider, used to connect to Access databases. The
other method involves making a connection with an ODBC DSN. When using an ODBC DSN, the DSN must be
configured on the machine where the pages will be published. You can then simply specify the ODBC DSN name when
configuring the connection. For more information on ODBC connections, refer to "ODBC Data Sources" in section 5.4.4.
The process of creating a connection based on an OLE DB provider varies based on the type of the database as well as
the provider being used. However, the common denominator is that the process ends with the creation of a connection
string. Basically, a connection string is a group of attribute-value pairs which specify the parameters for the connection
string such as the name of the provider and the location of a database. For example, the connection string for Microsoft
Access is usually of the form:

87
Provider=Microsoft.Jet.OLEDB.4.0;User ID=Admin;Data
Source=C:\CodeChargeStudio\Projects\TaskMan\Intranet.mdb;Persist Security Info=False
In sample connection string, notice that the location of the database file is specified using a file system path. The
implication here is that if you are publishing the site to a server, you need to know the path to the Microsoft Access
database files.
Note that the path cannot be specified as a URL or a relative path (e.g., ../database.mdb). When the Data Link
Properties dialog is used to create the connection string, the path to the database file is entered under the Connection
tab, as illustrated in Figure 5-19.
In certain cases when an ASP site is published to an external server, such as a commercial ISP host, it is not always
possible to know the file system path to the Microsoft Access database. In such cases, you can use of the
Server.MapPath() ASP function to automatically retrieve the path to the file. In this case, the function call is embedded
directly into the connection string:
Provider=Microsoft.Jet.OLEDB.4.0;User ID=Admin;Data Source=" & Server.MapPath(Intranet.mdb) & ";Persist Security
Info=False
If you use the Server.MapPath() function, make sure that the Access database file resides in the same location as the
Common.asp file. Also note that the Server.MapPath() function can only be used for the server-side connection, never the
design-time connection.

Figure 5-19: Data Link Properties for ASP

When connecting to databases other than Microsoft Access, the process of creating the server-side connection is
essentially the same, with variances based on the parameters required to create the connection string. For example,
when using a Microsoft SQL Server or Oracle database, you can either use an ODBC DSN or an OLE DB Provider. The
choice, of course, depends on whether you have the ODBC driver or OLE DB provider available on the machine where
the pages will be published. Additionally, under certain conditions, some drivers yield better performance than others. In
these cases, you would need to refer to the documentation that comes with the driver for details on its performance.
Figure 5-20 depicts a typical configuration for a Microsoft SQL server database using the Microsoft OLE DB Provider for
SQL Server. When connecting to SQL Server and Oracle databases, among others, you must always specify a username
and password that has access to the tables used within the project. Some user accounts have access to the database,

88
but not to the required tables within the database. Note that if you intend to use a MySQL database for a published ASP
site, you must make the connection using an ODBC DSN created using the MyODBC driver.

Figure 5-20: Data Link Properties for SQL Server

Server-Side Connections for PHP

Server side connections in PHP vary depending on the database being connected to. MySQL is the most common
database used with PHP and PHP has the capability of connecting directly to a MySQL database without going through
an intermediate driver or provider. The following are the settings that need to be made for the server-side connection to
the MySQL database:

89
 Figure 5-21: Server-Side Connection Configuration for MySQL/PHP
Table 5-8: Server-Side Connection Parameters for PHP

Parameters Description
PHP Database Library
Select MySQL.

Database or ODBC connection Enter the name of the MySQL database.

name
Host: Enter the IP address or hostname of the machine where the MySQL server is
located.
Port: Leave blank, unless using a port other than the default (3306).
Login: The user account to be used to access the database.
Password:
The password corresponding to the Login name.

Persistent Connection Select this option so that opened connections are reused whenever available.

Apart from MySQL, PHP is also used in conjunction with other databases such as Microsoft Access with an ODBC DSN
as well as Oracle and Microsoft SQL server. When using a database such as Oracle or Microsoft SQL server, you should
first ensure that the server has been compiled with support for the database or the extension for the database is enabled
within the PHP.ini configuration file. If the server does not have the necessary extension, an error will be generated when
you attempt to view the page. The error usually states that you attempted to use a undeclared function, which is indication
that the server does not have the required extension.
The configuration for other databases in PHP is similar to the configuration for a MySQL database. However, the PHP
Database Library field of Figure 5-21 should be adjusted to indicate the type of the connected database. In the event
that you want to use an ODBC DSN to connect to a database such as Microsoft Access, the PHP Database Library field
should be set to ODBC. In this case, as depicted in Figure 5-22, a new field called Database appears so that you can
select the type of connected database.

90
 Figure 5-22: Server-Side Connection Configuration for ODBC/PHP

Server-Side Connections for Cold Fusion

When using the Cold Fusion application engine, and language, all server-side connections must be made through an
ODBC DSN. The design-time connection used within CodeCharge Studio can be configured using an OLE DB provider or
an ODBC DSN but the server-side connection must use an ODBC DSN. For more information on ODBC connections,
refer to "ODBC Data Sources" in section 5.4.4. Figure 5-23 depicts the Server tab of the connection properties window,
which is used to configure the ODBC DSN connection.

91
 Figure 5-23: Configuring a Server-Side ODBC Connection
Depending on the database you are using, you might also have to specify the username and password to be used to
login to the database once the connection is made by the ODBC driver. This is usually not required when using a
Microsoft Access database, but other databases such as Oracle and MS SQL Server require authentication details. Users
of Cold Fusion MX server should also register the ODBC DSN using the Data Sources option of the Cold Fusion
Administrator.

Server-Side Connections for JSP or Java Servlets

When publishing in JSP or Java Servlets, the server-side connection differs significantly from the other languages. You
have to explicitly specify the driver to be used for the connection as well as enter a URL for the connected database.
Figure 5-24 depicts the dialog window and Table 5-9 provides an explanation of the parameters.
Table 5-9: Parameters for Configuring JSP and Java Servlets Connections

Parameters Description
JDBC Driver: The name of the driver to be used, (e.g., sun.jdbc.odbc.JdbcOdbcDriver)
Database URL: The URL pointing to the database to be connected (e.g., jdbc.odbc:intranet)

Note that you are not restricted to using JDBC drivers only. You can use any valid driver provided that it is installed and
properly configured on your system. If you are not familiar with Java database drivers and URL's, you can refer to Java
documentation for more detailed information.

92
 Figure 5-24: Configuring Connection for JSP and Java Servlets
Note that, in addition to the parameters of Table 5-9, the optional parameters of Table 5-10 can also be used as required.
Table 5-10: Optional Parameters for Configuring JSP and Java Servlets Connections

Parameters Description
User Name The username to be used to login to the database.
User Password The password corresponding to the Login user name.
Max Number of Connections The maximum number of connections to be allowed to the database.
Connection Timeout The duration of time after which an idle or unresponsive connection will be terminated.
Database properties some drivers allow other properties to be specified.

Server-Side Connections for PERL

Just like all other languages, the design-time connection when using PERL can be made using an OLE DB provider and
driver or through an ODBC DSN. However, the server-side connection for the PERL language requires that you install
additional packages that implement the database connectivity.
Depending on the PERL distribution you are using, there are different ways of installing packages. There are also a
number of publicly accessible sites where the packages can be downloaded from. These include:
• http://www.indigostar.com/packages/perl5_6/
• http://www.perl.com/CPAN-local/README.html
• http://www.activestate.com//PPMPackages/5.6
• http://dada.perl.it/PPM

93
• If you have the IndigoStar distribution of PERL, you can use the GUI package manager to automatically
download and install packages. For the ActivateState distribution, you can run the PPM.bat file from a command
prompt and use it to browse, download and install packages. For other distributions, please consult the
documentation that accompanies the software.
• The packages required for PERL database connectivity are:
• The database Interface called DBI.
• A database driver for the specific database you are using. The name of the drivers is usually of the form
DBD:database_name, where database_name is the name of the database concerned.
For instance, if your database of choice is MySQL, you would need to have the DBI package as well as DBD:MySQL.
Similarly, to connect to an ODBC data source, you would need the DBD:ODBC package in addition to the DBI package.
Note that the DBI package needs to be installed only once, after which you can incrementally install the DBD packages
for the databases you use.

Figure 5-25: Configuring a PERL Connection

Within CodeCharge Studio, setting up the Server side database connection is pretty straight forward. To begin with, note
that the design-time connection does not use the DBI or DBD packages but rather can be configured to connect directly
to the database using OLE DB or ODBC. It is only the server-side connection that uses DBI.
The connection string used for the server-side connection is of the form:
DBI:database_driver_name:database_name
For example, for a MySQL database:
DBI:MySQL:MySQLDBName
For an ODBC DSN:
DBI:ODBC:DSNName

Server-Side Connections for .Net

94
When publishing .Net code in C# or VB.Net, you can use the DSN and DSN-less connections similar to those used when
publishing in ASP. Note that if you choose to use an ODBC connection, you have to download the install the Microsoft
ODBC .Net Data Provider. This is not installed by the default .Net framework SDK. If you attempt to publish a project
using a framework when the ODBC .Net data provider is not installed, you will receive a compilation error stating that
Microsoft.Data.Odbc.dll could not be found. This is one of the files that comes with the Microsoft ODBC .Net data
provider.
Apart from the ODBC .Net data providers, other database vendors may introduce other drivers beyond those that come
with the .Net framework SDK. For instance, Oracle introduced the ODP .Net data provider that provides native support for
connecting to Oracle databases. The ODP .Net provider offers better performance than other OLE DB or ADO drivers
since it taps into native Oracle API without using an automation layer such as that used by OLE DB or ADO.
In the event that you use one of these native vendor provided drivers, refer to their documentation for instructions on how
to configure the connection. Remember that when the project is published and compiled, the binaries for the driver have
to be present and properly registered in the machine where the compilation takes place.

5.6 Implementing Security

A necessary prerequisite to the implementation of any security within a project is the creation of a login page to
authenticate users. To create a security login page, select the File | New | Page... menu option from the CodeCharge
Studio menu. Then, as depicted in Figure 5-26, in the Add New Page window, select Login Page.
Alternatively, if you want to add a login form to an already existing page, you can use the Authentication Builder of Figure
5-27 to create the form within the page. Once you have a login page in the project, you can move on to configuring the
project security settings.

Figure 5-26: Creating a Security Login Page

95
 Figure 5-27: Authentication Builder

Project Security Settings

To setup security for a project, you need to specify the database table and fields that contain the user information. This is
done using the Security and Security Groups tabs of the Project Settings windows.
In the Security tab, you have to specify the database table that contains the user details as well as the fields within the
table that contain particular information. This information includes:
• the ID field which holds the unique ID for each user,
• the login and password fields which contains the username/password combination to be used during authentication and
optionally,
• a group level field which indicates the group to which each user belongs.
When the project pages are published and viewed by a user, the authentication mechanism sets session variables that
hold the identity of the user after successful authentication. You can configure the names of the session variables by
clicking on the Advanced... button to open the Advanced Security Settings window of Figure 5-29.

96
 Figure 5-28: Security Settings

Figure 5-29: Advanced Security Settings

By default, session variables are created for the User ID Variable and Group ID Variable only. However, if you want to
make use of the other session variables, you can enter names for the User Login Variable and User Password Variable
so they are created too. The names specified should not have any special characters or spaces in them. You also have
the option of having a cookie created containing the user information by specifying a name for the Cookie Variable.
If the site users are categorized into different groups, you can use the Security Groups tab of Figure 5-30 to setup group
ID's and names. The Group ID values should correspond to the database field that specifies the group to which each user
belongs.

97
Usually, the group ID's are setup in a hierarchical manner such that users with a higher group ID have more security
clearance than users with a lower ID. If this is the case, you can check the Higher Level Inclusive of Lower Levels
checkbox so that users with a higher group ID can access all the pages that are accessible by users with a lower group
ID.
Alternatively, you can uncheck the Higher Level Inclusive of Lower Levels checkbox if you want each group ID to be
strictly allowed to access pages designated for that group only. In this case, a user with a group ID such as 3 will not be
able to access a page designated for any other group ID.

Figure 5-30: Setting Group IDs

Page Level Security

You can specify the users who are allowed to access a page by using the Restricted property of the page in the page
Properties window. When the Restricted property is set to No, all users can access the page without having to login.

Figure 5-31: Page Level Security

If the Restricted property is set to Yes, you can use the [...] button next to the property to further specify the groups that
are allowed to access the page.

98
The Page Security Groups window of Figure 5-32 shows the various groups that are currently setup and allows you to
specify which groups should be able to access the page. For instance, in Figure 5-32, users belonging to the Admin
group can access the page but not users belonging to the User group. You can also click on the Groups... button to add
new groups.

Figure 5-32: Record Security Groups

Form Level Security

Apart from setting security at the page level, you can also set form level security. This is done using the Restricted
property of the form of Figure 5-33.

Figure 5-33: Form Properties

Use the [...] button next to the Restricted property to set the groups that should be allowed to access the form. The extent
to which the groups can be configured depends on the type of form. For a grid form, you can determine which groups will
be able to view the contents of the form using the dialog of Figure 5-34.

99
 Figure 5-34: Grid Form Security Settings
In the case of record forms, you can set group access based on the different operations that can be performed in a record
form. The four operations are Read, Insert, Update, and Delete. A group with Full access is able to perform all the four
operations.

Figure 5-35: Record Security Groups

When setting security at the form or the page level, note that giving access to all groups is not the same as not setting
any security at all. If all groups have access, each member of the groups is still required to login. This means that people
who are not registered in the database will not be able to access the form or page.

5.7 Multiple Directories within a Project

Typically, all the pages within a given project are contained within the same folder. In this manner, any links between the
project pages are simple relative links with just the name of the linked page. Additionally, most projects usually have an
images folder and a themes folder that contain resources such as images and external cascading style sheets. When
necessary, you can create a project with multiple nested folders, but in doing so there are some considerations that you
have to bear in mind.
When an existing page within a project is moved to a different folder, CodeCharge Studio prompts you whether the links
to the page should be adjusted accordingly. You should select Yes so that other pages that link to the relocated page are

100
adjusted to reflect the new location of the page. The links within the relocated page, such as image links, are also
adjusted to refer to the correct location of the resources.

5.8 Using Include Pages

During the process of creating a site, there is usually some content that has to appear in every page within the site. For
instance, the navigation controls used to access the different pages within the site should appear in each page so that the
user can move between pages easily. To provide a uniform and centralized way of including common content into
multiple pages, CodeCharge Studio allows pages to be designated as includable. This is done by setting the Includable
property for a page to Yes in the page Properties window of Figure 5-36.

Figure 5-36: Properties Page for Include Files

After defining an includable page, you can then include the page within other pages. To do this, open the page where the
include page is to be added and place the cursor at the point where the include page should appear. Then click on the
Include Page button under the Forms tab of the Toolbox, as depicted in Figure 5-37.

Figure 5-37: Forms Toolbox

The dialog of Figure 5-38 will appear so that you can select the page to be included. Additionally, you can assign a name
for the include page control object that is used for reference purposes within the site code.

Figure 5-38: Include Page Selection

101
Include pages can be added to as many pages as desired within the site. The main advantage of using include pages is
that changes to the common content need to be made in one location only. After changing the contents of an include
page, the changes will be reflected in all the other pages where the page is included. This makes it easier to maintain
consistent functionality and appearance as well as reduce the size of pages that share common content.

Absolute and Relative URLs

Concerning includable pages, it is possible to include a page located in a different folder. However, the included page
should not have manually created relative links to other pages or resources. For instance, a relative link is provided in the
pages as follows:

<img src="images/logo.gif">
Note that the relative link would not work if the includable page was included into another page in a different folder. This is
because the relative URL would no longer point to the correct resource. However, a fully qualified URL would work
regardless of the location of the includable page. For instance, the following is an example of an fully qualified URL:

<img src="http://www.mysite.com/images/logo.gif">
If an includable page is used in multiple folders and the page contains manually created links, the URL's should be
absolute or you should have local copies of the includable page in the folder where the page is included.

5.9 Using the Page Template

When new pages are created in a project, the pages are based on an empty HTML page with no content, apart form a
few basic HTML tags. A sample template is listed in Listing 5-1.
Listing 5-1: Page Template

<html>
<head>
<title>NewPage1</title>
</head>
<body>

</body>
</html>

However, it is possible to designate a different HTML page be used as the basis for creating new pages within a project.
This is done by specifying the path to the template page in the Tools | Options... menu to access the Options dialog of
Figure 5-39. In the dialog, select Paths from the Category tree.
The page template is useful when you want the pages created in a project to have a common look and feel. In particular,
the template page can be used to create pages that contain customized meta tags to describe the content and nature of
the page. For example, Listing 5-2 contains example meta tags for a page template.
Listing 5-2: Template Page Meta Tags

<meta http-equiv="expires" content="0">

<meta http-equiv="Age" content="699">
<meta name="author" content="Enter Author Name">
<meta name="robots" content="all">
<meta name="keywords" content="Enter keywords here">
<meta name="description" content="Enter a description here.">
The HTML template page can contain HTML code as well as client side script code such as JavaScript. However, the
page cannot contain server-side code such as ASP or PHP.

102
 Figure 5-39: Setting Default Template Page

5.10 Working in Design Mode

Within the document window of Figure 5-40, Design mode presents a what-you-see-is-what-you-get (WYSIWYG)
representation of a HTML page template. Design mode is suited for adding and manipulating the contents of a page
without interacting directly with the underlying HTML code. When working in Design mode, you can use the Builders to
add various components to the page as well as drag and drop components from the Toolbox.

Figure 5-40: Integrated Design Environment Design Mode

103
When a selection is made in Design mode, the Properties window displays the corresponding properties for the selected
element. You can therefore use the Properties window in conjunction with Design mode to alter the various properties
for an element and immediately see the effect of the change.
Design mode is also ideally suited for applying the operations available in the Table, Formatting, and Positioning
toolbars. For instance, you can use the Formatting toolbar to set font properties such as size, emphasis and alignment. If
the toolbars are not visible, you can bring them up using the View | Toolbars menu option.

Using Tables for Layout

HTML tables can be used to enhance the appearances of pages by providing a convenient way to layout text, graphics as
well as other tables. The main components of a table (<table>) are rows (<tr>) and columns/cells (<td>).
A table consists of one or more rows which in turn contain cells. When a table is initially created, each row has the same
number of cells but the table can then be adjusted to merge or split some of the cells. In addition to the rows and cells, it
is further possible to assign attributes to the <table>, <tr>, and <td> tags to enhance their appearance.

Adding a Table
To add a table in Design mode, you can either use the Table | Insert Table... menu option or simple click the Insert Table
button in the toolbar. This brings up the Insert Table window of Figure 5-41 where you can configure the properties of the
table to be created. The properties for the dialog are listed in Table 5-11.

Figure 5-41: Inserting a Table

Table 5-11: Table Parameters

Parameters Description
Rows: Enter the number of rows to appear in the table.
Columns: Enter the number of cells per row.
Alignment:
Specify how the table will be aligned (Default, Left, Center, Right).

Border Size: Enter the number of pixels for the border.

Width: Enter the width of the table. This can be entered either as a percentage of the available page width or in
pixels.
Cell Padding: This value specifies the amount of space in pixels between the cell contents and its borders.
Cell Spacing: This value specifies the amount of space in pixels between adjacent table cells.

When a table is used to determine the layout of the page, the Border Size property is usually set to 0 so that the table in
invisible to the user. After creating the table, you can then proceed to add content into the table such as text, images, or
even forms containing other tables.
For example, in Figure 5-42, a table with three rows is used to layout a page. The first and last rows have three cells
while the cells of the second row have been merged into one cell. Although the Border Size property of the table is set to
0, the design window shows the borders of the cells to aid in the design process. However, when the page is actually
viewed in a browser, the border will not be visible.

104
 Figure 5-42: Sample Tables

5.11 Editing HTML Source Code

When a page is opened in HTML mode within the document window, the HTML code that makes up the page template is
available for viewing and editing. While most of the HTML code is standard HTML markup, typical of any HTML page,
there are some considerations that you need to bear in mind if you edit the code manually within CodeCharge Studio,
using the FrontPage Add-In or any other HTML editor.
Each page within CodeCharge Studio is composed of an HTML template whose contents are visible in HTML mode as
well as programming code that can be viewed in Code mode. When the pages are published to the server and requested
by a user over a browser, the programming code opens and parses the HTML template code to create the final page that
is sent back to the users browser. As such, the HTML template contains special blocks of HTML code which form the
basis of the parsing process. Therefore, it is imperative that these blocks of HTML code be in a specific format in order for
the page to be parsed correctly.
The main template blocks within the HTML template are demarcated by HTML comments as noted in Listing 5-3.
Listing 5-3: Sample Template Block
<!-- BEGIN Block Name -->

Components, objects, and other code contents go here.

<!-- END Block Name -->

Basically, the HTML comments mark the beginning and end of a block of HTML code that can be treated as a unique
entity during the parsing process. It is normal for a block to contain other nested blocks. For example, a block for a grid
form also contains blocks for the sorters, the row as well as the navigation controls for the grid. It should be evident that,
for the grid to be parsed correctly, the different blocks that make up the grid must be present and with their correct
names. Therefore, care should be taken when editing the HTML source code so as not to render the blocks unusable by
the programming code.
Along with the template blocks, a HTML template page also contains template variables that are always contained within
curly braces (i.e., { }). The code of Listing 5-4 demonstrates a row template block with five template variables within the
cells of a table row.
Listing 5-4: Sample Template Variables
<!-- BEGIN Row -->
<tr>
<td>{task_name}</a></td>
<td>{project_id}</td>
<td>{priority_id}</td>
<td>{status_id}</td>
<td>{user_id_assign_to}</td>

105
</tr>
<!-- END Row -->
Template variables represent values are determined at runtime and substituted into the template page to create the final
page. For instance, each database field in a grid form has a corresponding template variable. When the page is executed,
the programming code retrieves values from the database and replaces the template variables with the retrieved values.
Just like template blocks, the names of template variables should not be altered manually otherwise the programming
code will not be able to parse the variables. Template variables can be moved around to customize or adjust the layout of
the page but this should be done with care and prior knowledge of how the change will affect the parsing of the page.

5.12 Using JavaScript/Jscript

Ordinarily, a page is mostly composed of HTML code that defines the static content within the page. This is the content
that is shown when a page is opened in HTML mode. In certain situations, it is desirable to make a page more interactive,
which can be accomplished by adding client-side scripts.
The execution of client-side scripts is largely dependent on events triggered when the user performs certain actions. The
script consists of a set of instructions for the action to be performed in response to the event.
The most popular language for writing client side scripts is JavaScript. JScript is a Microsoft flavor of JavaScript that is
specifically geared for execution on the Windows platform. Scripts can also be written in VBScript, but most non-Microsoft
browsers don't support VBScript.
As with most browsers, scripts are sometimes complicated by the fact that not all browsers support the same object
model when it comes to script execution. For the most part, basic script operations such as showing a popup window will
more or less execute seamlessly on most browsers. However, as the scripts become more complex, you are bound to
encounter instances where some portions of a script are supported in one browser and not another. In such cases, you
can provide multiple implementations of the same script for each browser type or inform the user of the preferred browser
to use for optimal performance.

Figure 5-43: Creating Actions for Events

CodeCharge Studio provides a number of client-side scripts in the form of actions that can be added to component
events. From Figure 5-43, this is accomplished using the Forms tab of the Toolbox. The client-side events are listed
under the Events tab of the properties window. To add an action, right-click on the event and select the Add Action...
option. Once selected, the dialog of Figure 5-44 appears with the list of available actions from which you can choose one
to be added.

106
 Figure 5-44: Add Action Dialog
Apart from using the actions provided by CodeCharge Studio, you can manually add JavaScript code to a HTML page. To
do this, it is necessary that you have some basic understanding of JavaScript as well as JavaScript reference
documentation to guide you in the process. In particular, you should be aware of the extent to which the code you write is
supported in the browsers that you anticipate your viewers will use.
Within CodeCharge Studio, the Format tab of the Properties window displays a list of events to which you could attach
JavaScript code. This list of events contains most of the available events, but it is not guaranteed to be comprehensive for
all browsers and neither does it indicate browser compatibility.

Figure 5-45: Event Properties

Generally, there are two common ways of adding JavaScript code to an event. If the amount of code involved is small,
you can add all the code directly within the HTML tag. To demonstrate this approach, Listing 5-5 contains JavaScript
code attached to the onClick event of the submit button. The syntax of the code includes the javascript keyword that
identifies the type of script. A semicolon separates the javascript keyword from the actual JavaScript code that is
executed.

107
.
Listing 5-5: Manually Attaching an Action to an Event

<input name="Cancel" type="submit" value="Cancel" onClick="javascript:confirm('Are you sure you want to cancel?');">

The confirm() function is a JavaScript function that displays a popup window in which the user can click on an Ok or a
Cancel button. The function takes a string argument that is displayed in the body of the popup window.
In most cases, you will want to execute more that one line of code. This is where the use of functions becomes useful.
Just like in other languages, a JavaScript function is a group of one or more statements that can be invoked as a single
entity. A function has a name that is used to identify it and optionally, a function can receive arguments.
To define a function, you have to use the <script></script> tags. In most cases, JavaScript functions are defined within
the <head></head> section of a page. Once a function has been defined, it can be called from any section of the page. In
the example of Listing 5-6, a function called myFunction(), which takes no arguments, is defined within <script></script>
tags.
Listing 5-6: Sample JavaScript Function

<script language="JavaScript">
function myFunction()
{
var test;
test = Confirm("Are you sure you want to Cancel?");

if (test)
{
window.location.href = "newpage.asp";
}
}
</script>

The function of Listing 5-6 can be invoked from an HTML event. For example, the function is executed with the onClick
event of Listing 5-7. By using functions in this way, you can execute complex operations through standard browser
events.
Listing 5-7: Executing a Function from an Event

<input name="Cancel" type="submit" value="Cancel"

onClick="myFunction();">

A common use of client-side scripts, such as JavaScript, is to control the properties of various components within a page.
To do this, it is necessary to identify the components so that the code can reference them. In this regard, the Properties
window can be used to set, change or find out the names of various components by clicking on them in Design or HTML
mode. It is to your advantage to name the components in a manner that would be conducive to using the names within
script code.

5.13 Editing Programming Language Source Code

Opening a project page in Code mode displays the code for the page. If the page has any server-side events, two pages
are displayed whereby one is the main page and the other is the page containing the code for the events. Also, all
projects have a set of common files that can be accessed by double-clicking on the Common Files tab in the Project
Explorer window. The common files contain functionality that is shared by all of the pages in project.
By default, the programming code in a page is displayed using a gray back ground. If the code is manually edited to differ
from the code that was generated by CodeCharge Studio, the background color of the code changes to white. The white
background is an indication that the code will no longer be automatically updated by CodeCharge Studio, but rather is
under the control of the developer. This means that any changes you make to the page will not affect the code with the
white background unless you change the code manually. The screenshot of Figure 5-46 shows a block that has been
manually edited and another that is in its original state.

108
 Figure 5-46: Programming Code Windows
In most cases, events should be used to add any custom code rather that manually editing the generated code. Using
events ensures that CodeCharge Studio can still update the code automatically when changes are made to the page.
However, in the rare event when you actually have to change the generated code, you should clearly make a note of the
change made for the sake of future maintenance.
Note that you can revert the code to the originally generated code by deleting all the code then closing and opening the
page. This will cause CodeCharge Studio to re-generate all the original code for the page without the changes that were
made manually.
Within the source code, you will also notice that the blocks of code usually have a comment line containing some value
beginning with the ampersand symbol (e.g., @1-5EF49D21). These comment lines should not be altered or removed
since they aid in the placement of events at specific points within the code.

5.14 Working with Themes

One of the finer points of using CodeCharge Studio is the ability to produce professional web pages without expending a
lot effort, as far as styles are concerned. CodeCharge Studio allows you to select from a range of pre-configured themes
when creating a project, page or form.
Broadly speaking, a theme defines the styles to be applied to various elements within a page. The appearance of most
HTML tags can be influenced by specifying attributes that define properties such as color, size, border, or decoration.
Using a theme provides a centralized way of uniformly specifying the appearance of HTML elements.

Applying a Theme
When applying a theme to a project, page or form, there are four possible methods in which the theme can be applied.

HTML Style
An HTML theme is one in which the styles are specified within the HTML tag and the styles apply only to the tag in which
they are specified. From Listing 5-8, the bgcolor and style attributes apply directly to the td tag for a table cell.
Listing 5-8: Sample HTML Style Tags

<td bgcolor="#B39034" style="border-style: solid; border-width:

1px;" nowrap>

The style attributes are specified inline within the HTML tag. As such, each HTML component that needs to be stylized
has to have the style specified within the tag. The implication of this is that the page can become rather large as each tag
contains a list of style attributes and their values.

CSS File Style

This style type uses Cascading Style Sheets (CSS), which supersede the limited range of presentation available in
HTML. Cascading Style Sheets make it possible to specify rules that determine the presentation of a hierarchy of
elements. For instance, the style specified within a td tag can be used to influence the appearance of not only the td tag
but also the text within the td tag.

109
Rather than being stored inline within the HTML document, the style rules are stored in an external style sheet file which
has the extension .css. This external file is linked to the HTML document using code such as that depicted in Listing 5-9.
Listing 5-9: Including a Style Sheet
<link rel="stylesheet" type="text/css" href="Style.css">

The code that links to the external style sheet file is usually placed within the <head></head> tags of the HTML
document. The style sheet file contains rules for all the styles to be used in the page. A rule is composed of a selector
and a declaration for the selector. From Listing 5-10, H1 is the selector and "color: blue" is the declaration. The
declaration has two parts: property (e.g., color) and value (e.g., blue). Although H1 is an HTML tag, you can also create
your own selectors, as demonstrated by .CustomSelector.
Listing 5-10: Style Rule

H1 { color: blue }

.CustomSelector { background-color: #DEDBDE; }

Within the actual HTML document, any tag for which a rule has been defined automatically inherits the properties defined
by the rule. For instance, if the page has some text within an H1 tag, the text color would be blue. If the rules included
custom selectors, the rules can be applied by specifying the name of the selector within the class attribute of the tag.
Listing 5-11: Assigning a Custom Style

<table class=" CustomSelector">

CSS Page Style

This style type is similar to the CSS file style, but differs only in the method used to store the style definitions. Whereas
the CSS file style stores the styles in an external .css file, the CSS page style, of Listing 5-12, stores the styles inside the
specific HTML document within <style></style> tags.
Listing 5-12: CSS Page Style

<style type="text/css">
<!--
BODY { font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 13px; }
TABLE { font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 13px; }
-->
</style>

With the styles placed within the HTML document, you can edit both the styles and the HTML code in one location. On
the other hand, it would not be possible to edit the styles within a style sheet editor as could be completed if the styles
where in a separate .css file.

CSS Inline Style

This style type is also similar to the CSS file style, but it differs only in the method used to store the style definitions. As
the name suggests, the styles are placed directly within the HTML tags using the style attribute of Listing 5-13.
Listing 5-13: CSS Inline Style

<td nowrap style="border-style: solid; border-width: 1px;

background-color: #B29034; color: #FFFFFF; font-size: 13px;
font-weight: bold;">

This method is similar to the HTML style where the attributes are within the HTML tag. This means that the HTML file can
get rather large as the styles are repeated within each tag.
Unless you have specific reasons to do otherwise, it is recommended that you use the CSS file style that results in
modularity as well as the smallest possible HTML file size. Additionally, you can easily switch styles by simply specifying
another .css style file.

110
Specifying a Theme within a Project
When you create pages or forms using the Builders, the last step usually involves the selection of a theme to be applied
to the new creation. For instance, if you use the Application Builder to create multiple pages, the theme you select is
applied to all the new pages. Later on, you can use the Project | Change Theme... menu option to change to a different
theme.
Note that you are not restricted to having only one theme per project. When you create new forms using any of the
Builders, you can specify a different theme to be applied to the new creations. You can also change the theme for an
existing form by right clicking on its name in the Project Explorer window and selecting the Edit... option of Figure 5-47.

Figure 5-47: Changing a Theme

Once selected, the Edit Record dialog of Figure 5-48 appears so that you can select a new theme to be applied to the
selected form.

Figure 5-48: Editing the Theme for a Page

Editing Existing Themes

You can edit any of the existing themes and apply properties of your choice. It is recommended that you make a backup
of the files in the \Components\Themes folder of your CodeCharge Studio installation before you edit any of the themes.
This allows you to revert back to the original files if necessary. Also, instead of editing any of the original themes, you
should consider creating a copy of the theme then making the changes to the copy.

111
 Figure 5-49: Themes List
Use the Tools | Themes... menu option to open the Themes dialog of Figure 5-49. To edit a theme, select the theme from
the list of available themes then click the Modify... button.

Figure 5-50: Modifying a Theme

The Modify Theme dialog of Figure 5-50 contains the properties for a selected theme. Within the dialog, the style
properties to the right pertain to the HTML version of the style while the style properties on the left are for the CSS
versions of the theme. Table 5-12 contains the parameters for the dialog.
Table 5-12: Modify Theme Parameters

Parameters Description
Theme Name This is the name of the theme. The name should not have any special characters or spaces.
Caption This is the text used to represent the theme when a list of themes is provided for selection. The caption
can be the same as the theme name and it can also contain spaces.
Item This combo box contains a list of the possible elements for which a style can be defined. The values
displayed in the rest of the style fields depend on the selection made in this field.
Reset Item If you make changes to the value of one of the items, you can click this button to discard the change
and revert to the previous value.
Image Scheme Use this combo box to select the image scheme for the theme. The image schemes are defined in the
.cct files located in the \Components\Themes folder of your CodeCharge Studio installation.
HTML Style Properties
<TagName>
The caption for this field changes depending on the selection made in the Item field. For instance, if
PageBody is selected in the Item field, then the caption will be <body>. The value of this field makes up
the contents of the tag appearing as the caption. You can click on the Edit... button to open a dialog
window where you can configure the properties for the tag.

112
Before Inner
Specify any HTML code that should appear before the contents of the tag defined in the <TagName >
HTML
field above.

After Inner
Specify any HTML code that should appear after the contents of the tag defined in the <TagName >
HTML
field above.

Preview HTML This portion of the dialog shows a preview of the various items configured for the HTML style. When you
theme change the properties for any of the items, the changes are immediately reflected in the preview.
CSS Style Properties
CSS File
Click on the [...] button to select a .css file containing the style rules. You can also click on the Edit...
button to edit the contents of the .css file.

<TagName
The caption for this field changes depending on the selection made in the Item field. For instance, if
class="
PageBody is selected in the Item field, then the caption will be <body class=" >. The value of this field is
the cascading style sheet selector which is defined in the .css file.

HTML Enter any extra HTML that should appear within the tag in addition to the contents of the class property
Extended defined in the field above.
Preview CSS This portion of the dialog shows a preview of the various items configured for the CSS style. When you
theme change the properties for any of the items, the changes are immediately reflected in the preview.
Buttons
Linked Files... Click this button to view, add or remove the external files that are linked to the theme. For instance, the
.css file for the theme is one of the linked files.
Apply After making changes to any of the tag definitions, click on this button to apply the changes so that they
can be shown in the style preview.
Save Save changes to the theme files.
Ok Save changes and close the dialog box.
Cancel Close the dialog without saving the changes made

5.15 Searching and Replacing

CodeCharge Studio provides facilities to search and replace occurrences of specified text within a single file or multiple
files. You can access these facilities using the Edit | Find and Replace menu option.

Find
The Find command is used to find instances of some text within a single file that is currently opened in the document
window.

Figure 5-51: Find Dialog

113
 Table 5-13: Find Dialog Parameters

Parameters Description
Find What Enter the text or regular expression to search for.
Match whole word Perform a search for whole words as opposed to parts of larger words.
only
Match case Perform a search which distinguishes between uppercase and lowercase letters.
Regular Expression
Activate this checkbox if the text entered in the Find what field is a regular expression.

Direction Specify the direction in which the search should be performed, based on the current position of
the cursor.
Find Next Find the next occurrence of the search text.
Mark All Perform a search and place a bar mark to the left of each line where the text is found.
Cancel Terminate the search and close the dialog box.

Note that when you are working in Design mode, the Regular Expression and Marl All options are not available. These
two options appear when in HTML or Code mode.

Replace
The Replace command is used to find and replace instances of some text within a single file that is currently opened in
the document window.

Figure 5-52: Replace Dialog

Table 5-14: Replace Dialog Parameters

Parameters Description
Find what Enter the text or regular expression to search for.
Replace with Enter the text which will be used as the replacement text.
Match whole Perform a search for whole words as opposed to parts of larger words.
word only
Match case Perform a search which distinguishes between uppercase and lowercase letters.
Regular
Activate this checkbox if the text entered in the Find what field is a regular expression.
Expression
Replace In
Selection: This option is available if there is some highlighted text in which case the replacement is
restricted within the highlighted text. Whole File: The find and replace is performed for the contents of
the entire file.

Find Next Find the next occurrence of the text to be replaced.

Replace Replaces the selected instance of the search criteria.

114
Replace All Replaces all instances of the search criteria.
Cancel Terminate the search and close the dialog box.

Find In Files
In addition to searches performed within a single document, CodeCharge Studio makes it possible to search for text
within multiple files. To perform such a search use the Edit | Find and Replace | Find In Files menu option to bring up the
Find In Files dialog.

Figure 5-53: Find in Files Dialog

Table 5-15: Find in Files Dialog Parameters

Field Description
Find what Enter the text or regular expression to search for.
Match whole Perform a search for whole words as opposed to parts of larger words.
word only
Match case Perform a search which distinguishes between uppercase and lowercase letters.
Regular
Activate this checkbox if the text entered in the Find what field is a regular expression.
Expression
Look In
Current Document: Perform the search in the current document only. All Open Documents: Perform
the search in all opened documents. Current Project: Perform the search in files belonging to the
current project

File types: Enter a wildcard expression to determine the file types to be searched.
Find Find the next occurrence of the text to be replaced.
Stop Stop the current search.
Close Close the dialog box.

Replace in Files
Along with searches performed in multiple files, you can also search and replace text within multiple files. To perform
such a search use the Edit | Find and Replace | Replace In Files menu option to bring up the Replace In Files dialog.

115
 Figure 5-54: Replace in Files Dialog
Table 5-16: Replace in Files Dialog Parameters

Parameters Description
Find what Enter the text or regular expression to search for.
Replace with Enter the text which will be used as the replacement text.
Match whole Perform a search for whole words as opposed to parts of larger words.
word only
Match case Perform a search which distinguishes between uppercase and lowercase letters.
Regular
Activate this checkbox if the text entered in the Find what field is a regular expression.
Expression
Look In
Current Document: Perform the search in the current document only. All Open Documents:
Perform the search in all opened documents. Current Project: Perform the search in files belonging
to the current project

File types: Enter a wildcard expression to determine the file types to be searched.
Find Next Find the next occurrence of the text to be replaced.
Replace Replaces the selected instance of the search criteria.
Replace All Replaces all instances of the search criteria.
Skip File Do not perform replacements in the current file.
Close Close the dialog box.

5.16 Using Site Diagrams

A site diagram is a visual representation of all or some of the pages within a project. A site diagram could also be thought
of as a map of the pages within a project as well as the links which join the pages. To create a new site diagram, from
Figure 5-55, you can use the Project | Add Diagram menu option or right click on the Diagrams option in the Project
Explorer and select New Diagram.

116
 Figure 5-55: Creating Site Diagrams
When the Select Pages dialog of Figure 5-56 appears, you can then select the pages that you want to show in the site
diagram.

Figure 5-56: Select Page for Site Diagrams

To select a page, simply click on it. To select multiple pages, hold down the Ctrl key while you click on each of the pages.
You can also select a range of pages by clicking on the first page then holding down the Shift key while clicking on the
last page in the range. Once you have selected all of the pages, click OK to create the diagram.
Based on the pages selected, from Figure 5-57, CodeCharge Studio creates a diagram for the pages and shows how
they are linked. To improve the readability of the diagram you can click and drag the individual page icons to move them
around. You can also hold down the ctrl key when clicking on multiple page icons to select all of them and move them as
a group.

Figure 5-57: Display Site Diagrams

The diagram window also has another of buttons in the toolbar which you can use to perform the various operations
defined in Table 5-17. You can also access most of the functions listed by right clicking anywhere within the diagram
window to bring up a popup menu.

117
 Table 5-17: Site Diagram Functions

Button Description
Add a page to the current diagram

Hide a page that is currently in the diagram

Refresh the diagram to reflect any changes that may have been made to the pages

Set the zoom level of the diagram

Specify the level of detail to be displayed in the diagram (High, Medium, Low)

Undo the last operation that was performed on the diagram

For rapid navigation within the project, you can open any page displayed in the site diagram. While within the diagram,
open a page by right-clicking on the page icon and selecting the Open Page option.

5.17 Using External HTML Editors

Besides using Microsoft FrontPage to edit HTML content, you could also configure CodeCharge Studio to work in
conjunction with the HTML editor of your choice. You can do so by using the Tools -> Options... menu to specify the
location of the program you want to use.

Once you specify the external web editor to be used, you can then open a page in that editor by right clicking on the page
name within the Project Explorer and selecting the Open Externally option.

118
With the document open in the external editor, you can proceed to make changes and adjustments to the document.
While doing so, be cautious so as not to alter any of the CodeCharge Studio blocks that appear within curly braces or in
HTML comments. When you are ready to return to CodeCharge Studio, save and close the document in the external
editor then switch back to CodeCharge Studio. A window will appear prompting you that the document was altered
outside CodeCharge Studio. Click on the Yes button to reload the document with the changes made in the external
editor.

119
6. Deploying Projects

6.1 Deploying .Net Applications

If you create a project based on one of the .Net languages (i.e., C# or VB.Net), there are certain prerequisites that have to
be in place. C# and VB.Net share a similarity with Java and JSP in that there is a compilation process that occurs when
the project is published. In most other languages such as ASP and PHP, the project pages are simply published to the
server where they can be accessed by a user. For C# and VB.Net, the .cs or .vb files are compiled to create a windows
dynamic link library (.dll) which is placed in the /bin folder of the published project.
To generate C# or VB.Net projects, you must have a local copy of the ASP.Net Framework Redistributable or the
Framework SDK installed on the machine. Make sure that the version you obtain is 1.0.3705 or higher.
After installing the .Net framework, you need to tell CodeCharge Studio where to find the compilers for C# and VB.Net. To
do so, open the Tools | Options... menu and in the Options window, click on the Paths option. In the field entitled .Net
SDK, enter the path to the C# or VB.Net compiler file.

Figure 7-1: Setting Up .NET Compiler

The C# compiler is a file called csc.exe while the VB.Net compiler is called vbc.exe. The path to this file depends on the
location where the .Net Framework is installed. An example path would be
C:\WINNT\Microsoft.NET\Framework\v1.0.3705. Once you have specified the correct path, CodeCharge Studio will be
able to invoke the compiler when the project pages are published. If you enter the wrong path, CodeCharge Studio will
inform you that it was not able to locate the compiler whenever you attempt to publish a .Net project.
In addition to the compiler requirement, all .Net projects must be published to a virtual folder configured in the web server.
To create a virtual folder, open the Internet Information Services Manager and select the site where the project will be
published. Then, from Figure 7-2, use the Action | New | Virtual Directory menu option to open the Virtual Directory
Creation Wizard which will guide you through the steps of creating a virtual directory.

120
 Figure 7-2: Creating a Virtual Directory
On the main wizard window of Figure 7-3, click Next to proceed to the next step.

Figure 7-3: Wizard Main Window

From Figure 7-4, you have to specify an alias that will be used to access the virtual folder. The alias name can be the
same as the name of the folder where the project will be published or a different name. The alias cannot contain spaces
or other special characters.

Figure 7-4: Specifying a Virtual Alias Directory Name

From Figure 7-5, you have to specify the actual folder where the project pages will be published. The folder can be within
the web server root or any other folder on the machine.

121
 Figure 7-5: Identifying an Content Directory
From Figure 7-6, specify the access permissions for the virtual folder. Unless you have specific reasons, you should
accept the default settings.

Figure 7-6: Specifying Directory Access Permissions

Finally, from Figure 7-7, click Finish to create the virtual folder.

Figure 7-7: Finalize Virtual Directory

Once you setup the virtual directory, open the Project Settings dialog within CodeCharge Studio and under the
Publishing tab, specify the directory path for the virtual folder in the Server Path field. The Server URL field should
reference the alias name you entered for the virtual folder. From Figure 7-8, the alias (i.e., NetProject) is assigned to the
appropriate path parameters in the settings.

122
 Figure 7-8: Assigning a Virtual Directory to CodeCharge Studio
You can then proceed to configure the other project settings as required. When you publish the project, the files will first
be generated to a temporary folder where they will be compiled. After compilation, the files, including the compiled .dll will
be published to the specified path where they can be accessed in a browser window using the alias name of the virtual
folder.

6.2 Deploying ASP Applications

Deploying an ASP 3.0 project is a relatively straight forward process. Before you publish the project, you should ensure
that the server on which the pages are published has the correct version of the VBScript engine. CodeCharge Studio
generates ASP 3.0 which corresponds to VBScript 5.5 or higher. Most IIS servers have the correct version of VBScript
installed, but if you are using Personal Web Server (PWS), you might need to upgrade the VBScript engine. The latest
version of the VBScript engine can be downloaded from the Microsoft Windows Script site.
Also note that, as of this publishing the latest release of the ChiliSoft ASP server, which can be run on Unix flavor
machines, supports ASP 2.0 and not ASP 3.0, which is required.
Along with having the correct version of the scripting engine, your target server should also have the necessary drivers
needed to connect to the database. If you are using a commercial host, the literature on their site should indicate which
databases are supported. Sometimes the host supports ODBC connections, in which case you have to request that an
ODBC DSN be created for you. Once the DSN has been created, you can configure the server-side database connection
to use the remote DSN.
For a DSN-less connection, such as to an Microsoft Access database, the server-side database connection has to be
configured to reflect the location of the Microsoft Access database on the server. In the case where you know the exact
file system location of the database file, you can simply copy the design-time connection string, paste it under the Server
tab, and change the file location. For instance, if the Microsoft Access file is located at
C:\Inetpub\databases\project1\database.mbd, the corresponding connection string would be as depicted in Listing 7-1.
Listing 7-1: Server Connection String

Provider=Microsoft.Jet.OLEDB.4.0;User ID=Admin;
Data Source=C:\Inetpub\databases\project1\database.mbd;
Persist Security Info=False

However, it might be that you don't know the file system location of the database file since you are using a commercial
host. In this case, you can make use of the VBScript Server.MapPath() function to automatically retrieve the path to the
file. To do so, you would need to edit the connection string within the Server tab of the connection settings window and
include a call to the function. An example connection string using the Server.MapPath() function would be as listed in
Listing 7-2.
Listing 7-2: Using MapPath to Define file Path

Provider=Microsoft.Jet.OLEDB.4.0;User ID=Admin;Data Source=" &

Server.MapPath("database.mdb") & ";Persist Security Info=False

123
In the case of Listing 7-2, the database file resides in the same location as the generated common.asp page. The
Server.MapPath() function retrieves the appropriate file system path and includes it in the connection string.

Figure 7-9: Assigning a Connection String

If you opened the common.asp file, you would see the connection string appearing as listed in Listing 7-3.
Listing 7-3: Connection String in Common.asp

ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;
User ID=Admin;Data Source=" & Server.MapPath("database.mdb") &
";Persist Security Info=False"

In the case where you are publishing to the same machine where CodeCharge Studio is installed, you can simply specify
that the server-side connection string is the same as the design connection string.
After having configured the connection string properly, make sure that the Publish tab of the Project Settings window
specifies the correct location where the files should be published. Unless you are using a virtual folder, the Server Path
folder should specify a location within the root of your web server.

Figure 7-10: Specifying Publishing Settings

You can then press F9 or click on the Publish Project button to begin the publishing process. After publishing, you can
open one of the pages within CodeCharge Studio and switch to Live Page mode to view it. Note that the browser opens
the .asp page and not the .html page.
If you anticipate that your users might access the site using an unqualified domain URL such as
http://www.mydomain.com/, then you should configure the server so that it opens up a .asp page by default as opposed
to a .html page. Otherwise, the .asp page would need to be specified in the URL.

6.3 Deploying ColdFusion Applications

124
The two main concerns when deploying a Cold Fusion project are server compatibility and configuring the server side
connection string. The Cold Fusion code generated by CodeCharge Studio requires a server that supports the full set of
tags in Cold Fusion 4.01 or higher. This means that you cannot deploy the site to a Cold Fusion Express site. Cold Fusion
Express supports only a subset of the tags that are supported in the full version of Cold Fusion server.
Although the minimal server version required in 4.01, you can also deploy the pages to servers that have version 4.5, 5.0
or Cold Fusion MX. The generated code in able to run properly on all these later versions. As a matter of fact, you can
add custom code specific to these later versions provided that the server you will deploy to supports the tags you add. For
example, if you deploy to a Cold Fusion 5.0 or MX server, you can make use of the CFGraph/CFChart tags but you would
not be able to do this with a Cold Fusion 4.01 server.
The Cold Fusion 4.01 server side connection is unique in that it must be made via ODBC.

Figure 7-11: Specifying Cold Fusion Server Settings

This means that before you publish your site to the server, you need to create the ODBC DSN that you will connect to. If
you publish your site to a remote host, you will probably need to ask the host to create the DSN for you unless it has
already been configured. Under the Server tab of the connection properties dialog, you would then enter the DSN name
as well as other optional parameters such as username and password.
If you use a Cold Fusion 5.0 or Cold Fusion MX, you are not limited to an ODBC DSN when making the server side
connection. However, you have to register a data source name in the Cold Fusion Administrator for the database you are
using.

Figure 7-12: Configuring Cold Fusion

Within the Data Sources window of the Cold Fusion Administrator, you can create data sources for DB2, Informix,
Access, ODBC Sockets, Oracle, SQL Server and Sybase. For detailed information on how to create the different types of
data sources, please refer to the Cold Fusion Administrator documentation.
Once you have configured the data source, then you can specify the data source name when configuring the server side
connection in CodeCharge Studio. In most cases, you will not have access to the Cold Fusion Administrator if you use a
server belonging to a commercial host. In this case, you would need to request that the data source be created for you.

125
6.4 Deploying Java & JSP Applications
The process of deploying Java projects is relatively straightforward, because almost all modern Java servers support
Web Application Archive (WAR) standard for java applications deployment. The details of server configuration and
deployment process may vary from server to server, but usually it means specifying the path to the generated war file and
context path to the web application. Many servers support auto deployment, when you are only expected to copy
generated war file to the particular directory at server and server will do the remaining job for you.
CodeCharge Studio has several project properties that can affect the application deployment.

Class Path
property is needed for compilation of the project. At least Servlets API should present there. XML parser library
and Regexp library may be needed also. See Java Application requirements section for more information.
Runtime libraries
is the libraries that will be copied to the WEB-INF/lib directory and eventually added to the application class path
at run time. Put here the libraries your application is dependant on.
Target server
defines how your application will be deployed because different servers have different deployment options.
Deploy webapp as
this property has two options. "as war file" means standard WAR will be generated. This options works almost
with all modern application servers and handy with auto-deployment feature of several servers (see deployment
scenarios below). "unpacked" means that the application will be published to folder unpacked. This option is
helpful for changes in one JSP page and its quick publish (when only one page is published). Some older
servers (that do not support WAR archive files) may need this options too.
The last five properties are needed to configure Tomcat 4.0 manager application for remote Tomcat administration (when
Target server set to Tomcat 4.0). You may leave them empty for other target servers.
Normally you will have no problems with Java deployment with any Java Application Server that supports Servlets version
2.2 specification from Sun. The details of deployment process for several popular Java Application servers follows.

Tomcat 4.0 scenarios

Check that DB drivers are in class path of your server. Choose appropriate scenario and change properties marked red.

Scenario 1. Auto-deployment from webapps directory (DataSource extension is not used)

126
Before code generation verify that Use Data Source site property is set to No. Fill in connection properties to indicate
Driver class name, Database url, user login and password. Ensure that your database driver is in your application server
class path. Place generated war file to where appBase attribute of Virtual Host configuration element points to. Generally
it is /webapps.

Scenario 2. Deployment through Context configuration (DataSource extension is not used)

Add Context element as a child to Host element in your server.xml configuration file.
<Context path="/JSPPortal" docBase="JSPPortal.war">
</Context>

path is the context path of your application. docBase is absolute or relative to

appBase path to the war file.

Scenario 3. Deployment through Context configuration (DataSource extension is

used)
Before code generation verify that Use Data Source site property is set to Yes.
Set connection DataBase URL property to java:comp/env/jdbc/Connection1. Where
Connection1 is name of your connection.
Define Context element as described in previous scenario. Add Resource child
element with ResourceParams to the Context element:
<Resource name="jdbc/Connection1" auth="Container" type="javax.sql.DataSource"/>
<ResourceParams name="jdbc/Connection1">
<parameter>
<name>user</name>
<value>User Name</value>
</parameter>
<parameter>
<name>password</name>
<value>User Password</value>
</parameter>
<parameter>
<name>driverClassName</name>
<value>Driver Class Name</value>
</parameter>
<parameter>
<name>driverName</name>
<value>Database Connection URL</value>
</parameter>
</ResourceParams>

name is a JNDI name as indicated in your CCS Connection properties.

Resin 2.0 scenarios

Check that DB drivers are in class path of your server. Choose appropriate scenario and change properties marked red.

Scenario 1. Auto-deployment from webapps directory (DataSource extension is not used)

Before code generation verify that Use Data Source site property is set to No.
Fill in connection properties to indicate Driver class name, Database url, user login and password.
Ensure that your database driver is in your application server class path.
Place generated war file to where war-dir element of Virtual Host configuration element points to. Generally it is
<RESIN_HOME>/webapps.

Scenario 2. Deployment through web-app configuration (DataSource extension is not used)

Add Context element as a child to Host element in your resin.conf configuration file.

<web-app id="/JSPPortal"
app-dir="c:/projects/Portal/JSPPortal.war"/>
id is the context path of your application. app-dir is absolute or relative to global app-dir path to the war file.

127
Scenario 3. Deployment through web-app configuration (DataSource extension is used) Before code generation
verify that Use Data Source site property is set to Yes. Set connection DataBase URL property to
java:comp/env/jdbc/Connection1. Where Connection1 is name of your connection. Add resource-ref element as child of
web-app element:
<resource-ref>
<res-ref-name>jdbc/Connection1</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<init-param driver-name="Driver Class Name"/>
<init-param url="Database connection URL"/>
<init-param user="User Name"/>
<init-param password="User Password"/>
<init-param max-connections="20"/>
<init-param max-idle-time="30"/>
<init-param enable-transaction="false"/>
</resource-ref>
res-ref-name is a JNDI name as indicated in your CCS Connection properties.

WebLogic 7.0 scenarios

Check that DB drivers are in class path of your server.
Choose appropriate scenario and change properties marked red.

Scenario 1. Auto-deployment from applications directory (DataSource extention is not used)

Before code generation verify that Use Data Source site property is set to No. Fill in connection properties to indicate
Driver class name, Database url, user login and password.
You can quickly deploy your application on the administration server if auto-deploy is enabled by copying war file into
\applications directory of the administration server.

Scenario 2. Deployment through Administration Console

Set Use Data Source site property appropriately to indicate whether you want to use DataSources in your code.
If you want to work with DataSources and you have not configured it already add and configure JDBC Pool and
DataSource to your server as described in (http://e-docs.bea.com/wls/docs70/ConsoleHelp/jdbc.html#1104939 ).
Bear in mind that weblogic JNDIName property should be equal to JNDI Name property of CCS connection. Install your
application as described in (http://e-docs.bea.com/wls/docs70/ConsoleHelp/applications.html#1104914).

WebLogic 5.1 scenarios

CodeCharge Studio requires SAX 2.0 and JAXP 1.1 libraries to work with generated JSP. However WebLogic 5.1 goes
with its own XML parser located in lib/weblogicaux.jar. You have to replace those libraries with the newer ones from
<http://xml.apache.org/> or <http://java.sun.com/xml/>. To accomplish this you can specify this libraries in Runtime
libraries property of the project or run the following command:
wlconfig.exe -classpath c:\java\xerces-2_0_1\xercesImpl.jar;C:\java\xerces-
2_0_1\xmlParserAPIs.jar
and restart server.

Websphere 4.0 scenario

Because WebSphere 4.0 doesn't support autodeployment of war files, it is necessary to do the following:

Fill in all Java Site properties and Connection serverside properties.

Make sure that JDBC drivers are in application class path.
1. Get the latest version of JAXP 1.1 and SAX 2.0 for compilation and runtime execution of JSP files. You can get
them from the Ant installation.
2. In 'Runtime libs' Site property enlist absolute paths to jar files corresponding to JAXP and SAX libraries
spearated by semicolons. For example: "c:\ant\lib\jaxp.jar;c:\ant\lib\crimson.jar". These files will be copied to
the WEB-INF\lib directory of the application.
3. Select 'WebSphere 4.0' in 'Target server' Site property.
4. Specify 'Publishing/Server Path' property and publish your project.
5. Through WebSphere console install your application. On the second screen of the Application Installation
Wizard select 'No' for 'Precompile JSPs' property of your web module.

128
 6. Start the new application from WebSphere Admin console (if needed, restart the server).

Tomcat + Apache scenario

Scenario 1. MOD_JK connector.

1. Download mod_jk.dll and libapr.dll and copy them to the apache/modules directory.
2. Create workers.properties file in the $CATALINA_HOME/conf/jk/ directory.
3. workers.tomcat_home=$(CATALINA_HOME)
4. workers.java_home=$(JAVA_HOME)
5. ps=\
6. worker.list=ajp13
7. worker.ajp13.port=8009
8. worker.ajp13.host=localhost
worker.ajp13.type=ajp13
9. At the end of httpd.conf LoadModule section add the following line:
LoadModule jk_module modules/mod_jk.dll
10. At the end of httpd.conf AddModule section add the following line
AddModule mod_jk.c
11. At the end of httpd.conf add the following:
12. JkWorkersFile "$CATALINA_HOME/conf/jk/workers.properties"
13. JkLogFile "$CATALINA_HOME/logs/mod_jk.log"
14. JkLogLevel info
15.
16. <VirtualHost localhost>
17. ServerName localhost
18. DocumentRoot $CATALINA_HOME/webapps/
19. JkMount /*.jsp ajp13
20. JkMount /*.do ajp13
</VirtualHost>
21. If needed uncomment the following delcarations in Tomcat server.xml config file:
22. <Connector className="org.apache.ajp.tomcat4.Ajp13Connector"
23. port="8009" minProcessors="5" maxProcessors="75"
acceptCount="10" debug="0"/>
24. In CCS set publishing path to $CATALINA_HOME/webapps/ and publish your project.
25. Start Tomcat and then Apache.

Scenario 2. WARP connector.

1. Download mod_webapp.so and libapr.dll and copy them to the apache/modules directory.
2. At the end of httpd.conf LoadModule section add the following line:
LoadModule webapp_module modules/mod_webapp.so
3. At the end of httpd.conf AddModule section add the following line:
AddModule mod_webapp.c
4. At the end of httpd.conf add the following:
5. WebAppConnection warpConnection warp localhost:8008
WebAppDeploy JSPPortal warpConnection /Portal/
6. If needed uncomment Tomcat-Apache service configuration in Tomcat server.xml config file.
7. In CCS set publishing path to $CATALINA_HOME/webapps/ and publish your project.
8. Start Tomcat and then Apache.

129
6.5 Deploying PERL Applications
PERL projects are published to a CGI (Common Gateway Interface) directory of a PERL enabled server. There are many
flavors of PERL which can be installed and configured to make a web server such as Apache or IIS capable to serving .pl
files. When PERL pages are published to a server then one of the pages is requested over a browser, the web server
invokes an instance of the PERL executable which runs the requested page and returns the results to the user.
Before publishing a PERL project, there are certain properties that are unique to PERL that need to be configured. To
configure these properties, click on the project name in the Project Explorer window so that the properties appear under
the Data tab of the Properties window.

Figure 7-13: Configuring PERL Data Properties

Table 7-1: PERL Configuration Parameters

Field Description
Output File Specify whether the project is going to be published to a Windows or Linux/Unix machine.
Format
Perl Path
This is the path to the Perl executable and is sometimes know as the shebang or hash bang line. Basically,
this line specifies the location of the Perl program and therefore the line changes based on whether a
Windows or Linux/Unix machine is being used. An example path for windows would be #!perl while for
Linux/Unix, a common path is #!/usr/local/bin/perl. In Linux/Unix, you can find out the location of the Perl
executable by typing the command ‘which perl' in the command prompt of a shell session. For windows, the
command Perl -h should produce information about the program including its path.

Session Enter the file system path of a folder where the session variable information will be stored. This should be a
Files Path folder with read/write access.
Session Specify in minutes the time after which session variables in an inactive session will be terminated.
Timeout
Session
This value specifies the interval at which session files are checked for expiration and subsequently deleted.
Files Clean
A clean rate of 100 would mean that the check is performed after each 100th page in the application is
Rate
requested. A larger value results in a longer duration between checks while a lower value causes more
frequent checks.

After publishing a Perl project to a Linux/Unix server, you need to check and make sure that the files have the right
permissions. Basically, Linux/Unix allows for three types of permissions: read, write and execute. In addition to these

130
three permissions, there are three groups of people to whom the permissions can be applied to uniquely: the file owner,
members of the file's group and everyone else.
If you have access to a Unix shell command prompt within the server, you can find out the permissions for a file using the
command "ls -l filename.pl". The permissions are displayed as a set of ten characters representing the permissions for
the three groups of users e.g. -rw-r--rw-. The first character ‘-' indicates that a file rather than a directory is being referred
to. The permissions can also be expressed as a three digit number whereby each digit represents the sum of permissions
for each of the three categories of user's as defined in Table 7-2.
Table 7-2: Permission Settings

Read(4) Write(2) Execute(1)

Owner x x x 7
Group x x 5
Public x x 5

For instance, 700 would assign read, write and execute permissions for the file owner but none for any of the other
groups.
For the PERL scripts to be available to the users, you need to assign them the read and execute permissions (e.g. 755).
This way, other users other than the owner can read and execute the scripts but not write to them.
Although CodeCharge Studio does not provide a facility for changing the file permissions, most FTP clients allow you to
do so. Alternatively, if you have telnet access to the server, you can execute the chmod command remotely to set the
appropriate file permissions.

6.6 Deploying PHP Applications

The process of deploying PHP projects is relatively straight forward provided that there is a properly configured server
where the pages will be published. A server such as Apache or IIS, which has the PHP engine installed, is capable of
serving ordinary PHP pages that have simply been placed within the server root. In some cases, the PHP engine needs
to have extensions installed or activated. For instance, if you use an Oracle database, the PHP engine should have been
compiled with Oracle support or the PHP.ini file should be configured to enable Oracle support.
Another issue that often comes up with PHP is the use of session variables. The security mechanism implemented by
CodeCharge Studio makes use of session variables to store user information. Needless to say, session variables must be
properly configured and working on the server if the project implements security.
Concerning session variables, the PHP.ini file specifies the location where the session variable files are stored. This is in
a variable called session_save_path. You should make sure that this variable refers to a valid folder otherwise the server
will not be able to create session variables. In the PHP.ini file, you should also check and make sure that the
register_globals variable is set to on. If this variable is set to off, your login process will have problems that manifest
themselves in the inability to proceed past the login page despite specifying valid login information.
In case you are using a remote host, which means that you do not have access to the PHP.ini file, you can ask your host
if they allow user defined .htaccess files. In an Apache server, a .htaccess file placed in the users directory can be used
to override the default properties configured in files such as the PHP.ini file. For more information about these files,
please refer to the Apache documentation.
When deploying a PHP project, the server-side database connection is always different from the design-time database
connection. This is unlike ASP and .Net for which the server and design connections can be the same. This means that in
all projects, you have to configure the server side connection before publishing.
The server-side database connections in PHP are implemented using database libraries. Each library contains code that
encapsulates the functions needed to carry out database operations. Currently, there are libraries for Interbase, mSQL,
MySQL, ODBC, Oracle, Oracle OCI, PostgreSQL, SQL Server, SQL Anywhere and Sybase.

131
 Figure 7-14: Selecting a PHP Database Library
If the database that you intend to use is not among the list of Figure 7-14, you should find out if there is an ODBC driver
for the database so that you can connect to the database through ODBC. For instance, if you intend to use a Microsoft
Access database, you could create an ODBC DSN for the database then configure the server-side connection to connect
through ODBC. Of course, a Microsoft Access database can only be located on a Windows machines so this precludes
deploying the database on a different platform other than Windows.
Most of the database connections in PHP require you to specify login details (e.g., username and password). For
instance, a connection to a MySQL database must have a username and password specified.

Figure 7-15: Specifying Database Access Parameters

Along with the authentication details, a PHP connection typically requires you to specify the location of the machine
where the database is located. This value is entered in the Host parameter. If the database is located in the same

132
machine as the PHP pages, you can simply enter localhost. Otherwise, you should specify the IP address or domain
address of the machine where the database is located.

133
7. Working with Forms and Controls

7.1 Working with Controls

Controls are low-level components that can be placed on a page. They can be used to receive user input or to display
content. Example controls are Label, TextBox, TextArea and ListBox.
Certain controls can be further categorized as "supporting controls" because their purpose is to enhance and support the
functionality of forms, for example a Sorter and a Navigator can be used to allow users to sort and navigate the data
presented in a Grid form.
In CodeCharge Studio you can utilize form controls and HTML controls.

Form Controls
Form controls are database-aware (data-bound) and are often used within forms. They can also be referred to as
dynamic controls. Form controls can be added to the page from the "Forms" tab in the Toolbox:

Form controls that are placed on the page can be furthered defined by the set of properties assigned to them. Once you
click on a control on the page, you should see the control's type and name with its associated properties in the
"Properties" panel:

The control properties specify how the control should retrieve the data from the database, display the content and/or
update the database. The control properties are described in the Component Reference section of the documentation.

134
Form controls are represented within the HTML page by the standard HTML tags except for their dynamic parts that are
represented by special tags utilized by CodeCharge Studio and replaced with the dynamic content during run-time. For
example the link control may look as follows within the HTML:
<a class="KnockoutDataLink" href="{Link1_Src}">{Link1}</a>
In the above example the values in curly braces {} represent the dynamic content that will be retrieved from the database
or updated programmatically.
The remaining part of the link is made of the standard HTML according to HTML specifications. You can refer to the
HTML reference documents available on the Internet for more information on the <a> tag and its attributes like "class"
and "href".
CodeCharge Studio also offers the functionality to visually change a control's style, as well as apply custom block
around the control in the form of extended HTML. You can right-click on a control to access those features:

Extended HTML
The Extended HTML functionality is provided to allow developers to hide controls dynamically and make their "Visible"
property accessible. Once selected, CodeCharge Studio wraps the control into a set of custom tags that make up a
custom block, which then can be hidden by using programming code. For example once the "Extended HTML" is applied,
the Link may look as follows:
<!-- BEGIN Link Link1 --><a class="KnockoutDataLink" href="{Link1_Src}">This is a link</a><!-- END Link Link1 -->
Programmers can hide custom blocks by using programming code like: Link1.Visible = False (ASP).
Without the extended HTML only the label control can be hidden programmatically, since a label is automatically hidden if
it doesn't have a value. Other controls usually contain static HTML that would be always displayed on the page, unless
wrapped within a custom block (extended HTML) as shown above.

HTML controls
HTML controls are the standard HTML elements as defined in HTML standards and documented in a variety of
resources on the Internet, for example at http://www.htmlref.com/reference/AppA/elements.htm.
The CodeCharge Studio Toolbox provides a convenient way to add HTML controls to a page, as shown below:

135
7.2 Form Data Source
In CodeCharge Studio, dynamic data from databases is displayed using fields that are in turn contained within different
types of forms. The data that could be displayed in a form field depends on the data source configured for the form itself.
Put in another way, a forms data source determines the selection of database fields that a field in that form could possibly
be configured to display.
In this section, we shall examine how form data sources are configured. The main emphasis here is on how to configure a
form data source from scratch as opposed to using a form builder to automate the process of building the form as well as
its data source.
A form data source is configured using the Data Source window. The Data Source window can be accessed using the
Data Source property of a form in the Data tab of the Properties window.

In addition to facilitating the configuration of a data source for a form, the Data Source window is also used to setup input
parameters. Input parameters are values that are received by the form and are used in the process of filtering the data
that is displayed in the form. Input parameters can be received from other forms, via the URL, cookies or session
variables. For instance, a search form working in conjunction with a grid form makes uses of input parameters. The
search form submits the input parameters and the grid form receives them and uses them to filter the records that are
retrieved and displayed on the grid. All record forms have at least one input parameter defined in their Data Source. This
input parameter is used to receive the primary key value of the database record which the form should retrieve. In most
cases, the input parameter is received from a URL that originates from a Link field within a grid form where the database
records are listed.
Figure 11-1 below shows the properties available in the data source window and Table 11-1 contains descriptions of
these properties.
Figure 11-1: Data Source Window

Table 11-1: Data Source Window Parameters

Property Description
Connection
The name of the connection where the data will be retrieved This can be any one of the connections

136
 listed in the Project Explorer window. You can click on the button next to property to open the
Connections window where you can add, modify, remove or test connections.

Refresh If you make changes to the database during the process of using the Data Source window, click on this
button to update the window and reflect the current database status.
Data Source
Select the type of data source to be used to obtain the data [Table, Procedure, SQL].
Type
Test This button is only functional when the data source type is a procedure or SQL query. Click this button
to execute the procedure or SQL query and confirm its validity.
Review Data
Depending on the data source type selected, clicking on this button will retrieve and display a sample of
the database content.

You can specify the number of records returned by entering a value in the Row Count field then clicking
on the Refresh button to retrieve the records.

Data Source The layout and options in the Data Source portion of the window vary depending on the value of the
[Table/View] Data Source Type field. We shall first examine the case where a Table/View is being used as the data

source.

Table/View Select the database table or view from where the data will be retrieved.
Build Query
If the form requires data that resides in two or more database tables, you can use the Visual Query
Builder window to visually pick the fields you want to make available for the form Click on this button to

137
 open the Visual Query Builder window.

For more information on how to use the Visual Query Builder window, please refer to the section entitled
Error! Reference source not found. window.

Order By
Use the adjacent button to select fields by which the data should be ordered. You can specify whether
the field should be sorted in ascending or descending order.

Where
The options in this portion of the window are used to construct the where clause of the SQL statement.

Click on this button to add a parameter to the where clause. Please refer to the section on Using the
Table Parameter window for more information.

Click on this button to remove a parameter from the where clause.

Click on this button to view the configuration of an existing where clause parameter.

Click on this button to move an existing parameter upwards in the order of appearance.

138
 Click on this button to move an existing parameter downwards in the order of appearance.

Click on this button to enclose a parameter definition within brackets. You can group together multiple
parameters by holding down the ctrl key while clicking on each one of them, then click on the button to
place a bracket around all the selected parameters.

Click on this button to remove existing brackets around a parameter definition or multiple parameters.

Data Source We now turn to the options available in the Data Source window when Procedure is selected in the
[Procedure] Data Source Type Field.

Procedure Select the stored procedure to be used as the data source.

Get Click on this button to retrieve the stored procedure parameters from the database.
Parameters

Click on this button to add a stored procedure parameter. Please refer to the section on Using the
Stored Procedure Parameter window for more information.

Click on this button to remove an existing stored procedure parameter.

Click on this button to view the configuration of an existing stored procedure parameter.

Click on this button to move a stored procedure parameter upwards in the order of appearance.

139
 Click on this button to move a stored procedure parameter downwards in the order of appearance.

Data Source Finally, the following are the options available in the Data Source window when SQL is selected in the
[SQL] Data Source Type Field.

SQL The SQL statement to be used as the data source for the form.
Statement
Rebuild Use this button to reset an SQL query to a previous state. For instance, if you have a query them make
changes to it, you can use this button to return to the original query.

Click this button to add a SQL parameter. Please refer to the section on Using the SQL Parameter
Window for more information.

Click on this button to remove an existing SQL parameter.

Click on this button to view the configuration of an existing SQL parameter.

Using the Visual Query Builder

When a form is created using any of the builders or constructed manually, the Data Source property of the form is used
to specify the database fields that will be available in the form. Often times, all the fields in a form come from a single
database table. In this case, the Data Source property will list only this single form. On the other hand, it is also common
to create forms whose fields come from multiple database tables. One way to construct such a form would be to manually
specify an SQL statement which selects fields from all the necessary tables. However, an easier way to select fields from
multiple database tables would be to use the Visual Query Builder (VQB).
The Visual Query Builder enables the user to visually select fields from multiple database tables. The user does not
have to worry about constructing the SQL statement since the Visual Query Builder does this automatically.
There are many ways of getting to the Visual Query Builder. For instance, when building a form using any of the
builders, the Build Query button can be used to open the Visual Query Builder. Alternatively, you can get to the Visual
Query Builder by using the Data Source property of a form such as a grid.
When the Visual Query Builder window first appears, another smaller window also appears that contains a list of the
database tables available in the current connection.

140
 Figure 11-2: List of Tables

From this list of tables, you should select the tables from which you want to select the fields. You can select multiple
tables by holding down the ctrl key while clicking on the table names then click on the Add button to add the fields to the
Visual Query Builder. Once done, click on the Close button to close the window.
The tables you select appear within the Visual Query Builder window, each in a small window containing a list of the
fields in the table. Depending on how the fields in the different tables are named, you might notice that some tables are
joined together by lines. These lines represent relationships between the tables. The Visual Query Builder window
automatically creates these lines if it encounters two tables with fields that are potential primary and foreign key fields
based on their name and data type.
There are also a number of other buttons in the Visual Query Builder window whose functions are described below:
Figure 11-3: Visual Query Builder

Table 11-2: Visual Query Builder Properties

Property Description
This buttons displays the list of tables available in the connection in case you need to add a table.

Click this button to display the Join Link or Table Properties windows. The Join Link window contains the
properties of a join. Joins are the lines that appear between two tables to represent a relationship between
the tables Click on a join line then click on this button to display the Join Link window

141
 If you click on the properties button when a table is selected, the Table Properties window appears and you
can enter an alias name for the table. An alias is alternate name which can be used for example when you
want to assign a shorter or more meaningful name to a database table.

With a table or join selected, click this button to delete the table or join.

Review
Clicking this button displays the Review Data window that shows sample data based on the SQL query
Data
configured in the Visual Query Builder. You can determine the amount of data displayed by entering a
value in the Row Count field then clicking on the Refresh button.

SQL
This button displays the SQL statement corresponding to the table and join setup in the Visual Query
Builder. During runtime, this is the SQL statement that will be executed to retrieve fields for the form.

Ok Click this button to save the current configuration and exit.

142
Cancel Click this button to close the window and discard any changes.

After adding tables to the Visual Query Builder, you then proceed to create join links between the different tables.
Some join links are automatically created based on matching field names and data type. If these relationships are wrong
or you don't need them, you can delete them by right clicking on them and selecting the Delete Link option.
Figure 11-4: VQB Delete Link

You can create new join links by dragging a field from one table to another field in a different table. Once the join link
appears between the tables, you can use the properties button to confirm the joined fields as well as set the join type and
the operator used for the join criteria [e.g. equals (=) , Less than (<), Is Null, etc].
Notice that the top field in all the tables has an asterisk instead of a field name. The asterisk is a SQL wildcard that
represents all the fields in the table. As such, if you want to make use of all the fields in the table, make sure the
checkbox adjacent to the asterisk is activated. Otherwise, you can select individual fields by activating their corresponding
checkboxes. You can use the Review Data button to confirm that you have selected all the required fields.
Figure 11-5 below shows the Visual Query Builder window with a number of tables with join links between them. You
can maximize the Visual Query Builder window as well as move around the individual tables to achieve better
visualization of the relationships.
Figure 11-5: Tables in the VQB

When dealing with Editable Grid and Record forms, you have to indicate the primary key field for the table used in the
form. The primary key field is used to uniquely identify a record within the table. Within a table, the text for the primary key
field appears in bold typeface. For instance, in Figure 11-5 above, the primary key for the countries table is country_id
while the primary key for the genders table is gender_id. You can designate a field in the table as the primary key field by
right-clicking on it and selecting the Primary Key option as shown in Figure 11-6 below.
Figure 11-6: Designating a Primary Key

143
You can also use the pop-up menu which appears when you right-click on a field to specify a Field Alias. A Field Alias is
essentially a substitute name to be used for the field. You can use an alias to define a more meaningful name for a
database field without having to change the actual field name in the databases. Aliases are also used when two joined
tables contain identically named fields. By assigning a unique alias to one of the fields, no conflict will occur when the
fields are referenced in an SQL query.

Using the Table Parameter Window

The Table Parameter window is used to define input parameters when a table is being used as the data source. Input
parameters are used in the where clause of the SQL statement to determine the records to be retrieved from the table.
For instance, the values submitted by a search form are received as input parameters by a corresponding grid or editable
grid form and subsequently used to retrieve records based on the submitted search criteria.
Table 11-3: Table Parameter Window

The options available in the Table Parameter window vary depending on the selection made in the Condition Type field
that appears at the top of the window. We shall first examine the available options when the Condition Type field is set
to Parameter.
Table 11-4: Table Parameter Window Properties

Property Description
Field
Name Select the name of the database table field that will be matched against the input parameter.
Type
Select the data type of the field: [Text, Integer, Float, Date, Boolean, Memo]

Format Specify the format of the field if applicable e.g. a Boolean field could have the format 0;1 or Y;N
And/Or
Specify whether the field should be included in the where clause using the ‘AND' operator or the ‘OR'
operator.

Condition
Specify the condition to be used to match the field value and the parameter value: [equals (=), does
not equal (<>), less than (<), less than or equal (<=), greater than (>), greater than or equal (>=), begin
with (like ‘...'), does not begin with (not like ‘...%'), end with (‘%...'), does not end with (not like ‘%....'),
contains (like ‘%;..%'), does not contain (not like ‘%...%'), is null (is null), not null (is not null)]

Parameter Source

144
Name Specify the name of the input parameter
Type
Select the source of the parameter: [Expression, URL, Form, Session , Application, Cookie]

Format Specify the format of the parameter value if applicable e.g. a Boolean field could have the format
True/False or Yes/No.
Use Default
Specify a default value to be used incase no value is received for the parameter. Alternatively, you can
Value if
opt to use the "Is Null" expression whenever the parameter is empty.
parameter is
empty

When the Condition Type field in the Table Parameter window is set to Expression, the options in the window are
different compared to when the Condition Type is set to Parameter.
Figure 11-7: Table Parameter Window [Expression]

With the Condition Type set to Expression you can then enter any valid SQL expression and select whether the SQL
And or Or keyword should be used to add the expression to the rest of the where clause. An example of an expression
would be [Year_Of_Birth > "1920"] where Year_Of_Birth is a field in the table.

Using the Stored Procedure Parameter Window

The Stored Procedure Parameter window is used to define input parameters when a stored procedure is being used as
the data source.
Figure 11-8: Stored Procedure Parameter Window

Table 11-5: Stored Procedure Parameter Window Properties

Property Description
Stored Procedure parameter
Name Specify the name of the stored procedure parameter
Data Type Select the data type of the stored procedure parameter
Data Size If applicable, specify the data size of the stored procedure parameter
Direction
Stored procedure parameters can be of different types. Select the type of the current parameter being
referred to [Input, Input/Output, Output, Return Value].

145
Scale Specify the number of decimal points for a number
Precision Specify the number of digits for a number.
Parameter Source
Name The name of the input parameter
Data Type
Select the type of the input parameter [Expression, URL, Form, Session, Application, Cookie]

Format If applicable, specify the format of the input parameter value e.g. a Date could have the format mm/dd/yyyy.
Default Specify a default value to be used incase no value is received for the input parameter.
Value

Using the SQL Parameter Window

The SQL Parameter window is used to define input parameters when a SQL query is being used as the data source.
Figure 11-9: SQL Parameter Windows

Table 11-6: SQL Parameter Window Properties

Property Description
Variable
Name Specify the name of the SQL variable/field.
Type
Select the data type of the variable/field: [Text, Integer, Float, Date, Boolean, Memo]

Format If applicable specify the format of the variable/field e.g. a Boolean parameter could have the format
true;false.
Parameter Source
Name Specify the name of the input parameter source
Type
Select the type of the input parameter: [Expression, URL, Form, Session , Application, Cookie

Format If applicable, specify the format of the input parameter value e.g. a Boolean field could have the format
True/False or Yes/No.
Default
Specify a default value to be used incase no value is received from the input parameter source
Value

Using Stored Procedures

When setting up the Data Source property of forms, the norm is to have a database table as the Data Source Type.
However, situations arise whereby it would be more convenient to use a database stored procedure as the form data
source. Configuring a form to use a stored procedure as the data source is not much different than configuring a table
data source. Obviously, the database you are using must support stored procedures and the particular stored procedure
to be used must already exist in the database.

To configure a grid form to use a stored procedure, click on the button of the Data Source property for the grid. In the
Data Source window, set the Data Source Type field to Procedure. After doing this, the Procedure dropdown list will

146
contain a list of the stored procedures available in the current connection. From this list, select the procedure you want to
use.
Figure 11-10: Data Source Window - Stored Procedure [1]

After selecting the procedure, click on the Get Parameters button to retrieve any parameters defined for the procedure.
In most cases, the parameters will be retrieved with their proper properties such as Direction and Data Type. You can
double-click on any parameter and change its properties if the default ones are not correct. In the case of a grid form, the
parameters are used to determine what records will be displayed in the grid so it is important that the Direction, Data
Type, Type and Source properties be configured correctly. After configuring the properties, click Ok to close the Data
Source window.
Figure 11-11: Data Source Window - Stored Procedure [2]

With the Data Source thus setup, you can then add fields to the form based on the fields returned by the procedure.
A stored procedure can also be used to insert, update or delete records using a record form or editable grid. You will
notice that in the Properties window, a record or editable grid form has the following properties:
• Custom Insert Type
• Custom Insert
• Custom Update Type
• Custom Update
• Custom Delete Type
• Custom Delete
If for instance you want to use a stored procedure to insert records, you would set the Custom Insert Type property to
Procedure then use the Custom Insert property to configure the procedure in a similar manner as was done using the
Data Source property. Similarly, the other four properties can be used to configure stored procedures to update and
delete records respectively.
Figure 11-12: Custom Operations

147
Note that a record or editable grid form can still have its Data Source property configured to use an ordinary table and yet
have procedures for the insert, update and delete operations. This is because the Data Source property is different from
the six properties mentioned above. Essentially, the Data Source property determines the means by which data will be
retrieved to appear in the form while the other six properties mentioned above determine the means by which the data is
manipulated depending on the operation (Insert, update, delete).
Figure 11-13: Data Source and Custom Operations

Finally, stored procedures can also be used to populate ListBox and Radiolist controls. In this case, the List Source
Type property is set to Procedure then the List Data Source property is used to configure the stored procedure and its
parameters.
Figure 11-14: Procedure List Source Type

Limitations of Using Custom SQL Stored Procedures in Grids

Custom SQL
If you use a custom SQL statement as the data source for a grid or editable grid, there are certain nuances you should be
aware of. In order for the navigator control to be able to get a count of the number of records returned by the SQL
statement, the underlying code has to dynamically create a query to return the record count. In most cases, the generated
SQL query is able to execute correctly. However, if a complex SQL query is used, for example one that has a Group By
clause, the total number of records cannot be calculated correctly. In this case, the navigator control will not function
properly.
In the event that you do use a complex SQL query, you can manually edit the generated code where the CountSQL
variable for the form is defined. In this case, you would need to provide an alternate SQL statement to be used to retrieve
the proper record count.
Complex SQL queries also present problems for the sorter control which functions by appending an Order By clause to
the original SQL query. If the query uses complex features such as Unions and nested queries, it will not be possible to
dynamically create a correct SQL statement with the Order By clause. You should therefore aim to use simple SQL
queries or manually edit the generated code to implement a custom sorting mechanism.

Stored Procedures
If a stored procedure is used as the data source for a grid or editable grid form, there are certain limitations concerning
the functionality of the form. The first of these has to do with the navigator control which is used to browse through the
records in the form. Owing to the fact that the navigator code cannot extract a record count of the results returned by a

148
stored procedure, you cannot use a navigator which displays the count of pages which can be browsed. As such, you are
restricted to using a simple navigator which has one link to browse forward and another to browse backwards.
The second limitation involves the sorter controls which functions by appending an Order By clause to an SQL statement.
Since the stored procedure cannot be altered to add the order by clause, the sorters will not function when a stored
procedure is used.
Also, when dealing with stored procedure parameters, note that only input parameters are supported. You therefore
cannot use other parameters types such as output parameters to return results from the stored procedure.
Generally, stored procedures are best suited for use in record forms where there are no navigator and sorter controls. In
record forms and editable grids, stored procedures can be used successfully in the custom operations such as custom
insert and custom delete. When used this way, the stored procedures can be executed as-is to achieve the desired goal.
However, the functionality of grid forms requires that SQL commands be dynamically generated and executed to support
navigator and sorter controls. Stored procedures therefore don't operate well in grids because the necessary SQL
commands cannot be generated from the stored procedure.

7.3 Grid Form

A grid form is used to display multiple rows of records within a HTML table. A grid should be used when there is a need to
display records but not edit the records. A grid does not have inbuilt functionality to insert, update or delete database
records. If you need to perform any of these operations, you should consider using a record form or an editable grid.
Typically, grid forms contain Link fields to corresponding record forms where a specified record can be edited.
Apart from displaying multiple records, a grid facilitates such operations as sorting the records based on different columns
in the grid or browsing multiple pages when the records to be displayed span more than one page.
Grid forms can be constructed using the Grid builders or you can manually construct one using the barebones grid form
provided under the Forms tab of the Toolbox. Unless you need to exercise full control over the creation of the grid, it is
recommended that you use the Grid builders.
In terms of HTML markup, a grid form is made up mainly of a HTML table with different controls in its rows.

Grid Properties
In design mode, a grid form appears between the glyphs and . You can click on either of these glyphs to expose
the grid properties under the Data tab of the Properties window. Alternatively, you can click on the name of the grid in
the Project Explorer.

Property Description
Name A unique name for the form
Connection The database connection used by the form
Source Type The type of database resource that provides the data for the form

149
Data Source The table, SQL query or stored procedure that provides the data for the form
Restricted Specify whether users must be authenticated before being able to view the form
Records Per A grid can display multiple records in a page. Use this property to set the number of records to be
Page displayed on a page.
Page Size In certain cases where the number of records per page can be changed dynamically at runtime, this
Limit property can be used to set the maximum number of records that could possibly be displayed per page.

Data Source
Similar to all other forms, the Data Source property of a grid is used to specify the database resource that will provide the
data for the grid. This can be a table, a SQL query or a stored procedure. To access the Data Source dialog, click on the
button next to the Data Source property.

The Data Source dialog is also where you can specify input parameters. Input parameters are necessary when the grid
form receives values from another form such as a search form and uses the input parameters to filter the records it
displays. The search form submits the values then the grid form captures them and uses then in the where clause of the

SQL statement that retrieves the database records. To add an input parameter click on the button under the Where
section.

Grid Sorters
A grid form typically has sorter controls for each column in the grid. Sorters controls are used to facilitate sorting of the
records within the grid based on the columns of the grids. For instance, if a grid has name, email and title columns,
sorters could be used to sort the grid records based on any one of the three columns. Sorter controls are usually located
in the top-most row of the grid as shown in the screenshot below:

When you build a grid form using the Grid builders, you can elect to have the sorter controls automatically added to the
form so that you don't have to add them later on. If you build the form manually, you can also add sorter controls using
the Sorter option under the Forms tab of the Toolbox. For more information on how to add and configure sorter controls,
please refer to the section on building forms manually.

Data Row

150
The controls which display data in a grid are usually contained in the second row of the grid. Unless under special
circumstances, the data controls in a grid are usually Label controls which can display data but don't allow the user to
alter or submit the data.

During runtime, the data row in the grid is outputted for each record that needs to be shown. If the grid has 10 rows to be
shown, the data row will be printed out 10 times, each time with different data been shown in the data controls.
If you create a grid form using the Grid builders, you can elect to have an alternate data row. You would therefore end
up with two data rows, whereby one row would have a different background color to emphasis the separation between
consecutive rows.
The row which appears under the data row contains some text which is displayed whenever there is no data to be shown
for the grid. This row is displayed conditionally, meaning that it is not shown when there is at least one row of data in the
grid. You can change the text within this row as you wish.

Navigator Row
The last row in a grid is usually reserved for the Navigator control. In a grid with records which span multiple pages, the
navigator provides a way to browse through all the available pages.

When you build a grid form using the Grid builders, you can elect to have the navigator control automatically added to
the form so that you don't have to add it later on. You can also select different options for the navigator such as whether
to use images, how many page links to have and in what format. If you build the form manually, you can also add a
navigator using the Navigator option under the Forms tab of the Toolbox. For more information on how to add and
configure a navigator, please refer to the section on building forms manually.

7.4 The Editable Grid

The editable grid combines the functionality of a typical grid form and a record form. A grid form is designed to allow
browsing of multiple records without the capability of altering the records, while a record form is used to insert, update or
delete single records. The Editable Grid brings together the functionality of grid and record forms by allowing the user to
browse, insert, update or delete multiple records from the same form. In particular, the editable grid can be used to make
changes to multiple records using a single operation rather than dealing with each individual record.

151
As with the other types of forms, the editable grid can be constructed using a builder or by dropping a barebones
Editable Grid form onto a page. If you use the builder, a series of dialogs will guide you through the steps of configuring
the various options for the Editable Grid. In this case, the Editable Grid that is built is based on a single database table or
you can use the Visual Query Builder to construct a query that retrieves fields from different related tables.
On the other hand, if you use the Forms tab of the Toolbox to place a barebones Editable Grid onto a page, you then
have to manually configure all the properties of the Editable Grid as well as add any components such as sorters and
navigation controls that are not included in the initial form. In most cases, you should use the builder to create the
Editable Grid even if you intend to customize it later. You should only result to using the barebones form if you want to
exercise control over most of the construction of the form.

Structure of the Editable Grid

As would be expected, the structure of an Editable Grid is a hybrid of the structure of a grid form and a record form. The
entire form is demarcated using two glyphs that mark the beginning and the end of the HTML <form> tag within which the
Editable Grid is contained. Typically, the form also contains a title which is essentially some descriptive text about the
contents of the form. The user can change this text or remove it entirely.

An Editable Grid also contains a HTML hidden input field called FormState and a template variable called FormScript.
These two controls play a role in the internal functioning of the Editable Grid and should not be removed or otherwise
altered.
It might appear strange that the Editable Grid has two rows reserved for the display of error messages. However, the two
rows serve two different purposes. The first error row is used to display error messages which pertain to the entire
Editable Grid in general. Within HTML mode, this first row is composed of HTML code such as that shown below:

<!-- BEditable GridIN Error -->

<tr>
<td class="ClearErrorDataTD" colspan="2">{Error}</td>
</tr>
<!-- END Error -->
The second error row is used to display errors which pertain to particular rows within the Editable Grid. For example if a
value in one of the submitted rows does not pass the validation check upon submission, an error will be displayed above
the offending row when the form is displayed again. If multiple rows have errors, each row will be preceded with an error
row containing the appropriate error text. The HTML code for this second row is of the form:

<!-- BEditable GridIN RowError -->

<tr>
<td class="ClearErrorDataTD" colspan="4">{Error}</td>
</tr>
<!-- END RowError -->
Just like the grid form, an editable grid has a row containing sorter controls and another row at the bottom that contains
the navigator controls.

152
In addition to the columns for each of the database fields that need to be shown, an editable grid also has an extra
column which is used to indicate the records that should be deleted. This column contains a single checkbox control
which the user can activate before submitting the form so that the corresponding record is deleted.

The bottom row of the editable grid also contains a Submit button and a Cancel button. The Submit button is used to
initiate insert, update and delete operations while the Cancel button is used to terminate any current operations.
based on the contents of the rows within the editable grid. When the form is submitted, the underlying code determines
what operation to perform based on the submitted values.

Editable Grid Properties

The properties of an Editable Grid which are displayed under the Data tab of the Properties window are for the most part
similar to the properties of a record form. However, an Editable Grid has some unique properties such as Empty Rows
and Delete Control as seen below:
Table 11-7: Editable Grid Properties

Property Description
Name The name of the form.
Connection The database connection from which information will be retrieved.
Source Type The type of data source or the method used to retrieve the data.
Data Source The database tables, SQL Query or stored procedure from where the data will be retrieved.
Return Page The page to which the user is directed to after the form has been submitted successfully.
Remove Specify URL or Form parameters that should be removed when the form is submitted.
Parameters

153
Convert URL To Specify whether URLs should be automatically converted to absolute URLs or secure URLs for the
SSL protocol (https://).
Records Per Specify the default number of records that should be displayed per page.
Page
Restricted Specify where users must be logged in before accessing the form.
Empty Rows Specify how many empty rows will be provided at the bottom of the Editable Grid for the purpose of
inserting new records.
Allow Insert Specify where the form can be used to insert new data.
Allow Update Specify where the form can be used to update existing data.
Allow Delete Specify where the form can be used to delete existing data.
Delete Control Specify the name of the Checkbox or Hidden control which is used to determine the records that
should be deleted.
Preserve Specify whether Get or Post parameters should be preserved.
Parameters
Custom Insert For forms that require additional configuration for the insert operation, specify whether a table, SQL
Type query or stored procedure will be used.
Custom Insert Specify the table, SQL query or procedure to be used to insert data.
Custom Update For forms that require additional configuration for the update operation, specify whether a table, SQL
Type query or stored procedure will be used.
Custom Update Specify the table, SQL query or stored procedure to be used to update data.
Custom Delete For forms that require additional configuration for the delete operation, specify whether a table, SQL
Type query or stored procedure will be used.
Custom Delete Specify the table, SQL query or stored procedure to be used to delete data.

An import point to bear in mind when configuring an editable grid is that the Data Source property must clearly indicate
the primary key of the database table on which the form is based. The primary key must be specified because the
editable grid code must know what field can be used to uniquely identify records. To specify the primary key, click on the
button next to the Data Source property to open the Data Source window. In the Data Source window, click on the
Build Query button to open the Visual Query Builder. The Visual Query Builder displays the fields in the current table
and the primary key appears in bold. You can designate a field as the primary key by right-clicking on it and selecting the
Primary Key option.
Figure 11-15: Specifying the Primary Key for an Editable Grid

Editable Grids Based on Queries

In its simplest form, an Editable Grid is based on a single database table. This means that all the fields within the grid are
retrieved from one table and any other operations such as insert, update or delete are also based on the same table.

154
However, it is also customary to create an Editable Grid which is based on a join query that retrieves fields from different
related tables. For instance, when using the Editable Grid Builder the user can invoke the Visual Query Builder and
specify a query based on multiple tables such as that shown below.

The important point to note is that any Editable Grid that is not based on a single database table requires additional
configuration in order to support insert, update or delete operations. The SQL commands that are used to perform insert,
update and delete operations are restricted to single tables. So whereas a select statement can retrieve fields from
multiple tables, the insert, update and delete statements cannot. The implication of this is that all Editable Grids that are
not based on a single table must define the Custom Insert, Custom Update and Custom Delete properties in order to
support insert, update and delete operations.

DataSource Column Parameters

If an Editable Grid is based on a query or a stored procedure, you have to specify the Custom Insert, Custom Update and
Custom Delete properties in order to facilitate the insert, update and delete operations respectively. When you specify the
Custom Update and Custom Delete properties, you have to specify a where clause which determines the records that
need to be updated or deleted. However, unlike an ordinary record form which operates on single records, an Editable
Grid deals with multiple records at the same time. This means that when the Editable Grid is submitted for update or
delete operations, the form submits multiple primary key corresponding to the records that need to be updated or deleted.
The implication of this is that the where parameter for the Custom update or Custom delete properties cannot simply
specify URL or Form parameter types as the source of the primary keys. For this reason, there is a special parameter
type which is designed to deal with the multiple values submitted by an Editable Grid. This is the DataSource Column
parameter Type as shown in the screenshot below.

Therefore, whenever you specify a Custom Update or Custom Delete operation for an Editable Grid, make sure that the
Type of the source parameter is set to DataSource Column.
Note that a Custom Insert operation simply inserts a new record into a table without the need for a where clause. As
such, there is no need for specifying input parameters like is the case with Custom Update and Custom Delete
operations.

7.5 Record Form

A record form is used to add, edit or delete database content. The record form makes these operations possible by
providing three different buttons which can be used to initiate any one of the three operations. Unlike the grid or editable
grid forms which are capable of handling multiple records at the same time, the record form can deal with only one
database record at a time.
Figure 11-16: Record Form

155
Record forms are usually used in conjunction with grid forms. Before the record form is able to open a record, it needs to
be provided with the primary key value of the record to be opened. In this case, a Link field from a grid form could be
used to submit the primary key value to the record form. For example, the following link has a URL parameter called
userid [<http://localhost/mySite/default.asp?userid=1>] which could be captured by the record form and used to open the
database record whose userid value is 1.
Record forms can be constructed using the Record builder or you can manually construct one using the barebones
record form provided under the Forms tab of the Toolbox. Unless you need to exercise full control over the creation of
the record form, it is recommended that you use the Record Builder.

Record Form Properties

In design mode, a record form appears between the glyphs and . You can click on either of these glyphs to
expose the record form properties under the Data tab of the Properties window. Alternatively, you can click on the name
of the record form in the Project Explorer.
Figure 11-17: Record Form Properties Window

Table 11-8: Record Form Properties

Property Description
Name A unique name for the form
Connection The database connection used by the form
Source Type The type of database resource that provides the data for the form
Data Source The table, SQL query or stored procedure that provides the data for the form
Return Page The page to which the user is redirected to after the form has been submitted successfully.
Remove Specify a common separated list of form or URL parameters which should not be propagated when
Parameters the form is submitted.
Convert URL To Specify whether the URL should be automatically converted to an absolute URL or secure URL for
the SSL protocol (https://)
Restricted Specify whether users must be authenticated before being able to view the form
Allow Insert Specify where the form can be used to insert new data
Allow Update Specify where the form can be used to update existing data

156
Allow Delete Specify where the form can be used to delete existing data
Preserve Specify whether Get or Post parameters should be preserved when the form is submitted
Parameters
Custom Insert If you wish to override the default insert mechanism, select the type of method to be used to perform
Type the insert operation.
Custom Insert Specify the table, SQL query or stored procedure to be used for the custom insert
Custom Update If you wish to override the default update mechanism, select the type of method to be used to
Type perform the update operation.
Custom Update Specify the table, SQL query or stored procedure to be used for the custom update
Custom Delete If you wish to override the default delete mechanism, select the type of method to be used to
Type perform the delete operation.
Custom Delete Specify the table, SQL query or stored procedure to be used for the custom delete

Data Source
Similar to all other forms, the Data Source property of a record form is used to specify the database resource that will
provide the data for the form. The data source can be a table, SQL query or a stored procedure. To access the Data
Source dialog, click on the button next to the Data Source property.
Figure 11-18: Record Form Data Source

Invariably, all record forms must have at least one input parameter specified under the Where section of the Data Source
window. An input parameter must be specified because the record form must receive a primary key value in order for it to
retrieve a record. In many cases, the primary key for a table is composed of a single field. However, it is also possible to
have a database table which has a complex primary key made up of multiple fields. If the primary key is complex, then
the record form should have an input parameter for each of the fields that make up the complex primary key.
In Figure 11-16 above, an input parameter has been defined for the user_id field which happens to be the primary key

field of the users table. To add an input parameter click on the button under the Where section. You can also double-
click on an existing input parameter to open the Table Parameter window where it is configured.
Figure 11-19: Table Parameter Window

157
Custom Operations
More often than not, the Data Source for a record form will be a single database table. This is because the record form
can insert, update or delete records from a single table without requiring special configuration. In other words, if a single
table is used as the data source, a single SQL statement can be executed to perform any one of the three operations.
However, if the data source is a custom SQL query or stored procedure, the implication is that each of the three
operations (insert, update, delete) must also be configured separately since the custom SQL query or stored procedure
used to select the record cannot be used to insert, update or delete.
A record form has Custom Insert, Custom Update and Custom Delete properties which are specifically intended to be
used when the data source is not a single table. Each of these three properties has to be configured for record forms that
are not based on a single database table. Of course, if you want to have a record form which can view but not insert,
update or delete records, you can do without configuring these properties. If you do so, you should also set the Allow
Insert, Allow Update and Allow Delete properties to No so that the user does not attempt to perform an operation that is
not supported.

To configure the Custom Insert, Custom Update or Custom Delete property, click on the button next to the property.
The screenshot below shows the Custom Insert window where you can configure the Custom Insert property.
Figure 11-20: Record Form Custom Insert

When configuring the property, you have the choice of using a table, SQL query or stored procedure. Use the Custom
Insert Type field to select the method you intend to use. For whichever method you select, you will need to specify input
parameters for the fields involved in the operation. In the screenshot above, the Custom Insert Type is set to Table and
five input parameters (first_name, last_name, title, email and city) have been defined. This means that the value of these
five input parameters will be used in the insert operation.
In the case of a custom delete operation, you would only need to specify an input parameter for the primary key field(s).
This is because when a record is being deleted, the record form would only need to know the primary key value in order
to identify and delete the record.

Record Form Buttons

For each of the operations that a record form can perform (Insert, Update, Delete), there is a corresponding button which
is used to initiate the operation.
Figure 11-21: Record Form Buttons

158
In some cases, you can also have a Cancel button which cancels the current operation and returns the user to the page
specified in the Return Page property of the form.
Figure 11-22: Return Page Property

If you use the Record builderto construct the record form, you can specify whether the generated record form should
have all or some of the buttons.
During runtime, the underlying code determines which of the buttons should be shown. If the record form receives an
input parameter and is able to retrieve a database record, then the Update and Delete buttons are shown. On the other
hand, if the record form does not receive any input parameter or is unable to retrieve a record, then only the Insert button
is shown since you cannot update or delete a non-existent record. If there is a Cancel button in the form, it is always
shown regardless of the operations that could be performed.

7.6 Search Form

A search form is used to provide an entry point for search criteria. The search form submits the search criteria to another
form (grid or editable grid) which uses the search criteria to determine the records that it will display. This means that a
search form is always used in conjunction with another form.
In actual sense, a search form is basically a record form whose insert, update and delete properties have been disabled.
Figure 11-23: Search Form

159
Search forms can be constructed using the Search builder, Grid Builder, Editable Grid Builder or you can manually
construct one using the barebones record form provided under the Forms tab of the Toolbox. Unless you need to
exercise full control over the creation of the search form, it is recommended that you use one of the Builders.
The Search Builder can be used to create a search form is there is an already existing grid or editable grid form which the
search form will apply to. Otherwise, the Grid and Editable Grid Builders allow the user to create a search form during the
process of creating a grid or editable grid.

Search Form Properties

In design mode, a search form appears between the glyphs and . You can click on either of these glyphs to
expose the search form properties under the Data tab of the Properties window. Alternatively, you can click on the name
of the search form in the Project Explorer. Because a search form is basically a special type of record form, the search
form properties are identical to those of a record form.
Figure 11-24: Search Form Properties Window

Table 11-9: Search Form Properties

Property Description
Name A unique name for the form
Connection A search form does not retrieve data from the database so this property is left blank
Source Type A search form does not retrieve data from the database so this property is left blank
Data Source A search form does not retrieve data from the database so this property is left blank
Return Page The page where the search criteria will be submitted. This is also the page containing the form that
will use the values submitted by the search form

160
Remove Specify a common separated list of form or URL parameters which should not be propagated when
Parameters the form is submitted
Convert URL To Specify whether the URL should be automatically converted to an absolute URL or secure URL for
the SSL protocol (https://).
Restricted Specify whether users must be authenticated before being able to view the form
Allow Insert
This property is always set to No since the search form does not handle database content.

Allow Update
This property is always set to No since the search form does not handle database content.

Allow Delete
This property is always set to No since the search form does not handle database content.

Preserve Specify whether Get or Post parameters should be preserved when the form is submitted
Parameters
Custom Insert This property is always left blank since the search form does not handle database content.
Type
Custom Insert This property is always left blank since the search form does not handle database content.
Custom Update This property is always left blank since the search form does not handle database content.
Type
Custom Update This property is always left blank since the search form does not handle database content.
Custom Delete This property is always left blank since the search form does not handle database content.
Type
Custom Delete This property is always left blank since the search form does not handle database content.

Because search forms are always used in conjunction with other forms, it is only in very rare occasions that you will need
to create a search form manually starting with a barebones record form. In order for a search form to operate seamlessly
with another form, there are a number of properties which have to be synchronized. Using the builders to create the
search form takes the hustle out of the process since the builder will configure both the search form and the
corresponding form which will receive the search criteria.

7.7 Login Form

A Login form is used to enter authentication credentials when a user needs to access a restricted page or form. The login
form contains a field for the username and another for the password. When the login form is submitted, its underlying
code checks to make sure that the credential are authentic, after which the user can access the restricted page. If a user
is not able to provide authentic credentials, they will not be able to proceed past the login form.
Just like the search form, a login form is basically a record form whose insert, update and delete properties have been
disabled.
Figure 11-25: Login Form

161
The easiest way to create a login form is to use the Authentication Builder. While it is possible to build a login form
manually based on the barebones record form provided under the Forms tab of the Toolbox, it is hard to conceive why
you would need to do that.
Before a login form can be created, you have to configure the project security settings under the Security and Security
Groups tab of the Project Settings dialog window. These settings specify the database tables and fields that are used
during the authentication process.

Login Form Properties

In design mode, a login form appears between the glyphs and . You can click on either of these glyphs to expose
the login form properties under the Data tab of the Properties window. Alternatively, you can click on the name of the
login form in the Project Explorer. Because a login form is basically a special type of record form, the login form
properties are identical to those of a record form although most of these properties are left blank.
Figure 11-26: Login Form Properties Window

Table 11-10: Login Form Properties

Property Description
Name A unique name for the form
Connection
A login form does not retrieve data from the database so this property is left blank. The Login form uses
the database settings specified in Security tab of the Project Settings dialog window.

Source Type A login form does not retrieve data from the database so this property is left blank
Data Source A login form does not retrieve data from the database so this property is left blank
Return Page The page where the user will be redirected after successfully logging in. However, if the user was trying
to access a restricted page or form, they will be redirected to the page they were trying to access prior
to being redirected to the login page
Remove Specify a common separated list of form or URL parameters which should not be propagated when the
Parameters form is submitted
Convert URL Specify whether the URL should be automatically converted to an absolute URL or secure URL for the
To SSL protocol (https://).
Restricted
This property should always be set to No since the user should be able to access the login form
otherwise they would not be able to login!

Allow Insert
This property is always set to No since the login form does not handle database content.

Allow Update
This property is always set to No since the login form does not handle database content.

Allow Delete
This property is always set to No since the login form does not handle database content.

Preserve Specify whether Get or Post parameters should be preserved when the form is submitted

162
Parameters
Custom Insert This property is always left blank since the login form does not handle database content.
Type
Custom Insert This property is always left blank since the login form does not handle database content.
Custom This property is always left blank since the login form does not handle database content.
Update Type
Custom This property is always left blank since the login form does not handle database content.
Update
Custom Delete This property is always left blank since the login form does not handle database content.
Type
Custom Delete This property is always left blank since the login form does not handle database content.

Login Form Actions

Since a login form is basically a scaled down version of a record form, there must be a special property which
distinguishes the login form from other record forms. This special property comes in the form of a Login action which is
placed on the OnClick Server event of the Login button located in the login form.
Figure 11-27: Login Form - Login Action

The Login action adds code to the page so that when the Login button is clicked, the added code calls a CodeCharge
function which will perform the authentication operation and redirect the user based on the outcome of the login attempt.
When you build a login form using the Authentication Builder the Login action is automatically added to the button.
However, if you build the form manually, you can still add the Login action to the OnClick event of the Login button by
selecting the action from the list of available actions.
Figure 11-28: Add Action Window

163
When you build a Login form using the Authentication Builder, you also have the option of adding a SetFocus action
which sets focus to the first field in the login form. This action is placed in the OnLoad client event of the page where the
login form is contained. When the page loads at runtime, the action code moves the cursor to the first field in the login
form so that the user can start typing immediately without having to manually move the cursor to the field.
Figure 11-29: Login Form - SetFocus Action

The SetFocus action can also be added manually by selecting it from the list of available client actions.

7.8 The Directory Form

The directory form is specifically intended for displaying hierarchical content. The content that is displayed in a directory
form is stored in such a manner that there are top level items which have subsequent sub categories. So essentially, the
directory form implements a drill down of information starting from parent categories and proceeding to successive
subcategories. A good way to conceptualize the directory form would be to think of the yahoo site directory or the
directory of most search engines.
A directory form is composed of two main components which operate synchronously to provide ease of navigation. The
first component is a Path which, as the name suggests, displays the sequences of categories that are currently being
displayed by the second component which is the directory.
In the screenshot below, the Path component appears in the red border and the directory component is in the blue
border.

164
The nature of the directory form imposes certain requirements on the design of the database table which will contain
information to be displayed in the form. While the table can contain as many fields as the user requires, there are three
specific fields which must be present in the table.
• Category ID: Each item displayed in the directory form must have a category ID field which uniquely identifies
the category. In other words, the category ID field must be the primary key field for the table.
• Category Name: Along with having a category ID field for identification, each category must also have a name
field which essentially contains descriptive text for the category.
• Parent Category: Since the directory form displays hierarchical content, the table must have a field which
indicates the parent category to which each category belongs. In this parent category field, top level categories are
marked using a special value such as zero. For all other categories that belong to a higher category, the parent
category field is populated with the category ID field of the parent category. In other words, each category that is not
a top level category must have a value in its parent category field pointing to the category to which it belongs.

For each of the three fields above, you don't have to use any particular name. However, the fields must exist in the table
since you will be required to identify them during the process of building the directory form.

The directory Form Builder

The fastest and easiest way to create directory forms is to use the Directory Builder. Before you invoke the Directory
Builder, you must have a database connection in your project which contains a table configured according to the
specifications in the above section. To begin creating the form, click on the Directory Builder option under the Builders
tab of the Toolbox.

In the first step of the Directory Builder, you have to select or create the database connection to be used for the form. The
Internet sample database contains a table which you can use to construct a sample directory form.

165
Setup the Category Table
The second step of the Directory Builder is where you configure the database table fields to be used in the form.

• Category Table: Select the database table to be used to create the form.
• Category ID field: Select the field which contains the unique ID of each of the categories.
• Category Name field: Select the field which contains the name of each of the categories
• Parent Category field: Select the field which contains the ID of the parent category for each of the categories
• Root Category identifier: If applicable, specify the value which is used to represent root or top level categories.
Root categories can also be represented by a blank value.
• No categories message: Specify the message to be displayed when there are no categories.
• Number of Columns: Specify the number of columns to appear in the directory form.
• Create a directory path for the current directory: With this option checked, a Path component will be added
along with the directory form.

Specify a Theme for the Form

In the last step of the Directory Builder, you can specify a theme to be used for the form.

After specifying a theme, click on the Finish button to generate the form.

166
Structure of the Path Component
The Path component appears before the directory form between two glyphs of the form and . The Path consists of
links which the user can click on to navigate to specific points in the hierarchy of categories. The value of the Path
changes in accordance with the links that the user clicks on in the directory form. As the user navigates deeper in a
hierarchy, the Path adds links to all the categories leading up to the present category.

The properties for a Path can be exposed in the Properties window by clicking on the name of the Path in the Project
Explorer window.

Property Description
Name A unique name for the Path component
Connection The database connection used by the component
Source Type The type of database resource that provides the data for the Path
Data Source The table, SQL query or stored procedure that provides the data for the Path
ID Field The database field which contains the ID of the categories displayed in the Path
Parent Field The database field which contains the Parent ID of the categories displayed in the Path

In of itself, the Path component is composed of two Link fields and one Label field. The first Link field has the text Main
and is used to return the user to the root categories when clicked. If needed, you can edit the HTML for this Link field and
change the text Main to any other text of your preference.

167
The second Link field in the Path component is populated dynamically to contain the list of parent categories leading up to
the current category. Notice that the text for this Link appears in curly braces meaning that it represents a template
variable. During runtime, the underlying code determines the parent categories and uses them to populate the value of
this Link field. This Link should not be altered otherwise it would not work.

The thirds item in the Path component is a Label field which is populated dynamically to contain the name of the category
being currently viewed. Again, the text for this Label is a template variable whose value is determined at runtime
depending on the links the user clicks on. This field should also not be altered.

Structure of the directory Form

The directory form appears below the path component and between the glyphs and . The properties of the
directory form can be exposed in the Properties window by clicking on the name of the form in the Project Explorer.

Property Description
Name A unique name for the directory form
Connection The database connection used by the form
Source Type The type of database resource that provides the data for the form
Data Source The table, SQL query or stored procedure that provides the data for the form.
Category ID The database field which contains the ID of the categories displayed in the Path
Field
Subcategory ID The database field which contains the ID of the subcategories. This is essentially the same as the
Field Category ID field but the field comes from an alias table.
No. of Columns The directory form displays categories in columns. Use this property to set the number of columns to
be used.
No of Each category in the directory form can have a number of subcategories This property limits the

168
Subcategories number of subcategories that could be displayed. A link is provided to access extra columns if they are
more than the limit.
Restricted Specifies whether a user has to be authenticated in order to view the form.

The Data Source for the directory form is based on a join query which matches the category ID field against the Parent
Category ID field of the same table. As can be seen in the Visual Query Builder screenshot below, the same table
(yp_categories) is used, albeit with two different aliases (cat and sub). The relationship between the table aliases is
formed by the category_id field in the first table and the category_id_parent field in the second table.

The main components of the directory form are three Link controls.

The first Link control in the directory form is used to place all root or top level categories. This Link appears in bold
typeface by default. All other subcategories belonging to a root category are listed below this first Link control.

The second Link control in the directory form is used to place all subcategories below their root category.

The last Link control in the directory form appears only when there are more subcategories than the value of the No. of
Subcategories property. The user can click on this link to access the rest of the categories

169
7.9 Building Forms Manually
The quickest way to create any type of form is to use one of the builders to automate the process of building the form.
However, there sometimes arises the need to create the form manually in order to exercise maximum control on how the
form functions or appears. In this case, you can start with one of the barebone forms located under the Forms tab of the
Toolbox.

The Forms tab of the Toolbox has options to create four types of forms:
• Grid
• Record
• EditableGrid
• Directory
By selecting any of the above four options, you add a basic form to the page which you can then proceed to build from
the bottom up. If you selected the Grid option, you would have a form such as that shown below:

Setting the Data Source

For any form that will contain database content, the Connection and Data Source properties have to be configured to
indicate the table, SQL query or stored procedure that will be used to retrieve the data. With the form selected in the
Project Explorer window, click on the Connection property and select the connection that will be used for the form. If
you have not configured a connection for the project, you will need to do that first.

170
After setting a value for the Connection property, you should then proceed to configure the Data Source property. Click
on the [...] button next to the Data Source property to configure it.

In the Data Source window, you should set the Data Source Type property to Table, Procedure or SQL. If the data
source type is a table, you can then select the appropriate table. For an SQL query, you would enter the SQL statement
that will be used to retrieve the form fields. In the case of a Stored Procedure, you would select the procedure from the list
provided then configure its parameters.
In the screenshot below, the data source type is a table called tasks.

If you need to retrieve fields from multiple tables, you can use the Build Query button to open the Visual Query Builder.
You can then select multiple related tables and indicate the fields in the tables which will be used in the form.
Within the Data Source window, you can also configure input parameter if, for example, the form will receive parameters
from another form such as a search form. In the case of a table data source you can also use the Order By field to select
a field by which the records in the form will be sorted by default.
After configuring the Data Source, you can now proceed to adding and configuring fields in the form.

171
Configuring Form Fields
When the form was added to the page, it contained two or more fields which by default are not configured. You can
change the names of these fields to better reflect their content as well as change the field type. To change a field to a
different type, right-click on it then use the Change To option to specify the new type. Now that the Data Source has
been set, you can proceed to assign database fields to the form fields. You can do so by using the Control Source
property to select a database field for the form field.

After setting the Control Source property, the Data Type property should also be set to correspond to the data type of
the field specified in the Control Source property. For some data types such as dates, float and Boolean values, you
should also configure the Format property which determines how the value will be displayed.

Adding Columns and Controls to the Form

Initially, the form created contains two columns with form fields. You can however add more columns as well as fields. To
add columns to the existing table, you can use the Insert Column options in the Table toolbar. The same toolbar also
has an Insert Row option which you can use to add rows to the table.

After adding columns to the table, you can add more controls from the Forms tab of the Toolbox.

172
As you add the controls, you should also configure their essential properties such as Name, Control Source and
Format.

Adding Sorter Controls to the Form

In the case of Grid and Editable Grid forms, you can also add sorter controls to the form so that the user can sort the form
records based on different fields. Typically, sorter controls are added in the top row of the table above the row containing
the actual controls. Use the Sorter option under the Forms tab of the Toolbox to add the sorter.

After adding the sorter, you can then configure its properties. The Name property should be changed to a more
appropriate name based on the control that the sorter applies to. In the Sort Order property, you should select the
database field that will be used to perform the sort when the sorter is clicked.

173
Sorter controls can be of varying complexity with the default being a simple link which the user can click. You can change
the format of the sorter by right clicking on it and selecting the Edit Sorter option.

In the Edit Sorter dialog, you can then select a different format for the sorter.

Adding Navigator Controls to the Form

If you are building a Grid or Editable Grid form, you should also add a Navigator control to allow the user to browse forms
in which the records span more than one page. Typically, the Navigator control is added to the bottom row of the table. If
such a row does not exist, you can use the Table toolbar to add a row.
To add the Navigator, click on the Navigator option under the Data tab of the Toolbox.

174
When the Create Navigator dialog appears, you can configure the options for the new navigator.

Specifying a Theme for the Form

After adding all the components for the form, you can specify a theme to enhance the look of the form and its contents.
To do so, right-click on the form title or icon and select the Edit option.

You can then proceed to select a theme from the list of available themes.

175
8. Working with Builders

8.1 Builders
In the interest of saving time and effort, the process of creating forms can be greatly automated by using builders. A
builder is essentially a series of dialogs spanning the process of creating a page or form. The user configures the various
options available in the series of dialogs, at the end of which the builder generates forms based on the selections made.
Generally speaking, you will find it much easier to create forms using the builders then later on edit the forms as desired,
rather than create the forms from scratch manually. This is especially the case if you would like to maintain a consistent
look since the builders offer the option of creating forms based on preset style and image themes.
The following are the different builders that can be used to create forms:
• Application Builder
• Grid Builder
• Record Builder
• Editable Grid Builder
• Grid and Record Builder
• Search Builder
• Directory Builder
• Date Picker Builder
• Authentication Builder
In this section, we shall go through the process of creating different forms using each of the builders.

8.2 Application Builder

The Application Builder can be used to create multiple project pages based on the tables or queries in a designated
database connection. In some instances, the Application Builder can be used to create all the pages needed for a project.
The different phases of the Application Builder allow you to create grid, record and search forms for some or all the tables
within a connection.
You can then publish and use the generated pages or edit them to include custom functionality. The information provided
in this section demonstrates the steps to create multiple project pages using the Application Builder.

Accessing the Application Builder

There are two ways of accessing the Application Builder. If you want to create an entirely new project using Application
Builder, click on the File menu and select the New | Project... option. The Add New Project window pops up where you
should select the Application Builder option then click OK.

176
 Figure 12-1: Application Builder from a New Project
Alternatively, to add multiple pages to an existing project using the Application Builder, click on the File menu and select
the New | Page... option. The Add New Page window pops up where you should select the Application Builder option,
then click OK.

Figure 12-2: Application Builder from a New Page

If you are building a new project, the first window of the Application Builder has four project-wide settings that need to be
configured. Once done, click Next to proceed.

Figure 12-3: General Project Settings Dialog

Table 12-1: General Project Settings

Parameters Description
Code Select the programming language in which the pages will be generated.
Language
Site Language Select the spoken language for the project pages
Server Path Specify the server path were the pages will be published.
URL Path Specify the URL that maps to the Server Path specified above. This is the URL you would type into a
browser in order to access the pages.

Configuring a Database

177
You now have to configure a new database connection for the project or select one of the sample databases.

Table 12-2: Select Database Connections Dialog

Table 12-3: Select Database Connections Settings

Parameters Description
Use a new database Select this option if you want to configure a new database connection. You can then click
connection on the 'Create...' button to create the connection.
Select a sample database Select either the Internet or Intranet sample database to use for the project.
connection

If you opted to create a new database connection, click on the Create... button to bring up the Add New Connection
window. You can then proceed to create a database connection based on ODBC DSN or a Connection string. Once you
have selected or configured a database connection, click Next to proceed.

Figure 12-4: Adding a New Connection

Setting Builder Options

In this step, there are a number of options that will determine how the builder will generate the pages. Click Next when
complete.

178
 Figure 12-5: Builder Options Dialog
Table 12-4: Builder Options Dialog Settings

Parameters Description
Enable smart naming
With this option selected, the Builder will generate English like captions for the database
table and field names. For example, the grid form for a database table called 'employees' will
have a caption 'List of Employees'. Additionally, fields with underscores in them will be
converted to column captions without the underscore e.g. 'task_name' will be shown as 'Task
Name'.

Autoincremented primary This option should be checked if the tables in your database have autoincremented primary
keys keys. With autoincremented primary keys, new records are automatically assigned unique
primary key values by the database. Note that both of the sample databases have
autoincremented primary keys.
Use single keyword field Select this option if you want search forms to have a single field that can be used to search
for text and memo fields against all the text and memo fields in the corresponding grid form. If this option is not
on Search selected, the search form will have a field for each to the text and memo fields.
Publish the site after Select this option if you want the generated pages to be published to the Server Path
Builder completes immediately after the Builder completes creating the pages. The Server Path was specified in
creating pages Step 1 above.
Use Popup Data Picker Select this option if you want to have a popup Data Picker/Selector for date input fileds. It will
for date input fileds be placed directly next to the input fileds used to enter the date.

Setting Security
The next step involves setting up the security mechanism of the project. Once you are done configuring the security
options, click Next to proceed.

Figure 12-6: Access Authentication Dialog

Table 12-5: Access Authentication Dialog Settings

Parameters Description
Use authentication Select this option if you want your pages to have security authentication.
User Table Select the table where user authentication information is contained.
User ID Field Select the database field with the unique user ID's.

179
Login Field Select the database field with the Login name of the users.
Password Field Select the database field with the user passwords.
Level/Group Field Select the field with the user security levels.
Security Groups This table contains a list of all the security groups that registered users can belong to.
Group ID The ID of the security group. This also serves as the level of the group.
Group Name The descriptive name for the security group.
Higher Level Inclusive If this option is selected, users with higher level security groups will be able to access pages
of Lower Levels with lower security levels e.g. a user in security group 3 will be able to access pages with
security levels 2 or 1 but not 4.
Add... Click this button to add a new security group.
Modify... Click this button to modify an existing security group.
Remove Click this button to remove an existing security group.

Selecting Database Tables and Fields

In this step, you are presented with a list of the tables in the database and out of these, you select those for which you
want to create pages. Once done, click Next to proceed.

Figure 12-7: Selecting Database Tables Dialog

Table 12-6: Selecting Database Tables Settings

Parameters Description
Refresh tables If you make changes to the database during the process of using the builder, click this button to refresh
the connection and retrieve the latest state of the tables.
Available This is a list of the tables available in the database.
tables
Selected table This is a list of the tables you have selected and based on which you will be able to create pages with
forms.
Select an Available table then click this button to add it to the list of selected tables

Click this button to add ALL Available tables to the Selected tables list.

Select a Selected table then click this button to remove it from the list.

Click this button to remove all Selected tables from the list.

180
 Select a table then click this button to move it upwards in the order of appearance.

Select a table then click this button to move it downwards in the order of appearance.

Associating Forms to the Database

This is the pivotal step in the process and involves selecting the types of forms to be created for each of the tables you
selected in the previous step.

Figure 12-8: Selecting Table and Record Options Dialog

Table 12-7: Selecting Database Tables Settings

Parameters Description
Tables A list of the tables you selected. Click on a particular table to access more configuration
details.
Grid Pages
Grid Activate this option if you want to have a grid form for the table.
Search Activate this option if you want to have a search form for the table.
Security Level Specify the security level required to access the form.
Record maintenance/view
page
Record Activate this option if you want to have a record form for the table.
Updateable Activate this option if you want the record form to be able to update records.
Security Level Specify the security level required to access the form.

Specifying the Search Details

If you click on a particular table name under the Table column, the Details window of Figure 12-9 appears in which you
can configure more details for the table. The first tab in the Details window is the Search tab where you can configure an
optional search form.

181
 Figure 12-9: Table Search Details Dialog Tab
Table 12-8: Table Search Details Settings

Parameters Description
Search, Grid & Select this option if you want the Search, Grid and Record forms to appear on the same page.
Record form on
One Page
Include in Menu If selected, a link to this page will be added in the navigation menu page.
Active Check this option to indicate your intention to create a search form.
Sorting list box If selected, the search form will have two listboxes for sorting. The first one will contain a list of all
the available fields so that the user can select the field to sort by. The user will also be able to
indicate the desired sort order (ASC, DESC) using the second listbox.
Records per page If selected the search form will have a listbox that can be used to specify the number of records to
list box be returned per page after the search is conducted
Orientation Specify whether the search form should be vertically or horizontally oriented
Advanced...
Specify the advanced search option such as submit method, type and other properties. If AND is
selected, the search form will have an input form control for all the fields. Otherwise, if OR is
selected, the search form will have only one input form control. Any value entered into the single
control will be used to search against all the fields in the form. After you set the advanced options
you can use the Preview button to see how the form looks like with either option selected.

Select an Available Field then click this button to add it to the form.

Click this button to add ALL Available Fields to the form

Select a search form field then click this button to remove it from the form

Click this button to remove all fields from the search form.

Select a form field then click this button to move it upwards in the order of appearance.

Select a form field then click this button to move it downwards in the order of appearance.

Control Type Specify the control type to be used for each of the fields in the form.

182
Specifying the Grid
After configuring the search form, you can access configuration options for the grid form by clicking on the Grid tab of the
Details window.

Figure 12-10: Table Grid Details Dialog

Table 12-9: Table Grid Details Settings

Parameters Description
Active Check this option to indicate your intention to create a grid form.
Grid Layout Select the desired layout of the grid form: Tabular, Columnar, and Justified.
Sorting Select the type of sorting controls you want to have on the grid form.
Page Select the type of navigation controls you want to have on the grid form.
Navigator
Available This listbox shows all the fields available in the table or view.
Fields
Fields for the These are the fields to be shown in the grid form. They are selected from among the Available Fields.
Grid
Select an Available Field then click this button to add it to the form.

Click this button to add ALL Available Fields to the form.

Select a form field then click this button to remove it from the form.

Click this button to remove all fields from the form.

Select a form field then click this button to move it upwards in the order of appearance.

Select a form field then click this button to move it downwards in the order of appearance.

Clicking on this icon opens the dialog in which you can specify parameters used for joining with other
tables. The Table/View identifies the other to which the current table is bound by the Bound Column.
The Text Column is the value returned from the bound table.

Page Name Specify the name of the page where the grid and search form will appear.

183
Order by Select a field by which the records will be ordered by when initially displayed.
Alternate If this option is selected, every other record in the grid will appear in a row with a different background
records color than the preceding record.
Record With this option selected, each row where a record appears is followed by an empty row that separates it
Separator from the next row with a record.

Linking the Grid to Records

In the 'Links' tab of the 'Details' window, you can specify how the records in the grid form will be linked to the records in
the record form.

Figure 12-11: Table Link Details Dialog

Table 12-10: Table Link Details Settings

Parameters Description
Database Select this option if you want to use one of the existing form fields as the link field. You can then specify
column the field to be used from among the available fields.
New Grid You can also create a new column in the Grid form that will specifically be used to link to the Record
column form. Enter some text of your choice to be used for this new grid column.

Configuring the Record

After configuring the link to the record form, you can now proceed to configure options for the record form itself. This is
done under the Record tab of the Details window.

Figure 12-12: Table Link Details Dialog

Table 12-11: Table Link Details Settings

Parameters Description
Active Activate this option to indicate your intention to create a record form.
Primary Key Select the primary key field in the table.

184
Available This listbox shows all the fields available in the table.
Fields
Fields for the These are the fields to be shown in the record form. They are selected from among the Available Fields.
Record
Select an Available Field then click this button to add it to the form

Click this button to add ALL Available Fields to the form

Select a form field then click this button to remove it from the form

Click this button to remove all fields from the form

Select a form field then click this button to move it upwards in the order of appearance

Select a form field then click this button to move it downwards in the order of appearance

Clicking on this icon opens the dialog with advanced properties. To activate the button select a field in
the Fields for the Record section. Note: The following field types have advanced properties: CheckBox
List, ListBox, Radio Button and TextBox if the data type is date. CheckBox List, ListBox or Radio Button
- Clicking on the button will open the 'List DataSourse' dialog illustrated below. TextBox, datatype is date
- Clicking on the button will open the dialog illustrated below. Specify the 'Use pop-up date picker' option
if you want to have a popup Data Picker/Selector for this fileds.

Control Type Specify the control type to be used for each of the fields in the form.
Page Name Specify the name of the page where the record form will appear. This option is not available when the
grid, search and record forms appear on the same page.

Previewing the Pages

Finally, after configuring all the forms, you can preview how they will look like when generated by using the Preview tab of
the Details window. You will have a chance to select a style at a later stage but at the moment, you can see the layout of
the three forms based on the elections you made.

Figure 12-13: Preview Forms

Once you are satisfied with the appearance of the forms, click on the OK button to close the Details window and return to
the Application Builder window. If need be, you can click on another table name and access the 'Details' window for that
table. You can also click on the All link in the Table column to apply global options for all the forms to be created: Once
done, click on the Next button in the Application Builder to proceed.

185
 Figure 12-14: Grid and Menu Options
Table 12-12: Table Link Details Settings

Parameters Description
Search, Grid & Record form on Select this option if you want the Search, Grid and Record forms to appear on the
One Page same page for all pages.
Include in Menu If selected, a link to all pages will be added in the navigation menu page.

Customizing Page Layout

You now have options to customize the page layout. After configuring the page layout, click Next to proceed.

Figure 12-15: Page Layout Dialog

Table 12-13: Page Layout Dialog Settings

Parameters Description
No Menu Select this option if you don't want to have a menu page.
Standalone Menu If this option is selected, the menu will be placed in a standalone page from where the user will be
Page able to navigate to the linked pages. This means that the individual pages will not have a menu
and neither will the header & footer pages.
Horizontal Menu Select this option to create a horizontal menu of the Header page.
Header
Horizontal Menu With this option, a horizontal menu is placed on the Header & Footer pages that subsequently
Header & Footer appear at the top and bottom of all the other pages.
Vertical Menu With this option, a vertical menu is placed on the Header & Footer pages that subsequently
Header & Footer appear at the top and bottom of all the other pages.
Create Header Page Select this option if you want all pages to have a header page.
Create Footer Page Select this option if you want all pages to have a footer page.

Selecting a Theme
With all the other configurations in place, you now have the chance to select a theme to be used for the forms

186
 Figure 12-16: Select Application Theme Dialog
Table 12-14: Page Layout Dialog Settings

Parameters Description
Theme This is a list of available themes. Select the (No Theme) option if you don't want to use a theme.
Preview This window shows how the forms would look like based on the selected theme.
Style Type
Select how the style will be applied: HTML - Styles are defined using HTML attributes and properties.
CSS Page - Cascading Style Sheet definitions are placed at the top of the HTML pages in the <HEAD>
section. CSS File - Cascading Style Sheet definitions are placed in a separate file that is linked to the
HTML pages. CSS Inline - Cascading Style Sheet definitions are placed within the HTML tags.

Generating the Project and Pages

After deciding on a theme to use, click Next to advance to the last step. This window displays a summary of the
configurations that have been made to this point. Click Finish to generate the pages and optionally publish them to the
specified Server Path.

Figure 12-17: Application Builder Verification Dialog

Once the pages have been generated, the Project Explorer window will show all the pages for the project and you can
then open them and make any adjustments you want.

187
 Figure 12-18: Application Builder

8.3 Grid Builder

Use the Grid builder to create grid forms that can optionally have a related search form. The builder provides many
options that would otherwise require a considerable amount of time to add manually. To begin the process, click on the
Grid Builder option in the Builders tab of the Toolbox.

Creating a Database Connection

The first step involves selecting or creating a database connection from where the data shown in the grid will be retrieved.
You can select one of the existing database connections, create a new connection or select one of the sample databases.
Once done click Next to proceed.

Figure 12-19: Selecting a Database for the Grid

Having selected a connection, you now have to select a data source as well as the fields to be included in the grid.

188
 Figure 12-20: Selecting Database Fields for the Grid
Table 12-15: Grid Data Source Settings

Parameters Description
Data Source Select the table or view from where the data will come from.
Refresh Click this button to refresh the connection if you make changes to the database after having begun
using the builder.
Build Query
Clicking this button will bring up the Visual Query Builder window where you can setup a SQL query
that will act as the grid data source.

Available Fields This listbox shows all the fields available in the table or view.
Fields for the These are the fields to be shown in the grid. They are selected from among the Available Fields.
Grid
Select an Available Field then click this button to add it to the grid.

Click this button to add ALL Available Fields to the grid.

Select a grid field then click this button to remove it from the grid.

Click this button to remove all fields from the grid.

Select a grid field then click this button to move it upwards in the order of appearance

Select a grid field then click this button to move it downwards in the order of appearance

Order by Select a field by which the records will be ordered by when initially displayed

Previewing the Grid

After having added fields to the grid and optionally set the Order by field, you can click on the 'Preview' button to see how
the grid looks like at this point. For the above setup, the illustration below shows how the grid looks like in its current state
of construction.
After previewing the grid, close the preview window and click on the 'Next' button to proceed. Note that if you are satisfied
with the form at this point, you can click on the 'Finish' button to close the builder and generate the form.

Adding a Search Form

The next step involves adding a search form that can be used to filter the records displayed in the grid form. This step is
optional and if you don't want a corresponding search form for the grid, you can simply click the 'Next' button to proceed
to the next step.

189
 Figure 12-21: Grid Search Fields
Table 12-16: Grid Search Settings

Parameters Description
Create Activate this option to indicate your intention to create a search form.
Search/Filter
Sorting list box If selected, the search form will have two listboxes for sorting. The first one will contain a list of all the
available fields so that the user can select the field to sort by. The user will also be able to indicate the
desired sort order (ASC, DESC) using the second listbox.
Records per If selected, the search form will have a listbox that can be used to specify the number of records to be
page list box returned per page after the search is conducted.
Orientation Specify whether the search form should be vertically or horizontally oriented.
Advanced... Click on this buton to specify the advanced search option such as submit method, type and other
properties. If AND is selected, the search form will have an input form control for all the fields.
Otherwise, if OR is selected, the search form will have only one input form control. Any value entered
into the single control will be used to search against all the fields in the form. After you set the
advanced options you can use the 'Preview' button to see how the form looks like with either option
selected.
Available Fields This listbox shows all the fields available in the table or view.
Search Fields These are the fields to be shown in the search form. They are selected from among the Available
Fields.
Select an Available Field then click this button to add it to the form.

Click this button to add ALL Available Fields to the form.

Select a form field then click this button to remove it from the form.

Click this button to remove all fields from the form.

Select a form field then click this button to move it upwards in the order of appearance.

Select a form field then click this button to move it downwards in the order of appearance.

Control Type Specify the control type to be used for each of the fields in the form.

Once again, during the process of creating the search form, you should use the Preview button to see how the form looks
with the selected options. You can therefore try out various options and preview them before deciding on the appropriate
one.

190
After configuring the form satisfactorily, click on the 'Next' button to proceed.

Customizing the Grid

At this juncture, you can further customize the grid form by selecting the caption to be used for sorting as well as the
navigational controls.

Figure 12-22: Defining Grid Options

Table 12-17: Grid Option Settings

Parameters Description
Sorting Select the type of sorting controls that you want to have in the grid.
Page Navigator Select the type of Navigation controls that you want to have in the grid.
Modify
If you want to have custom navigation controls on the form, click on this button to open the
'Custom Navigator' window where you can customize the controls to suit your needs. Refer to
Section Error! Reference source not found., "Error! Reference source not found.", for
additional information.

Records per page Specify the default number of records to be shown per page
No records found Specify the message that will be displayed in the grid form if there are no records to be shown.
message
Display the total Specify if the label which shows the total number of records in the recordset should be diplayed
number of records above the grid.
Extended HTML (for
Specify if all controls are taken into the blocks of the following type: <!-- BEGIN ControlType
Hide/Show
ControlName --><!-- END ControlType ControlName --> It will be used to dynamically hide/show
functionality)
controls on the page.

Once you have made all the selections, you can use the preview button to see how the form looks like and if necessary,
make adjustments.

Selecting a Theme
The final step is optional and involves selecting a theme for the form.

191
 Figure 12-23: Select a Grid Theme
Table 12-18: Grid Theme Settings

Parameters Description
Theme This listbox contains a list of themes from which you can select one.
Style Type
HTML - Styles are defined using HTML attributes and properties. CSS Page - Cascading Style Sheet
definitions are placed at the top of the HTML pages in the <HEAD> section. CSS File - Cascading Style
Sheet definitions are placed in a separate file that is linked to the HTML pages. CSS Inline - Cascading
Style Sheet definitions are placed within the HTML tags.

Grid Layout Specify the layout of the grid form as Tabular, Columnar, or Justified.
Alternate If this option is selected, every other record in the grid will appear in a row with a different background
records color than the preceding record.
Record With this option selected, each row where a record appears is followed by an empty row that separates it
Separator from the next row with a record.

• Clicking the 'Preview' button now will show the forms as they will look when generated. The search form appears
at the top with the grid right below it. Once done, click on the 'Finish' button to close the builder and generate the
form.

8.4 Editable Grid Builder

The simplest and most convenient way of building an Editable Grid is to use the Editable Grid builder located under the
Builders tab of the Toolbox. Open or create a new page where the Editable Grid will be located then with the cursor
placed at the location where the form should appear, click on the Editable Grid option under the Builders tab of the
Toolbox.
Figure 12-24: Editable Grid Option

192
Selecting a Data Source
The first step involves selecting or creating a database connection from where the data to be edited or added using the
record form is stored. You can select one of the existing database connections, create a new connection or select one of
the sample databases. Once done click Next to proceed.

Figure 12-25: Editable Grid Builder Database

If you already have a connection configured for the project, you can elect to use one of the tables in this connection to
create the Editable Grid. Alternatively, you can create a new connection or use one of the sample databases.
The Autoincremented primary keys checkbox should be activated if the records that will be contained in the Editable
Grid will have autoincrement primary keys that are provided automatically by the database. With this option selected, the
Editable Grid will not have an editable or submitable control for the primary key since that would results in a database
error. Conversely, if primary keys are user provided, then this option should not be selected. In this case, the Editable
Grid would have a field where the user can enter a value for the primary key.
Having selected a connection, you now have to select a data source as well as the fields to be included in the editable
grid form.

Figure 12-26: Selecting Fields Name for the Editable Grid

193
 Table 12-19: Editable Grid Field Settings

Parameters Description
Data Source Select the table or query that contains the fields to be used in the Editable Grid.
Build Query
Click on this button to open the Visual Query
Builder where you can construct a join query
which retrieves fields from multiple tables.
Within the Visual Query Builder window, you
can select multiple related tables then select
fields from those tables.

Refresh Click this button to refresh the connection if you make changes to the database after having begun using
the builder.
Primary Key
If your design time connection is made using an OLEDB provider, CodeCharge Studio will automatically
set the primary key for the selected table if one is defined in the database. However, other drivers such
as ODBC drivers as well as connections to databases such as MySQL do not support the automatic
discovery of the primary key field in which case you have to specify it manually. If the table contains a
compound primary key that is made up or more than one field, then you have to use the Build Query
button described above to specify all the primary keys.

Within the Visual Query Builder dialog, right-click on

each of the fields that make up the primary key field
and select the Primary Key option. The selected
fields should then appear in bold.

Available This listbox shows all the fields available in the table or query.
Fields
Fields for the These are the fields to be shown in the record form. They are selected from among the Available Fields.
Record
Select an Available Field then click this button to add it to the form.

Click this button to add ALL Available Fields to the form.

Select a form field then click this button to remove it from the form.

Click this button to remove all fields from the form.

Select a form field then click this button to move it upwards in the order of appearance.

194
 Select a form field then click this button to move it downwards in the order of appearance.

Order by Select a field by which the records will be ordered by when initially displayed.
Control Type Specify the control type to be used for each of the fields in the form.

After having added fields to the editable grid and optionally set the Order by field, you can click on the Preview button to
see how the editable grid looks like at this point. After previewing the editable grid, close the preview window and click on
the Next button to proceed. Note that if you are satisfied with the form at this point, you can click on the Finish button to
close the builder and generate the form.

Adding Search Fields

The next step involves adding a search form that can be used to filter the records displayed in the editable grid form. This
step is optional and if you don't want a corresponding search form for the editable grid, you can simply click the Next
button to proceed to the next step.
Figure 12-27: Selecting Search Fields for the Editable Grid

Table 12-20: Editable Grid Search Field Settings

Parameters Description
Create Activate this option to indicate your intention to create a search form.
Search/Filter
Sorting list box If selected, the search form will have two listboxes for sorting. The first one will contain a list of all the
available fields so that the user can select the field to sort by. The user will also be able to indicate the
desired sort order (ASC, DESC) using the second listbox.
Records per If selected, the search form will have a listbox that can be used to specify the number of records to be
page list box returned per page after the search is conducted.
Orientation Specify whether the search form should be vertically or horizontally oriented.
Advanced... Click on this button to specify additional features for the search form. You can specify whether the form
should be submitted using the POST or GET method. You can also specify whether you want each
database field to be represented by a search form field or alternatively have one search form field which
can be used to search all database fields using the OR operator.

You can also opt to have a Clear option which would clear the search fields when clicked Additionally

195
 you can specify that the search button be the default button so that hitting the enter key would be the
same as clicking the search button.

Available Fields This listbox shows all the fields available in the table or view.
Search Fields These are the fields to be shown in the search form. They are selected from among the Available
Fields.
Select an Available Field then click this button to add it to the form.

Click this button to add ALL Available Fields to the form.

Select a form field then click this button to remove it from the form.

Click this button to remove all fields from the form.

Select a form field then click this button to move it upwards in the order of appearance.

Select a form field then click this button to move it downwards in the order of appearance.

Control Type Specify the control type to be used for each of the fields in the form.

Once again, during the process of creating the search form, you should use the Preview button to see how the form looks
with the selected options. You can therefore try out various options and preview them before deciding on the appropriate
one. After configuring the form satisfactorily, click on the Next button to proceed.

Customizing the Editable Grid

At this juncture, you can further customize the editable grid form by selecting the caption to be used for sorting as well as
the navigational controls.
Figure 12-28: Editable Grid Options

Table 12-21: Editable Grid Search Field Settings

Parameters Description
Sorting Select the type of sorting controls that you want to have in the grid.
Page Navigator Select the type of Navigation controls that you want to have in the grid.
Modify
If you want to have custom navigation controls on the form, click on this button to open the Custom
Navigator window where you can customize the controls to suit your needs

196
 Property Description First Text for the link to the first
record Previous Text for the link to the previous record Next Text for the link to the next record Last
Text for the link to the last record Use images for links Select this option if you want to have images
instead of text for the navigation links Disabled links are not visible If this option is selected, links to
pages that cannot logically be browsed are not shown e.g. if you are on page 1, you cannot browse
using the first or previous links. Page Numbers Apart from having the four links mentioned above,
specify whether you also want to have links to the individual pages and how they should appear.
Number of Pages Specify how many page links should be displayed. Show total pages Select this
option if you want to display the total number of pages that can be browsed.

Records per Specify the default number of records to be shown per page
page
No records Specify the message that will be displayed in the grid form if there are no records to be shown.
found message
Display the total Select this option if you want the form to display the total number of records that are retrieved in a
number of form.
records

Once you have made all the selections, you can use the Preview button to see how the form looks like and if necessary,
make adjustments.

Selecting Editable Grid Options

You now have to decide the kind of functionality that will be available in the editable grid form. You can uncheck any of
the options if you don't want the form to have the corresponding functionality.
Figure 12-29: Editable Grid Options

Table 12-22: Editable Grid Operations

Parameters Description
Allow Insert
Specify whether the Editable Grid should allow the user to insert new records. You can also use
the Number of empty rows property to specify the number of empty rows that should be
provided for the purpose of inserting new records.

Allow Update Specify whether the Editable Grid should allow the user to update existing records.
Allow Delete Specify whether the Editable Grid should allow the user to delete existing records.
Allow Cancel Specify whether the Editable Grid should have a cancel button which would abort any current
operation and return to the page specified in the Return Page property of the form.

197
Show Confirmation With this option selected, the user would always be prompted to confirm the insert, update or
dialog for submit delete operations.

Selecting a Theme
In the final step, you optionally select a theme for the editable grid form. The Preview portion of the window shows how
the form would look like with the currently selected theme.
Figure 12-30: Editable Grid Theme Options

Table 12-23: Editable Grid Theme Options

Parameters Description
Theme This listbox contains a list of themes from which you can select one.
Style Type
HTML - Styles are defined using HTML attributes and properties. CSS Page - Cascading Style Sheet
definitions are placed at the top of the HTML pages in the <HEAD> section. CSS File - Cascading Style
Sheet definitions are placed in a separate file that is linked to the HTML pages. CSS Inline - Cascading
Style Sheet definitions are placed within the HTML tags.

Grid Layout Specify the desired layout of the grid form (Tabular, Columnar or Justified).

You can click the Preview button to see how the form would look with a particular theme. After selecting a theme, click on
the Finish button to generate the form to the page.

8.5 Record Builder

The Record Builder can be used to automate the process of creating record forms where database content can be
inserted, edited or deleted. To begin the process, click on the Record Builder option in the Builders tab of the Toolbox.

Selecting a Data Source

The first step involves selecting or creating a database connection from where the data to be edited or added using the
record form is stored. You can select one of the existing database connections, create a new connection or select one of
the sample databases. Once done click Next to proceed.

198
 Figure 12-31: Selecting a Database for the Record Builder
Having selected a connection, you now have to select a data source as well as the fields to be included in the record form

Figure 12-32: Selecting Fields for the Record Builder

Table 12-24: Record Builder Field Settings

Parameters Description
Data Source Select the table from where the data will come from.
Refresh Click this button to refresh the connection if you make changes to the database after having begun
using the builder.
Primary Key Select the primary key field in the table.
Available Fields This listbox shows all the fields available in the table
Fields for the These are the fields to be shown in the record form. They are selected from among the Available
Record Fields.
Select an Available Field then click this button to add it to the form.

Click this button to add ALL Available Fields to the form.

Select a form field then click this button to remove it from the form.

Click this button to remove all fields from the form.

Select a form field then click this button to move it upwards in the order of appearance.

Select a form field then click this button to move it downwards in the order of appearance.

Control Type Specify the control type to be used for each of the fields in the form.

Once you have made the selections, you can click on the preview button to see how the form looks like and maybe make
some adjustments. Once done, click Next to proceed.

Selecting Record Options

You now have to decide the kind of functionality that will be available in the record form. You can uncheck any of the
options if you don't want the form to have the corresponding functionality.

199
 Figure 12-33: Defining the Record Builder Options

Selecting a Theme
In the final step, you optionally select a theme for the record form. The Preview portion of the window shows how the form
would look like with the currently selected theme.

Figure 12-34: Selecting a Theme for the Record Builder

Once done, click on the Finish button to close the builder and generate the form.

8.6 Grid and Record Builder

Often times a grid form is used in conjunction with a record form such that the grid form is used to display multiple records
and a link is provided from the grid form records to the record form where the details of the record can be viewed and
edited. For this purpose, the Grid and Record builder can be used to produce a grid form with an attendant record form.
To begin, click on the Grid and Record Builder option in the Builder tab of the Toolbox.

Selecting a Data Source

Select or create the database connection whose fields will be used in the two forms. You can select one of the existing
database connections, create a new connection or select one of the sample databases.
Figure 12-35: Selecting a Database for the Grid and Record Builder

Table 12-25: Grid and Record Builder Settings

Parameters Description

200
Autoincremented Select this option if the database table has an autoincremented primary key field. This option
primary keys prevents the builder from creating a record form with the primary key field since it will be provided
by the database when a new record is inserted.

Now select the fields to be shown in the grid form.

Figure 12-36: Selecting Fields for the Grid and Record Builder

Table 12-26: Record Builder Field Settings

Parameters Description
Data Source Select the table from where the data will be retrieved.
Build Query
Clicking this button will bring up the Visual Query Builder window where you can setup a SQL query
that will act as the grid data source.

Refresh Click this button to refresh the connection if you make changes to the database after having begun
using the builder.
Available Fields This listbox shows all the fields available in the table.
Fields for the These are the fields to be shown in the grid. They are selected from among the Available Fields.
Grid
Select an Available Field then click this button to add it to the grid.

Click this button to add ALL Available Fields to the grid.

Select a grid field then click this button to remove it from the grid.

Click this button to remove all fields from the grid.

Select a grid field then click this button to move it upwards in the order of appearance.

Select a grid field then click this button to move it downwards in the order of appearance.

Order by Optionally specify a field by which the records in the grid will be ordered by when initially displayed.

Creating a Search Form

The next step is optional and should only be used if you want to have a search form that can be used to filter the records
displayed in the grid. If a search form is not needed, simply click the Next button to proceed.

201
 Figure 12-37: Selecting Search Fields for the Grid
Table 12-27: Grid and Record Builder Search Settings

Parameters Description
Create Select this option to indicate your intention to create a search form.
Search/Filter
Sorting list box If selected, the search form will have two listboxes for sorting. The first one will contain a list of all the
available fields so that the user can select the field to sort by. The user will also be able to indicate the
desired sort order (ASC, DESC) using the second listbox.
Records per If selected the search form will have a listbox that can be used to specify the number of records to be
page list box returned per page after the search is conducted.
Orientation Specify whether the search form should be vertically or horizontally oriented
Advanced... Click on this buton to specify the advanced search option such as submit method, type and other
properties. If AND is selected, the search form will have an input form control for all the fields.
Otherwise, if OR is selected, the search form will have only one input form control. Any value entered
into the single control will be used to search against all the fields in the form. After you set the
advanced options you can use the 'Preview' button to see how the form looks like with either option
selected.
Available Fields This listbox shows all the fields available in the table or view.
Search Fields These are the fields to be shown in the search form. They are selected from among the Available
Fields.
Select an Available Field then click this button to add it to the form.

Click this button to add ALL Available Fields to the form.

Select a form field then click this button to remove it from the form.

Click this button to remove all fields from the form.

Select a form field then click this button to move it upwards in the order of appearance.

Select a form field then click this button to move it downwards in the order of appearance.

Control Type Specify the control type to be used for each of the fields in the form.

Selecting Grid Options

202
You can now specify the type of sorting and navigation controls to appear in the grid form.

Figure 12-38: Defining Grid Options

Table 12-28: Grid and Record Builder Option Settings

Parameters Description
Sorting Select the type of sorting controls that you want to have in the grid.
Page Navigator Select the type of Navigation controls that you want to have in the grid.
Modify If you want to have custom navigation controls on the form, click on this button to open the
'Custom Navigator' window where you can customize the controls to suit your needs.
Records per page Specify the default number of records to be shown per page.
No records found Specify the message that will be displayed in the grid if there are no records to be shown.
message
Display the total number Specify if the label which shows the total number of records in the recordset should be diplayed
of records above the grid.

Linking the Grid to the Record

The last step in configuring the grid involves selecting the field to be used to link the records in the grid to the details in
the record form. You can select any one of the fields that are already in the grid or alternatively, you can specify a new
column whose sole purpose will be to act as the link to the record form.

Figure 12-39: Selecting a Record Link

Configuring the Record

The next set of windows pertains to the configuration of the record form. The record form will be based on the same table
as was the grid form but you have the option of selecting different fields to appear in the record form. After adding the
fields, you should also select the Control Type to be used for each of the fields.

203
 Figure 12-40: Selecting a Fields for the Record
At this point, you can use the Preview button to see how the forms look.

Selecting Record Options

Next, select the type of operations you want the user to be able to perform using the record form. In the illustration below,
the 'Allow Delete' option is disabled meaning that the record form will not allow the user to delete any existing records.

Figure 12-41: Defining Record Options

Selecting a Theme
In the last step, select a theme to be used to display both forms.

Figure 12-42: Selecting a Theme for the Grod and Record Builder
You can use the Preview button to see how the forms will look like then click on the Finish button to close the builder
and generate the forms.

8.7 Search Builder

Search forms are used to enter values into controls such that when the values are submitted, they are used to search and
retrieve records from the database. Search forms are used in conjunction with grid or record forms whereby the search

204
form is used to submit the search criteria and the grid or record form displays the retrieved records that match the search
criteria.
In their simplest form, search forms simply submit search criteria. However, you can use the Search Builder to create
complex search forms that also determine the number of records to be displayed per page, the order in which the records
are displayed as well as the SQL operator to be used to perform the search. To begin the process of creating a search
form, click on the Search Builder option in Builders tab of the Toolbox.

Selecting a Database Connection

Select or create the database connection whose fields will be used in the search. You can select one of the existing
database connections, create a new connection or select one of the sample databases. Once done click 'Next' to
proceed.

Figure 12-43: Selecting a Data Source for the Search Builder

This is the main step in creating the search form and involves selecting fields to be shown in the form as well selecting
other display options.

Figure 12-44: Selecting Search Fields

Table 12-29: Search Builder Search Field Settings

Parameters Description
Table Select the database tables whose fields will be used in the search form.
Sorting list box If selected, the search form will have two listboxes for sorting. The first one will contain a list of all the
available fields so that the user can select the field to sort by. The user will also be able to indicate the
desired sort order (ASC, DESC) using the second listbox.
Records per If selected the search form will have a listbox that can be used to specify the number of records to be
page list box returned per page after the search is conducted.
Orientation Specify whether the search form should be vertically or horizontally oriented.
Advanced... Click on this buton to specify the advanced search option such as submit method, type and other
properties. If AND is selected, the search form will have an input form control for all the fields.
Otherwise, if OR is selected, the search form will have only one input form control. Any value entered
into the single control will be used to search against all the fields in the form. After you set the
advanced options you can use the 'Preview' button to see how the form looks like with either option
selected.
Available Fields This listbox shows all the fields available in the table or view.

205
Search Fields These are the fields to be shown in the search form. They are selected from among the Available
Fields.
Select an Available Field then click this button to add it to the form.

Click this button to add ALL Available Fields to the form.

Select a form field then click this button to remove it from the form.

Click this button to remove all fields from the search form.

Select a form field then click this button to move it upwards in the order of appearance.

Select a form field then click this button to move it downwards in the order of appearance.

Control Type Specify the control type to be used for each of the fields in the form.

Selecting a Grid Form

Next, you can optionally specify a page and a grid form to which the search will apply. You can jump this step if the form
is not yet available or you intend to use the search form for a different purpose.

Figure 12-45: Select Output Grid

Selecting a Theme
In the final step, you can optionally select a theme to be used to display the form.

Figure 12-46: Selecting a Search Builder Theme

Once done, click the Finish button to close the builder and generate the search form.

8.8 Directory Builder

206
The Directory Builder allows you to build two-level category trees. The Category List can be displayed in two or more
columns. To begin the process of creating a Directory component, click on the Directory Builder option in Builders tab of
the Toolbox.

Selecting a Data Source

The first step involves selecting or creating a database connection from where the data shown in the directory will be
retrieved. You can select one of the existing database connections, create a new connection or select one of the sample
databases. Once done click Next to proceed.

Figure 12-47: Selecting a Database for the Directory Builder

Having selected a connection, you now have to setup the properties of the category table.

Figure 12-48: Category Table Properties

Table 12-30: Directory Builder Category Settings

Parameters Description
Category Table Specify a database table that stores the list of categories to be presented in a directory/index
format
Category ID field Specify a category table field that stores the category id
Category Name field Specify a field that stores the category names or descriptions
Parent Category field Specify a field that stores the parent category id
Root Category
Specify a value of the Parent Category field for the root (highest-level) categories that do not
identifier
have a parent, for which you may need to designate a value, such as 0 or -1 used in the Parent
Category Id field of the root categories. The value will be set as default for the Data Source
property.

No categories
Specify a message to be shown to users when the last (lowest-level) category is reached and
message
there are no additional sub-categories to browse.

Number of Columns Specify a number of columns to output the list of the categories. The value will be set as default
for the Number of Columns property.
Create Directory Path When selected the Path component will be automatically configured and placed above the
for the current Directory component on the page. Otherwise the Path will not be created.

207
directory

You can click on the Preview button to see how the form looks like in its current state of construction or Next button to
proceed.

Selecting a Theme
The final step involves the selection of a theme for the form.

Figure 12-49: Selecting a Theme for the Directory

As usual, you can use the Preview button to see how the form looks like. Click the Finish to close the builder and
generate the form.

8.9 Date Picker Builder

The Date Picker builder is used top create a pop-up date picker, which allows to select a value transferred into the control
(usually Text Box) on the page set in the Date Picker's Control property.
To begin the process of creating a Date Picker component, click on the Date Picker Builder option in Builders tab of the
Toolbox. Note that the Date Picker can be placed only on the Record or Editable Grid. If you try to place the component
outside the mentioned forms the following message appears: Date Picker can be inserted only into Record, Editable Grid.

Selecting a Date Picker

In the first step, you have to select the type of the Date Picker you want to add to the page.

Figure 12-50: Selecting a Date Picker Type

Table 12-31: Directory Builder Category Settings

Parameters Description
Link Select this option to add the Date Picker as a link. Enter the text for the link into the TEXT LINK field.
Button Select this option to add the Date Picker as a button. Enter the caption for the button into the BUTTON
CAPTION field.
Image Link Select this option to add the Date Picker as an image link. Also select one of the icon options below.

You can click on the Preview button to see how the form looks like in its current state of construction.

208
Specifying a Form Control
The next step allows you to specify the form control to receive output from the Date Picker.

Figure 12-51: Select a Form Control for the Date Picker

You can click on the Preview button to see how the form looks like in its current state of construction.

Selecting a Theme
The final step involves the selection of a theme for the form.

Figure 12-52: Selecting a Theme for the Date Picker

As usual, you can use the Preview button to see how the form looks like. Click the Finish to close the builder and
generate the form.

8.10 Authentication Builder

A login or authentication form is used to input authentication details (Login and Password) that are required to grant
access to users in sites that implement security. The Authentication builder is used to add login/logout functionality to an
existing page. Click on the Authentication Builder option in the Builders tab of the Toolbox to begin the process.

Selecting the Authentication Type

In the first step, you have to select the type of functionality you want to add to the page.

Figure 12-53: Selecting the Authentication Features

Table 12-32: Directory Builder Category Settings

Parameters Description
Login Form Select this option to add a login form to the current page.
Logout Link to this Page Select this option to add a logout link in the current page. The link points to the current page.

209
Logout Link to custom Select this option to add a logout link in the current page. The link points to the page you select
Page in the next step.
Logout action on this Select this option to add a logout action to the current page. The action is added in the After
Page Initialize event of the page.

If you opt to add a Login form, clicking the preview button will show a basic form similar to that shown below.

Selecting Login Options

If in the first step you opted to add a Login form, the next step allows you to specify whether you want the login field in the
login form to have focus when the page loads. If the field is in focus, the user can begin typing into it immediately without
having to first click on it.

Figure 12-54: Selecting Login Options

Alternatively, if in the first step you opted to add a Logout Link to a Custom Page, you now have to select the custom
page to where the link will refer.

Figure 12-55: Selecting a Logout Page

Selecting a Theme
The final step that applies only if you are building a login form involves the selection of a theme for the form.

Figure 12-56: Selecting a Theme for the Authentication Form

As usual, you can use the Preview button to see how the form looks like. Click the Finish button to close the builder and
generate the form.

210