Creating a PageBuilder Wireframe

You first create a wireframe. Next, define the dropzone, one or more areas of the page on which a content creator drags and drops widgets. The relationship between a wireframe, a dropzone, and a widget is illustrated below.

To create a wireframe that contains one dropzone:

1. Open the Web site in Visual Studio.
2. Choose Web Site > Add New Item to add a new Web form to the site.
   

   

3. Select Web Form.
4. Set the Name to PageLayout.aspx, the Language to Visual C#, and check Select master page.
   

   

5. Click Add, then change to Source view.
6. Register the user controls directly below the @Page directive (at the top of the file).

   <%@ Register Assembly="Ektron.Cms.Controls" Namespace="Ektron.Cms.Controls" TagPrefix="CMS" %>
   <%@ Register Src="~/Workarea/PageBuilder/PageControls/PageHost.ascx" TagPrefix="PH" TagName="PageHost" %>
   <%@ Register Src="~/Workarea/PageBuilder/PageControls/DropZone.ascx" TagPrefix="DZ" TagName="DropZone" %>
   <%@ Register Assembly="Ektron.Cms.Widget" Namespace="Ektron.Cms.PageBuilder" TagPrefix="PB" %>			

7. Add code for a PageBuilder Menu (PageHost) and Dropzone. To do this, locate the ContentPlaceHolder1 and enter this code.

   WARNING! When inserting the following code, begin the <ColumnDefinitions> statements with the prefix on the widget assembly registration line (PB in the example above). Do not use IntelliSense when entering <ColumnDefinitions> statements—it may insert an incorrect prefix.

   <PH:PageHost ID="PageHost1" runat="server" DefaultPageID="937" SelTaxonomyID="94" />  
   <DZ:DropZone ID="Middle" runat="server" AllowAddColumn="false" AllowColumnResize="false">
     <ColumnDefinitions>        
       <PB:ColumnData width="100" columnID="0" unit="pixels"> </PB:ColumnData>       
       <PB:ColumnData width="100" columnID="1" unit="pixels"> </PB:ColumnData>
       <PB:ColumnData width="100" columnID="2" unit="pixels"> </PB:ColumnData>
     </ColumnDefinitions>
   </DZ:DropZone>			

   With the PageBuilder menu (PageHost) and Dropzone in place, the template looks like this when you are logged in and ready to configure a PageBuilder page.

   

   

   This control lets a content author drop widgets on the page. It also provides the save/check in/publish functions, and lets the author preview how the page will look when it's published. The content author uses a Dropzone control as a placeholder, into which you insert widgets. You also can use it to insert additional placeholders as needed.

   NOTE: See Advanced PageBuilder Tasks for information on customizing user controls.

   The pagelayout.aspx code now looks like this.

   

   

   NOTE: Add only one dropzone now. Add more later.

   Best Practice  Set values for the FolderID and SelTaxonomyID properties. See Assigning a Default Page to a Wireframe and Assigning a Default Taxonomy Category to a Wireframe.

8. Open the code-behind page, PageLayout.aspx.cs.
9. Add a reference to the PageBuilder namespace by adding the following line after the last using statement.

   using Ektron.Cms.PageBuilder.

10. Inherit the PageBuilder class instead of System.Web.UI.Page. To do this, change: 

    public partial classPageLayout : System.Web.UI.Page

    To:

    public partial classPageLayout : PageBuilder

11. Add the following code after the Page_Load event to handle errors and notifications.

    NOTE: You can copy the following code from siteroot/cms400developer/developer/pagebuilder/pagelayout.aspx.cs.

    public override void Error(string message)
    {
      jsAlert(message);
    }
    public override void Notify(string message)
    {
      jsAlert(message);
    }
    public void jsAlert(string message)
    {
      Literal lit = new Literal();
      lit.Text = "<script type=\"\" language=\"\">{0}</script>";
      lit.Text = string.Format(lit.Text, "alert('" + message + "');"); 
      Form.Controls.Add(lit);
    }

    You do not need to use the jsAlert system defined here, but if you do not you must add overrides to handle errors and notifications.

    The code page for pagelayout.aspx.cs looks like this.

    

    

