SLICE Framework :: Students Learn in Collaborative Environments

Your First App: Build a SLICE app in ten minutes

This tutorial is designed to help you build your first SLICE app in about ten minutes. You do not need to know how to code to complete this tutorial, but you will need to be able to use a text editor (eg: Notepad, if on Windows) and you will need to have the SLICE framework installed.

Each SLICE app is made up of three main components:

An XML file, used to layout what the user should see when he or she runs your app.
JavaScript files, used to program what actions should take place when a user clicks a button or draws an ink stroke.
Image and resource files that are used in your app.

Traditionally, the first app someone builds in a new platform is an app that simply prints out "Hello World". Using SLICE, you will find it will be just as easy to print "Hello World" as it is to provide an inkable surface for a user of your app to write "Hello World" with ink strokes (either with a mouse, pen, or finger).

To build an app that provides an inkable surface for a user to write "Hello World" on, you will need to create an folder to store files for this app. This folder can be anywhere on your computer, it doesn't need to be in the SLICE install location. For reference, this tutorial will assume you creted a folder on your desktop. The full path of this new folder may be C:\Users\Alice\Desktop\FirstSliceApp\.

Next, you will need to write the XML that describes the inkable surface that a user will be writing on. Open up Notepad, or your text editor of choice, and add the following text:

  <Slice>
    <Frames>
       <Frame DisplayId="Content" Width="300" Height="300" />
    </Frames>
    <InkPanel Id="Content" />
  </Slice>

You should now save this file as an XML file. This means that the file needs an extension of .xml. When saving the file, navigate to the folder you created earlier and save the file as app.xml (or any name of your choosing, we will use app.xml as the name again later, so it may be easier to use this name for now.)

You are ready to run your first app! Find your SLICE install folder (or download it if you haven't yet) and look for the bin folder (you do NOT want to run the SliceLauncher, this is to run apps already released). Inside the bin folder inside the SLICE install folder, you should find Slice.exe. Run Slice.exe.

SLICE will pop up a dialog that asks you to open a file. Navigate to your XML you just saved, open that XML file, and you are running your first SLICE app!