Chris Cant's developer blog

Using PHDCC CodeModule with javascript

2011-08-04T09:22:00.007+01:00

phdcc Director John Cant writes:

My use of DNN has become -

[a] Maintain any HTML in a text file / copy and paste it into the basic editor / convert to raw / save. (Online editors are too hard to use and keep slim)

[b] Put any functionality into a phdcc.CodeModule

Much valuable functionality - jquery-ui / google maps / facebook / janrain / plupload / galleria - is available as javascript libraries. To get them onto a DNN Page, I have created a template CodeModule as follows.

ASP.NET gives you limited control over where in the page javascript can be inserted - RegisterClientScriptBlock inserts somewhere near the top; RegisterStartupScript somewhere near the bottom. All I can say is - the template works on all browsers tested.

In this example, I load the jquery-ui library at the top, and daisy chain the DNN onload handler at the bottom. The javascript could of course be located in a separate file.

In the onload handler, I create an invisible empty jquery-ui dialog and initialise a jquery-ui accordion. I bind the submit button of a PHDCC form to a handler and examine one of the form fields to give feedback via the dialog.

I add the CodeModule somewhere out of the way on the page - the bottom pane is a good place. Once there, accordions and dialogs can be used anywhere on the page.

If you need any help with this or any of the suggested libraries, please get back to us.


<%@ Control Language="C#" ClassName="JCformWidgets" %>

<script runat="server">

//--------------------------------------
private void loadJS()
{
 string scriptKey = "JCjsIncludes:" + this.UniqueID;
 if( Page.IsStartupScriptRegistered( scriptKey) || Page.IsPostBack) return;

 ClientScriptManager cs = Page.ClientScript;
 Type cstype = this.GetType();

 // ----------------------------
 // load JS files at the top of the page
 // ----------------------------
 string scriptBlock = "\n";

 scriptBlock += "<link type='text/css' href='/jqui/jquery-ui-1.8.14.custom.css' rel='Stylesheet'>\n";
 scriptBlock += "<script src='/jqui/jquery-ui-1.8.14.custom.min.js' type='text/javascript'>";
 scriptBlock += "</";
 scriptBlock += "script>\n";  // avoid microsoft parsing bug

 cs.RegisterClientScriptBlock( cstype, scriptKey, scriptBlock);

 // ----------------------------
 // load onload handler etc. at the bottom of the page
 // ----------------------------
 string startupScript = 
  @"<script language='JavaScript'>
<!--

function JConload(){

 var oldOnLoad = window.onload;

 var myDialog = $('<div></div>').dialog( {autoOpen: false} );
   
 this.newOnload = function(){
  
  // call existing handler
  if(typeof oldOnLoad === 'function'){ 
   oldOnLoad();
  }

  // -------------------------------------

  $(function() {
   $( '#accordion' ).accordion();
  });
  
  // -------------------------------------

  $('#' + 'dnn_ctr422_ViewForm_btnSubmit').bind('click', function() {

   var theseSkills = $( '#' + 'dnn_ctr422_ViewForm_Group_157_400_Question_157_400_1563_form_157_text_1563').val();
   var thisDialogText = '';
 
   if( theseSkills.length <= 0) {
    thisDialogText = 'No skills given<br>Please try again.';

   myDialog.html( thisDialogText);
    myDialog.dialog( 'option', 'title', 'Things you forgot ...' );
  
    myDialog.dialog( 'open');
    return false;
   }
  });

  // -------------------------------------

 };

}

(function(){
 var JCOL = new JConload();
 window.onload = JCOL.newOnload;
}());

            // -->";

 startupScript += "</sc";
 startupScript += "ript>"; // avoid microsoft parsing bug

 cs.RegisterStartupScript( cstype, scriptKey, startupScript);
}

//--------------------------------------
protected void Page_Load(object sender, EventArgs e)
{
 loadJS();
}

</script>

Scheduled task ping for plesk in Windows

2011-05-12T11:17:00.000+01:00

I've been moving several domains to a Windows cloud hosting package at http://www.webhosting.uk.com/. I'm currently using Cloud Beginner hosting that gives 10 domains and a dedicated IP address for £12/month. This package lets us run DotNetNuke (DNN) sites - and fast too as there is not much contention on the included SQL Server databases. The cloud is UK based so the ping time is less from the UK and nearby.

The account is run using Windows plesk which lets you control most things. However intervention is often needed from the webhosting.uk.com staff. They are usually very responsive and competent on their Live Chat service. Typical requests include setting ASP.NET modify permissions for the Network Service user and setting Application Starting Points. You need to insist that you get the dedicated IP address if you've asked for it. Email is included using the Horde web client, which isn't great; perhaps using Google Apps for email might be the best solution. No web stats package is included. Nor are file or database backups.

For one domain, one task that I needed to do was to set up scheduled tasks to ping various URLs. While this could be done externally, I decided to use the Plesk scheduled task feature. When FTPing in, the main site is at /httpdocs/. The scheduled task VBS scripts should be placed in /cgi-bin/

Using a couple of resources on the Internet, I put together this script, called pingurls.vbs:

Call DoScheduledTask()

Sub DoScheduledTask()
 On Error Resume Next

 Const ForReading = 1

 Set objFSO = CreateObject("Scripting.FileSystemObject")
 Set objFile = objFSO.OpenTextFile("E:\inetpub\vhosts\mydomainname.com\cgi-bin\urls2ping.txt", ForReading)

 Dim URL
 Do Until objFile.AtEndOfStream
  URL = objFile.ReadLine
  if Len(URL)>0 then PingURL(URL)
 Loop
 objFile.Close

end sub

sub PingURL(URL)

 Dim RequestObj
 Set RequestObj = CreateObject("Microsoft.XMLHTTP")
 'Open request and pass the URL
 RequestObj.open "POST", URL , false
 'Send Request
 RequestObj.Send
 'cleanup
 Set RequestObj = Nothing

End Sub

This script reads a text file urls2ping.txt, also in the /cgi-bin/ directory. Each line contains a URL to be pinged.

How do you know what absolute path to use to get to the text file? This ASP.NET code, say in MyPath.aspx, will tell you the path it is running from:

<%@ Page Language="VB" %>
<script runat="server">
Sub Page_Load()
 lblPath.Text = Request.MapPath("~")
End Sub
</script>
<html>
<head>
 <title>Web app path using Request.MapPath</title>
</head>
<body>
 <asp:Label ID="lblPath" Runat="server" />
</body>
</html>

The final stage is to set up the scheduled task in plesk. This is straight forward using [Scheduled Tasks] then [Add New Task]. The Path to Executable file should be similar to that used above, ie E:\inetpub\vhosts\mydomainname.com\cgi-bin\pingurls.vbs. Set the times you want the task to run.

Installing Tomcat onto Ubuntu Apache2

2010-11-20T09:14:00.012Z

This post describes how to install Tomcat 6 on an Ubuntu 10.10 server and connect it up with the Apache2 server using the jk module. Although there are plenty of posts about this, none gave a full list of instructions; this is what I aim to provide - let me know if you have any corrections.

I assume that you have Apache2 installed.

You will need to do most of the following actions at a root shell prompt. Get this from your login using: sudu su - You will need to edit various text files. You can do this using vi at the shell prompt. However I usually do this on my local computer using my preferred editor, transferring files to and fro using FTP.

Installing Tomcat

This command gets Tomcat 6 - and Java if need be:
aptitude install tomcat6

I'm not sure if that gets all the Tomcat files, so enter this to get them all:
apt-get install tomcat6 tomcat6-admin tomcat6-common tomcat6-user tomcat6-docs tomcat6-examples

On my system, Java was installed to here: /usr/lib/jvm/default-java/

You now need to set up Java environment variables in text script file /etc/environment
Add this to the PATH variable: /usr/lib/jvm/default-java/bin after a colon separator. Add these lines:

JAVA_HOME=/usr/lib/jvm/default-java
JDK_HOME=/usr/lib/jvm/default-java

You will now need to reboot so these changes are used.

Tomcat should now be running. You can start, stop or restart it as follows:

/etc/init.d/tomcat6 stop
/etc/init.d/tomcat6 status
/etc/init.d/tomcat6 restart

or more easily like this:

service tomcat6 restart

Tomcat should now be running on port 8080 at your host, eg http://www.example.com:8080/ If you go there, you should see an It works page. To test it further, I put a JSP file in here: /var/lib/tomcat6/webapps/ROOT/ and saw that it ran OK. I then put a servlet WAR file in /var/lib/tomcat6/webapps/. This was soon expanded automatically by Tomcat and I was able to navigate to the servlet directory (still on the 8080 port).

You may find it useful to run the manager and host-manager Tomcat applications. To enable these you need to edit the Tomcat configuration files in /etc/tomcat6/. Edit tomcat-users.xml to include the following:

<role rolename="manager"/>
<role rolename="admin"/>
<user name="admin" password="secret_password" roles="manager,admin"/>

You should now be able to access these apps at /manager/html and /host-manager/html. You will need to enter your credentials; possibly a couple of times on first access.

The Tomcat logs are at /var/log/tomcat6/. By default Tomcat creates a different log file for each day. Keep an eye on these, and the disk space they consume.

Connecting Tomcat to Apache

Hopefully you already know these commands to test your Apache configuration and restart Apache. You'll need these later.

apache2ctl configtest
apache2ctl restart

First, tell Tomcat to listen out for connections from Apache. Edit /etc/tomcat6/server.xml to uncomment this line:

<Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />

Restart Tomcat.

Install the jk module that acts as the connector between Apache and Tomcat:
apt-get install libapache2-mod-jk

You should see a file called jk.load in /etc/apache2/mods-available/. I edited this to contain:

LoadModule jk_module /usr/lib/apache2/modules/mod_jk.so
JkWorkersFile /etc/libapache2-mod-jk/workers.properties
JkLogFile /var/log/apache2/mod_jk.log
JkShmFile /var/log/apache2/jk-runtime-status
JkLogLevel    info

You can also add JkMount instructions here, but I found that I needed to put them in each VirtualHost file in /etc/apache2/sites-available/. Eg in my default VirtualHost file I added:

