CodeCharge Studio

Working with Documents

Much of your time using CodeCharge Studio will involve the document window. The document window serves multiple purposes depending on the mode it is currently set to. The five different modes the document window can be set in are:

Design Mode

Design mode allows the user to construct a page and 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 and not the functionality. 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. In design mode, you can toggle the display of the HTML tags 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 Blocks and are an indication that the text will be substituted for database content when the page is viewed live. Care should be observed when handling any blocks. If a block is inadvertently changed the corresponding database content would not be displayed. As a rule, always use the Properties window or the Project Explorer window to change the properties of block content, rename or remove it. Note: 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.


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

Like the 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 the 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.

<!-- 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 an HTML comment to mark their beginning and another to mark their end. Additionally, it is possible to have nested blocks so that one block is within another. In this scenario, the naming of the blocks makes it clear where each of the blocks begins and ends. Therefore, it is 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.

<script language="JavaScript">
//Begin CCS script
function page_OnLoad() { //page_OnLoad @1-1C723708

//Set Focus @5-84B91275

//End Set Focus
} //Close page_OnLoad @1-FCB6E20C

//bind_events @1-F4D605D7
function bind_events() {   
//End bind_events

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

//End CCS 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 white by default. 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, 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 common 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.

Whenever appropriate, the two list-box fields at the top left of the document window will display the Objects in the page and any members of that object. Selecting a particular Object and 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.

The number and names of the Common Files will vary depending on the coding language being used.

Preview Mode

Preview mode shows how the static HTML part of a page will look like when viewed in a browser. No 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 so that dynamic content is made available for viewing. Before attempting to view a page in Live Page mode 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 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.

See also

Custumizing the Workspace

On-line, printable versions and updates