text input example step 1

textinput/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/bower_components/
+
+/test_runner.js

textinput/Gruntfile.js

@@ -0,0 +1,91 @@
+'use strict';
+
+module.exports = function (grunt) {
+    var path = require('path');
+
+    // These plugins provide necessary tasks.
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-requirejs');
+    grunt.loadNpmTasks('grunt-execute');
+    grunt.loadNpmTasks('amber-dev');
+
+    // Default task.
+    grunt.registerTask('default', ['amberc:all']);
+    grunt.registerTask('test', ['amberc:test_runner', 'execute:test_runner', 'clean:test_runner']);
+    grunt.registerTask('devel', ['amdconfig:app', 'requirejs:devel']);
+    grunt.registerTask('deploy', ['amdconfig:app', 'requirejs:deploy']);
+
+    // Project configuration.
+    grunt.initConfig({
+        // Metadata.
+        // pkg: grunt.file.readJSON(''),
+        banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+            '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+            '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+            '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+            ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
+        // task configuration
+        amberc: {
+            options: {
+                amber_dir: path.join(__dirname, "bower_components", "amber"),
+                library_dirs: ['src'],
+                closure_jar: ''
+            },
+            all: {
+                src: [
+                    'src/AmberTextInputExample.st', // list all sources in dependency order
+                    'src/AmberTextInputExample-Tests.st' // list all tests in dependency order
+                ],
+                amd_namespace: 'amber-ambertextinputexample',
+                libraries: ['SUnit', 'Web']
+            },
+            test_runner: {
+                src: ['node_modules/amber-dev/lib/Test.st'],
+                libraries: [
+                    /* add dependencies packages here */
+                    'AmberTextInputExample', /* add other code-to-test packages here */
+                    'SUnit',
+                    'AmberTextInputExample-Tests' /* add other test packages here */
+                ],
+                main_class: 'NodeTestRunner',
+                output_name: 'test_runner'
+            }
+        },
+
+        amdconfig: {app: {dest: 'config.js'}},
+
+        requirejs: {
+            deploy: {options: {
+                mainConfigFile: "config.js",
+                onBuildWrite: function (moduleName, path, contents) {
+                    return moduleName === "config" ? contents + "\nrequire.config({map:{'*':{app:'deploy'}}});" : contents;
+                },
+                pragmas: {
+                    excludeIdeData: true,
+                    excludeDebugContexts: true
+                },
+                include: ['config', 'node_modules/requirejs/require', 'deploy'],
+                out: "the.js"
+            }},
+            devel: {options: {
+                mainConfigFile: "config.js",
+                onBuildWrite: function (moduleName, path, contents) {
+                    return moduleName === "config" ? contents + "\nrequire.config({map:{'*':{app:'devel'}}});" : contents;
+                },
+                include: ['config', 'node_modules/requirejs/require'],
+                out: "the.js"
+            }}
+        },
+
+        execute: {
+            test_runner: {
+                src: ['test_runner.js']
+            }
+        },
+
+        clean: {
+            test_runner: ['test_runner.js']
+        }
+    });
+
+};

textinput/LICENSE-MIT

@@ -0,0 +1,22 @@
+Copyright (c) 2015 HannesHirzel
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

textinput/README.md

@@ -0,0 +1,17 @@
+# Amber Text Input Example
+
+Shows how to work with a text field.
+
+## Getting Started
+
+To bring project alive (for example after `git clone`):
+
+```sh
+npm install
+bower install
+grunt devel
+```
+
+Developing the project (after brought alive):
+ 
+Start server with `amber serve` and go to `http://localhost:4000/` in your browser and follow the instructions

textinput/bower.json

@@ -0,0 +1,37 @@
+{
+    "name": "ambertextinputexample",
+    "description": "Shows how to work with a text field.",
+    "version": "0.1.0",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "bower_components",
+        "/*.js",
+        "/*.html",
+        "test",
+        "tests"
+    ],
+    "authors": [
+        {
+            "name": "HannesHirzel",
+            "email": "hannes.hirzel@gmail.com"
+        }
+    ],
+    "homepage": "https://github.com/amber-smalltalk/amber-examples",
+    "keywords": [
+        "Amber",
+        "Smalltalk"
+    ],
+    "license": [
+        "MIT"
+    ],
+    "private": false,
+    "dependencies": {
+        "amber": "^0.14.1"
+    },
+    "devDependencies": {
+        "amber-ide-starter-dialog": "^0.1.0",
+        "amber-attic": "^0.1.0",
+        "helios": "^0.3.0"
+    }
+}

textinput/config.js

@@ -0,0 +1,58 @@
+/* DO NOT EDIT! This file is generated. */
+
+var require;
+if (!require) require = {config: function (x) {require = x;}};
+require.config({
+  "paths": {
+    "helios/showdown": "bower_components/showdown/src/showdown",
+    "requireJS": "node_modules/requirejs/require",
+    "require-css": "bower_components/require-css",
+    "jquery": "bower_components/jquery/jquery",
+    "jquery-ui": "bower_components/jquery-ui/jquery-ui",
+    "codemirror": "bower_components/codemirror",
+    "bootstrap2.3.2": "bower_components/bootstrap2.3.2/bootstrap",
+    "mousetrap": "bower_components/mousetrap/mousetrap",
+    "jquery.blockUI": "bower_components/blockui/jquery.blockUI",
+    "helios": "bower_components/helios/src",
+    "helios/resources": "bower_components/helios/resources",
+    "helios/index": "bower_components/helios/index",
+    "amber-attic": "bower_components/amber-attic/src",
+    "amber-attic/resources": "bower_components/amber-attic/resources",
+    "amber-ide-starter-dialog": "bower_components/amber-ide-starter-dialog/lib/idestarter",
+    "amber": "bower_components/amber/support",
+    "amber_core": "bower_components/amber/src",
+    "amber-ambertextinputexample": "src"
+  },
+  "rjs_comment1": "require.min should be removed",
+  "rjs_comment2": "it's backward compatibility hack if config finds",
+  "rjs_comment3": "support/requirejs before node_modules/requirejs;",
+  "rjs_comment4": "the former will go away in 0.14.0",
+  "map": {
+    "*": {
+      "css": "require-css/css"
+    }
+  },
+  "shim": {
+    "jquery-ui": {
+      "deps": [
+        "jquery",
+        "jquery"
+      ]
+    },
+    "codemirror/lib/codemirror": {
+      "deps": [
+        "css!codemirror/lib/codemirror",
+        "css!codemirror/lib/codemirror"
+      ]
+    },
+    "bootstrap2.3.2/js/bootstrap": {
+      "deps": [
+        "jquery",
+        "css!bootstrap2.3.2/css/bootstrap"
+      ]
+    },
+    "ensure-console": {
+      "exports": "console"
+    }
+  }
+});

textinput/deploy.js

@@ -0,0 +1,8 @@
+define([
+    'amber/deploy',
+    // --- packages to be deployed begin here ---
+    'amber-ambertextinputexample/AmberTextInputExample'
+    // --- packages to be deployed end here ---
+], function (amber) {
+    return amber;
+});

textinput/devel.js

@@ -0,0 +1,10 @@
+define([
+    'amber/devel',
+    './deploy',
+    // --- packages used only during development begin here ---
+    'amber-ambertextinputexample/AmberTextInputExample-Tests',
+    'amber-attic/IDE'
+    // --- packages used only during development end here ---
+], function (amber) {
+    return amber;
+});

textinput/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>Amber Text Input Example</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="author" content="HannesHirzel" />
+    <script type='text/javascript' src='the.js'></script>
+  </head>
+
+  <body>
+  <p>Hi, HannesHirzel! Welcome to Amber project: "Amber Text Input Example".</p>
+  <p>This is the place for your application's HTML. After getting familiar with Amber,
+      just remove this welcome contents from index.html and replace it with your own.</p>
+  <button id="amber-with">Hello from TagBrush >> with:</button>
+  <button id="jquery-append">Hello from jQuery append</button>
+  <ol id="output-list"></ol>
+  <script type='text/javascript'>
+      require(['app'], function (amber) {
+          amber.initialize({
+            //used for all new packages in IDE
+            'transport.defaultAmdNamespace': "amber-ambertextinputexample"
+          });
+          require(["amber-ide-starter-dialog"], function (dlg) { dlg.start(); });
+          amber.globals.AmberTextInputExample._start();
+      });
+  </script>
+  </body>
+
+</html>

textinput/local.amd.json

@@ -0,0 +1,5 @@
+{
+    "paths": {
+        "amber-ambertextinputexample": "src"
+    }
+}

textinput/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "ambertextinputexample",
+  "title": "Amber Text Input Example",
+  "description": "Shows how to work with a text field.",
+  "version": "0.1.0",
+  "homepage": "https://github.com/amber-smalltalk/amber-examples",
+  "author": {
+    "name": "HannesHirzel",
+    "email": "hannes.hirzel@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/amber-smalltalk/amber-examples.git"
+  },
+  "bugs": {
+    "url": "https://github.com/amber-smalltalk/amber-examples/issues"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/amber-smalltalk/amber-examples/blob/master/LICENSE-MIT"
+    }
+  ],
+  "engines": {
+    "node": ">= 0.8.0"
+  },
+  "scripts": {
+    "test": "grunt test"
+  },
+  "devDependencies": {
+    "amber-dev": "^0.3.0",
+    "grunt": "^0.4.5",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-requirejs": "^0.4.4",
+    "grunt-execute": "^0.2.2",
+    "requirejs": "^2.1.15"
+  },
+  "keywords": [
+    "Amber",
+    "Smalltalk"
+  ]
+}

