CodeCharge Studio

Command Area

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.

Menu Bar and Title Bar

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.

Toolbar

You can also drag the toolbars away from the sides of the application window and in so doing create a floating toolbar.

Floating Toolbars

The following is a description of the commands available in the different toolbars.

Standard Dialog Functions

Command	Description	Short-cut
	Create a new Page	Ctrl + N
	Open an existing Page	Ctrl + O
	Save the current page	Ctrl + S
	Save all changes made in multiple documents
	Undo the last action	Ctrl + Z
	Redo the last action that was undone	Ctrl + Shift + Z
	Cut the current selection and place it in the clipboard	Ctrl + X
	Copy the current selection to the clipboard	Ctrl + C
	Paste the current contents of the clipboard	Ctrl + P
	Open the Project Settings window
	Synchronize code to reflect changes made
	Publish the project	F9
	Publish the current page	F8
	View page in the Live Data mode	F10
	View the Project Explorer window
	View the Properties window
	View the Toolbox
	View the Message window
	Show borders
	Reveal paragraph and new-line tags	Ctrl + /

Table Functions

Command	Description
	Open the Insert Table window
	Insert a row above the current row
	Insert a column before the current column
	Delete the current row
	Delete the current column
	Move Column Left
	Move Column Right

Formatting Functions

Command	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

Positioning and Alignment Functions

Command	Description
	Align the position of the control to the closest grid line
	Assign the current control an absolute rather than relative position
	Fix the position of an absolutely positioned control

Web Functions

Command	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

Insert a Table Dialog

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

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

Customize Toolbars

Under the Command tab 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.

Figure 10-7: Command Customization