Skip to content

Writing my first app

Jump to bottom
hhzl edited this page Oct 14, 2014 · 62 revisions

After you have installed nodejs and the most recent Amber version (0.13 as of October 2014) call

mkdir myApp
cd myApp
amber init

Then add code to the inital class and add code to the index.html file.

How to write Amber Smalltalk code

Notes about Amber version 0.12

Note: This section applies to versions 0.12.x. It evolved from the older guide so it inherits some patterns obsolete for 0.12.x (vendor directory - use bower instead; js/st directories - from 0.12.4 use lone src instead).

The best way to get up-to-date skeleton of a new project is to use amber init command (see README in main github page).

Let's make a Hello World program in Amber.

The instructions are divided into two parts

  1. Setup of directories and index.html file
  2. Writing the Amber Smalltalk code

In the second part it is also shown how a Smalltalk method is called from JavaScript in the index.html file.

###Setup of directories and index.html file

First, you need a place for your new project. Create the following directory structure to store the project files:

projects/vendor/amber/
projects/hello
projects/hello/st
projects/hello/js

The projects/vendor/amber directory contains amber as obtained using git or unzipping the zip from github (other subdirectories of vendor can hold other common libraries used by projects).

To make things a little easier, add a symbolic link to the vendor directory from within the hello project:

$ ln -s projects/vendor projects/hello/vendor

To get started, add a new index.html file to the folder projects/hello and choose prefix that all your packages will have. This prefix is better known as a namespace.

One way to choose namespace is reverse an email or website URL belonging to your organization, e.g. johndoe@gmail.com becomes com_gmail_johndoe or company.com becomes com_company, and append the name of the project. This hello example project uses the namespace com_example_hello. Do not use periods in namespaces as it confuses require.js used in the loader.

Namespaces beginning with amber are reserved for internal use of amber.

Your index.html can be really basic. The most important thing it does is include amber.js, require.js, configure namespace-to-path mapping and run require. Here is a basic index.html you can use:

    <!DOCTYPE html>
    <html>
      <head>
        <title>My First Amber Project</title>
        <script src="vendor/amber/support/amber.js"></script>
        <script src="vendor/amber/support/requirejs/require.min.js"></script>
        <script type="text/javascript">
          require.config({ paths: {
            'com_example_hello': 'js', // mapping for compiled .js files
            'com_example_hello/_source': 'st' // mapping for smalltalk source files
          }});
          require(['amber/devel'], function (smalltalk) {
            // up to 0.12.2
            smalltalk.defaultAmdNamespace = "com_example_hello"; //used for all new packages in IDE
            smalltalk.initialize();
            // since 0.12.3
            smalltalk.initialize({
              "transport.defaultAmdNamespace": "com_example_hello"  //used for all new packages in IDE
            });
          });
        </script>
      </head>
      <body>
        <article>
          <h1>My First Amber Project</h1>
          <button onclick="require('amber_vm/smalltalk').Browser._open()">class browser</button>
          <button id="sayHello">say hello</button>
        </article>
      </body>
    </html>

Change directories to be inside the hello project: cd hello

Now start up amber with vendor/amber/bin/amber serve and navigate to http://localhost:4000/hello/index.html

The terminal should say: Starting file server on http://127.0.0.1:4000

If this doesn’t work, try re-reading Getting-started to see if you can get a basic amber server going.

Read on How to write Amber Smalltalk code

Clone this wiki locally