Techedd

Mozilla XUL Application Development Notes, Micro Tutorial and Helper Scripts

2008-05-28T12:03:00.000-07:00

I love Ghostbusters and I believe Tingo is Gozar the Carpathian, but thats not what I'm logging.

I've started experimenting with the Mozilla Toolkit (Toolkit API). Its a framework for building applications, extensions and themes for Mozilla; and it is awesome. Anyone with some basic web development skills ( xml (o,w), css, javascript) can build using the Mozilla Toolkit. They provide an nice UI markup language called XUL.

To get started I scoured the Mozilla Developer Center for documentation and tutorials and ended up spending 90% of my time with Mozilla's developer site resources. I did find 2 other tutorials and documents that helped a lot and if I can find them again I'll list them here:

Ryan's Work Blog: This post was great for a quick run down on how to set things up. I used Ryan's layout for my test app and it was REALLY useful to see how he setup his chrome.manifest with the file: reference. However, the same information can be found in the tutorial on Mozilla Developers Site by Mark Finkle...

MozDev: Getting Started with XULRunner by Mark Finkle

What I found was a nifty tool for running Mozilla Applications called XULRunner.

I started building... I had problems... I'm going to now provide some notes...

NOTES:
I am doing my development on Windows, but because of its XP (Cross Platform) design, I'll be testing and running on Windows XP 32/64, Vista Premium 32/64, FreeBSD 7.0, Fedora 8/9 and maybe Gentoo.

Windows:
1. Download XULRunner
2. Unzip and put somewhere easy: C:\xulrunner
3. Register path to xulrunner. Open cmd prompt and type: path=%PATH%;c:\xulrunner
4. Put source package in easily accessible directory. Something like c:\home\me\src\mozilla\myapp

I copied a batch file that automatically creates the base directory structure. I modified it to provide a little more default generation. All you have to do is create a batch file (right-click, select new, file, rename to xulgen.bat) in the source directory, paste the code below then execute the batch file (double-click). I actually keep xulgen.bat in my ~\src\mozilla dir so i can copy it into new folders.

xulgen.bat

cls
@echo off
echo About to create the XULRunner directory structure

SET def_company=mediaHACK
SET def_app=MyApp
SET def_version=0.0.0.1
SET def_build=%DATE:~10,4%%DATE:~4,2%%DATE:~7,2%
SET def_copyright=%DATE:~10,4%
SET def_app_id=xulapp@domain.tld

pause

touch application.ini

echo [App] > application.ini

SET /P cn=Enter Company Name (Default: %def_company% ):
if "%cn%"=="" SET cn=%def_company%
echo Vendor=%cn% >>application.ini

SET /P app=Enter App Name (Default: %def_app%):
if "%app%"=="" SET app=%def_app%
echo Name=%app% >>application.ini

SET /P vers=Enter Version (Default: %def_version%):
if "%vers%"=="" SET vers=%def_version%
echo Version=%vers% >> application.ini

SET /P buildid=Enter Build ID (Default: %def_build% ):
if "%buildid%"=="" SET buildid=%def_build%
echo BuildID=%buildid% >>application.ini

echo Copyright=Copyright (c) %def_copyright% >>application.ini

SET /P id=Enter App ID (Default: %def_app_id%):
if "%id%"=="" SET id=%def_app_id%
echo ID=%id% >> application.ini

echo [Gecko] >>application.ini
echo MinVersion=1.8 >>application.ini
echo MaxVersion=1.9.0.* >>application.ini

mkdir chrome
cd chrome

touch chrome.manifest
echo content %app% file:content/ > chrome.manifest

mkdir content
cd content
touch main.xul

echo ^<?xml version="1.0"?^> >main.xul
echo ^<?xml-stylesheet href="chrome://global/skin/" type="text/css"?^> >>main.xul
echo ^<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"^> >> main.xul
echo ^<caption label="Hello World"/^> >> main.xul
echo ^</window^> >> main.xul

cd ../..
mkdir defaults
cd defaults
mkdir preferences
cd preferences

touch prefs.js
echo pref("toolkit.defaultChromeURI", "chrome://%app%/content/main.xul"); > prefs.js

cd ../..

This script can easily be ported to *nix and I'll post it here when I port.

After that, the files it creates need to be edited:
/application.ini => Update the ini settings to your needs
/chrome/chrome.manifest => change the myapp to the name of your folder (which i usually name based on my application)
/defaults/preferences/prefs.js (if you don't want /chrome/content/main.xul to be your default launch page)

Below I recommended you manually edit the main.xul file. The batch file now creates this Hello World example for you. ~~You'll also need to put some markup in the main.xul file (hello world xul): /chrome/content/main.xul:~~

main.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="main" title="My App" width="300" height="300"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<caption label="Hello World"/>
</window>

After we've edited the files and are ready to run we need to test! In windows we can do this 3 ways:

Command Line

Start->Run->cmd
Type: xulrunner c:\path\to\xul\app\application.ini

Start->Run
Type: xulrunner c:\path\to\xul\app\application.ini

A batch file

Create a batch file in the application directory. I found with my XP64 install I had to put the full path to XUL runner in my batch file even though i registered in the path env var.
c:\xulrunner\xulrunner.exe c:\path\to\xul\app\application.ini
Run your batch file.

I used the batch file method.

Nintendo ES Operating System

2008-05-15T16:36:00.001-07:00

A while back I remember reading about the Nintendo ES OS. Its a reference OS based on ECMAScript (ES) aka Javascript. Every once in a while I get a wild hair up my arse to go and check out the status of this project; because I one day hope to see what the dealio is. And when I get the hankering to go and see whats going on, it is ALWAYS a pain to find information. Mostly because you can't quickly find it using the google terms "nintendo javascript engine" or the likes... I found it this time by searching google for: "nintendo ecmascript". What I found was a link to gamasutra.com about the nintendo es os which lead me to nes.nintendo.jp which lead me to Google Code.

GamaSutra -> Japanese SourceForge -> Google Code

FYI, Those tardhammers over at gamasutra borked the link to nes.sourceforge.jp and it gives a 404. Its on account that they added a space (%20) at the end of their href.

SO to not have to go searching very far, I'm documenting this...

Nintendo ES Operating System @ code.google.com

Here's an excerpt from the google code page:

ES is an ECMAScript friendly, pure component operating system. Additional components include an ECMAScript interpreter and an IDL compiler.

The project goals include but not limited to:

a pure component operating system kernel design and development
a component object binding runtime implementation for ECMAScript
an HTML5 rendering engine integration
a TCP/IP stack implementation based on design pattern

PHP6 Development Releases

2008-05-15T12:30:00.000-07:00

I've been curious about PHP6. I've seen books already for it; even though its not released. Today I came across the snapshots at PHP.net and BLAMO! there is PHP6. I'm gonna download and test :)

Linux From Scratch (LFS)

2008-05-15T11:17:00.000-07:00

I've always wanted to tackle this project. I was browsing around today looking at Fedora 9 and Ubuntu. Typically I'm a Gentoo kinda person, but because of time constraints I'm looking at installing one of these more popular linux distros.

Anyways, during my searching I found a good, but dated, comparision of Fedora vs Ubuntu (which is a nice little page for comparing/choosing Linux distros) over at polishlinux.org. I remember visiting this site in the past, but couldn't remember its substance (Linux obviously, but what facet of Linux). Heading to the home page i found this article, Linux from Scratch: A Recipe For a System, and decided to put up something here so I'd have a look back at some point and if anyone stubbles across this they'll have more info.

If you're interested, here's a link to the Linux From Scratch site.

Nico Nico Gifs... OMA

2008-05-13T15:40:00.000-07:00

OMAwethum! Browsing around today Japanator has a link to Nico Nico gif set. I'm putting this here for posterity. love.

Nico Nico Gifs

Jonny Lee TED 2008 Wii-mote presentation

2008-05-08T16:57:00.000-07:00

This is nothing new, but I wanted to track this great video of Jonny Lee's wii-mote presentation at the 2008 TED convention. Along with a couple of other links that reference this type of work.

Managed Library for Nintendo's Wiimote
Wii headtracking Creates 3D Window Display
Incredible Wiimote Hack Creates Multitouch Display

Steamworks

2008-05-07T14:41:00.000-07:00

For those of you who know me in real life, I have aspirations and dreams. One of those is to transform some of the stories swimming around my gray matter into video games. I am very busy so usually I write them down (50% of the time) and I move on... However, after talking with BDog (he is a game developer working on a game for Dark Omen Studios) today, we discussed Valve's Steamworks. GREAT IDEA!

Steamworks opens Steam up to any developer. This is awesome, however, I see where this could go bad very quickly. This promises to get flooded with a crap-ton (on US Metric System) of horrible games. Is this asking for the good to get lost in the sea of mediocrity? Or will good games really shine through?

Valve Source on Linux

2008-05-07T14:34:00.001-07:00

So todays big nerd proggy news is that Valve is porting their Source engine to Linux. Wow. This is great. I'm a *nix fan stuck in a Windows world by 2 traps: my dev suites and games. With Id Software and Valve putting out Linux clients, I don't see how this isn't a win. Lets just hope that Epic doesn't get purchases by M$ or we'll never see that UT3 linux client.

PHP 5.2.6 out

2008-05-06T14:33:00.000-07:00

I saw PHP 5.2.6 is out so I've updated a few servers. FreeBSD 7.0 and 6.2 using portsnap makes upgrading a snap.