Software Engineering on the loose

Ever seen this? Ever created a huge article, pressed “Save” or “Publish” and the whole work has gone? Good. I had it to and I hated it.

When I was writing one of my last articles I had this error again. I just had enough, I wanted to find the reason behind it. So I took my article and started to paste it paragraph by paragraph, then sentence by sentence, then word-by-word until I found the error. The word “fetch” caused this error. After doing some research, I managed to find some solutions to this error (some other words cause this stupid error as well, such as <iframe>).

The solution is simple yet efficent. Create a .htaccess file and place it to your Wordpress admin directory and add the following to it:

<IfModule mod_security.c>
SecFilterEngine Off
</IfModule>

There was a question on a forum today: someone wanted to create a function in Visual Basic that allowed him to calculate the arcsine and arccosine functions from a given double. I found a nice solution, thought I’d share it here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Public Class arcCalc
 
    Public Function ArcCos(ByVal X As Double) As Double
        If X <> 1 Then
            ArcCos = Math.Atan(-X / Math.Sqrt(-X * X + 1)) + 2 * Math.Atan(1)
        Else
            ArcCos = 0
        End If
    End Function
 
    Public Function ArcSin(ByVal X As Double) As Double
        If X <> 1 Then
            ArcSin = Math.Atan(X / Math.Sqrt(-X * X + 1))
        Else
            ArcSin = 90
        End If
    End Function
 
    Private Sub Calculate_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Calculate.Click
        Dim resultRC, resultDC, resultRS, resultDS As Double
        resultRC = ArcCos(txtBoxVal.Text)
        lblRadiusResultCos.Text = resultRC.ToString()
 
        resultDC = ((resultRC * 180) / Math.PI)
        lblDegreeResultCos.Text = resultDC.ToString()
 
        resultRS = ArcSin(txtBoxVal.Text)
        lblRadiusResultSin.Text = resultRS.ToString()
 
        resultDS = ((resultRS * 180) / Math.PI)
        lblDegreeResultSin.Text = resultDS.ToString()
 
    End Sub
End Class

Output from the running application - which received the name: Arc* Calculator

This annoying error kept popping up when I tried to run my stored procedure. After discussing this on forums plus doing an intensive search on Google I finally have a solution.

What I wanted to do is simple. Create a MySQL Stored Procedure which contains a simple SELECT statement.

This is what I’ve been doing:

DROP DATABASE IF EXISTS mytest;
CREATE DATABASE mytest;
COMMIT;
USE mytest;
CREATE TABLE tt (s1 INT);
COMMIT;
INSERT INTO tt VALUES (5);

Then create the procedure itself:

DELIMITER //CREATE PROCEDURE proc () SELECT * FROM tt; //

After this step I simply wanted to launch the procedure:

CALL proc () //

This then gave me the error message ‘SQL Error: PROCEDURE mytest.proc can’t return a result set in the given context‘.

I had to investigate this error as it was rather disturbing. However there were unclear things first. If you read the MySQL manual’s relevant part for Stored Procedures it clearly states that you are not allowed to use simple SELECT statments which return results sets:

Statements that return a result set cannot be used within a stored function. This includes SELECT statements that do not use INTO to capture column values into variables, SHOW statements, and other statements such as EXPLAIN. For statements that can be determined at function definition time to return a result set, a Not allowed to return a result set from a function error occurs (ER_SP_NO_RETSET). For statements that can be determined only at runtime to return a result set, a PROCEDURE %s can’t return a result set in the given context error occurs (ER_SP_BADSELECT).

Fair enough, but I wasn’t using this manual, I was using MySQL’s downloadable PDF manual for learning about Stored Procedures. In there, the example which I have presented is used and no such error appears.

The only difference is that I was using HeidiSQL whereas in the manual the MySQL command line was used. I tried to call the procedure from the command line and the fact that it was actually working shocked me.

So what now?

