Creating templates

This guide is designed to provide information on how to develop templates for your ReFlex CMS websites. ReFlex CMS uses the standard ASP.NET MasterPage classes, using the derived base class ReFlex.Web.UI.MasterPage. The ReFlex.Web.UI.Master class contains a few additional methods that ReFlex CMS uses to identify the template to Employees.

This provides many benefits:

• ASP.NET developers will already be familiar with how Master Pages work
• The templates created will also work with physical .aspx pages
• Template code is compiler supported to reduce debugging requirements

Templates are stored in the folder defined for the Web.Config appSettings/ReFlexTemplatePath setting. The default is ~/Site/Templates/.

1. Create the MasterPage

To create a template:

1. Through Visual Studio, add a new MasterPage to the templates folder
2. Open the code behind and change the base class to ReFlex.Web.UI.MasterPage
3. Override the GetName method and return the name that you want to appear in the ReFlex Console Template drop down lists identifying the template
4. Override the GetDescription method and return a description of the template
5. Add the ReFlex Console as the last control before the closing form tag in your new MasterPage (e.g. <ReFlex:AdminConsole ID="acAdminConsole" runat="server" />)

2. Referencing CSS and JavaScript files

As the template will be used virtually by ReFlex CMS, and from many different paths using url rewriting, ASP.NET does not adjust the paths correctly. External files therefore must be referenced through the code behind. The ReFlex.Web.UI.Templating class has been provided to accelerate this task, and should be used in conjunction with the ReFlex.Web.App class when referencing paths.

Use the Templating.RegisterHtmlLink and Templating.RegisterScriptInclude methods to register your CSS and JavaScript files in Page_Init.

The App class contains a Path that returns the root of the website (e.g. ~/, or ~/myapppath/ etc). Paths should be passed to the Templating methods as App.Path + "pathtofile" (e.g. App.Path + "Site/Resources/css/layout.css").

3. Images and HyperLinks

If you need to include Image and HyperLink controls in your template, use the TemplatedImage and TemplatedHyperLink controls found in the ReFlex.Web.UI.WebControls namespace, and use full virtual paths to your resources (e.g ~/Site/Resources/images/myimage.gif). These controls use the App.Path property mentioned above to ensure that paths to your resources are correct regardless of where the template is used.

4. Adding ReFlex CMS content controls

Now for the important part, defining which parts of the template users are able to edit. Add appropriate ReFlex CMS content controls at the locations required, and define the Behaviour property for each control - either "Page" or "Constant".

"Constant" controls retain the same content across multiple pages that use the template. If the content is changed, the change is reflected through every page that uses the template.

The contents of "Page" controls must be defined for each page using the template.

If switching a control between "Constant" and "Page" behaviours, change the ID of the control to something different to avoid any problems.

5. Sharing elements with other templates

To reduce on repetition, use UserControls for markup that is repeated between templates. These can also contain ReFlex CMS content controls. We store common elements as UserControls in a ~/Site/Resources/Templates/Common folder to keep site layout neat and consistent.

6. Start using the template

If your template compiles, it will appear in the Template drop down lists found in the ReFlex Console Details tab, and Pages tab > Create a new Page function.

You can use the template for physical pages (i.e. actual .aspx pages, as opposed to the virtual pages created by ReFlex CMS) in the same way you would normally. Please refer to the Creating physical pages guide provided in this section of the developer centre.