CodeCharge Studio

Using Artisteer Designs

Designs are master pages created with the Artisteer web designer that you can apply to web pages in your project. CodeCharge Studio is installed with a number of built-in designs you can use, but you can also create and add new designs with Artisteer. See www.artisteer.com for more details about creating designs you can add to your projects. For more details about master pages, please refer to Using Master Pages.

Adding Designs to your Project

Before you can use a design, you must add the design to your project. There are several ways you can add designs.

Copy one or more of the built-in design folders (e.g BlueSkies) from the installation folder (under 'Designs') to your project folder. The designs must be copied to a folder called 'Designs', unless you change your project settings (Changing the Designs Folder). If you have created a custom design with Artisteer, copy your Artisteer created design folder to your project.
Add a built-in design from the ribbon bar. Select the Home tab and the Designs button (Project group) on the ribbon bar. Click on the '+' icon, and then select one of the built-in designs. CodeCharge Studio will copy the built-in design to your project folder.
Select one of your pages in the Project Explorer pane, then right click on the page in Design mode and select 'Apply Design to this Page' from the context menu. If your project does not currently have any designs, CodeCharge Studio will copy and apply the first design found in the installation folder and add it to your project, otherwise it will apply the currently selected default design.

Note, when you add a design, you may need to refresh the folder tree in the Project Explorer before your changes are visible. To refresh the folder tree, right click on the project name in the folder tree and select the Refresh option.

If there are other designs you want to add to your project, or remove from your project, select the Designs button again on the ribbor bar and then the 'Settings...' option. This will open the design options in your project settings. From your project settings, you can add or remove designs to your project, and set the default design. The default design is what gets applied to your web pages when you select the 'Apply design to this page' option from the context menu in Design mode.

You can also select a design when you run the Application Builder. The builder will list all of the built-in designs installed with CodeCharge Studio. When you select one of the designs from the list, the design is copied to your project and applied to the pages created with the builder.

Applying a Design to a Web Page

Once you have some designs in your project, you can apply, or change a design to your web page in several ways.

When you create a new page, the new page dialog has an option to apply a design when the page is created. Selecting this option applies the currently selected default design to the new page. Note, it is not necessary to have any designs in your project to apply this option. If no designs have been added yet, CodeCharge Studio will copy the first built-in design found in your installation folder (under 'Designs').
To apply a design to an existing page, first open the page from the Project Explorer. Click on the Home tab and then the 'Designs' button (Project group) on the ribbon bar, then select the design you want applied. If a design has not already been applied to this page, you will need to select the Designs button again and select the 'Apply design to this page' option. Otherwise, if a design is already assigned to this page, simply change the selected default design.
The 'Apply design to this page' option is also an available selection in the context menu in Design, or HTML mode. Selecting this option applies the currently selected default design to the page. Clicking on one of the designs displayed under the Designs button on the ribbon bar changes the default design.
You can also apply a design manually by modifying the 'Master Page' property for a Page component. If you want to apply a design directly,click on the ellipsis (...) next to the Master Page property, then find and select the master page corresponding to the design you want to apply.

Do not apply a design this way if you already have applied a design using one of the other methods (e.g. from the Designs icon on the ribbon bar). Before changing the design, remove the previous design first, otherwise your page content may be corrupted.

When you apply a design directly with the 'Master Page' property, the 'Add design to this page', and 'Remove design from this page' options are not available. These options are only available when you let CodeCharge Studio modify the component properties. To remove a design that you have applied directly, delete the 'Master Page' property by setting the property value to all blanks.

Changing the Design Applied to a Web Page

If you select Preview mode for your page, CodeCharge Studio will show you how the design will affect your page. You can view the effect other designs will have by selecting the Designs button on the ribbon bar and hovering the cursor over different designs. Once you have found a design you want to use, simply click on the design to make it the default and CodeCharge Studio will apply the design to the page. Note, this will not work unless you have a design applied to the page and you are using the {CCS_PathToMasterPage} variable to specify the location of the master page for the design (Using Master Pages, Using the CCS_PathToMasterPage Variable )

Remove a Design Applied to a Web Page

You can remove a design from a web page in two ways:

Select the Designs button on the ribbon bar and then select the 'Remove design from this page' option.
In Design or HTML mode, right click on the page, and select the 'Remove design from this page' option from the context menu.

You can remove designs from your project in your project settings, but you cannot remove the default design since some of your pages may be using this design.

Changing the Designs folder

Typically the files for your designs are placed in a folder called 'Designs', however you can select a different folder in your project settings. Select Home | Settings on the ribbon bar, then the Designs tab.

Applying designs dynamically at run-time

The designs in your project can be selected dynamically when users request your web pages. Like CodeCharge Studio styles, you have several options you can configure that determine how a specific design is requested. These options are configured in your project settings. Note, for dynamic selection to work correctly, the designs in your project,specifically the 'designs' folder, must be published entirely with your project.

Option	Description
Designs folder	This is the name of the folder in your project where the designs can be found. Note, this folder must be published with your project otherwise the design selection will fail.
Query String parameter	Select this option if you would like the design to be selected via an URL (Query String) parameter. The name of the design is the same as the folder name where the design exists (e.g. ?design=blueskies)
Parameter name	The name of the URL parameter to be used for selecting a design. The default is "design".
Session variable	Select this option if you would like the design 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 design parameter is supplied in the URL. Otherwise, you will need to custom modify the code generated by CodeCharge Studio to set the session variable.
Session variable name	The name of the session variable to be used for selecting a design. The default is "design".
Cookie	Select this option if you would like the design 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 design is selected via an URL parameter or session variable. Otherwise, you will need to custom modify the code generated by CodeCharge Studio to set the cookie.
Cookie name	The name of the cookie to be used for selecting a design. The default is "design".
Expiring in	The time duration that the cookie should live.

Sample steps to test the dynamic design assignment:

Go to Project Settings -> Designs, and click Add... to add and copy several different designs into your project.
Set one of the designs to be the default using the Default button.
Press F9 to generate the application and publish the files, including the new designs.

View your live page and append design=DesignName to the URL.

For example:

http://localhost/NewProject1/NewPage1.php?design=BlueSkies
http://localhost/NewProject1/NewPage1.php?design=Business
http://localhost/NewProject1/NewPage1.php?design=Casual

Once a design is specified by a user via an URL parameter, 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 design (i.e. without resubmitting the design parameter in the URL), as long as the session or cookie has not expired.

Dynamic design selection only works so far as the designs are the same and consistent with your application. If you change any panels, or you change how the content on your web pages map to the placeholders in the master page, or templates, this may not work correctly.

Using the CCS_PathToMasterPage Variable

You may notice that when you apply a design, CodeCharge Studio updates the Master Page property for the selected page. The path to the master page is based on the internal CCS variable called CCS_PathToMasterPage. This variable reflects the currently selected default design. When you publish your website, this is the design that will be selected by default. Using this variable instead of a relative folder location serves several purposes.

You can dynamically assign a design using an URL parameter as described above.
You can change a design for several pages in your project at one time. When you change the default design in your project (by clicking on a different design from the ribbon bar), every page using 'CCS_PathToMasterPage' is updated to use that design. If you want your pages to have different designs applied, don't use this variable. Instead, specify the the relative folder location of the master page (e.g. Designs/BlueSkies/MasterPage.ccp). When you do this though, unlike the other pages that use the CCS_PathToMasterPage, changing the default design does not affect the page. If you want to later apply a different design to the page, you have to first remove the design, select the default design from the ribbon bar and then select 'Apply design to this page', then change the Master Page property again to a relative folder location without using the CCS_PathToMasterPage variable.
In Preview mode, you can move the cursor over all the designs in you project and see immediately how the design would look on your web page (Changing the Design Applied to a Web Page).
Note, using this variable and dynamic design selection implies that all of your published designs are consistent and include all the placeholders mapped to your web pages, otherwise you may get errors.

Using Stylesheets

When you run the Application Builder, you may notice that you can apply a design to a page, or a style, but not both. This is because the CSS coding in the design, or in the style may conflict with each other. To prevent problems, CodeCharge Studio only allows you to apply one or the other type of styling. However, this doesn't mean that you cannot later apply both a style and a design to your web page, however it is recommended that if you use styles, apply them to components only, not the whole page, and avoid setting a default style (except Basic) since all new pages will be created with this style. Refer to Working with Styles for more information about working with Styles and designs.

On-line, printable versions and updates