12. Save the PageLayout.aspx and PageLayout.aspx.cs files.

Enabling Manual Aliasing

Best Practice  Enable Manual and Auto aliasing.

Make sure that manual aliasing is enabled within Ektron. Doing this lets you apply a user-friendly URL when you are creating a PageBuilder page.

NOTE: See “URL Aliasing for more information.

To enable manual aliasing:

1. In the Ektron Workarea, choose Settings > Configuration > URL Aliasing > Settings.
2. Click Edit.
3. Check the Manual box and click Save.
   

   

Adding the Wireframe and Widgets into Ektron

The Ektron administrator uses the wireframe that developers made available in the Workarea. The administrator also determines which widgets will be available on this wireframe.

1. In the Workarea, choose Settings > Configuration > Template Configuration.
2. Click Add New Template to System. The Add a New Template screen appears.
   

   

3. Click and navigate to PageLayout.aspx, the wireframe you created earlier in Creating a PageBuilder Wireframe.
4. Click the PageBuilder Wireframe check box, which tells Ektron that this template can be used to create a PageBuilder page. Widgets that can be applied to the template appear. Ektron provides many standard widgets. See Widget Reference
   

   

5. Click the ContentBlock and List Summary widgets. The background color changes.
6. Click Add New Template to System.

Assigning the PageBuilder Wireframe to a Folder

Create a folder for the content that appears on the new page by performing these steps.

1. Click Content in the Ektron Workarea. The folders appear in the left panel.
2. Click the Root folder.
3. In the View contents panel, choose New > Folder.
   

   

   NOTE: You should keep content and PageBuilder pages in separate folders, so you can later create and configure a folder called “Content.” The content folder will contain content blocks and other assets, and sub-folders.

4. Access the folder properties for the new folder.
5. In the Name field, type Pages.
6. Assign the template that you created earlier as the default (and only) template for this folder. This ensures that only PageBuilder pages can be created in this folder.
7. Click the Templates tab.
8. Uncheck the Inherit parent configuration option and click OK at the prompt.

   NOTE: For more information about folder inheritance, see Managing Folder Permissions.

   

   

9. Select PageLayout.aspx from the template list in the pulldown menu. This is the wireframe you created earlier.
10. Click Add () to the right of the pull-down menu. PageLayout.aspx is added to the list of page templates.
11. Delete CMSlogin.aspx from the list to ensure that no content is placed in the folder.
12. Select PageLayout.aspx (the default option, circled below) and click Add Folder.

Follow steps 3 through 6 to create a folder for content. However, instead of assigning pagelayout.aspx as the template, assign a template used to create Ektron content.

Creating the New PageBuilder Page

Create a PageBuilder page. For example, at AcmeBooks.com, there is a pressing need to market a new series of mystery novels from an up-and-coming Australian novelist. So, the Marketing team needs to quickly create a Web page to announce the new series. Here’s how they build the page with PageBuilder.

WARNING! When you edit PageBuilder pages in the Ektron Workarea via Internet Explorer, version 7 or higher is required.

1. Click the Pages folder, which you created in Assigning the PageBuilder Wireframe to a Folder.
2. Choose New > Page Layout.
   

   

   The Add New Page screen appears. (Because only one template is assigned to the folder, it appears as the default.)

   

   

3. Click Next. A new screen appears. This lets you assign a title, Taxonomy, and aliasing information to the page.
   

   

4. Enter New Australian Mystery Series in the Page Title field.
5. By default, the Manual Alias matches the Page Title. Change it to Australian_Mystery.

   By changing the Alias field, you give the new page a user-friendly name. For example, by default, the page’s name is www.acmebooks.com/new_mystery_series.aspx. The alias Australian_Mystery lets the page display as www.acmebooks.com/Australian_Mystery.

6. Click Next. The following screen appears, which lets you assign metadata and a summary to the page. See Also: Writing a Summary for Content; Working with Metadata
   

   

7. Click Finish. A confirmation dialog box appears. Click OK.

Placing Widgets on the Page

NOTE: For information about how to create a widget, see Creating the “Hello World” Widget.

After the page is created, a new page opens. It contains 1 dropzone, which consists of 2 columns. The top of the page contains a PageBuilder menu to perform actions on the page, such as check in, view properties, and drop widgets onto the page. To keep the menu open, click the pin icon ().

The following image shows the page with a 2-column layout.

• The left column is 35% wide and displays a list of all content in the Marketing folder. Web site visitors use the list to access all Marketing collateral.

The right column is 65% wide and displays a single content block.

Customizing the PageBuilder Menu Control

By default, when a site user creates a new PageBuilder page from an existing one, it is saved to the same Ektron folder. For example, consider this folder/content structure.

Root (folder id 0)
Products (folder id 20)
  PageLayout: “Omaha Mailorder Steaks” (content id 35)
Services (folder id 30)

If you are viewing content id 35 and click New Page or Copy/Save as, the new page is saved to that content’s folder (Products, folder id= 20).

NOTE: When you create a new page layout from the Workarea, you first select a folder then begin creating the page layout.

Use the PageBuilder control’s FolderID property to override the default and specify an Ektron folder to which new pages are saved. Here is an example of that property:

<ucPageBuilder:PageHost ID="ucPageHost1" FolderID="25" runat="server" />

When a user is working on a page that hosts this PageBuilder control, and he saves a new page, it is saved to folder id 25.

Use the CacheInterval property to cache a page and its Widgets that represent Ektron server controls, such as a Collection Widget.

This property sets the amount of time, in seconds, that data is cached. The default is 0 (zero).

<ucPageBuilder:PageHost ID="ucPageHost1" CacheInterval="25" runat="server" />

Customizing the Dropzone User Control

Several properties let you customize the dropzone user control’s behavior.

Assigning a Default Page to a Wireframe

You can assign a default page to a wireframe. If you do, and a site visitor enters a URL with a path to that wireframe that lacks a query string ID, the default page appears. The following example explains this feature.

• The following URL returns PageLayout ID 1036 in the PageBuilder folder:

  http://siteroot/cms400developer/developer/PageBuilder/PageLayout.aspx?pageid=1036

• The following URL returns the Page Layout page identified in the PageLayout.aspx file’s PageBuilder menu user control DefaultPageID property.

  http://siteroot/cms400developer/developer/PageBuilder/PageLayout.aspx

  (Note lack of query string parameter)

To assign a default page to a wireframe:

—Show how—

1. In the Ektron Workarea, create a PageBuilder page that will be used as the default pageid for a wireframe.
2. In Visual Studio, open the wireframe file assigned to that folder.
3. Find the PageBuilder menu user control (circled below).
   

   

4. Add a new property, DefaultPageID.
5. For the property’s value, enter the ID of the page you created in Step 1.

   Here is an example of that line with the DefaultPageID property added.

   <ucPageBuilder:PageHost ID="ucCms400Developer" DefaultPageID=”1035” runat="server" />

6. Save your changes.

   To continue the above example, if someone opens a browser and enters http://siteroot/cms400developer/developer/PageBuilder/PageLayout.aspx, he is redirected to

   http://sitroot/cms400developer/developer/PageBuilder/PageLayout.aspx?pageid=1035

Assigning a Default Taxonomy Category to a Wireframe

While creating a new PageBuilder page in the Ektron Workarea, the user can assign one or more of the taxonomy categories that are set in the page’s folder properties. See example below.

As a developer, you can assign a default taxonomy category to a wireframe. If you do, and the user creating a page using that wireframe makes no changes, the default category is assigned to the page. However, the user can change the taxonomy when the Add New Page screen appears.

NOTE: Default taxonomies are applied only when a user logs into a Web site and adds a new page -- they are not applied when creating new pages within the Workarea.

To assign a default taxonomy category to a wireframe:

To continue the above example, the next time someone creates a page based on that wireframe, taxonomy ID 13 will be the page’s default taxonomy category. If desired, the user can change it by navigating to the Taxonomy tab and assigning different or additional categories.