/[snow]/trunk/docs/tutorial.html
ViewVC logotype

Contents of /trunk/docs/tutorial.html

Parent Directory Parent Directory | Revision Log Revision Log


Revision 26 - (hide annotations)
Thu Nov 26 20:25:59 2009 UTC (4 years, 4 months ago) by astalla
File MIME type: text/html
File size: 23426 byte(s)
Updated tutorial
Fixed progressbar
1 astalla 2 <html>
2     <head>
3     <title>Snow Tutorial</title>
4     <link rel="stylesheet" type="text/css" href="style.css">
5     </head>
6     <body>
7     <h1>Snow Tutorial</h1>
8 astalla 26 <h4>Last modified 2009-11-26</h4>
9 astalla 2 <ol>
10     <li><a href="#ch001">Getting and Installing Snow</a></li>
11 astalla 26 <li><a href="#building">Building Snow from source (optional)</a></li>
12 astalla 2 <li><a href="#repl">The Snow REPL</a></li>
13     <li><a href="#basic-concepts">Basic Concepts</a></li>
14     <li><a href="#layout">Layout</a></li>
15     <li><a href="#events">Event handling</a></li>
16     <li><a href="#embedding">Embedding Snow</a></li>
17 astalla 11 <li><a href="#ch008">Data Binding</a></li>
18 astalla 2 <li><a href="#more">What's more?</a></li>
19     </ol>
20     <a name="ch001" /><h3>Getting and Installing Snow</h3>
21 astalla 11 You can download the latest Snow binary distribution from <a href="http://common-lisp.net/projects/snow/">http://common-lisp.net/projects/snow/</a>. It contains Snow and all its dependencies in a single Zip file. Since Snow can be used both in Lisp and Java applications, procedures for installing it can vary in each of the two cases.
22 astalla 2 <ul>
23     <li><h4>Java applications:</h4>simply make sure snow.jar and all the jars in the lib/ folder are in the classpath of your application. Snow uses JSR-223 and is built with Java 1.6, so that's the minimum Java version you can use. However, it should be possible to run Snow on 1.5 as well, but you'll need to recompile both Snow and ABCL from sources with a JSR-223 implementation in your classpath. See the <a href="#embedding">Embedding Snow</a> section below for details about using Snow inside your Java application.</li>
24     <li><h4>Lisp applications:</h4>
25     <ul>
26     <li>Snow come prepackaged with ABCL 0.16, and it wraps the ABCL launcher with its own, that makes sure to load Snow prior to your application. So you can just follow the procedure for Java applications above, and use the snow.Snow class in place of org.armedbear.lisp.Main as the main Java class to launch, e.g. via a shell script. The only difference is that, when launched with no command-line switches, Snow will pop up a GUI repl. You can pass a dummy --no-gui-repl switch to inhibit that. If you are new to Java, the classpath is a list of search places that the JVM uses to resolve classes (think asdf:*central-registry* if you will). It can be set with the environment variable CLASSPATH or with the -classpath command line switch to the java bytecode interpreter (the 'java' command). It is a list of directories and/or .jar files, separated by a platform-dependent character (':' on Linux, ';' on Windows, I don't know about Macs). So for example, you can launch Snow on Linux with '<code>java -classpath snow.jar:lib/abcl.jar:lib/binding-2.0.6.jar:lib/commons-logging.jar:lib/miglayout-3.6.2.jar snow.Snow</code>'.</li>
27     <li>Also, Snow has its own version of Cells built in. It is a random, but fairly recent version from CVS, with some fixes to make it run on ABCL. I'm looking forward to having those fixes merged with trunk, so you'll be able to freely update Cells independently.</li>
28     <li>Last but not least, Snow is built with ASDF, so if you are brave enough you can extract the contents of snow.jar (it is a regular zip file), it will create a directory tree full of .lisp source files, fasls and compiled Java classes (.class files). You will then be able to load Snow with ASDF using your own version of ABCL and/or Cells, provided you still meet the requirements about the classpath for Java applications. (there are two .asd files, one in snow/ and one in snow/swing).</li>
29     </ul>
30     </li>
31     </ul>
32     Currently Snow, when run from the jar, requires a temporary directory to load itself; make sure your application has write permissions on your OS's tmp directory. Snow should automatically clear its temporary files when the application exits.
33 astalla 26 <a name="building" /><h3>Building Snow from source (optional)</h3>
34     Snow is built using the Ant program (a Java make-like tool). You can get it from &lt;<a href="http://ant.apache.org/">http://ant.apache.org/</a>&gt;. To obtain the source code for Snow, either download a source release from the <a href="http://common-lisp.net/project/snow">project page</a> or, if you want the latest &amp; greatest stuff, follow the instructions at &lt;<a href="http://common-lisp.net/faq.shtml">http://common-lisp.net/faq.shtml</a>&gt; to checkout it from the SVN repository. Once you have the source in a given directory, cd to that directory and issue the command <code>ant snow.jar</code> to build Snow. <code>ant snow.clean</code> removes all compiled files.
35 astalla 2 <a name="repl" /><h3>The Snow REPL</h3>
36     Being based on Lisp, Snow offers a REPL (read-eval-print-loop), an interactive prompt that allows you to evaluate arbitrary pieces of code. If you launch Snow through its main class (snow.Snow) with no command-line arguments, it will show a window containing the REPL (which is nothing more than a wrapped ABCL REPL). It should print
37     <br /><br />
38     <code>SNOW-USER(1): </code>
39     <br /><br />
40     SNOW-USER is the active package (namespace), (1) is the line number of the REPL. Now, the obligatory hello world:
41     <pre class="paste-area">
42     (frame (<span class="lisp-keyword">:title</span> <span class="lisp-string">"Snow Example"</span>)
43     (button <span class="lisp-keyword">:text</span> <span class="lisp-string">"Hello, world!"</span>
44     <span class="lisp-keyword">:on-action</span> (<span class="lisp-special-op">lambda</span> (event)
45     (<span class="lisp-cl-function">print</span> <span class="lisp-string">"Hello, world!"</span>)))
46     (pack self)
47     (show self))
48     </pre>
49     Evaluating this will show a window containing a single button which, when pressed, will output "Hello, world!". The terminology should be familiar to Swing developers. Actually, the output from the button will NOT go to the REPL, but to the OS console instead; I'll explain this later, please ignore it for now. <br />
50     The REPL is great for experimenting: the code you input is immediately executed by an interpreter. You can also compile your code, either on the fly in the REPL or from a file; this is outside the scope of this tutorial, but you can find more information in any decent tutorial or book about Common Lisp (I suggest the free ebook Practical Common Lisp by Peter Seibel, available at <a href="http://gigamonkeys.com/book/">http://gigamonkeys.com/book/</a>). However, experiments sometimes go wrong; if you make a mistake - for example, evaluating an unexisting function - you will end in the debugger. Try typing the function call
51     <pre class="paste-area">
52     (oh-no!)
53     </pre>
54     - you should see something like this:
55     <br /><br />
56     <img src="images/oh-no.png" alt="Debugger window"/>
57     <br /><br />
58     The <i>restarts</i> are the actions the system can perform to recover the situation; this is an important feature of Common Lisp, worth studying by itself. You'll always be able to choose the TOP-LEVEL restart, which will bring you back to the REPL.<br />
59     You can quit the REPL (and terminate the application) any time by closing the REPL window, or by typing (quit)<sup><a href="#notes_1">1</a></sup>.
60     <a name="basic-concepts" /><h3>Basic Concepts</h3>
61     As you can see from the previous examples, Snow code consists of a tree of widgets; nesting in the code means nesting in the widget hierarchy, for example:
62     <pre class="paste-area">
63     (frame (:visible-p t)
64     (panel (:layout "wrap")
65     (label <span class="lisp-keyword">:text</span> <span class="lisp-string">"1"</span>)
66     (label <span class="lisp-keyword">:text</span> <span class="lisp-string">"2"</span>)
67     (label <span class="lisp-keyword">:text</span> <span class="lisp-string">"3"</span>))
68     (panel ()
69     (label <span class="lisp-keyword">:text</span> <span class="lisp-string">"4"</span>)
70     (label <span class="lisp-keyword">:text</span> <span class="lisp-string">"5"</span>)
71     (label <span class="lisp-keyword">:text</span> <span class="lisp-string">"6"</span>))
72     (pack self))
73     </pre>
74     Creates a frame with two children, both panels with 3 children each - one has labels from 1 to 3, the other from 4 to 6.<br />
75     You can set the <i>properties</i> of the widgets using keyword-value pairs like <code>:visible-p t</code> which means <code>setVisible(true)</code> (-p is a suffix traditionally used in Lisp to name predicates, T is the canonical true value). Containers must have their properties set in a list after the widget name -
76     <pre class="paste-area">(panel (<i>...here go the properties...</i>) ...here goes the body...)</pre>
77     - the list serves to separate them from the body. Non-containers have no body and thus their properties do not require to be wrapped in a list: <pre class="paste-area">(label <i>...here go the properties...</i>)</pre>
78     <h4>How does this work?</h4>
79     The Snow API consists of a set of macros that can be used to declaratively construct a tree of widgets. These macros are designed in such a way to make the tree structure of Lisp source code closely mirror the GUI widget tree structure (in the general case). The macros expand to code that uses a functional interface to create widgets, however it is not recommended to use this functional API directly since it depends on the context established by the macros.
80    
81     The aspects of such context of interest to the user are:
82    
83     <h4>lexical variable <code>self</code></h4>
84    
85     Holds the current widget being processed. Example:
86     <pre class="paste-area">
87     (frame ()
88     (print self))
89     </pre>
90     will output something like:
91     <pre class="paste-area">
92     #&lt;javax.swing.JFrame ...frame.toString()... {identityHashCode}&gt;
93     </pre>
94     <h4>special variable <code>*parent*</code></h4>
95     Holds the current parent widget. When *parent* is non-nil, any widget created through a macro will be automatically added to the container referenced by *parent*. All Snow widget macros process the forms in their body in the following way:
96     <ul>
97     <li>if the form is a list, its car is a symbol, and this symbol has a property named widget-p, then the form is wrapped in a <code>(let ((*parent* self)) ...)</code> i.e., it is evaluated in a dynamic context where the parent is the widget created by the macro.</li>
98     <li>else, the form is wrapped in a <code>(let ((*parent* nil)) ...)</code>, i.e., it is evaluated in a dynamic context where no parent widget is defined (and thus widgets created by the form are not added to any widget).</li>
99     </ul>
100    
101     These rules make the nesting of Snow widget macros work in an intuitive way:
102     <ul>
103     <li>a widget defined at the top level in the body of another (container) widget w will be added to w. Example: <code>(frame () (panel ()))</code> will result in a frame with a panel child.</li>
104     <li>widgets appearing in code in the body of another widgets, but not at top level, will not be added. Example: <code>(frame () (let ((p (panel ())))))</code> will result in a frame with no children, and will create an &quot;orphan&quot; panel.</li>
105     </ul>
106     Snow provides operators to alter this default behavior:
107     <ul>
108     <li><code>(dont-add form)</code> will always execute form in a dynamic context in which no parent widget is defined.</li>
109     <li><code>(add-child container child &optional layout-constraints)</code> will force child to be added to container, even if container is not the value of *parent*.</li>
110     </ul>
111    
112     <h4>widget id</h4>
113    
114     Additionally, all container widget macros support a pseudo-property called <code><b>id</b></code> which can be used to bind a lexical variable of choice to the widget locally to the macro body. Example:
115     <pre class="paste-area">
116     (frame (:id foo)
117     (print foo))
118     </pre>
119     will output something like:
120     <pre class="paste-area">
121     #&lt;javax.swing.JFrame ...frame.toString()... {identityHashCode}&gt;
122     </pre>
123     <a name="layout" /><h3>Layout</h3>
124     By default, Snow uses <a href="www.miglayout.com/">MiG Layout</a> as the layout manager to organize components inside a container. When you create a component that will be automatically added to <code>*parent*</code> by Snow, you can use the pseudo-property <code>:layout</code> to specify (as a string) additional information for the layout manager. If you use <code>add-child</code>, instead, you have to pass this string to <code>add-child</code> as its last optional parameter (I hope I can fix this inconsistency). Here's a quick cheat sheet of the constraints you can use with MiG Layout: <a href="http://www.migcalendar.com/miglayout/cheatsheet.html">http://www.migcalendar.com/miglayout/cheatsheet.html</a> (look for &quot;Component Constraints&quot;).<br />
125     You can use another layout instead of MiG: to do so, use the <code>layout-manager</code> property of the container. The values you can pass are:
126     <ul>
127     <li>a keyword (supported ones are <code>:default</code>, <code>:mig</code>, <code>:border</code>, <code>:box</code>) to select the layout manager by name; the names refer to layout managers available in Swing;</li>
128     <li>a list whose car is one of the symbols above, and whose cdr is a list of the arguments passed to the layout manager (e.g. <code>(list :box :y)</code> to have components be laid out in a vertical stack);</li>
129     <li>a Java object which can be used by Swing as a layout manager (e.g. <code>(new "java.awt.FlowLayout")</code>).</li>
130     </ul>
131     <a name="events" /><h3>Event handling</h3>
132     Certain widgets can trigger events on certain types of user actions. These events can be handled by user code. Event-handling callbacks can be set using properties named <code>:on-<i>event-name</i></code> (for example, <code>:on-action</code> for handling clicks on buttons, or ActionEvents in Swing/AWT parlance). Currently extremely few events are supported! I'll add new ones in future releases.<br />
133     A callback for an event is either a Lisp function with a single argument (the event object), or an appropriate native Java event handler for the event (e.g., an instance of <code>java.awt.ActionListener</code>).<br />
134     Events happen on a dedicated thread (in Swing's terminology, the EDT - Event Dispatching Thread). That's why, in the Hello World example, the string got printed to the console and not to the REPL! In fact, the REPL has its own dynamic, thread-local context, which rebinds the value of <code>*terminal-io*</code> to a stream that reads and writes on the REPL; the event, instead, is run in another thread, which doesn't have access to this context, and thus uses the global value of <code>*terminal-io*</code>. If you want to capture the value of a dynamic variable from the thread that creates the event handler, you have to explicitly do so like this:
135     <pre class="paste-area">
136     (button :on-action (let ((tmp *some-thread-local-variable*))
137     (lambda (event)
138     (let ((*some-thread-local-variable* tmp))
139     ...do stuff...))))
140     </pre>
141    
142     <a name="embedding" /><h3>Embedding Snow</h3>
143     Snow can easily be embedded in a Java application by using JSR-223. The snow.Snow class has some static methods that can be used to load some Snow source code from a .lisp file (or classpath resource), or to obtain an instance of <code>javax.script.ScriptEngine</code> which you can use for more advanced stuff (e.g. compiling Lisp code, or calling specific Lisp functions). When embedding Snow to define (part of) the application's GUI, it is recommended that you modularize the Snow code in functions, which you'll call from Java to obtain the GUI components:
144     <h4><code>file.lisp</code></h4>
145     <pre class="paste-area">
146 astalla 19 (in-package :snow-user)
147    
148 astalla 2 (defun create-main-frame (&rest args)
149     ...snow code...)
150     </pre>
151     <h4><code>MyClass.java</code></h4>
152     <pre class="paste-area">
153     ...
154     Snow.evalResource(new FileReader("file.lisp"));
155     JFrame mainFrame = (JFrame) Snow.getInvocable().invokeFunction("create-main-frame", args);
156     ...
157     </pre>
158 astalla 11 <a name="ch008" /><h3>Data Binding</h3>
159 astalla 14 Keeping the GUI state in sync with the application objects state is generally tedious and error-prone. <i>Data Binding</i> is the process of automating the synchronization of state between two objects, in this case a GUI component and an application-level object. Snow supports several kinds of data binding, and it uses two libraries to do so: <a href="https://binding.dev.java.net/">JGoodies Binding</a> on the Java side and <a href="http://common-lisp.net/projects/cells/">Cells</a> on the Lisp side.
160 astalla 11 <h4>General concepts</h4>
161     There are two general ways to <i>bind</i> or <i>connect</i> a widget to some object's property: one is by using the <code>:binding</code> property of the widget, letting the framework choose which property of the widget to bind, e.g. the text property for a text field; for example:
162     <pre class="paste-area">
163     (text-field :binding (make-simple-data-binding x))
164     </pre>
165     the other is to provide as the value of a widget's property an object representing the binding, as in
166     <pre class="paste-area">
167     (button :enabled-p (make-simple-data-binding x))
168     </pre>
169     this will connect the specific property of the widget with the user-provided object or property.
170     <h4>Types of data binding</h4>
171 astalla 14 Snow supports several types of data binding; some are more indicated for Lisp applications, others for Java applications.
172 astalla 11 <ul>
173     <li><b>Binding to a variable.</b> Syntax: <code>(make-simple-data-binding &lt;variable&gt;)</code><br />This is the simplest form of data binding: you connect a widget's property to a suitably instrumented Lisp variable. Such a variable must be initialized with <code>(make-var &lt;value&gt;)</code>, read with <code>(var &lt;name&gt;)</code>, and written with <code>(setf (var &lt;name&gt;) &lt;value&gt;)</code>. Example:
174     <pre class="paste-area">
175     (defvar *x* (make-var "Initial value"))
176     (setf (var *x*) "new value")
177     (button :text (make-simple-data-binding *x*))
178     </pre></li>
179 astalla 14 <li><b>Binding to a Presentation Model.</b> Syntax: <code>(make-bean-data-binding &lt;object&gt; &lt;property&gt; ...other args...)</code><br />This kind of binding uses Martin Fowler's <i>Presentation Model</i> pattern as implemented by JGoodies Binding. You implement, in Java, a suitable subclass of <code>PresentationModel</code> (in simple cases, you can just use the base class provided by JGoodies); you then bind a widget to a model returned by an instance of this class for a bean property. Example:
180 astalla 11 <pre class="paste-area">
181     (defvar *presentation-model* (new "my.presentation.Model"))
182     (text-field :text (make-bean-data-binding *presentation-model* "myProperty"))
183     </pre>
184 astalla 12 The presentation model acts as a glue between the GUI and the application logic, and provides advanced functionality (e.g. it lets you control when to synchronize the state). You can tune it with additional arguments to <code>make-bean-data-binding</code>; for example, you can obtain a buffered model with <code>:buffered-p t</code>.</li>
185     <li><b>Binding to a bean property</b>, arbitrarily nested. Syntax: <code>(make-property-data-binding &lt;bean&gt; &lt;property path&gt;)</code><br />This is a convenient way to adapt a pre-existing bean with the binding framework. It connects a property path, which can be expressed in &quot;dot notation&quot;; to properly observe changes, every object which is part of the path must support the standard Java Bean facility for listening to property changes. Example:
186     <pre class="paste-area">
187     (defvar *x* (new "Person"))
188     (text-field :text (make-property-data-binding *x* "address.street"))
189     </pre></li>
190     <li><b>Binding to a Cells-powered slot</b> of a CLOS object. Syntax: <code>(make-slot-data-binding &lt;object&gt; &lt;slot-accessor-name&gt;)</code><br />You can use this kind of binding to connect a widget property to a slot of a CLOS object using the Cells dataflow library. Example:
191     <pre class="paste-area">
192     (defvar *x* (make-instance 'my-class :my-slot (c-in 42)))
193     (text-field :text (make-slot-data-binding *x* 'my-slot-accessor))
194     </pre></li>
195     <li><b>Binding to a calculated expression</b> using Cells. Syntax: <code>(make-cells-data-binding &lt;expression&gt; [writer])</code><br />This is useful to bind a widget to a quick-and-dirty Cells expression without creating a class instance specifically to hold it in a slot. You can optionally provide a writer function so that the widget will be able to alter the value of the expression when its value changes. Example:
196     <pre class="paste-area">
197     (defvar *x* (make-instance 'my-class :slot (c-in 42)))
198     (text-field :text (make-cells-data-binding
199     *x* (c? (* 2 (my-slot *x*)))
200     (lambda (new-value) (setf (my-slot *x*) new-value))))
201     </pre></li>
202 astalla 11 </ul>
203 astalla 14 <h4>Syntactic sugar</h4>
204     To avoid the verbosity of make-foo-data-binding, Snow provides convenient syntax to cover the most common cases of data binding. You can enable this special syntax by evaluating the form <code>(in-readtable snow:syntax)</code>, for example placing it in every source file right after the <code>(in-package :snow-user)</code> form at the top of the file.<br />
205     This special syntax is accessed by using the prefix $. It covers the following cases:
206     <ul>
207     <li><code>$foo</code> is equivalent to <code>(make-simple-data-binding foo)</code>.</li>
208     <li><code>$(c? ...)</code> is equivalent to <code>(make-cell-data-binding (c? ...))</code>.</li>
209     <li><code>$(slot ...)</code> is equivalent to <code>(make-slot-data-binding ...)</code>.</li>
210     <li><code>${bean.path}</code> is a bit more complex. This syntax resembles that of the &quot;Expression Language&quot; used in JSP and JSF. First, <code>bean</code> is used as the name of a bean: the function stored in the special variable <code>*bean-factory*</code> is called with it as an argument to produce a Java object. The default function simply reads and evaluates <code>bean</code> as the name of a Lisp variable, but you can customize this behavior: for example, you can provide a callback that gets the bean from a Spring application context<sup><a href="#notes_2">2</a></sup>. Then, once the bean has been obtained, two things can happen: if <code>path</code> is a simple property (i.e. it has no dots) and the bean is an instance of JGoodies PresentationModel, a binding to the property is asked to the presentation model, as by <code>(make-bean-data-binding bean path)</code>; else, a property path data binding is constructed, as by <code>(make-property-data-binding bean path-as-list)</code>.</li>
211     </ul>
212 astalla 2 <a name="more" /><h3>What's more?</h3>
213 astalla 14 I haven't covered which widgets are supported and how much of their API is supported. At this stage, Snow is in a early stage of development, so very little of the Swing API is covered. The best way to learn about Snow usage is to look at the examples included with Snow: the debugger (debugger.lisp), inspector (inspector.lisp) and the REPL (repl.lisp and swing/swing.lisp). Also, I haven't talked about how to use your custom widgets with Snow, and probably other things. Drop me a line at alessiostalla @ Google's mail service, and I'll be happy to help you.
214 astalla 2 <hr />
215     <h3>Footnotes</h3>
216     <ol>
217     <li><a name="notes_1" />If you <i>really</i> mess things up, you can change the package of the REPL to one where the symbol QUIT is not visible. If you find yourself in this situation, type (ext:quit) to exit.</li>
218 astalla 14 <li><a name="notes_2" />Snow provides a convenient Java class - <code>org.armedbear.lisp.Callback</code> - that you can subclass to create your custom callback function. You have just to implement the appropriate overload of the <code>call</code> method, or alternatively use one of the static methods <code>Callback.fromXXX</code> to create a Callback from several kinds of Java callbacks.</li>
219 astalla 2 </ol>
220     </body>
221     </html>

Properties

Name Value
svn:executable *

  ViewVC Help
Powered by ViewVC 1.1.5