Archive for the 'HowTo' Category

HowTo - Make Your Own WebApp

This is just a quick howto on making your own WebRunner/Prism webapp file. This is a very simple process and shouldn’t take more than a few minutes of your time. There are a couple of tools you need however, to get started.

  • a file archiver - my favorite is 7-zip, but you can just as easily use any archiving program that is compatible with zip files
  • a text plain text editor

For more advanced webapps, a more advanced context highlighting text editor can be helpful for coding custom style sheets or adding javascript customizations. And don’t forget icons! I use a combination of Paint.Net and @icon sushi (which covers everything but MacOS, which is because I can’t seem to find software for Linux or Windows to accommodate icons for it - recommendations anyone?).

The No “.webapp” WebApp

There are several ways to open webpages with Prism or WebRunner. The first and easiest is to install Prism, then create a link to it on your desktop. Then change that link adding the option “-uri” and the url of the page you want to open. Here are two examples:

Windows:
c:\your\path\to_prism\prism.exe -uri http://web_url_of_site c:\your\path\to_prism\prism.exe -uri c:\location\of\local_file

GNU/Linux:
/your/path/to_prism/prism -uri http://web_url_of_site /your/path/to_prism/prism -uri /location/of/local_file

This method does not require a webapp file, it just launches the website or file you specify. This means, no icons are required, but you also don’t get to add any custom themes or js files. This would be a really good method to use with applications like Wiki on a Stick (woas).

WebApp Bundles

The second method is also pretty straight forward (until you make it complex by adding more functionality). For the most basic webApp bundle you only need to create one file; the webapp.ini. Here’s the content from the example webapp.ini on the Prism wiki:

[Parameters] id=unique-app-id@unique-author-id.whatever uri=http://[the-url-what-you-want-to-connect-to]/ status=yes location=no sidebar=no navigation=no

The “id” parameter is required to be unique. I’ve been using my website’s url (as most others have done as well) preceded by the name of the site, but any unique identifier will work. The “uri” parameter is required and will accept both url of the target website as well as local file paths. Everything after that appears to be optional and the values show are the defaults. These remaining parameters are options to tell Prism whether or not to show certain GUI elements (”status” = status bar;”location” = address bar;”sidebar” = sidebar;”navigation” = well, quite frankly, I have no idea - maybe navigation buttons that haven’t been implemented yet?).

The next step after saving your changes to this document, is to use your archiving program to zip up this file creating, as an example, “your_webapp.zip”. Replace the “zip” extension with “webapp” and you’re ready to roll! Now either double click the webapp file or you can launch the webapp from the command line thusly:

Windows:
c:\your\path\to_prism\prism.exe -webapp your_webapp_bundle

GNU/Linux:
/your/path/to_prism/prism -webapp your_webapp_bundle

For more advanced webapps you can add icons, scripting and style sheet support (see the Prism page for more details).

Happy coding!

Prism
Prism/WebApp Bundle
Prism/Scripting
Prism/Styling
7-Zip
Paint.Net
@icon sushi
Wiki on a Stick

WebRunner now Prism, Whatever - Here’s How To Make An Extension Compatible With At Least One…

UPDATE AGAIN! 080611
I’ve made a new post on this subject cause it’s easier to update by adding new posts instead of updating this one. Enjoy!

Update!!
Had to add a comment to the replacement code below in order for this to work.

080404 Update!!
Yet again, code changes for new versions and what not.

Looks like Mozilla has added WebRunner to it’s Mozilla Labs line up and changed the name to Prism. From what they say, it’s going to be a cross between an open version of Adobe Air and Microsoft Silverlight and a localized lancher for web applications. Which, by my definition, is what utility computing is supposed to be like. Prism is currently for Windows only (they’d better hurry up with a Linux version), but it runs the same webapp files and also has added style sheet support - among other things - so you can style your webapps your way.

Anyway, I’ve been kind of discouraged by the lack of extension availability for WebRunner (and XulRunner for that matter). You’ll find in another of my posts a webapp for accessing the WebRunner extensions panel. Using this webapp, you can add new extensions (by installing or dropping them onto the panel), but at this point, adding extensions will fail because the version checking mechanism for WebRunner/XulRunner. To get around that, you need to change the extension’s compatibility information. These instructions will not work for every extension and your results will vary…

I recommend you find a smaller extension, download it and make the following changes:

  1. Open the extension package (you can open it with 7-zip, ALzip, Winzip or any other archive program that works with zip files.
  2. Extract and open the install.rdf with a text editor, I’d recommend Wordpad if your using windows.
  3. Locate and change the following or something that looks like the following (this will vary by extension, but look for the Firefox description section - and you may find that you have to remove all references to all other Mozilla programs that the extension is compatible with for this to work):
<!--Firefox-->
<RDF:Description RDF:about="rdf:#$djS7s"
  em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
  em:minVersion="0.8"
  em:maxVersion="2.0.0.*" />

To:

<!--Webrunner-->
  <RDF:Description RDF:about="webrunner"
    em:id="webrunner@webapps.org"
    em:minVersion="0.1"
    em:maxVersion="10.0" />

or (again it will depend on which way the developer implemented the Firefox description):

<em:targetApplication>
  <!--Webrunner-->
  <Description>
    <em:id>webrunner@webapps.org</em:id>
    <em:minVersion>0.1</em:minVersion>
    <em:maxVersion>10.0</em:maxVersion>
  </Description>
</em:targetApplication>

If you’re using Prism, change to the following:

<RDF:Description RDF:about="prism"
  em:id="prism@developer.mozilla.org"
  em:minVersion="0.1"
  em:maxVersion="10.0" />

or

<em:targetApplication>
  <Description>
    <!--Prism-->
    <em:id>prism@developer.mozilla.org</em:id>
    <em:minVersion>0.1</em:minVersion>
    <em:maxVersion>10.0</em:maxVersion>
  </Description>
</em:targetApplication>

4. Then save the rdf file and add it back into the xpi archive.
5. You should be ready to install the extension using the Extensions.webapp

I found this parts of this bit of magic on Alex Sirota’s website along with the tip to check in the applicaiton.ini file for any XulRunner application’s ID. If you run into errors, then something is probably malformed in the rdf file so check that first. I won’t be much help in trouble shooting, and I’m not about to offer support for other peoples extensions on an unsupported application, but if you have problems, post a comment and I’ll give editing the rdf a go myself.

How To: 7-Steps to Make WebRunner Portable

I’ve struck upon a way to make WebRunner (and by extension, any other XulRunner application) pretty much portable!

I’m no real programmer, I mean, I know enough to be dangerous. I’ve got a good handle on html, css, javascript, asp etc. In the past I’ve played with the source code for Portable Firefox from PortableApps.com trying to get XulRunner portable. I didn’t have much luck. Ran into too many code errors to resolve myself. What I needed was a way to make the program portable without programming anything new.

X-Launcher

What I was able to find was X-Launcher. X-Launcher is a nifty little app that allows you to launch just about any application portably - that is, without leaving much of a trace on the host computer. I’ve been able to use X-Launcher without too much effort (hey, just my style :).

You can get X-Launcher from winPenPack.com (downloads section) along with a host of other open source software all made portable using X-Launcher or other means. WinPenPack is an Italian website, but you can get English on most pages by choosing it from the language menu. Nice site and a lot of good software!
X-Launcher itself is an easy to use program, you simply configure the X-launcher.ini file for it and you’re ready to use it. One of the things that really sets X-Launcher apart is the fact that you can have multiple launchers in the same directory. Just rename the X-launcher.ini file and the X-launcher.exe to any name you wish (just as long as both have the same file name) and you can put a second set of exe/ini files with a different set of names in the same directory together. Why would you do this? Well, for one, this allows you to run multiple versions of a program with wildly different configurations. Another thing this buys you (and more relevant to this discussion) is the ability to launch different WebRunner apps portably.

Normally if you launch a program you can pass it options through command line switches. If you’re using another program to launch the application you want to run, then you don’t usually have the option of passing switches to the second program from the first. With X-Launcher, these switches are built into the configuration file.

The default configuration file that comes with X-Launcher is loaded with information on feature settings, but it’s also a bit overwhelming. Fortunately, if you run X-launcher.exe with no like-named ini file, it will create it’s own, scaled down X-launcher.ini. This configuration file is a heck of a lot easier to read!

There are several application variables that can be defined, the most important one being the application name. This will eventually point to folder names and the application itself. Here’s the contents of a X-launcher.ini for a webapp with included explanations for most settings:

wikipedia.ini

[Setup]
AppName=WebRunner
;Application name, this will also be used below as the
;name of some of the folders.

[FileToRun]
PathToExe=$AppName$\$AppName$.exe
;This is the name and path to the file you're trying to
;launch.
WorkingDir=%HOME%
;This is the name of the directory which will be used
;by the program as it's working directory.
Parameters= -webapp wikipedia@luckydisasters.com
;List of any parameters to pass to the application, in
;this case we're telling WebRunner to load the webapp
;"wikipedia@luckydisasters.com"

[Environment]
HOME=$HOME$\$AppName$
;This folder will be used to save any user specific file
;information - like the Mozilla profiles folder.
USERPROFILE=%HOME%
;As you can see I've used the same folders for all the
;programs files, this will make it a lot easier later if we
;want to see what the program is doing or make
;changes.
PATH=%PATH%;@ScriptDir@
;This adds the @ScriptDir@ variable to the system
;path used by the application

[Functions]
DirCreate=%HOME%
;if this folder doesn't exist when you start the
;program, it will created. You can place other
;functions here as well if you need them.

[Options]
;These settings are other X-launcher application
;options, such as showing a splash screen and
;what not, feel free to make changes, but these
;should be fine as is
DeleteTemp=true
MultipleIstances=true
FixAppData=false
RunWait=true
ShowSplash=true
WriteLog=false

[SplashScreen]
;This section allows you to add a custom splash
;screen and sets the length of time the splash
;screen is shown. Leave the Image and Title blank
;for X-launcher defaults. The image path (as well
;as all paths in this ini file) are relative to the
;current location of the ini/exe files for the
;X-launcher app.
Image=
Title=
TimeOut=1500

Download the Wikipiedia X-launcher files here:
Wikipedia X-launcher

7-Steps

What I’ve done to use the above webapp portably is as follows (assume that the USB drive/portable device is drive letter “X”):

  1. Make sure you have WebRunner and the Wikipedia.webapp installed.
  2. Create a folder under “X:\PortableApps\” (or where ever you store your portable applicaitons) called “X-WebRunner” (”X:\PortableApps\X-WebRunner”)
  3. Copy the “C:\Program Files\WebRunner” folder to “X:\PortableApps\X-WebRunner” (”X:\PortableApps\X-WebRunner\WebRunner”)
  4. Copy the wikipedia.exe and the wikipedia.ini files into “X:\PortableApps\X-Webrunner”unconfigured webrunner
  5. Run the Webrunner.exe, this will create the user profile you’ll need to copy your webapp into
  6. Now copy your webapp folder from your profile folder on your hard drive usually located about here:
    “C:\Documents and Settings\YOURUSERNAME\Application Data\WebRunner\Profiles\RANDOMSTRING.default\webapps\WEBAPPNAME
    to your new profile folder on your portable device:
    “X:\PortableApps\Application Data\WebRunner\Profiles\NEWRANDOMSTRING.default\webapps\WEBAPPNAME
  7. Last step, start the wikipedia.exe file again, this will start the webapp that you’ve copied.

My “X-WebRunner” install:

webrunner files

Now you can start moving your webapps over and making X-launcher.exe and X-launcher.ini files for each one, the only line in the ini file that needs to be changed for each is “Parameters“, which gets changed to the webapp folder name for each webapp. So basically all you have to do is copy the original wikipedia.ini file, rename it and change the Parameters setting.

Next I’ll have to configure Plain Old Webserver USB (POWUSB) to run with X-launcher. Then I can carry around a nice little XUL Webserver!

Links:

winPenPack
X-Launcher download
My Wikipedia X-launcher configuration
My Wikipedia.webapp Bundle