Develop desktop applications using web technologies
Posted on Monday, December 29 2014 by Ionică Bizău
Building a website is easy: just some HTML styled with CSS and with some JavaScript handlers for the user interaction. But what about desktop applications? I've never liked to build desktop applications because they generally depend on the platform they run.
That's why I decided to build BAT – A tiny tool for building native desktop applications using WEB technologies.
Installation
Currently the available binaries are for Linux and Mac OS X only. To install the latest BAT version, run the following commands:
Linux
# Download the deb package
$ wget https://github.com/IonicaBizau/bat/raw/master/dists/deb/64bit/dev-release.deb
# And install it
$ sudo dpkg -i dev-release.deb
Mac OS X
# Download the binary package
# Using curl
$ sudo curl https://github.com/IonicaBizau/bat/raw/master/dists/osx/Bat -o /usr/bin/bat
# (OR) Using wget
$ sudo wget -O /usr/bin/bat https://github.com/IonicaBizau/bat/raw/master/dists/osx/Bat
Alternatively you can build it from source.
Hacking
After installation, run bat --help and you will see what bat can do:
$ bat --help
Usage: bat [options]
Options:
-h, --help Displays this help.
-v, --version Displays version information.
-t, --title <title> Sets the window title on start.
-s, --size <WxH> Sets the BAT window size.
-d, --document <path/to/file.html> The path to the document you want BAT to
load.
-u, --undecorate Starts BAT with an undecorated window.
--tt, --tooltip Starts BAT with a tooltip window.
-m, --most If TOP is provided, then the window is
keept on the top of the other windows. If
BOTTOM is provided, the window will be in
the behind of all windows.
--debug Starts BAT in the debug mode.
Example
Let's build a Hello World application with BAT. Everything starts with an HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Monaco, monospace;
color: white;
background: #3C3B38;
}
h1 { text-align: center; }
p { text-align: justify; }
button {
padding: 10px 20px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
display: block;
font-size: 14px;
text-decoration: none;
border: 1px solid #c0b7b0;
cursor: pointer;
width: 100%;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p> Ipsum deserunt architecto necessitatibus quasi rerum dolorum obcaecati aut, doloremque laudantium nisi vel sint officia nobis. Nobis ad nemo voluptatum molestiae ad. Nisi ipsum deserunt a illo labore similique ad? </p>
<p> Ipsum veniam laborum libero animi quo dignissimos. Possimus quidem consequatur temporibus consequatur odio, quidem deleniti! Similique totam placeat sint assumenda nulla dolor. Voluptatibus quasi veritatis distinctio consectetur nobis. Nemo reprehenderit? </p>
<p> Ipsum molestiae nesciunt commodi sint et assumenda recusandae! Earum necessitatibus sequi nulla fugit architecto omnis. Maiores omnis repellat cupiditate iure corporis dolorem sed amet nesciunt. Mollitia sapiente sit repellendus ratione. </p>
<p> Consectetur architecto ratione voluptate provident quis. At maiores aliquam corporis sit nisi. Consectetur ab rem unde a corporis reiciendis ut dolorum, tempora, aut, minus. Sit adipisci recusandae doloremque quia vel! </p>
<button onclick="BAT.closeWindow()">Close</button>
</body>
</html>
I saved the content above in the index.html file. Now, the next step is to start it with bat:
$ bat -d index.html -t "BAT Hello World" -s 800x500
# ^- Document ^- Title ^- Size
And the result is:
Another interesting experiment is to create different undecorated windows on the same desktop:
The BAT JavaScript API is documented in the README file.
Also, Don't forget to check out the other examples.
Happy hacking!
Have feedback on this article? Let @IonicaBizau know on Twitter.
Have any questions? Feel free to ping me on Twitter.