CodeCharge Studio



CodeCharge Studio styles are made from cascading style sheet (CSS) definition files (.css) and accompanying graphics.  Styles define fonts, colors, buttons, graphics, spacing and other layout formatting attributes.  CodeCharge Studio eliminates most of the detailed work and complexity involved in defining stylesheets.  In CodeCharge Studio, styles are a particular set of stylesheet rules that you can refer to by name and apply in one step to either a page or component.  CodeCharge Studio includes several predefined styles, plus a powerful Style Builder that allows developers to visually create new styles or modify existing ones.  Internally each Style is implemented as a standard cascading stylesheet file with the extension .css, plus accompanying images.

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

A style can be applied to a whole page or to individual components such as a grid, record, calendar, etc.  However, it is recommended that you 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 selected style. A default style for the project can also be specified in your project settings, in which case the style will be applied automatically to newly created pages.

Styles are stored in the "Styles" sub-folder of your web project and are published to the 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 the "Images" sub-folder, for example "Styles\SandBeach\Images", while images representing text (e.g. button text) are stored in a subfolder named the same as the language 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, CodeCharge Studio replaces the style name within the HTML with the text {CCS_Style}.  This is used as a tag that is replaced with the actual stylesheet when your web page is requested:

<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 if you want to apply the style to the whole page, or only the component that you're creating (e.g. record or grid form). 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 has been selected.

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.  If you do not apply a style, you cannot change this later (unless you re-edit with the builder).  Select this option only if you are certain that you do not need to use a style.

'No style' does not mean that there is NO styling applied to your code.  'No style' refers to a special and particular style, which includes a stylesheet, and icons which you can find in your project folder, however the CSS is missing most of the formatting rules as in the other styles.  You cannot change the style with the 'change style' option in the page context menu, but you can change the style later if you re-edit your form with the builder.
(Dynamic) A temporary style will be applied with specially formatted HTML that allows a different style to be selected at run-time by Web application users.

'Dynamic' refers to the way in which the HTML is generated.  Instead of referring to a particular style in the code, the code includes a tag variable that is replaced when the web page is requested (i.e. runtime).   This way the stylesheet included with the rendered page can be selected at run time (e.g. link rel="stylesheet" type="text/css" href="Styles/{CCS_Style}/Style_doctype.css"), as well as some elements of the forms (src="Styles/{CCS_Style}/Images/Asc.gif").

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 right now, but you may want to assign a style later.   This option is similar to "(No Style)" but the HTML will be formatted in the same way as if using a style, which makes it possible to specify a different style later (e.g. using the 'change style' menu choice in the context menu). 

As you can see in the dialog, you can select either a 'page', or 'component' type of styling to apply to the forms generated by the builder.  This refers to the HTML generated for the forms.  As mentioned above, if you select 'Page', the builder will generate a type of HTML that uses one stylesheet for the whole page.  When you select 'Page', you are also selecting, or changing the page stylesheet for the whole page, therefore, this could change how other forms appear on the page, if they also were created with the 'Page' type of styling.  If you select 'Component', the builder will generate a type of HTML that uses a stylesheet just for that particular form.  This only affects the code generated by the builder for this form, not any other code that exists for other forms on the page. 

After you run the builder, and the code has been generated on your page, you change the style selection by right clicking on the component or page in design mode, and selecting the "Change style..." option in the context menu.   You can specify a different style for the page or component depending on which object you select.  That is, if you select the page, you can change only the page style.  If you select a form (e.g. record form), you can change only the component style.  If the form was originally generated using the 'page' style', changing the style to 'component' will also generate new HTML for the form.    That is, you can change the HTML for a form from 'page' to 'component', but not 'component' to 'page'.  In design mode, you may not be able to visually see the difference in styling.  If you are not certain about the styling generated for the component (e.g. Grid), look at the HTML, and refer to this section, How Styles Apply to Your HTML Code.

As mentioned before, the 'Change style..." option is not available, if you specifically assigned '(No Style)' to the page or component (e.g. Grid).

How to use Designs and Styles in Your Projects

The dialog shown above for the builders (e.g. Grid builder), changes slightly if you have applied a 'Design' to your page.   See Using Artisteer Designs, and Using Master Pages for more details about using 'Designs' and 'Master Pages'. 

When you have a Design applied to your page, and you run the builder, you cannot apply a 'Page' style.  Your options in the builder are to either use the CSS (i.e. style) in your design to apply to all components, or use the Design for the page styling and then individually select a different 'Component' style for the form generated from the builder.  If you do not choose a specific 'Component' style, then the forms all use the styling defined in the Design.

Artisteer designs for CodeCharge Studio include their own stylesheet and related files (e.g. icons used by CodeCharge Studio components, such as the Grid form).  Because 'Page' style depends on generic HTML, which is the same type of method that Artisteer designs use, there may be conflicts between forms you have created with 'Page' style and any Artisteer design you have also applied to your page.  To prevent such conflicts, a new 'style' has been added to the dialog called 'Use styles from Design'.  This is not really a style, like the other styles you can select from.  When you select this option, the HTML for your forms is generated mostly in the same way as it would for 'Page' style, however the stylesheet used is from the design applied to your page, not any of the CodeCharge Studio styles in your project.

