CodeCharge Studio

Styles

Overview

CodeCharge Studio styles are made of cascading style sheet (CSS) definition file (.css) and accompanying graphics. Styles define fonts, colors, buttons, graphics, spacing and other layout formatting attributes. Styles are applied directly to the HTML tags on the page. For example "h1" style will be automatically applied to the text enclosed within the HTML heading tag <h1>. Styles can also be applied hierarchically by defining style classes within the HTML and then applying the style to matching HTML tags within the class.

For example a table row can be created in HTML with "Error" class like:

<tr class="Error"><td>{Error}</td></tr>

and the style can be defined for all table cells within that row, for example:

.Error td {color: red}

This would cause the text displayed in the "Error cells" to be shown in red color.

CodeCharge Studio also utilizes themes, which are similar to styles but in a more specialized format. They are no longer supported by CodeCharge Studio 3.0 but included for compatibility with previous product versions.

CodeCharge Studio includes several predefined styles, plus a powerful Style Builder that allows developers to visually create and customize styles during the application development process, or for future use. Internally each Style is implemented as a standard cascading stylesheet file with the extension .css, plus accompanying images.

A style can be applied to a whole page or to individual components such as grid, record, calendar, etc. However, it is recommended to use only one style per page to simplify the HTML and assure cross-browser compatibility. A style can also be applied to a whole project, in which case styles assigned to all pages within the project will be replaced with the newly select style. A default style for the project can also be specified in project settings, in which case the style will be applied automatically to newly created pages.

Styles are stored in the "Styles" sub-folder of CCS project and are published to Web server in the same way. The "Styles" folder is further divided into folders named the same way as each style, for example "Styles\SandBeach", which include the corresponding .css (cascading stylesheet files) and additional sub-folders with images. Graphical images are stored in "Images" sub-folder, for example "Styles\SandBeach\Images", while images containing text are stored in subfolder named the same as the languauge code, for example "Styles\SandBeach\Images\en" for English.

CodeCharge Studio also supports dynamic styles denoted as "(Dynamic)" in the style selection dialogs . By assigning this style to a page or component you will be able to dynamically assign a specific style at run-time. When assigning dynamic styles to a component or page CCS repalces the style name within HTML with the text {CCS_Style}, for example:

<link href="Themes/{CCS_Style}/Style.css" type="text/css" rel="stylesheet"> 
<img src="Styles/{CCS_Style}/Images/Spacer.gif">

User Interface

Style Selection

Many CodeCharge Studio builders include a style selection step. To apply a style simply select it from the list of available styles. At the same time you may use the "Apply to" option to specify if you want to apply the style to the whole page or only only the component that you're creating. Alternatively, click the "Style Builder..." button to open the Style Builder and modify the selected style.

The selected style will also be set as the default project style if no default style was specified yet.

Note that the list of available styles contains three special styles named "(No Style)", "(Dynamic)", and "Basic". Their purpose is as follows:

Style Description

(No Style) No style will be applied and a simplified HTML will be created without a possibility for applying a style in the future. Selecting this option only if you're certain that you will not need to use a style on this page now and in the future.

(Dynamic) A temporary default style will be applied with specially formatted HTML that allows a different style to be selected at run-time by Web application users.
Note: the (Dynamic) style can only be applied to the whole page, not to individual components.

Basic A simplified, basic style that can be selected when no style is needed, with the possibility to changing it to a different style in the future. This option is similar to "(No Style)" with the main difference being that the HTML will be formatted in the same way as if using a style, which makes it possible to specify a different style later.

Style	Description
(No Style)	No style will be applied and a simplified HTML will be created without a possibility for applying a style in the future. Selecting this option only if you're certain that you will not need to use a style on this page now and in the future.
(Dynamic)	A temporary default style will be applied with specially formatted HTML that allows a different style to be selected at run-time by Web application users. Note: the (Dynamic) style can only be applied to the whole page, not to individual components.
Basic	A simplified, basic style that can be selected when no style is needed, with the possibility to changing it to a different style in the future. This option is similar to "(No Style)" with the main difference being that the HTML will be formatted in the same way as if using a style, which makes it possible to specify a different style later.

A style selection for a page or component can be changed at a later time by right-clicking on a page or component and selecting the "Change style..." option. A similar dialog to the above will be shown where you can specify a different style for the page or component.

Global Style Selection

A style can be assigned globally to an existing project by selecting Project -> Change Style... from the menu bar.

Managing Project Styles and Settings

Every time you apply a style to a page or component it is added into the list of project styles. The list of styles and related settings can be managed by selecting Project -> Settings -> Styles from the menu bar.

The list of project style serves several purposes, such as:

review all styles used within the project
quickly access and modify each of the styles used within the project
specify default style for the project
specify styles available via the dynamic style assignment feature

Following is the list of available features:

Feature Description

Project Styles The list of styles assigned to the project. Listed styles will be published to the Web server and available for both static and dynamic use.

Add Add a new style to the style list, so that it can be published to the server with the project and available to end user. Styles are added into the project automatically when first used, however, this option is especially useful when utilizing dynamic styles.

Replace Replace selected style with another. All pages within the project will be searched for the selected style and the new style selection will be applied.

Style Builder Launch Style Builder to modify the selected style or create a new one.

Remove Remove selected style. This option is disabled when the default style is selected.

Set default Set the default style to be the default style for the project. The default style is applied automatically to newly created pages.

Rebuild Rebuild cascading style files (.css) and corresponding images. This option can be useful, for example, after modifying a style or adding a new language.

Refresh List Refresh the list of project styles in use by the project.

Modify styles dynamically Enable the dynamic style selection feature. When set, the builders will display the "(Dynamic)" style as one of the available style selections.

Advanced Specify additional dynamic style selection options, which define the method of selecting dynamic style on the server.

Use Styles/Themes Specify whether you want to use both the styles and themes within your project. Themes are deprecated and provided for backward compatibility with CodeCharge Studio 2.x projects. It is recommended that this option is set to "Styles" for new projects created with CodeCharge Studio 3.0 for clarity. If Themes or Styles and Themes option is selected then themes will be shown in the style selection dialog, usually shown as the last step of component builders.

Feature	Description
Project Styles	The list of styles assigned to the project. Listed styles will be published to the Web server and available for both static and dynamic use.
Add	Add a new style to the style list, so that it can be published to the server with the project and available to end user. Styles are added into the project automatically when first used, however, this option is especially useful when utilizing dynamic styles.
Replace	Replace selected style with another. All pages within the project will be searched for the selected style and the new style selection will be applied.
Style Builder	Launch Style Builder to modify the selected style or create a new one.
Remove	Remove selected style. This option is disabled when the default style is selected.
Set default	Set the default style to be the default style for the project. The default style is applied automatically to newly created pages.
Rebuild	Rebuild cascading style files (.css) and corresponding images. This option can be useful, for example, after modifying a style or adding a new language.
Refresh List	Refresh the list of project styles in use by the project.
Modify styles dynamically	Enable the dynamic style selection feature. When set, the builders will display the "(Dynamic)" style as one of the available style selections.
Advanced	Specify additional dynamic style selection options, which define the method of selecting dynamic style on the server.
Use Styles/Themes	Specify whether you want to use both the styles and themes within your project. Themes are deprecated and provided for backward compatibility with CodeCharge Studio 2.x projects. It is recommended that this option is set to "Styles" for new projects created with CodeCharge Studio 3.0 for clarity. If Themes or Styles and Themes option is selected then themes will be shown in the style selection dialog, usually shown as the last step of component builders.

Style Builder

The Style Builder is a utility included with CodeCharge Studio and used for creating and modifying styles visually. It can be accessed from several areas of CCS, for example from style selection steps in component builders, from project style settings, and from the menu bar option Tools -> Styles.

The Style Builder consists of 3 panels: options, value selection, and preview area. The preview area shows a sample HTML page preview based on the currently selected style options. You use the Style Builder by clicking on an options, such as Color Scheme, and choosing one of the available selections.

The following is the list of available options:

Option Description

Color Scheme Set of colors to be used by the style. Click "Modify..." to specify individual colors for each style class.

Gradation Color saturation and brightness.

Header Shape Shape of form headings.

Coloration Areas where to apply colors and color gradients/shadings.

Shading Type of color gradients/shadings to apply.

Border Border type and thickness to apply to form cells.

