Creating your first App

This tutorial provides you with a step-by-step guide to creating your very first Wesk application.

Prerequisites

Before you start

You need to install Wesk (here)

You will also need to create a directory on your file system for your HTML and JavaScript files. The app will be hosted by Wesk, so no need to use a web server.
However, if you do prefer to use a web server, such as IIS or Apache, you are welcome to do so. Just use the relevant URL instead of your directory when required.

In your new directory, create an empty file called index.html.

Open your index.html file and insert the following:

<!DOCTYPE html>
<html>
<head>
    <title>First App Tutorial</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

Let’s dive!

Quick check

At this point you should have a directory on your computer that contains an index.html file.

Start Wesk

You can now start Wesk, and point it to the directory you just created.
tut1-004

If you are already using Wesk, it will directly open your previous website. To direct it to another web site, you will need to click on the settings button and then on “Create a new Wesk App”.
tut1-008

Wesk will open your Hello World page:
tut1-005

Create a child window

In your application folder, create a second HTML file: window.html.
Again, we’ll keep the content simple.

<!DOCTYPE html>
<html>
<head>
    <title>First App Tutorial - Second window</title>
</head>
<body>
    <p>This is another window</p>
</body>
</html>

Your folder should now look like this:
tut1-006

We now need to open this window from the main window. Let’s write the javascript!

Re-open your index.html file, and modify its body as follow:

<body>
    <p>Hello World</p>
    <a href="window.html" wesk="A Second Window" wesk-width="500" wesk-height="500" wesk-left="10" wesk-top="10">Open another window</a>
    <script src="wesk.js"></script>
</body>

Now, when you refresh your Wesk main window (by clicking ‘Force Refresh’ on the settings menu), your new link should appear.

Clicking on the link will open a new 500×500 window! Magic!

It should look like this:
tut1-007

Congratulations, you have successfully opened one window from another in Wesk.
Can you figure out how to display the name of the window on the page?
Look at the API documentation for more info!

Download the Example

To download the entire example source code, click here: Tutorial 1 Source Code