Ubuntu is THE BEST!!!! Hahaha forgive me if you feel this is exaggerated. But it’s certainly the best Linux I installed so far, although I am still a light client of Linux.

I say so because it installed on my machine almost without any manual work, except the set-up of my USB wireless adapter, Netgear WG111v2. Even the sound card worked magically! Amazing! None of XP or Vista recognizes it, but Ubuntu has that perfect screw in its 1 disc large toolbox.

So here is the process setting the wireless card up, just in case I will need it later.

Check the version of Ubuntu

The one I used was 6.10 I believe.

Check availability of ndiswrapper.

ndiswrapper is the key of the whole thing. Ubuntu has the program out of box but it may not be installed with default Ubuntu installation. Insert the disc when running Ubuntu on the disk, you will be able to choose additional packages to install.

For 6.10 it has three versions of ndiswrapper. Just select ndiswrapper-1.8 should be fine. Consequently, the command you will enter later will be ndiswrapper-1.8 instead of ndiswrapper.

Get the driver of the WG111v2

It’s available from Internet or the official website. I used one from third-party I think. It’s a .cab file. Unzip it in Windows and copy the folder to Linux, with a USB memory key. The folder contains a folder called files. The three files in it are the key files.

You can get the cab file from here too. wg111

Run the command

I logged in as root. Navigate to the folder containing the driver files, say /root/Desktop/wg111driver/files/

[source lang='shell']
# ndiswrapper-1.8 -i netwg111.inf /*install the windows xp driver*/
# ndiswrapper-1.8 -l /*check if it is installed*/
# modprobe ndiswrapper /*if works, you can see the light on; it’s ndiswrapper here, not ndiswrapper-1.8*/
# ndiswrapper-1.8 -m /*boot it as a module*/
# iwconfig wlan0 essid ESSID key restricted XXXXXXXXXXXXXXXXXXXXXXXXXX /*This step can be done with GUI. Administration->Networking*/
# dhclient wlan0 /*Flush the dhcp*/
[/source]

<Credit to ychen on Ubuntu forum>

That’s it!

The goal of this tutorial is to explore dojo.rpc module. To my best understanding, this is a simplified way of calling servers asynchronously in Dojo. So now you can save a lot of hassle worrying about the types and versions of browsers.

Modify Interface

setting up a remote message

I created a file called lab005.service and put under dojolab/resource/

Later we will load message, asynchronously, from this file.

adding a output pane

The message in a file could be large, so it’s more appropriate to have an output box to display retrieved text.

Adding RPC function

changing the function name

Since when the button is pressed, it’s going to get some data, so a better name representing its function is preferred.

var getData = function(){
...
}

read url

Like in the last exercise, we will read from the TextBox. The value is set as the url to the file from which we will read. It’s also disabled to give you an idea of what it looks like.

<input id="input" name="string" size="50" type="text" value="resource/lab005.service" />

*With Firebug it’s possible to modify the value of the url so disabling it cannot really protect it from being changed.

create dojo.rpc.JsonService object

Require the module first.

dojo.require("dojo.rpc.JsonService");

Create a new JsonService object, passing it the url which it will call.

//msg was read from TextBox value;
var rpc = new dojo.rpc.JsonService({serviceUrl : msg});

bind and call

With the handle to the JsonService object, we will then bind it to handler functions.

rpc.bind(null, null,
{
callback: function(text){
console.debug("Message Retrieved.");
output.innerHTML = text;
}
},
null);

The third parameter of the bind function must be a object that contains at least a callback function. It may also contain another function to deal with cases when the retrieval fails.

The fourth parameter is the url, since we already specified url during JsonService object creation, it can be null.

The first and second are method and parameters, respectively. They are null because the file from which we will read is a plain text file and doesn’t ask for methods or parameters.

Screenshot

Example

Example: lab005.html
Source Code: lab005.txt

The goal of this exercise is to add interactivity between two dijits, TextBox and Button.

add TextBox

load TextBox dijit

Add another dojo.require after the former two.

dojo.require("dijit.form.TextBox");

add TextBox dijit

Add the following code before button dijit.

<input id="input" class="medium" name="string" type="text" />
<button id="hello" onclick="log()">Hello Dijit</button>

extra attributes

Notice when adding TextBox, a few extra attributes are specified

• trim, tells dojo to remove leading and tailing spaces in the input
• propercase, tells dojo to capitalize the first letter of each word separated by spaces

augment Button onClick function

In this exercise, when the button is pressed, we want the function to read values in the TextBox first, then output the msg to the console.

dijit.registry

To find the TextBox dijit value, we need to find the TextBox dijit first.
dijit.registry, by its name we can guess, contains information about all the dijits in this page. Therefore we can utilize it to find the TextBox dijit and its value.

get the value

//Find the dijit by its id;
var input = dijit.registry.byId("input");
//Get the value of the TextBox by calling its function getValue
var msg = input.getValue();

wrapping up as a function

Replace var log = console.debug in last example with the following code

var log = function(){
var input = dijit.registry.byId("input");
var msg = input.getValue();
if (msg == ""){
msg = "nothing";
}
console.debug("I was pressed to say " + msg);
}

Finally, modify the onClick attribute of the Button.

<button id="hello" onclick="log()">Hello Dijit</button>

Screenshot

Example

Example: lab004.html
Source Code: lab004.txt

The goal of this exercise is to add a rollover tooltip and add an event to the button created in last exercise.

Add tooltip

Load Tooltip dijit

Add another dojo.require after loading Button dijit.

dojo.require("dijit.form.Button");
dojo.require("dijit.Tooltip");

Add tooltip and attach to the button

Add actual dijit to the body of the web page.
Notice the value of connectId attribute has to be the same with the id of the button dijit. Dojo will know that this tooltip is for the button having the same id.

<button id="hello">Hello Dijit</button>

Press to output in console.

Add an action

Define a function

<script type="text/javascript"><!--
var log = console.debug;
// --></script>

What this code does is to let log point to console.debug function. Therefore when log is called, it will behave like console.debug, which is output a message in the Firefox console.

Add action to the button

Set onClick attribute of the button markup to log().

<button id="hello" onclick="log("I was pressed to say hello.")">Hello Dijit</button>

Screenshot

Example

Example: lab003.html
Source Code: lab003.txt

The goal of this exercise is to add a simple Form dijit to the page, and turn on the Tundra visual theme, bundled with Dojo.

Steps to add a button dijit

Load the module by calling dojo.require

<script type="text/javascript"><!--
dojo.require("dijit.form.Button");
// --></script>

Add dijit to the page as markups.

<button id="hello">Hello Dijit</button>

By now what you’ll see in the page is a normal button that has the same look and feel as your browser form elements.

Screenshot

Turn on theme

djConfig

Dojo has predefined djConfig parameters and are applied as dojo.js is being loaded.

<script src="../js/dojo090/dojo/dojo.js"></script>

Here we need to turn one of the parameters on, parseOnLoad. What it does is to tell Dojo to apply styles to dijits as it goes through the page during page load.

tundra.css

This is the stylesheet for theme tundra. In the file it specifies styles for all dijits having applicable styles. I assume any other themes would have same classes and ids, if any, as this one.

Unlike Dojo 0.4.x, the stylesheets are not automatically loaded and applied and the following statement needs to be added to the head.

@import "../js/dojo090/dijit/themes/tundra/tundra.css";

one more step

Add class=”tundra” to body tag.

Screenshot

Example

Example: lab002.html
Source Code: lab002.txt