If you want your generated forms to have a particular styling, select 'component' style.  The builder will generate specific HTML code for your selected style, and there should not be any conflict with the style you selected and the design applied to your page.  This way you can have both the content of your web page styled with your applied design, and have your forms styled differently with one of the selected CodeCharge Studio styles.

You may notice that when you run the builder, the preview window shows how the design applied to your page looks for the page and the form.  If you have a default style selected in your project, the preview window will also show your forms in this style, as if you selected 'Component' style.  There is always a 'style' assigned by the builder to your form, so you should check this step, otherwise, the HTML generated by the builder may not be what you want.

If your page already has some generated forms before you apply a design, CodeCharge Studio will replace your stylesheet and HTML code with code that is compatible with the design.  Again, if your forms have 'component' styling, your layout, coloring, fonts, etc. are preserved.  But since you cannot have both a 'page' style, and a 'design' style on the same page, this code may change.  If you remove a design from your page, the styling reverts back to whatever it was before you applied the design.

Note, when you create a new project, the default style is 'basic'.  If you run one of the builders (e.g. grid) and select a new 'page' style, this will also change the default style.  Every time you create a new page afterwards, this will be the default style for the page.  When you create a new page, you may not notice that a stylesheet has been applied to the page because some CodeCharge Studio styles have a background definition and some do not.  Regardless, there may be situations where you do not want a stylesheet added to the page.  For example, CodeCharge Studio does not distinguish between template files and master pages in your design and other CodeCharge Studio pages.  So when you create a new template file or master page, a stylesheet will be added that you may not want, and may conflict with any CSS (e.g. other stylesheets) in your design.   To remove this, find and remove this link:

<link rel="stylesheet" type="text/css" href="Styles/Basic/Style_doctype.css">

Managing Project Styles and Settings

Every time you apply a style to a page or component it is added to the list of project styles. The list of styles and related settings can be managed in the project settings.

The style options can be used to: 

This is the available features in the project settings:

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 web server with your project.  Styles are added into the project automatically when first used, however, this option is especially useful when utilizing dynamic styles since you can add any number styles to your published project that you may want available to users.
Replace Replace the selected style with another style. All pages within the project will be searched for the selected style and the new style selection will be applied.
Style Builder Launch the Style Builder to modify the selected style or create a new one.
Remove Remove the selected style. This is not available if the default style is selected.
Set default Set the selected style to be the default style for the project. The default style is applied automatically to create new pages.
Rebuild Rebuild cascading stylesheet 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.  This may be necessary if you have applied or changed a style in your project but it doesn't appear in the list.
 Dynamically modify styles Select thisoption if you want to enable the 'dynamic assignment' feature.  By default, when this option is selected, the style can be applied using either an URL parameter (e.g. ?style=basic), or a session variable.
Advanced Specify additional dynamic style selection options, which define the method of assigning a style dynamically.
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 5 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 that are used to enhance the visual appearance of your page, such as forms, menus, buttons, etc. .  The style builder is a convenient way to create styles without writing complicated CSS. 

The builder can be accessed from several areas of CodeCharge Studio (e.g. from the style selection steps in the builders, or from project style settings).  The Style Builder window consists of 3 areas: options,  value selection, and preview area. The preview area shows a sample HTML page preview based on the currently selected style option. You click on an option, such as Color Scheme, choose one of the available selections, and the preview pane shows the results.

The following is the list of available options:

Option Description
Color Scheme Set of colors to be used by the style.  You can double click on one of the color schemes, or select the 'Modify' button to further modify and refine how the color scheme is applied to your page.  For example, in the color scheme editor, you can change the foreground and background colors for the captions on your forms by changing the colors for 'Header' and 'Header Text'.
Saturation Color saturation and brightness.
Table All forms are created with HTML tables.  This option lets you change the shape, size, and other visual options. 
Button Visual aspects of buttons.
Menu Visual aspects of menus.
Other Text font scheme used and page background pattern.

Additionally, Style Builder provides "Build Random Style" button, which you can use to create random styles by applying random values to the above settings. This can be useful to generate alternative style patterns that you may not have considered.

Applying styles dynamically at run-time

You may want to provide functionality within your web site to allow your visitors to change the style in which your web site appears. CodeCharge Studio can help you support such functionality by allowing you to assign the dynamic style to your web pages, using either an URL parameter, a session variable, or a cookie to define the style.   To enable this functionality, first set the  "dynamically modify styles" option in your project settings, and use the "Advanced..." button to 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 style to be selected via an URL (Query String) parameter . (e.g. ?style=basic)
Parameter name The name of the URL parameter to be used for selecting a style. The default is "style".
Session variable Select this option if you would like the style to be selected via a session variable. If the "Query String parameter" option is also checked then the session variable will be automatically set when a style parameter is suppliedin the URL.
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 would like the style 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 a style. The default is "style".
Expiring in The time duration that the cookie should live.