It turns out that HeidiSQL uses the ZeosLib MySQL component. And the error lies within this component. So I had to abandon the idea of using HeidiSQL (or even phpMyAdmin - surprisingly it produces the same error) and change to either MySQL Query Browser (or to SQLyog) as it uses the MySQL API directly.

Android is

… a software stack for mobile devices that includes an operating system, middleware and key applications.

I was - as always - browsing Google’s website when I found this new API, Android. I got interested so I downloaded it. In the mean time I also installed Eclipse, as many of Google’s application are easily programmable from this open-source software framework.

There is a really good step-by-step guide for installing the Android SDK and how to setup the plugin for Eclipse (Android Development Tools - ADT).

Also the ‘Hello, Android‘ tutorial is quite straightforward and easy to implement.

However, I had one issue when compiling and running some code on Android. The emulator starts up, loads and then a) I get an error message saying that the application is not responding or b) the same message but in the background I see my running application. Here’s what you can do:

1. In Eclipse go to Window > Open Perspective > Other
2. Choose DDMS from the list.
3. In the top left corner find a tab called ‘Devices’ and click on the arrow pointing down
4. Choose ‘Reset ADB’ from the list.

If you run your application again, the problem should not appear again.

I managed to make the Ajax.InPlaceEditor do some work for me. I had no idea what was wrong with my original approach until today, when I used Firebug to inspect the sent and returned values of my code. It was just then when I realised that there was no actual return value.

1
2
3
4

<h1 id="test">Test value</h1>
<script type="text/javascript">
        new Ajax.InPlaceEditor('test', 'output.php',{callback: function(form, value) { return 'name=' + escape(value)}});
      </script>

The solution was easy, the return value of the InPlaceEditor’s method needed a bit altering:

And here is output.php

1
2
3

$var = $_POST['name'];
echo $var;
?>

Easy

This simple tutorial will show you how to create a toolbar for Firefox. Being a casual Magic: The Gathering player, I thought I’d create a toolbar for Firefox which enables you to search for Magic: The Gathering cards from your toolbar.
To search card, you have to visit http://gatherer.wizards.com/ and enter your search criteria. We’ll implement a simplified version (you won’t be able to search for separate card editions).

First create a folder on your machine (eg C: drive) and name it as MTGbar. Create the following folder structure

+ MTGbar
+ chrome
+ content
+ skin

We’ll place our files here. The first file we create is install.rdf:

+ MTGbar
- install.rdf
+ chrome
+ content
+ skin

The install.rdf is the installation manifest file. All the details of our extension will be placed here, such as author, contact e-mail address, version number, etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
 
    <description about="urn:mozilla:install-manifest">
 
        <!-- Required Items -->
        <i:id>your@email.com</i:id>
        <i:name>Magic: The Gathering Toolbar</i:name>
        <i:version>1.0</i:version>
 
        <i:targetapplication>
            <description>
                <i:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</i:id>
                <i:minversion>1.5</i:minversion>
                <i:maxversion>2.0.0.*</i:maxversion>
            </description>
        </i:targetapplication>
 
        <!-- Optional Items -->
        <i:creator>Tamas Piros</i:creator>
        <i:description>Magic: The Gathering card search toolbar</i:description>
        <i:homepageurl>http://tamaspiros.co.uk</i:homepageurl>
 
    </description>
</rdf>

Next step is to create the chrome.manifest file:

+ MTGbar
- install.rdf
- chrome.manifest
+ chrome
+ content
+ skin

This file tells Firefox what outlays it should use to display our toolbar:

1
2

content mtgbar jar:chrome/mtgbar.jar!/content/
overlay chrome://browser/content/browser.xul chrome://mtgbar/content/mtgbar.xul

(Note we will modify this file later on)

The mtgbar.xul is the file which contains the actual layout (buttons, form elements, etc)

+ MTGbar
- install.rdf
- chrome.manifest
+ chrome
+ content
- mtgbar.xul
+ skin

XUL has a strict syntax (XML like) and it defines what we can put onto the toolbar. The same rules apply to XUL as for XML (closure of tags, lower-case tagnames and so on)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://mtgbar/skin/mtgbar.css"
                 type="text/css"?>
 