Button Shape Shape of form buttons, such as Previous, Next, Last, Submit, Cancel, etc.

Button Effect Effects to be applied to buttons, such as gradient, border, color shade.

Button Arrow Type of arrow icons to assign to navigation buttons, such as First, Previous, Next, Last.

Font Scheme Set of fonts to be used by the style. Click "Modify..." to specify individual font atributes for each style class item.

Background Page background type.

Padding Padding/spacing between form cells.

Option	Description
Color Scheme	Set of colors to be used by the style. Click "Modify..." to specify individual colors for each style class.
Gradation	Color saturation and brightness.
Header Shape	Shape of form headings.
Coloration	Areas where to apply colors and color gradients/shadings.
Shading	Type of color gradients/shadings to apply.
Border	Border type and thickness to apply to form cells.
Button Shape	Shape of form buttons, such as Previous, Next, Last, Submit, Cancel, etc.
Button Effect	Effects to be applied to buttons, such as gradient, border, color shade.
Button Arrow	Type of arrow icons to assign to navigation buttons, such as First, Previous, Next, Last.
Font Scheme	Set of fonts to be used by the style. Click "Modify..." to specify individual font atributes for each style class item.
Background	Page background type.
Padding	Padding/spacing between form cells.

Additionally, Style Builder provides "Build Random Style" button, which you can use to create random styles by applying random values to the above settings.

Applying styles dynamically at run-time

You may want to provide functionality within your Web application to allow your Web visitors to change the style in which your Website is being displayed. CodeCharge Studio can help you support such functionality by allowing you to assign the dynamic style to your Web pages, and later allowing a style to be set at run-time by a URL parameter, session or cookie. To enable this functionality, first set the "Modify styles dynamically" option in your project's style settings. Next to it, you can click the "Advanced..." button where you can specify the method to be used to select styles at run-time. The following options are available:

Option Description

Query String parameter Select this option if you would like styles to be selected via a URL (Query String) parameter .

Parameter name The name of the URL parameter to be used for selecting styles. The default is "style".

Session variable Select this option if you like styles to be selected via a session variable. If the "Query String parameter" option is also checked then the session variable will be set automatically when a style is selected via URL parameter.

Session variable name The name of the session variable to be used for selecting styles. The default is "style".

Cookie Select this option if you like styles to be selected via a cookie. If the "Query String parameter" or "Session variable" options are also checked then the cookie will be created and set automatically when a style is selected via URL parameter or session variable.

Cookie name The name of the cookie to be used for selecting styles. The default is "style".

Expiring in The validity of the cookie in days.

Option	Description
Query String parameter	Select this option if you would like styles to be selected via a URL (Query String) parameter .
Parameter name	The name of the URL parameter to be used for selecting styles. The default is "style".
Session variable	Select this option if you like styles to be selected via a session variable. If the "Query String parameter" option is also checked then the session variable will be set automatically when a style is selected via URL parameter.
Session variable name	The name of the session variable to be used for selecting styles. The default is "style".
Cookie	Select this option if you like styles to be selected via a cookie. If the "Query String parameter" or "Session variable" options are also checked then the cookie will be created and set automatically when a style is selected via URL parameter or session variable.
Cookie name	The name of the cookie to be used for selecting styles. The default is "style".
Expiring in	The validity of the cookie in days.

Sample steps to test the dynamic style functionality are as follows:

Go to Project Settings -> Styles, and click Add... to add and copy several different styles into your project.
Set one of the styles to be the default using Default button.
Enable the Use Dynamic Styles option
Create a page that uses Dynamic style.
Press F9 to generate the application and publish the files, including new styles.

View your live page and append style=StyleName to the URL.

For example:

http://localhost/NewProject1/NewPage1.php?style=School
http://localhost/NewProject1/NewPage1.php?style=Modern
http://localhost/NewProject1/NewPage1.php?style=Simple
http://localhost/NewProject1/NewPage1.php?style=Innovation

Once a style is specified by a user via URL it will be automatically saved in a session variable or cookie, if you enable them. This allows Web visitors to come back to your site and see the last applied style, as long as the session or cookie has not expired.

To provide users with a visual way to chose a style, implement a set of a links or a listbox that will redirect users back to your site with the style specified in the URL, as shown in above examples.