PART 4
Creating the Edit control
Login to your DotNetNuke portal and add a new BTBRandomImage module to a page, you should end up with something like what I have here.
Couple of things I just want to point out, if you take a look at the drop down menu the edit icon is missing a text caption, also we are missing the import export options.
The edit text is a simple fix which we’ll cover in a second, I want to talk about the import export issue.
We have defined the interface required for this option but it just hasn’t happened. In fact I get this all the time, in order have this option displayed you need to implement this interface in the business control as well as the default user control.
When you first created the module definition the control is defined then we then define the user controls. However it would appear that the business controller is parsed as soon as defined which then sets the flag in the database for the import export option. However since at this time we don’t have the user control defined we don’t get the import/export option.
When we package the module we don’t get this problem, it just seems to only happen when we manual create a module definition.
For now I going to show you how to correct this in the database,
- Open the DesktopModules
- Find our module, then in the column called SupportedFeatures set the value 0 to be 1.
- Restart IIS to force a reload, from a command prompt type IISRESET then hit return.
Right lets get on with our module, DotNetNuke uses resource files to store localised strings, so open up BTBRandomImage.ascx.resx from your Visual Studio project. All the resource files are stored in App_LocalResources folder.
An important point to remember is that the name of each entry is case sensitive.
Add the name “AddContent.Action” with a value of “Edit Image List”, then hit save. If you refresh your browser the module on the page will now a have a caption for the edit action.
If you click the edit option you'll see the edit user control, at the moment we’ve not got much going on with this control.
- Open up BTBRandomImageEdit.ascx in Visual Studio.
- Switch over to look at the HTML view
- First I’m going to add a couple of register directives to the pages, this will allow us to use controls already created by the core team.
The Label control will show the standard edit labels like all the core modules. These labels have the help icon and localisation support.
The URL control will allow a user to select an image or upload a new image.
I’m going to add these two lines just under the <%@control%> element.
<%@ Register TagPrefix="Portal" TagName="URL"
Src = "~/controls/URLControl.ascx" %>
<%@ Register TagPrefix="dnn" TagName="Label"
Src = "~/controls/LabelControl.ascx" %>
- Next lets create a table and add some basic edit functionality
<table width="560" cellspacing="0" cellpadding="0">
<tr>
<td>
<dnn:label id="plURL" runat="server" controlname="ctlURL" suffix=":">
</dnn:label>
</td>
<td width="400">
<portal:url id="ctlURL" runat="server" width="300" showtabs="False"
showfiles="True" showUrls="True" urltype="F" showlog="False"
shownewwindow="False" showtrack="False" />
</td>
</tr>
<tr vAlign="top">
<td width="125">
<dnn:label id="plAlt" runat="server" suffix=":" controlname="txtAlt">
</dnn:label>
</td>
<td width="400">
<asp:textbox id="txtAlt" cssclass="NormalTextBox"
columns="50" runat="server" />
</td>
</tr>
</table>
Open the resource file (BTBRandomImageEdit.ascx.resx) for this control and add these four entries.
plURL.Text Add image to list
plURL.Help This will add the selected image to the existing list of images to pick from.
plAlt.Text Alternate Text
plAlt.Help Enter the text for the alt attribute of the image
Take a look now at the edit option in your DotNetNuke portal you should see we have only added a couple of lines to our control but already its starting to take shape.
I want to add a list box to show the existing images already stored for our module.
Here is the HTML I’m created for my list, you’ll see I’ve used another DNN control to display the help icon.
<p>
<table cellSpacing="0" cellPadding="0" width="560">
<tr>
<td colspan="3">
<asp:Label id="lblImages" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td width="350">
<asp:ListBox id="lstImages" runat="server" Rows="5" Width="350px">
</asp:ListBox>
</td>
<td valign="top">
<asp:ImageButton id="cmdDeleteImage" runat="server"
AlternateText="Delete Selected Image" ImageUrl="~/images/delete.gif">
</asp:ImageButton>
</td>
<td valign="top">
<dnn:helpbutton id="hbtnDeleteImageHelp" resourcekey="cmdDeleteImage"
runat="server" />
</dnn:helpbutton>
</td>
</tr>
</table>
</p>
I’ll need to add a register element at the top of my page for the HelpIcon and update my resource file with a help string.
<%@ Register TagPrefix="dnn" TagName="HelpButton"
Src = "~/controls/HelpButtonControl.ascx" %>
<< Previous Page Next Page >>