Archive for the ‘Programming’ Category

If you have ever tried working with a TreeView within an UpdatePanel, you would notice that it takes forever to render and on postback the whole application seems to be very sluggish.

The reason this occurs is because the javascript that is emitted by the TreeView does not play well with the Update Panel. This is a known issue, but for some reason is not getting a fix.

One way around this is to disable the scripts emitted by the TreeView control and let the UpdatePanel take care of not causing postbacks via the partial page rendering mechanism. This can be done by setting ‘EnableClientScripts=”false”‘ on the TreeView.

If you have ever tried to perform an action within an iFrame when a window is resized then you would notice that using the “onresize” event of the body element within the iFrame is useless. For some reason, the “onresize” event of the page within the iFrame does not fire when the window itself is resized, so attaching a “onresize” event to the body tag of the page doesn’t work.

So basically this is the structure of your page:


<html>
<head></head>
<body>

<iframe id="myIframe" src="iframepage.html"></iframe>

</body>
</html>

Now you want to capture the “onresize” event of the window in your iframe so you can manipulate your interface or do something when it occurs. On a regular page (which has no iframes), placing this in your ‘body’ tag would help.

However, in your iFrame page, using the following will allow you to capture the ‘onresize’ event.

<script>
self.parent.window.attachEvent(”onresize”, myFunction);
</script>

Place the script tag on your page and it will attach the function to the event.

Most problems with regards to the modalpopupextender not displaying at the center of your page when co-ordinates are not specified arise due to an incorrect DOCTYPE. Usually changing this DOCTYPE will help (as I have pointed out in a previous post of mine). However sometimes it is not possible to change the DOCTYPE as it affects other portions of your page.

In order to fix that you may have to perform a custom build of the AjaxControlToolkit by modifying some of the source.

I’ve tested this out with version 1.0.10920.0 of the AjaxControlToolkit, however I’m sure it works with later versions.

Download the source of the toolkit from codeplex and open the solution using Visual Studio.

The first file you will have to modify is the ‘Common.js’ which is located in ‘AjaxControlToolkit\Common\Common.js’ .

Within this search for the function ‘getClientBounds’. Replace the switch statement with the following one:


switch(Sys.Browser.agent) {
case Sys.Browser.InternetExplorer:
if (document.documentElement && document.documentElement.clientWidth)
clientWidth = document.documentElement.clientWidth;
else if (document.body)
clientWidth = document.body.clientWidth;
//clientWidth = document.documentElement.clientWidth;
if (document.documentElement && document.documentElement.clientHeight)
clientHeight = document.documentElement.clientHeight;
else if (document.body)
clientHeight = document.body.clientHeight;
//clientHeight = document.documentElement.clientHeight;
break;
case Sys.Browser.Safari:
clientWidth = window.innerWidth;
clientHeight = window.innerHeight;
break;
case Sys.Browser.Opera:
clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
break;
default: // Sys.Browser.Firefox, etc.
clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
break;
}

The next set of changes to be made are to the ‘initialize’ function of the ModalPopupExtender which is located in the ‘AjaxControlToolkit\ModalPopupExtender\ModalPopupBehavior.js’ file.

Within the ‘initialize’ function search for


this._backgroundElement.style.position = 'fixed';

and change it to this


this._backgroundElement.style.position = 'absolute';//'fixed';

A few lines below that is another change that has to be made from:


this._foregroundElement.style.position = 'fixed';

to:


this._foregroundElement.style.position = 'absolute';//'fixed';

Once you have made the changes compile the source and you should be able to use your new AjaxControlToolkit.dll in order to resolve most of the centering issues known to occur with the ModalPopupExtender.

Make sure to backup your original files before you attempt this.

The IE Developer Toolbar is similar to Firebug for Firefox. It provides you with a set of tools for troubleshooting pages efficiently (helps a whole lot with those positioning/css issues).

Downloading and installing the toolbar is straightforward and works without a hitch. However, when I tried to use it, It would never work. I tried installing/uninstalling a couple of times with no luck. Clicking on the IE Developer toolbar icon does nothing and if you reach it via the menu Tools-Toolbars-Explorer Bar->IE Developer toolbar, it brings up the toolbar which does not help you in any manner.

IE Developer Toolbar

After a little hunting around I found that the reason it does not work is because 3rd party extensions are not enabled.

This can be enabled via ‘Tools->Internet Options->Advanced->Browsing->Enable third-party browser extensions’. Check that, apply your changes and restart IE. The toolbar should now show up with the DOM elements and their corresponding styles and attributes.

Its a good tool to have at your disposal.

Link to download: Microsoft IE Developer Toolbar