textinput/src/AmberTextInputExample-Tests.js

@@ -0,0 +1,9 @@
+define("amber-ambertextinputexample/AmberTextInputExample-Tests", ["amber/boot", "amber_core/SUnit"], function($boot){
+var $core=$boot.api,nil=$boot.nil,$recv=$boot.asReceiver,$globals=$boot.globals;
+$core.addPackage('AmberTextInputExample-Tests');
+$core.packages["AmberTextInputExample-Tests"].innerEval = function (expr) { return eval(expr); };
+$core.packages["AmberTextInputExample-Tests"].transport = {"type":"amd","amdNamespace":"amber-ambertextinputexample"};
+
+$core.addClass('AmberTextInputExampleTest', $globals.TestCase, [], 'AmberTextInputExample-Tests');
+
+});

textinput/src/AmberTextInputExample-Tests.st

@@ -0,0 +1,5 @@
+Smalltalk createPackage: 'AmberTextInputExample-Tests'!
+TestCase subclass: #AmberTextInputExampleTest
+	instanceVariableNames: ''
+	package: 'AmberTextInputExample-Tests'!
+

textinput/src/AmberTextInputExample.js

@@ -0,0 +1,233 @@
+define("amber-ambertextinputexample/AmberTextInputExample", ["amber/boot", "amber_core/Kernel-Objects", "amber_core/Web"], function($boot){
+var $core=$boot.api,nil=$boot.nil,$recv=$boot.asReceiver,$globals=$boot.globals;
+$core.addPackage('AmberTextInputExample');
+$core.packages["AmberTextInputExample"].innerEval = function (expr) { return eval(expr); };
+$core.packages["AmberTextInputExample"].transport = {"type":"amd","amdNamespace":"amber-ambertextinputexample"};
+
+$core.addClass('AmberTextInputExample', $globals.Object, [], 'AmberTextInputExample');
+$core.addMethod(
+$core.method({
+selector: "augmentPage",
+protocol: 'starting',
+fn: function (){
+var self=this;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+var $1;
+$1="#amber-with"._asJQuery();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["asJQuery"]=1;
+//>>excludeEnd("ctx");
+$recv($1)._click_((function(){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return self._doAmberWith();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)});
+//>>excludeEnd("ctx");
+}));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["click:"]=1;
+//>>excludeEnd("ctx");
+$recv("#jquery-append"._asJQuery())._click_((function(){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return self._doJQueryAppend();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,2)});
+//>>excludeEnd("ctx");
+}));
+self._doTextFieldExampleAppend();
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"augmentPage",{},$globals.AmberTextInputExample)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "augmentPage\x0a\x09'#amber-with' asJQuery click: [ self doAmberWith ].\x0a\x09'#jquery-append' asJQuery click: [ self doJQueryAppend ].\x0a\x09self doTextFieldExampleAppend",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["click:", "asJQuery", "doAmberWith", "doJQueryAppend", "doTextFieldExampleAppend"]
+}),
+$globals.AmberTextInputExample);
+
+$core.addMethod(
+$core.method({
+selector: "doAmberWith",
+protocol: 'action',
+fn: function (){
+var self=this;
+var tag;
+function $HTMLCanvas(){return $globals.HTMLCanvas||(typeof HTMLCanvas=="undefined"?nil:HTMLCanvas)}
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+tag=$recv($recv($HTMLCanvas())._onJQuery_("#output-list"._asJQuery()))._root();
+$recv(tag)._with_((function(html){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return $recv($recv(html)._li())._with_("Amber Web #with: added me!");
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({html:html},$ctx1,1)});
+//>>excludeEnd("ctx");
+}));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["with:"]=1;
+//>>excludeEnd("ctx");
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"doAmberWith",{tag:tag},$globals.AmberTextInputExample)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "doAmberWith\x0a\x09| tag |\x0a\x09tag := (HTMLCanvas onJQuery: '#output-list' asJQuery) root.\x0a\x09tag with: [ :html | html li with: 'Amber Web #with: added me!' ]",
+referencedClasses: ["HTMLCanvas"],
+//>>excludeEnd("ide");
+messageSends: ["root", "onJQuery:", "asJQuery", "with:", "li"]
+}),
+$globals.AmberTextInputExample);
+
+$core.addMethod(
+$core.method({
+selector: "doJQueryAppend",
+protocol: 'action',
+fn: function (){
+var self=this;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+$recv("#output-list"._asJQuery())._append_("<li>jQuery append added me!</li>");
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"doJQueryAppend",{},$globals.AmberTextInputExample)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "doJQueryAppend\x0a\x09'#output-list' asJQuery append: '<li>jQuery append added me!</li>'",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["append:", "asJQuery"]
+}),
+$globals.AmberTextInputExample);
+
+$core.addMethod(
+$core.method({
+selector: "doTextFieldExampleAppend",
+protocol: 'action',
+fn: function (){
+var self=this;
+function $TextInputExample(){return $globals.TextInputExample||(typeof TextInputExample=="undefined"?nil:TextInputExample)}
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+$recv($recv($TextInputExample())._new())._appendToJQuery_("body"._asJQuery());
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"doTextFieldExampleAppend",{},$globals.AmberTextInputExample)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "doTextFieldExampleAppend\x0a\x0a      TextInputExample new appendToJQuery: 'body' asJQuery",
+referencedClasses: ["TextInputExample"],
+//>>excludeEnd("ide");
+messageSends: ["appendToJQuery:", "new", "asJQuery"]
+}),
+$globals.AmberTextInputExample);
+
+
+$core.addMethod(
+$core.method({
+selector: "start",
+protocol: 'starting',
+fn: function (){
+var self=this;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+$recv(self._new())._augmentPage();
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"start",{},$globals.AmberTextInputExample.klass)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "start\x0a\x09self new augmentPage",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["augmentPage", "new"]
+}),
+$globals.AmberTextInputExample.klass);
+
+
+$core.addClass('TextInputExample', $globals.Widget, ['myInputField'], 'AmberTextInputExample');
+$core.addMethod(
+$core.method({
+selector: "doSomething",
+protocol: 'not yet classified',
+fn: function (){
+var self=this;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+$recv(self["@myInputField"])._inspect();
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"doSomething",{},$globals.TextInputExample)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "doSomething\x0a\x0a   myInputField inspect",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["inspect"]
+}),
+$globals.TextInputExample);
+
+$core.addMethod(
+$core.method({
+selector: "renderOn:",
+protocol: 'not yet classified',
+fn: function (html){
+var self=this;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+var $1,$2;
+self["@myInputField"]=$recv(html)._input();
+$1=$recv(html)._button();
+$recv($1)._with_("Do something");
+$2=$recv($1)._onClick_((function(){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return self._doSomething();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)});
+//>>excludeEnd("ctx");
+}));
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"renderOn:",{html:html},$globals.TextInputExample)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: ["html"],
+source: "renderOn: html\x0a       myInputField := html input.\x0a       html button\x0a       with: 'Do something';\x0a        onClick: [ self doSomething]",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["input", "with:", "button", "onClick:", "doSomething"]
+}),
+$globals.TextInputExample);
+
+
+});

