April 26, 2009
XRap Version 1.0
Well its been a long time coming, a lot of research, and a ton of learning, but here it is. XRap version 1.0. You can now successfully create a Windows Installer(msi) if you are working on Windows, a tarred bunzip2 (tar.bz2) archive if you are working on Linux, and an Apple Disk Image (dmg) if you are working on a Mac. I have worked out the bugs which I am aware of, but will definately still be working on any new ones that come up.
Here are the steps for each platform:
Windows:
- Open up XRap, and select the root of your XULRunner application directory, and click next.
- Select the type of License you would like to attach to your application from the drop-down list of available licenses. You can optionally select your own license, or no license at all. Once you have selected your license option, click next
- You must now select the type of installer you would like your end-user to have.
- Automatic Installer – Will automatically install your application on to the end-user computer, with no wizard.
- Wizard Installer – Will start the Windows Installer wizard, showing your license agreement on a single page, and giving the option for the end-user to install your application to a custom path.
- Minimal Wizard Installer – Will start the Windows Installer wizard, using only one page, which shows the license agreement, then installs your application to the default directory.
- Once your have selected the type of installer you want, click next, and XRap will package your application
- When successfully completed, XRap will go to the last page where you can open the directory of where your new msi will be located, and your can close XRap.
Linux
- Open up XRap, and select the root of your XULRunner application directory, and click next.
- Select the type of License you would like to attach to your application from the drop-down list of available licenses. You can optionally select your own license, or no license at all. Once you have selected your license option, click next
- You can optionally select to create a zip file of your application for distribution on Windows. Click next to continue.
- XRap will now package your application into a tar.bz2, and optionally a zip file if selected.
- When successfully completed, XRap will go to the last page where you can open the directory of where your tar.bz2 file will be located, and your can close XRap.
Mac
- Open up XRap, and select where your XULRunner application (with the .app extension) is located, and click next.
- Select the type of License you would like to attach to your application from the drop-down list of available licenses. You can optionally select your own license, or no license at all. Once you have selected your license option, click next
- XRap will now package your application into a dmg.
- When successfully completed, XRap will go to the last page where you can open the directory of where your dmg file will be located, and your can close XRap.
I hope to release an updated version where you can create simple packages for different platforms. Similar to how you can create a zip file on Linux for distribution on Windows. My current plans are:
Windows:
- Create a zip file for release on Linux
- Create a zip file for release on Mac, I will have to refactor the directory structure so that it aligns with the Mac model
Linux
- Create a zip file for release on Mac, I will have to refactor the directory structure so that it aligns with the Mac model
Mac
- Create a zip file for release on both Windows and Linux
I plan to work on it over the summer, and hope to be compeleted within the next couple months. Please post any new bugs found on xrap.sourceforge.net.
Enjoy!
April 23, 2009
A new understanding: XUL and .app
After talking to some guys in the #xulrunner channel on IRC, I foundout that my Mac applications were setup all wrong. At first I was like, why would they do that? But after getting it to work, I figured that it was pure genius! First of all, I was simply copying over my XUL app directly from my Linux box to a Mac, and then running it from Terminal:
//Library/Frameworks/XUL.framework/xulrunner-bin /path/to/app/application.ini
It worked, so I went with it. To install an app, you just add ‘–install-app’ to the end of ‘xulrunner-bin’, and it will stick it into the Applications folder. For some reason or another, Once it was installed, I could run it. But when I tried that same procedure on other machine, it didn’t work. Hmm. After some conversations, and reading, notice and article on MDC on Deploying XULRunner 1.8, and there was my answer.
Basically XULRunner on Mac has a different file structure, which is as follows:
MyApp.app/
- Contents/
- Info.plist
- Frameworks/
- XUL.framework/
- …all the XULRunner files
- Resources/
- application.ini
- icon.icns
- components/
- everything in your normal component directory
- chrome/
- everything in your normal chrome directory
- all your additional files and folders
- MacOS/
- xulrunner (the file copied from the ‘xulrunner’ stub, not the xulrunner-bin)
MyApp.app is actually a directory, with a ‘.app’ extension on it. All it did was create a directory, put all my files in the correct structure, add the ‘Info.plist’ file, and rename the directory with the ‘.app’ extension. The Info.plist file was probably the most complicated to recreate. The example from MDC is not very helpful, especially if you don’t know what your doing, and have to write it by hand. However there is a “Property List Editor” application on Mac, which will help you create the file.
Property List Editor
These are the properties which must be in your Info.plist file, for your XULRunner application to work. Key fields which are important are:
| Executable File | This is the name of the xulrunner stub file in the MacOS directory |
| Icon File | The name of your Icon in the Resources directory |
| Bundle name | Name of the .app directory |
The actually XML file looks like this:
<?xml version=“1.0″ encoding=“UTF-8″?>
<!DOCTYPE plist PUBLIC “-//Apple//DTD PLIST 1.0//EN” “http://www.apple.com/DTDs/PropertyList-1.0.dtd”>
<plist version=“1.0″>
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>English</string>
<key>CFBundleExecutable</key>
<string>XRap</string>
<key>CFBundleGetInfoString</key>
<string>XRap 0.9</string>
<key>CFBundleIconFile</key>
<string>xulwizard-window</string>
<key>CFBundleIdentifier</key>
<string>net.sourceforge.xrap</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>XRap</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>0.9</string>
<key>CFBundleSignature</key>
<string>Mac</string>
<key>CFBundleVersion</key>
<string>0.9</string>
<key>NSAppleScriptEnabled</key>
<true/>
</dict>
</plist>
Its best to do all your work in your application directory, before adding the .app extension, because then it is treated like a file, and you will be unable to enter the directory, unless you remove the extension.
In refactoring XRap, I was still able to access the directory even though it was a .app. Using nsIFile to add files (the License), and read the application.ini, with no problem. In packaging, using pkg-dmg script, I had to create a staging area (temporary directory) and copy the .app into it, because the script only accepts directories to be imaged. If I tried to image the .app, it would image it as a directory and add .dmg to the end, defeating the purpose.
Well now I am proud to say that Mac packaging is complete. You can now package an application as an dmg image. When a user downloads the image, all they need to do is mount it, and run your app.
I want to eat an apple now.
April 17, 2009
XRap Icons!
I finally got around to creating an icon for XRap the other day. I figured people use a box to package things, so why not use a box! Then I have been looking at that Mozilla globe, which is the default for XUL apps on Windows, and I noticed that most Mozilla apps have that globe integrated in their icon. So I pulled the globe from mozilla-central:
Default XUL Icon
I used GIMP to create the box. Which ended up just being a lot of trial and error with the shading on the sides of the box. I’m not too sure if the perspective is correct, but it turned out ok for someone that knows very little about graphic design.
Final XRap icon
To applying the icon to XRap is actually quite easy. Simply put the icon into:
(application name)/chrome/icons/default/
then for Windows, you will need an icon with the .ico extension, while on Linux you will need an icon with the .xpm extension. The name of the icon will be the id of your application, which will be located in the <window> element of your xul code. I believe there is another way to apply your icon to your application, through the branding content package, which must be defined in your manifest.
March 22, 2009
XRap version 0.8 update
XRap 0.8 is now completed, and everything is now coming together. I have managed to merge Mac packaging into XRap, so that it creates a dmg to mount on the Mac file system, and then I have created a script to run xulrunner-bin –install-app, which installs the XULRunner application into the Application folder on a Mac. In terms of XRap all this means is that when XRap detects that it is being run on a Mac, it will create all this for the application you want to package.
The step for creating a package is the same as create one for Linux and Windows, one the first screen open the directory to where your application is stored, click the ‘Next’ button, and XRap will create a script to install your application into the Applications folder, and then create a dmg of the application folder. Done!
Windows packaging is just about finalized, and running perfectly. Linux on the other hand might need some last minute refactoring. After working on the Mac, and talking to some people on IRC, I realized that ‘xulrunner-bin –install-app’ is an awesome script, and that there should be one for Linux. There is, only it is ‘xulrunner –install-app‘. So now I might scrap all of the Autotools work (which will also remove the prerequisite of the developer needing autotools installed), and just tarball the application and create an install script for it, which will put it into ‘/usr/lib/’ for all Linux distros. One of the benefits of dumping Autotools, is that I can now write an install script, and zip it on Windows, the same method can also apply for Mac, since it is not possible to create a dmg without a Mac, I can write an install script and zip. This will tackle one of the requests, that XRap be able to package for any platform, no matter what you are working on. It should definatly be done by my 0.9 release.
I have got a ton of ideas from my professor on little ideas/features to make XRap a better product. Here’s a list of things which I have compiled which I expect to be completed for the next release:
- Use a ‘Throbber’ for the Packaging status screen, so that the use knows the application is working.
- On the last page create a link to the destination of the output file.
- On the second page allow the user to import/apply a license into their application, by giving them a list of available licenses to choose from, or apply their own.
- For the Windows version of XRap, give a description of each Installer, and change the dropdown list of Installers to a list of radio buttons
- Automatically go from the ‘Packaging Status’ page to the ‘Completion page’ when packaging is complete
- Create an installation log generator
- Logo (for final release)
Tinkering…
March 11, 2009
Using Mozilla to create a dmg…Part II
I finally got access to a Mac which I can develop on, and after about 30 minutes of learning how to use it (I haven’t used one since grade school), it was amazing! Yes I want a Macbook now, but that’s another post. The first job for creating a dmg on a Mac using the Mozilla code, is actually getting it to run XUL apps. To do this you must first download and install XULRunner, which conviently for Mac is just a standard installer. Once installed, the XULRunner runtime is placed in:
/Library/Frameworks/XUL.framework/
This will make available ‘xulrunner-bin’, which will be needed to run the XUL app. I noticed (and liked) that the XULRunner runtime is installed in a default location similar to Linux and unlike Windows, where it is just where you put it, and you have to set a bunch of environment variable to point to it. To run a XUL app, is almost just as easy, there are two ways:
Install the application:
/Library/Frameworks/XUL.framework/xulrunner-bin –install-app /absolute/path/to/app.zipRun the application (without install):
/Library/Frameworks/XUL.framework/xulrunner-bin /absolute/path/to/application.ini
If you choose to install the application, it can be a XUL app packaged in a zip file or a folder of a XUL app, but it will conviniently put your installation into the:
/Applications/<vendor>/<appName>/
You can then run the app. If your developing, it may be a better idea to simply run the application, however there is a warning on MDC that the menu bar and dock icon may be missing. From experience, on my first run, the command executed, and I got nothing, and the bash prompt appeared, so I ran it again and I received a message that the app was already running. No window opened or anything, so I just closed the Terminal, refactored my code (I think there were some errors in it), and ran it again, with success.
Once I got my app working, running the ‘pkg-dmg‘ was simple, and it worked brilliantly! From mozilla-central, I stored only the folders leading to the ‘pkg-dmg’ file, then all the files in the folder. So basically, ‘mozilla-central/build/package/mac_osx/‘ , then all the files in /mac_osx. I made some modifications for my XRap release, by putting ‘pkg-dmg’ command in a script and calling it, but this is basically how it should work:
var getWorkingDir= Components.classes["@mozilla.org/file/directory_service;1"] .getService(Components.interfaces.nsIProperties) .get(“CurProcD”, Components.interfaces.nsIFile);
var dmgLoc = getWorkingDir.clone();
dmgLoc.append(“mozilla-central”);
dmgLoc.append(“build”);
dmgLoc.append(“package”);
dmgLoc.append(“mac_osx”);
dmgLoc.append(“pkg-dmg”);
process.init(file);
var args = ["--source ",applicationPath ," --target ",applicationPath + ".dmg"];
process.run(true,args,args.length);
And work it did! Here is an example, when I called it from bash
Mount and go!
March 8, 2009
Its XUL Wizardry!
Become a Wizard at Wizard making! Lol. Like everything, creating a Wizard in XUL is quite easy, until you want to add some complicated logic to make things difficult for yourself. XUL does offer a full assortment of wizard properties and methods to make the process easier and much more dynamic for the end-user.
By comparison, a normal XUL app will be enclosed in <window> tags, while a wizard will have the <wizard> tag.
<?xml version=”1.0″?>
<?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?><wizard id=”testWizard” title=”First Wizard”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
…
</wizard>
All wizards contain a series of pages for the end-user to progress through. Just in the same fashion will each page be created, with its logic, followed by the next page, with it logic and so on. Each new page will be enclosed in the <wizaradpage> tags.
<wizardpage>
<label value=”Welcome to my first wizard, enter your name and click next to continue…”/>
<textbox id=”name” />
</wizardpage><wizardpage>
<label value=”That is all to wizards”/>
</wizardpage>
There is a pretty good ‘Creating a Wizard‘ tutorial at Mozilla Developer, however there is not much more than what is covered here. The strength of the wizard is in the flexability of its attributes, properties and methods, and the only way to see the versatility of this component, is to manipulate these features.
I will be revamping my XRap application to run as a wizard, where it will only execute certain scripts depending on what platfrom it is running on. For example, since I won’t be able to create Mac packages on Windows or Linux, I don’t want to give the user the option of creating a Mac package if they are running on the latter.