Recently I had to work with the ModalPopupExtender that comes with the AjaxControlToolkit. I’ve worked with it before, but this time it posed a couple of problems (that were caused not because of the toolkit, but rather other things).

Without specifying the “X” and “Y” attributes of the ModalPopUpExtender(MPE) it is supposed to, by default, render at the center of the screen. Sometimes this doesn’t happen. The solution to getting it to render at the center of the screen is adding the following doctype to your page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Even then, my page didn’t seem to display the popup right. Its only later that I discovered that I was using Response.flush on the page to display a “Loading…” screen. This causes the html used for the “Loading…” screen to be the first thing on the page.

Since the DOCTYPE is now forced down the page, the rest of the page does not render as per the specified DOCTYPE. This causes the MDE to render at some other position on the screen (other than the center).

To fix this, Response.Write and Flush your DOCTYPE tag first, so it becomes the first line on the page.

In the past few weeks I’ve been curious as to whether it is possible to run an Asp.Net Web Application under Linux or not. Although the feature was available in Mono, there was never a well rounded IDE to work with. With MonoDevelop that has changed, the latest version (downloaded from svn) allows you to edit pages in design view as well. It also allows you to open existing Web Application Projects created in Visual Studio 2005.

Installing it on a fresh install of Ubuntu Gutsy Gibbon however isn’t as straightforward. I’ve put together a tutorial that describes the steps necessary to do so (the biggest problem being installing packages that are necessary to compile MonoDevelop, but are not installed on a fresh install of Ubuntu).

As per the MonoDevelop website, in order to install MonoDevelop from source you need to install the following packages:

  • Gtk# 2.8.4
  • Gtksourceview#-2.0 0.10
  • Monodoc 1.0
  • Gecko#-2.0 0.10
  • MonoDevelop Source

Unfortunately a fresh install of Ubuntu doesn’t allow you to compile any of these packages and/or install them. When I first tried it out I came across a lot of errors. I finally figured out which packages once installed would aid in an easy installation of MonoDevelop from source.

First go to MonoDevelop’s website and download the following packages from there to a local folder on your disk:

  • Gtk# 2.8.4
  • Gtksourceview#-2.0 0.10
  • Monodoc 1.0
  • Gecko#-2.0 0.10

You can extract them by right clicking on the package and choosing extract.

Next we have to get the latest version of the source from mono’s svn. Open up a terminal (Applications->Accessories->Terminal) and navigate to your directory where you have these packages installed.

Type in:

$ svn co svn://anonsvn.mono-project.com/source/trunk/monodevelop

If this is a fresh install of Ubuntu you will end up with the error message:

The program ’svn’ is currently not installed. You can install it by typing:
sudo apt-get install subversion

So go ahead and install it with “sudo apt-get install subversion”. It will request to install additional packages so go ahead and accept it. Once that is done, go ahead and get the latest version of mono from svn.

Going by the list, we would have to first install Gtk#. So we bring up a terminal and in that directory type:

ramesh@Xanadu:~/Desktop/mono/gtk-sharp-2.8.4$ ./configure

Unfortunately we are stopped short and get the following output:

