Desktop Apps with HTML, CSS & JAVASCRIPT

HTML , CSS & JavaScript is quickly becoming known as the go to way to create and develop an all encompassing Website, but what about using them for Desktop Apps?

Imagine developing an Application that is cross platform for all Operating Systems.

Now imagine developing an HTML, CSS & JavaScript application if you are a web developer and than wanting to use it as a local desktop application.

Well that is a reality and can be accomplished by using AppJS!!!

AppJS at its core uses Chromium to implement and get all the HTML, CSS  and JavaScript working.

AppJS allows you to develop HTML as your Graphical User Interface. You don’t need to have to be limited to custom widgets that are made for everyone and are not full featured you can create your own HTML User Interface. The HTML allows for the complete development of your User Interface with full HTML 5 functionality.

AppJS allows for design and decoration of your application with CSS. If you have been developing in a web interface this will be so familiar to you. CSS allows for the power of HTML and CSS to develop your Application with all the CSS transformations, animations, shadowing and even the Twitter Bootstrap structure.

AppJS finally, and the most exciting part is that AppJS uses Node.js as the backend. This will allow for flexibility, powerful API, event driven application that is superb for an I/O model. Node.js is starting to cause JavaScript to be used everywhere and with the new fork of Node.js the race is becoming exiting at best!!

AppJS has a self-contained distributable application that can be downloaded and used on almost all operating systems on the AppJS site.

Lets show how this is able to be used and get this working with Ubuntu.

First lets create a Development directory in our home directory for this download.

Let’s get to a terminal window by hitting the Dash Icon  image on the Ubuntu Launcher or as I love to say is hit the Windows Key: image  or the Apple Key:  image and begin typing the following:

Terminal

From the terminal window we can create a Development directory by typing the following:

mkdir Development

Now we are going to change to the new Development directory by typing the following:

cd ~/Development

Now lets make an appjs directory in the Development folder we created earlier by typing the following:

mkdir appjs

So the first thing to do is go to the webpage of the AppJS download area here:

Next we will download the Linux 64 bit version or the version you will need for you Operating System you are using for this process shown below:

image

Download the file to the appjs folder in the Development folder we created above.

Now in the terminal window lets go to our directory structure we created by typing the following:

cd ~/Development/appjs

Now we need to unzip the file that was downloaded above this can be done by typing the following in to the terminal window: (This is based on the version downloaded from the website)

gunzip < appjs-0.0.20-linux-x64.tar.gz | tar xvf -

This should create an app directory and we need to go to this folder by typing the following:

cd app

Now you will have one file app.sh and one data directory shown below:

image

Now all we have to do to run this is to run the app.sh shell file in that same terminal window by typing the following:

./app.sh

After you press enter from the above command you will execute a “Hello World” application the will run on almost all operating systems as a Desktop Application shown below. The green arrow shows a node.js console logging process to keep you informed what is happening. The red arrow shows the GUI application with a Title of “Hello World!” and finally the Body and HTML, CSS and JavaScript as a local Desktop Application!!!

image

Now lets investigate the application that we downloaded and check out the coding they have included.

We will go to the data directory and investigate a few files by typing the following:

cd ~/Development/appjs/app/data

In the data folder is some really cool interesting stuff!!!

The app.js file is the Node.js bootstrap file the will run the content for the application this file is very well structured. This JavaScript file is run from Node.js and sets environment content folder shown by green arrow and does code to develop the Hello World window shown by the red arrow shown below:

image

image

Finally in the content directory you will see that there is simply HTML, CSS, pictures  and icons shown below:

image

This is a great start to develop a Desktop Application that will allow you to use HTML, CSS & JavaScript!!!

I hope you all enjoyed this blog post and remember to please follow my blog @ http://allangagnon.nettryx.net.

2 Comments on “Desktop Apps with HTML, CSS & JAVASCRIPT

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: