How to write Amber Smalltalk code

Note: As for version 0.14 (April 2015) this page is outdated. No need to edit index.html and change a require command.

Use

 grunt devel

and

 grunt deploy

to change between development and deployment mode.

---

It is assumed that you have an initial project which you have got by executing

amber init

Let’s write some Amber Smalltalk code:

1. Click the button to open the class browser (legacy version, there is a newer browser called Helios).
2. Take a look at the class browser’s code source section. It should contain a class manifest that looks something like this:
   
3. Change the name of the class to Hello and its package to HelloApp. It should now look like this:
   
4. Click Save. This creates new class according to the manifest. The Hello class will look like this:

Object subclass: #Hello
  instanceVariableNames: ''
  package: 'HelloApp'

4. Now navigate to your new class in its new package. It should look like this:
   
5. Click Commit to commit the packages present in the class browser to disk. That button looks like this:
   

You just created a new class and saved your work. On your file system, check out your `hello/js` and `hello/st` folders. Your new class is now saved in both JavaScript and Smalltalk. If it isn't, something is set up wrong; go back to Getting-started to figure it out. 6. Refresh your browser page and reopen the class browser. Oh no, your new class is gone! To load your new class automatically, you have to add it in `index.html`. Make your `require` call look like this: ```javascript require(['amber/devel', 'com_example_hello/HelloApp'], 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 }); }); ``` 7. Save and refresh again. Now your class Hello is loaded and shows up in the class browser. 8. Let’s make this class do something. Create a new _message_ in the class browser by navigating to the Hello class, then click on **not yet classified**, which should look like this:
You see the message template in code source section. Try filling in a simple message , like this for example: ```smalltalk begin "Makes me say hello."

| sentence button | sentence := 'Hello world!'. button := '#sayHello' asJQuery. button click: [button after: '

' , sentence , '

'].

9. Your message isn't too helpful if it doesn't get called, which is what’s happening due to the Hello class needing to be manually instantiated and its `#begin` instance method called. Save it, commit the package, then edit `index.html ` again. You can write JavaScript code that sends a message to Smalltalk:
```javascript
require(['amber/devel', 'com_example_hello/HelloApp'], 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
  });
  // ----

  $(function() {
    smalltalk.Hello._new()._begin();
  });
});

From there, you can create new Smalltalk classes and messages to build up your app. Enjoy!

Navigation

• The-counter-example page explains how to write a counter
• Deploying Amber page explains how to generate a JavaScript deployment file which contains all code
• Start page