Working with Documents

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.

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 an HTML form (<form></form>) within them.
	A Label control based on database content.
	A Link control based on database content.
	Comment tag <!-- -->
	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.

<!-- 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 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.

<script language="JavaScript">
//Begin CCS script
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.

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.

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

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.

See also: