Creating Your First Arena Template – Part 30

So you’re probably sitting there a little miffed that I made you go download some complicated SDK and an even more complicated Visual Studio just to take a detour to Designville.  You’ve been holding back telling your friends and co-workers that you’d like to be referred to as a programmer since you haven’t yet actually programmed anything but man, you’re so close, right?  That’s right!  We’re now heading back into Visual Studio.

In the words of the infamous Detective Columbo, wait… there’s one more thing.  That placeholder we were working on had a name that I gave it without explanation.  plContentCell, or something like that.  What was up with that?  If you’ve used Arena’s web portal then you’re already familiar with what a Cell is.  For those who haven’t yet, a Cell is nothing more than a container that we put modules into.  Arena has a blue million modules but we’re going to focus on the Advanced Text HTML module for this demonstration.  The Text HTML module is just that.  A module that you put some good old-fashioned HTML into for display on your page.  The problem with using a module is that you’ve got to have a place to tell Arena to put it in.  In this case, our crazy template has a placeholder called “plContentCell” and we’re going to tell Arena to put that Text HTML module into the plContentCell.  That’s it, simple.

So now the moment you’ve been waiting for.  That bastion of complexity that mere mortals are utterly confounded by…. Visual Studio.  Let’s head back over there and jump back into the Templates folder.  Remember all those .ascx files that were in the Templates folder?  It’s time to add one of our own.  Let’s right click that SampleThree.ascx file and copy it.  Then let’s right click the Templates folder and select paste.  We’ve now got a file called “Copy of SampleThree.ascx” which we’re going to right click and rename to something cool…. something like…. “demo.ascx”.  Yeah, that’ll work for now.

Now we’ve got our first template, so let’s double click that to open it.  Once opened, it should look familiar to you.  It’s merely a copy of the SampleThree we looked at earlier.  Since this template is our template, let’s do something drastic.  Delete everything in the file except the top line that reads:

<%@ control language=”c#” inherits=”ArenaWeb.Templates.SampleThree, Arena” %>

You’ll notice that this remaining line has a reference to “SampleThree”.  We’ve already decided to call our template “Demo”, so let’s change that line so it reads like this now:

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”Demo.ascx.cs” Inherits=”ArenaWeb.Templates.Demo” %>

You’ll also note that we’re pointing it to a .cs file.  More on that later.

Let’s now go grab that HTML we working on in the last lesson and paste it into our template in the place where we just deleted the old code.  We should now have something that looks like this:

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”Demo.ascx.cs” Inherits=”ArenaWeb.Templates.Demo” %>
<div>
<asp:PlaceHolder ID=”plContentCell” Runat=”server”></asp:PlaceHolder>
</div>

Go to the top and click File -> Save.  We now have a completed front-end .ascx file.  Before you go run and add “software developer” to your resume, there’s one more thing we have to do.  If this was all that was required to be a developer, then everyone would be developer, no?  You’re now about to enter the true realm of the programmer.  The elusive “code-behind” file.  Hey, you’ve made it this far so don’t turn back yet.  You thought the first part would be hard and you came out in one piece.  Let’s tackle this one head on.

As of the last time I installed Arena’s SDK, it included the SampleThree.ascx file but did not include the “code-behind” file “SampleThree.ascx.cs”.  You can download this file here if you’re missing it.  Just unzip the file to your desktop, then go back to Visual Studio and right click the Templates folder and select “Add Existing File”.   Go to your desktop folder and select the SampleThree.ascx.cs file and Add it.  It will now appear in the Templates folder underneath SampleThree.ascx.  Since we’re working on a template we’ve called Demo.ascx, we need to make a copy of this SampleThree.ascx.cs file and paste it back into the Templates folder to get a copy of it.  Now rename the copy to Demo.ascx.cs just like we did for the .ascx file.

What we’ve now done is added all the necessary files that make up an Arena template.  All we need to do now is make a quick edit to the code-behind file to make it aware of the presence of our plContentCell and the circle will be complete.  Double-click the Demo.ascx.cs file and it will open.  Avert your eyes if you’ve got a weak stomach.  I warned you that THIS is the place where true developers reside.  It ain’t pretty.

Skin through the file down about 15 lines or so and look for the line that says:

public partial class SampleThree : PortalControl

We’re going to change that, obviously, because our template is called “Demo”.  You know what to do next.  Change it to:

public partial class Demo : PortalControl

A few lines below that, you should see something like:

public System.Web.UI.WebControls.PlaceHolder NavCell { get { return Nav; } }

You’re catching on fast!  That is correct that we only have one cell in our template and we’ve called it “plContentCell”, not NavCell or MainCell or any other iteration.  Let’s change that top line to this and just delete two or three other lines below that one referencing MainCell and the others:

public System.Web.UI.WebControls.PlaceHolder ContentCell { get { return plContentCell; } }

Go to the top and select File -> Save and break out your party hat people.  You just wrote your first Arena template! In the next lesson, we’ll dive into Arena and add the template to the Arena database and then apply it to a page and throw a module at it. Relax, the hard part is over and you came out no worse for wear.

Related posts:

1. Creating Your First Arena Template – Part 4
2. Creating Your First Arena Template – Part 1
3. Creating Your First Arena Template – Part 2
4. How to Build a Web Site Using Arena – Video
5. 4 Keys to Creating a Great Web Video