[Laszlo-checkins] r3664 - in openlaszlo/branches/legals/docs/src: dguide tutorials
jsundman@openlaszlo.org
jsundman at openlaszlo.org
Mon Feb 5 14:52:36 PST 2007
Author: jsundman
Date: 2007-02-05 14:52:33 -0800 (Mon, 05 Feb 2007)
New Revision: 3664
Modified:
openlaszlo/branches/legals/docs/src/dguide/constraints.html
openlaszlo/branches/legals/docs/src/dguide/index.dbk
openlaszlo/branches/legals/docs/src/tutorials/calculator.html
Log:
Adding Calculator tutorial back into dguide and fixing other bugs. Resolves LPP-3512
Modified: openlaszlo/branches/legals/docs/src/dguide/constraints.html
===================================================================
--- openlaszlo/branches/legals/docs/src/dguide/constraints.html 2007-02-05 22:35:43 UTC (rev 3663)
+++ openlaszlo/branches/legals/docs/src/dguide/constraints.html 2007-02-05 22:52:33 UTC (rev 3664)
@@ -11,7 +11,7 @@
<h2>Constraints defined</h2>
<p>In LZX, a <dfn>constraint</dfn> is an attribute whose value is a
-function of other attribute values.</p>
+function of one or more other attribute's value(s).</p>
<p>Constraints help you quickly create dependencies without writing a
lot of code. You can specify that certain views are the same size or
@@ -470,6 +470,6 @@
</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
-* Copyright 2001-2006 Laszlo Systems, Inc. All Rights Reserved. *
+* Copyright 2001-2007 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
Modified: openlaszlo/branches/legals/docs/src/dguide/index.dbk
===================================================================
--- openlaszlo/branches/legals/docs/src/dguide/index.dbk 2007-02-05 22:35:43 UTC (rev 3663)
+++ openlaszlo/branches/legals/docs/src/dguide/index.dbk 2007-02-05 22:52:33 UTC (rev 3664)
@@ -32,6 +32,7 @@
<xi:include href="../tutorials/data.dbk"/>
<xi:include href="../tutorials/classes.dbk"/>
<xi:include href="../tutorials/drawview-intro.dbk"/>
+ <xi:include href="../tutorials/calculator.dbk"/>
<!--xi:include href="../tutorials/solo-intro.dbk"-->
</part>
Modified: openlaszlo/branches/legals/docs/src/tutorials/calculator.html
===================================================================
--- openlaszlo/branches/legals/docs/src/tutorials/calculator.html 2007-02-05 22:35:43 UTC (rev 3663)
+++ openlaszlo/branches/legals/docs/src/tutorials/calculator.html 2007-02-05 22:52:33 UTC (rev 3664)
@@ -8,25 +8,32 @@
<h1>Building a Calculator</h1>
<h2>Introduction</h2>
<p>In this section we draw on the concepts presented thus far to create a simple — calculator as shown below.</p>
+<p condition="swf">
+When you compile this application for SWF, you can uncomment the lines that embed fonts. This will import fonts that give a somewhat more polished look to the calculator.
+</p>
<img src="img/d_t_calculator_1.jpg" alt="What the calculator will look like" width="121" height="180" border="0"/>
<p>As throughout this Guide, the examples are "live" and you can edit them. However, many of the examples are a bit long and not
ideally suited to the example editor. So, if you wish to do some experimenting with this example you may wish to copy the source files
and resources to whichever directory you use for development.</p>
-
+<!--
<p>All the art assets are <a href="./resources/calculator_tutorial.zip">here</a>.
For the purposes of this tutorial, place the art assets in the same folder that you are working in. </p>
+-->
<p>Keep in mind that this is an exercise in basic LZX, not in scripting, so there won't be too much discussion on how the script works.</p>
<h2>Visual Layout</h2>
-<p>Our first step will be to build the calculator visually, that is not worry about the functionality; just make it look right.
-Let's start by bringing in all the art assets. There is a body, a display and a number of buttons. </p>
+<p>Our first step will be to build the calculator visually. That is, to start with we will not worry about the functionality, we'll just make it look right.
+Let's start by bringing in all the art assets. There are a body, a display and a number of buttons. </p>
<example title="Using resource for body image" wrap="true" height="500" width="800">
<canvas height="500" width="800">
+ <!-- Uncomment to include fonts for SWF -->
<!-- fonts -->
+ <!--
<font src="helmetbi.ttf" name="obliqueText" />
<font src="helmetr.ttf" name="displayText" />
+ -->
<!-- art assets -->
<resource name="calc_body" src="../resources/body.png" />
<resource name="calc_display" src="../resources/display.png" />
@@ -39,7 +46,7 @@
</example>
-<p>In this code we have brought in the fonts and art assets we plan to use, and created the body of the calculator.
+<p>In this code we have brought in the fonts and art assets we plan to use, and created the body of the calculator. Remember, if you're compiling for DHTML you cannot use imported fonts.
</p>
<p>We don't need to set the size of the view that is the calculator body, because it will stretch to the size of its resource automatically.</p>
@@ -47,9 +54,12 @@
<example title="Adding the display" wrap="true" width="800" height="500">
<canvas width="800" height="500">
+ <!-- Uncomment to include fonts for SWF -->
<!-- fonts -->
+ <!--
<font src="helmetbi.ttf" name="obliqueText" />
<font src="helmetr.ttf" name="displayText" />
+ -->
<!-- art assets -->
<resource name="calc_body" src="../resources/body.png" />
<resource name="calc_display" src="../resources/display.png" />
@@ -74,7 +84,7 @@
<p>There are two parts to this. The first is the light gray art asset that is the display itself, and the second is the text in the display.
We're naming everything with <span class="code">name</span> attributes now, so that later we will be able to refer to these elements
-from scripts (e.g. change the text in the display).</p>
+from scripts (for example, to change the text in the display).</p>
<p>Note that the <span class="code">text</span> tag is <i>within</i> the display <span class="code">view</span> tag. In fact it's
convenient because it allows us to position the <span class="code">text</span> tag relative to the display, which is how we think of it.
</p>
@@ -143,9 +153,12 @@
<example title="Spacing rows with <simplelayout>" width="800" height="500" wrap="true">
<canvas height="500" width="800">
+ <!-- Uncomment to include fonts for SWF -->
<!-- fonts -->
+ <!--
<font src="helmetbi.ttf" name="obliqueText" />
<font src="helmetr.ttf" name="displayText" />
+ -->
<!-- art assets -->
<resource name="calc_body" src="../resources/body.png" />
<resource name="calc_display" src="../resources/display.png" />
@@ -408,9 +421,12 @@
<example title="Completed calculator" height="500" width="800" wrap="true">
<canvas height="500" width="800">
+ <!-- Uncomment to include fonts for SWF -->
<!-- fonts -->
+ <!--
<font src="helmetbi.ttf" name="obliqueText" />
<font src="helmetr.ttf" name="displayText" />
+ -->
<!-- art assets -->
<resource name="calc_body" src="../resources/body.png" />
<resource name="calc_display" src="../resources/display.png" />
@@ -479,7 +495,7 @@
return;
}
displ = this.screen.getText();
- if ( ( displ == '0' ) && ( val == '0' ) ) {
+ if ( displ == '0' ) if ( val == '0' ) {
return;
}
if ( ( this.lastInput == 'none' )
@@ -534,7 +550,7 @@
<![CDATA[
var disp = this.screen.getText();
var isDecimal = false;
- for ( var i=0; i<disp.length; i++ ) {
+ for ( var i=0; i < disp.length; i++ ) {
if ( disp.charAt( i ) == '.' ) {
return true;
}
@@ -734,7 +750,7 @@
<p>There is still a lot of code here, a lot of which is repetitive. We can condense it by using
<a href="classes.html">classes</a>.</p>
<h2><a name="perspective"></a>Using Classes to Simplify</h2>
-<p>That is a perfect candidate for the use of classes.</p>
+<p>Let's take a look at how we can use classes to simplyfy our code. We'll start by making a class for calculator buttons.</p>
<todo>
need another intro sentence
</todo>
@@ -750,9 +766,11 @@
<p>Here is the old code for a single button:</p>
<example title="Single button">
<canvas width="800" height="80">
- <!-- fonts -->
- <font src="helmetbi.ttf" name="obliqueText"/>
-
+ <!-- Uncomment to include fonts for SWF -->
+ <!-- fonts -->
+ <!--
+ <font src="helmetbi.ttf" name="obliqueText" />
+ -->
<!-- art assets -->
<resource name="button_blu" src="../resources/button_blue.gif"/>
@@ -769,7 +787,12 @@
<p>And here's how that might be translated into a class:</p>
<example title="Converting button to class">
<canvas width="800" height="100">
- <font src="helmetbi.ttf" name="obliqueText"/>
+ <!-- Uncomment to include fonts for SWF -->
+ <!-- fonts -->
+ <!--
+ <font src="helmetbi.ttf" name="obliqueText" />
+
+ -->
<resource name="button_blu" src="../resources/button_blue.gif"/>
<resource name="button_red" src="../resources/button_red.gif"/>
<resource name="button_green" src="../resources/button_green.gif"/>
@@ -804,7 +827,7 @@
However we need a method to handle the custom attributes <attribute>buttLabel</attribute> and <attribute>labelX</attribute>. That's why
we call the <method>initButton</method> method at init time, and set the label of the text and optionally the x-offset of the label
that way.</p>
-<todo>mention why I didn't use the method event="" syntax here</todo>
+
<p>In this case we've made the fontsize of the view a little smaller, so that we don't have to worry about making the labels fit
the buttons.</p>
<p>The method within the <tagname>text</tagname> tag adjusts the size of the text field when the text gets set to the correct size
@@ -812,10 +835,12 @@
<p>Applying this to the original calculator code, we get:</p>
<example title="Classes in calculator">
<canvas width="800" height="400">
+ <!-- Uncomment to include fonts for SWF -->
<!-- fonts -->
- <font src="helmetbi.ttf" name="obliqueText"/>
- <font src="helmetr.ttf" name="displayText"/>
-
+ <!--
+ <font src="helmetbi.ttf" name="obliqueText" />
+ <font src="helmetr.ttf" name="displayText" />
+ -->
<!-- art assets -->
<resource name="calc_body" src="../resources/body.png"/>
<resource name="calc_display" src="../resources/display.png"/>
@@ -873,7 +898,7 @@
this.valueX = 0;
this.lastInput = 'none';
this.oldValue = false;
- this.allOperators = new array('+', '-', '/', '*');
+ this.allOperators = new Array('+', '-', '/', '*');
this.operator = '+';
this.screen.setText(this.valueX.toString());
</method>
@@ -1055,15 +1080,18 @@
</view>
</canvas>
</example>
-<p>Not only does this make the code more navigable, but lightens the calculator app by over 100 lines of code.</p>
-<p>Now say that we wanted to upgrade the buttons we have and make them react to mouse events (e.g. highlight when rolled over
+<p>Not only does this make the code more navigable, but lightens the calculator application by over 100 lines of code.</p>
+<p>Now, say that we wanted to upgrade the buttons we have and make them react to mouse events (e.g. highlight when rolled over
and appear depressed when clicked). Since we've created a class, we only have to make the change in one place, and it will
immediately be propagated to all of the instances of that class:</p>
<example title="Updating class definition">
<canvas width="800" height="400">
- <!-- fonts -->
- <font src="helmetbi.ttf" name="obliqueText"/>
- <font src="helmetr.ttf" name="displayText"/>
+ <!-- Uncomment to include fonts for SWF -->
+ <!-- fonts -->
+ <!--
+ <font src="helmetbi.ttf" name="obliqueText" />
+ <font src="helmetr.ttf" name="displayText" />
+ -->
<!-- art assets -->
<resource name="calc_body" src="../resources/body.png"/>
@@ -1137,7 +1165,7 @@
this.valueX = 0;
this.lastInput = 'none';
this.oldValue = false;
- this.allOperators = new array('+', '-', '/', '*');
+ this.allOperators = new Array('+', '-', '/', '*');
this.operator = '+';
this.screen.setText(this.valueX.toString());
</method>
@@ -1392,7 +1420,7 @@
this.valueX = 0;
this.lastInput = 'none';
this.oldValue = false;
- this.allOperators = new array('+', '-', '/', '*');
+ this.allOperators = new Array('+', '-', '/', '*');
this.operator = '+';
this.screen.setText(this.valueX.toString());
</method>
@@ -1530,10 +1558,12 @@
<p>Finally, the code for the calculator itself:</p>
<example title="Calculator implemented with libraries">
<canvas width="800" height="400">
+ <!-- Uncomment to include fonts for SWF -->
<!-- fonts -->
- <font src="helmetbi.ttf" name="obliqueText"/>
- <font src="helmetr.ttf" name="displayText"/>
-
+ <!--
+ <font src="helmetbi.ttf" name="obliqueText" />
+ <font src="helmetr.ttf" name="displayText" />
+ -->
<!-- art assets -->
<resource name="calc_body" src="../resources/body.png"/>
@@ -1626,7 +1656,7 @@
<!-- lz_content_end -->
<!-- * H_LZ_COPYRIGHT_BEGIN *********************************************** -->
-<p class="copyright">Copyright © 2002-2005 <a target="_top"
+<p class="copyright">Copyright © 2002-2007 <a target="_top"
href="http://www.laszlosystems.com/">Laszlo Systems, Inc.</a>
All Rights Reserved. Unauthorized use, duplication or
distribution is strictly prohibited. This is the proprietary
More information about the Laszlo-checkins
mailing list