checking build system type… i686-pc-linuxlibc1
checking host system type… i686-pc-linuxlibc1
checking target system type… i686-pc-linuxlibc1
checking for a BSD-compatible install… /usr/bin/install -c
checking whether build environment is sane… yes
checking for gawk… no
checking for mawk… mawk
checking whether make sets $(MAKE)… yes
checking whether to enable maintainer-specific portions of Makefiles… no
checking for gcc… gcc
checking for gcc… (cached) gcc
checking for C compiler default output file name… configure: error: C compiler cannot create executables
See `config.log’ for more details.

This basically tells us that our C compiler cannot create executables and the reason is because a fresh install of Ubuntu doesn’t come with build essentials.

Now in order to get most of the packages installed without problems we need to add a few repositories. Start ‘System->Administration->Synaptic Package Manager’ and then ‘Settings->Repositories’. Select all the repositories for now.

Ubuntu repositories

Search for a package called ‘build-essential’, select it and install it by clicking ‘Apply’.

This will allow the C compiler to create executables.

synaptic

Attempting to configure again will result in another error

checking for al… no
configure: error: No al tool found. You need to install either the mono or .Net SDK.

After digging around and some trial and error (and figuring out missing packages) these are the list of packages I’ve found are required for a comfortable install of monodevelop. (Note: Some of these came up as dependencies of other packages. Some of these may not even be necessary, however since they had the mono name in them I have included them.)

The next step is to install a set of packages from the repositories, so fire up Synaptic Package Manager (System->Administration->Synaptic) and install the following packages:

autoconf (2.61-4)
automake (1:1.10+nogfdl-1)
intltool (0.36.2-0ubuntu1)

libgdiplus (1.2.4-2ubuntu1)
libungif4g (4.1.4-5)

libmono-dev (1.2.4-6ubuntu6)
libmono-microsoft-build2.0-cil (1.2.4-6ubuntu6)
libmono-microsoft7.0-cil (1.2.4-6ubuntu6)
libmono-microsoft8.0-cil (1.2.4-6ubuntu6)
libmono-system-data1.0-cil (1.2.4-6ubuntu6)
libmono-system-messaging1.0-cil (1.2.4-6ubuntu6)
libmono-system-messaging2.0-cil (1.2.4-6ubuntu6)
libmono-system-runtime1.0-cil (1.2.4-6ubuntu6)
libmono-system-runtime2.0-cil (1.2.4-6ubuntu6)
libmono0-dbg (1.2.4-6ubuntu6)
libmono1.0-cil (1.2.4-6ubuntu6)
mono (1.2.4-6ubuntu6)
mono-dbg (1.2.4-6ubuntu6)
mono-devel (1.2.4-6ubuntu6)
mono-gmcs (1.2.4-6ubuntu6)
mono-jit-dbg (1.2.4-6ubuntu6)
mono-mcs (1.2.4-6ubuntu6)
mono-xsp (1.2.4-1.1ubuntu1)
mono-xsp-base (1.2.4-1.1ubuntu1)
mono-xsp2 (1.2.4-1.1ubuntu1)
mono-xsp2-base (1.2.4-1.1ubuntu1)
monodoc (1.2.4-1ubuntu1) <--- This needed to be compiled, but not any more

libgtk2.0-dev (2.12.0-1ubuntu3)
libgtksourceview-dev (1.8.5-1)
libgtksourceview2.0-cil (0.10-3.1)
libgtksourceview2.0-dev (2.0.0-0ubuntu1)

gnome-sharp2 (2.16.0-7ubuntu1)
gtk-sharp (1:1.0.10-5build3)
gtk-sharp2 (2.10.2-1ubuntu2) <-- This needed to be compiled but not any more

Selecting these above packages will most likely cause the below dependencies to automatically get installed.
If not, then select them.

autotools-dev (20070306.1)
gettext (0.16.1-2ubuntu3)
m4 (1.4.10-0ubuntu2)

libgecko2.0-cil (0.11-3ubuntu3)
libglib2.0-dev (2.14.1-1ubuntu1)
libmono-accessibility1.0-cil (1.2.4-6ubuntu6)
libmono-accessibility2.0-cil (1.2.4-6ubuntu6)
libmono-cairo2.0-cil (1.2.4-6ubuntu6)
libmono-cecil0.5-cil (0.5-2)
libmono-data-tds1.0-cil (1.2.4-6ubuntu6)
libmono-peapi1.0-cil (1.2.4-6ubuntu6)
libmono-peapi2.0-cil (1.2.4-6ubuntu6)
libmono-relaxng1.0-cil (1.2.4-6ubuntu6)
libmono-security1.0-cil (1.2.4-6ubuntu6)
libmono-sharpzip0.84-cil (1.2.4-6ubuntu6)
libmono-system-web1.0-cil (1.2.4-6ubuntu6)
libmono-winforms1.0-cil (1.2.4-6ubuntu6)
libmono-winforms2.0-cil (1.2.4-6ubuntu6)
lynx (2.8.6-2ubuntu1)
mono-debugger (0.50-1)
mono-jay (1.2.4-6ubuntu6)
mono-utils (1.2.4-6ubuntu6)
monodoc-base (1.2.4-1ubuntu1)
monodoc-browser (1.2.4-1ubuntu1)
monodoc-manual (1.2.4-1ubuntu1)

libart-2.0-dev (2.3.19-3)
libatk1.0-dev (1.20.0-0ubuntu1)
libcairo2-dev (1.4.10-1ubuntu4)
libexpat1-dev (1.95.8-4ubuntu1)
libfontconfig1-dev (2.4.2-1.2ubuntu4)
libfreetype6-dev (2.3.5-1ubuntu4)
libgnomeprint2.2-dev (2.18.2-0ubuntu1)
libice-dev (2:1.0.3-3)
libpango1.0-dev (1.18.2-0ubuntu1)
libpng12-dev (1.2.15~beta5-2build1)
libsm-dev (2:1.0.3-1)
libx11-dev (2:1.1.1-1ubuntu4)
libxau-dev (1:1.0.3-2)
libxcomposite-dev (1:0.4.0-0ubuntu1)
libxcursor-dev (1:1.1.8-2)
libxdamage-dev (1:1.1.1-3)
libxdmcp-dev (1:1.0.2-2)
libxext-dev (2:1.0.3-2build1)
libxfixes-dev (1:4.0.3-2)
libxft-dev (2.1.12-2ubuntu4)
libxi-dev (2:1.1.2-1)
libxinerama-dev (2:1.0.2-1build1)
libxml2-dev (2.6.30.dfsg-2ubuntu1)
libxrandr-dev (2:1.2.1-1)
libxrender-dev (1:0.9.2-1)
x11proto-composite-dev (1:0.4-0ubuntu1)
x11proto-core-dev (7.0.10-2)
x11proto-damage-dev (1:1.1.0-2build1)
x11proto-fixes-dev (1:4.0-2ubuntu1)
x11proto-input-dev (1.4.2-1)
x11proto-kb-dev (1.0.3-2ubuntu1)
x11proto-randr-dev (1.2.1-2)
x11proto-render-dev (2:0.9.2-4ubuntu1)
x11proto-xext-dev (7.0.2-5ubuntu1)
x11proto-xinerama-dev (1.1.2-4ubuntu1)
xtrans-dev (1.0.3-2)
zlib1g-dev (1:1.2.3.3.dfsg-5ubuntu2)

gnome-sharp2-examples (2.16.0-7ubuntu1)
gtk-sharp-examples (1:1.0.10-5build3)
gtk-sharp-gapi (1:1.0.10-5build3)
gtk-sharp2-examples (2.10.2-1ubuntu2)
gtk-sharp2-gapi (2.10.2-1ubuntu2)
libgconf-cil (1:1.0.10-5build3)
libgda2-3 (1.2.4-0ubuntu1)
libgda2-common (1.2.4-0ubuntu1)
libglade-cil (1:1.0.10-5build3)
libglib-cil (1:1.0.10-5build3)
libgnome-cil (1:1.0.10-5build3)
libgtk-cil (1:1.0.10-5build3)
libvte-cil (1:1.0.10-5build3)
libvte2.0-cil (2.16.0-7ubuntu1)
libxml-libxml-common-perl (0.13-5build1)
libxml-libxml-perl (1.63-1)
libxml-namespacesupport-perl (1.09-3)
libxml-sax-perl (0.14-0.1)
monodoc-gtk2.0-manual (2.10.2-1ubuntu2)

Now that we have our packages installed, we need to install Gecko # and gtksourceview#

So go to the Gecko# folder and type in:
sudo ./configure
sudo make
sudo make install

Now go to the gtksourceview# folder and type in:
sudo ./configure
sudo make
sudo make install

Now go to the monodevelop folder and type in:
sudo ./autogen.sh

This will generate the default config file and run the default configuration. However to enable Asp.Net Web Application projects and editing Asp.Net files using the GUI, we need to reconfigure using the option:

sudo ./configure --enable-aspnet --enable-aspnetedit

Once its done do the normal:

sudo make
sudo make install

You should now have a menu item under Applicaions->Programming->MonoDevelop

That should do it.

For the longest time I wondered why Asp.net would not provide a mechanism to access elements I had created dynamically using javascript in my code behind. It turns out they do, its just that since we hardly ever use that feature any more (and are more used to accessing elements by their ID’s after dragging and dropping them) it has vanished.

What I was attempting to do was create an input box using javascript, fill it with details and post it back to the server.

Code to create the input box and place it in a div:


function addtb()
{
var getdiv = document.getElementById('holddiv');
getdiv.innerHTML = getdiv.innerHTML + "<input type='text' value='new' name='tbs' />";
count++;
}

On the code behind though, rather than accessing it using the id/name directly (you cannot do something like [input-box-id].Text = ’some text’) you have to get its value from the Request variable and use the data.


string c = Request.Form["tbs"].ToString();

Also if you wanted it to get displayed on the page the next time around you would have to recreate the elements manually in c#

TextBox t = new TextBox();
t.ID = f;
t.Attributes.Add("name", "tbs");
t.Text = f;
Page.Form.Controls.Add(t);

Although this is cumbersom, it works. I’m not sure if there is an easier way to accomplish this.

Internet Explorer apparently has a bug in it that prevents you from using getElementsByName on document elements that have been created using document.createElement. This is a known issue with Internet Explorer and for some reason no one seems to have done anything to fix it (or is this the way it is meant to function?). The following (although perfectly legal code) does not seem to work on IE, although it works just fine on Firefox (and possibly other browsers although I haven’t tested):

<html>
<head>
<script type="text/javascript">
function addTextBox()
{
var div = document.getElementById(’addToDiv’);
var tb = document.createElement(’input’);
tb.type = ‘text’;
tb.name = ‘textbox’;
tb.value = ‘data’;
div.appendChild(tb);
}

function countBox()
{
alert(’Number of textboxes: ‘ + document.getElementsByName(’textbox’).length);
}
</script>
</head>
<body>
<input type="button" value="Add Input Box" onclick="addTextBox();" />
<input type="button" value="Count TextBoxes" onclick="countBox();" />
<div id="addToDiv">

</div>
</body>
</html>

A work around to this problem is using innerHTML as opposed to createElement in order to add a new element. This code seems to fix the problem and works fine on all browsers (I imagine):

<html>
<head>
<script type="text/javascript">
function addTextBox()
{
var div = document.getElementById(’addToDiv’);
var tb ="<span><input type=’text’ name=’textbox’ value=’data’ /></span>";

div.innerHTML = div.innerHTML + tb;
}

function countBox()
{
alert(’Number of textboxes: ‘ + document.getElementsByName(’textbox’).length);
}
</script>
</head>
<body>
<input type="button" value="Add Input Box" onclick="addTextBox();" />
<input type="button" value="Count TextBoxes" onclick="countBox();" />
<div id="addToDiv">

</div>
</body>
</html>

I’ve been trying to get my hands on a good ruby editor for a while and somehow every time I take a look at the one’s that exist, I am not at all impressed. These are a few of the editors that I have taken a look at and my impressions of them. As a beginner to Ruby, my only requirements initially are that I have syntax highlighting, code completion and it should just work without me having to do a whole lot. I am yet to test it them out with Rails (although I’m assuming that if they work good with ruby, they will work good with Rails)

1. SciTE - This comes installed by default if you are a windows user using the Ruby ‘One click installer’ available here. Of the 3 editors I looked at, this has the fewest features. One thing that is good about this though is that it is extremely quick to load. Unfortunately it lacks code completion which is a major requirement of mine. The reason why I believe code completion is useful while learning a language is you can actually look through all the methods for the various built-in objects rather than having to go back to the documentation each time. Consider this your bare bones editor with syntax highlighting. I wasn’t very happy with the indentation support as well, for example, it indents it when you start a function, but typing in ‘end’ does not reset the indentation. Its a small annoyance but an annoyance no less.

2. Aptana - I thought that this would be the most promising editor now that they have taken up the RadRails project as well and are integrating it into their existing system. Aptana is based off of Eclipse and provides a well rounded development environment. As of this writing however, Aptana’s code completion for ruby is broken (and has been for quite a while). All the other features seem to work well, syntax highlighting, debug support, etc. but it throws a Null Pointer Exception when you try to do a ctrl-space for code completion.

3. Netbeans - Of all the editors, I found this the simplest to install and start using right out of the box (with the exception of changing one setting, that is if you want to use the native ruby compiler). Other than that I had no hiccups in getting up to speed with the Netbeans editor and I would recommend it to anyone starting out with Ruby. Netbeans themselves have a nice site to show you how to get going with it.

Netbeans Ruby

A more in dept review of some editors is available here, and it very nicely outlines the advantages of Netbeans

If you have ever come across this error in SQL

The ORDER BY clause is invalid in views, inline functions, derived tables, subqueries, and common table expressions, unless TOP or FOR XML is also specified.

then all SQL is trying to tell you is that you cannot use your ORDER BY clause within a subquery.

So if you have something like this, it sure as hell won’t work:


SELECT x, y, z

UNION

SELECT * FROM(
SELECT DISTINCT x, y, z
FROM (

SELECT x, y, z
FROM a
WHERE

UNION
SELECT x, y, z
FROM b
WHERE
)

ORDER BY z
)

Work arounds? A little hunting around showed that you could “use” a ORDER BY in a subquery if you used the TOP X PERCENT in your SELECT statement which would go something like this:


SELECT x, y, z

UNION

SELECT * FROM(
SELECT TOP 100 PERCENT x, y, z
FROM (

SELECT x, y, z
FROM a
WHERE

UNION
SELECT x, y, z
FROM b
WHERE
)

ORDER BY z
)

Why I stressed on “use” there is because although you can use it, it doesn’t make life any easier. Basically it allows the usage of ORDER BY, but it never does ORDER BY anything. You get back an unordered result set.

The workaround I used was adding an extra column that had blank data for the row I wanted sorted on the top and the actual data I wanted sorted by for the rest of the rows; then sorted it based on this extra column. Crude, but it works.

I thought this would be an easy thing to do, but it doesn’t seem so.