<overlay id="overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
	 <script type="application/x-javascript"
            src="chrome://mtgbar/content/mtgbar.js" />
 
    <toolbox id="navigator-toolbox">
 
        <toolbar id="MTG-Toolbar" toolbarname="M:TG Toolbar" accesskey="T"
                 class="chromeclass-toolbar" context="toolbar-context-menu" 
                 hidden="false" persist="hidden">
 
		<image id="image1"/>
 
		<toolbaritem id="MTG-cardname" persist="width">
			<label id="enter-name-label" control="cardname" value="Name:"/>
			<textbox id="cardname"/>	
		</toolbaritem>
 
		<toolbaritem flex="0" >
			<label id="enter-color-label" value="Card color:"/>
			<menulist id="cardcolor"
                               type="menu-button" tooltiptext="Card color">
 
			   <menupopup id="card-color">
				<menuitem id="mana" label="White" value="White"/>
				<menuitem id="mana" label="Blue" value="Blue"/>
				<menuitem id="mana" label="Black" value="Black"/>
				<menuitem id="mana" label="Red" value="Red"/>
				<menuitem id="mana" label="Green" value="Green"/>
				<menuitem id="mana" label="Multi-color" value="Multi-color"/>
				<menuitem id="mana" label="All colors" value="All color" selected="true"/>
			   </menupopup>
			  </menulist>
		</toolbaritem>
 
		<toolbaritem id="MTG-cardtype" persist="width">
			<label id="enter-card-type" control="cardtype" value="Card Type:"/>
			<menulist id="cardtype">
			   <menupopup id="card-type">
				<menuitem id="type" label="All Types" value="All Types" selected="true"/>
				<menuitem id="type" label="Creatures" value="Creatures"/>
				<menuitem id="type" label="Artifacts" value="Artifacts"/>
				<menuitem id="type" label="Enchantments" value="Enchantments"/>
				<menuitem id="type" label="Lands" value="Lands"/>
				<menuitem id="type" label="Instants" value="Instants"/>
				<menuitem id="type" label="Sorceries" value="Sorceries"/>
				<menuitem id="type" label="Tribal" value="Tribal"/>
				<menuitem id="type" label="Planeswalker" value="Planeswalker"/>
				<menuitem id="type" label="Banned / Restricted" value="Banned/Restricted"/>
 
			   </menupopup>
			</menulist>
		</toolbaritem>
 
		<toolbaritem flex="0" >
		<label id="sort-by" value="Sort by:"/>
			<menulist id="sorting"
                               type="menu-button" tooltiptext="Select sorting method">
			   <menupopup id="sort-by">
				<menuitem id="sortby" label="Name" value="Name" selected="true"/>
				<menuitem id="sortby" label="Cost" value="Cost"/>
				<menuitem id="sortby" label="Color" value="Color"/>
				<menuitem id="sortby" label="Type" value="Type"/>
				<menuitem id="sortby" label="Power" value="Power"/>
				<menuitem id="sortby" label="Toughness" value="Toughness"/>
				<menuitem id="sortby" label="Rarity" value="Rarity" selected="true"/>
			   </menupopup>
			  </menulist>
		</toolbaritem>
 
		<toolbaritem id="MTG-cardsearch" persist="width">
			<toolbarbutton id="find-card" label="Search" oncommand="performSearch()" />
		</toolbaritem>
 
        </toolbar>
    </toolbox>
</overlay>

For further information please refer to XULPlanet’s website.

Adding the style.
To add the style first we need to modify the chrome.manifest file:

1
2
3

content mtgbar jar:chrome/mtgbar.jar!/content/
overlay chrome://browser/content/browser.xul chrome://mtgbar/content/mtgbar.xul
skin mtgbar classic/1.0 jar:chrome/mtgbar.jar!/skin/

And - surprisingly - add a CSS file:

