Skip to content

FAQ

Jump to bottom
herby edited this page Dec 24, 2014 · 43 revisions

How do I install the latest Amber version?

'Latest' often means the 'latest stable'. If this is the case go for

  npm -g install amber-cli

If you mean really the prereleases,

  npm -g install amber-cli@bleedingedge

should install the last prerelease (but not the stable version even if it is newer).

Use npm info amber-cli to find out which version is latest and which one is bleedingedge, if you are unsure.

How do I add another package in version 0.13 (legacy IDE)?

  • Click on any class
  • In the code browser pane change the code to
    Object subclass: #SomeNewClass
        instanceVariableNames: ''
        package: 'Myapp-NewPackage'
  • Click on Save
  • Select the package Myapp-NewPackage
  • Click on Commit
  • Edit deploy.js if this is package with production code (or devel.js if this package contains tests or other non-production code) to include the new package 'amber-myapp/Myapp-NewPackage'
  • Run grunt devel
  • Reload localhost:4000
  • The new package Myapp-NewPackage shows up in the Browser.

Example of the new deploy.js file:

    define([
        'amber/deploy',
        // --- packages to be deployed begin here ---
        'amber-myapp/Myapp',
        'amber-myapp/Myapp-Data'
        // --- packages to be deployed end here ---
    ], function (amber) {
        return amber;
    });

Note: Helios version should be added here as well.

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

Note: this question needs to be updated for 0.13

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 binds the smalltalk parameter in the function (smalltalk) { ... } or you would not have access to 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.

The Method Protocol drop-down

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; >

I have an error "Commit failed... "

I have an error Commit failed for namespace "test_amber". Do you want to commit to another path?

Directory (\new_test\src) exists. In the directory there are two files (AmberTest.st & AmberTest.js) created by the wizard initialization (amber init).

Answer: Make sure you have started amber serve from within the project directory or in case you did that if it is still running.

Note: Dots are not allowed in the namespace.

How do I get the text value of an input field?

Assuming I have a field with an id of #field1, how do I get the text value of it?

Answer:

'#field1' asJQuery val

Note:

All Javascript methods in jQuery are available to you this way.

Multi parameter functions are then mapped like:

aQuery.sampleFunc (a,b,c);

aQuery sampleFunc: a and: b and: c.

The and: can be whatever. The only thing that matters is the first part of the keyword selector which has to match the function name.

What is the receiver object for a global function?

What would the receiver be in the case of a global JavaScript function like this?

btoa(aValue)

Answer in Amber Smalltalk:

 btoa value: aValue

more see https://github.com/amber-smalltalk/amber/wiki/From-smalltalk-to-javascript-and-back

Clone this wiki locally