前の記事の読者アプリケーション開発への根本的なアプローチは、この記事が理論的すぎることを正しく認識できます。したがって、私は理論と実践の~~善と悪の~~バランスを回復することを急いでいます。

この記事では、picoLispと呼ばれる氷山の一角を明らかにしています。データベースの内部、分散データベースの構成、デバッグ、機能的I / O、多重継承を備えたオブジェクトモデル、PicoLisp Prologに関しては、興味深い点が残されていました...

私はまだ、国内のプログラマーがこの強力なツールを詳しく調べることを望んでいます。

注意、カットの下には多くのテキストと括弧があります！

abu@software-lab.de

PicoLispでのWebアプリケーション開発

©Software Lab。アレクサンダー・バーガー

このドキュメントでは、PicoLispでWebアプリケーションを作成するための概要を説明します。

XHTML / CSSフレームワーク（以前のJava-AWT、Java-Swing、およびプレーンHTMLフレームワークとは異なります）に焦点を当てており、使いやすく、設計の柔軟性が高く、プラグイン、JavaScript、Cookie、またはCSSに依存しません。

シンプルなHTTP / HTMLグラフィカルインターフェイスにはいくつかの利点があります。どのブラウザでも動作し、スクリプト（ "@ lib / scrape.l"）で完全に制御できます。

より正確には、CSS を使用してレイアウトを改善できます。また、 JavaScriptを搭載したブラウザは、より速く、よりスムーズに応答します。ただし、このフレームワークは、CSSまたはJavaScriptについて何も知らないブラウザーでも正常に機能します。すべての例は、w3mテキストブラウザでもテストされています。

PicoLispシステムに関する基本情報： PicoLispリファレンスおよびPicoLispチュートリアル。 HTMLおよび一部のCSSとHTTPの知識が前提となります。

例では、PicoLispがグローバルインストールから起動されたことを想定しています（インストールを参照）。

静的ページ

PicoLispを使用して、静的なHTMLページを作成できます。 HTMLコードを直接作成することも同様に可能であるため、これだけではあまり意味がありませんが、これは対話型アプリケーションの基礎を形成し、アプリケーションサーバーやその他の基本概念を理解することを可能にします。

ハローワールド

最小限のアプリケーションで開始するには、PicoLispインストールディレクトリに「project.l」ファイルを作成し、次の2行を入力します。

 ######################################################################## (html 0 "Hello" "@lib.css" NIL "Hello World!" ) ########################################################################

（次のすべての例でこのファイルを使用および変更します。行（ '#####'）の間にプログラムのこのような部分が発生した場合は、コピーして「project.l」ファイルに貼り付け、ボタンをクリックします。ブラウザを「更新」して結果を表示します）

アプリケーションサーバーの起動

ターミナルウィンドウを開き、PicoLispアプリケーションサーバーを起動します

 $ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 project.l +

コマンドプロンプトは表示されません。サーバーは起動しており、接続を待機しています。この端末でCtrl-C

をCtrl-C

か、別の端末ウィンドウで ' killall pil

'を実行することで、後で停止できます。

（さらなる例では、このHTTPサーバーは引き続き動作すると想定しています）

ブラウザでURL ' http：// localhost：8080 'を開きます。空白のページに1行のテキストが表示されます。

どのように機能しますか？

上記の行は、デバッガー（オプション「+」）、HTTPサーバーコード（「@ lib / http.l」）、XHTML関数（「@ lib / xhtml.l」）およびGUIフレームワーク（「@ lib / form.l」）をロードします、インタラクティブフォームには後で必要になります）。

次に、 server

関数がポート番号とデフォルトURLで呼び出されます。彼女は、無限のループで着信HTTP要求のこのポートをリッスンします。 GET要求がポート8080に到着するたびに、「project.l」ファイルがダウンロードされ、（load）を使用して実行されます

このファイルの実行中に、現在の出力チャネル（STDOUT）に記録されたすべてのデータがブラウザーに直接送信されます。 "project.l"のコードは、HTML（またはブラウザーが理解する別の形式）を生成します。

URL構文

アプリケーションサーバーは、クライアントとURLを交換するときに、わずかに特殊な構文を使用します。 URLの「パス」部分は、トリミング後に残ります

プロトコル、ホスト、およびポートの仕様、
最後の疑問符と引数、

いくつかのルールに従って解釈されます。それらの最も重要なもの：

パスが感嘆符（ '！'）で始まる場合、残り（ '！'なし）はLisp関数の名前と見なされます。疑問符の後のすべての引数は、この関数に渡されます。
パスが「.l」（小文字のドットと「L」）で終わる場合、Lispファイルの名前とみなされ、（load）を使用してロードされます。これは最も一般的なケースであり、project.lの例で使用します。
ファイル名拡張子がグローバルmime *Mimes

タイプテーブルのエントリと一致する場合、ファイルはmime-typeとこのテーブルから取得したmax-age値とともにクライアントに送信されます。
それ以外の場合、ファイルはMIMEタイプ「application / octet-stream」で最大秒数1秒でクライアントに送信されます。

アプリケーションは、 mime

関数の制限なしに*Mimes

テーブルを展開または変更できます。例えば

 (mime "doc" "application/msword" 60)

1分間のmax-ageで新しいMIMEタイプを定義します。

パスと疑問符の後のURLの引数の値は、Lispデータ型を保持するような方法でエンコードされます。

通常の記号（内部記号）はドル記号（「$」）で始まります
番号はプラス記号（+）で始まります
外字（データベースオブジェクト）はダッシュ（ '-'）で始まります
リスト（シングルレベルのみ）はアンダースコア（ '_'）でエンコードされます
それ以外の場合は、通過文字（通常の文字列）

このようにして、高レベルのデータ型をURLでエンコードされた関数に直接渡すか、ファイルをダウンロードする前にグローバル変数に割り当てることができます。

安全性

もちろん、これは、LispファイルをURLから直接ロードでき、任意の関数を呼び出すことができる場合、大きなセキュリティホールになります。このため、アプリケーションでは、URLで許可されるファイルと関数を正確に指定する必要があります。サーバーはグローバル* Allow変数をチェックし、その値がNIL

でない場合、コンテンツと一致しないものへのアクセスを拒否します。

原則として*Allow

は直接変更せず、許可および許可機能を使用します

 (allowed ("app/") "!start" "@lib.css" "customer.l" "article.l" )

これは通常、アプリケーションの開始時に呼び出され、app /ディレクトリ、開始関数、および@ lib.css、custome customel、およびarticle.lファイルへのアクセスを許可します。

後で、プログラムで、 *Allow

allow

をallow

で動的に展開できます

 (allow "!foo") (allow "newdir/" T)

これにより、foo関数とnewdir /ディレクトリが許可された要素のセットに追加されます。

ファイル.pw

セキュリティ監視で使用するには（主に後の例のようにpsh

関数を使用するため）、PicoLispインストールディレクトリに「.pw」という名前のファイルを作成する必要があります。このファイルには、パスワードとして使用する任意のデータが1行含まれている必要があります。

このファイルを作成する推奨方法は、「@ lib / http.l」で定義されているpw

関数を呼び出すことです

 $ pil @lib/http.l -'pw 12' -bye

このコマンドを実行してください。

`html`

関数

Hello Worldの例に戻りましょう。基本的に、一連の出力ステートメントとして「project.l」を記述できます。

 ######################################################################## (prinl "HTTP/1.0 200 OK^M") (prinl "Content-Type: text/html; charset=utf-8") (prinl "^M") (prinl "<html>") (prinl "Hello World!") (prinl "</html>") ########################################################################

ただし、 html

関数を使用する方がはるかに便利です。

さらに、 html

は印刷機能にすぎません。 PicoLispシェル（ psh

）をサーバープロセスに接続し（このために「.pw」ファイルを生成する必要がありました）、 html

関数を入力すると、これを簡単に確認できます。

 $ /usr/lib/picolisp/bin/psh 8080 : (html 0 "Hello" "@lib.css" NIL "Hello World!") HTTP/1.0 200 OK Server: PicoLisp Date: Fri, 29 Dec 2006 07:28:58 GMT Cache-Control: max-age=0 Cache-Control: no-cache Content-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" type="text/css" href="http://localhost:8080/@lib.css"/> </head> <body>Hello World!</body> </html> -> </html> : # (type Ctrl-D here to terminate PicoLisp)

html

引数：

0

：ブラウザーのキャッシュを監視するためのmax-age値（秒単位で、ゼロは「キャッシュなし」を意味します）。まれにしか変更されないページにはより高い値を設定でき、キャッシュ制御を無効にするにはNIL

を設定できます。
"Hello"

：ページの名前。
"@lib.css"

：CSSファイル名。 CSSを使用しない場合はNIL

渡します。複数のCSSファイルを使用する場合はファイル名のリストを渡します。
NIL

： body

タグのCSS属性の仕様（以下のCSS属性の説明を参照）。

これら4つの引数の後に、任意の数の式を続けることができます。これらはページの本文を形成し、特別な規則に従って計算されます。これらの規則は、通常の計算規則とは少し異なります。

引数がアトム（数値または文字/文字列）の場合、その値はすぐに出力されます。
それ以外の場合（リスト）、Lisp関数として評価されます（通常、これらはprintステートメントのいくつかの形式です）。

したがって、ソースファイルは次のように書くこともできます。

 ######################################################################## (html 0 "Hello" "@lib.css" NIL (prinl "Hello World!") ) ########################################################################

最も一般的な印刷機能は、いくつかのHTMLタグです。

 ######################################################################## (html 0 "Hello" "@lib.css" NIL (<h1> NIL "Hello World!") (<br> "This is some text.") (ht:Prin "And this is a number: " (+ 1 2 3)) ) ########################################################################

<h1>

および<br>

はタグ関数です。 <h1>

は、最初の引数としてCSS属性を取ります。

ht:Prin

代わりにht:Prin

使用していることに注意してください。 ht:Prin

関数は、特殊文字をエスケープするため、HTMLページでの直接印刷に使用する必要があります。

CSS属性

上記のhtml

関数と多くのタグ関数は、CSS属性の仕様を受け入れます。アトム、コンスペア、またはコンスペアのリストを指定できます。これを例として<h1>

タグを使用して示します。