+ MTGbar
- install.rdf
- chrome.manifest
+ chrome
+ content
- mtgbar.xul
+ skin
- mtgbar.css
- mtgbar.png
- search_button.png

(Note that two PNG images were added as well)

The CSS file looks as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#enter-name-label, #enter-color-label, #enter-card-type, #cardname, #cardcolor, #sorting, #cardtype, #sort-by {
font-family: Verdana;
font-size: 10x;
margin-top: 7px;
margin-bottom: 5px;
}
 
#mana, #type, #sortby, #cardtype {
font-family: Verdana;
font-size: 10x;
}
 
#find-card {
color: #000;
list-style-image: url("chrome://mtgbar/skin/search_button.png");
}
 
#image1 {
list-style-image: url("chrome://mtgbar/skin/mtgbar_logo.png");
}
 
#navigator-toolbox, #MTG-Toolbar {
background-color: #fff;
}

(Note the stylesheet is already added to the .xul file:
<?xml-stylesheet href=”chrome://mtgbar/skin/mtgbar.css”
type=”text/css”?>)

Now we have the layout, the design, all we have to do is make it work. Scripting the toolbar is really easy and it’s done via JavaScript. Create a .js file within your directory structure:

+ MTGbar
- install.rdf
- chrome.manifest
+ chrome
+ content
- mtgbar.xul
- mtgbar.js
+ skin
- mtgbar.css
- mtgbar.png
- search_button.png

I created two methods within the .js file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

function performSearch() {
 
var URL;
var cardName = document.getElementById("cardname");
var colour = document.getElementById("cardcolor");
var type = document.getElementById("cardtype");
var sort = document.getElementById("sorting");
var param = "";
 
if (colour.value != "All Colors") {
param += "&colorfilter="+colour.value;
}
else {
param += "";
}
 
if (type.value != "All Types") {
param += "&typefilter="+type.value;
}
else {
param +="";
}
 
if (sort.value != "Name") {
param += "&sort="+sort.value;
}
else {
param +="";
}
 
URL = "http://ww2.wizards.com/gatherer/index.aspx?term="+cardName.value+"&Field_Name=on&Field_Rules=on&Field_Type=on&setfilter=All%20sets"+param;
 
LoadURL(URL);
 
}
 
function LoadURL(url) {
 
var newTab = gBrowser.addTab(url);
gBrowser.selectedTab = newTab;
 
// Make sure that we get the focus
window.content.focus();
}

performSearch() gets all the paramters sent from the XUL file - that is colour, type, name and the sort by. The return value then gets passed onto the LoadURL method which loads the actual URL into a new tab.

There are two steps left. First is to create a jar file and the final one is to create the CrossPlatform Installer (.xpi). The jar file must be created within the chrome folder and most contain the relative path of the files within the two folders (content and skin).

+ MTGbar
- install.rdf
- chrome.manifest
+ chrome
- mtgbar.jar
+ content
- mtgbar.xul
- mtgbar.js
+ skin
- mtgbar.css
- mtgbar.png
- search_button.png

To create this file, navigate to the chrome folder in your cmd prompt and enter:

jar -cMf mtgbar.jar content/* skin/*

(jar c: creates a new jar file M: disables the manifest file f: defines the filename)
[This method is good for machines running Windows OS, for *NIX machines use the same command but with the zip -r command].

The final step is to create the XPI file. The XPI file is a simple ZIP file so you can use WinZip to zip it up. It needs to contain the intall.rdf file, the chrome.manifest file plus the chrome/mtgbar.jar. Again make sure that the correct path (chrome/mtgbar.jar) is included within the XPI file (to enable this, tick the option for relative folder paths in WinZip).

+ MTGbar
- install.rdf
- chrome.manifest
- mtgbar.xpi
+ chrome
- mtgbar.jar
+ content
- mtgbar.xul
- mtgbar.js
+ skin
- mtgbar.css
- mtgbar.png
- search_button.png

That’s it. Open your Firefox browser, go to File > Open, locate your XPI file, install it, restart Firefox and you should be able to see you ready made toolbar. Congratulations!