JkMount /*.jsp ajp13_worker
JkMount /manager ajp13_worker
JkMount /manager/* ajp13_worker
JkMount /host-manager ajp13_worker
JkMount /host-manager/* ajp13_worker

An alternative is to define JkMount commands in jk.load and add a JkMountCopy command to copy these settings to all virtual hosts.

You now need to edit the jk worker file /etc/libapache2-mod-jk/workers.properties. Make sure it has code as follows, ie to tell jk to use the Tomcat connection we defined earlier:

worker.list=ajp13_worker
worker.ajp13_worker.port=8009
worker.ajp13_worker.host=localhost
worker.ajp13_worker.type=ajp13

Restart apache.

I was now able to access the Tomcat manager here: http://www.example.com/manager/html.

Edit your other VirtualHost files to expose any other apps that you need.

You'll find the Apache and jk logs in here: /var/log/apache2/. As above, keep an eye on these files and the disk space they use.

If you see "missing uri map" in log file mod_jk.log then you need to define JkMount in your VirtualHost.

As a final task, if you wish, disable the Tomcat 8080 port by editing /etc/tomcat6/server.xml and then restart Tomcat.

Windows 7 system drive letters

2010-09-21T17:29:00.008+01:00

I've previously blogged about Wandering drive letters in Windows 7. I've now a little more hard-won knowledge of what's going on.

Be very careful if you resize a Windows 7 system partition when the partition letter is not C. In fact, don't do it!

I am revisiting this issue because I ran into a problem. Our family shared laptop came with Vista. However this started playing up showing a DOS box regularly and Windows Update wouldn't install a particular patch. So I decided to install Windows 7 on drive D. This worked fine with W7 running with its system drive as D:.

Recently, drive D: started getting full so I decided to resize the partitions with the great Partition Wizard. This seemed to go OK. However, Windows 7 started playing up very badly, showing DwmHintDxUpdate error messages and worse. I eventually tracked the problem down to the fact that Windows 7 had decided that drive D: would now be called drive C: which is a serious problem as Windows and other software will store many full file locations (in the registry and elsewhere). If W7 thinks a file should be on drive D when in fact it is on drive C, then there's going to be serious problems. It's amazing that it booted at all.

The post by MarcusOS7 here explained what was going on, ie that Windows 7 tries to rename its system partition to drive C if the drive is resized, ie when the drive identifier changes. This is a serious flaw in Windows 7 and must be fixed.

I had hoped that with this information, I would be able to mend my W7 system. Even though I could just run regedit, I did not know what magic to do to change the system drive letter.

Eventually I decided to reinstall Windows 7. I saved the data over to an external USB drive. For this installation I wanted to be sure that W7 would install itself on drive C. Previously I must have done the installation when running the Vista system which somehow prevented W7 from using the C drive. This time, I was careful to do the install after booting into the Windows DVD. This trick ensured that W7 marked its install partition as drive C (even though it was not on the first partition).

In fact: before doing this, I re-partitioned the system so I had 3 partitions in the laptop, one each for Vista and W7, and one as a data drive. This process also helped me clear the previous W7 installation which was quite stubborn to remove, permission-wise. I eventually had to clear the partition by reformatting the drive.

Back in the new W7 system, I was able to restore the desired user data from the backup. And then I had to set up W7 again from scratch for each user, and installing all my development tools. As usual one of my first tasks is to turn off various system sounds, particularly the annoying Start Navigation click...

Drupal staging site security

2010-08-25T22:21:00.002+01:00

Suppose you have a Drupal staging site where you are preparing to go live or testing new features. You could install this on a separate domain that you have. Here's how to redirect casual users to your live site, while giving those in the know easy entry.

The crucial trick is to use a Session variable to indicate an authorised user. All Drupal access is via the root index.php file (except use of static files). index.php is amended to redirect users who do not have the session variable set correctly. Another secret file eg password.php, is used to let you get into the site by setting the session variable.

In the following example, www.example.com is your live domain and www.example.info is the staging server. The following code is on the staging server.

In index.php add this code after the line that contains drupal_bootstrap...

if( $_SESSION['password']!='asecret')
{
  header('Location: http://www.example.com/');
  exit;
}

Create a secret file in the root directory eg password.php with content like this:

<?php

require_once './includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);

if( $_SESSION['password']=='asecret')
{
  header('Location: http://www.example.info/');
  die();
}

$pwd = trim($_POST['pwd']);
if( get_magic_quotes_gpc())
{
 $pwd = stripslashes($pwd);
}
if( $pwd=='asecret')
{
  $_SESSION['password'] = $pwd;
  header('Location: http://www.example.info/');
  die();
}
?>

<html>
<body>

<form method="post">

Security:
<input type="text" name="pwd" />
<input type="submit" value="Go" />

</form>

</body>
</html>

Tool to find maps KML Lat/Lng

2010-04-23T13:59:00.002+01:00

Use this tool if you want to find a Google Maps KML GLatLng location, eg to use within your own code: http://www.phdcc.com/GoogleLatLng.htm Either drag the initial marker or enter a search term. The latitude and longitude values are listed below, to 6 decimal places of accuracy.

The map is centred on the UK, as this is where I will want to use it most. It uses the Google AJAX Search API to work out UK postcodes well. Look at the source to see how it works.

This is based on the code by cmarshall at http://www.webmasterworld.com/xml/3542700.htm

DNN5 User soft-delete issues

2010-04-19T12:45:00.005+01:00

In DotNetNuke DNN5 when you delete a user that login is no longer removed from the system. Instead they are soft-deleted, ie a new IsDeleted flag column is set in the UserPortals table. (Note that IsDeleted in the Users table is *not* set - is this ever set?)

In DNN5, code that calls DotNetNuke.Entities.Users.UserController.GetUser() etc will return a UserInfo object even if the user is deleted. Therefore you may have to check the UserInfo.IsDeleted property every time you get a user.

I would have not have implemented it this way. I'd keep the DNN4 functionality and have extra API calls to find deleted users. I wonder: does the DNN core code always check IsDeleted now?

Anyway, UserInfo.IsDeleted is not available in DNN4. As I do not want different versions of my code for DNN4 and DNN5, I have written this isUserDeleted() static method that uses reflection to detect if the IsDeleted property is available and if so calls it. It returns true if the UserInfo is null. After that, for DNN4 it always returns false.

public static bool isUserDeleted(UserInfo ui)
{
 if (ui == null) return true;
 try          {
  Type tUserInfo = ui.GetType();

  PropertyInfo piIsDeleted = tUserInfo.GetProperty("IsDeleted");
  if (piIsDeleted != null)
  {
   bool IsDeleted = (bool)piIsDeleted.GetValue(ui, null);
   return IsDeleted;
  }
 }
 catch (Exception) { }
 return false;
}

Freegle Find a Group mashup

2010-04-10T09:00:00.021+01:00

This blog describes how I've used one JavaScript script to power several different incarnations of a Google Maps tool to help people Find a Freegle Group. Usage instructions for the Find a Group tool are on the Freegle wiki. You can also see the Find a Group gadger lower down on this page on the right.

This is primarily a technical article - for usage instructions, see the above link.

Freegle is a network of local re-use groups in the UK. Group members give away and receive any unwanted items for free. This helps conserve the world's resources, clears clutter and helps others.

The Find a Group tool shows a UK map with pinpoint markers for each Freegle group. You can move around and zoom in as normal - clicking on a marker shows an information bubble - clicking on the link in the bubble takes you to the group web site.

Find a Group also has a search box. The tool uses Google to search for that location in the UK. If found, the tool zooms to that location and adds a marker - you are invited to look for the nearest Freegle group marker. The nearest groups are listed below

Source data

The green group markers come from this KML file - maintained by another Freegle member. This is the latest data so the tool should always be up to date.

Actually, that's not the whole truth. The tool needs to load the KML file into memory so it can search for groups. Loading the above Google Maps KML link doesn't work because of cross-site scripting security (as I understand it). Therefore the code loads a separate snapshot of the KML file from a URL that it can access.

There's a plan to resolve this issue by having the primary KML file on the iLoveFreegle.org servers. That way, my code would only need to reference one file. And the plan is to have this file generated directly from the main Freegle groups database, so it is always up to date. (Currently the Google Maps KML file has to be updated by hand.)

Mashup variants

(P) Full web page

The Find a Group tool occupies a full web page here: maps.ilovefreegle.org.

(M) Google Mapplet

The Find a Group tool appears in the Google mapplets directory here. When added to My Maps it shows filling the browser window.

(I) Iframe

The Iframe version of the Find a Group tool is designed to fit into a small window within another page. The usage instructions describe the various configuration parameters.

You can see the iframe in action at the Penrith and Eden District Freegle group and its associated helper web site.

(G) Google gadget

The Find a Group tool is packaged as a Google Gadget, defined here. You can therefore add it to iGoogle, add it to a blog, and get the code to put on a web site. The gadget has similar options to the iframe.

The gadget has a Content type of url, with the main gadget code here. The gadget options are passed as URL QueryString parameters.

(F) Facebook application

The Find a Group tool is being developed as a simple Facebook iframe application.

Common Page Layout

Each of the above tools has HTML which has the same page elements:

Map div called "map_canvas"
Noscript block
Div called "jsBlock" that wraps the search form
Input text box called "search"
Submit button that has an onclick handler "return doSearch();" that always returns false
Information div called "idInfo"
Debug div called "idDebug" that shows version info by default

Accessibility

The tool has a noscripts block that has a link to the main site groups list - this is shown if the browser has no JavaScript or it is turned off. However Chrome doesn't show this text if JavaScript is turned off - sounds like a bug to me.

The "jsBlock" search form div is not displayed by default; the JavaScript makes this block visible. This avoids confusion if JavaScript is not available.

The search text box has an accesskey of "4" defined. For the larger variants, a label is defined for this text box.

The tool HTML is hopefully valid XHTML and CSS.

API and api keys

The Google Maps/Mapplets API is used in the JavaScript. There are various differences depending on whether it is a mapplet or not. Therefore one of the JavaScript initialise() parameters is a mapplet boolean; this is stored in a global for later use throughout the code.

To use the Google Maps API, each site needs an API key. All these tools run on the maps.iLoveFreegle.org domain so the iLoveFreegle.org API key is used. The mapplet code does not need an API key.

JavaScript structure

The JavaScript is pretty straightforward procedural code, with some globals, an initialise() function and a function doSearch() that is called when a user does a search. The JavaScript code is here: http://maps.ilovefreegle.org/freegle_maps.js.

initialise() function

This takes parameter specifying whether big map controls are wanted, and the mapplet boolean.

If not a mapplet, check that the browser is Google Maps compatible
Get references to the "idInfo" and "idDebug" page elements - add the js version to idDebug
If the "jsBlock" page element is present, change its display style to block to make it show.
Get the map object and set the map height if it has been specified in a parameter.
Get the z SearchZoom integer parameter for later use

Set the map to be the approx centre of the UK at a suitable scale
Use GGeoXml to load the primary KML file and add it as an overlay - the code cannot access the contents of the overlay, so...
Initiate a separate load of the (secondary) KML for processing, either using _IG_FetchXmlContent() or GDownloadUrl()
Finally set the focus to the search box if required

processKML() function

This parses the received KML XML file and stores info about each Group placemark object in the Groups array.

Note that the KML file stores each coordinate the wrong way round, ie longitude, latitude then height. The GLatLng.fromUrlValue() function needs just the first two values but reversed.

Once the KML is loaded, it sees if a search has been requested and does it.

doSearch() function

The search function does a Google GClientGeocoder search and zooms in to show the result. The search also lists the nearest groups, calculated using GLatLng.distanceFrom().

doSearch() uses showAddressResult(), SearchGroups() and createMarker().

Helper functions

String.prototype.trim, PageQuery, queryString() and isInteger() were obtained from code on the Internet. I added queryString2() helper function.

I have updated PageQuery to cope with URL parameters with key=value pairs where "=value" is missing.

800700C1 KB977165 and verclsid

2010-03-19T19:41:00.007Z

Our Vista laptop has developed 3 problems recently, which are probably all related. Can anyone help?

Windows Update keeps on trying to install KB977165, sometimes successfully, but it keeps re-appearing.

Clicking on Check for Updates now fails with error 800700C1.

It also often shows an error with a DOS box title C:\Windows\system32\verclsid.exe and a message 16 bit MS-DOS Subsystem saying The NTVDM CPU has encountered an illegal instruction.

We did have some software for 2 HP printers installed. I've uninstalled one of them as this was suggested as being a problem.

Any other ideas pls?

Crystaltech to 3essentials DNN copy

2010-03-09T10:42:00.003Z

PHDCC Director John Cant describes the process of transferring a DNN site from one shared host to another, at this stage simply as a backup using a different/private domain.

The site, ourdnnsite.com is being copied from Newtek (Crystaltech) hosting to 3Essentials with domain ourdnnsite.info. Both support services are very helpful but it currently seems that 3essentials runs faster than Crystaltech, probably because of a faster database server.

The existing site runs only one portal but this contains many users and many files in /Portals/0/. Maintaining the UserIDs is crucial as much custom information in the database is keyed off this value.

Enable ASP.NET 3.5 at the 3essentials site.

First, place a holding page at ourdnnsite.info, eg index.html, that will be shown instead of Default.aspx for people accessing the root domain URL.

Make sure to truncate transaction log prior to the upgrade, clear the eventlog and maybe even sitelog and search tables, if those are exaggeratingly large.

The 3essentials site currently runs SQL Server 2005/2003. They need a .BAK backup file so that the database copy can be restored correctly.

Do a database backup on the Crystaltech site and ask for the entire site to be zipped, to get these files:

ourdnnsitedb_1002050754.bak
ourdnnsite.zip

Load these to the 3essentials site ourdnnsite.info /private/

Submit a 3essentials site support request, asking for:

the database to be restored from /private/ourdnnsitedb_1002050754.bak
the site files to be unzipped from /private/ourdnnsite.zip
the site file permissions to be set correctly:
"I have corrected this issue, this involves giving the httpdocs directory IWPD User - Modify permissions which you are not able to do via Plesk."

Check the Web.Config file at the 3essentials site:

set the new database connection string twice
check the ObjectQualifier
set CustomErrors to 'Off' to see the errors
ensure the machinekey values are the same as the original values from the Crystaltech site
set AutoUpgrade off

On the database:

Update the portal alias, eg:
UPDATE [DNN_PortalAlias] SET HTTPAlias='www.ourdnnsite.info' WHERE PortalAliasID=0

Access the site by visiting Default.aspx

If any errors are visible, keep deleting the sections of Web.Config that cause errors.

If you cannot log in, use Chris' technique, described here. To access the DNN database, log in using myLittleAdmin here: http://db1.3essentials.com/mla/

To prevent unauthorised access to the ourdnnsite.info site, add to the Default.aspx file a check that a cookie is set. Provide a means of setting the cookie using another private page.

There are a couple of other additions that we usually make:

As well as creating an app_offline.htm file, we use the Cookie technique in Default.aspx to ensure that the site is offline during maintenance, redirecting to an offline page.
In the skin, we warn people who are online that the site is about to go down; this also helps us see if anyone is online now.

More details on these Default.aspx techniques later if you wish.

.NET app using Jet on x64

2010-02-24T12:02:00.005Z

If you are trying to use an Access MDB file using the Microsoft Jet OleDb driver in .NET or ASP.NET, you must set your platform target to x86 (32 bit).

If you are running on a 64 bit system and your assembly target is Any CPU or x64 then you will see this exception:
The 'Microsoft.Jet.OLEDB.4.0' provider is not registered on the local machine.

The Microsoft ACE.OLEDB driver for MDB and ACCDB files works OK whichever platform is targeted. However this driver is not installed by default on user computers unlike the Jet driver.

This fix can be used to make existing code work with Jet/MDB, eg the Cassini server.

Useful blog links:

Force .NET application to run in 32bit process on 64bit OS by Gabriel Schenker

Back to Basics: 32-bit and 64-bit confusion around x86 and x64 and the .NET Framework and CLR by Scott Hanselman

System.String hidden UTF8 BOM

2010-02-22T14:04:00.006Z

In .NET, a string (System.String) can contain an initial UTF-8 Byte Order Mark (BOM) which might not be seen in ordinary processing but is present when converted to a character array or into an encoding byte array.

For example, a text file might be saved in UTF8 format with UTF-8 Byte Order Mark bytes at the start, ie 0xEF 0xBB 0xBF. You might receive this file in ASP.NET using a FileUpload control, or read it directly in a Forms .NET app in C#:

byte[] FileBytes = File.ReadAllBytes(path);
string content = Encoding.UTF8.GetString(FileBytes);

If the file contains these 7 bytes (in hex) EF BB BF 44 65 61 72 then content will superficially contain the single word "Dear", eg as seen in the debugger, and content.StartsWith("Dear") will return true.

However, content.Length is 5 and content.ToCharArray() will return an array with 5 elements, the first being set to 0xFEFF. Similarly, Encoding.UTF8.GetBytes(content) will return the same 7 bytes as was used in the first place.

(Note that that has nothing to do with the encoderShouldEmitUTF8Identifier optional parameter for the UTF8Encoding constructor.)

As this hidden extra character can be misleading, I have written the following snippet that detects the presence of the UTF8 Byte Order Mark preamble and ignores it if present:

byte[] FileBytes = File.ReadAllBytes(path);
int StartPoint = 0;
int Count = FileBytes.Length;
if ( Count>= 3 && FileBytes[0] == 0xEF && FileBytes[1] == 0xBB && FileBytes[2] == 0xBF)
{
 StartPoint += 3;
 Count -= 3;
}
content = Encoding.UTF8.GetString(FileBytes, StartPoint, Count);

PS The code could not doubt be improved using Encoding.GetPreamble()

Clearing nested CSS floats

2010-02-07T12:59:00.006Z

Here's a XHTML/CSS technique to ensure you only clear the desired floats and get the right background areas for your DIV.

The code examples are here: http://www.phdcc.com/CSS_ClearingFloats.htm - look at the source code for full details.

My starting point is to have a DIV set with floats left and right. Within the middle unfloated DIV, I have another DIV set with floats and right. I want to clear just the middle floats, not the outer ones.

The crucial trick is to add CSS style 'overflow:hidden' to create a Block Formatting Context. Any CSS style 'clear:both' then only applies to the 'nearest'/current Block Formatting Context.

An associated problem was the fact that the background of the middle unfloated DIV goes wide to the border of the current Block Formatting Context. Adding CSS style 'overflow:hidden' to create a new context constrains the background to the expected area.

Using 'overflow:hidden' feels slightly naff: shouldn't there be an explicit CSS style to define a Block Formatting Context, instead of using something that does this as a side effect? Also, you may be concerned about what overflow is being hidden - as long as you have the default width:auto and/or height:auto set, you will not be hiding anything.

Adding Access key support to DotNetNuke

2010-02-05T15:01:00.014Z

This page explains how to add "access key" support to a DNN5 web site.
Access keys provide keyboard short-cuts to improve web accessibility, as described here - which also lists the UK government recommendations:
http://en.wikipedia.org/wiki/Access_key

I have implemented access keys using the accesskey attribute rather than the
Role Access Model

How it works for a user

For standard users, each browser uses different modifier keys and acts minorly differently when pressed. Consider accesskey '1'. In Windows Internet Explorer, pressing Alt+1 selects the corresponding link - you must press Enter to go to that link. In Firefox, pressing Alt+Shift+1 goes to the associated link immediately.

These accesskey shortcuts take precedence over standard Window commands, so if you define an accesskey 'f' it will be acted on rather than show the File menu in Windows.

In Internet Explorer, the link is not selected if the link has a style of display:none.

Search accesskey

Most of the access keys can be defined in your DNN skin using extra HTML that is not normally seen. However, accesskey 4 takes you straight to the Search text box. To make this happen, I had to amend admin/Skins/search.ascx to add AccessKey="4" to the txtSearchNew asp:TextBox.

While there, I took the opportunity to add a label for this box, as recommended for all fields to improve accessibility. This label is present but not normally displayed:
<asp:Label AssociatedControlID="txtSearchNew" style="display:none;" runat="server">Search:</asp:Label>

Main accesskeys

The main site access keys can be defined using code like this at the top of your skin, which I adapted from another web site:

<ul id="skips">
<li><a href="#content" accesskey="s">Skip to page content, accesskey=s</a></li>
<li><asp:HyperLink ID="SkipToHome" NavigateUrl="~/" AccessKey="1" runat="server">Skip to Home page, accesskey=1</asp:HyperLink></li>
</ul>

CSS (below) can then be used to make sure that this information is not normally seen, but each link become visible when it has the focus or is active. The list-style is set to none to avoid bullet points etc. When not in focus, the links have width and height 0; when in focus these are set to auto. Tweak the other settings as you wish.

Finally, don't forget to provide an anchor within your skin for the skip to navigation link:
<a id="content" name="content"></a>

CSS code:

ul#skips { list-style: none; }
#skips li { list-style: none; display: inline; }
#skips a
{
 color: white; width: 0; height: 0; overflow: hidden; z-index: 1000;
 position: absolute; top: 15px; left: 100px;
}
#skips a:active, #skips a:focus
{
 color: red; border: 1px solid red;
 width: auto; height: auto;
 display: block; overflow: visible;
 padding: 3px;
}

DNN local install with SQL Server

2010-02-01T15:10:00.015Z

The post summarises the steps required to set up DotNetNuke 5 (DNN5) locally on Windows using the full Microsoft SQL Server using SQL Server authentication, ie not the Express version. Getting the Logins and Users right is the crucial trick that I want to remember.

Click on each image to see it larger.

In Microsoft SQL Server Management Studio, connect to your local server. Right-click on Databases on the left. Select "New database". In the following screen, enter a database name, eg "DNN522pen" and click OK without changing anything else.

Now, find the server Security and right-click on Logins and select "New Login...":

Enter a login name such as "dnn522pen", select "SQL Server Authentication" and enter the password. Untick "Enforce password policy" if you wish. Do not set the Default database. Click OK.

Open up your database tree on the left: open "dnn522pen" then Security then Users. Right-click and select "New user...":

In the new user dialog, enter a User name such as "dnn522pen" and the Login name you used before eg "dnn522pen". Tick "db_owner" twice below and click OK:

Next, create a new folder on disk somewhere, eg in directory "D:\dnn522pen\". Unzip the DotNetNuke community installation file in there DotNetNuke_Community_05.02.02_Install.zip.

Open up Internet Information Services (IIS 7) Manager. Expand the menu on the left to open Sites and Default Web Site. Click on "Add Application..." on the right.

Enter a suitable alias and physical path, eg "dnn522pen" and "D:\dnn522pen\":

In IIS Manager, select the new alias on the left, select Content View and click "Browse" to start the DNN installation:

After a delay you should see the first DNN install screen. Choose custom:

Test file permissions.

Now, set up your database connection:
- First, click on "SQL Server 2005/2008 Database" and wait for the screen to refresh
- Enter "(local)" for the Server
- Enter the database name, eg "dnn522pen"
- Uncheck "Integrated Security" and wait for the screen to refresh
- Enter the User ID and password
- Keep "Run as db Owner" checked
- If desired, enter a database table name qualifier, eg "DNN_"
- Click on "Test Database Connection"
- If OK, click on Next

Proceed with the rest of the DNN installation as normal.

Importing Identity column data into SQL Server

2010-01-15T15:25:00.007Z

Updated 23/1/10:
I am in the process of porting some (DNN module) tables from one Microsoft SQL Server database to another. For various reasons, I want the primary key identity column values to remain the same. This is on a shared SQL server, so we don't have admin access, eg to the command line and file system.

The SQL Server Import and Export wizard transfers the data nicely and will preserve the identity values if you do it correctly.

There are two crucial tricks:
- set up the destination table(s) with the correct primary keys etc before the copy
- in the wizard, click Edit Mapping and tick Enable Identity Insert.

----------------------
This is alternative technique which should no longer be needed:

I first export the original data to a temporary database. This creates the tables but but does not create primary keys, set default values etc. However, the copy process does preserve the original primary key identity column values.

By installing the DNN module on the destination system, the tables are created correctly there. However, a wizard import into these tables (even with "Enable identity insert" set) does not preserve the key values.

The trick I found is to upload the data into a new table eg "Form2", and then use the following code to copy the data into the correct "Form" table. The trick is to use the "set identity_insert" statement.

set identity_insert DNN_Form on;

insert into DNN_Form ([FormID],[FormName])
select * from DNN_Form2;

set identity_insert DNN_Form off;

You must list all the required columns in the insert statement.
Only one table can have identity_insert on at a time.

Finally, delete the "Form2" table.

You can check the current insert identity value before and after as follows:

DBCC CHECKIDENT(DNN_Form);

Wandering drive letters in Windows

2010-01-14T20:37:00.003Z

My main computer's motherboard died - long live the new computer! Thankfully, all the data on the two existing drives were OK. A hastily bought 3.5 inch USB drive caddy worked a treat, keeping me going on the laptop.

The new computer was pre-installed with Windows 7 Home Premium on drive C with a separate partition on drive D for data. I have an MSDN subscription and I wanted to set up various versions of Windows multi-booting on the same computer. I have two different systems that I want to run normally, one with Visual Studio 2008 and the other with various older bits of software. I also want to have some different versions of Windows for software testing, ideally Windows 7, Vista and XP, both in x86 and x64 versions.

OK - I know I can run a virtual PC, but I want to use two of these systems regularly at top speed. I haven't tried virtual PC yet, so I decided to stick with what I knew, which is the HyperOs multibooter, though I had to upgrade to the latest version.

The first task was to repartition the disk, to give more partitions, each with a Windows installation, as well as big photo/video partition. I found that there were already two extra partitions, a (Packard Bell?) Recovery Partition and a small System Reserved partition set up by Windows 7, ie 4 Primary partitions in total. The W7 Disk Management tool wanted to convert my disk to Dynamic Disks to give me more partitions, but these cannot be used for booting, so a swift exit was called for.

HyperOS mentioned the Acronis partitioner but this wasn't playing - not sure if it was Windows 7 or the size of the disk. I did have a copy of gparted on CD, but this hadn't worked for me before. Eventually I found Partition Wizard www.partitionwizard.com which has worked brilliantly. I got a free commercial licence for this.

Using Partition Wizard, I deleted (empty) drive D and made quite a few other Logical partitions. Partition Wizard is clever enough to know that it cannot do changes in some circumstances, and so does it on reboot. Partition Wizard can also resize partitions, moving data if need be. So far that's worked fine. (Check your computer power settings don't shut your disk down at an awkward moment.)

Having done that, I could now copy all my precious data onto the new hard disk from the drive caddy.

Anyway, I've now done various Windows installations, some by installing from DVD from Windows, but mostly by installing from DVD at reboot, ie choosing DVD at boot up from the BIOS boot menu - and choosing Custom Setup to choose the install partition. The problem that I have found is that the drive letters that Windows uses and sees seems to change a lot. The original W7 system is on drive C on the "first" partition. I have another W7 on the fifth partition which thinks of itself as being on drive M - fine. However, most other W7 and Vista installations think of themselves as being drive C, even though they are on partition 4, 7 or 8. When I have rebooted in one of these systems, the drive letters are assigned in a fairly random way. The DVD drive is usually drive E but not always.

In Windows Disk Management you change the drive letters - for some drives at least. But there's limited scope for what you can change to. Partition Wizard can do this, and is probably more successful. However there appears to be no way of persuading a Windows on partition 4 (that thinks it is at drive C) to think of itself as being drive L for example.

All these wandering drive letters might not be problem. However my software development stuff and business data has always been carefully set up (for various reasons) to be stored on both drives C and D. I don't tend to put data in "My Documents", "Documents", "Pictures", etc because these are (usually) stored in different locations for each version of Windows. Anyway, I have persuaded partition 2 to be drive D in all the installations so far. However it was a problem that partition 1 kept wandering all over the shop. My solution was to move all my crucial data from drive C onto a bigger drive D. Ok - fairly simple in itself, but I'm still having to work out what dependencies there are in all my scripts.

Another complication in this process was that Windows XP was dying during installation (with a BSOD). This turned out to be because the SATA drives were being accessed using AHCI. Changing the BIOS to use the SATA setting "Native IDE" got the XP installation to work. However I did not want to leave this setting as is, so I change it whenever I want to switch to XP. XP also doesn't recognise many of the motherboard peripherals, eg Ethernet, so the installation is not very useful. The option to press F6 during installation would let me install a suitable driver, but (a) I don't have the driver and (b) the system doesn't have a floppy; it does look as though new motherboard has a floppy interface, but there's no connector soldered in there!

I was also able to add an IDE/PATA cable and drive to the system to connect my old drives, but the installation still did not work if I was in AHCI SATA mode.

I've still many applications to configure and systems to set up, but I'm getting there.

Starting to program vtiger CRM

2009-09-25T11:49:00.017+01:00

This article applies to vtiger 5.1.0 - some of the advice/code may not be accurate for later versions.

We've been investigating the vtiger CRM as a component in an open source set of tools that a business or organisation might need. A crucial idea is to link various tools together, so I have been looking at how to get information into and out of vtiger.

As a start, we're looking at an Outlook add-in to add an email address/name to the vtiger Contacts list, and how to export to an accounts package. There is already an Outlook vtiger add-in, but it seems pretty flaky and only does synchronisation; we want it to check a new email for existing matches and only add it if need be.

About vtiger

vtiger is a Customer Relationship Manager (CRM). vtiger deals with Leads who might turn into Contacts, with a Contact associated with an Account. You can set up Products with stock levels (and Services as well) and then generate Quotes and Invoices which can be downloaded as PDFs or sent by email. All that sort of thing. It is important to know that vtiger is designed for use only by a business' staff - it is not intended to be used by customers, although vtiger can check incoming support emails.

vtiger is extensible and there is some basic documentation to get you started making your own modules. The instructions effectively describe how to create a new object type (eg a time sheet), represented as a table or two in the vtiger database. You can link your module and its new object type into vtiger, so that eg menu [Tools][Time sheet] shows a list of time sheets in the standard vtiger style, clicking on a record shows the detail, with an Edit option available.

For the rest of this piece, I'm looking at adding functionality to an existing module. This will hopefully help you even if you are starting a complete module. Be careful if you alter existing code - it may well be overwritten if you upgrade vtiger.

The vtiger database

You will almost certainly want to have access to the database that vtiger uses, partly so you can see what's in there, but also so you see any changes as they really are. For MySQL, using phpMyAdmin will probably be the available tool - make sure you can get in to your database.

If there aren't any already, make some test Contacts within vtiger. In phpMyAdmin have a look at these tables:

vtiger_contactdetails
vtiger_contactscf
vtiger_contactaddress
vtiger_contactsubdetails

Each of these tables has a column named 'contactid' or similar as a primary or foreign key. Note that the "contact_no" column is what is displayed is vtiger as the "Contact Id", eg 'CON1'.

The table vtiger_modentity_num is used when generating the next "contact_no" value, for the appropriate module, so 2 might be next free Contact number to make 'CON2'. Later, we'll use vtiger CRMEntity class setModuleSeqNumber() function to get this value.

The 'contactid' numbers identifying the contact don't start at 0 or 1. In fact, vtiger assigns a unique id number across all objects, so object 792 might be a Contact and 793 might be an Invoice. These details numbers are stored in the vtiger_crmentity table - a deleted flag in there is set when items are first deleted - so they can recovered from the recycle bin. Later, we'll use the insertIntoCrmEntity() function to get a new object id.

vtiger command structure

All vtiger accesses come through one root file index.php. The parameters determine which module operation is carried out. For example, consider this URL

/index.php?action=DetailView&module=Invoice&record=800&parenttab=Inventory

It runs the code DetailView.php in the directory /modules/Invoice/. The code that runs in there, finds the "record" value and shows the relevant invoice. So, you can add to the "Detail View" functionality by adding code to this file.

You can create your own actions by making a new file in the relevant directory. You then need to provide a means of invoking that action - more later.

Smarty templates

vtiger uses the Smarty template system to generate its output. By and large, the vtiger code doesn't generate any HTML - instead, it loads up a template from TPL files in the /Smarty/templates/ directory. vtiger PHP code sets various values that are combined into the template to form the final output. Smarty has an extensive control language available for use in a template, so it can cope with complicated structures, eg it can iterate through arrays to generate multiple table rows. One Smarty template can invoke another, so finding where something is generated can be tricky.

Adding a tool option to an Invoice

If you view an Invoice there are Tools listed on the right hand side: "Export to PDF" and "Send Email with PDF". To add another option here, you have to drill down through the tpl files: DetailView.php invokes template Inventory/InventoryDetailView.tpl which includes template Inventory/InventoryActions.tpl.

In InventoryActions.tpl, after this line:

<!-- To display the Export To PDF link for PO, SO, Quotes and Invoice - ends -->

add in this code:

{if $MODULE eq 'Invoice'}
{assign var=send_accounts_action value="SendAccounts"}
<tr><td align="left" style="padding-left:10px;">
<a href="index.php?module={$MODULE}&action={$send_accounts_action}&return_module={$MODULE}&return_action=DetailView&record={$ID}&return_id={$ID}" class="webMnu"><img src="{'actionGenerateInvoice.gif'@vtiger_imageurl:$THEME}" hspace="5" align="absmiddle" border="0"/></a>
<a href="index.php?module={$MODULE}&action={$send_accounts_action}&return_module={$MODULE}&return_action=DetailView2&record={$ID}&return_id={$ID}" class="webMnu">Send to Accounts</a>
</td>
</tr>
{/if}

Upload InventoryActions.tpl and view an Invoice - check that "Send to Accounts" is visible on the right.

Adding to accounts

Now, create a file SendAccounts.php - probably copying an existing file such as DetailView.php makes sense.

OK - this bit is skimpy for now, but it might get you started. Near the end, add in the following code to query the vtiger database and display a little info from each record found. To get the list of products ordered you will also have to query the vtiger_inventoryproductrel table.

$query="select * from vtiger_invoice where invoiceid=?";
$invoice_id = $focus->id;
$result = $adb->pquery($query, array($invoice_id));
$noofrows = $adb->num_rows($result);
$final_output = "";
while ($inv_info = $adb->fetch_array($result))
{
$invoice_no = $inv_info['invoice_no'];
$subject = $inv_info['subject'];
$invoicedate = $inv_info['invoicedate'];
$accountid = $inv_info['accountid'];
$total = $inv_info['total'];
$final_output .= "$invoice_no: $subject $invoicedate $accountid $total<br/>";
}
$smarty->assign("SEND_DETAILS", $final_output);
$smarty->display("Inventory/SendToAccounts.tpl");

At the end of our new code, the Smarty variable "SEND_DETAILS" is set to the string we want to display. Then the Smarty template SendToAccounts.tpl is run.

You had best create the template file SendToAccounts.tpl initially as a copy of an existing template, eg InventoryDetailView.tpl. You will need to pare it down - and eventually add in a line like the following to display your output:

<p><b>Storing data</b>: {$SEND_DETAILS}</p>

OK - all we've done so far is display the invoice details. Actually talking to an accounts system is beyond the scope of this article.

Adding a new contact

As I said earlier, I want to have an Outlook add-in that can be used to add a contact to the vtiger database, after checking to see whether the contact already exists. As the first step to getting this done, I set up a small web form that has First name, Last name and Email fields. The Go button is set up to go to this vtiger URL eg:

/index.php?action=AddOutlookContact&module=Contacts&FirstName=Chris&LastName=Cant&Email=sales@phdcc.com

As per usual, vtiger uses its standard rules so that this script is called:
/modules/Contacts/AddOutlookContact.php

I made AddOutlookContact.php in a similar way to that described above, using the title "Import from Outlook" for the main content tab. The code generates the output HTML in the PHP script - a neater final approach would put the raw HTML within the template. Anyway, the PHP code generates its HTML in $Output and then invokes my new template AddOutlookContact.tpl:

$smarty->assign("IMPORT_DETAILS", $Output);
$smarty->display("AddOutlookContact.tpl");

In the guts of AddOutlookContact.tpl, the output is reproduced:

<div>{$IMPORT_DETAILS}</div>

The tasks within AddOutlookContact.php are:

Get passed parameters
Check parameters
Find any matching names or emails
Show matches to user
Show Add Contact button

So: the user can see any existing matches, and can decide whether or not to press the Add Contact button, which goes to another script AddOutlookContact2.php.

The SQL script to query the existing contacts is as follows:

SELECT c.*, a.accountname, crm.deleted FROM vtiger_contactdetails AS c
LEFT JOIN vtiger_account AS a USING (accountid)
INNER JOIN vtiger_crmentity AS crm ON crm.crmid=c.contactid
WHERE lastname LIKE '%$QuotedLastName%' OR email LIKE '%$QuotedEmail%'";

Note that I also use the function mysql_real_escape_string() to ensure that the passed strings cope with single and double quotes etc.

The SQL links vtiger_contactdetails with the vtiger_crmentity table so the Deleted column can be picked up. The vtiger_account table is also included so any associated account name can be found.

The code goes through all the found matches and displays the results to the user. I provided a link to each contact - this is the code for the link:

$MatchLink = "index.php?action=DetailView&module=Contacts&record=$Match_ContactId&parenttab=Support";

The following form shows a suitable "Add new contact" button:

<form action='index.php' method='post' onsubmit='VtigerJS_DialogBox.block();'>
<input type='hidden' value='AddOutlookContact2' name='action' />
<input type='hidden' value='Contacts' name='module' />
<input type='hidden' value='$htmlLastName' name='LastName' />
<input type='hidden' value='$htmlFirstName' name='FirstName' />
<input type='hidden' value='$htmlEmail' name='Email' />
<input type='submit' value='Add new contact' />
</form>

AddOutlookContact2.php has a similar core as before, except it generates HTML that shows what it has done. Here's what I did to add a new contact. This is probably not the recommended vtiger method, but it seems to get the job done.

$adb->startTransaction();
$NewContactNo = $focus->setModuleSeqNumber("increment",'Contacts'); // updates vtiger_modentity_num
$focus->insertIntoCrmEntity('Contacts'); // updates vtiger_crmentity and sets $focus->id

$query = "insert into vtiger_contactdetails (contactid,contact_no,firstname,lastname,email) values(?,?,?,?,?)";
$qparams = array($focus->id, $NewContactNo, $FirstName, $LastName, $Email);
$adb->pquery($query, $qparams);

$query = "insert into vtiger_contactscf (contactid) values(?)";
$qparams = array($focus->id);
$adb->pquery($query, $qparams);

$query = "insert into vtiger_contactaddress (contactaddressid) values(?)";
$qparams = array($focus->id);
$adb->pquery($query, $qparams);

$query = "insert into vtiger_contactsubdetails (contactsubscriptionid) values(?)";
$qparams = array($focus->id);
$adb->pquery($query, $qparams);

$adb->completeTransaction();

Here are the steps:

Call setModuleSeqNumber() to get the next contact no eg CON2
Call insertIntoCrmEntity() to get the next contact id, eg 794
Insert the basic details into vtiger_contactdetails
Insert the contact id into vtiger_contactscf
Insert basic rows into vtiger_contactaddress and vtiger_contactsubdetails

The output provides a suitable link to the new Contact.

Later, I made a real Outlook 2007 addin to call this vtiger code. An extra button is shown on the ribbon when you read an email. When you click the button, it picks up the sender's name and email address and shows the correct URL with parameters in the user's default browser.

DNN no container span causes validation error

2009-08-26T15:28:00.010+01:00

If you turn off the DNN container for a module, then DNN by default inserts an extra SPAN that can cause a W3C validation error. One solution is to have a minimal container.

I had turned off the "Display Container" option for some modules so that no title is displayed. (In Admin Edit mode, the default container is used so that you can get at settings etc.) The HTML produced by DNN looked like this, within the skin pane:
<a name="402"></a>/
<span id="dnn_ctr402_ContentPane" class="DNNAlignleft">

<div id="dnn_ctr402_ModuleContent">
and then the module content.

This causes a validation error because you cannot nest a DIV within a SPAN.

My solution is not to use the "Display Container" option - instead, I created a container with no title and used that instead. In the replacement container, I moved the [ACTIONS] and [ICON] into the footer. This NoTitleContainer container files are available here: http://www.phdcc.com/download/DNN/NoTitleContainer.zip. Unzip in /Portals/_default/Containers/MinimalExtropy. I'm not sure if you need to go to [Admin][Skins] to make the container visible.

DNN Event Viewer spider errors

2009-06-25T22:26:00.005+01:00

If you are getting "Page Load Exception" errors in the DotNetNuke (DNN) [Admin][Event Viewer] with the UserAgent indicating a web crawling spider, then you need this fix:

The fix: Get the Browser Caps - v2 by Oliver Hine. Unzip the file App_Browsers.zip to get the file OtherSpiders.browser - put this in the App_Browsers directory of your DNN site. Note that your DNN site will automatically restart, so perhaps do this at a quiet time.

Alternatively (if you want), you should be able to stop these spiders accessing your site using a suitable robots.txt file.

This patch is needed for DNN 4.9.4 and possibly earlier. I think that it may be fixed in DNN 5.1+.

Spiders fixed: This file has fixes for these spiders: Baiduspider, Yandex, ia_archiver, Sphere, Feedfetcher-Google, Yanga, worio, zibber, ~~twiceler, voliabot~~, aisearchbot, robotgenius and R6_FeedFetcher.

Spiders not fixed: However it doesn't fix TweetmemeBot - I failed to add support for this. Read this Tweetmeme.

Update: doesn't seem to work for Twiceler or voilabot.

What's happening: DNN code is asking ASP.NET for details of the browser capabilities. ASP.NET gets this from the UserAgent string. DNN asks for the major and minor version numbers of the browser and causes an exception if these cannot be determined from the UserAgent. ASP.NET uses various .browser files (in the framework directories and in the web app's App_Browsers directory) to work out what browsers can do. As the UserAgent provided by these spiders doesn't follow a standard regex pattern, ASP.NET cannot get the major and minor versions.

Thanks to: Barry Sweeney for his prompt help on Twitter - and Oliver Hine of course.

Below is the DNN exception that I get before applying this fix:

Message: DotNetNuke.Services.Exceptions.PageLoadException: Value cannot be null. Parameter name: String ---> System.ArgumentNullException: Value cannot be null. Parameter name: String at System.Number.StringToNumber(String str, NumberStyles options, NumberBuffer& number, NumberFormatInfo info, Boolean parseDecimal) at System.Number.ParseInt32(String s, NumberStyles style, NumberFormatInfo info) at System.Web.Configuration.HttpCapabilitiesBase.get_MajorVersion() at DotNetNuke.UI.Utilities.ClientAPI.BrowserSupportsFunctionality(ClientFunctionality eFunctionality) at DotNetNuke.UI.Utilities.ClientAPI.get_ROW_DELIMITER() at DotNetNuke.UI.Utilities.ClientAPI.RegisterClientVariable(Page objPage, String strVar, String strValue, Boolean blnOverwrite) at DotNetNuke.UI.Skins.Controls.Search.Page_PreRender(Object sender, EventArgs e) at System.Web.UI.Control.OnPreRender(EventArgs e) at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) --- End of inner exception stack trace ---

DNN Skin token support in a module

2009-05-27T16:41:00.007+01:00

This article shows how to get a DotNetNuke (DNN) module to support tokens in skins. It will use, as an example, how I added support for the [CODEMODULE] skin token in our phdcc.CodeModule retail module.

Introduction: skins are used by DNN as a template for the whole site output, and a container template is used to wrap an individual module. Skins and containers can contain standard tokens such as [LOGO] - this is replaced at runtime by the logo image chosen by the site administrator.

Doing it manually

The crucial trick is to add a suitable entry to the ModuleControls table.

This table primarily contains a mapping between the blank (View), Edit and Settings control keys for a module and the actual controls that implement them, eg the "Settings" ControlKey is set to "DesktopModules/phdcc.CodeModule/Settings.ascx" for my module.

To support your new skin token, add a new row with your skin token name in the ControlKey column (eg "CodeModule" with no quotes or brackets), a NULL for the ControlTitle, your view control in ControlSrc and -2 in ControlType. For my module, the ControlSrc is "DesktopModules/phdcc.CodeModule/View.ascx"

Adding a token to a skin

People work with skins in various ways. The standard method is to have an HTML template file that is parsed into an ASCX when the skin is uploaded. If you edit the HTML file on a live site then you can click on [Parse Skin Package] to re-make the ASCX.

Anyway, add your skin token to your HTML skin somewhere, eg add "[CODEMODULE]", without quotes but with brackets - and in upper case. Either package it up and upload, or edit the live version and click on [Parse Skin Package]. The parse log should show your token being replaced. The ASCX should have your token replaced, as per the example below.

If you work with an ASCX template file, then you need to add a suitable Register directive at the top of the ASCX, eg:
<%@ Register TagPrefix="dnn" TagName="CODEMODULE" Src="~/DesktopModules/phdcc.CodeModule/View.ascx" %>
then add instances of this control later on, eg:
<dnn:codemodule runat="server" id="dnnCODEMODULE" />

Hopefully your view control should now be called whenever this skin is used. If so, hurrah! Note that the PortalModuleBase TabModuleId is set to -1 so you could use this to tell when you are being called from a skin.

Token parameters

It is useful to be able to pass parameters to your module, eg so it knows what to display. The parameters are set in the skin.xml file alongside your HTML template. For my module, I wanted to add a ControlFile parameter to tell my module what to do. I added this to skin.xml, after <Objects>

<object>
  <token>[CODEMODULE]</token>
  <settings>
    <setting>
      <name>ControlFile</name>
      <value>viewSkin.ascx</value>
    </setting>
  </settings>
</object>

You can specify several settings for your token. In this case, I set the "ControlFile" setting to value "viewSkin.ascx". Make sure [CODEMODULE] is in upper case.

To support each parameter, you must add a corresponding property to your control. So, in this case, I must add a property called "ControlFile". In VB, this could be:

Private _ControlFile As String

Public Property ControlFile() As String
  Get
    Return _ControlFile
  End Get
  Set(ByVal value As String)
    _ControlFile = value
  End Set
End Property

If you upload or re-parse your skin, you should find that the parameter has now been set in the ASCX, eg:
<dnn:codemodule runat="server" id="dnnCODEMODULE" ControlFile="viewSkin.ascx" />

When your view control is now run, the ControlFile property should have been set before your Page_Load is called. You can use this to tell when you have been called from a skin - and act accordingly.

Automatic installation

Earlier on, we added the crucial row to the ModuleControls table by hand. To set this automatically during installation, you need to add an appropriate data provider. For example, this might be called 01.00.00.SqlDataProvider. Add in SQL code to delete any existing ControlKey and add the correct one, eg:
DELETE FROM {databaseOwner}{objectQualifier}ModuleControls
  WHERE ControlKey='CodeModule'
INSERT INTO {databaseOwner}{objectQualifier}ModuleControls
  (ControlKey,ControlTitle,ControlSrc,ControlType)
  VALUES ('CodeModule',NULL,'DesktopModules/phdcc.CodeModule/View.ascx',-2)

Finally, add in an entry to your Uninstall.SqlDataProvider file to remove this entry if your module is removed:
DELETE FROM {databaseOwner}{objectQualifier}ModuleControls
  WHERE ControlKey='CodeModule'

DNN development and production sites

2009-04-14T13:49:00.005+01:00

Bro John wants me to write up how he does DotNetNuke (DNN) upgrades and site copies. As a preamble, he wrote this:
=============
I would think anyone with a production site would want three copies
A - a live site
B - a transition site
C - a development site

also
D - a trash site

As most of my stuff is now in phdcc.CodeModules, I develop these until they work on C, I copy these to D to see if they still work in a different environ. I then copy them to A and test.

I would prefer to have a B which means I can shut down A and have users running on B and then swap back to A later if for example I do a DNN version upgrade.

Doing a DNN version upgrade on a live site is just asking for trouble.

If this sort of stuff is not sorted in DNN properly then I wouldn't consider it a solid environment to do anything serious in.

I am trying to be careful about keeping all database/email server specific stuff in a few files. Hard links to other pages on the site are OK if you copy the entire site correctly.

Maybe bigger players have other tricks they pull. Maybe they swap DNS pointers. However that takes time to permeate and produces horrid cahcing problems.

Content-Location HTTP header for current URL

2009-04-03T12:30:00.002+01:00

All our web sites on shared host provider Crystaltech/Newtek have just started serving an extra HTTP header Content-Location for all static web page requests - the header contains the current URL.

To see this in action, use Rex Swain's HTTP Viewer to view this page at our web site: http://www.phdcc.com/phd.html.

If you look in the received output, you will see that the Content-Location header is set to the requested URL:
Content-Location:·http://www.phdcc.com/phd.html(CR)(LF)

Normally, the Content-Location header is used to indicate when the content actually corresponds to another URL. So if you look at http://www.phdcc.com/ you will see this output:
Content-Location:·http://www.phdcc.com/default.htm(CR)(LF)
ie the web site home page is actually called default.htm.

While this is a harmless change for most users, it did in fact fool our FindinSite-MS search engine - I am in the process of releasing a new version to cope with this. Our ISP Crystaltech claims that nothing has changed. Has anyone any further information?

Lowering ASP.NET memory usage

2009-04-02T15:36:00.013+01:00

This blog post is a work in progress on how to keep ASP.NET web application memory usage low. The motivation for this is to avoid the web app being stopped for using too much memory.

Background

The Microsoft Internet Information Services (IIS) web server has administrator options to Recycle Worker Threads, ie to automatically stop a thread that runs an ASP.NET web application if a threshold is passed. Some of these thresholds are 'arbitrary', eg the default Elapsed Time of 29 hours. However the Virtual Memory and Used Memory thresholds tend to kick in as you use more memory. If a web app is 'recycled' then you get no warning - the thread is simply terminated; the web app is only restarted in response to another web request.

In addition, a web app will tend to slow down as its memory use increases.

I am working on this topic for my FindinSite-MS site search engine. This one web app both (a) does searches and (b) crawls a web site to build a 'search database' that is used by the search. The crawl/index task is done in a separate background thread - an indexing task is either started from the user interface, or run on a predefined schedule. (The app has to be alive for a scheduled index to run - so an outside process can be set up to wake up a web app if need be.)

This software currently suffers from two problems:
- Too much of the database-being-searched is kept in memory
- More significantly: The index process uses a large amount of memory.

Note that my 'search database' db (as I refer to it) is just a set of files in memory - no real database is used. This makes the search engine easier to deploy as a database is not required.

Memory heuristics

I use the System.GC.GetTotalMemory(false) call to get the current total memory usage, without forcing a garbage collection.

I don't have a precise figure for what amount of memory is too big. On our Crystaltech shared host, anything less than 10MB is good, while anything over 100MB is bad - though a recent indexing run worked with a maximum 400MB memory usage.

Redesign methodology

My initial focus was on designing a new 'search database'. This db design needs simultaneously to be searchable and buildable, ie sufficently fast and low-memory while searching - and the same while building.

The main obvious programming technique is not to keep anything in memory. This is actually quite a hard mindset to achieve. For example, it would be quite nice to keep a bit of information in memory about every file indexed, eg URL, title, size, etc. While this might work for 1,000 files, or even 25,000, it is not going to work for half a million.

Using disk instead of memory

If I cannot store information in memory, then I'll have to save it to disk. In fact, this may not be as bad an option as it sounds, as the operating system (and hardware etc) will cache disk data in memory, so performance time may not go down too significantly. Storing data on disk should not impact on ASP.NET memory usage, so should help ensure that my app isn't killed.

Example 1: word file list

I want to store a list of file numbers for each word found during the crawl. My first re-design had 32 of these numbers in memory, along with 4 other integers - with the rest on disk. A second redesign reduced this to 8+4. My latest design simply has 2 integers per word in memory. Everything else is on disk.

The first integer is the block number in the temporary data file. The second number is the last inserted file number - this makes sure that I don't update the block more than once per file for each word.

Example 2: file list

I want to know whether I've indexed a file before. I used to keep 2 (yes two) lists of files in memory. Now this is all written out to disk.

So how do I check quickly if I've already indexed a file? OK, I do have a List<> of all files indexed. Each List element is a structure that contains two integers, a FileHash and a FilePointer. The FileHash is the HashCode of the file path, and the FilePointer is the location of the full information on disk.

To check whether I've indexed a file, I find the HashCode of the file path. I then iterate through the List<>. If the hash matches then I use the FilePointer to retrieve the path from disk. If this matches, then the file has been indexed before. I keep looking if it doesn't match, in case two or more files have the same hash.

Example 3: reversed word list

To support wild cards at the start of a search, eg a search for [*hris], I need to reverse each word, so that "chris" becomes "sirhc". [I won't reveal my algorithm just now.]

At one stage, I created a list of reversed words as I went through the normal word list. However, I now write the reversed words out to disk first. I then clear the word list (see below) to reduce my memory footprint. Finally I read my reversed words in for processing.

Example 4: SortedDictionary.Clear()

I use a SortedDictionary during the indexing run. If I set this to null and do a garbage collect, then no memory is freed. If I call Clear() and then set this to null, the memory is cleared. [And I'm pretty certain that there are no other references to items in the dictionary.]

Should I use Cache?

Is it safe to use the ASP.NET Page.Cache? I presume that using this will still add to the memory used by the application, so the web app could still be shut down unilaterally, without trying to clear the Cache.

I do use the Cache as a part of the search process. However I set an expiry time of 5 minutes - this provides a useful cache while a user is searching, but clears the memory when they have probably gone anyway.

Storing data in the Session

I have just remembered that I store the search results for each user in a Session variable. This is useful, eg when they ask for the second page of hits for a search. This results data could be reasonably big, so I now think that this is not wise. The Session variable will presumably be cleared after say 20 minutes, but this is too big a risk. I'll have to store the results to disk, retrieve and clear as necessary.

Large Object Heap objects

This article on The Dangers of the Large Object Heap says that any object larger than 85kB (or 8kB for doubles) might result in increased memory usage. Try not to use large objects.
Does each collection or generic collection count as one object, or is each one a multitude of its individual components?

Current progress

A crawl of a 100,000 simple HTML files now takes 11 minutes and uses a maximum of 23MB of memory. When this db is loaded for searching, the rest state of the web app is 6MB. After a couple of searches this went up to 22MB.

The previous version took 83 minutes and used 126MB max memory. When loaded for searching, 44MB of memory is used, going up to 50MB after a couple of searches.

This is not exactly a completely fair test as the new code is not complete in several important ways. However it does show dramatic memory usage reductions. I am not exactly sure why there's such a dramatic speed improvement - it might be because of the reduced memory usage - or it could be the simpler not-really-complete algorithm.

DNN portal Import/Export Link Url bug

2009-03-29T13:40:00.007+01:00

In DNN DotNetNuke 4.92, you can use [Host][Portals] to export a complete Portal as a template to the Portals/_default/ directory. You can then import the template elsewhere using [Admin][Site Wizard].

Summary: if you have pages that have a "Link Url" that refers to another page on the site, then these links do not survive the import/export process properly. Currently, you will need to fix these up by hand after the import, going through [Admin][Pages] to edit the selected page's settings.

Preamble: in DNN, each page is identified by an integer TabId. This nomenclature stems from DNN's initial versions that refered to each page as a "tab".

Details: When a "Link Url" is set up to another page on the site, the page's TabId is stored as an integer in the Tabs database table Url column. When the portal is exported, this Url TabId number is stored in the template (in a <url> XML element). On import, the Url TabId is simply stored directly in the new page row Url column. However, the TabId of the desired "Link Url" page will almost certainly have changed, so the page will redirect the user to the wrong page.

Background: The Site Wizard does not really describe what it does very well. An old book says that the import process is *additive*, ie the pages in the template are *added* to the existing pages on your site. However this isn't entirely correct: if you select "Replace" in the wizard, then the existing pages are soft-deleted, ie their TabName has "_old" appended and the page is marked as Deleted.

The import Site Wizard assigns a new TabId to each imported page (if a new page is created). This means that it is virtually certain that the TabId-s have changed. If your template etc has hard-coded links to particular TabId-s, then these are almost guaranteed to be wrong.

It would be useful if it were possible to import a template and keep the original TabId-s. Currently, the portal export does not contain the current TabId for each page. Superficially it is also not possible to keep existing TabId-s as the Tab table TabID column is an identity. However it is possible to use the SET IDENTITY_INSERT command to insert a row with a particular TabId.

Reported on DNN Gemini bug tracker

To do:
- See if there is a better way of putting links (eg in Text/HTML and in code) so that they survive the import/export process. Me: in code you can do this using the TabController GetTabByName function.
- Double-check what the Ignore and Merge site wizard options do

Bro John adds:
- These problems typically cause an infinite redirect loop and that IE does not notice this but FF and Chrome do. Me: The problem in one case is that the Login page was not visible to anonymous users, so it redirects to the Login page ad mausoleum. The import process does not reset the LoginTabId; it only sets it if a tab with tabtype logintab is found. Unless the old LoginTabId is Replaced, this should be safe.
- The logon menu item typically fails so you need to have added a hand made login page to be able to log in to the site once you have created it ...

Environment.GetCommandLineArgs backslash and double-quote issue

2009-01-28T12:23:00.005Z

Just noticed that System.Environment.GetCommandLineArgs() handles command line arguments that contain a backslash (\) followed by a double-quote in a strange way.

Microsoft documentation says:
"If a double quotation mark follows two or an even number of backslashes, each proceeding backslash pair is replaced with one backslash and the double quotation mark is removed. If a double quotation mark follows an odd number of backslashes, including just one, each preceding pair is replaced with one backslash and the remaining backslash is removed; however, in this case the double quotation mark is not removed."

This becomes an issue when you use double-quotes to delimit parameters that may contain spaces. If a parameter is a directory such as C:\test\ then it will be quoted as "C:\test\" but it will be returned by GetCommandLineArgs() as C:\test" ie with a double-quote instead of a backslash.

In my case, I was able to add a space between the \ and the double-quote. Then Trim() in the receiving app.

The full command line is available in the Environment.CommandLine property.

Also: a command line argument such as a"b"c is returned as abc by GetCommandLineArgs().

Custom VS Web Setup Projects

2009-01-20T20:41:00.022Z

A Web Setup project installs an ASP.NET web application on a Microsoft Internet Information Services (IIS) web server. The simplest web application might consist of Default.aspx and Default.aspx.cs files; a simple web setup project would install these files into a directory of the installer's choice and mark that directory as an IIS application, eg so that the web app runs at http://localhost/installdir/

The Visual Studio 2008 Web Setup project looked like a good starting point for distributing a new version of my web application (with web service and a Forms app that tests the web service). I just needed to customise it to:

Add links to the web app in the Start Menu (eg to http://localhost/installdir/default.aspx)
Add links to the web app on the install wizard finished page
Set NTFS write permissions for the web app directory
[Later] Make the MSI install work in Vista

Little did I know what a task I had set myself. Perhaps buying an installation tool might have been worthwhile... Follow me, as I battle to achieve these modest aims.

My software is aimed at individual users and to run on servers. Running as an ASP.NET web app, it could fulfil both target systems. I want to have Start Menu links so that individuals have a means to access the web site easily. The Start Menu would also have a shortcut to a Windows Forms exe that would test the web servce.

Basic set up: Files, Program Files and Start Menu

First, make sure that you are targetting the right version of ASP.NET - you can choose this at the top right of the VS "Add New Project" dialog. Once your project is created, look at the project properties. Click on [Prerequisites] and make sure that your chosen base version is selected. I selected ".NET Framework 2.0 (x86)" and "Windows Installer 3.1".

Next, add the project output from your web app project. View the File System and add in your aspx pages (but not .aspx.cs), Global.asax and release Web.Config files, together with any other files you want in the web app directory. Make sure that the bin directory has all the needed assembly DLLs.

My Windows Forms application had best go in the Program Files directory, so I added a "Program Files Folder" special folder to the setup File System. I created a "Product" sub-folder for my software, and added the Forms app output to this folder. [Later on, I also put my custom installer to this folder.]

I added a "User's Start Menu" special folder to the setup File System. I added "Programs" then another "Product" folder inside. I want to add my URL links to the web app in here, but I had to do that in my custom installer. However I did create a shortcut to the Forms app. I had wanted to pass the actual web app URL as a parameter to this app, but this proved not to be possible, so I amended the app to get the URL from a file.

MSI Database overview

The web setup project creates a Windows Installer MSI file, and an accompanying Setup.exe. An MSI file has a real relational database inside that governs how the install proceeds. The database has a series of tables each with rows with various columns.

For example, the Dialog table has one row to define each dialog that can appear during the install. The Control table has rows that define each user interface element in the dialogs.

You can see what's in the MSI database using the orca tool, available in the Windows SDK. Later on, I'll use orca to build a Transform that changes the main text of the finished dialog box. The msitran tool can then be used as the setup PostBuildEvent to run this transform after every project rebuild.

The install process maintains various properties, some of which are defined in the Property table. Other properties are set at install time - these are the ones I am interested in:

[TARGETVDIR]: The chosen virtual directory, eg Product
[TARGETDIR]: The consequent web app path, eg C:\inetpub\wwwroot\Product
[StartMenuFolder]: The Start Menu, eg C:\Documents and Settings\All Users\Start Menu

NB: There are various Win32 functions that let you work with the MSI database, such as MsiOpenDatabase().

Custom Action Installer NET assembly

You can achieve some things in a .NET custom action assembly, but your code is quite isolated from the main install. I don't think you can use/edit the current MSI database, nor can you interact with any of the setup dialogs.

To create a custom installer, create a C# class library project - give it a useful name. Then delete the initial class1.cs. Add a new item "Installer Class" and give the file and class a meaningful name. Switch to code view. You will see that your class inherits from System.Configuration.Install.

There are various overrides that you can add. You will definitely want to override Install() and possibly Commit(). You will almost certainly also want to override Rollback() and Uninstall() - to undo any changes that you have done. In fact, you must override and call Install() even if you only want to work in the other methods.

For each override that you add, add a call to the base class at the start of your implementation, eg:

public override void Install(IDictionary stateSaver)
{
base.Install(stateSaver);
}

Compile this project and add the output to the web setup project File System Program Files "Product" sub-folder.

Note: if an exception is thrown in your Install() method, the install will rollback.

Web setup Custom Actions

In the web setup project, view the Custom Actions screen. Add a Custom Action for each of the types that you wish to support. Make sure that the InstallerClass property is True. For the Install action, set the CustomActionData as follows:

/TargetDir="[TARGETDIR]\" /TargetVDir="[TARGETVDIR]" /StartMenuFolder="[StartMenuFolder]\"

This sets three parameters that are available to your custom installer assembly. Note the double quotes, and that the backslashes that seem to mandatory in two cases.

Installer custom action

In your Installer() code, use the base class Context.Parameters StringDictionary to retrieve the values passed in the CustomActionData:

string StartMenuFolder = Context.Parameters["StartMenuFolder"];
string TargetDir = Context.Parameters["TargetDir"];
string TargetVDir = Context.Parameters["TargetVDir"];

Getting the web app URL

The URL of the installed web app will probably be http://localhost/product/ where product is the user's chosen virtual directory, as supplied in TargetVDir. However I want to try to check this. This code gets the path that should correspond to http://localhost/:

DirectoryEntry localhost1 = new DirectoryEntry(@"IIS://localhost/W3SVC/1/Root");
string localhostRoot = localhost1.Properties["Path"][0].ToString();

If this directory is C:\inetpub\wwwroot and the TargetDir is C:\inetpub\wwwroot\Product\ then I think we can be fairly certain that appending TargetVDir to http://localhost/ will give the correct URL of your installed web app. This code sets MakeLocalhostLinks to true if we can safely create URL shortcuts:

bool MakeLocalhostLinks = true;
if ((String.Compare(localhostRoot, TargetDir.Substring(0, localhostRoot.Length), true) != 0) ||
  (String.Compare(@"\" + TargetVDir + @"\", TargetDir.Substring(localhostRoot.Length), true) != 0))
{
  MessageBox.Show("Could not create Start Menu links", "Installer");
  MakeLocalhostLinks = false;
}

Add URL links to the Start Menu

I can now find our Start Menu folder that has just been created and add links there. A link is a text file with extension .url that has one line containing [InternetShortcut] and the next specifying the link after URL=

The following code does this job, creating a link to begin.aspx on the web app site, as well as creating a fixed link to the product documentation. In both cases, the path to the newly created link is saved in the stateSaver IDictionary, for use later on rollback or uninstall.

string UserStartMenuFolder = StartMenuFolder + @"Programs\product\";
if (Directory.Exists(UserStartMenuFolder))
{
  if (MakeLocalhostLinks)
  {
    string BeginLinkPath = UserStartMenuFolder + @"Begin.url";
    using (StreamWriter twBeginLink = new StreamWriter(BeginLinkPath))
    {
      twBeginLink.WriteLine("[InternetShortcut]");
      twBeginLink.WriteLine("URL=http://localhost/" + TargetVDir + "/begin.aspx");
    stateSaver.Add("BeginLinkPath", BeginLinkPath);
    }
  }
  string InfoLinkPath = UserStartMenuFolder + @"Product documentation.url";
  using (StreamWriter twInfoLink = new StreamWriter(InfoLinkPath))
  {
    twInfoLink.WriteLine("[InternetShortcut]");
    twInfoLink.WriteLine("URL=http://www.example.com/product/");
    stateSaver.Add("InfoLinkPath", InfoLinkPath);
  }
}

Commit

Commit is called when the install is complete. You cannot make changes to the stateSaver during Commit()

Commit() could be a good time to present some extra choices to the user, start an application or show a web page. Note that the installer waits for your method to return before continuing. You could spawn another process if you want to leave a dialog box open.

Rollback and Uninstall

If anything goes wrong with the install, or an uninstall occurs, you need to undo any changes you have made. In Rollback() and Uninstall() you have access to the values that were saved in stateServer. Both Rollback() and Uninstall() call my own new method RemoveCustomAdditions(). This gets the saved path strings; if they are present then the file is deleted.

public override void Rollback(IDictionary stateSaver)
{
  base.Rollback(stateSaver);
  RemoveCustomAdditions(stateSaver);
}
public override void Uninstall(IDictionary stateSaver)
{
  base.Uninstall(stateSaver);
  RemoveCustomAdditions(stateSaver);
}
private void RemoveCustomAdditions(IDictionary stateSaver)
{
  try
  {
    string BeginLinkPath = stateSaver["BeginLinkPath"] as string;
    if (!String.IsNullOrEmpty(BeginLinkPath))
      File.Delete(BeginLinkPath);

    string InfoLinkPath = stateSaver["InfoLinkPath"] as string;
    if (!String.IsNullOrEmpty(InfoLinkPath))
      File.Delete(InfoLinkPath);
  }
  catch (Exception ) { }
}
During rollback or uninstall it is best if you don't throw any exceptions, so catch and ignore these.

My web app may create data files during normal operation. The rollback/uninstall methods could remove these files. However, an upgrade installation will usually uninstall the software first (even if RemovePreviousVersions is false). To keep the data files through an upgrade, these must be left in place. My documentation tells the user to remove these data files for a complete uninstall.

There should be no need to undo any file permission changes as the directory should be about to disappear.

NTFS File Permissions

In my Install() method, I want to let my web app write to its directory and any sub-folders. In IIS5, aspnet_wp is the worker process that runs all ASP.NET web apps using username "ASPNET". In IIS6 and IIS7, the w3wp worker process runs ASP.NET web app application pool using username "Network Service". This is the code that changes the file permissions for both these user accounts for the TargetDir:

DirectorySecurity security = Directory.GetAccessControl(TargetDir);
try
{
  FileSystemAccessRule access = new FileSystemAccessRule("ASPNET",
    FileSystemRights.Modify,
    InheritanceFlags.ContainerInherit InheritanceFlags.ObjectInherit,
    PropagationFlags.None,
    AccessControlType.Allow);
  security.AddAccessRule(access);
  Directory.SetAccessControl(TargetDir, security);
}
catch (Exception ) { }

try
{
  FileSystemAccessRule access = new FileSystemAccessRule("Network Service",
    FileSystemRights.Modify,
    InheritanceFlags.ContainerInherit InheritanceFlags.ObjectInherit,
    PropagationFlags.None,
    AccessControlType.Allow);
  security.AddAccessRule(access);
  Directory.SetAccessControl(TargetDir, security);
}
catch (Exception ) { }

Changing the text in the final finished wizard page

I had originally wanted to provide a means of starting the web app on the final wizard page. So far I have not found a way to do this (either provide links/buttons on the page, or put checkboxes with options that are actions when Finish is pressed).

However I did manage to update the text to include the words "Now click on the Product links in the Start Menu".

Using the Microsoft SDK orca tool, I opened a first cut of my MSI. Create a New Transform. In the Control table, find the row for FinishedForm BodyText. Right-click on the Text column and Copy Cell. Paste it into Notepad and alter the text as you want. Copy the text and Paste Cell back into the Text cell. Select Generate Transform and save as an .MST file. Note that you cannot use "\r\n" in the cell text although line breaks can be pasted.

Use the Microsoft SDK msitran tool to apply the transform to an MSI, ie in the PostBuildEvent for your setup project. I found that calling msitran directly caused the build to fail because it has a return code of 1. I therefore had to use a batch file that called msitran and then did something innocuous to clear the return code, eg:

msitran.exe -a ..\AlterSetupFinishedText.mst ProductSetup.msi
dir

Vista Installation

If you double-click on the MSI itself in Vista, then it will fail with an obscure message "The installed was interrupted before.." This is because of lack of administrator privileges, even if you are logged in as an Administrator.

The simplest solution to this problem is to run the Setup.exe program that the web app project creates - you are prompted by Vista UAC to OK this privilege escalation.

The alternative is to Run as Administrator a command prompt, and then enter msiexec /i yourInstaller.msi

And finally, sign your assemblies and MSI

Ensure that your project assemblies are signed before rebuilding the Web Setup project. Sign the MSI and associated Setup.exe.

Suggestion for Microsoft

Can you provide a means of accessing the current MSI database in .NET Installer assemblies please.

Merge two sorted integer arrays

2008-12-05T09:48:00.006Z

My current programming task is to merge two sorted arrays of integers into one array while removing duplicate integers. There are no duplicates in the source arrays A and B. The source arrays can be altered. The integers in each array may tend to be in blocks which don't overlap, but this isn't guaranteed. The arrays may currently have up to 100,000 integers but will often have less than this. The output array should be truncated to 100,000 elements. I'm using C# .NET but that's irrelevant really - it's just the algorithm that's important.

I came up with several possible solutions, and am currently trying the last. What would you do?

1.
Walk through A and B simultaneously. If an integer in B exists in A then ignore it; if it doesn't exist then add it to the end of A.
At the end of this process, call Array.Sort on A (ie a QuickSort).
(Note that inserting a B element into A would surely take too long as it would involve moving all other A entries up.)
Quite efficient but I am concerned at speed of final sort.

2.
Create a new linked list with all the A entries.
Walk through the linked list and B simultaneously; for integers in B that need inserting, alter the linked list to add a new entry in the correct place.
At end, convert linked list back into an array.
Not very efficient creating a linked list and converting back from linked list.

3.
Walk through A and B simultaneously. Create a list structure where each element represents a block of integers in A or B, eg use integers 0-4 from A, integers 3-15 from B, integers 5-10 from A, etc.
At the end, create a new array from the list structure.
This is a more complicated version of my final simpler solution.

4.
Not quite sure if I thought this through properly.
Walk through A and B simultaneously. If the current integer in B is less than the current integer in A, then swap the two. This sounds simple but in fact the integer swapped into B will now possibly be out of order in B, so the element will need bubbling up until it finds its correct place.
At the end, simply add the remaining B elements to A.
Superficially attractive but more complicated than it looks.

5.
Walk through A and B simultaneously creating a new table C as you go.
Simple

Unless you can suggest otherwise...

Writing DNN custom modules

2008-09-03T20:39:00.016+01:00

This is the last of three blog entries that make up a full introduction to DotNetNuke (DNN) from a developer's point of view. This time I cover Writing Custom Modules to add your own functionality to a DNN web site. Previously I gave an Introduction to DNN and showed how to Write a simple DNN Skin. A concise version of the complete article first appeared on 1 July 2008 in UK programming magazine VSJ.

The phdcc.CodeModule module described in this article can be downloaded from here.

DNN5 has a new extension/package structure for custom modules and skins - however 'legacy' DNN3 and DNN4 module zips will install in DNN 5.

Overview

Custom DNN modules can be as complex as you want. I want to get started by analysing our freeware phdcc.CodeModule module which is available at dnn.phdcc.com and contains the full source. This module makes it easier to add your own functionality without having to write a whole new module. Your code has access to the database and the ASP.NET and DNN APIs.

phdcc.CodeModule simply renders your own user control. Once the module is installed, write your own code, eg in file intro.ascx. Upload the file to the DesktopModules/phdcc.CodeModule/ directory. Add an instance of the phdcc.CodeModule module to the desired DNN page and configure it to use intro.ascx. intro.ascx can contain normal HTML, ASP.NET code and DNN calls - phdcc.CodeModule will display this whenever requested.

phdcc.CodeModule's initial display:

Enter your control filename in the Settings:
Suppose intro.ascx contains this HTML and code to say hello to the current user:

<%@ Control Language="VB" ClassName="intro" %>
<%@ Import Namespace="DotNetNuke.Entities.Users" %>
Hello <% =UserController.GetCurrentUserInfo.Username%>

Then this is the output, within the SimpleContainer that we made earlier:
As stated earlier, you can switch off the container header so it simply says "Hello host". The code simply says "Hello" if no user is logged in.

Development environment

To develop for DNN, download the latest Starter kit vsi file for Visual Web Developer Express or Visual Studio 2005. Double click on this and the Visual Studio Content Installer creates a few DNN-related templates. To create a whole new DNN site, select [File][New][Web site...], "Visual Basic" and the "DotNetNuke Web Application Framework" template. After the site has been created, an instructions page is shown. You can simply compile and run if you have SQL Server 2005 Express installed. But wait...

To use the full version of SQL Server, create an empty new database, typically with a SQL Server owner login, and put the connection string in Web.Config in two places as instructed. I also set the only instance of "objectQualifier" to eg "DNN_" so that all DNN database tables etc have this prefix. I also usually increase authentication+forms-timeout from 60 (seconds) to let users stay logged in for longer, also setting slidingExpiration to "true". The last task that I might do before running is to convert from Visual Studio's built-in web server to use the local IIS - using an IIS virtual directory seems to work OK. This lets me test how the site looks in FireFox etc.

I then compile and run. With all the above already set up, you can select the "Auto" install option instead of the "Typical" wizard. If installed using "Auto", your first task will be to login as host and admin to change the passwords. Then go to [Host][Host Settings] eg to set the SMTP Server, and then set up the site/portal using [Admin][Site Settings]. Go back to Home and delete all the module instances - then off you go.

The created project has the 'code' half of DNN supplied as DLLs in the /bin/ directory. The web pages, controls, their code-behind and other resources are installed as web site source. All this lot can take a while to compile, which can be a bit frustrating when working on your own module - I did attempt once to convert DNN to a faster Web Project but I couldn't get it to work.

phdcc.CodeModule

Use [Host][Module Definitions] then "Install New Module". Browse to find phdccCodeModule_01_00_02.zip and click "Install New Module". Check the installation log for errors then press "Return". The following files will have been installed under the existing root DesktopModules directory.

DesktopModules
+ phdcc.CodeModule
+ App_LocalResources
+ Edit.ascx.resx
+ Settings.ascx.resx
+ View.ascx.resx
Edit.ascx, Edit.ascx.vb
Settings.ascx, Settings.ascx.vb
View.ascx, View.ascx.vb

The module zip also contains a manifest file phdcc.CodeModule.dnn that tells DNN where to install each file - in addition, it says that there are three controls: a View, Edit and Settings.

The View control displays the normal module output to users. The Settings control is at the bottom of the module settings page - visible to admin users. The Edit control is not used by phdcc.CodeModule yet but will typically be shown to admin users to set up the module content. You can have more user controls if need be.

View

View.ascx primarily contains the following placeholder into which your user control will be inserted. The view contains additional elements which are used to give instructions and show errors.
<asp:PlaceHolder ID="ViewControl" runat="server" />

The View.ascx.vb codebehind class is based on DotNetNuke.Entities.Modules.PortalModuleBase which is in turn derived from DotNetNuke.Framework.UserControlBase and eventually System.Web.UI.UserControl. These base classes contain many crucial DNN properties and objects, ranging from the PortalId to the current UserId. The View Page_Load uses PortalModuleBase.Settings to retrieve your control filename before adding it to the ViewControl PlaceHolder:

Dim ControlName = CStr(Settings("control"))
ViewControl.Controls.Add(LoadControl(ControlName))

If you have not specified your control yet, the code shows an asp:label and a "Settings" asp:button. If this button is clicked then you are redirected to the module's Settings - the DNN NavigateURL global method is used to create the correct URL to see the Settings. In DNN parlance, each page is called a "tab" so the TabID selects the page; there may be more than one module on a page, so the correct one is selected using the ModuleId:
Response.Redirect(DotNetNuke.Common.Globals.NavigateURL(PortalSettings.ActiveTab.TabID, "Module", "moduleid", ModuleId.ToString()), False)

phdcc.CodeModule could be improved by adding an "Edit Control" option to the module menu (to let an admin user create or edit the control in a text area edit box). The existing View implements the IActionable interface to do this job. The ModuleActions get property must return a DNN ModuleActionCollection with a new Action added using localised text. DNN sets up this action so that selecting it redirects to the Edit control.

Settings

The module settings page has a common user interface at the top of the page - our content is shown lower down, as shown above. The Settings.ascx user control primarily shows a labelled text box for you to type in your control filename.
<asp:textbox id="txtControlName" cssclass="NormalTextBox" width="200" runat="server" />

The codebehind Settings class is derived from DotNetNuke.Entities.Modules.ModuleSettingsBase. The LoadSettings method fills the text box with the current setting on first entry. ModuleSettingsBase.TabModuleSettings gets the same information that is retrieved by the view using PortalModuleBase.Settings. Please see my blog on DNN module and tab-module settings for full details of the different settings available.

If Not Page.IsPostBack Then
Dim ControlName = TabModuleSettings("control")
txtControlName.Text = ControlName
End If

When the Settings page Update button is pressed, the UpdateSettings method is called to store the new control filename and refresh the DNN in-memory cache:

Dim objModules As New DotNetNuke.Entities.Modules.ModuleController
objModules.UpdateTabModuleSetting(TabModuleId, "control", txtControlName.Text)
SynchronizeModule()

Localisation

The only remaining element of phdcc.CodeModule is the localisation files in the App_LocalResources directory. In this module, only the Settings.ascx.resx file is used. In Settings.ascx, the dnn:label control is used for the filename prompt:
<dnn:label id="lblControlName" runat="server" controlname="txtControlName" suffix=":">

This shows a help question mark followed by a label, with the actual text picked up from the resource file "lblControlName.Text" and "lblControlName.Help" strings. Within DNN you can edit these strings or create a new resource file for a different locale. DNN looks at the logged-in user's UserInfo.Profile.PreferredLocale property to determine which resource to use.

Tip 1

We recently wrote a simple phdcc.CodeModule user control that would not save its ViewState, eg:
<% If Not IsPostBack Then lblGiven.Text = "init" %>
<asp:Label ID="lblGiven" runat="server" />
If a button was pressed then lblGiven would not contain "init" on postback. The problem turned out to be that embedded code blocks <% %> are run in the PreRender phase, after the ViewState had been saved. The solution was to set the label in the Page_Load method.

Tip 2

In a phdcc.CodeModule control, it is useful to have access to the current DNN PortalModuleBase instance. The following code achieves this:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim ViewControl As Control = Me.TemplateControl.Parent
Dim View As Control = ViewControl.Parent
If TypeOf (View) Is PortalModuleBase Then
Dim pmb As PortalModuleBase = CType(View, PortalModuleBase)
Dim ps As PortalSettings = pmb.PortalSettings
End If
End Sub

Tip 3

Sometimes it is not clear whether to use DNN or ASP.NET functions. If in doubt, rummage around in the DNN source to see how they do it. For example, to determine if the user is logged in, I use ASP.NET Request.IsAuthenticated. In another case, I wanted to get someone's password given their UserId. After getting the Username using DNN APIs, I used the ASP.NET GetUser method to return a MembershipUser that is used to get the password.

UserInfo ui = UserController.GetUser( PortalId, UserId, true);
MembershipUser user = Membership.GetUser(ui.Username);
string pwd = user.GetPassword();

Database Modules

More substantial modules will typically want to store their own information in the database. The following example module shows a list of Text/HTML items (in an asp:datalist data bound list). There are admin options to Add Content items and define a template in Settings.

In Visual Studio, right click on the project name and select [Add New Item...], choose "DotNetNuke Dynamic Module" for VB or C#, enter a name such as "TestMod", then press OK. You will have to do two directory renames as per the shown instructions. If you chose C# then you will have to add to the main Web.Config codeSubDirectories element.

In [Host][Module Definitions] click on "Import Module Definition". In the Manifest list, select "TestMod.dnn" and click "Import Manifest". The TestMod module can now be put on a page but will show a ModuleLoadException until the database has been set up.

The new module will have code classes created in the \App_Code\TestMod\ directory. File TestModController.vb represents your business logic and provides access to the database from your user controls. The Text/HTML items are each represented by a TestModInfo.vb object, each of which is stored as a row in a database table. File DataProvider.vb describes a generic database interface, while SqlDataProvider.vb proves an actual implementation of this interface.

Controller

The generated TestModController class has a GetTestMods method that returns a list of TestModInfo objects. It finds the current data provider and calls its GetTestMods method, passing the current module instance id ModuleId. The data provider GetTestMods returns an IDataReader. The DNN Custom Business Object utility class CBO method FillCollection is used to create the TestModInfo list - it sees what fields have been returned in each IDataReader record and fills the corresponding properties in each TestModInfo instance automatically - quite a mouthful but certainly a useful tool. There is a similar method CBO.FillObject to fill just one object.

Public Function GetTestMods(ByVal ModuleId As Integer) As List(Of TestModInfo)
Return CBO.FillCollection(Of TestModInfo)(DataProvider.Instance().GetTestMods(ModuleId))
End Function

The controller also contains further methods GetTestMod, AddTestMod and UpdateTestMod which work with a single TestModInfo object, using matching functionality in the data provider.

The controller class also implements the DNN ISearchable and IPortable interfaces, to support searching and import/export of the module content into XML.

Database SQL

When a module is installed, DNN looks at the manifest version number and compares it to certain filenames in the zip. File 01.00.00.SqlDataProvider contains the SQL instructions to create any tables, stored procedures etc required to bring the database up to version 01.00.00. A script 01.01.03.SqlDataProvider would take the database to version 01.01.03. When installing as new, then both scripts will be run. If you are upgrading from say version 01.00.01 then only the second one is run.

Because you have created a module from a template, the database has not have been created. To set this up, you need to run the 01.00.00.SqlDataProvider script in SQL Server Management Studio, though you may want to rename some of the tables etc first. You should also first replace {databaseOwner} with "dbo." and {objectQualifier} with the "objectQualifier" that you used, ie nothing by default.

The generated TestMod SQL script creates a table called YourCompany_TestMod (for TestModInfo objects) and various stored procedures that correspond to the data provider GetTestMods, GetTestMod, AddTestMod and UpdateTestMod methods. The YourCompany_TestMod table contains a ModuleId field that corresponds to the unique module identifier with the same name in the DNN Modules table.

When you add a TestMod module instance to a page there is no event raised to let you populate the database. The View code knows its ModuleId, so it calls GetTestMods to obtain all TestModInfo objects for the current module instance. If it finds that there are no such objects, then it creates a default TestModInfo and adds it to the database.
Dim objTestMods As New TestModController
Dim colTestMods As List(Of TestModInfo)
colTestMods = objTestMods.GetTestMods(ModuleId)
If colTestMods.Count = 0 Then
Dim objTestMod As TestModInfo = New TestModInfo
objTestMods.AddTestMod(objTestMod)
colTestMods = objTestMods.GetTestMods(ModuleId)
End If

There is no event raised when a module is deleted from a page. So when is your per-module-instance data deleted? DNN has a Recycle Bin for pages and modules that have been deleted. When a module is finally deleted from this bin, the module instance row in the Modules tables is deleted - our YourCompany_TestMod table has a cascade delete relation on this row, thereby deleting the right rows in our table. Unfortunately, there is no programmer event that corresponds to this final delete.

Finally, the generated module also contains another SQL script file Uninstall.SqlDataProvider that is run if the module is uninstalled from the system in [Host][Module Definitions..]. The SQL in there naturally deletes all tables etc that were created in the database.

I will leave an exploration of the rest of the code as an exercise for you dear reader. There are no imposed limitations on how you use the database, so you can create whatever tables you want. Your code has access to all DNN and ASP.NET data, not to mention bog standard Session variables etc, so the world is your oyster.

And more...
If you develop a module and want to keep your source private then follow the documentation instructions. Another option is to make the App_Code section of your module into a separate DLL class library project (while keeping the web site controls with full source). Include the project DLL in your module's ZIP so that it installs on other systems in the /bin/ directory.

Module code also has full access to the web site file system. It is common to store files relating to a site in the relevant portal directory, eg /Portals/0/. It would be sensible if each module worked within a suitably named sub-directory.

There is stack of DNN functionality and namespaces which I haven't touched upon. However I hope that I have given you a flavour of what DNN is and how to extend it with your code – in a simple way using phdcc.CodeModule, or by writing a full-blown custom module.

Writing DNN Skins

2008-09-03T20:03:00.008+01:00

This is the second of three blog entries that make up a full introduction to DotNetNuke (DNN) from a developer's point of view. This time I cover writing a skin and a container to change the appearance of a DNN web site. Last time, I gave an Introduction to DNN - next will be Writing Custom Modules. A concise version of the complete article first appeared on 1 July 2008 in UK programming magazine VSJ.

The simple skin and container used in this blog can be downloaded here.

DNN5 has a new extension/package structure for custom modules and skins - however 'legacy' DNN3 and DNN4 skins will install in DNN 5 - select Skin as the legacy skin type.

Overview

This time, I look at how to create a skin that defines the appearance of a site and write custom modules that provide content on a page. The figure below shows a typical DNN layout: the skin defines the page layout, including one or more panes. An admin user can place one or more modules in a pane, with each module wrapped in a container.

Skins

A skin package defines how DNN presents its content, ie the overall HTML of the page, all the CSS styles, and various parameters for the breadcrumb and menu screen elements. A container package defines how each module container looks in a similar way. If you install a ‘skin’ it typically contains both skin and container packages. An individual skin package may contain several different layouts, eg fixed width and full-screen instances.

DNN seems to have a preference for fixed-width skins and fixed size fonts. I presume that this is an attempt to achieve a perfect appearance on the page. However, it is best to make use of all the screen width and make the page work well as font sizes are changed by the user. Fixed sizes may achieve the desired effect in Internet Explorer, as long as the user doesn't Zoom. However in FireFox, changing the text size also changes fixed point sizes in the same way as IE Zoom. For more details, see my previous blog entries: DotNetNuke Internet Explorer fixed size fonts and DotNetNuke Internet Explorer font scaling.

These CSS files are used by DNN, in this order, with the Portal CSS included last so its definitions take precedence over any earlier ones.

Portal default CSS (in /portals/_default/default.css)
Current skin CSS
Current container CSS
Portal CSS (eg in /Portals/0/portal.css)

The ‘portal default CSS’ defines styles for most generic HTML elements (H1, TD etc) though strangely not P – using fixed-point font sizes in most cases; it also defines CSS classes for all the standard DNN elements.

The ‘portal CSS file’ contains blank elements to let you know what the standard definitions are – this file can be updated in the [Admin][Site Settings] menu.

Skin and container development

If you have installed the DNN Starter Kit into Visual Studio, you can create a skin and container using [File][New][File] - "DotNetNuke Skin" template. However, to illustrate a basic skin and container, I have developed a simple example which you can download. These are the files that I used to create the example:

skins/simpleskin.htm
skins/skin.css
skins/skin.xml
skins.zip

containers/simplecontainer.htm
containers/container.css
containers/container.xml
containers.zip

simple.zip

The files in the skins directory are zipped up to make skins.zip, ditto for containers. Then these two are zipped together to make simple.zip that contains both the skin and container packages.

Each site has one current skin and one current container. When you install a skin, the files are unzipped and a skin user control is created - when chosen as the current skin, this user control is inserted into the main page output. A skin has pane elements - DNN inserts the right modules into each pane, each wrapped in a container. The current container is also a user control with a ContentPane that contains the actual module output.

If you install a skin from the [Admin] menu, then the packages will be installed in directory \portals\0\skins\simple\ and \portals\0\containers\simple\. The file simpleskin.htm contains various template tokens, such as [LOGO], that are expanded on installation into file simpleskin.ascx – the ASP.NET user control that is included in the DNN output. If you update the in-situ simpleskin.htm, then click on "Parse Skin Package" in [Admin][Skins] to recreate simpleskin.ascx to see your changes. (Don't include any ascx files in your final skin/container zip package.)

The SimpleSkin.htm skin template defines the basic HTML of the main DNN output, typically using tables for layout. Various tokens appear in square brackets, replaced by DNN at install/runtime. The main output panes are defined in this example as table cells with the predefined correct id names. If you are better at XHTML than I am, change this template to avoid tables.

<table class="ss_header" width="100%">
<tr>
<td>[LOGO]</td>
</tr>
</table>

<table class="ss_menurow" width="100%">
<tr>
<td class="ss_menu">[SOLPARTMENU]</td>
<td class="ss_menu_user">[USER] [LOGIN]</td>
</tr>
</table>

<table class="ss_main" width="100%">
<tr>
<td class="ss_crumb">[BREADCRUMB]</td>
<td class="ss_date">[CURRENTDATE]</td>
</tr>
</table>

<table class="ss_content" width="100%">
<tr>
<td id="LeftPane" runat="server" />
<td id="ContentPane" runat="server" />
</tr>
</table>

The skin.css file contains all the definitions you want (not forgetting to override the DNN defaults if required), eg simply:

.ss_date,.ss_menu_user
{
text-align:right;
}

The skin.xml file defines parameters that are used by DNN. The first one shown tells DNN to use the » character as a separator between the breadcrumb page names. The second set of parameters makes the menu horizontal, etc.

<Objects>
<Object>
<Token>[BREADCRUMB]</Token>
<Settings>
<Setting>
<Name>Separator</Name>
<Value><![CDATA[ » ]]></Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[SOLPARTMENU]</Token>
<Settings>
<Setting>
<Name>display</Name>
<Value>horizontal</Value>
</Setting>
...

The SkinContainer.htm container template looks similar to the skin template, with tokens replaced when the container is rendered. The main module output is in the ContentPane. The container.css file contains definitions for the CSS classes used in the container template. Similarly, container.xml defines various container-level parameters.

<table width="100%" class="c_all">

<tr>
<td class="c_header" colspan="2">
<table width="100%">
<tr>
<td>[SOLPARTACTIONS]</td>
<td>[ICON]</td>
<td style="width:100%;" class="c_header_title">[TITLE]</td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="c_content" id="ContentPane" runat="server" colspan="2" />
</tr>

<tr>
<td>[ACTIONBUTTON:1]</td>
<td>[ACTIONBUTTON:2]</td>
</tr>

</table>

There are many more tokens and options that you can use. Ideally you should also include a preview of your skin and container by including in each zip a JPG with same name as your template file.

DNN Introduction

2008-09-02T08:46:00.013+01:00

This is the first of three blog entries that make up a full introduction to DotNetNuke (DNN) from a developer's point of view, with the following pieces covering Skins and then Writing Custom Modules. A concise version of the complete article first appeared on 1 July 2008 in UK programming magazine VSJ.

Overview

DotNetNuke is not a good name for software, but don't let that put you off. Call it DNN, and think of it as a programmable content management system that's open source and runs on ASP.NET 2+ servers. Ie it lets you create and maintain a web site easily.

Although you may be familiar with the basic idea of a CMS, this first article will introduce you to DNN features, terminology and usage before getting stuck into new skins and programmable modules next time.

If you want to use Microsoft technology, DNN lets you deliver a working site with relative ease - it can be handed over to a non-technical site administrator who can do all the regular site updating, eg adding pages, editing text, making announcements etc. Web space at our preferred host Crystaltech starts at US$35 per year for a small site. At that price everyone can have a web site: I set up a badminton club site for a friend and he's now running it with no intervention from me.

There are some problems running DNN in Windows Server 2008 in Medium Trust.

When trying to decide between various systems, you will want to know:

Is it reliable? We are now running a number of DNN sites with many thousands of users and they seem solid.
Is it maintained? There are regular fixes and improvements for DNN, eg it now uses AJAX in places.
Does it have the features you want? DNN handles users well, has a good framework to add functionality, and there are lots of add-on modules available.
Can I learn it easily? It will always take a while to get in-depth understanding of a new system. With DNN you can set up a basic site on day one, but it might take months to get fully to grips with writing modules. DNN was a bit easier for us as we are used to ASP, ASP.NET and Microsoft hosting. To handle development, staging, production and backup servers, make sure you are able to copy all content and users to another site.

DNN is not perfect. The Text/HTML Editor is not good enough for serious use. Cute Editor and other plug-in editors may be better. They all suffer from not being clever enough at handling complex reformatting - what you see is seldom what you get. Note that users must have cookies enabled to be able to register and login at DNN.

Extensibility

Supplied Modules
Account login
Banner adverts
Feed explorer
Google Adsense
Links
Search Input
Search Results
Text/HTML
User Account
Announcements
Blog
Documents
Events
FAQs
Feedback
Forum
Help
IFrame
Media
NewsFeeds
Reports
Repository
Store
Survey
UserDefinedTable
UsersOnline
Wiki
XML

DNN serves most content using modules, eg a text module comes as standard, along with the others listed below. There's a thriving third-party market for modules, some for free but largely at low cost - usually listed and bought at SnowCovered.com. At phdcc, it is crucial that we can develop custom modules to provide the unique functionality that some web sites need. We have also released some freeware and commercial modules. Custom modules are written as a set of standard ASP.NET user controls, using extra DNN APIs as needed, with the end result bundled into a ZIP for distribution. Custom modules are usually written in Visual Basic like DNN itself, but C# is possible.

If you like to hedge your bets, code in a DNN module could be written to run on a plain ASP.NET system. Or perhaps do it the other way round: for example, the YetAnotherForum.net open source software will run as a standalone web app, but they have added some code and packaged it as a DNN module.

DNN's presentation is determined by skins which define the appearance of the whole site and each module container. Various skins are provided for free, while others are available for purchase at SnowCovered - you can write your own relatively easily. DNN skins tend to use fixed point size CSS definitions so it doesn't scale in Internet Explorer as you change text size - more on this next time and in these previous blog entries: DotNetNuke Internet Explorer fixed size fonts and DotNetNuke Internet Explorer font scaling.

Technology

It is worth saying right now that DNN is almost entirely database and ASP.NET driven. All DNN output is generated from a single ASP.NET page that dynamically loads whatever content needs to be shown, using many levels of ASP.NET .ascx user controls. So the site will not be as fast as from static content, but this is an acceptable price.

Although all DNN requests are run through the root default.aspx, it has a friendly-URL HttpModule that shows a unique URL with pertinent text for each page. Note that the standard menu system is implemented in JavaScript so it does not provide hard links. So make sure that you provide hard links somewhere so that search engines can trundle through your site.

The database can be in SQL Server Express or the full SQL Server. Strictly speaking, the code has been written in a generic way using a provider pattern that allows other database types to be used, but in practice I have only ever seen the Microsoft databases supported.

Doing backups in DNN can be complicated. There are facilities to export and import your site as a template in XML - but I am not confident that this gets a whole site design – and does not store the users. Doing a database backup will probably get most data. However to be certain, you will also need to backup the entire file system as some modules store their data in files.

DNN uses standard ASP.NET forms authentication to handle its users (recently, Windows LiveID as well). After a fresh install, the 'host' account lets you configure the entire site, while the 'admin' account has a reduced set of permissions that is suitable to give to a non-technical site administrator. One "host" DNN instance can have one or more "portals" (one for each site/domain name), so there is one admin account for each portal. We wouldn't recommend having more than one portal - it's not worth the fuss when web space is so cheap. Things go wrong if you attempt to run DNN from a sub-directory, so always make sure that it runs at the root of a domain name - one approach is to set up a sub-domain such as dnn.phdcc.com. On our shared host, we did this by adding an extra DNS Host Record (A) for "dnn" that points to the IP address of a separate hosted web space.

DNN has built-in support for internationalisation, so you can download language packs for DNN itself so that all DNN management will be done in your preferred language, including email templates. Well written modules will use the same techniques but will usually only have English text provided. As I understand it, there is no direct support for showing a particular module (eg French intro text) if the user's browser setting or preferred locale is French.

It is helpful to understand a little of the DNN directory structure. As well as /bin/ and /App_Code/ directories, each supported site has a directory, so the first site portal (with a programmer PortalID of zero) has its file store at /Portals/0/. [Admin][File Manager] opens at this directory. If, with your super powers, you FTP a new file into this directory, then some of the DNN code may not initially see it. There is an option in File Manager to synchronize with the actual files present - don't forget to tick the Recursive box to sync all the sub-directories. You can also synchronise programmatically using the DNN FileSystemUtils.Synchronize method. Finally, the directory /Portals/_default/ contains definitions that are available for all portal sites, eg skins and containers.

DNN has a basic search built in, using the search information provided by each module. However the search will not index file documents such as PDFs.

Downloads

You can get the latest version of DNN, now 4.8.4, from http://www.dotnetnuke.com/ once you have registered. The "Install" package is for production use. Get the "Starter Kit" and "Documentation" packages if you are doing module development - there is a full "Source" release as well. For installation, your primary requirement is a connection string for a database, and you will need to make sure that DNN ASP.NET has full read, write and delete access to the file system. An installation wizard will take you through these options and set up the host and admin accounts. There's also an "Upgrade" package - but make sure that you have done a full backup before using this. When upgrading, you must carefully merge the existing DNN Web.Config file with the new one supplied in Release.Config, in particular keeping the existing ‘machineKey’ element, ‘SiteSqlServer’ connection strings and ‘objectQualifier’ value.

I have one of the standard books, 'Professional DotNetNuke ASP.NET Portals' for old DNN 3. This aims to cover setting up and administering a site, as well as writing skins and modules. I didn't find it very helpful and it is hopeless as a programmer reference as the index does not list the things I looked for. The "Documentation" download has various useful documents, but I seem to have missed a trick somewhere as I haven't found or generated a full DNN API help file. That said, it is great having the full DNN source available so you can look up methods and see how they work.

I haven't ever wanted to alter the main DNN code which is just as well if you want to track upgrades. There's a large developer community at work in the DNN help forums. I made one paltry contribution to sorting out one bug. I have however updated the wiki module to send me an email whenever a wiki entry is updated; I was pleased to be able to compile the wiki project, understand the code, and make my changes with relative ease.

Using DNN

Here's a simple overview of how to use DNN, without endless screen shots. A DNN page is typically laid out as shown below. The current skin defines various panes on the screen where you can place one or more modules. After you have added a module, it appears in a container, a rectangle with a title bar in a style determined by the container skin. DNN is generally very configurable, eg you can switch off the title bar for each container.
When logged in as 'host' or 'admin' you get a Control Panel at the top of the page as shown below - most functions are pretty obvious.
DNN supports various roles that determine which users can do what. Roles can be assigned to the view and edit visibility permissions for each page and module; the File Manager can set up view and write permissions for portal directories. Users who have the "Administrators" role can access everything. The other standard roles are 'All Users', 'Registered Users', 'Subscribers' and 'Unauthenticated Users'. You can set up new roles, for example, a fee-paying role that might be used to allow access to privileged content for say 3 months. DNN has built in support for several payment providers, including PayPal.

Below is an amalgamated screen shot that shows the menu options available to admin and all-powerful host users. Below is a typical Text/HTML module shown with its container title - and a module menu visible to admin users with edit permissions. When you write a module, you can add functionality to the module Settings page, and also add items to the menu itself - in the same way as "Edit Text" as shown.

DNN maintains a profile for each registered user, ie a set of properties of various types. As well as the basic profile properties of Username, FirstName, LastName, DisplayName and Email, DNN has many default properties for your Address, Contact Info, Biography, Time Zone and Preferred Locale. You can delete or add properties and mark individual properties as being required if desired. At program level, each user has a unique UserID; if a user joins with Username 'chris' then unregisters and subsequently someone else joins with the same Username 'chris', then these two users will have different UserIDs.
DNN has a rather fixed user interface for registration and setting your profile. For this reason, our phdcc.Data module has a form generator that lets you build custom alternatives to these facilities.

In conclusion, DNN provides a useful set of CMS/multi-user facilities for Microsoft-technology web sites. Any limitations can often be overcome using one of the many modules available. Everything DNN outputs is code and database driven which makes it harder to backup and understand what is going on. Next time, we'll look in detail at how to set up new skins and program modules.

Simple DNN skin download for my VSJ article

2008-07-08T09:34:00.004+01:00

An article I have written about DotNetNuke (DNN) has just appeared in print in July/August 2008 issue of Visual Systems Journal (VSJ). The article appears in my blog in three entries: DNN Introduction, Writing DNN Skins and Writing DNN custom modules.

Please read my blog article DNN module and tab-module settings for an article update on the different settings available in DNN module development.

The simple skin and container can be downloaded here.

The phdcc.CodeModule module can be downloaded from here.

DNN module and tab-module settings

2008-05-19T20:55:00.006+01:00

If you write a custom DotNetNuke (DNN) module, be careful with your use of the two types of settings that can be associated with an instance of a custom module - there are Module settings and Tab-Module settings. The difference becomes important (a) when you use Add Existing Module on another page and (b) when you Export Content from a module. In general, it makes sense to use the Module settings.

The Module settings are associated with all instances of a module on several pages, while the Tab-Module settings are only associated with one instance (on a single page).

When you copy a module instance to a new page with Add Existing Module, only the Module settings are available on the new page. So, if you want settings to be available after a module has been copied, then use Module settings, not Tab-Module settings.

When a module's content is exported using Export Content, the module controller is called with the ModuleId only (ie without the TabModuleId). This only provides easy access to the Module settings.

Implementation:

Most of the following implementation examples require the use of the DNN ModuleController, obtained as follows in C#:
ModuleController objModules = new ModuleController();

Most custom modules have a Settings user control that appears as a part of the module's main Settings page. When the user clicks on Update, the module setting's UpdateSettings() method is called. To save a Module setting, eg for a CssFile text box, use the following:
objModules.UpdateModuleSetting(ModuleId, "CssFile", txtCssFile.Text);
If instead, you want to save a Tab-Module setting, use the following:
objModules.UpdateTabModuleSetting(TabModuleId, "CssFile", txtCssFile.Text);

The Settings user control is initialised using its LoadSettings() method. The ModuleSettingsBase Settings[] property provides access to the current settings, eg:
txtCssClass.Text = Settings["CssClass"] as string;
Settings[] contains both the Module and Tab-Module settings, with the Tab-Module settings taking precedence.

Within your View control, the PortalModuleBase Settings[] property is the same.

Other methods available are objModules.DeleteModuleSetting() and objModules.DeleteTabModuleSetting().

To implement Export Content, your module controller must implement IPortable. You must then write an ExportContent() method that might start as follows:
public string ExportModule(int ModuleID)
{
ModuleController objModules = new ModuleController();
Hashtable Settings = objModules.GetModuleSettings(ModuleID);
string CssFile = Settings["CssFile"] as string;

Several of my existing modules used Tab-Module settings. I have converted them to use Module settings. I was careful to transfer any existing settings from Tab-Module to Module. I used a "SettingsInModule" module setting set to "done" to indicate that the settings had been transferred. My conversion method was careful to work for brand new modules where no settings exist at all.

DotNetNuke Internet Explorer font scaling

2008-04-28T11:57:00.005+01:00

Updated May 2009 to cope with MinimalEntropy skin.

When you put content onto a DotNetNuke (DNN) site you must think how other users see your information. By default, if your visitors use Internet Explorer (IE) then most of your site will NOT resize according to the user's Text Size setting. In my opinion this is not good practice because some users prefer larger text than others. This post shows how to make DNN fonts scale correctly. An earlier post shows what happens if you do not make my changes.

In this post I make the changes in a portal.css stylesheet file - click here to download DNN_ScalingFont_Portal_090511.css. You may use and update this file freely provided you retain the attribution to Chris Cant. Note that this CSS file only affects the fonts shown to ordinary users - Edit and Admin fonts are unchanged.

To use my CSS file, log in as an Administrator or Host then choose [Admin][Site Settings]. Scroll down and open up the [Stylesheet Editor]. Select all the existing text, copy and paste to a local text file as a backup. Insert my CSS file at the start of the style sheet textarea, then click on [Save Style Sheet]. To see the effect of the new file, you will have to navigate to a new page (eg Home) and refresh your browser (F5).

Note that my CSS stylesheet is not guaranteed to make all fonts scale on your site - the current skin and container may have definitions that take precedence over the portal CSS. Please test this stylesheet carefully on all pages of your site before putting into production use.

How it works

DNN uses several CSS stylesheets when rendering content. The following stylesheets are included in this order:

Portal default CSS (in /portals/_default/default.css)
Current skin CSS
Current container CSS
Portal CSS (eg in /Portals/0/portal.css)

The portal default CSS has fixed-size definitions for many generic HTML elements as well as many DNN-specific classes. My substitute Portal CSS overrides these definitions. Because the portal CSS is included last, it has a good chance of having its definitions used, though some skins and containers may have specific definitions that take precedence.

The DNN Portal default CSS uses fixed size fonts, eg H1 has font-size:20px. This is fixed in my CSS by specifying the font size as font-size:x-large which lets IE resize the font as the user changes Text Size.

Font Family Definitions

The first section of my CSS gathers all the font family definitions into one place. By altering the definitions here, you should change all the font families that are normally visible. The normal fonts are defined here as being Tahoma, Arial, Helvetica; the BLOCKQUOTE, PRE and CODE elements are Lucida Console, monospace. Alter all instances of both of these as you wish.

Scaling fonts and default weights/colours

The next section of my CSS file does the main work of redefining generic HTML tags and DNN classes. The general HTML elements are put back to standard font size, colour and weight. Firefox (FF) and IE have different (but similar) defaults - the IE default is used.

Next, various DNN classes are defined to use scaling font sizes.

Main menu and Module container menu scaling

The main menu and module container menu are now made scaling. The main menu bar by default has a fixed size of 16px. This is changed to have a scaling size of 2em. The font sizes of the menu classes are defined as 1em. A similar job is done for the module container menu classes.

Other classes

The existing style sheet has definitions for various classes used by the standard DNN template. In many cases you can clear these definitions.

Example sites

DotNetNuke Internet Explorer fixed size fonts

2008-04-25T10:33:00.007+01:00

DotNetNuke (DNN) by default uses many fixed size fonts in its standard CSS styles. I show the effect of these fixed font sizes in Windows Internet Explorer (IE) as you change the text size from Smallest to Largest. Within Text/HTML modules, everything is fixed size except text within TD elements.

DNN uses several CSS stylesheets when rendering content. The following stylesheets are included in this order:

Portal default CSS (in /portals/_default/default.css)
Current skin CSS
Current container CSS
Portal CSS (eg in /Portals/0/portal.css)

The Portal default CSS file has definitions for many generic HTML elements (as well as defining many DNN specific CSS classes). For example, tag H1 is defined as having font-size: 20px;

DNN defines fixed font sizes for these generic HTML elements:
H1, H2, H3, H4, H5, H6, DT, TFOOT, THEAD, TH, SMALL, BIG

There are two cases that I would like to highlight: (a) writing HTML within a Text/HTML module and (b) writing HTML within a custom module or in a skin/container.

In the following examples, you will need to remember that the module output is encased first a module container and (outside that) the skin. In the test environment, both the skin and container ContentPane elements are TD elements.

IE Scaling in a Text/HTML module

When you place a Text/HTML module on a page, the module always surrounds the entire text in a DIV element that has an attribute class="Normal". The Normal class is defined in the default CSS as having a fixed point size (font-size: 11px;).

The following image shows two screenshots that let you compare how Internet Explorer displays various tags with the Smallest font size on the left and the Largest font size on the right. As you can see, the only text that scales is within a TD tag.

It is important to understand what is happening for the other elements. The P tag for instance does not have a definition in the default CSS. However it inherits its font size from its surrounding DIV tag which has class "Normal" that has a fixed size. For some reason, the TD tag does not inherit this font size.

Note that other tags in the example have fixed font size definitions in the default CSS, eg H1 is defined as having font-size: 20px;

IE Scaling in a custom module or skin/container

The following screenshot shows the same HTML - this time in a custom module (not Text/HTML). The output will be the same if you place the HTML within a skin or container.

In this case, the HTML is NOT surrounded by a DIV element and so the HTML does not inherit the Normal class. This time, the P, TD, DIV, DD, BLOCKQUOTE and PRE tags scale as you change the IE font size. This is because all these elements do not have a (fixed size) definition within the DNN default CSS. All the other elements stay the same size because they do have fixed size CSS definitions.

Conclusion

When you put content onto a DNN page you must think how other users see your information. If your visitors use Internet Explorer then most of your site will NOT resize according to the user's Text Size setting. In my opinion this is not the recommended practice because some users prefer larger text than others - more on how to make all your text resize in my next blog entry.

The Firefox Text Size and Internet Explorer Zoom Level options DO alter the size of fixed size fonts.

To achieve a consistent fixed size effect you need to provide a font size definition for any TD elements you use within Text/HTML modules. For text in other modules or skins, you need to think carefully about which elements scale and which do not.

To change the sizes of the fonts used for various elements, you can alter any of the CSS files mentioned at the top of this post - typically it will be easiest to alter your Post CSS file.

ViewState in ASP.NET Embedded Code Blocks

2008-03-09T16:26:00.003Z

This morning I had trouble getting an ASP.NET user control to access its ViewState on postback. The crucial trick was to populate control items in a Page_Load function not in an embedded code block. The reason is because the code block is only run at render time which happens after the ViewState has been saved.

(I had been loading the user control dynamically using LoadControl, but that turned out to be not relevant.)

Now, within a user control, suppose I have a wee label and an ineffectual button:

<asp:label id="saver" runat="server" />
<asp:button id="Button1" runat="server" text="Go" />

If the label is set using an embedded code block
<% if (!IsPostBack) saver.Text = "Am I saved"; %>
then it is not preserved/shown after the "Go" button has been pressed.

However, if it is set in Page_Load then the label text is shown correctly after "Go" is pressed.

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
    saver.Text = "Am I saved";
}

JSON web apps without Ajax

2007-02-10T12:51:00.000Z

This article first appeared in the December 2006 issue of Visual Systems Journal (VSJ).

In the July/August 2006 issue of VSJ, Mike James pondered how best to design new web applications. Good responsiveness means that more code has to be moved client-side into the browser, making Ajax requests to the server and updating the page on the fly or in response to user actions. However, good design also implies a separation between presentation HTML, presentation code, business logic and the data handling layers, as is possible with various server-side technologies such as ASP.NET.

My idea presented here is to keep the client-side code as separate from the server-side code as possible, and to keep on using the good design practices techniques server-side.

If you generate Ajax requests yourself and update the page DOM, then the data can get out of sync with the server-side representation. For example, in ASP.NET a server-side variable <asp::Label .. /> is rendered as an HTML <SPAN>; if you update the SPAN in JavaScript then the new value is not necessarily present server-side at the next post-back. I tried to resolve this a few months back and got in a terrible mess, so I gave up. Nowadays, for ASP.NET, various frameworks such as Atlas hide these difficulties; essentially you carry on coding server-side as usual and the framework generates the right JavaScript and Ajax behind the scenes to improve responsiveness for your GridView or whatever.

My most recent project required good interactivity on the client-side but also access to good programmability and a database on the server. On the server I decided to stick with what I now know best, ASP.NET and SQL Server. Using stored procedures effectively provided a data access API, as well as improving security. I also used the ASP.NET membership and profile features which provided various levels of abstraction above SQL Server database views, stored procedure and tables. My data tables were keyed off the ASP.NET user information, so my stored procedures looked up some data in the ASP.NET membership tables.

There are two client applications: a specialised photo viewer and photo designer. These did not correspond to any available server controls so there was no quick way to implement these with high responsiveness.

My first reaction was to make Ajax requests to find which photo to show next. However I eventually realised that the client apps do not need to ask the server for this information because it could be included with the page when it is loaded. This makes the pay-load for the page a bit bigger but the pay-off is a better response time because it does not have to query the server - this also reduces the load on the server. This approach also gives better compatibility with some older browsers that do not support Ajax requests.

The design could be summed up as having client applications that were largely separate from the server code. Most pages on the site could be handled by standard ASP.NET code using the full monty of server-side facilities. However the crucial client applications were kept standalone as far as possible - this should also help to achieve the aim of operating standalone off-site or as a mashup on other pages.

I had previously decided that the photo information should be stored on the server in an XML file. Some of this information is also contained in the site database, but I thought that it was important to have all the photo-site data together in one easy-to-use place. As a consequence there is a need to maintain consistency between the database and the XML, eg if a user deletes a photo then the database entry is removed; the XML also needs to be updated.

Client photo viewer app

Anyway, I needed to pass the XML data to the web page so that the photo viewer client app knew what to do. I decided to do this by converting the XML to JSON and passing it to the client app JavaScript. In the codebehind C# for the ASP.NET page, I load the XML and convert it to JSON using the code I described in last month's article. The JSON is passed to the page using a ClientScriptManager RegisterStartupScript call which eventually invokes the page processJSON() JavaScript function. The one trick to this technique is to realise that the JSON is interpreted twice, once when processJSON() is called, and again when the JSON parser is called. To resolve this issue, simply replace each \ with a \\ before sending the JSON string off.

    XmlDocument doc = new XmlDocument();
    doc.LoadXml("<whatever.xml>");
    string JSON = XmlToJSON(doc);
    JSON = JSON.Replace(@"\", @"\\");
    ClientScriptManager cs = Page.ClientScript;
    cs.RegisterStartupScript(GetType(), "Startup", "processJSON('" + JSON + "');", true);

ASP.NET inserts the processJSON() call at the end of the web page so that it is called after almost everything else has been loaded. I'm not sure if this corresponds exactly to the BODY onload event, but it seems to work OK.

The page HTML should include any JavaScript source files that the project requires:

    <script src="json.js" type="text/javascript"></script>
    <script src="ClientApp.js" type="text/javascript"></script>

The ClientApp.js should process the JSON as is appropriate for your application:

    var obj;
    function processJSON( JSON)
    {
        obj = JSON.parseJSON();
        if( !obj)
        {
            alert("JSON decode error");
            return;
        }
    }

Client designer app

The photo viewer client-side app does not need to interact with server-side code (all it does is request new images) although it could be enhanced to log the actions that a user has taken. However the matching designer client-side app does need to interact with the server to store the design that a user is making. I hold any pending user changes in a JavaScript array and report them to the server when the user clicks on the Done button or opts to move to a new photo. There is a visual indication when there are unsaved changes; if the user navigates away then any unsaved changes are lost.

The changes are reported by storing them in JSON format in a hidden form variable called Changes. This code shows how the Done button and Changes are defined in the .aspx file:

    <asp:Button ID="btnDone" Text="Done" OnClick="btnDone_Click" runat="server" />
    <input id="Changes" type="hidden" runat="server" />

In case you are not familiar with this syntax, btnDone and Changes are page variables that can used in server-side code. When the ASPX page is rendered, they are converted into HTML that can be accessed using JavaScript and the DOM. Note that when rendered, the DOM ids may be different, eg if the page uses a master page layout.

If the user clicks on Done, I want to store any changes before posting back to the server, so I add an onclick handler to the Done button in the .aspx.cs Page_Load():

btnDone.Attributes["onclick"] = "javascript:return btnDone_OnClick()";

When the page is rendered, btnDone becomes an INPUT form field with its onclick handler set. The JavaScript onclick handler stores the JSON string version of the ChangesDone variable and then returns true to let the page form be submitted:

    function btnDone_OnClick()
    {
        ChangesField.value = ChangesDone.toJSONString();
        return true;    // Don't cancel btnDone form submit
    }

For the above to work, the JavaScript ChangesField variable needs to be set correctly to the Changes hidden field. Remember that Changes runs server-side as well. This means that ASP.NET may have decorated the generated HTML field name with various prefixes, eg if the page uses a master page layout. To get the correct name, my aspx.cs code registers some startup script to tell the JavaScript the correct name for Changes.ClientID. The JavaScript also needs the btnDone.UniqueID so this is passed as well:

    ClientScriptManager cs = Page.ClientScript;
    cs.RegisterStartupScript(GetType(), "SetServerControls", "SetServerControls("+
        "'" + Changes.ClientID + "','" + btnDone.UniqueID + "');", true);

This is the JavaScript code that is called at startup to store the control names:

    var ChangesField = false;
    var btnDoneUniqueId = false;

    function SetServerControls( ChangesField_ClientID, _btnDoneUniqueId)
    {
        ChangesField = document.getElementById(ChangesField_ClientID);
        btnDoneUniqueId = _btnDoneUniqueId;
    }

I mentioned earlier that I also wanted to postback to the server on events other than pressing the Done button. This is achieved in the JavaScript handler for each event by storing the ChangesDone data and then simulating a press of the Done button. This is done by calling the __doPostBack() function that ASP.NET will have generated, passing the required Done button UniqueId, eg:

    function Move_dblclk()
    {
        ChangesField.value = ChangesDone.toJSONString();
        __doPostBack(btnDoneUniqueId,'');
    }

OK, let's move back to the server and see how the Done click is handled server-side. This simply picks up the Changes value and decodes it using the Nii.JSON.JSONArray parser along the following lines:

    protected void btnDone_Click(object sender, EventArgs e)
    {
        string sChanges = Changes.Value;
        if (!string.IsNullOrEmpty(sChanges))
        {
            JSONArray Changes = new JSONArray(sChanges);
        }
    }

There is one complication to the above process for my designer application. In the viewer, the startup JavaScript can be registered in the Page_Load() method. However the Done button handler btnDone_Click() will be called after Page_Load(). If the Done handler alters the information that you want to send to the client, then you must generate the startup JavaScript later. I found that this could be done in the page prerender function Page_Prerender() as follows:

protected void Page_Prerender(object sender, EventArgs e)
{
    string JSON = XmlToJSON(SiteXmlDocument);
    JSON = JSON.Replace(@"\", @"\\");
    ClientScriptManager cs = Page.ClientScript;
    cs.RegisterStartupScript(GetType(), "SetServerControls", "SetServerControls("+
        "'" + Changes.ClientID + "','" + btnDone.UniqueID + "');", true);
    cs.RegisterStartupScript(GetType(), "Startup", "processJSON('" + JSON + "');", true);
}

On the server, I made the viewer and designer into .ascx user controls. Incidentally the standard Visual Studio File in Files did not find text in C# .ascx.cs files even though the filter includes *.cs. I reported this a bug but Microsoft bizarrely said that this was by design; fix it by adding *.ascx.cs to the filter. I also add *.js to find text in JavaScript and *.master to find master page markup.

Here's another JavaScript tip: include a version number in the filename, eg ClientApp_v1_01.js if the code ever changes. If you don't do this, a returning user's browser may use a cached and out-of-date version. When you do a change, rename the file and update all the code that references it.

Conclusion

Whew! But not too bad really. With this tricky code out of the way, I could concentrate on the client and server code separately which I think was a wise choice. Coming back to JavaScript for a large project was not as bad as I thought it might be, as it was more expressive than I had realised and DOM interactions worked well and pretty consistently across most browsers. However I did revert to alert() box debugging. A search found various JavaScript debuggers but I never got round to trying them. For JavaScript, ASP.NET and other technologies, I refer quite often to help sites on the web, so thanks for all the fish.

On the server, separation of the codebehind from the presentation HTML is definitely a good thing. If I am honest however, I have to report that my .aspx files still contain a tiny amount of inline code to access certain page fields or fill GridView TemplateFields. Declarative design can only ever take you so far, so my .aspx.cs code is largely linked to the presentation HTML, eg filling labels or coping with SelectedIndexChanged. I probably do not make enough of an effort to separate the business logic from the presentation logic, although using stored procedures as a data access layer is a good discipline for security as well as design-separation reasons.

JavaScript Object Notation (JSON)

2007-01-04T21:44:00.000Z

This article first appeared in the November 2006 issue of Visual Systems Journal (VSJ).

In the July/August 2006 issue of VSJ, Mike James showed the basics of how to make Asynchronous JavaScript and XML (Ajax) calls from a web page to a server using an XMLHttpRequest object. This returns either plain text in responseText or XML in responseXML properties. Unfortunately, XML can be a little cumbersome to use, which isn't going to make your JavaScript any easier to understand. However there is an alternative in the form of JavaScript Object Notation (JSON, pronounced Jason) which is a string representation of structured data using JavaScript's object literal notation, ie name/value pair objects.

Here's some XML:

<?xml version='1.0' encoding='UTF-8'?>
<business>
 <name>A Bee Co</name>
 <contact type='email'>sales@abee.co.uk</contact>
 <employee type='Manager'>
  Alison Bee
 </employee>
 <employee type='worker'>
  John Sloop
 </employee>
</business>

In JSON the same data might look like this:

{ "business":
    { "name": "A Bee Co",
      "contact": {"type": "email", "value": "sales@abee.co.uk" },
      "employee": [ {"type": "Manager", "value": "Alison Bee" },
                    {"type": "worker", "value": "John Sloop" }
                  ]
    }
}

If the above JSON string is in a var called Business, then it can be parsed very simply in JavaScript:

    var biz = eval("(" + Business + ")");

The following easy-to-use values are then available:
• biz.business.name: A Bee Co
• biz.business.contact.type: email
• biz.business.employee.length: 2
• biz.business.employee[0].value: Alison Bee
As you can see, the JSON string has been converted into an object tree. If you remove the superfluous "business" object from the JSON, then the values would be even simpler, eg biz.name.

Note that the multiple "employee" XML elements were translated into a JSON/JavaScript array. If there were just one employee, then biz.business.employee would simply be a property string. To cope with this, I use my ObjectToArray function to convert this property into an array which lets me handle it more simply:

function ObjectToArray( obj)
{
    if( !obj) return new Array(); // zero element array
    if( !obj.length) return new Array(obj); // one element array
    return obj; // array already
}
var employees_array = ObjectToArray(biz.business.employee);

This approach works well as long as you know the structure that you are expecting, which will usually be the case. Obviously you will then want to do something with your data, ie show it to the user. Be careful if you are using server-side processing such as ASP.NET because changing a page object will not necessarily change the value seen at the next real postback, or worse, validation errors can occur. Handling interactions between client and server variables can be a messy kettle of fish which I don't want to go into here, but can be solved using Atlas and other Ajax frameworks. In next month's article I suggest a simple client-server scenario which makes use of JSON, XML, JavaScript and ASP.NET2.

Anyway, back at the bit-face, you can find out more about JSON at www.json.org. JSON supports these types of values: string, number, object, array, boolean and null. Strings are in Unicode and various escape sequences are supported. JSON doesn't support binary data so you cannot embed images. JSON seems to be supported by all versions of JavaScript in browsers.

JSON can be used in other languages apart from JavaScript. It's main use seems to be data-interchange, particularly in Ajax requests. Note that Ajax requests are not supported by older browsers. Although ease of use was the original raison d'etre for JSON, it is now also commonly used because it is more compact than XML resulting in reduced data transfer requirements.

Parsing time is also reputedly less for JSON. However you need to be careful using eval() against an untrusted source. The JSON web site provide a file json.js that includes a safer parser string method prototype parseJSON(), so replace the above eval() call with:

var biz = Business.parseJSON();

This still doesn't stop potentially dangerous values appearing as parsed values, so be careful if you stuff values into DOM innerHTML values for example. The JSON JavaScript code also defines toJSONString() to convert JavaScript objects and arrays into JSON.

C# XML to JSON conversion

In a recent web application I decided to store and process data server-side in XML because this is a standard storage type and ASP.NET2 provides good routines for handling an XmlDocument in memory. However I wanted to transfer information to the web page client in JSON, and decode returned information in JSON.

Good old www.json.org provided classes to convert JSON into C# objects at www.json.org/cs.zip. As an example, in JavaScript convert your employee array to a JSON string:

var JSON_employees = biz.business.employee.toJSONString();

Once this is safely server-side, use C# code like this to retrieve the name/value pairs for each employee, slightly laboriously:

    using Nii.JSON;
    JSONArray employees = new JSONArray(JSON_employees);
    for (int eno = 0; eno < employees.Count; eno++)
    {
        JSONObject jemployee = (JSONObject)employees[eno];
        for (int ano = 0; ano < jemployee.Count; ano++)
        {
            string name = jemployee[ano].ToLower();
            string value = jemployee[name].ToString();
        }
    }

I couldn't find a means of converting XML into JSON in C#, so I thought that it must be straight forward to write my own converter. It turned out that there were more XML scenarios than I had originally envisaged. For simple XML elements containing text there seems an obvious translation:

 XML: <xx>yyy</xx>
 JSON: "xx":"yyy"

If the XML element has attributes or contains child elements then these are converted into object name/value pairs, with text usually converted into a field called "value". (Life gets complicated if there is an attribute or child elements called "value".)

 XML: <xx w='zzz'><aa>bb</aa>yyy</xx>
 JSON: "xx": { "aa":"bb", "w":"zzz", "value":"yyy" }

Duplicate elements are converted into an array:

 XML: <xx><aa>bb</aa><aa>cc</aa></xx>
 JSON: "xx": { "aa": ["bb","cc"] }

One example of "equivalent" XML and JSON online cleverly contracted this:

 XML: <employees><employee>bb</employee><employee>cc</employee></employees>
 JSON: "employees": ["bb","cc"]

Note that XML and JSON conversions are not necessarily reversible, ie you cannot convert one to the other and back again and guarantee to get the same as you started.

You can get my code online www.phdcc.com/xml2json.htm. The code also makes sure that characters are escaped if necessary for correct representation in JSON.

Resources:
www.json.org, www.json.org/js.html, www.json.org/cs.zip, www.crockford.com, www.phdcc.com/xml2json.htm

Vista Image XMP Tags

2006-12-18T11:22:00.000Z

Microsoft Windows Vista lets you set various meta-data properties for image files, ie JPEG and TIFF files. A new feature is to add one or more Tags to a picture.

Previously, meta-data information was added to image files using EXIF (Exchangeable Image File Format). However Vista adds image meta-data using XMP (Extensible Metadata Platform) - this is XML-formatted information embedded in the image file. Click here to get the XMP spec. Where possible the meta-data is also stored in the corresponding EXIF data.

Using the ASP.NET System.Drawing.Image class, it did not seem to be possible to extract the XMP data in a JPEG file. The XMP is stored in an APP1 section. To find it, I therefore did a somewhat nasty binary scan for these 29 characters http://ns.adobe.com/xap/1.0/ and then checked for the APP1 marker 0xFFE1 two words before. The first word beforehand then contains APP1 size. The XMP Packet byte[] can then be extracted and decoded from UTF-8.

For TIFF files, System.Drawing.Image returns the XMP byte[] data as property id 700.

For both file types, the XMP Packet can then be loaded using System.Xml.XmlDocument. The actual XML lets you extract data from these fields (the Vista usage is in brackets):

dc:subject (Tags)

dc:title (Title)

dc:creator (Author)

dc:description (Subject)

dc:rights (Copyright)

tiff:artist (Author)

exif:UserComment (Comments)

xmp:Rating (Star rating number)

MicrosoftPhoto:LastKeywordXMP (seems to the same as dc:subject)

MicrosoftPhoto:Rating (not sure what this is)

The actual field values are in plain text, rdf:Bag, rdf:Alt or rdf:Seq lists.

I did this work to add the meta-data information to that found by my ASP.NET search engine FindinSite-MS.

Microsoft Windows Vista Multi-boot

2006-12-11T13:38:00.000Z

I got a new hard disk to work with Vista (as well as to cope with bulging photo files etc). I currently use HyperOS to multiboot between various Windows systems - one on each partition - although I virtually never boot into systems prior to XP nowadays.

I installed the new Barracuda drive as the second drive on the system and partitioned it into 5 chunks using Seagate's DiscWizard, ie one primary partition and 4 logical partitions (in an extended partition).

After a bit of heartache I am now in the position where the Vista bootloader presents these three options at startup:
* Earlier version of Windows
* Microsoft Windows Vista
* 95 98 ME Systems
The "Earlier version of Windows" option boots into the current HyperOS-selected version of Windows.

The main point to notice is that when in XP I have various drives on Disk 1 labelled C: to M: with Disk 2 showing up as N: to R: and DVD drives as S: and T:.
However when in Vista, Disk 2 shows up as C: to G:, the DVDs as H: and I: and Disk 1 as J: onwards. This scenario might require careful handling if you have shared data or batch files etc.

To get to this happy situation required some work. An initial new install of Vista from one of the XP instances led to a hung boot. After getting over the initial panic, changing the BIOS boot order to boot on an XP boot CD let me go into a Recovery Console. The fixmbr and fixboot commands restored the old status quo.

(Each disk has a Master Boot Record (MBR) with load code and basic partition information. In addition, each partition has a volume boot record that contains the real OS loader. The fixmbr and fixboot commands restore the XP loader (NTLDR) for these boot records. The HyperOS cobblerx command also restores the XP MBR.)

The Vista boot loader (BCD) has a new MBR and volume loader (WINLOAD). The load information is stored in the C:\BOOT\ directory in the BCD file.

An easy way to cope with the BCD from XP and Vista is to use NeoSmart's EasyBCD tool - it seems like you must have the .NET framework 2 installed to use EasyBCD.

Perhaps the trick to installing Vista might have been to *first* use EasyBCD to install the Vista Master Boot Loader before starting the install.

Google gadget on your webpage

2006-10-19T08:31:00.000+01:00

Google gadgets can now be placed on your own web pages, taking the wind out the sails of Widgetbox etc. Previously, Google gadgets could only be places on your personalised Google home page, a Google pages site or the Google Desktop Sidebar.

For a gadget that appears in the Google-Gadgets-for-your-Webpage directory, such as my Space Browse virtual tour viewer, click on the "Add to your webpage" button. You are then taken to a page where you can choose various display and gadget settings. It is often important to choose a suitable display width and height. For Space Browse, choose 300x260 pixels.

Then click "Get the Code" to show a textbox containing the HTML to copy and paste into your web page. For the Space Browse gadget, this looks like this, with all your settings encoded as parameters:

<script src="http://gmodules.com/ig/ifr?url=http://www.spacebrowse.com/gadget/SpaceBrowse.xml&up_SiteNo=&up_ShowMode=Random&up_UserName=&up_Search=&synd=open&w=300&h=260&title=Space+Browse+virtual+tour&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

You then simply have to cut and paste this HTML code onto your web page. For some sites such as on a blogsite Blogger template, you will have to replace the & characters with & as follows:

<script src='http://gmodules.com/ig/ifr?url=http://www.spacebrowse.com/gadget/SpaceBrowse.xml&amp;up_SiteNo=&amp;up_ShowMode=Random&amp;up_UserName=&amp;up_Search=&amp;synd=open&amp;w=300&amp;h=260&amp;title=Space+Browse+virtual+tour&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js'></script>

Note that Blogger amends the end of the script tag, which is OK.

You can see an example of the Space Browse Google gadget running at the bottom of this web page.

Snipperoo widget

2006-09-27T14:25:00.001+01:00

The Snipperoo widget management system is in beta. It lets you turn any code snippet into a "widget". One or more widgets are then placed on a "panel". Snipperoo then provides a JavaScript "codeline" for you to copy into your site, blog, etc.

You can see an example Snipperoo widget - my Space Browse viewer - at the bottom of this blog post, using this codeline:
<script type='text/javascript' src='http://codelines.snipperoo.com/chriscant/snipperooney/codeline.js'></script>
Note that blogger will not let you place this codeline within a blog post - it has to be in the template. I have code the template so that the Snipperoo widget only shows when the specific blog post is shown, as follows:

<b:if cond='data:blog.url == "http://chriscant.phdcc.com/2006/09/snipperoo-widget.html"'>
</b:if>

To make a Snipperoo widget, register for their beta program. Make a new panel with dimensions 300x280. Make a new module. To make a Space Browse viewer widget, use this widget code:

<iframe src="http://www.spacebrowse.com/gadget/SpaceBrowseViewer.aspx?Caller=SN" frameborder="0" scrolling="no" style="border:0px;padding:0px;margin:0px;width:100%;height:240px;"> </iframe>

Click on the (+) icon to add it to your panel. Click on "show codeline" to get the JavaScript code to paste into your site.

The above widget code can be customised as described in the Space Browse viewer mashup guide.

Netvibes IFRAME mini module

2006-09-25T10:11:00.000+01:00

This post describes how to put together a Netvibes.com Mini Module that shows an existing web page within an IFRAME. My Space Browse viewer example is listed in the Netvibes ecosystem gallery. You can also install it by clicking here: (Note that this image link uses addApiModule.php not subscribe.php.)

You can see the complete code for this module if you go here and then view source. Simply viewing the page shows the Edit options.

A Netvibes Mini Module is a public web page. My technique is to keep the module web page separate from the web page that does the main work. This lets me have one viewer page that I can share across various mashup scenarios such as gadgets, widgets or plain IFRAMEs.

It is assumed that you have a web page available that is designed to display output in a small space. This might be existing gadget/widget code or perhaps PDA output.

The core of an IFRAME module is this JavaScript onload handler in the header which creates an IFRAME and adds it to the module:

<script type="text/javascript">
var url = "http://www.spacebrowse.com/gadget/SpaceBrowseViewer.aspx?Caller=NV";
NV_ONLOAD = function()
{
  var m_iframe = document.createElement("iframe");
  m_iframe.scrolling = "no";
  m_iframe.frameBorder = "0";
  m_iframe.src = url;
  m_iframe.width="100%";
  m_iframe.height="240px";
  m_iframe.border="0px";
  m_iframe.padding="0px";
  m_iframe.margin="0px";
  m_iframe.overflow="hidden";
  NV_CONTENT.appendChild(m_iframe);
}
</script>

An IFRAME is a rectangular window on a web page that displays the contents of another URL. The web page at this other URL only sees the (small) rectangular window it is given, and cannot interact with anything else on the page including your module code.

Note that the IFRAME is given a fixed height but 100% width. Your web page can find the actual width that you have available in document.body.scrollWidth.

If your page is configurable then add a form with class "configuration" to the body of your module, eg to add a search parameter:

<form class="configuration" method="post" action="">
  <label>Search:</label>
  <input name="Search" type="text" value="" />
</form>

The user's preferences are available using the Netvibes getValue() JavaScript function. You can then add any received value to your IFRAME URL as follows:

  var SearchWord = getValue("Search");
  if( SearchWord && SearchWord!="undefined")
    url += "&Search="+SearchWord;

You could also add a "Height" parameter and use it to change the IFRAME height.

Your module page should also include a definition of an icon to display in the module header, eg as follows:
<link rel="icon" type="image/png" href="http://www.spacebrowse.com/gadget/SpaceBrowseNetvibesIcon.png" />
The icon should be 16x16. The icon can be truncated in height so concentrate the image towards the top.

If you submit your module to the Netvibes then it is a good idea to have a screenshot available. I think that this is shown reduced to 160x120, with a link to a full size image.

CSS liquid captioned image list

2006-09-21T12:13:00.000+01:00

Despite being an aged programmer (I used punched cards while at school!), I find it difficult to get to grips with XHTML page layout using CSS. I find it very hard to get the effect that I want to achieve. It was generally a lot easier when using tables. Perhaps we need a new tag or attribute that works like a table but is ignored by accessibility browsers.

Anyway, I like (a) liquid flows and (b) specifying fonts without using fixed point sizes.

My latest task was to show a lot images. I wanted them to fill all the available screen space, so a liquid layout was called for. If I simply used a series of IMG tags then this would work immediately. However I also wanted to show a caption underneath (and make the image a link).

My own attempts to make this work failed. I nearly resorted to using a non-liquid table layout. Eventually a search found Mark Newhouse's guide (which is one of those annoying sites which come up with a smaller font than normal). The basic idea is to have each photo/caption block in a DIV that floats to the left. If you add lots of these then each DIV goes to the right of the previous one if there is room, and onto the next line if not. You need to round it off with a DIV style clear:both. Thanks Mark.

My eventual solution can be seen here. Even this solution has its problems, stemming from the fact that the caption text is of variable length. If I set a fixed style height then FF and O would truncate the text, even with overflow:visible set. So I guessed a suitable min-height. The problem remains that picture/caption blocks have different heights. So when a block floats down, it may display at the block that sticks down the most - which is not necessarily at the start of the line. You can see this after a row or three using the above link.

There are also printing problems. IE only shows one page of floating DIVs before giving up. FF does display all the DIVs but those at the bottom of the page are often not shown in their entirety.

Any better suggestions appreciated.

Find-in-Files for ascx.cs in Visual Studio

2006-09-15T11:03:00.000+01:00

Just a quick warning to say that Visual Studio 2005 (and probably 2003) Find-in-Files will not by default find text in *.aspx.cs files if you use the standard file types spec:

*cs;*.vb;*.resx;*.xsd;*.wsdl;*.htm;*.html;*.aspx;*.ascx;
*.asmx;*.asax;*.config;*.asp;*.asa;*.css;*.xml

even though *cs is in the spec.

I reported this here in Microsoft Connect Feedback but Microsoft insist that it is by design. Weird!

Anyway, make sure that you add *.aspx.cs and other variants (eg *.asmx.cs) to your file spec, separated by semi-colons. I also add *.js;*.master

Actually, I've just noticed that the standard file spec has *cs. If you change this to *.cs with a period then it also works.

Tag aware widget

2006-09-12T12:27:00.000+01:00

This posts shows an example of a widgetbox tag aware widget - using my Space Browse virtual tour widget.

This blog entry contains a standard widgetbox DIV to place the widget and an extra A tag to define the tag. The tag is "hoff" which tells Space Browse to search for a virtual tour that contains the word "hoff". Here's the HTML:

<div class="wbx-widget" id="f3a39c0a-cbf9-4c51-92fa-d1cf6abfe54f"></div>
<a rel="wbx-keywords" title="hoff"></a>

You should always see the virtual tour called "Rock climbing at The Hoff" here.

Here's the widgetbox docs for tags:

How to use in a blog
How to configure a subscription widget
If you register your own widget, in the "Add Configuration Parameters" page, set up a suitable parameter then click "Edit Options" then check the "Tag Aware" checkbox and click "Apply Changes".

Tabindex order accessibility issues

2006-09-08T08:52:00.000+01:00

I released a new version of the Space Browse viewer yesterday. This was a major update because it made the viewer more accessible to keyboard users. However there are some unresolved issues... so any help appreciated.

The viewer has various tool button images used for navigation etc, as can be seen on the right in the "Space Browse widget". The previous viewer version used DIV HTML elements with onclick handlers added. The new version uses INPUT TYPE="image" elements (with onclick handlers) that let users use the tab key to move between focus elements on the page, thereby hopefully improving accessibility.

The new viewer INPUT elements all have TABINDEX attributes to set the order of the controls. For the viewer I started the TABINDEX values at 200. This helps the overall page layout:

Master page header: tabindex values start at 1
Page before viewer: tabindex values start at 100
Viewer: tabindex values start at 200
Page after header: tabindex values start at 300
Master page footer: tabindex values start at 400

I had to be careful with the INPUT image element borders. Originally I had border:1px solid gray;. However this did not work well in IE because it shows the element with the focus by giving it a gray dashed 1px border - this did not show up. So I used other colours.

Issue 1: tab order of elements added in JavaScript
My new viewer code adds some INPUT elements in JavaScript after the static elements have loaded. These added INPUT elements do have TABINDEX values in the correct order. However browsers do not respect these values - instead the elements are treated as if they had no TABINDEX, ie the user tabs to them after all the items that do have a TABINDEX. Tested in IE6, FF1.5 and O9 in Windows XP.

Issue 2: IE added elements invocation
Once you have tabbed to aan element in Internet Explorer you can press either Space or Enter to "click" it. When I added INPUT elements in JavaScript I saw a weird bug. If you use Space then the correct element is "clicked". However, if you use Enter then the wrong element is "clicked", ie the first added element is always "clicked". Tested in IE6 in Windows XP.

This is the code that I use:
fInput["onclick"] = function() { return space_gotoFrame(this.alt,true,null); }
where fInput is the INPUT element. When clicked, this.alt should be the filename of the photo to go to.

Issue 3: Opera tabbing
If appropriate, the viewer removes various INPUT elements by setting display:none;. In Opera 9 in Windows XP this caused problems with the tab order: Opera does not skip such elements, instead it goes back to the start of the page and so does not let you tab to all page elements.

Regards other browsers: FireFox was best at tabbing because the focus element stayed the same after a "click" even if the element was disabled. Interner Explorer always loses the focus element if it is disabled.

Later: ASP.NET asp:TreeView TabIndex
The ASP.NET asp:TreeView server control has a TabIndex property. However it does not implement it very well. The TreeView is implemented as a DIV with tables inside. The DIV is given the specified TabIndex; however the links inside are not, so those links appear at the wrong place in the tab order

Space Browse viewer Google gadget

2006-09-07T10:03:00.000+01:00

The Space Browse virtual tour viewer Google gadget is now listed in the Google content directory. Click on the "Add it now" button to add it to your personalised home page. As yet, I haven't been able to find out which directory category it has been put in.

I spotted the directory entry after I'd signed up for a Google Pages account. The Space Browse gadget works fine there, as can be seen here: jchriscant.googlepages.com. To add to your Pages site you must have the Experimental features enabled. Then edit a page, click in an editable field then press "More". With "Standard gadgets" selected, search for "space browse". Click on "Space Browse virtual tour", then "Add Gadget >>" and agree "OK".

I have improved the Space Browse gadget since my previous post. It now fits into the given space better and has various parameters. I noticed that you can resize the rectangle for the gadget in Google Pages, so I will have to add in parameters to let you set the display size.

As an aside, I have been working on version 2 of the viewer/gadget/widget. This uses proper HTML INPUT fields to show the navigation controls. This makes the viewer more accessible to keyboard users. When this is done I will be able to submit it to the Windows Live gallery.

Another day, another gadget

2006-08-25T21:50:00.000+01:00

It seems like there are quite a few sorts of mash up gadgets and widgets to be had: Microsoft gadgets, Yahoo widgets and Apple dashboard widgets to name but a few.

Today I put together a Space Browser virtual tour viewer Microsoft Gadget, based on the LazyGadget example. So far it doesn't have any parameters and has not been added to the Microsoft Live Gallery yet. [Later: here it is in the gallery - go to this page to "Add to Live.com" or "Add to your space".

Or you can add it your Windows Live site at www.live.com by clicking on Add Stuff then Advanced Options. After "Add a Gadget by URL", enter the gadget manifest XML URL:
http://www.spacebrowse.com/gadget/gadget.xml and click on "Subscribe". The site then prompts "Only install Gadgets from trusted sites". Click on "Install Gadget" after selecting "Remember my preference".

That should be it. You should be able to move or collapse the gadget as normal. If you close your browser while the gadget is collapsed then it will not display correctly when expanded unless you refresh the page.

You can also add the gadget to your Windows Live Spaces site - click on "Add to your space" in the Gallery listing
Currently the gadget will only be visible to you when logged in; visitors will not see it. To add the gadget, click on this link: http://spaces.live.com/spacesapi.aspx?wx_action=create&wx_url=http://www.spacebrowse.com/gadget/gadget.xml. Again, you will have to confirm the installation.

When the gadget is listed in the Windows Live Gallery you will be able to add it and make it visible to all viewers.
It is present on my Live Space at chriscant.spaces.live.com but you will not be able to see it as a visitor.

My gadget's now also a widget

2006-08-23T14:07:00.000+01:00

I've improved my Space Browse Google gadget since the previous post so that it fills the screen area better and has optional parameters to choose random or recent tours and tours just by a specified username. Having provided a pithy author_aboutme and author_quote etc, I will submit it for listing in the Google content directory. My gadget also seems to work OK on the Google Desktop Sidebar.

I had previously signed up to Widgetbox. Last night I was able to add my gadget as a widget very easily - it worked first time, hurray! Here it is: Widgetbox Space Browse widget. Today I updated it to have parameters. Where the gadget parameter was ShowMode, I specified a widget parameter called up_ShowMode, etc.

Widgetbox lets you add a widget directly onto any web page, eg onto a blogger template as can be seen below - optionally, in an widgetbox panel. In Firefox, the widget overlaps the dotted vertical divider, which doesn't happen in Internet Explorer 6. To add a widget to a blogger blog post you have to add a widgetbox panel (empty if you want) in the template and then use a specified DIV within the post itself:

Internet Explorer 7: Locally run Java applet getAppletContext().showDocument(url) doesn't work - drive repeated

2006-08-21T10:52:00.000+01:00

This issue has been fixed in Internet Explorer 7 RC1. Great!
[I can only assume that Microsoft did not acknowledge the problem in my bug report because they were testing with the fixed version rather than the beta 3 version.]

Just before last week's break, I posted feedback about Internet Explorer 7 beta 3.

A customer of our FindinSite-CD software had reported that a user of theirs had tried our software in IE7. It ran into a problem when run locally, ie from CD.

The problem is that a Local Machine Java applet call to getAppletContext().showDocument(url) does not work for a relative URL because the drive portion of the file URL is repeated. Instead, an error such as this is shown in a message box: Cannot find file 'file:///C:/C:/PHD/IE7test/iamshown.htm'

Here's my feedback report to Microsoft - you will need to register to see it. It seems as though Microsoft were unable to reproduce the problem and so closed the issue. If you can repeat it, please Validate and Vote for it once you have confirmed that my posted example fails as described.

Assuming that this is a real problem, then it will make our software not work in IE7 which is a crucial browser for us.

PS Just saw an article in Ethical Consumer which could be summarised as "New organic range of underwear approved by Soil Association".

Made a first Google Gadget for Space Browse

2006-08-10T22:59:00.000+01:00

Just a brief note to say that I managed to make a Google gadget very quickly for my Space Browse virtual tour site. Having read quickly through the Google Gadget starter documentation earlier in the day, it only took an hour or so to make a gadget that shows a random virtual tour.

I had to make a new web form page that used a new stored procedure to get a random publicly accessible photo-site. Thanks to whoever it was who had the tip that adding ORDER BY NEWID() gives a random result set for a SELECT statement. This works by generating a new uniqueidentifier/guid for each result row; because the Guids are random, ordering on this will return a randomly sorted result set. I added TOP 1 because I only wanted one random result.

The gadget found a bug in my existing code that assumed that something divided by something else was an integer. I fixed it by using Math.floor().

The gadget is still basic because it does not respond to the provided width. It also needs to remove some of its borders.

Anyway, here's the gadget:
http://www.spacebrowse.com/gadget/SpaceBrowse.xml

asp:HyperLink includes an extra space in the link

2006-08-09T15:10:00.000+01:00

Only a minor point, but poor form...
If you have an asp:HyperLink in an ASP.NET2 app then it is sometimes rendered with an extra space within the link which gives an underlined space at the end of the link.

Suppose you have the following:
<asp:HyperLink ID="idLink" runat="server" Text="Hello" />

When rendered incorrectly, there are line breaks between these three lines which causes the problem:

<a id="ctl00_MasterLoginView1_something" href="something.aspx">
Hello
</a>

When rendered correctly, there are no line breaks.

I haven't been able to determine exact circumstances when rendering is incorrect.

Coping with links in cookieless mode in ASP.NET2

2006-08-09T09:52:00.000+01:00

A new web site project that I am working on might be used a lot from internet cafes and the like where it is possible that cookies are disabled. I therefore started to look at how to support cookieless mode in an existing alpha web site of mine www.spacebrowse.com - go there to try it out with cookies disabled once you have registered for free.

The ASP.NET2 site uses Forms authentication, specified in Web.Config as follows:

<authentication mode="Forms">
   <forms protection="All">
</authentication>

cookieless - UseDeviceProfile

The forms element "cookieless" attribute has a default value of "UseDeviceProfile". Basically this doesn't work if a browser has cookies turned off. "UseDeviceProfile" looks at the type of viewer, so it will assume that cookies are turned on for IE/FF/etc, but will assume they are not for some other device types.

cookieless - UseUri

Another option for "cookieless" is "UseUri" which means that cookies are not used. Instead, ASP.NET2 mangles the URL to include the information that would have been stored in the cookie. A http: URL such as this:
http://localhost/SpaceBrowse/Default.aspx
is mangled to look like this:
http://localhost/SpaceBrowse/(F(ekocDSRz...PZKv3ah41))/Default.aspx
where a lot of characters have been removed at the ellipses.

If you look carefully, you will see that the mangled URL contains an extra folder name. When I saw this, I thought that all resources and relative links from this page would go wrong. In fact, they don't because the ASP.NET ISAPI DLL filter intercepts all requests and resolves them correctly if it detects mangled URLs. Also note that Request.Path as seen by the ASPX page is correctly SpaceBrowse/Default.aspx, ie without any mangling.

cookieless mangled URL links

However there is an issue as regards links. If you want the user to stay logged in, then the URL they browse to has to have a mangled URL. This means that you must use relative links to stay logged in. Any absolute links will not include the mangled URL. You will be OK if you use <asp:hyperlink> and the like with NavigateUrl="~/sites.aspx" or whatever because ASP.NET resolves the ~/ correctly.

My MasterPage template is used by pages in various directories. My original code included static absolute HTML links to pages on the site. These links did not include the mangled URL and so the user's login status is forgotten. The solution is to use ASP.NET controls for all such links (even though that might require a small amount more server-side processing).

Aside 1: When testing "UseUri" mode in IE using ASP.NET Development Server, if you have links to directories then they will not work if they end in "/". You must change them to "/Default.aspx" to be able to see the requested page in cookieless mode. When working through IIS, ordinary directory requests will work OK.

Actually, it is important that all your links to directories end in / - otherwise the mangled URL will be lost.

Aside 2: When you log off in mangled URL mode (using asp:LoginStatus LogoutPageUrl="~/default.aspx"), the URL you get redirected looks like this:
http://localhost/SpaceBrowse/(X(1))/default.aspx
Although strange, everything works OK.

cookieless - AutoDetect

Anyway, back at my original problem: how to cope if a browser has cookies turned off. The best option is to set "cookieless" to "AutoDetect" in the Forms element. With this setting, ASP.NET probes to see if cookies are set; if cookies are enabled, then they are used; if not, then mangled URLs are used.

The probing mechanism seems to kick in when you click a Login button. To determine if a browser session has cookies enabled, this parameter is added to the login URL: AspxAutoDetectCookieSupport=1.

PS. I found it easiest to test in FF rather than IE because FF has a simple method of turning off cookies; IE does it on a zone basis which I could quickly not get to work for the dev server URL http://localhost:1234/whatever/

PPS. Found that cookies must be enabled for yahoo/flickr to let you log on.