textinput/src/AmberTextInputExample.st

@@ -0,0 +1,54 @@
+Smalltalk createPackage: 'AmberTextInputExample'!
+Object subclass: #AmberTextInputExample
+	instanceVariableNames: ''
+	package: 'AmberTextInputExample'!
+
+!AmberTextInputExample methodsFor: 'action'!
+
+doAmberWith
+	| tag |
+	tag := (HTMLCanvas onJQuery: '#output-list' asJQuery) root.
+	tag with: [ :html | html li with: 'Amber Web #with: added me!!' ]
+!
+
+doJQueryAppend
+	'#output-list' asJQuery append: '<li>jQuery append added me!!</li>'
+!
+
+doTextFieldExampleAppend
+
+      TextInputExample new appendToJQuery: 'body' asJQuery
+! !
+
+!AmberTextInputExample methodsFor: 'starting'!
+
+augmentPage
+	'#amber-with' asJQuery click: [ self doAmberWith ].
+	'#jquery-append' asJQuery click: [ self doJQueryAppend ].
+	self doTextFieldExampleAppend
+! !
+
+!AmberTextInputExample class methodsFor: 'starting'!
+
+start
+	self new augmentPage
+! !
+
+Widget subclass: #TextInputExample
+	instanceVariableNames: 'myInputField'
+	package: 'AmberTextInputExample'!
+
+!TextInputExample methodsFor: 'not yet classified'!
+
+doSomething
+
+   myInputField inspect
+!
+
+renderOn: html
+       myInputField := html input.
+       html button
+       with: 'Do something';
+        onClick: [ self doSomething]
+! !
+