📄 app.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Pico Lisp Application Development</title><link rel="stylesheet" href="doc.css" type="text/css"></head><body><a href="mailto:abu@software-lab.de">abu@software-lab.de</a><h1>Pico Lisp Application Development</h1><p align=right>(c) Software Lab. Alexander Burger<p>This document presents an introduction to writing browser-based applicationsin Pico Lisp.<p>It concentrates on the XHTML/CSS GUI-Framework (as opposed to the previousJava-AWT, Java-Swing and Plain-HTML frameworks), which is easier to use, moreflexible in layout design, and does not depend on plugins, JavaScript orcookies.<p>To be precise: CSS <i>can</i> be used to enhance the layout. And browsers<i>with</i> JavaScript will respond faster and smoother. But this frameworkworks just fine in browsers which do not know anything about CSS or JavaScript.All examples were also tested using the w3m text browser.<p>For basic informations about the Pico Lisp system please look at the <ahref="ref.html">Pico Lisp Reference</a> and the <a href="tut.html">Pico LispTutorial</a>. Knowledge of HTML, and a bit of CSS and HTTP is assumed.<p><ul><li><a href="#static">Static Pages</a> <ul> <li><a href="#hello">Hello World</a> <ul> <li><a href="#server">Start the application server</a> <li><a href="#how">How does it work?</a> </ul> <li><a href="#urlSyntax">URL Syntax</a> <li><a href="#security">Security</a> <ul> <li><a href="#pw">The ".pw" File</a> </ul> <li><a href="#htmlFoo">The <code>html</code> Function</a> <li><a href="#cssAttr">CSS Attributes</a> <li><a href="#tags">Tag Functions</a> <ul> <li><a href="#simple">Simple Tags</a> <li><a href="#lists">(Un)ordered Lists</a> <li><a href="#tables">Tables</a> <li><a href="#menus">Menus and Tabs</a> </ul> </ul><li><a href="#forms">Interactive Forms</a> <ul> <li><a href="#sessions">Sessions</a> <li><a href="#actionForms">Action Forms</a> <ul> <li><a href="#guiFoo">The <code>gui</code> Function</a> <li><a href="#ctlFlow">Control Flow</a> <li><a href="#switching">Switching URLs</a> <li><a href="#dialogs">Alerts and Dialogs</a> <li><a href="#calc">A Calculator Example</a> </ul> <li><a href="#charts">Charts</a> <ul> <li><a href="#scrolling">Scrolling</a> <li><a href="#putGet">Put and Get Functions</a> </ul> </ul><li><a href="#guiClasses">GUI Classes</a> <ul> <li><a href="#inputFields">Input Fields</a> <ul> <li><a href="#numberFields">Numeric Input Fields</a> <li><a href="#timeDateFields">Time & Date</a> <li><a href="#telFields">Telephone Numbers</a> <li><a href="#checkboxes">Checkboxes</a> </ul> <li><a href="#fieldPrefix">Field Prefix Classes</a> <ul> <li><a href="#initPrefix">Initialization</a> <li><a href="#ablePrefix">Disabling and Enabling</a> <li><a href="#formatPrefix">Formatting</a> <li><a href="#sideEffects">Side Effects</a> <li><a href="#validPrefix">Validation</a> <li><a href="#linkage">Data Linkage</a> </ul> <li><a href="#buttons">Buttons</a> <ul> <li><a href="#dialogButtons">Dialog Buttons</a> <li><a href="#jsButtons">Active JavaScript</a> </ul> </ul><a name="minAppRef"></a><li><a href="#minApp">A Minimal Complete Application</a> <ul> <li><a href="#getStarted">Getting Started</a> <ul> <li><a href="#localization">Localization</a> <li><a href="#navigation">Navigation</a> <li><a href="#choosing">Choosing Objects</a> <li><a href="#editing">Editing</a> <li><a href="#btnLinks">Buttons vs. Links</a> </ul> <li><a href="#dataModel">The Data Model</a> <li><a href="#usage">Usage</a> <ul> <li><a href="#cuSu">Customer/Supplier</a> <li><a href="#item">Item</a> <li><a href="#order">Order</a> <li><a href="#reports">Reports</a> </ul> <li><a href="#bugs">Bugs</a> </ul></ul><p><hr><h2><a name="static">Static Pages</a></h2><p>You can use Pico Lisp to generate static HTML pages. This does not make muchsense in itself, because you could directly write HTML code as well, but itforms the base for interactive applications, and allows us to introduce theapplication server and other fundamental concepts.<p><hr><h3><a name="hello">Hello World</a></h3><p>To begin with a minimal application, please enter the following two linesinto a generic source file named "project.l" in the Pico Lisp installationdirectory.<p><pre><code>########################################################################(html 0 "Hello" "lib.css" NIL "Hello World!" )########################################################################</code></pre><p>(We will modify and use this file in all following examples and experiments.Whenever you find such a program snipplet between hash ('#') lines, just copyand paste it into your "project.l" file, and press the "reload" button of yourbrowser to view the effects)<h4><a name="server">Start the application server</a></h4><p>Open a second terminal window, and start a Pico Lisp application server<p><pre><code>$ ./p dbg.l lib/http.l lib/xhtml.l lib/form.l -'server 8080 "project.l"'</code></pre><p>No prompt appears. The server just sits, and waits for connections. You canstop it later by hitting <code>Ctrl-C</code> in that terminal, or by executing'<code>killall picolisp</code>' in some other window.<p>(In the following, we assume that this HTTP server is up and running)<p>Now open the URL '<code><ahref="http://localhost:8080">http://localhost:8080</a></code>' with yourbrowser. You should see an empty page with a single line of text.<h4><a name="how">How does it work?</a></h4><p>The above line loads the debugger ("dbg.l"), the HTTP server code("lib/http.l"), the XHTML functions ("lib/xhtml.l") and the input form framework("lib/form.l", it will be needed later for <a href="#forms">interactiveforms</a>).<p>Then the <code>server</code> function is called with a port number and adefault URL. It will listen on that port for incoming HTTP requests in anendless loop. Whenever a GET request arrives on port 8080, the file "project.l"will be <code><a href="refL.html#load">(load)</a></code>ed, causing theevaluation (= execution) of all its Lisp expressions.<p>During that execution, all data written to the current output channel is sentdirectly to to the browser. The code in "project.l" is responsible to produceHTML (or anything else the browser can understand).<p><hr><h3><a name="urlSyntax">URL Syntax</a></h3><p>The Pico Lisp application server uses a slightly specialized syntax whencommunicating URLs to and from a client. The "path" part of an URL - whichremains when<p><ul><li>the preceding protocol, host and port specifications,<li>and the trailing question mark plus arguments</ul>are stripped off - is interpreted according so some rules. The most prominentones are:<p><ul><li>If a path starts with an at-mark ('@'), the rest (without the '@') is takenas the name of a Lisp function to be called. All arguments following thequestion mark are passed to that function.<li>If a path ends with ".l" (a dot and a lower case 'L'), it is taken as a Lispsource file name to be <code><a href="refL.html#load">(load)</a></code>ed. Thisis the most common case, and we use it in our example "project.l".<li>If the extension of a file name matches an entry in the global mime typetable <code>*Mimes</code>, the file is sent to the client with mime-type andmax-age values taken from that table.<li>Otherwise, the file is sent to the client with a mime-type of"application/octet-stream" and a max-age of 1 second.</ul><p>An application is free to extend or modify the <code>*Mimes</code> table withthe <code>mime</code> function. For example<p><pre><code>(mime "doc" "application/msword" 60)</code></pre><p>defines a new mime type with a max-age of one minute.<p>Argument values in URLs, following the path and the question mark, areencoded in such a way that Lisp data types are preserved:<p><ul><li>An internal symbol starts with a dollar sign ('$')<li>A number starts with a plus sign ('+')<li>An external (database) symbol starts with dash ('-')<li>A list (one level only) is encoded with underscores ('_')<li>Otherwise, it is a transient symbol (a plain string)</ul><p>In that way, high-level data types can be directly passed to functionsencoded in the URL, or assigned to global variables before a file is loaded.<p><hr><h3><a name="security">Security</a></h3><p>It is, of course, a huge security whole that - directly from the URL - anyLisp source file can be loaded, and any Lisp function can be called. For thatreason, applications must take care to declare exactly which files and functionsare to be allowed in URLs. The server checks a global variable <code><ahref="refA.html#*Allow">*Allow</a></code>, and - when its value isnon-<code>NIL</code> - denies access to anything that does not match itscontents.<p>Normally, <code>*Allow</code> is not manipulated directly, but set with the<code><a href="refA.html#allowed">allowed</a></code> and <code><ahref="refA.html#allow">allow</a></code> functions<p><pre><code>(allowed ("img/" "demo/") "favicon.ico" "lib.css" "@start" "customer.l" "article.l")</code></pre><p>This is usually called in the beginning of an application, and allows accessto the directories "img/" and "demo/", to the function 'start', and to the files"favicon.ico", "lib.css", "customer.l" and "article.l".<p>Later in the program, <code>*Allow</code> may be dynamically extended with<code>allow</code><p><pre><code>(allow "@foo")(allow "newdir/" T)</code></pre><p>This adds the function 'foo', and the directory "newdir/", to the set ofallowed items.<h4><a name="pw">The ".pw" File</a></h4><p>For a variety of security checks (most notably for using the <code>psh</code>function, as in some later examples) it is necessary to create a file named".pw" in the Pico Lisp installation directory. This file should contain a singleline of arbitrary data, to be used as a password for identifying localresources.<p>The recommeded way to create this file is to call the <code>pw</code>function, defined in "lib/http.l"<p><pre><code>$ ./p lib/http.l -'pw 12' -bye</code></pre><p>Please execute this command.<p><hr><h3><a name="htmlFoo">The <code>html</code> Function</a></h3><p>Now back to our "Hello World" example. In principle, you could write"project.l" as a sequence of print statements<p><pre><code>########################################################################(prinl "HTTP/1.0 200 OK^M")(prinl "Content-Type: text/html; charset=utf-8")(prinl "^M")(prinl "<html>")(prinl "Hello World!")(prinl "</html>")########################################################################</code></pre><p>but using the <code>html</code> function is much more convenient.<p>Moreover, <code>html</code> <b>is</b> nothing more than a printing function.You can see this easily if you connect a Pico Lisp Shell (<code>psh</code>) tothe server process (you must have generated a <a href="#pw">".pw" file</a> forthis), and enter the <code>html</code> statement<p><pre><code>$ bin/psh 8080: (html 0 "Hello" "lib.css" NIL "Hello World!")HTTP/1.0 200 OKServer: PicoLispDate: Fri, 29 Dec 2006 07:28:58 GMTCache-Control: max-age=0Cache-Control: no-cacheContent-Type: text/html; charset=utf-8<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Hello</title><base href="http://localhost:8080/"/><link rel="stylesheet" href="http://localhost:8080/lib.css" type="text/css"/></head><body>Hello World!</body></html>-> </html>: # (type ENTER here to terminate the Pico Lisp Shell)</code></pre><p>These are the arguments to <code>html</code>:<ol><li><code>0</code>: A max-age value for cache-control (in seconds, zero means"no-cache"). You might pass a higher value for pages that change seldom, or<code>NIL</code> for no cache-control at all.<li><code>"Hello"</code>: The page title.<li><code>"lib.css"</code>: A CSS-File name. Pass <code>NIL</code> if you do not wantto use any CSS-File, or a list of file names if you want to give more than oneCSS-File.<li><code>NIL</code>: A CSS style attribute specification (see the description⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -