Using Ektron Building Block Server Controls

Ektron building block server controls provide the basic modular components used to construct a website with easy-to-use server controls. These controls allow your site to use themes, and complex coding is reduced.

Ektron building block server controls are based on jQuery, a commonly used open source library that makes Web development easy and the user interface engaging. See Also: www.jquery.com.

• Ektron extends jQuery functionality to easily integrate into .Net code and Ektron best practices. While simplifying the coding effort with server controls and reducing the code-behind work, it also provides basic functionality for the developer to build on simple components to quickly create highly functional Web pages. Input fields extend Microsoft WebControls and only expose properties that are useful to the designer. In many cases, user input can be limited to particular data types and value ranges.

IMPORTANT: The Ektron Developer Reference site contains documentation and examples of the Framework UI, Framework API, and templated controls.

Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API Framework API

How templated server controls work

How Templated Server Controls Work

Server controls that have a template property lets a developer do more with the UI components and styles without using extensive XSLTExtensible Stylesheet Language Transformations.

You can modify the user interface of server controls with markup inside the <ItemTemplate> element as shown in the following code.

<ServerControl [properties]>
	<ItemTemplate>example html markup and eval functions
		<p><%# Eval([Model Property]) %></p>
	</ItemTemplate>
</ServerControl>

In this example, ServerControl has a property called ItemTemplate. The ItemTemplate allows markup that describes UI components rendered in the browser.

All controls in the namespace EktronUI use their name in the outermost wrapper of the HTML. This provides an easy way to adjust margins and padding styles for specific controls. The naming convention for this class is ektron-ui-control. For example, when using the EktronUI: EktronDatePicker, you will see this html rendered to your browser.

<span id="ctl00_datepicker1_DatePicker_uxDatePicker" class="ektron-ui-datepicker">

An exception to this rule is EktronUI:Blueprint, which is a wrapper control.

For more information, see:

• ASP.NET Web Server Controls Templates
• How to: Create ASP.NET Web Control Templates Declaratively

Adding UI server controls into Visual Studio

Adding UI Server Controls into Visual Studio

1. Open your Ektron project in Microsoft Visual Studio 2010.
2. Open the Visual Studio Toolbox.
3. Add a tab and give it a name like EktronUI Controls.
4. Right click and select Choose Items....
5. Click Browse.
6. Choose siteroot/bin/Ektron.Cms.Framework.UI.Controls.EktronUI.dll
7. Click OK. The controls appear on the Toolbox tab.