アトム（通常は文字または文字列）はCSSクラス名として解釈されます

 : (<h1> 'foo "Title") <h1 class="foo">Title</h1>

コンスペアの場合、CARは属性名として、CDRは属性値として扱われます

 : (<h1> '(id . bar) "Title") <h1 id="bar">Title</h1>

したがって、コンスペアのリストは、属性と値のペアのセットを提供します

 : (<h1> '((id . "abc") (lang . "de")) "Title") <h1 id="abc" lang="de">Title</h1>

タグ機能

すべての定義済みXHTMLタグ関数は、「@ lib / xhtml.l」にあります。 PicoLispコンソールで定義を実行するか、project.lファイルを編集した後に[ブラウザーの更新]ボタンをクリックして、定義を確認し、少し実験することをお勧めします。

適切なPicoLispコンソールを取得するには、別のターミナルウィンドウでPicoLispシェル（ psh

）コマンドを実行します（アプリケーションサーバーが実行され、「。pw」ファイルを作成した場合のみ機能します）

 $ /usr/lib/picolisp/bin/psh 8080 :

または、モジュール「@ lib / xhtml.l」をロードしてインタープリターを実行します

 $ pil @lib/http.l @lib/xhtml.l + :

これらすべてのタグ関数には、タグ関数を評価するための規則が適用されることに注意してください。

シンプルなタグ

ほとんどのタグ関数はシンプルで簡単です。それらのいくつかは単に引数を出力します。

 : (<br> "Hello world") Hello world<br/> : (<em> "Hello world") <em>Hello world</em>

ただし、それらのほとんどは、CSS属性のセットを最初の引数として受け入れます（上記の<h1>

ように）

 : (<div> 'main "Hello world") <div class="main">Hello world</div> : (<p> NIL "Hello world") <p>Hello world</p> : (<p> 'info "Hello world") <p class="info">Hello world</p>

これらの関数はすべて、任意の数の引数を取り、任意の入れ子の深さを持つことができます（結果のHTMLマークアップが有効である限り）

 : (<div> 'main (<h1> NIL "Head") (<p> NIL (<br> "Line 1") "Line" (<nbsp>) (+ 1 1) ) ) <div class="main"><h1>Head</h1> <p>Line 1<br/> Line 2</p> </div>

 ######################################################################## (html 0 "Unordered List" "@lib.css" NIL (<ul> NIL (<li> NIL "Item 1") (<li> NIL "Sublist 1" (<ul> NIL (<li> NIL "Item 1-1") (<li> NIL "Item 1-2") ) ) (<li> NIL "Item 2") (<li> NIL "Sublist 2" (<ul> NIL (<li> NIL "Item 2-1") (<li> NIL "Item 2-2") ) ) (<li> NIL "Item 3") ) ) ########################################################################

ここでは、他のタグ関数を含む、このツリーの各ノードに任意のコードを配置することもできます。

テーブル

階層構造と同様に、 <table>

および<row>

関数を使用して2次元テーブルを生成できます。

次の例は、数字とその正方形の表を表示します。

 ######################################################################## (html 0 "Table" "@lib.css" NIL (<table> NIL NIL NIL (for N 10 # A table with 10 rows (<row> NIL N (prin (* NN))) ) ) ) # and 2 columns ########################################################################

<table>

の最初の引数は通常のCSS属性、2番目はオプションのヘッダー、3番目は列ヘッダーのオプションのリストです。このリストでは、CARのCSS属性と列ヘッダーのコンテンツのCDRのタグ本文を使用して、各列のリストを渡すことができます。

本体<table>

には、 <row>

関数の呼び出しが含まれています。この関数の特徴は、本体の各式がテーブルの個別の列に移動することです。列見出しと<row>

関数にCSS属性が指定されている場合、それらはスペースと結合されて<td>

渡されます。これにより、行と列ごとに異なるCSS属性を指定できます。

上記の例の表の拡張として、表自体にいくつかの属性を設定してみましょう（これはお勧めできませんが、CSSファイルでそのようなスタイルを定義し、クラス名を<table>

渡すことをお勧めします）。変数（赤と青）の色への文字列

 ######################################################################## (html 0 "Table" "@lib.css" NIL (<table> '((width . "200px") (style . "border: dotted 1px;")) # table style "Square Numbers" # caption '((align "Number") (align "Square")) # 2 headers (for N 10 # 10 rows (<row> (xchg '(red) '(blue)) # red or blue N # 2 columns (prin (* NN) ) ) ) ) ) ########################################################################

1つのセルが複数の列を占めるようにテーブル内の2つ以上のセルを結合する場合は、追加のパラメーター<row>

として「 -

」記号を渡すことができます。これにより、「 -

」文字の左側のデータが右側に展開されます。

通常のタグ関数<th>

、 <tr>

および<td>

して、テーブル構造を直接指定することもできます。

コンポーネントの2次元配列のみが必要な場合は、さらに単純な<grid>

関数を使用できます。

 ######################################################################## (html 0 "Grid" "@lib.css" NIL (<grid> 3 "A" "B" "C" 123 456 789 ) ) ########################################################################

最初のパラメーターは列の数（ここでは3）で、次にセルごとに1つの式です。数値の代わりに、CSS属性のリストを渡すこともできます。このリストの長さにより、列の数が決まります。上記の例の2行目を次のように変更できます。

  (<grid> '(NIL NIL right)

この場合、3番目の列は右揃えになります。

メニューとタブ（タブ）

最も強力な2つのタグ関数は<menu>

と<tab>

です。個別にまたは組み合わせて使用すると、ナビゲーションフレームワークを形成します。

サブメニューを開いたり閉じたりできるメニュー項目
別のページに移動するサブメニュー項目
タブ（タブ）、さまざまなサブページに移動します

次の例は、すべての要素のURLが同じproject.lページにつながるため、あまり役に立ちませんが、これは機能を示すのに十分です。

 ######################################################################## (html 0 "Menu+Tab" "@lib.css" NIL (<div> '(id . menu) (<menu> ("Item" "project.l") # Top level item (NIL (<hr>)) # Plain HTML (T "Submenu 1" # Submenu ("Subitem 1.1" "project.l") (T "Submenu 1.2" ("Subitem 1.2.1" "project.l") ("Subitem 1.2.2" "project.l") ("Subitem 1.2.3" "project.l") ) ("Subitem 1.3" "project.l") ) (T "Submenu 2" ("Subitem 2.1" "project.l") ("Subitem 2.2" "project.l") ) ) ) (<div> '(id . main) (<h1> NIL "Menu+Tab") (<tab> ("Tab1" (<h3> NIL "This is Tab 1") ) ("Tab2" (<h3> NIL "This is Tab 2") ) ("Tab3" (<h3> NIL "This is Tab 3") ) ) ) ) ########################################################################

<menu>

は一連のメニュー項目を受け入れます。各メニュー項目は、CARを含むLispリストです。

NIL

：非アクティブなメニュー項目。リストの残りの部分は任意のコード（通常はHTMLタグ）で構成されます。
T

：2番目の要素はサブメニューの名前です。この名前をクリックすると、対応するサブメニューが開閉します。リストの末尾は、サブメニュー（任意のネストの深さ）を再帰的に定義します。
それ以外の場合：メニュー項目は（サブメニューを開くのではなく）直接アクションを定義します。リストの最初の要素はメニュー要素の名前で、2番目の要素は対応するURLです。

<tab>

はサブページのリストを受け入れ<tab>

。各ページは単にタブの名前であり、次に任意のコード（通常はHTMLタグ）です。

一度にアクティブにできるメニューとタブは1つだけであることに注意してください。

インタラクティブフォーム

HTMLでは、ユーザー入力の唯一の方法は、HTTP POSTメソッドを使用してサーバーと対話する<form>

および<input>

要素を使用することです。

「@ Lib / xhtml.l」は、 <post>

と呼ばれる関数と、HTMLフォームの直接プログラミングを可能にするデータ入力タグのコレクションを定義します。簡単な例を1つだけ示します。

 ######################################################################## (html 0 "Simple Form" "@lib.css" NIL (<post> NIL "project.l" (<field> 10 '*Text) (<submit> "Save") ) ) ########################################################################

この例では、テキスト入力フィールドを*Text

グローバル変数にバインドします。現在の値*Text

フィールドに表示され、送信ボタンを押すと、ユーザーが入力した文字列値が割り当てられた*Text

で "project.l"が再ロードされます。

アプリケーションは、この変数を使用して、データベースに値を保存するなどの便利なアクションを実行できます。

このフォームの簡単な使用に関する問題は次のとおりです。

プログラマーは、多数のグローバル変数を管理する必要があります。ページ上の各入力フィールドには、サーバーとクライアント間の通信用の変数が必要です。
アプリケーションの内部状態は保持されません。各POSTリクエストはサーバー上に個別のプロセスを生成し、グローバル変数を新しい値に設定し、HTMLページを生成し、その後終了します。アプリケーションステータスは、たとえば<hidden>

を使用して明示的に渡す必要があります。
あまりインタラクティブではありません。通常、「送信」ボタンは1つだけです。ユーザーは多数の入力フィールドに入力しますが、「送信」ボタンがクリックされた場合にのみ変更が有効になります。

このスタイルでいくつかのアプリケーションを作成しましたが、「@ lib / form.l」で提供されるGUIフレームワークをお勧めします。クライアントとサーバーの対話に変数は必要ありませんが、アプリケーションロジック、ボタンアクション、およびデータ通信を抽象化するためのGUIコンポーネントのクラスの階層を実装します。

セッション

まず、サーバー上に永続的な環境を作成して、個々のセッションを（接続されたクライアントごとに）処理する必要があります。

技術的には、これは上で起動したサーバーの子プロセスにすぎず、HTMLページをブラウザーに送信した直後には終了しません 。これは、アプリケーション初期化コードのどこかでapp

関数を呼び出すことで実現されます。

 ######################################################################## (app) # Start a session (html 0 "Simple Session" "@lib.css" NIL (<post> NIL "project.l" (<field> 10 '*Text) (<submit> "Save") ) ) ########################################################################

前の例との違いはありません。ただし、ブラウザを接続し、アプリケーションサーバーが実行されているターミナルウィンドウを見ると、コロン（PicoLispコマンドライン）に気付くでしょう。

 $ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 project.l + :

Unix ps

ユーティリティなどのツールは、2つのpicolisp

プロセスが現在実行されていることを通知します。 picolisp

プロセスは2 picolisp

プロセスの親です。

ブラウザウィンドウのテキストボックスに「abcdef」とテキストを入力し、[保存]ボタンをクリックして、 *Text

変数を調べた場合、

 : *Text -> "abcdef"

クライアントに「接続」されている専用のPicoLispプロセスがあることがわかります。

空のコマンドラインでCtrl-D

を押すと、このプロセスを（PicoLispのインタラクティブセッションと同様に）終了できます。それ以外の場合、タイムアウト期間（デフォルトでは5分）以内に他のブラウザー要求が受信されない場合、自動的に終了します。

（デバッグなしで）実動バージョンを開始するには、通常、サーバーは「+」フラグなしで-wait

を使用して-wait

 $ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 project.l -wait

この実行オプションを使用すると、クライアントの接続時にコマンドラインプロンプト（:)は表示されません。

フォーム（アクションフォーム）

各クライアントのセッションができたので、アクティブなGUIフレームワークを構成できます。

これを行うために、 action

html

関数呼び出しをラップしaction

。ボディ内ではhtml

、他のすべてのタイプのタグ関数に加えて、1つ以上の呼び出しが可能ですform

 ######################################################################## (app) # Start session (action # Action handler (html 0 "Form" "@lib.css" NIL # HTTP/HTML protocol (form NIL # Form (gui 'a '(+TextField) 10) # Text Field (gui '(+Button) "Print" # Button '(msg (val> (: home a))) ) ) ) ) ########################################################################

*Text

入力フィールドの内容を保存するためのなどのグローバル変数はもうないことに注意してください。代わりに、 ` a

`コンポーネントにローカルのシンボル名を付けました+TextField

  (gui 'a '(+TextField) 10) # Text Field

他のコンポーネントがアクセスする場合があります。

  '(msg (val> (: home a)))

(: home)

このGUIコンポーネントを含むフォームへのリンクを常に返します。だから(: home a)

- a

現在のフォームのコンポーネント ' ' へのリンク。以来MSGは STDERRにその引数が表示され、この方法は、val>

現在のコンポーネントの内容を抽出し、我々はボタンを押したときに、我々は、テキストボックスに入力されたコンソールのテキストで表示されます。

個別にaction

、form

あまり意味をなさない。ただし、との内部html

ではform

、HTML関数（およびその他のLisp関数）を自由に混在させることができます。

典型的なページには、次の構造があります。

 (action # Action handler (html .. # HTTP/HTML protocol (<h1> ..) # HTML tags (form NIL # Form (<h3> ..) (gui ..) # GUI component(s) (gui ..) .. ) (<h2> ..) (form NIL # Another form (<h3> ..) (gui ..) # GUI component(s) .. ) (<br> ..) .. ) )

機能 `gui`

体内で最も重要な機能form

はfunction gui

です。これは、グラフィカルインターフェイスの構築の主力です。

関数の外側はform

gui

定義されていません。最初のパラメーターは、オプションのエイリアス、クラスのリスト、およびこれらのクラスのコンストラクターに必要な追加の引数です。前の例で見た

  (gui 'a '(+TextField) 10) # Text Field

ここで、「a

」はタイプコンポーネントのエイリアスです(+TextField)

。数値引数10

がテキストフィールドに渡され、幅が決定されます。GUIクラスの章の他の例を参照してください。

GETリクエストgui

は本質的にのフロントエンドですnew

。コンポーネントを構築し、現在のフォームの内部構造に格納し、コンポーネントにメッセージを送信して初期化しますinit>

。最後に、彼はメッセージを送信しshow>

てHTMLコードを生成し、ブラウザーに送信します。

POST要求中、gui

新しいコンポーネントは作成されません。代わりに、既存のコンポーネントが再利用されます。したがって、gui

メッセージコンポーネントを送信する以外に何もする必要はありませんshow>

。

制御フロー

HTTPには、ブラウザウィンドウを変更するための2つのメソッド、GETとPOSTのみがあります。これらの2つの方法は、明確に定義された方法で使用します。

GETは、新しいページが作成されることを意味します。通常、ブラウザーのアドレスフィールドにURLを入力するか、リンク（多くの場合、サブメニューまたはタブの要素）をクリックして、ページに初めてアクセスするときに使用されます。
POSTは常に同じページにつながります。フォーム上のボタンを押すことで開始され、対応するフォームのデータ構造を更新し、このボタンに関連付けられたコードを実行します。

ボタンに関連付けられたコードは、ほとんどすべてを実行できます：入力フィールドの内容の読み取りと変更、データベースとの通信、メッセージとダイアログボックスの表示、またはGETリクエストでのPOSTリクエストの偽造は、まったく異なるドキュメントの表示につながります（URLの変更を参照）アドレス）。

GETは、サーバー上にすべてのGUIコンポーネントを構築します。これらのコンポーネントは、ブラウザーのHTMLページの状態と動作をカプセル化するオブジェクトです。ボタンが押されるたびに、ページはPOSTリクエストでリロードされます。次に、ブラウザにデータを送信する前に、制御が関数に転送されますaction

。すべてのコンポーネントのエラーチェックを実行し、HTMLページでのユーザー入力を処理し、各コンポーネントの値を目的の形式（テキスト、数値、日付、オブジェクトなど）で保存します。

フォームの状態は時間とともに持続します。ユーザーがブラウザーの戻るボタンを使用して前のページに戻ると、この状態が再開され、POST要求によって再度送信できます。

次の簡単な例では、2つのテキストフィールドを表示しています。「ソース」フィールドにテキストを入力する場合、いずれかのボタンをクリックして、「宛先」フィールドに大文字または小文字でコピーできます。

 ######################################################################## (app) (action (html 0 "Case Conversion" "@lib.css" NIL (form NIL (<grid> 2 "Source" (gui 'src '(+TextField) 30) "Destination" (gui 'dst '(+Lock +TextField) 30) ) (gui '(+JS +Button) "Upper Case" '(set> (: home dst) (uppc (val> (: home src))) ) ) (gui '(+JS +Button) "Lower Case" '(set> (: home dst) (lowc (val> (: home src))) ) ) ) ) ) ########################################################################

[ +Lock

宛先]フィールドのプレフィックスクラスにより、このフィールドは読み取り専用になります。このフィールドにテキストを入力する唯一の方法は、ボタンの1つを使用することです。

URL切り替え

アクションコード（ボタン）はhtml

、HTTPヘッダーを送信する前に実行されるため、現在のページに割り込んで、ユーザーに何か他のものを提示できます。別のHTMLページの場合もありますが、通常のリンクで十分なので、これはあまり興味深いケースではありません。代わりに、コードにより、動的に生成されたデータがロードされる場合があります。

次の例は、テキストボックスと2つのボタンを示しています。テキスト領域に入力されたテキストは、最初のボタンからテキストファイルにエクスポートされるか、2番目のボタンからPDFドキュメントにエクスポートされます。

 ######################################################################## (load "@lib/ps.l") (app) (action (html 0 "Export" "@lib.css" NIL (form NIL (gui '(+TextField) 30 8) (gui '(+Button) "Text" '(let Txt (tmp "export.txt") (out Txt (prinl (val> (: home gui 1)))) (url Txt) ) ) (gui '(+Button) "PDF" '(psOut NIL "foo" (a4) (indent 40 40) (down 60) (hline 3) (font (14 . "Times-Roman") (ps (val> (: home gui 1))) ) (hline 3) (page) ) ) ) ) ) ########################################################################

（クラスに2つの引数+TextField

（幅と高さ）を渡すと、要素が作成されますtextarea

）

最初のボタンのアクションコードは一時ファイル（つまり、現在のプロセスの一時ディレクトリにある「export.txt」という名前のファイル）を作成し、テキスト領域の値を印刷します（今回はgui要素に名前を付けるのではなく、このファイル内のフォームの最初の要素として参照するだけurl

で、ファイル名を持つ関数が呼び出されます。

2番目のボタンは、@ lib / ps.l PostScriptライブラリを使用して、「foo.pdf」という一時ファイルを作成します。これは、一時ファイルの作成と関数の呼び出しurl

が内部に隠されている場所psOut

です。その結果、ブラウザはPDFドキュメントを受信して表示します。

アラートとダイアログ

実際、アラートとダイアログは、以前見たものとまったく同じで

はありません;-) これらはポップアップではありません。このフレームワークでは、これらは事前定義されたタイプの使いやすい形式です。ボタンコードから呼び出すことができ、それらを作成したフォームの直前の現在のページに常に表示されます。

2つのアラートとダイアログボックスを使用する例を見てみましょう。最初は、ロックされたテキストボックスと2つのボタンを持つシンプルなフォームを表示します

 ######################################################################## (app) (action (html 0 "Alerts and Dialogs" "@lib.css" NIL (form NIL (gui '(+Init +Lock +TextField) "Initial Text" 20 "My Text") (gui '(+Button) "Alert" '(alert NIL "This is an alert " (okButton)) ) (gui '(+Button) "Dialog" '(dialog NIL (<br> "This is a dialog.") (<br> "You can change the text here " (gui '(+Init +TextField) (val> (: top 1 gui 1)) 20) ) (<br> "and then re-submit it to the form.") (gui '(+Button) "Re-Submit" '(alert NIL "Are you sure? " (yesButton '(set> (: home top 2 gui 1) (val> (: home top 1 gui 1)) ) ) (noButton) ) ) (cancelButton) ) ) ) ) ) ########################################################################

プレフィックスクラス+Init

は、「My Text」フィールドを文字列「Initial Text」で初期化します。フィールドはロックされているため、この値を直接変更することはできません。

最初のボタンには、「これはアラートです」というアラートが表示されます。「OK」をクリックして閉じることができます。

2番目のボタンは、メインフォームのテキストフィールドからの値のコピーを含むテキストフィールドを含むダイアログを表示します。「再送信」をクリックし、「本当によろしいですか？」という警告に「はい」と答えると、この値を変更してフォームに送り返すことができます。

計算機の例

次に、テストファイル「project.l」を一時的に延期し、より実質的で実用的なスタンドアロンの例に進みます。学んだことを使用して、単純なbignum電卓を作成します。（PicoLispには1種類の数字（bignums（無制限の整数））しかないため、「Bignum」）

1つのフォーム、1つの数値入力フィールド、および多くのボタンを使用します。計算機のソースコードは、直接実行されるスクリプトラッパー「misc / calc」とともに、PicoLispディストリビューション（たとえば、「/ usr / share / picolisp / misc / calc.l」）にあります。

calc.l

 # 14may11abu # (c) Software Lab. Alexander Burger # *Init *Accu *Stack (allowed NIL "!calculator" "@lib.css") (load "@lib/http.l" "@lib/xhtml.l" "@lib/form.l") # Calculator logic (de digit (N) (when *Init (zero *Accu) (off *Init)) (setq *Accu (+ N (* 10 *Accu))) ) (de calc () (let (Fun (caar *Stack) Val (cddr (pop '*Stack))) (setq *Accu (if (and (== '/ Fun) (=0 *Accu)) (alert "Div / 0") (Fun Val *Accu) ) ) ) ) (de operand (Fun Prio) (when (>= (cadar *Stack) Prio) (calc)) (push '*Stack (cons Fun Prio *Accu)) (on *Init) ) (de finish () (while *Stack (calc)) (on *Init) ) # Calculator GUI (de calculator () (app) (action (html 0 "Bignum Calculator" "@lib.css" NIL (<h2> NIL "Bignum Calculator") (form NIL (<br> (gui '(+Var +NumField) '*Accu 60)) (<grid> 4 (gui '(+JS +Button) "±" '(setq *Accu (- *Accu))) (gui '(+Able +JS +Button) '(ge0 *Accu) (char 8730) '(setq *Accu (sqrt *Accu)) ) (gui '(+JS +Button) "\^" '(operand '** 3)) (gui '(+JS +Button) "/" '(operand '/ 2)) (gui '(+JS +Button) "7" '(digit 7)) (gui '(+JS +Button) "8" '(digit 8)) (gui '(+JS +Button) "9" '(digit 9)) (gui '(+JS +Button) "*" '(operand '* 2)) (gui '(+JS +Button) "4" '(digit 4)) (gui '(+JS +Button) "5" '(digit 5)) (gui '(+JS +Button) "6" '(digit 6)) (gui '(+JS +Button) "-" '(operand '- 1)) (gui '(+JS +Button) "1" '(digit 1)) (gui '(+JS +Button) "2" '(digit 2)) (gui '(+JS +Button) "3" '(digit 3)) (gui '(+JS +Button) "+" '(operand '+ 1)) (gui '(+JS +Button) "0" '(digit 0)) (gui '(+JS +Button) "C" '(zero *Accu)) (gui '(+JS +Button) "A" '(main)) (gui '(+JS +Button) "=" '(finish)) ) ) ) ) ) # Initialize (de main () (on *Init) (zero *Accu) (off *Stack) ) # Start server (de go () (server 8080 "!calculator") )

使用するには、PicoLispインストールディレクトリに移動し、次のように実行します。

 $ misc/calc

または次のような絶対パスで呼び出します

 $ /usr/share/picolisp/misc/calc

インタラクティブなPicoLispセッションにアクセスする場合は、代わりに次のように開始します。

 $ pil misc/calc.l -main -go +

通常どおり、ページ「http：// localhost：8080」を開きます。

電卓のロジックとGUIのコードは非常に単純です。エントリポイントは関数calculator

です。これは（URL構文で説明されているように）最初にデフォルトのサーバーURLとして、次にPOSTリクエストによって暗黙的に呼び出されます。計算機を起動した後、ファイルにアクセスする必要はありません。

プロダクションバージョンでは、「misc / calc.l」の先頭に許可されたステートメントを挿入することに注意してください（セキュリティの章で推奨されています）

 (allowed NIL "!calculator" "@lib.css")

これにより、単一の機能への外部アクセスが制限されますcalculator

。

電卓は、3つのグローバル変数を使用し*Init

、*Accu

そして*Stack

。*Init

-次の数字を押すとバッテリーがゼロにリセットされることを示すために、オペレータボタンによって設定されるブールフラグ。*Accu

-バッテリー（累積加算器）。その値は数値入力フィールドに表示され、ユーザー入力を受け入れ、計算結果を保存します。*Stack

これは、保留中の計算（演算子、優先度、および中間結果）を優先度の低い演算子で保存し、優先度の高い計算を実行するためのストアスタックです。

この機能digit

は数字ボタンによって呼び出され、別の数字をバッテリーに追加します。

この関数calc

は実際の計算ステップを取ります。スタックからデータを取得し、ゼロ除算を確認し、必要に応じてエラーメッセージを表示します。

operand

オペランドのボタンを処理し、関数と優先度を引数として受け入れます。優先順位をスタックの最上位の値と比較し、それより小さい場合は計算を延期します。

finish

最終結果の計算に使用されます。

この関数にはcalculator

、幅60文字の数値入力フィールドが1つあります

  (gui '(+Var +NumField) '*Accu 60)

プレフィックスクラス+Var

は、このフィールドをグローバル変数に関連付けます*Accu

。フィールド内のすべての変更がこの変数に表示され、この変数の値の変更がフィールドに表示されます。

平方根ボタンにはプレフィックスクラスがあります +Able

  (gui '(+Able +JS +Button) '(ge0 *Accu) (char 8730) '(setq *Accu (sqrt *Accu)) )

バッテリの現在の値がゼロより大きいことを確認する式の形式の引数を使用すると、ボタンはオフになります。

フォームの残りの部分は、電卓のすべての機能をカプセル化したボタンの配列（GRID）です。ユーザーは、数値ボタンを使用するか、直接入力することで、入力フィールドに数値を入力し、演算子ボタンから計算を実行できます。サポートされている演算は、加算、減算、乗算、除算、符号反転、平方根、指数です（すべての演算は長整数演算です）。ボタン ` C

`はバッテリーのみをクリアし、ボタン ' A

'は保留中の計算をすべてクリアします。

そして、これらすべてを53行のコードで！

テーブル（チャート）

チャート-表形式データの内部表示用の仮想コンポーネント。

通常、このデータはネストされたリスト、データベースの選択、または動的に生成されたテーブル情報です。グラフを使用すると、データを行と列（通常はHTML テーブル）で表示し、上下にスクロールして、対応する表示GUIコンポーネントにリンクできます。

実際、チャートを処理するためのロジックはフレームワーク全体の重要な部分であり、すべての内部メカニズムに大きな影響を及ぼします。各GUIコンポーネントは、更新およびユーザーインタラクション中にそのコンテンツを正しく処理できるように、チャートの一部であるかどうかを知る必要があります。

テキストデータと数値データを収集するとします。テーブルを作成できます

 ######################################################################## (app) (action (html 0 "Table" "@lib.css" NIL (form NIL (<table> NIL NIL '((NIL "Text") (NIL "Number")) (do 4 (<row> NIL (gui '(+TextField) 20) (gui '(+NumField) 10) ) ) ) (<submit> "Save") ) ) ) ########################################################################

2列«テキスト»と«ナンバー»4行、それぞれの備えると+TextField

と+NumField

。

最初の列にテキストを入力し、2番目の列に数字を入力できます。[保存]ボタンをクリックすると、これらの値がサーバー上のコンポーネントに保存されます（または、2番目の列の行が数値でない場合はエラーメッセージが表示されます）。

このソリューションには2つの問題があります。

個々のフィールドの入力を取得できますが、たとえば

 : (val> (get *Top 'gui 2)) # Value in the first row, second column -> 123

データ構造全体を単一のリストとして取得する直接的な方法はありません。代わりに、すべてのGUIコンポーネントを調べてデータを収集する必要があります。

ユーザーは、4行を超えるデータを入力することはできません。これは、さらにデータを入力するためのスペースをスクロールして拡大する簡単な方法がないためです。

チャートは次のことを処理できます。

 ######################################################################## (app) (action (html 0 "Chart" "@lib.css" NIL (form NIL (gui '(+Chart) 2) # Inserted a +Chart (<table> NIL NIL '((NIL "Text") (NIL "Number")) (do 4 (<row> NIL (gui 1 '(+TextField) 20) # Inserted '1' (gui 2 '(+NumField) 10) ) ) ) # Inserted '2' (<submit> "Save") ) ) ) ########################################################################

+Chart

Chartを使用して制御する必要があるGUIコンポーネントの前にコンポーネントを挿入していることに注意してください。引数「2」は、Chartが2列のデータを予期することを意味します。

各コンポーネントは、最初の引数としてインデックス番号（ここでは「1」および「2」）を受け取り、gui

このコンポーネントがチャート内に入る列を示します。

これで、最初の列に「a」、「b」、「c」、2番目の列に1、2、3を入力した場合、メッセージを送信することでテーブルの完全な内容を取得できます。val>

 : (val> (get *Top 'chart 1)) # Retrieve the value of the first chart -> (("a" 1) ("b" 2) ("c" 3))

ところで、もっと便利な関数は chart

 : (val> (chart)) # Retrieve the value of the current chart -> (("a" 1) ("b" 2) ("c" 3))

chart

「現在の」テーブル、つまり現在のフォームで最後に使用された最後のテーブルにアクセスする場合は、上記の構造の代わりに使用できます。

スクロール

スクロールを有効にするには、2つのボタンを追加しましょう。定義済みのクラス+UpButton

と+DnButton

 ######################################################################## (app) (action (html 0 "Scrollable Chart" "@lib.css" NIL (form NIL (gui '(+Chart) 2) (<table> NIL NIL '((NIL "Text") (NIL "Number")) (do 4 (<row> NIL (gui 1 '(+TextField) 20) (gui 2 '(+NumField) 10) ) ) ) (gui '(+UpButton) 1) # Inserted two buttons (gui '(+DnButton) 1) (----) (<submit> "Save") ) ) ) ########################################################################

一度に1行ずつ上下にスクロールします（引数「1」）。

これで、複数行のデータを入力し、下にスクロールしてさらにデータを入力できます。ので、ボタン（スクロールボタンが無効になっているときに、非常に、開始を除く）«保存»を押す必要はありません任意の形式のボタンは任意のアクションを実行する前に、サーバーに変更を送信します。

Get関数とPut関数

前述したように、Chartは表形式のデータを編集するための仮想コンポーネントです。したがって、Chart独自のデータ形式はリストのリストです。各サブリストは1行のデータを表し、各行要素は1つのGUIコンポーネントに対応します。

上記の例では、次のような一連の

  ("a" 1)

並置

  (gui 1 '(+TextField) 20) (gui 2 '(+NumField) 10)

ただし、このような1対1の関係は望ましくないことがよくあります。ユーザーにさまざまな形式の内部データ構造を提示する必要があり、ユーザー入力には内部形式への変換が必要になる場合があります。

これを行うために、Chartは、「列数」引数に加えて、2つの追加の関数引数を受け入れます。最初の関数はGUIコンポーネントに内部表現を配置するために呼び出され、2番目の関数はGUIから内部表現にデータを取得するために呼び出されます。

典型的な例は、データベース内のクライアントを表示するためのテーブルです。内部表現は顧客オブジェクトの1次元のリストですが、「put」は各オブジェクトをリストに展開します（姓、名、電話番号、住所など）。ユーザーがクライアント名を入力すると、「get」はデータベース内の対応するオブジェクトを見つけ、内部表現に保存します。次に、putはGUIにデプロイします。

次に、より簡単な例を見てみましょう。グラフには、数字のリストのみが含まれていますが、GUIには各数字のテキスト形式（ドイツ語）も表示されます。

 ######################################################################## (app) (load "@lib/zahlwort.l") (action (html 0 "Numerals" "@lib.css" NIL (form NIL (gui '(+Init +Chart) (1 5 7) 2 '((N) (list N (zahlwort N))) car ) (<table> NIL NIL '((NIL "Numeral") (NIL "German")) (do 4 (<row> NIL (gui 1 '(+NumField) 9) (gui 2 '(+Lock +TextField) 90) ) ) ) (gui '(+UpButton) 1) (gui '(+DnButton) 1) (----) (<submit> "Save") ) ) ) ########################################################################

「@ Lib / zahlwort.l」はヘルパー関数を定義しますzahlwort

。この関数は、後で「put」関数で役立ちます。zahlwort

番号を取り、その名前をドイツ語で返します。

今、コードを見てください

  (gui '(+Init +Chart) (1 5 7) 2 '((N) (list N (zahlwort N))) car )

私たちは、接頭辞クラスをdobavlaem +Init

に+Chart

、彼に与えたリストの(1 5 7)

初期値チャートのを。次に、「2」（チャートには2つの列があります）の後に、put関数を渡します。

  '((N) (list N (zahlwort N)))

番号を受け取り、その番号とその名前のリスト、およびget関数を返します

  car )

順番にそのようなリストを取り、リストの最初の要素になります番号を返します。

この例では、「get」は「put」関数の逆であることがわかります。チャートが読み取り専用（入力フィールドを含まない（またはロックのみを含む）場合）「Get」は省略できます。

2列目のフィールド

  (gui 2 '(+Lock +TextField) 90) ) ) )

put関数によって作成されたテキストを表示し、ユーザー入力を受け入れるつもりがないため、ブロックされています。

ブラウザでこのフォームを開くと、(1 5 7)

クラス引数に従って、「1 / eins」、「5 /fünf」、「7 / sieben」の3つの事前入力行が表示されます+Init

。最初の列に数字を入力し、ENTERキーまたはボタンの1つを押すと、2番目の列に対応するテキストが表示されます。

GUIクラス

前の章では、我々のようなGUI-クラスの例を、見てきた+TextField

、+NumField

または+Button

、しばしば組み合わせて、接頭クラスで+Lock

、+Init

または+Able

。次に、階層全体をより広く見て、さらに例を試してみます。

抽象クラス+gui

は、すべてのGUIクラスの基盤です。dep関数（「依存関係」）を使用して、クラス階層をライブで確認できます。

guiクラス階層

 : (dep '+gui) +gui +JsField +Button +UpButton +PickButton +DstButton +ClrButton +ChoButton +Choice +GoButton +BubbleButton +DelRowButton +ShowButton +DnButton +Img +field +Checkbox +TextField +FileField +ClassField +numField +NumField +FixField +BlobField +DateField +SymField +UpField +MailField +SexField +AtomField +PwField +ListTextField +LinesField +TelField +TimeField +HttpField +Radio -> +gui

たとえば+DnButton

、サブクラス+Button

とは何であるかを確認し、サブクラスはサブクラス+gui

です。直接検査する+DnButton

 : (dep '+DnButton) +Tiny +Rid +JS +Able +gui +Button +DnButton -> +DnButton

私たちは、その参照+DnButton

から継承し+Tiny

、+Rid

、+Able

と+Button

。実際の定義+DnButton

は「@ lib / form.l」にあります

 (class +DnButton +Tiny +Rid +JS +Able +Button) ...

一般に、「@ lib / form.l」はGUIフレームワークへの包括的なリファレンスであり、慣れるために推奨されます。

入力欄

入力フィールドは、アプリケーションデータの視覚的な表示を提供し、有効にすると、このデータの入力と変更を許可します。

HTMLレベルでは、次の形式を取ることができます。

共通の入力フィールド
テキストエリア
チェックボックス
ドロップダウンリスト（コンボボックス）
パスワード入力フィールド
HTMLリンク
プレーンHTMLテキスト

クラス実装されているチェックボックスを除いてチェックボックスを、これらすべてのHTML生成の表現+TextField

など、そのそれぞれのサブクラス+NumField

、+DateField

等実際の外観（上記のフォームの1つとして）は、その引数に依存し

ます。「通常の」テキストフィールドは既に見ました。それらは、単一の数値引数によって作成されます。この例では、幅が10文字のカスタムフィールドを作成します。

  (gui '(+TextField) 10)

行数に2番目の数値引数が指定されている場合（この場合は「4」）、textareaが表示されます。

  (gui '(+TextField) 10 4)

数値の代わりに値のリストを提供すると、コンボボックスが得られます：

  (gui '(+TextField) '("Value 1" "Value 2" "Value 3"))

これらの引数に加えて、文字列を渡すことができます。この場合、フィールドには次のラベルが付けられます。

  (gui '(+TextField) 10 "Plain") (gui '(+TextField) 10 4 "Text Area") (gui '(+TextField) '("Value 1" "Value 2" "Value 3") "Selection")

最後に、引数なしで、フィールドはプレーンテキスト、HTMLとして表示されます。

  (gui '(+TextField))

これは、主に+Var

およびなどのプレフィックスクラスと組み合わせて+Obj

、これらのフィールドのコンテンツを管理するため、およびHTMLリンクやスクロールテーブル値などの特別な動作のために意味をなします。

数値入力フィールド

+NumField

メソッドで数値を返し、メソッドval>

で数値を取得しset>

ます。ユーザー入力を数値に変換できない場合、エラーメッセージが表示されます。

現在のロケールで定義されているように、大きい数字は千単位の区切り記号で表示されます。

 ######################################################################## (app) (action (html 0 "+NumField" "@lib.css" NIL (form NIL (gui '(+NumField) 10) (gui '(+JS +Button) "Print value" '(msg (val> (: home gui 1))) ) (gui '(+JS +Button) "Set to 123" '(set> (: home gui 1) 123) ) ) ) ) ########################################################################

+FixField

オプションの引数scale-factorが必要で、スケーリングされた固定小数点数を受け入れ/返します。

小数点記号は、現在のロケールによって決まります。

 ######################################################################## (app) (action (html 0 "+FixField" "@lib.css" NIL (form NIL (gui '(+FixField) 3 10) (gui '(+JS +Button) "Print value" '(msg (format (val> (: home gui 1)) 3)) ) (gui '(+JS +Button) "Set to 123.456" '(set> (: home gui 1) 123456) ) ) ) ) ########################################################################

日時

+DateField

date型の値を受け入れて返します。

 ######################################################################## (app) (action (html 0 "+DateField" "@lib.css" NIL (form NIL (gui '(+DateField) 10) (gui '(+JS +Button) "Print value" '(msg (datStr (val> (: home gui 1)))) ) (gui '(+JS +Button) "Set to \"today\"" '(set> (: home gui 1) (date)) ) ) ) ) ########################################################################

日付の表示および入力の形式は、現在のロケールによって異なります（datStrおよびexpDatを参照）。ロケールを変更できます、例えば

 : (locale "DE" "de") -> NIL

ロケールが選択されていない場合、デフォルトの形式はYYYY-MM-DDです。一部の事前定義されたロケールは、DD.MM.YYYY（DE）、YYYY / MM / DD（JP）、DD / MM / YYYY（UK）、またはMM / DD / YYYY（US）パターンを使用します。

ユーザー入力が現在のロケールの日付形式と一致しない場合、エラーがスローされます。

ロケールに関係なく、+DateField

短縮ユーザー入力を拡張しようとしています：

「7」は現在の月の7日目を示します
「031」または「0301」は、現在の年の1月3日を示します
「311」または「3101」は現在の年の1月31日を表します
「0311」は今年の11月3日を与えます
「01023」または「010203」は2003年2月1日に与えられます。
などなど

同様のクラスは+TimeField

です。時間値を取り、返します。

 ######################################################################## (app) (action (html 0 "+TimeField" "@lib.css" NIL (form NIL (gui '(+TimeField) 8) (gui '(+JS +Button) "Print value" '(msg (tim$ (val> (: home gui 1)))) ) (gui '(+JS +Button) "Set to \"now\"" '(set> (: home gui 1) (time)) ) ) ) ) ########################################################################

この例のようにフィールド幅が「8」の場合、時刻は形式で表示されますHH:MM:SS

。別の可能な値-「5」は+TimeField

、値をフォームに表示しますHH:MM

。

ユーザー入力を時間値に変換できない場合、エラーがスローされます。

ユーザーはコロンを省略できます。日付と同様に、不完全な入力が変換されます。「125」は「12:05」に、「124517」は「12:45:17」などに変換されます。

電話番号

電話番号の内部表現：国コード（先行符号なし、プラスまたはゼロ）、ローカル電話番号（スペースで区切るのが理想的）および追加番号（ハイフンで区切るのが理想的）。電話番号の正確な形式はGUIによって強制されるものではありませんが、さらなる処理（データベースの検索など）では、再現性を高めるために通常はフォールドが使用されます。

電話番号を表示する+TelField

には、現在のロケールの国コードの場合は国コードをゼロに置き換えます。外国コードの場合はその前にプラス記号を付けます（telStrを参照）。

ユーザーが入力した番号については、プラス記号または二重ゼロは単に破棄されますが、先行ゼロの1つは現在のロケールの国コードに置き換えられます（expTel ）

 ######################################################################## (app) (locale "DE" "de") (action (html 0 "+TelField" "@lib.css" NIL (form NIL (gui '(+TelField) 20) (gui '(+JS +Button) "Print value" '(msg (val> (: home gui 1))) ) (gui '(+JS +Button) "Set to \"49 1234 5678-0\"" '(set> (: home gui 1) "49 1234 5678-0") ) ) ) ) ########################################################################

チェックボックス

クラス+Checkbox

は単純です。ユーザーの操作は、オンとオフの切り替えに制限されています。これは、論理値（とるNIL

または非NIL

）、及びリターンT

またはNIL

。

 ######################################################################## (app) (action (html 0 "+Checkbox" "@lib.css" NIL (form NIL (gui '(+Checkbox)) (gui '(+JS +Button) "Print value" '(msg (val> (: home gui 1))) ) (gui '(+JS +Button) "On" '(set> (: home gui 1) T) ) (gui '(+JS +Button) "Off" '(set> (: home gui 1) NIL) ) ) ) ) ########################################################################

フィールドプレフィックスクラス

フレームワークの機能のほとんどは、GUIおよびデータベースオブジェクトのクラスプレフィックスの組み合わせの柔軟性によって説明されます。これらを使用すると、継承ツリー内の個々のメソッドを「操作方法」で「オーバーライド」でき、さまざまな方法で組み合わせて任意の動作を実現できます。

技術的には、プレフィックスクラスについて特別なことはありません。これらは普通のクラスです。オブジェクトまたはクラスのスーパークラスリスト内の他のクラスの前に挿入されることを意図しているため、「プレフィックス」と呼ばれます。

通常、それらT

は引数リストから関数へのメソッドの引数を受け入れますgui

（メソッドT

はコンストラクター（翻訳者によるコメント）です）。

初期化

+Init

init>

このコンポーネントのメソッドをオーバーライドします。ページが最初にロードされたときに（GET要求の間に）メッセージがコンポーネントにinit>

送信されます+gui

。+Init

このフィールドの初期値の式を取ります。

  (gui '(+Init +TextField) "This is the initial text" 30)

フィールドの値を自動的に設定する他のクラスは、+Var

（フィールドを変数に+E/R

リンクする）と（フィールドをデータベースにリンクする）です。

+Cue

たとえば、「必須」フィールドで使用して、入力する内容をユーザーに促すことができます。この値が表示されるという事実にもかかわらず、フィールド値が等しくNIL

、メソッドval>

がを返す場合にのみ、引数の値を山括弧NIL

で表示します。

空のフィールドを呼び出して「<ここにテキストを入力>」を表示します。

  (gui '(+Cue +TextField) "Please enter some text here" 30)

有効化および無効化

GUIの重要な機能は、個々のコンポーネントまたはフォーム全体の状況依存の無効化と有効化です。

+Able

クラスのプレフィックスは引数引数を取り、その式がに評価される場合、コンポーネントを無効にしますNIL

。電卓の平方根ボタンでの使用例を見ました。または、クリスマス後にのみオンにするボタンを想像してください

  (gui '(+Able +Button) '(>= (cdr (date (date))) (12 24)) "Close this year" '(endOfYearProcessing) )

またはパスワード入力フィールド。ログイン後に無効になります

  (gui '(+Able +PwField) '(not *Login) 10 "Password")

特別なケースはprefixで+Lock

、これは無条件にコンポーネントを無効にします。彼は議論を受け入れない

  (gui '(+Lock +NumField) 10 "Count")

（「10」と「Count」はの引数です+NumField

）、読み取り専用フィールドを作成します。引数なしで

呼び出すdisable

と、フォーム全体を無効にできNIL

ます。これは、このフォームのすべてのコンポーネントに影響します。上記の例を使用して、クリスマス前に読み取り専用フォームを作成できます

  (form NIL (disable (> (12 24) (cdr (date (date))))) # Disable whole form (gui ..) .. )

ただし、完全にロックされたフォームであっても、フォームのコンテンツに影響を与えないナビゲーション、スクロール、またはその他のアクションに必要なため、特定のコンポーネントを含める必要があります。これは、プレフィックスを指定することで行われます+Rid

。

  (form NIL (disable (> (12 24) (cdr (date (date))))) (gui ..) .. (gui '(+Rid +Button) ..) # Button is enabled despite the disabled form .. )

書式設定

GUIプレフィックスクラスを使用すると、コンポーネントに値を保存および取得する方法を細かく制御できます。などのようなクラスを定義済みの+NumField

か+DateField

、彼らはメソッドをオーバーライドしますset>

かval>

。

+Set

フィールドに値が割り当てられるたびに呼び出される引数関数を受け入れます。すべてのユーザー入力を大文字に変換するには

  (gui '(+Set +TextField) uppc 30)

+Val

はに追加され+Set

ます。フィールド値が取得されるたびに呼び出される関数を取ります。フィールド値の二乗を返すには

  (gui '(+Val +NumField) '((N) (* NN)) 10)

+Fmt

-これは単なる組み合わせで+Set

あり+Val

、2つの機能的な引数を取ります。この例では、テキストは大文字で表示され、小文字で返されます

  (gui '(+Fmt +TextField) uppc lowc 30)

+Map

（など+Fmt

）は双方向ブロードキャストを生成します。線形検索にコンスペアリストを使用します。CARは、CDRの値に内部的にマッピングされるマッピング値を表します。プロセスset>

またはのこのリストに値が見つからない場合、val>

「そのまま」送信されます。

通常+Map

、コンボボックスと組み合わせて使用されます（入力フィールドを参照）。この例では、ユーザーOne、Two、およびThreeを表示しますが、数値1、2、または3を返します

 ######################################################################## (app) (action (html 0 "+Map" "@lib.css" NIL (form NIL (gui '(+Map +TextField) '(("One" . 1) ("Two" . 2) ("Three" . 3)) '("One" "Two" "Three") ) (gui '(+Button) "Print" '(msg (val> (field -1))) ) ) ) ) ########################################################################

副作用

GUIでボタンが押されるたびaction

に、現在の環境で発生した変更（データベースまたはアプリケーションの状態など）は、GUIの対応するフィールドに反映される必要があります。これを行うには、すべてのコンポーネント（サーバー側）にメッセージが送信されますupd>

。次に、各コンポーネントは適切な手段（データベースオブジェクトからの更新、変数からの値のロード、新しい値の計算など）を実行して、その値を更新します。

このメソッドupd>

は主にフレームワーク自体で使用されますが、既存のクラスではプレフィックスclassを使用してオーバーライドできます+Upd

。STDERRで更新された値を取得しましょう

 ######################################################################## (app) (default *Number 0) (action (html 0 "+Upd" "@lib.css" NIL (form NIL (gui '(+Upd +Var +NumField) '(prog (extra) (msg *Number)) '*Number 8 ) (gui '(+JS +Button) "Increment" '(inc '*Number) ) ) ) ) ########################################################################

検証

入力したデータの自動検証を有効にするために、適切なタイミングですべてのコンポーネントにメッセージが送信されますchk>

。値が有効な場合、対応するメソッドはNIL

; を返す必要があります。そうでない場合、エラーを説明する文字列。

多くの組み込みクラスにはmethodがありchk>

ます。このクラス+NumField

は、数値入力+DateField

の正確さ、つまりカレンダーの日付の正確さをチェックします。

オンザフライ検証は、プレフィックスクラスを使用して実行できます+Chk

。次のコードは、9以下の数字のみを受け入れます。式はor

最初に検証をメインクラスに委任し+NumField

、エラーが返されない場合は、現在の値が9より大きい場合にエラー文字列を返します。

 ######################################################################## (app) (action (html 0 "+Chk" "@lib.css" NIL (form NIL (gui '(+Chk +NumField) '(or (extra) (and (> (val> This) 9) "Number too big") ) 12 ) (gui '(+JS +Button) "Print" '(msg (val> (field -1))) ) ) ) ) ########################################################################

より簡単な検証は、組み込みクラスによって行われ+Limit

ます。maxlength

生成されたHTML入力フィールドの属性を制御します。したがって、フィールドで許可されている以上の文字を入力することはできません。

 ######################################################################## (app) (action (html 0 "+Limit" "@lib.css" NIL (form NIL (gui '(+Limit +TextField) 4 8) (gui '(+JS +Button) "Print" '(msg (val> (field -1))) ) ) ) ) ########################################################################

データリンク

一方でset>

とval>

- GUIコンポーネントの値を取得するための正式な方法を、彼らは非常に多くの場合、明示的に使用されていません。代わりに、コンポーネントはLisp内部データ構造に直接関連しています。これは通常、データベース変数またはオブジェクトです。

接頭辞クラス+Var

は変数を受け入れます（関数ディレクトリにデータ型として記述var

-シンボルまたはコンスのペア）。次の例では、グローバル変数を値「abc」で初期化し、フィールド+TextField

がそれを操作できるようにします。 [印刷]ボタンを使用して、現在の値を表示できます。

 ######################################################################## (app) (setq *TextVariable "abc") (action (html 0 "+Var" "@lib.css" NIL (form NIL (gui '(+Var +TextField) '*TextVariable 8) (gui '(+JS +Button) "Print" '(msg *TextVariable) ) ) ) ) ########################################################################

+E/R

エンティティ/関係の指定を受け入れます。これは、CARのリレーション（たとえばnm

、オブジェクトの名前）とCDRの式（通常(: home obj)

、obj

現在のフォームのプロパティに格納されているオブジェクト）とのコンスペアです。

次の孤立した単純な例では、一時データベースを作成し、グローバル変数に保存されているプロパティnr

とnm

オブジェクトにアクセスします*Obj

。

 ######################################################################## (when (app) # On start of session (class +Tst +Entity) # Define data model (rel nr (+Number)) # with a number (rel nm (+String)) # and a string (pool (tmp "db")) # Create temporary DB (setq *Obj # and a single object (new! '(+Tst) 'nr 1 'nm "New Object") ) ) (action (html 0 "+E/R" "@lib.css" NIL (form NIL (gui '(+E/R +NumField) '(nr . *Obj) 8) # Linkage to 'nr' (gui '(+E/R +TextField) '(nm . *Obj) 20) # Linkage to 'nm' (gui '(+JS +Button) "Show" # Show the object '(out 2 (show *Obj)) ) ) ) ) # on standard error ########################################################################

ボタン

ボタンは、コントロールフローで説明されているように、アプリケーションサーバーと（POST要求を介して）対話する唯一の方法です。

基本的に+Button

受け入れます

名前。文字列または画像ファイル名の場合があります
ボタンが無効なときに表示できるオプションの代替名
および実行可能式。

以下は、名前と式を含む最小限のボタンの例です。

  (gui '(+Button) "Label" '(doSomething))

そして、これはボタンの状態に応じて、さまざまな名前の表示です。

  (gui '(+Button) "Enabled" "Disabled" '(doSomething))

プレーンテキストの代わりに画像を表示するには、ラベルの前に記号を付ける必要がありますT

。

  (gui '(+Button) T "img/enabled.png" "img/disabled.png" '(doSomething))

このボタンをクリックすると、処理中に式が実行されますaction

（フォームを参照）。

他のコンポーネントと同様に、ボタンを展開し、プレフィックスクラスと組み合わせることができます。これには、多数の定義済みクラスとそれらの組み合わせを使用できます。

ダイアログボタン

ボタンは、アラートとダイアログボックスを処理するために不可欠です。表のスクロールやその他の副作用などの通常の機能のボタンに加えて、主な機能に加えて通知またはダイアログボックスを閉じることができる特別なボタンがあります。

このようなボタンは通常、サブクラスであり+Close

、そしてそれらのほとんどは簡単にプレハブ型の関数を使用して発生することができcloseButton

、cancelButton

、yesButton

またはnoButton

。アラートとダイアログでいくつかの例をみました。

アクティブなJavaScript

ボタンがクラスから継承されている+JS

（およびブラウザーでJavaScriptが有効になっている）場合、クリックに対するボタンの応答がはるかに速くなる可能性があります。

これは+JS

、通常のPOSTの代わりに、最初にすべてのGUIコンポーネントのコンテンツのみをXMLHttpRequestを介してサーバーに送信し、それに応じて更新された値を取得しようとするためです。これにより、ページ全体の再読み込みとレンダリングによるちらつきが回避され、はるかに高速になります。また、ブラウザウィンドウよりも大きい場合にページの上部にスクロールすることもありません。これは、テーブルをスクロールするときに特に顕著です。

これが失敗した場合のみ、フォームは通常のPOSTリクエストで送信されます。

したがって、プレフィックスを使用する意味はありません+JS

HTMLコードを変更するボタンの場合は、ダイアログボックスを開くか、別のページに移動します。このような場合、XMLHttpRequestが最初に呼び出されるため、全体的なパフォーマンスはさらに低下します。

ブラウザでJavaScriptが無効になっている場合、XMLHttpRequestはまったく使用されません。フォームは完全に使用可能で、まったく同じ機能を備えていますが、少し遅くなりますが、それほどスムーズではありません。

最低限必要な申請

PicoLispディストリビューションには、最小限の完全なアプリケーションがapp /ディレクトリに含まれています。このアプリケーションは、このドキュメントで説明されている多くのメソッドを実装し、簡単に変更および拡張できるという意味で典型的です。実際には、独自のアプリケーションを開発するためのテンプレートとして使用します。

これは、顧客/仕入先、商品（ポジション）、注文、その他のデータを含む一種の簡易ERPシステムです。注文入力フォームは、顧客と製品の選択、価格、在庫、および総コストの計算のライブ更新を実行し、その場でPDFドキュメントを作成します。アクセスの微調整は、ユーザー、ロール、および許可を通じて行われます。アプリケーションは6つの言語（英語、スペイン語、ドイツ語、ノルウェー語、ロシア語、日本語）にローカライズされており、初期データと2つのサンプルレポートがあります。

はじめに

グローバルインストールの場合（インストールを参照）、プログラムファイルがインストールされている場所へのシンボリックリンクを作成します。これは、アプリケーションが現在の作業ディレクトリ（実行時のデータベースおよびその他のデータ用）への読み取りおよび書き込みアクセスを必要とするために必要です。

 $ ln -s /usr/share/picolisp/app

いつものように、デバッグモードでアプリケーションを実行できます。

 $ pil app/main.l -main -go +

または実動モード（非デバッグ）

 $ pil app/main.l -main -go -wait

そして、ブラウザで「http：// localhost：8080」に移動します。ユーザー「admin」、パスワード「admin」としてログインできます。サンプルデータには他の複数のユーザーが含まれていますが、その役割は権限により制限されています。

別の可能性は、app.7fach.de Webサイトでこのアプリケーションのオンラインバージョンを試すことです。

ローカリゼーション

ログインする前または後に、別の言語を選択して「変更」ボタンをクリックできます。これは、数値形式、日付、電話番号と同様に、すべてのGUIコンポーネント（データベースのテキストには影響しません）に影響します。

左側のナビゲーションメニューには、「ホーム」と「ログアウト」の2つの項目と、「データ」、「レポート」、「システム」の3つのサブメニューが表示されます。

「ホーム」と「ログアウト」の両方で、最初のログインフォームに戻ります。別のユーザーに切り替える場合（たとえば、別の役割の場合）、ブラウザーを閉じる前に「ログアウト」を使用し、さらに重要なこととしてログアウトして、サーバーのブロックを防ぎます。

「データ」サブメニューでは、注文、商品、顧客、サプライヤなどのアプリケーションデータとメンテナンスにアクセスできます。 [レポート]サブメニューには、在庫と販売に関する2つの簡単なレポートが含まれています。「システム」サブメニューでは、ユーザー権限とその役割を管理できます。

各サブメニューは個別に閉じたり開いたりできます。複数のサブメニューが同時に開いているため、アプリケーションのさまざまな部分をすばやく切り替えることができます。

アクティブなメニュー項目は、異なるリストマーカースタイルで示されます。

オブジェクト選択

[データ]または[システム]サブメニューの各アイテムは、このエンティティクラスの検索ダイアログボックスを開きます。検索テンプレートを指定し、[検索]ボタン（または単にENTER）をクリックして、結果のリストをスクロールできます。

「ロール」および「ユーザー」では、エンティティに対して単純なダイアログが提供されますが（名前による検索のみ）、他のタイプのエンティティはさまざまな基準で見つけることができます。これらの場合、リセットボタンはダイアログボックス全体の内容を消去します。右下のボタン「新規」を使用して、新しいオブジェクトを作成できます。

いずれの場合でも、最初の列には「@」リンク（このオブジェクトに移動する）または「@」ボタン（このオブジェクトへのリンクを現在のフォームに挿入する）が含まれます。

デフォルトでは、検索は、属性値が以上のすべてのデータベースオブジェクトを返します検索条件。比較は、数値の場合は算術的に、テキストの場合はアルファベット順に（大文字と小文字が区別されます！）実行されます。これは、「Customer / Supplier」ダイアログの「City」フィールドに「Free」と入力すると、値「Freetown」が検索条件に一致することを意味します。一方、「無料」または「町」と入力しても「無料町」は見つかりません。

ただし、一部の検索フィールドは、アプリケーションに応じて異なる動作を示します。

個人、会社、または製品の名前は、わずかなスペルの名前（「ミラー」ではなく「ミューラー」）またはサブストリング（「オーク」は「セブンオークリミテッド」に一致）に一致する寛容な検索を許可します。
検索フィールドには、下限ではなく上限が含まれる場合があります。これにより、検索条件以下の属性値を持つデータベースオブジェクトが検索されます。これは、たとえば、[注文]ダイアログボックスで、最新の注文から番号または日付に従って注文のリストを表示する場合に便利です。

スクロールボタンを使用すると、制限なしで結果のリストをスクロールできます。リンクをクリックすると、対応するオブジェクトが表示されます。目的の列を選択するように注意してください。一部のダイアログ（「アイテム」および「注文」）は、関連するエンティティ（「サプライヤー」など）へのリンクも提供します。

編集中

通常、データベースオブジェクトは、エンティティクラスによって決定される独自の個別の形式で表示されます。

基本レイアウトはすべてのクラスで一貫している必要があります。見出し（通常はメニュー項目と一致）の下にオブジェクトID（名前、番号など）があり、次に左側の[編集]ボタンと[削除]ボタンがある行「選択」と右側の2つのナビゲーションリンク。

フォームは最初は読み取り専用モードで表示されます。これは、複数のユーザーが同時にオブジェクトを変更しないようにするために必要です（以前のPicoLisp Javaフレームワークとは異なり、これは問題ではありませんでした。すべての変更は他のユーザーのGUIにすぐに反映されていたためです）。

したがって、オブジェクトを変更する場合は、[編集]ボタンをクリックして排他的にアクセスする必要があります。フォームのロックが解除され、[編集]ボタンが[完了]に変わります。別のユーザーがすでにこのオブジェクトをブロックしている場合、名前とプロセスIDを含むメッセージが表示されます。

例外は、「新規」で作成されたばかりのオブジェクトです。これらは自動的に予約され、「編集」ボタンは「完了」と表示されます。

[削除]ボタンをクリックすると、確認を求めるダイアログが表示されます。オブジェクトが本当に削除された場合、このボタンは「復元」に変わり、オブジェクトを復元できます。オブジェクトは、他のオブジェクトから参照されている間はデータベースから完全に削除されることはありません。「削除された」オブジェクトが表示されるとき、その識別子は角括弧で表示されます。

[選択]ボタンは、（繰り返し）このエンティティクラスの検索ダイアログボックスを表示します。検索条件は、検索ダイアログの呼び出し間で保存されます。

左右を指すナビゲーションリンクも同様の目的を果たします。これらを使用すると、特定のクラスのすべてのオブジェクトをインデックス順にステップスルーできます。

その他のボタンは、性質に応じて、通常フォームの下部に配置されます。右下には、常に別の「編集」/「完了」ボタンがあります。スクロール

の章で述べたように、フォーム上のボタンは、基になるデータモデルへの変更を保存します。ただし、特別な場合として、「完了」ボタンはオブジェクトを解放し、編集に戻ります。さらに、オブジェクトリンク（鉛筆アイコン）、右上のナビゲーションリンク、または検索ダイアログボックスのリンクをクリックすると、別のオブジェクトが表示されるとすぐに編集モードが中断されます。

ボタンとリンク

HTTPベースのアプリケーションサーバーと対話する唯一の方法は、HTMLリンクまたは送信ボタンをクリックすることです（制御フローも参照）。現在のフォームで入力または変更されたデータに対するこのようなクリックのさまざまな効果を理解することが重要です。

リンクをクリックすることで、ページを離れるか再読み込みします。変更は破棄されます。
ボタンをクリックすることにより、変更を適用し、適切なアクションを実行します。

このため、構造のレイアウトではリンクとボタンを明確に区別する必要があります。他の場所で画像がリンクに使用されている場合、画像の形のボタンはお勧めできません。標準のボタンが推奨されます。これらは通常、ブラウザによって明確な3次元形式で表示されます。

ブラウザでJavaScriptが有効になっている場合、変更は自動的にサーバーに送信されることに注意してください。

ボタンのオンまたはオフ状態は、アプリケーションロジックの不可欠な部分です。これは、適切なスタイルでユーザーに示される必要があります。

データモデル

このガジェットのデータモデルは、6つのエンティティクラスのみで構成されています（「app / er.l」の冒頭の図E / Rを参照）。

###エンティティ/関係###
 ＃
＃nr nm nr nm nm
＃|  |  |  |  |
＃+-* ---- *-+ +-* ---- *-+ +-* ----- +
＃|  | sup |  |  |  |
# str --* CuSu O-----------------* Item *-- inv | Role @-- perm
# |  |  |  |  |  |
# +-*-*--O-+ +----O---+ +----@---+
# |  |  |  |  | usr
# nm tel -+ |  |  |  |
# |  |  |  | itm | role
# +-*-----+ |  | +-------+ +---*---+ +----*---+
# |  |  |  |  |  | ord |  |  |  |
# | Sal +---+ +---* Ord @--------* Pos | nm --* User *-- pw
# |  | cus |  | pos |  |  |  |
# +-*---*-+ +-*---*-+ +-*---*-+ +--------+
# |  |  |  |  |  |
# hi sex nr dat pr cnt

— +CuSu

(/), +Item

() +Ord

().
+Pos

.
+Role

+User

.

クラス+Role

とは+User

「@ lib / adm.l」で定義されています。+Role

名前、権限のリスト、およびこのロールに割り当てられたユーザーのリストがあります。+User

名前、パスワード、役割があります。

「app / er.l」では、クラスが+Role

展開されてそのメソッドが定義されますurl>

。クラスにそのようなメソッドがあるオブジェクトは、それ自体をGUIにマップできます。この場合、*ID

このオブジェクトへのHTMLリンクがアクティブ化されるたびに、ファイル「app / role.l」がロードされます（グローバル変数がそれを指す）。

クラス+User

も拡張されています。ログインに加えて、氏名、電子メール、および電話番号が追加されます。そして、もちろん、ユビキタスな方法url>

です。

アプリケーションロジックは注文を中心に展開します。注文には番号、日付、顧客（コピー+CuSu

）および位置のリスト（オブジェクト+Pos

）。メソッドsum>

は、この注文の合計値を計算します。

各アイテムには、オブジェクト+Item

（製品）、価格、数量へのリンクがあります。ラインアイテムの価格は、対応する製品のデフォルト価格を上書きします。

各製品には、番号、説明、サプライヤー（コピーも+CuSu

）、在庫（最後の在庫からのアイテムの数）、および価格があります。この方法でcnt>

は、この製品の現在の在庫が、在庫と販売された商品の数量との差として計算されます。

関数呼び出しdbs

最後に、「app / er.l」はデータベースの物理構造を設定します。提供された各リストにはCARの番号があり、対応するデータベースファイルのブロックサイズを64の累乗（64 << N）で決定します。CDRは、特定のクラスのインスタンス（要素がクラスシンボルの場合）またはツリーノード（要素がクラスシンボルとプロパティ名のリストの場合）をこのファイルに配置することを決定します。これにより、データベース構造を最適化できます。

 # Database sizes (dbs (3 +Role +User +Sal) # 512 Prevalent objects (0 +Pos) # A:64 Tiny objects (1 +Item +Ord) # B:128 Small objects (2 +CuSu) # C:256 Normal objects (2 (+Role nm) (+User nm) (+Sal nm)) # D:256 Small indexes (4 (+CuSu nr plz tel mob)) # E:1024 Normal indexes (4 (+CuSu nm)) # F:1024 (4 (+CuSu ort)) # G:1024 (4 (+Item nr sup pr)) # H:1024 (4 (+Item nm)) # I:1024 (4 (+Ord nr dat cus)) # J:1024 (4 (+Pos itm)) ) # K:1024

使用する

アプリケーションに接続した後（「はじめに」を参照）、「実際の」作業を試みることができます。[データ]メニュー（ナビゲーションを参照）を使用して、顧客、サプライヤー、製品、注文を作成または編集し、[レポート]メニューから簡単なレポートを作成できます。

顧客/サプライヤー

「App / cusu.l」

クライアント/ベンダー検索ダイアログボックス（choCuSu

「app / gui.l」内）は、多くの検索条件をサポートしています。データベースに多数のクライアントが含まれている場合に必要になり、zip、電話番号のプレフィックスなどでフィルタリングできます。

メインレイアウト（編集を参照）に加えて、フォームは4つの個別のタブに分割されています。フォームをいくつかのタブに分割すると、トラフィックを減らして、GUIの応答を高速化できます。この場合、4つのタブが可能ですが、デモンストレーションの目的には非常に適しており、拡張の余地があります。

タブがHTMLリンクとして実装されているため、いずれかのタブでデータが変更された場合、別のタブを選択する前に「完了」ボタンを押す必要があることに注意してください（ボタンとリンクを参照）。

新しい顧客またはサプライヤの場合、次に利用可能な番号が自動的に割り当てられます。別の番号を入力できますが、既存の番号を使用しようとするとエラーが発生します。「名前」フィールドは必須です。

[連絡先]タブの電話番号とFAX番号は、ロケールに応じて正しい形式で入力する必要があります（電話番号を参照）。

[メモ]タブには1つのテキスト領域が含まれています。Blobオブジェクトに格納されているため、大きなテキストチャンクに使用できます。

製品

「App / item.l」

製品には、一意の番号と必須の「説明」フィールドもあります。

サプライヤーを割り当てるには、「+」ボタンをクリックします。顧客/サプライヤー検索ダイアログボックスが表示されます。最初の列の「@」ボタンをクリックして、目的のサプライヤーを選択できます。さらに、サプライヤ名の正確なスペルを知っていることが確実な場合は、テキストボックスに直接入力することもできます。

[検索]ダイアログボックスで、たとえばリンクをクリックして、可能なサプライヤを探索し、ブラウザの[戻る]ボタンをクリックして検索ウィンドウに戻ることもできます。別のオブジェクトに切り替えたため、「編集」モードはもちろんキャンセルされます（これは編集の最後の部分で説明されています）。

在庫-現在在庫のある商品の量を入力できます。次のフィールドには、特定の金額が販売された後の残りの商品の金額が自動的に反映されます（つまり、注文商品にリンクがあります）。この値は手動で変更できません。

現在のロケールに応じて、価格は小数点区切り文字で入力する必要があります。小数点区切り文字の後に2文字でフォーマットされます。

メモフィールドは、上記のクライアント/サプライヤと同様に、データベースのblobオブジェクトに保存されます。

最後に、JPEGイメージをこの要素のblobに保存できます。ファイル選択ダイアログを使用してファイルを選択し、「インストール」ボタンをクリックします。画像がページの下部に表示され、「インストール」ボタンが「削除」に変わり、画像を削除できます。

ご注文

「App / ord.l」

注文は番号と日付で識別されます。

番号は一意である必要があります。オーダーの作成時に割り当てられ、変更できません。

新しく作成された注文の日付は今日に設定されますが、手動で変更できます。日付の形式はロケールによって異なります。これらはデフォルトでYYYY-MM-DD（ISO）、ドイツ語ではDD.MM.YYYY、日本語ではYYYY / MM / DDです。timeとdateで説明されているように、このフィールドでは省略入力が可能です。たとえば、日を入力するだけで現在の月の完全な日付を取得できます。

この注文に顧客を割り当てるには、「+」ボタンをクリックします。ダイアログボックスには、検索クライアント/プロバイダを表示され、あなたが希望顧客のボタンを選択することができ、「@」の最初の列（またはテキストボックスに直接名前を入力します）で、ために上記のような商品。

次に、注文項目を入力します。「+」ボタンを使用して製品を選択します。「価格」フィールドにはデフォルトの価格がありますが、手動で変更できます。次に、数量を入力してボタンを押します（通常、次の項目またはスクロールボタンを選択するには「+」ボタン）。フォームは自動的に再集計され、ポジションと注文全体の総費用が表示されます。

もちろん、上記で推奨されている「+」またはスクロールボタンの代わりに、「完了」ボタンを押して変更を保存することもできます。ただし、ポジションの入力を続けたい場合は、これによりボタンがもう一度押されます（現在は「編集」）。

各アイテムの右側にある「x」ボタンを押すと、確認なしでこのアイテムが削除されます。注意して使用する必要があります！

「^」ボタンは、現在の行を上位の行と交換します。したがって、テーブル内のすべての要素を目的の位置に上げることで、それらの位置を変更するために使用できます。

PDF-Printボタンは、この注文のPDFドキュメントを作成して表示します。ブラウザは、ダウンロードしたPDFドキュメントを適切なビューアで表示するように構成する必要があります。ポストスクリプトを作成するメソッドのソースは「app / lib.l」にあります。位置の数に応じて、1つ以上のA4ページを生成します。

報告書

「App / inventory.lおよび「app / sales.l」

2つのレポート（「Inventory」および「Sales」）には、いくつかの検索フィールドと「表示」ボタンが含まれています。

検索条件が指定されていない場合、「表示」ボタンはデータベース全体の対応する部分のリストを表示します。これには時間がかかり、データベースが大きい場合はブラウザに大きな負荷がかかる可能性があります。

そのため、通常は、番号の範囲、説明テンプレート、および/または在庫レポートのサプライヤ、注文の日付範囲および/または販売レポートの顧客を指定することにより、選択を制限します。対応する値が省略された場合、この基準によるオブジェクトはフィルタリングされません。

各レポートの最後に、「CSV」リンクが表示されます。レポートで生成されたファイルをダウンロードします。

PicoLispでのWebアプリケーション開発

PicoLispでのWebアプリケーション開発

静的ページ

ハローワールド

アプリケーションサーバーの起動

どのように機能しますか？

URL構文

安全性

ファイル.pw

html (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); 関数

CSS属性

タグ機能

シンプルなタグ

リスト

テーブル

メニューとタブ（タブ）

インタラクティブフォーム

セッション

フォーム（アクションフォーム）

機能 gui (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

制御フロー

URL切り替え

アラートとダイアログ

計算機の例

テーブル（チャート）

スクロール

Get関数とPut関数

GUIクラス

入力欄

数値入力フィールド

日時

電話番号

チェックボックス

フィールドプレフィックスクラス

初期化

有効化および無効化

書式設定

副作用

検証

データリンク

ボタン

ダイアログボタン

アクティブなJavaScript

最低限必要な申請

はじめに

ローカリゼーション

ナビゲーション

オブジェクト選択

編集中

ボタンとリンク

データモデル

使用する

顧客/サプライヤー

製品

ご注文

報告書

More articles:

`html`

関数

機能 `gui`