FAQ

I saved and committed a new class but, it fails to show up on browser reload?

The quick answer is you have to edit your index.html so that the script section that loads amber can find your files, here is what it should look like:

<script type="text/javascript">
  require.config({ paths: {
    'com_example_hello': 'js', //mapping compiled .js files
    'com_example_hello/_source': 'st' //mapping smalltalk source files
  }});
  require(['amber/devel','com_example_hello/HelloApp'], function (smalltalk) {
    smalltalk.defaultAmdNamespace = "com_example_hello"; //used for all new packages in IDE
    smalltalk.initialize();
  });
</script>

Use your namespace to tell amber where to find your code.

In the above case you are using the namespace 'com_example_hello' which define paths to st/ and js/ to store your source and compiled class files. You are using 'HelloApp' package as the name to store your classes. Until you place com_example_hello/HelloApp in the line require(['amber/devel','com_example_hello/HelloApp'], function (smalltalk) { of your index.html file, amber will not know where and what to load into your browser.

Always ensure you tell amber smalltalk to load

Always keep 'amber/devel' as the first element of the require array because this loads amber smalltalk which bind the smalltalk parameter in the function (smalltalk) { ... } and your would not have amber.

Change the above pattern to your case

In the above code you, likely want to change 'com_example_hello' to your namespace and also change HelloApp to the name of your package. You, likely want to add a line of code below smalltalk.initialize(); to startup your webapp likely something like smalltalk.HelloApp._new()._begin(). Which is the javascript way of executing HelloApp new begin command in Amber.

If you need to use another package from your namespace just add to the of the require() array.

For a more detailed description see Writing my first app

How do I extend core classes?

If you wish to extend core Amber classes with extra methods, and commit those changes without overwriting the Kernel-Objects.js file (for example), you must set a "Method Protocol" for the method and enter the protocol of "*MyPackage" where "MyPackage" is the package you want to commit that method to. This is exactly like "class extensions" in Monticello in Pharo/Squeak etc and makes sure that the method belongs in the MyPackage package and not in the package of the extended class.

How to insert raw html?

You have to use JQuery for doing that:

html p asJQuery html: '<p>hello world</p>'

How can I insert link in the produced html?

Following the Seaside convention: html p with: [ html a href: 'http://www.google.fr'; with: 'Google']

How can I fire and receive events?

Events are fired and consumed in Amber via the "Announcements" system. To use announcements, first you need an instance of Announcer. There is already a SystemAnnouncer for example, which can be obtained through:

announcerInstance := SystemAnnouncer current.

You can also create your own single instance of Announcer or a subclass of it.

Then you need a class for each announcement (see SystemAnnouncement and subclasses). Announcement classes don't necessarily need any methods.

Sending announcements is as easy as:

announcerInstance announce: AnnouncementClass new.

For receiving announcements you have to register a callback for the desired announcement class like the following:

announcerInstance on: AnnouncementClass do: [:announcement | "do something when announcement occurs"].

How can I access Smalltalk instance variables in inline JavaScript?

All Smalltalk instance variables can be accessed as JavaScript properties by adding an @ sign in front of their name. For example, to access the counter variable of class Counter you would do the following:

Counter>>assignTwo
    < self[ "@counter" ] = 2; >