When you click on Demo, you will
see a page with seven labels, eight ordinary text boxes, one multi-line
text box, four check boxes and one drop down list box. Additionally,
there are buttons labeled:
Load | fills the text fields with random numbers |
Clear | resets all the fields |
Save | saves the current field values, which will be displayed then next time you try the application |
#Debug | evaluates an APL expression, useful to test verbs which are only useful inside a web page |
The eight Text fields log what happens as you type. Additionaly,
a sample noun "newList" is provided to demonstrate rewriting the
content of fields such as a listbox.
Press | #Debug |
then type | newList |
To begin learning how this works, either download and install
APL.js.zip
or just click on the web version:
APL.js
then enter | )fetch APL/Demo |
then enter | )load testHtml |
then enter | )edit |
Look at the noun Example to learn how the screen was created.
There are three reserved noun names which the web page calls:
onDefine | is called to provide the HTML fields. Verbs to access attributes of fields are not available until onLoad is called. |
onLoad | runs before the user has access. This provides an opportunity to initialize fields |
onUnload | runs when the form in unloading. This provides an opportunity to save fields. Unfortunately not all browsers call this event, so pressing a Save button is more reliable. |
Much of the functionality is provided by the initial line
#include Html
To learn what that does:
)load 1 Html
First look at the verbs which create each type of field:
Button | 'Visual Label' |
Text | 1 number (which defines size) or 2 numbers (which defines rows and cols) |
Check | 'pair' 'Label Pair' |
List | ('pair' 'Label Pair') ... |
Handle | 'idName' 'onCondition:yourHandler' transforms left arguments for any of the above, this verb is not called directly by users. If only one value is provided, the presence of ":" identifies what it is. On conditions are defined by Javascript, but handlers do not have reserved names. |
Table | turns a matrix into an HTML table. Every field verb creates a scalar result, which makes putting them together as a matrix easy. |
The following verbs get or set fields with the ID right argument:
Values | returns "value" from fields, or with a left argument, sets a new value or values. |
Checks | returns "checked" as booleans from fields or with a left argument, sets the checked state. |
Defines | returns "innerHTML" from fields, or with a left argument, sets the innerHTML. |
Inside an event handler, the following verbs get or set an attribute:
Field | returns an attribute (like 'value') of the current field, or with a left argument, sets the attribute |
Event | returns an attribute (like 'keyCode') of the current event or with a left argument, sets the attribute I'm not sure you can assign an event attribute, this is for completeness. |
In the demo testHtml, the eight Text fields call "sampleEvent" in the onkeypress event. That noun prepends the log of events to the multi-line Text field at the bottom of the form.
If you make any changes, to test their effect:
First type | )save testHtml |
then type | go |
Once you are ready to release your web page:
First type | )load 1 Host |
then type | Save 'testHtml' |
To publish your product on the web, put both APL.js and your
APL.js.User files where people can access them. Then provide
a link to:
http://yourPath/APL.js/Run.html?Page=yourPage