Sample steps to test the dynamic style assignment:

  1. Go to Project Settings -> Styles, and click Add... to add and copy several different styles into your project.
  2. Set one of the styles to be the default using the Default button.
  3. Enable the Use Dynamic Styles option
  4. Create a  page that uses Dynamic style.
  5. Press F9 to generate the application and publish the files, including the new stylesheet files.
  6. View  your live page and append style=StyleName to the URL.

    For example:


Once a style is specified by a user via an URL it will be saved automatically 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 (i.e. without the style parameter in the URL), 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 style parameter specified in the URL, as shown in above examples.

How Styles Apply to Your HTML Code

A particular 'style' created by CodeCharge Studio consists of two main parts.  One part is the CSS stylesheet, images, and related files that define the 'style'.  The other part is the generated HTML for the components (e.g. Grid) which the 'style' applies to.   In CodeCharge Studio, a 'page' type style means that the CSS formatting rules apply to all the components (e.g. forms) on the page, while a 'component' style only applies to a particular component.   The best way to understand this is by looking at an example. 

The following are two snippets of code that describe the Grid caption using the 'Cozy' style. 

Page Style:

<table class="Grid" cellspacing="0" cellpadding="0">
<tr class="Caption">
<th scope="col">
<!-- BEGIN Sorter Sorter_country_id --><span class="Sorter"><a href="{Sort_URL}" id="countriesSorter_country_id">Id</a>
<!-- BEGIN Asc_On --><img alt="Ascending" src="Styles/Cozy/Images/Asc.gif"><!-- END Asc_On -->
<!-- BEGIN Desc_On --><img alt="Descending" src="Styles/Cozy/Images/Desc.gif"><!-- END Desc_On -->
</span><!-- END Sorter Sorter_country_id --></th>

Component Style:

      <table class="GridCozy" cellspacing="0" cellpadding="0">
<tr class="CaptionCozy"> <th scope="col"> <!-- BEGIN Sorter Sorter_country_id --><span class="Sorter"><a href="{Sort_URL}" id="countriesSorter_country_id">Id</a> <!-- BEGIN Asc_On --><img alt="Ascending" src="Styles/Cozy/Images/Asc.gif"><!-- END Asc_On --> <!-- BEGIN Desc_On --><img alt="Descending" src="Styles/Cozy/Images/Desc.gif"><!-- END Desc_On -->
</span><!-- END Sorter Sorter_country_id --></th>

Visually, on the rendered web page, the 'page' style and the 'component' style may look the exactly the same.  To tell what type of styling is applied to a form, you will have to look at the code in HTML mode.   In the example above, the 'page' style for the grid form contains specific references to icons in the style (same as 'component'), but the HTML code does not refer to the style by name.  For example, forms (e.g. Grid) are described as HTML tables, so the generic 'page' stylesheet defines rules for all HTML tables, or rules related to named elements (e.g. class="Row", class="Caption" etc.).   With 'component' style, the HTML for the Grid is the same but now special attributes have been added to the HTML so the stylesheet can target this particular form.  The elements of the table describing the form are named by stylesheet (e.g. class="GridCozy").  

Using Styles with Form Templates

Different rules apply to the builders when you are using a form template.  Normally, when you run one of the builders, you can assign a 'Page' or 'Component' style to the page or form.  Which type of Style you choose affects the HTML generated for the form. 

When you select 'Page' style, the HTML generated is the same as any other form created with the 'Page' style.  This way, you can change the style for more than one form at a time on the page since they share the same HTML code.  When you choose a 'Component' style, the HTML generated is specific to that particular style and form.  If you later change the 'Page' style, it does not affect any forms created with the 'Component' style.  You can change the 'Component' style for a form, but the change only affects that form, not any other forms on the page, even if they share the same style.

When you use a form template, the rules change since the HTML code is not generated entirely by the builder.   Refer to Using Form Templates for more information.

If you have a Design applied to the page, you cannot assign a style in the builder, either 'Page' or 'Component' style.   This is because the HTML generated for your form is based on the template you supply, therefore it does not contain the code that maps to the CSS rules in the stylesheet.  Also, to prevent conflicts between the styles defined in your design and the styles defined in one of the CodeCharge Studio styles, you are not allowed to select a different 'Page' style.  Similarly, if you do not have a Design applied to the page, you can change the 'Page' style but not the 'Component' style since the component style depends on generating specific HTML code for the form that makes it unique to that style.   The CSS rules in your stylesheet only work so far as the rules in the stylesheet refer to elements or attributes of the code in the template, which is something you defined when you created the template.   If you want your forms to appear correctly, your template code should be consistent  with however way you intend to style your pages. 

See also

On-line, printable versions and updates