[Laszlo-checkins] r6399 - openlaszlo/branches/legals-doctools/docs/src/developers
lou@openlaszlo.org
lou at openlaszlo.org
Fri Sep 7 12:40:09 PDT 2007
Author: lou
Date: 2007-09-07 12:38:08 -0700 (Fri, 07 Sep 2007)
New Revision: 6399
Modified:
openlaszlo/branches/legals-doctools/docs/src/developers/animation.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/browser-integration.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/databinding.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/debugging.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/developers_guide_preface.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/editing-lzx.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/media-resources.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/methods-events-attributes.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/proxied.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/rpc-soap.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/text.dbk
openlaszlo/branches/legals-doctools/docs/src/developers/views.dbk
Log:
Change 20070904-lou-vaeqlm by lou at lou-laptop on 2007-09-04 10:45:09 AST
in /home/lou/src/svn/openlaszlo/branches/legals-doctools/docs/src/developers
for http://svn.openlaszlo.org/openlaszlo/branches/legals-doctools/docs/src/developers
Summary: Update dguide files to validate against DocBook dtd
New Features:
Bugs Fixed: LPS-4593, LPS-4594, LPS-4595, LPS-4635, LPS-4636, LPS-4637,
LPS-4639, LPS-4640, LPS-4641, LPS-4642, LPS-4643,
Technical Reviewer: Benjamin Shine
QA Reviewer: (pending)
Doc Reviewer: (pending)
Documentation:
Release Notes:
Details: Fix a bunch of DocBook problems in the dbk files. Each change is
preceded by a comment describing the change.
Tests:
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/animation.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/animation.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/animation.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -1,8 +1,9 @@
<chapter id="animation">
<title>Animation </title>
-
-<para/><section><title>Introduction</title>
+<!-- remove empty para tag LI, LPP-4635 9/3/2007 -->
+<!-- <para/> -->
+<section><title>Introduction</title>
<para>
OpenLaszlo applications have a fluid, dynamic feel that allow you to guide the user's experience. This fluidity is achieved with <indexterm significance="preferred"><primary>animators</primary></indexterm><glossterm>animators</glossterm>,
which change the value of an object's attribute over a specified time duration. In this tutorial we'll start by showing the code for some short applications that allow you to see
@@ -110,7 +111,8 @@
Inside Animators, the "this" keyword refers to the animator, and "parent" refers to the view or node it is nested in.
</para>
</section>
-<para/>
+<!-- remove empty para tag LI, LPP-4635 9/3/2007 -->
+<!-- <para/> -->
<section><title>Preview of comparative examples</title>
<para>The following examples illustrate various uses of the <indexterm><primary>animator</primary></indexterm><sgmltag class="element"><animator></sgmltag><remark role="fixme">[unknown tag]</remark>
@@ -290,7 +292,9 @@
instead of the default <literal>easeboth</literal>. In the case of
<varname>B21</varname> the motion of the <indexterm><primary>y</primary></indexterm><sgmltag class="attribute">y</sgmltag>
animation has been set to <literal>easeout</literal>. By clicking the
-"test" button you can see how the these simple changes to the animator
+<!-- "test" button you can see how the these simple changes to the animator -->
+<!-- fix typo LI 9/3/2007 -->
+"test" button you can see how these simple changes to the animator
parameters cause distinctly different movements.</para>
<para>The <indexterm><primary>animatorgroup</primary></indexterm><sgmltag class="element"><animatorgroup></sgmltag><remark role="fixme">[unknown tag]</remark>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/browser-integration.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/browser-integration.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/browser-integration.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -1,819 +1,1015 @@
+
<chapter id="browser-integration">
+<!-- move title here for valid DocBook LI, LPP-4594 9/3/2007 -->
+ <title>Browser Integration</title>
+ <para role="fixme">
+ <remark role="fixme">
+ <emphasis role="para-label">FIXME:</emphasis>- Need reverse
+ example (lzSetCanvasAttribute()) in this section. - You must
+ use a <handler name="onmyattr"> in your canvas - You have
+ to use the lzSetCanvasAttribute() method call from browser
+ JS.</remark>
+ </para>
-
-<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis>
- - Need reverse example (lzSetCanvasAttribute()) in this section.
-
-
- - You must use a <handler name="onmyattr"> in your canvas
- - You have to use the lzSetCanvasAttribute() method call from
- browser JS.
-</remark></para>
-<title>Browser Integration</title>
-<para>
-OpenLaszlo applications run inside web browsers, and web browsers are desiged to render HTML pages. This means that each compiled OpenLaszlo application has a relationship to the HTML page that delivers it to the browser. Depending on whether the OL application was compiled to SWF or to DHTML, the mechanics of this relationship differ. However, at an abstract level the model is pretty much the same for all runtimes: an OpenLaszlo application resides within a web page that is executed by a browser; that browser has a "JavaScipt" engine. The OpenLaszlo application can make requests for the JavaScript engine to execute, and the surrounding HTML page can include JavaScript code that makes requests of the OpenLaszlo application.
-</para>
-<para>
-This chapter discusses the way that OpenLaszlo Applications relate to the HTML pages in which they're delivered, and ways in which the OpenLaszlo appliction and browser JavaScript engine can communicate with each other.
-</para>
-<para/><section><title>Using the Developer Console</title>
-<para>
-In this chapter we'll be talking about the structure of HTML pages that contain LZX applications. Keep in mind that if you compile your applications using the Developer Console, HTML pages of the proper structure are generated automatically. Situations may arise where you may need to customized these pages or even generate pages from scratch, but in many cases, the automaticaly generated page is all you need. Simply press the appropriate button, "Server" or "SOLO", and follow the instructions that are then displayed. </para>
-<para/></section><section><title>A model of Browser/LZX application interaction</title>
-<para>
-Before going into the actual mechanics, let's take a closer look at concepts and teminology.
-</para>
-<para/><section><title>The "wrapper page"</title>
-<para>
-As we said above, web browsers display HTML pages. This means that OpenLaszlo applications are delivered to browsers by means of HTML pages. Sometimes those HTML pages contain nothing visible to the user other than the LZX application itself. In such cases the HTML page is essentially invisible, and the fact that there's an HTML page there at all doesn't really matter to the developer or to the user of the application. Such HTML pages, whose only function is to present the OpenLaszlo application to the browser, are sometimes called "wrapper pages."
-</para>
-<para>
-Depending on which target runtime they're compiled for, OpenLaszlo applications have different relationships with the JavaScript engine of the browser in which they run. To a rough approximation, LZX applications compiled to SWF are foreign objects embedded into an HTML page, and you must use a formal protocol to get across this logical barrier between the LZX application and the JavaScript engine. Applications compiled to DHTML become just a part of the HTML page that contains them. From the point of view of the browser, there is no difference between the OpenLaszlo application and the surrounding page.
-</para>
-<para>
-But although some of the implementation details differ for the different runtime targets, the OpenLaszlo APIs are, wherever possible, consistent, so that you use the same programming model regardless of the target runtime. So, for example, there is a method called <indexterm><primary><literal>swfEmbed()</literal></primary></indexterm><methodname>swfEmbed()</methodname>for embedding SWF OL applcations into the HTML page; this generates an HTML <embed> tag. Similarly, there is an <indexterm><primary><literal>dhtmlEmbed()</literal></primary></indexterm><methodname>dhtmlEmbed()</methodname> for placing an OL application compiled to DHTML within a web page. In this case there is no <embed> generated or required, but the methods have similar names because they perform analogous functions.
-</para>
-<para/></section><section><title>Applications Compiled to SWF</title>
-<para condition="swf"> Applications compiled to SWF are executed by the Flash player and must make use of the <indexterm><primary>LzBrowser</primary></indexterm><classname>LzBrowser</classname> service in order to "escape" to the browser's JavaScript environment.
-</para>
-<para>
-Any attributes that are declared on the canvas are visible to the browser JavaScript.
-To go "the other way", from the browser "into" the OpenLaszlo application, the <indexterm><primary><literal>setCanvasAttribute()</literal></primary></indexterm><methodname>setCanvasAttribute()</methodname> and <indexterm><primary><literal>setCanvasAttribute()</literal></primary></indexterm><methodname>setCanvasAttribute()</methodname> methods are used.</para>
-<para>
-This are discussed below.
-</para>
-<para>
-Alhough OpenLaszlo applications deployed on the Flash runtime are not dependent on the browser or
-operating system for their look or behavior, there are some
-important limitations that the browser container places on the
-application. There are also a number of Flash Player features that your
-application can use which are not available in applications compiled to DHTML.
-</para>
-
-<para>
-OpenLaszlo applications compiled to SWF can be sent from the OpenLaszlo Server to client in any of several forms:
-</para>
-
-<itemizedlist spacing="compact"><listitem><para>as "naked" swf </para></listitem><listitem><para>as swf embedded in an html "wrapper" page</para></listitem><listitem><para>as xml source</para></listitem></itemizedlist>
-
-
-<para/><section><title condition="swf">The LzBrowser service</title>
-<para>The <indexterm><primary>LzBrowser</primary></indexterm><classname>LzBrowser</classname> service provides access to the browser and player environment.
-It includes methods to load URLs in the browser and check the version of the player. Furthermore, by using the <literal>LzBrowser</literal> service together
-with other OpenLaszlo functions described below, you can build applications that pass information and control between the OpenLaszlo application
-and the JavaScript of the browser.
-</para>
-<para>
-The <literal>LzBrowser</literal> is always running.</para>
-
-<para/></section></section><section><title condition="dhtml">Applications Compiled to DHTML</title>
-<para>
- Applications that are compiled for DHTML run within the browser's JavaScript envinronment. They are essentially compiled into the DOM of that page.</para>
-
-<para>
-Each LZX application has exactly one <indexterm><primary>canvas</primary></indexterm><sgmltag class="element"><canvas></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: canvas-->
- element, which, when compiled to DHTML, becomes an object. When you embed an LZX application compiled to DHTML into an HTML page, it just becomes part of that page's DOM,and you can address it directly. The "foo" object of the LZX application becomes canvas.foo of the DOM. If there is a swf embedded in that (DHTML) Openlaszlo application, you can still use the mechanism for talking to SWF applications to reach it.
-</para>
-<para>
-For DHTML, you can call canvas JavaScript directly because it is loaded in the browser. That is to say, unlike in the case of communicating with SWFs, you do not need to use <indexterm><primary><literal>setCanvasAttribute()</literal></primary></indexterm><methodname>setCanvasAttribute()</methodname> ore <indexterm><primary><literal>setCanvasAttribute()</literal></primary></indexterm><methodname>setCanvasAttribute()</methodname>, nor do you need to use the <indexterm><primary>LzBrowser</primary></indexterm><classname>LzBrowser</classname> service.
-</para>
-<para/><section><title condition="dhtml">Embedding the LFC for DHTML applications</title>
-<para>When you compile an application to SWF, the compiler includes the Laszlo Foundation Class, or LFC in the resulting file. This does not happen for applications compiled to DHTML, therefore the LFC must be downloaded explicitly. To make the LFC available to DHTML applications, include the following call in the page head:</para>
-<para/></section></section></section><section><title>The Lz Class</title>
-<para>
-For both applications compiled to SWF and applications compiled to DHTML, the methods used for bidirectional communication with the browser are in the class <indexterm><primary>Lz</primary></indexterm><classname>Lz</classname>. Note that the letter "L" in this class is uppper case. This is not a typo!.</para>
-<para>
-Unlike other OpenLaszlo classes which you use to build LZX applications, the <indexterm><primary>Lz</primary></indexterm><classname>Lz</classname> is designed to be incorporated into the HTML page in which your LZX application runs. That is to say, your LZX application is designed to be executed in the <body> section of the page, but the <indexterm><primary>Lz</primary></indexterm><classname>Lz</classname> must be include in the <lt;head> section of the page.
-</para>
-<para>
-The <indexterm><primary>Lz</primary></indexterm><classname>Lz</classname> class is defined in </para>
-<programlisting>
-lps/includes/source/embednew.js
-</programlisting>
-<para>
-The source for <literal>embednew.js</literal> isshipped compressed as </para>
-<programlisting>
-lps/includes/embed-compressed.js.
-</programlisting>
-<para>
-The comments/API documentation are in the source file and the class is documented in the Reference Manual.
-</para>
-<para>
-To have access to the <indexterm><primary>Lz</primary></indexterm><classname>Lz</classname> class, your application must include a line like </para>
-<programlisting>
-
-<script type="text/javascript" src="/legals/lps/includes/embed-compressed.js"></script>
-</programlisting>
-<para>
-If you generate wrappers using the developer's console, the correct <script> tag will be generated for you automatically.
-</para>
-
-<para>
-Remember, if you compile your application using the Developer's Console, the wrapper pages generated include the proper calls to the <indexterm><primary>Lz</primary></indexterm><classname>Lz</classname> class. It "just works" and you don't have to do anything special. If you craft your HTML pages "by hand", of course, you will need to make sure that you incorporate the Lz class.
-</para>
-<para/></section><section><title>Placing the LZX application in the HTML page</title>
-<para>
-When you place a OpenLaszlo application inside an HTML page, that page has to have some way to know where to place the application, and how to handle it.
-That is, you must inform the browser that the embedded OpenLaszlo application is actually a SWF file, and so forth.
-</para>
-<para>In the <literal role="code"><html><head></literal> of an HTML document that embeds an OpenLaszlo application compiled to SWF,
- add this line:
- </para>
- <example role="live-example"><title>The Lz Class</title><programlisting>
-<script src="/embed-compressed.js" language="JavaScript" type="text/javascript"/>
-</programlisting></example>
-<para condition="swf">At the location within the <html><body> where the application is to be embeded, add this line:
-</para>
-<example role="live-example"><title>Placing the LZX (SWF) application within an HTML page</title><programlisting>
- <script language="JavaScript" type="text/javascript">
- lz.swfEmbed({url: '?lzt=swf', bgcolor: '#000000', width: '', height: ''});
- </script>
-</programlisting></example>
-<para>where the url matches the URI that the application is served from, and the other properties match the attributes of the application's canvas.
- </para>
-<para condition="dhtml">At the location within the <html><body> where the application is to be embeded, add this line:
-</para>
-<example role="live-example"><title>Placing the LZX (DHTML) application within an HTML page</title><programlisting>
- <script language="JavaScript" type="text/javascript">
- lz.dhtmlEmbed({url: '?lzt=swf', bgcolor: '#000000', width: '', height: ''});
- </script>
-</programlisting></example>
-<para>where the url matches the URI that the application is served from, and the other properties match the attributes of the application's canvas.
- </para>
-
-<para/><section><title>Placing LZX applications within <div>s</title>
-<para>
-The optional <indexterm><primary>appenddivid</primary></indexterm><sgmltag class="attribute">appenddivid</sgmltag> property can be passed in to <indexterm><primary><literal>swfEmbed()</literal></primary></indexterm><methodname>swfEmbed()</methodname> or <indexterm><primary><literal>dhtmlEmbed()</literal></primary></indexterm><methodname>dhtmlEmbed()</methodname> method to specify the id of a div whose contents should be replaced with the LZX application. If a div with that ID doesn't exist, one will be written into the document where <literal>swf/dhtmlEmbed()</literal> is called. If appenddivid is not specified, the div written will be based on the id property + 'Container'.
-
-</para>
-
-
-
-
-
-<para>
-Alternatively, you can generate wrappers by using the various request types on the url you use to browse to your application, as explained in <xref linkend="compiler"/>:
-</para>
-<orderedlist spacing="compact"><listitem><para>Invoke the lzx application with request type "?lzt=html". This generates the "wrapper."</para></listitem><listitem><para>Using your browser's "View source" function, copy the contents of the wrapper and place in a new file with a .html extension.</para></listitem><listitem><para>In the head of the HTML file, you will see the script tag that includes <literal>embed-compressed.js</literal> Adjust the path if necessary for deployment.</para></listitem><listitem><para>paste to wherever you want the OpenLaszlo application to appear in HTML page</para></listitem><listitem><para>verify by running HTML file in your browser.</para></listitem></orderedlist>
-<?ignore <p>
-Consider the following simple OpenLaszlo application. (For now, pay no attention to the <code>onreset</code> method; we'll see it used later.):
-</p>
-<example title="Hello Grace!">
-<canvas height="200" debug="true" proxied="false">
- <attribute name="reset"/>
- <handler name="onreset">
- redview.unfade.dostart()
- Debug.write('Reset Button clicked')
- </handler>
- <debug y="100"/>
- <view name="redview" bgcolor="red" height="30" width="150" clip="true">
- <animator name="fade" attribute="opacity" to=".10" duration="2000"/>
- <animator name="unfade" attribute="opacity" to="1" duration="2000" start="false"/>
- <text x="15"> Hello Grace!
- <animator name="wrapper" attribute="x" to="150" duration="2000"/>
- </text>
- </view>
-</canvas>
-</example>
-<p>
-The wrapper page returned with by invoking it with the ?lzt=html type returns the following wrapper:
-</p>
-<example extract="false" title="Simple wrapper page">
-<!DOCTYPE html
- PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html><head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico"><title>OpenLaszlo Application</title><script type="text/javascript">
- // If loaded bare into a browser, set the browser size to the canvas size
- if (window === top) {
- (function (width, height) {
- // Cf. http://www.quirksmode.org/viewport/compatibility.html
- if (window.innerHeight) {
- // Sadly, innerHeight/Width is not r/w on some browsers, and resizeTo is for outerHeight/Width
- window.resizeTo(width ? (width + window.outerWidth - window.innerWidth) : window.outerWidth,
- height ? (height + window.outerHeight - window.innerHeight) : window.outerHeight);
- } else if (document.documentElement && document.documentElement.clientHeight) {
- if (width) {
- document.documentElement.clientWidth = width;
+ <para>OpenLaszlo applications run inside web browsers, and web
+ browsers are desiged to render HTML pages. This means that each
+ compiled OpenLaszlo application has a relationship to the HTML
+ page that delivers it to the browser. Depending on whether the OL
+ application was compiled to SWF or to DHTML, the mechanics of
+ this relationship differ. However, at an abstract level the model
+ is pretty much the same for all runtimes: an OpenLaszlo
+ application resides within a web page that is executed by a
+ browser; that browser has a "JavaScipt" engine. The OpenLaszlo
+ application can make requests for the JavaScript engine to
+ execute, and the surrounding HTML page can include JavaScript
+ code that makes requests of the OpenLaszlo application.</para>
+ <para>This chapter discusses the way that OpenLaszlo Applications
+ relate to the HTML pages in which they're delivered, and ways in
+ which the OpenLaszlo appliction and browser JavaScript engine can
+ communicate with each other.</para>
+ <para />
+ <section>
+ <title>Using the Developer Console</title>
+ <para>In this chapter we'll be talking about the structure of
+ HTML pages that contain LZX applications. Keep in mind that if
+ you compile your applications using the Developer Console, HTML
+ pages of the proper structure are generated automatically.
+ Situations may arise where you may need to customized these
+ pages or even generate pages from scratch, but in many cases,
+ the automaticaly generated page is all you need. Simply press
+ the appropriate button, "Server" or "SOLO", and follow the
+ instructions that are then displayed.</para>
+ <para />
+ </section>
+ <section>
+ <title>A model of Browser/LZX application interaction</title>
+ <para>Before going into the actual mechanics, let's take a
+ closer look at concepts and teminology.</para>
+ <para />
+ <section>
+ <title>The "wrapper page"</title>
+ <para>As we said above, web browsers display HTML pages. This
+ means that OpenLaszlo applications are delivered to browsers
+ by means of HTML pages. Sometimes those HTML pages contain
+ nothing visible to the user other than the LZX application
+ itself. In such cases the HTML page is essentially invisible,
+ and the fact that there's an HTML page there at all doesn't
+ really matter to the developer or to the user of the
+ application. Such HTML pages, whose only function is to
+ present the OpenLaszlo application to the browser, are
+ sometimes called "wrapper pages."</para>
+ <para>Depending on which target runtime they're compiled for,
+ OpenLaszlo applications have different relationships with the
+ JavaScript engine of the browser in which they run. To a
+ rough approximation, LZX applications compiled to SWF are
+ foreign objects embedded into an HTML page, and you must use
+ a formal protocol to get across this logical barrier between
+ the LZX application and the JavaScript engine. Applications
+ compiled to DHTML become just a part of the HTML page that
+ contains them. From the point of view of the browser, there
+ is no difference between the OpenLaszlo application and the
+ surrounding page.</para>
+ <para>But although some of the implementation details differ
+ for the different runtime targets, the OpenLaszlo APIs are,
+ wherever possible, consistent, so that you use the same
+ programming model regardless of the target runtime. So, for
+ example, there is a method called
+ <indexterm>
+ <primary>
+ <literal>swfEmbed()</literal>
+ </primary>
+ </indexterm>
+ <methodname>swfEmbed()</methodname>for embedding SWF OL
+ applcations into the HTML page; this generates an HTML
+ <embed> tag. Similarly, there is an
+ <indexterm>
+ <primary>
+ <literal>dhtmlEmbed()</literal>
+ </primary>
+ </indexterm>
+ <methodname>dhtmlEmbed()</methodname>for placing an OL
+ application compiled to DHTML within a web page. In this case
+ there is no <embed> generated or required, but the
+ methods have similar names because they perform analogous
+ functions.</para>
+ <para />
+ </section>
+ <section>
+ <title>Applications Compiled to SWF</title>
+ <para condition="swf">Applications compiled to SWF are
+ executed by the Flash player and must make use of the
+ <indexterm>
+ <primary>LzBrowser</primary>
+ </indexterm>
+ <classname>LzBrowser</classname>service in order to "escape"
+ to the browser's JavaScript environment.</para>
+ <para>Any attributes that are declared on the canvas are
+ visible to the browser JavaScript. To go "the other way",
+ from the browser "into" the OpenLaszlo application, the
+ <indexterm>
+ <primary>
+ <literal>setCanvasAttribute()</literal>
+ </primary>
+ </indexterm>
+ <methodname>setCanvasAttribute()</methodname>and
+ <indexterm>
+ <primary>
+ <literal>setCanvasAttribute()</literal>
+ </primary>
+ </indexterm>
+ <methodname>setCanvasAttribute()</methodname>methods are
+ used.</para>
+ <para>This are discussed below.</para>
+ <para>Alhough OpenLaszlo applications deployed on the Flash
+ runtime are not dependent on the browser or operating system
+ for their look or behavior, there are some important
+ limitations that the browser container places on the
+ application. There are also a number of Flash Player features
+ that your application can use which are not available in
+ applications compiled to DHTML.</para>
+ <para>OpenLaszlo applications compiled to SWF can be sent
+ from the OpenLaszlo Server to client in any of several
+ forms:</para>
+ <itemizedlist spacing="compact">
+ <listitem>
+ <para>as "naked" swf</para>
+ </listitem>
+ <listitem>
+ <para>as swf embedded in an html "wrapper" page</para>
+ </listitem>
+ <listitem>
+ <para>as xml source</para>
+ </listitem>
+ </itemizedlist>
+ <para />
+ <section>
+ <title condition="swf">The LzBrowser service</title>
+ <para>The
+ <indexterm>
+ <primary>LzBrowser</primary>
+ </indexterm>
+ <classname>LzBrowser</classname>service provides access to
+ the browser and player environment. It includes methods to
+ load URLs in the browser and check the version of the
+ player. Furthermore, by using the
+ <literal>LzBrowser</literal>service together with other
+ OpenLaszlo functions described below, you can build
+ applications that pass information and control between the
+ OpenLaszlo application and the JavaScript of the
+ browser.</para>
+ <para>The
+ <literal>LzBrowser</literal>is always running.</para>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title condition="dhtml">Applications Compiled to
+ DHTML</title>
+ <para>Applications that are compiled for DHTML run within the
+ browser's JavaScript envinronment. They are essentially
+ compiled into the DOM of that page.</para>
+ <para>Each LZX application has exactly one
+ <indexterm>
+ <primary>canvas</primary>
+ </indexterm>
+ <sgmltag class="element"><canvas></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: canvas-->
+ element, which, when compiled to DHTML, becomes an object.
+ When you embed an LZX application compiled to DHTML into an
+ HTML page, it just becomes part of that page's DOM,and you
+ can address it directly. The "foo" object of the LZX
+ application becomes canvas.foo of the DOM. If there is a swf
+ embedded in that (DHTML) Openlaszlo application, you can
+ still use the mechanism for talking to SWF applications to
+ reach it.</para>
+ <para>For DHTML, you can call canvas JavaScript directly
+ because it is loaded in the browser. That is to say, unlike
+ in the case of communicating with SWFs, you do not need to
+ use
+ <indexterm>
+ <primary>
+ <literal>setCanvasAttribute()</literal>
+ </primary>
+ </indexterm>
+ <methodname>setCanvasAttribute()</methodname>ore
+ <indexterm>
+ <primary>
+ <literal>setCanvasAttribute()</literal>
+ </primary>
+ </indexterm>
+ <methodname>setCanvasAttribute()</methodname>, nor do you
+ need to use the
+ <indexterm>
+ <primary>LzBrowser</primary>
+ </indexterm>
+ <classname>LzBrowser</classname>service.</para>
+ <para />
+ <section>
+ <title condition="dhtml">Embedding the LFC for DHTML
+ applications</title>
+ <para>When you compile an application to SWF, the compiler
+ includes the Laszlo Foundation Class, or LFC in the
+ resulting file. This does not happen for applications
+ compiled to DHTML, therefore the LFC must be downloaded
+ explicitly. To make the LFC available to DHTML
+ applications, include the following call in the page
+ head:</para>
+ <para />
+ </section>
+ </section>
+ </section>
+ <section>
+ <title>The Lz Class</title>
+ <para>For both applications compiled to SWF and applications
+ compiled to DHTML, the methods used for bidirectional
+ communication with the browser are in the class
+ <indexterm>
+ <primary>Lz</primary>
+ </indexterm>
+ <classname>Lz</classname>. Note that the letter "L" in this
+ class is uppper case. This is not a typo!.</para>
+ <para>Unlike other OpenLaszlo classes which you use to build
+ LZX applications, the
+ <indexterm>
+ <primary>Lz</primary>
+ </indexterm>
+ <classname>Lz</classname>is designed to be incorporated into
+ the HTML page in which your LZX application runs. That is to
+ say, your LZX application is designed to be executed in the
+ <body> section of the page, but the
+ <indexterm>
+ <primary>Lz</primary>
+ </indexterm>
+ <classname>Lz</classname>must be include in the <lt;head>
+ section of the page.</para>
+ <para>The
+ <indexterm>
+ <primary>Lz</primary>
+ </indexterm>
+ <classname>Lz</classname>class is defined in</para>
+ <programlisting>
+ lps/includes/source/embednew.js</programlisting>
+ <para>The source for
+ <literal>embednew.js</literal>isshipped compressed as</para>
+ <programlisting>
+ lps/includes/embed-compressed.js.</programlisting>
+ <para>The comments/API documentation are in the source file and
+ the class is documented in the Reference Manual.</para>
+ <para>To have access to the
+ <indexterm>
+ <primary>Lz</primary>
+ </indexterm>
+ <classname>Lz</classname>class, your application must include a
+ line like</para>
+ <programlisting><script type="text/javascript"
+ src="/legals/lps/includes/embed-compressed.js"></script></programlisting>
+ <para>If you generate wrappers using the developer's console,
+ the correct <script> tag will be generated for you
+ automatically.</para>
+ <para>Remember, if you compile your application using the
+ Developer's Console, the wrapper pages generated include the
+ proper calls to the
+ <indexterm>
+ <primary>Lz</primary>
+ </indexterm>
+ <classname>Lz</classname>class. It "just works" and you don't
+ have to do anything special. If you craft your HTML pages "by
+ hand", of course, you will need to make sure that you
+ incorporate the Lz class.</para>
+ <para />
+ </section>
+ <section>
+ <title>Placing the LZX application in the HTML page</title>
+ <para>When you place a OpenLaszlo application inside an HTML
+ page, that page has to have some way to know where to place the
+ application, and how to handle it. That is, you must inform the
+ browser that the embedded OpenLaszlo application is actually a
+ SWF file, and so forth.</para>
+ <para>In the
+ <literal role="code"><html><head></literal>of an
+ HTML document that embeds an OpenLaszlo application compiled to
+ SWF, add this line:</para>
+ <example role="live-example">
+ <title>The Lz Class</title>
+ <programlisting><script src="/embed-compressed.js"
+ language="JavaScript"
+ type="text/javascript"/></programlisting>
+ </example>
+ <para condition="swf">At the location within the
+ <html><body> where the application is to be
+ embeded, add this line:</para>
+ <example role="live-example">
+ <title>Placing the LZX (SWF) application within an HTML
+ page</title>
+ <programlisting><script language="JavaScript"
+ type="text/javascript"> lz.swfEmbed({url: '?lzt=swf',
+ bgcolor: '#000000', width: '', height: ''});
+ </script></programlisting>
+ </example>
+ <para>where the url matches the URI that the application is
+ served from, and the other properties match the attributes of
+ the application's canvas.</para>
+ <para condition="dhtml">At the location within the
+ <html><body> where the application is to be
+ embeded, add this line:</para>
+ <example role="live-example">
+ <title>Placing the LZX (DHTML) application within an HTML
+ page</title>
+ <programlisting><script language="JavaScript"
+ type="text/javascript"> lz.dhtmlEmbed({url: '?lzt=swf',
+ bgcolor: '#000000', width: '', height: ''});
+ </script></programlisting>
+ </example>
+ <para>where the url matches the URI that the application is
+ served from, and the other properties match the attributes of
+ the application's canvas.</para>
+ <para />
+ <section>
+ <title>Placing LZX applications within <div>s</title>
+ <para>The optional
+ <indexterm>
+ <primary>appenddivid</primary>
+ </indexterm>
+ <sgmltag class="attribute">appenddivid</sgmltag>property can
+ be passed in to
+ <indexterm>
+ <primary>
+ <literal>swfEmbed()</literal>
+ </primary>
+ </indexterm>
+ <methodname>swfEmbed()</methodname>or
+ <indexterm>
+ <primary>
+ <literal>dhtmlEmbed()</literal>
+ </primary>
+ </indexterm>
+ <methodname>dhtmlEmbed()</methodname>method to specify the id
+ of a div whose contents should be replaced with the LZX
+ application. If a div with that ID doesn't exist, one will be
+ written into the document where
+ <literal>swf/dhtmlEmbed()</literal>is called. If appenddivid
+ is not specified, the div written will be based on the id
+ property + 'Container'.</para>
+ <para>Alternatively, you can generate wrappers by using the
+ various request types on the url you use to browse to your
+ application, as explained in
+ <xref linkend="compiler" />:</para>
+ <orderedlist spacing="compact">
+ <listitem>
+ <para>Invoke the lzx application with request type
+ "?lzt=html". This generates the "wrapper."</para>
+ </listitem>
+ <listitem>
+ <para>Using your browser's "View source" function, copy
+ the contents of the wrapper and place in a new file with
+ a .html extension.</para>
+ </listitem>
+ <listitem>
+ <para>In the head of the HTML file, you will see the
+ script tag that includes
+ <literal>embed-compressed.js</literal>Adjust the path if
+ necessary for deployment.</para>
+ </listitem>
+ <listitem>
+ <para>paste to wherever you want the OpenLaszlo
+ application to appear in HTML page</para>
+ </listitem>
+ <listitem>
+ <para>verify by running HTML file in your browser.</para>
+ </listitem>
+ </orderedlist>
+ <?ignore <p>
+ Consider the following simple OpenLaszlo application. (For now, pay no attention to the <code>onreset</code> method; we'll see it used later.):
+ </p>
+ <example title="Hello Grace!">
+ <canvas height="200" debug="true" proxied="false">
+ <attribute name="reset"/>
+ <handler name="onreset">
+ redview.unfade.dostart()
+ Debug.write('Reset Button clicked')
+ </handler>
+ <debug y="100"/>
+ <view name="redview" bgcolor="red" height="30" width="150" clip="true">
+ <animator name="fade" attribute="opacity" to=".10" duration="2000"/>
+ <animator name="unfade" attribute="opacity" to="1" duration="2000" start="false"/>
+ <text x="15"> Hello Grace!
+ <animator name="wrapper" attribute="x" to="150" duration="2000"/>
+ </text>
+ </view>
+ </canvas>
+ </example>
+ <p>
+ The wrapper page returned with by invoking it with the ?lzt=html type returns the following wrapper:
+ </p>
+ <example extract="false" title="Simple wrapper page">
+ <!DOCTYPE html
+ PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+ <html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico"><title>OpenLaszlo Application</title><script type="text/javascript">
+ // If loaded bare into a browser, set the browser size to the canvas size
+ if (window === top) {
+ (function (width, height) {
+ // Cf. http://www.quirksmode.org/viewport/compatibility.html
+ if (window.innerHeight) {
+ // Sadly, innerHeight/Width is not r/w on some browsers, and resizeTo is for outerHeight/Width
+ window.resizeTo(width ? (width + window.outerWidth - window.innerWidth) : window.outerWidth,
+ height ? (height + window.outerHeight - window.innerHeight) : window.outerHeight);
+ } else if (document.documentElement && document.documentElement.clientHeight) {
+ if (width) {
+ document.documentElement.clientWidth = width;
+ }
+ if (height) {
+ document.documentElement.clientHeight = height;
+ }
+ } else {
+ if (width) {
+ document.body.clientWidth = width;
+ }
+ if (height) {
+ document.body.clientHeight = height;
+ }
+ }
+ })(null, 200);
}
- if (height) {
- document.documentElement.clientHeight = height;
- }
- } else {
- if (width) {
- document.body.clientWidth = width;
- }
- if (height) {
- document.body.clientHeight = height;
- }
- }
- })(null, 200);
- }
- </script><script type="text/javascript">
- lzOptions = { ServerRoot: '/legals', appendDivID: 'lzdhtmlappdiv'};
- </script><script type="text/javascript" <em>src="/legals/lps/includes/embed-compressed.js"</em>></script><style type="text/css">
- html, body
- {
- /* http://www.quirksmode.org/css/100percheight.html */
- height: 100%;
- /* prevent scrollbars */
- margin: 0;
- padding: 0;
- border: 0 none;
- overflow: hidden;
- }
- body {
- background-color: #ffffff;
- }
-
- img { border: 0 none; }
- </style></head><body><script type="text/javascript">
- Lz.swfEmbed({url: 'grace.lzx?lzt=swf', bgcolor: '#ffffff', width: '100%', height: '200', id: 'lzapp', accessible: 'false'});
- </script><noscript>
- Please enable JavaScript in order to use this application.
- </noscript></body></html>
-</example>
-<p>
-Later on in this chapter we'll show how to modify this wrapper to enable more sophisticated applications.
-</p>
+ </script><script type="text/javascript">
+ lzOptions = { ServerRoot: '/legals', appendDivID: 'lzdhtmlappdiv'};
+ </script><script type="text/javascript" <em>src="/legals/lps/includes/embed-compressed.js"</em>></script><style type="text/css">
+ html, body
+ {
+ /* http://www.quirksmode.org/css/100percheight.html */
+ height: 100%;
+ /* prevent scrollbars */
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ overflow: hidden;
+ }
+ body {
+ background-color: #ffffff;
+ }
+
+ img { border: 0 none; }
+ </style></head><body><script type="text/javascript">
+ Lz.swfEmbed({url: 'grace.lzx?lzt=swf', bgcolor: '#ffffff', width: '100%', height: '200', id: 'lzapp', accessible: 'false'});
+ </script><noscript>
+ Please enable JavaScript in order to use this application.
+ </noscript></body></html>
+ </example>
+ <p>
+ Later on in this chapter we'll show how to modify this wrapper to enable more sophisticated applications.
+ </p>
-<h3>The <tagname link="false">embed</tagname> tag</h3>
+ <h3>The <tagname link="false">embed</tagname> tag</h3>
-<p>To embed OpenLaszlo applications in HTML pages, you use
-<tagname>embed</tagname> tag. The mechanics of this can be handled automatically as we have seen above. For your reference,
-here's a sample embed object:</p>
+ <p>To embed OpenLaszlo applications in HTML pages, you use
+ <tagname>embed</tagname> tag. The mechanics of this can be handled automatically as we have seen above. For your reference,
+ here's a sample embed object:</p>
-<example extract="false" title="The embed tag">
-<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
- codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
- width="705"
- height="80">
- <param name="movie" value="OpenLaszloapplication.lzx?lzt=swf">
- <param name="quality" value="high">
- <param name="scale" value="noscale">
- <param name="salign" value="LT">
- <param name="menu" value="false">
- <param name="bgcolor" value="#394660">
- <embed src="OpenLaszloapplication.lzx?lzt=swf"
- scale="noscale"
- salign="lt"
- width="705"
- height="80"
- bgcolor="#394660"
- type="application/x-shockwave-flash"
- pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
- </embed>
-</object>
-</example>
-?>
-
-<para/></section><section><title>Detecting which flash player is running</title>
-<para>
-The default wrapper page contains logic to detect the version of flash running on the client.</para>
-<para>
-This page that will look something like the following:</para>
-<example role="live-example"><title>Flash player version-detecting wrapper</title><programlisting>
-<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis></remark></para>
-</programlisting></example>
-
-<para>Depending on which version is running, you may wish to use some LZX features that run in some, but not all, versions
-of the Flash Player.</para>
-<para/><section><title>Version detection</title>
-<para>
-OpenLaszlo uses client-side player detection. If the user either a) doesn't have the Flash Player plug-in or b) has an older version,
-they'll be prompted to download a fresh version. This feature is included in the default HTML wrappers for lzt=html and the SOLO
-deployment wizard
-</para>
-<para/></section><section><title>Features available only in Flash 7 or later </title>
-<para>
-The following features are available only in the Flash 7 or later environments:</para>
-<itemizedlist spacing="compact"><listitem><para>Support for the html <img> tag</para></listitem><listitem><para>Support for context ("right-click") menus</para></listitem></itemizedlist>
-
-
-
-
-
-
-<para/></section></section></section><section><title>Integrating with Frames</title>
-<para>Frames are a very handy way to use OpenLaszlo applications within a
-page. If you are using a OpenLaszlo application for your navigation or
-as a widget in your page you might consider using frames to format your layout.</para>
-
-<para/><section><title>Frame Sets</title>
-<para>When laying out a page that will use OpenLaszlo applications in
-different places, you can use a frameset like this:</para>
-
-<example role="live-example"><title>example frameset</title><programlisting>
-<html>
-<frameset cols="128,*">
- <frame name="navBar" src="myOpenLaszloNav.lzx?lzt=html" />
- <frame name="contentArea" src="myOpenLaszloContent.lzx?lzt=html" />
-</frameset>
-</html>
-</programlisting></example>
-
-<para>Inside your application use the target parameter of <indexterm><primary><literal>LzBrowser.LoadURL()</literal></primary></indexterm><methodname>LzBrowser.LoadURL()</methodname>
-to load pages in the target frame.</para>
-<example role="live-example"><title>target in loadURL</title><programlisting>
-LzBrowser.loadURL('http://www.laszlosystems.com','contentArea');
-</programlisting></example>
-
-<para/></section><section><title>Inline Frames</title>
-<para>Like framesets, OpenLaszlo applications can be embedded within an "inline frame" or <iframe> which can be more flexible for
-your layout and easier to use. Like regular frames, inline frames can be named for later reference by the OpenLaszlo application.</para>
-
-<example role="live-example"><title>iframes and applications</title><programlisting>
-<html>
- <body>
- <h1>Here is a header</h1>
- <div align="center">
- <iframe src="myOpenLaszloApplication.lzx?lzt=html" width="200" height="200"
- frameborder="0" name="inlineApplication" scrolling="no"/>
- </div>
- </body>
-</html>
-</programlisting></example>
-
-<para>Bear in mind that the iframe will contain a canvas, and unless
-you want the browser to provide scrollbars, you should set the width
-and height equal to that of your canvas plus any margin you may
-have included.</para>
-
-<para/></section><section><title>Popping and reusing browser windows</title>
-<para>The same way you would target content to a frame, you can
-target the loadUrl to new window.</para>
-
-<example role="live-example">
- <title>new blank browser window</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/browser-integration-$8.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>new Blank window</title><programlisting role="lzx-embednew"><filename>browser-integration-$8.lzx</filename><parameter/><code>
-<canvas height="27" >
- <button onclick="LzBrowser.loadURL('http://www.laszlosystems.com','_blank');" text="Click Me!"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="27" >
- <button onclick="LzBrowser.loadURL('http://www.laszlosystems.com','_blank');" text="Click Me!"/>
-</canvas>
-</programlisting><?lzx-edit programs/browser-integration-$8.lzx></example?>
-
-<para>This mechanism can also be used to name the window allowing subsequent loads to occur in the same window</para>
-
-<example role="live-example">
- <title>reusing new browswer window</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/browser-integration-$9.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>new Blank window</title><programlisting role="lzx-embednew"><filename>browser-integration-$9.lzx</filename><parameter/><code>
-<canvas height="56" >
- <simplelayout/>
- <button onclick="LzBrowser.loadURL('http://www.openlaszlo.org','newOpenLaszloWindow');" text="OpenLaszlo Homepage"/>
- <button onclick="LzBrowser.loadURL('http://www.mylaszlo.com','newOpenLaszloWindow');" text="myLaszlo.com"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="56" >
- <simplelayout/>
- <button onclick="LzBrowser.loadURL('http://www.openlaszlo.org','newOpenLaszloWindow');" text="OpenLaszlo Homepage"/>
- <button onclick="LzBrowser.loadURL('http://www.mylaszlo.com','newOpenLaszloWindow');" text="myLaszlo.com"/>
-</canvas>
-</programlisting><?lzx-edit programs/browser-integration-$9.lzx></example?>
-
-
-
-
-<para/></section></section><section><title>Passing startup Data to Embedded Applications</title>
-<para>Any query parameters that you add to the end of your url to load
-the application get passed into the application as globals.</para>
-
-<example role="live-example"><title>Passing query parameters to LZX application</title><programlisting>
-<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis>example showing passing of parameters</remark></para>
-</programlisting></example>
-
-<para/><section><title>Query Parameters and Global Variables</title>
-<para>Once the data has been passed in you can simply access it as a
-global variable from within the OpenLaszlo application.</para>
-
-<example role="live-example"><title>Accessing parameters</title><programlisting>
-<canvas debug="true" oninit="Debug.write(globalVar)"/>
-</programlisting></example>
-
-<para>In many cases you will have full control of the HTML content
-that is embedding your application. In many other cases you won't be able
-to depend on the existence of those query parameters so it is wise
-to provide sane defaults for those values:</para>
-
-<example role="live-example">
- <title>setting defaluts</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/browser-integration.setting-defaults.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Setting defaults</title><programlisting role="lzx-embednew"><filename>browser-integration.setting-defaults.lzx</filename><parameter/><code>
-<canvas debug="true" width="200" height="200">
- <script>
- var innerVar = typeof(global.globalVar) != 'undefined' ? global.globalVar : 'bar';
- Debug.write(global.innerVar);
- </script>
-</canvas>
-</code></programlisting><programlisting>
-<canvas debug="true" width="200" height="200">
- <script>
- var innerVar = typeof(global.globalVar) != 'undefined' ? global.globalVar : 'bar';
- Debug.write(global.innerVar);
- </script>
-</canvas>
-</programlisting><?lzx-edit programs/browser-integration.setting-defaults.lzx></example?>
-
-<para>The above application is requested without a <literal>globalVar</literal>
-query parameter. The debugger therefore displays the default
-value <literal>bar</literal>. If this application is requested with the
-<literal>globalVar=foo</literal> query parameter, it will display the
-default value 'bar'. Click <ulink type="onclick" url="javascript:window.open('programs/browser-integration.setting-defaults.lzx?lzt=swf&globalVar=foo','example','resizable=0,width=200,height=200,menubar=0,location=0,status=0,scrollbars=0,toolbar=0,address=0')">here</ulink>
-to see the application in a popup window with the query
-parameter applied.</para>
-
-<para/></section><section><title>Application state</title>
-<para>Using query parameters, you can craft your application to start
-up in a specific state. The default behavior of a tabslider is to
-have none of the tabelements opened at startup. The following
-application changes that default to open to the tab specified on the query parameter,
-and if one isn't provided, open to the first element.</para>
-
-<example role="live-example">
- <title>setting defaluts</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/browser-integration.restoring-state.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Restoring state</title><programlisting role="lzx-embednew"><filename>browser-integration.restoring-state.lzx</filename><parameter/><code>
-<canvas width="300" height="250">
- <script>
- var opened = typeof(global.tab) != 'undefined' ? global.tab : 'one';
- </script>
- <tabslider width="150" x="10" y="10"
- height="200"
- spacing="2" slideduration="300" oninit="this[global.opened].setAttribute('selected',true)">
- <tabelement name="one" text="Tabelement One"/>
- <tabelement name="two" text="Tabelement Two"/>
- <tabelement name="three" text="Tabelement Three"/>
- </tabslider>
-</canvas>
-</code></programlisting><programlisting>
-<canvas width="300" height="250">
- <script>
- var opened = typeof(global.tab) != 'undefined' ? global.tab : 'one';
- </script>
- <tabslider width="150" x="10" y="10"
- height="200"
- spacing="2" slideduration="300" oninit="this[global.opened].setAttribute('selected',true)">
- <tabelement name="one" text="Tabelement One"/>
- <tabelement name="two" text="Tabelement Two"/>
- <tabelement name="three" text="Tabelement Three"/>
- </tabslider>
-</canvas>
-</programlisting><?lzx-edit programs/browser-integration.restoring-state.lzx></example?>
-
-<para>Click <ulink type="onclick" url="javascript:window.open('programs/browser-integration.restoring-state.lzx?lzt=swf&tab=two','example','resizable=0,width=200,height=250,menubar=0,location=0,status=0,scrollbars=0,toolbar=0,address=0')">here</ulink>
-to see this application in a popup with a different initial state
-applied. This is useful when creating links from outside the
-application, or for creating a bookmark for an
-application. Another thing to do is read browser cookies from
-JavaScript and pass in the parameters when calling the application.
-</para>
-
-
-
-
-<para/></section></section><section><title>Supporting Multiple Resolutions</title>
-<para>Most web surfers have discovered the merits of high resolution
-displays. Some, though, still view the web using very low
-resolutions. OpenLaszlo applications can be written in a way that allows for
-multiple resolution versions of the same application to coexist using the
-same codebase.</para>
-
-<para>Begin by creating your application in a library file instead of a
-canvas, but use <literal>$once{}</literal> constraints to size the
-visual elements relative to the canvas.</para>
-
-<example role="live-example"><title>Multi-canvas application library</title><programlisting>
-mainApplication.lzx:
-<library>
- <tabslider width="$once{canvas.width - 20}" x="10" y="10"
- height="$once{canvas.height - 20}"
- spacing="2" slideduration="300">
- <tabelement name="one" text="Tabelement One"/>
- <tabelement name="two" text="Tabelement Two"/>
- <tabelement name="three" text="Tabelement Three"/>
- </tabslider>
-</library>
-</programlisting></example>
-
-<para>Then create multiple files, one for each canvas area you wish
-to support.</para>
-
-<example role="live-example"><title>Multi-canvas application files</title><programlisting>
-mainApplication640.lzx:
-<canvas width="640" height="480">
- <include href="mainApplication.lzx"/>
-</canvas>
-
-mainApplication800.lzx:
-<canvas width="800" height="600">
- <include href="mainApplication.lzx"/>
-</canvas>
-
-mainApplication1024.lzx:
-<canvas width="1024" height="768">
- <include href="mainApplication.lzx"/>
-</canvas>
-
-mainApplication1280.lzx:
-<canvas width="1280" height="1024">
- <include href="mainApplication.lzx"/>
-</canvas>
-</programlisting></example>
-
-<para>For real world deployments, you will want to set the size of
-your canvas to account for screen area occupied by browser
-controls. Selecting the correct application size
-requires some JavaScript to pick the right application when the visitor
-comes to the page. This example keys off the screen width which
-will help you determine with high accuracy the height of the
-client as well.</para>
-
-<example role="live-example"><title>Selecting the Correct Canvas</title><programlisting>
-<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis>this is broken</remark></para>
-<script type="text/javascript">
-var screenW = screen.width;
-var screenH =0;
-switch (true) {
- case (screenW >= 1280):
- screenW = 1280;
- screenH = 1024;
- break;
- case (screenW >= 1024):
- screenW = 1024;
- screenH = 768;
- break;
- case (screenW >= 800):
- screenW = 800;
- screenH = 600;
- break;
- default:
- screenW = 640;
- screenH = 480;
- break;
-}
-lzEmbed({url: 'mainApplication'+screenW+'.lzx?lzt=swf', bgcolor: '#394660', width: screenW, height: screenH});
-</script>
-</programlisting></example>
-
-
-
-
-
-
-
-
-<title>Example: building a URL</title>
-<para>
-The <methodname role="LzBrowser.prototype.loadURL">loadURL()</methodname> method is used
-to create a URL based on user input. This URL is then communicated to browser, where a JavaScript function is
-used to unpack it and fill in a form. The wrapper page is shown immediately below.
-</para>
-<informalexample role="live-example"><programlisting>
-<canvas width="200" height="400">
- <attribute name="appear" type="number" value="0" />
- <handler name="onappear">
- win.show.doStart();
- </handler>
-
- <window id="win" title="Create and Account"
- y="-300"
- width="180" height="300">
- <animator name="show" attribute="y" from="-300" to="50"
- start="false" relative="false" duration="500" />
- <animator name="hide" attribute="y" from="50" to="-300"
- start="false" relative="false" duration="500" />
- <simplelayout axis="y" spacing="4" />
-
- <state name="question" apply="true">
- <text multiline="true" width="160" align="center">
- It looks like you don't have an account. Would you
- like to create one now?
- </text>
- <button>Go
- <handler name="onclick">
- parent.question.remove();
- parent.signup.apply();
- </handler>
- </button>
- </state>
- <state name="signup">
- <text>Name:</text>
- <edittext />
- <text>Email:</text>
- <edittext />
- <text>Username:</text>
- <edittext name="uname"/>
- <text>Password:</text>
- <edittext name="pass" />
- <button>Create Account
- <handler name="onclick">
- var s = "javascript:fillFormValues('"
- + parent.uname.getText()
- + "', '" + parent.pass.getText()
- + "')";
- LzBrowser.loadURL(s);
- parent.hide.doStart();
- </handler>
- </button>
- </state>
- </window>
-</canvas>
-</programlisting></informalexample>
-
-
-<para/></section><section><title>Using the browser's "back" button</title>
-<para>
-The <indexterm><primary>LzHistory</primary></indexterm><classname>LzHistory</classname> service allows you to preserve the state of your application, and then use the "back" button of the
-browser to move among such states.
-</para>
-<para>
-The default wrapper page
-enables the
-back button and browser-to-LZX communication. Once you've got this, you can call the browser javascript method
-</para>
-<programlisting>
- javascript:lzSetCanvasAttribute(attributeName, value)
-</programlisting>
-<para>
-to set a canvas attribute and send an event. The following example shows the way the <indexterm><primary>LzHistory</primary></indexterm><classname>LzHistory</classname> service works
-to move among states. To see the program in action, copy this code to your applications directory.
-
-</para>
-<example role="live-example"><title>Communicating with Back button</title><programlisting>
-<canvas width="1400" height="600" debug="true">
- <debug width="500" height="500" fontsize="12" x="450"/>
-
- <!-- Click on blob START, STATE_2, STATE_3, END, then click browser back button -->
-
- <!-- a blob you can click on to select -->
- <class name="blob" extends="drawview" width="100" height="100">
- <attribute name="title" type="text"/>
- <attribute name="selected" type="boolean" />
- <text y="20" x="4" fontsize="16" text="${parent.title}"/>
- <handler name="onclick">
- this.setAttribute('selected', true);
- main.selectBlob(this);
- </handler>
-
- <method name="select" args="val">
- if (val) {
- // draw a border to select
- this.lineStyle = 0x000000;
- this.lineWidth = 4;
- moveTo(0,0);
- lineTo(0,100);
- lineTo(100,100);
- lineTo(100,0);
- lineTo(0,0);
- stroke();
- } else {
- clear();
- }
- </method>
-
- </class>
-
- <!-- A view with four states -->
- <view id="main" x="10" y="10" layout="axis: x; spacing: 10">
- <attribute name="mystate" type="string" value="START"/>
-
- <blob bgcolor="#ffcccc" id="s1" title="START"/>
- <blob bgcolor="#ccccff" id="s2" title="STATE_2"/>
- <blob bgcolor="#ccffcc" id="s3" title="STATE_3"/>
- <blob bgcolor="#cccccc" id="s4" title="END"/>
-
- <method name="unselectAll">
- s1.select(false);
- s2.select(false);
- s3.select(false);
- s4.select(false);
- </method>
-
- <method name="selectBlob" args="blob">
- <emphasis role="em">// save the old state
- LzHistory.next();</emphasis>
- setAttribute('mystate', blob.title);
- unselectAll();
- blob.select(true);
- recordState(blob.title);
- </method>
-
- <handler name="oninit">
- unselectAll();
- recordState("START");
- selectBlob(s1);
- </handler>
-
- <handler name="onmystate">
- Debug.write("got onmystate event: ", this.mystate);
- gotoState(this.mystate);
- </handler>
-
- <method name="recordState" args="newstate">
- this.mystate = newstate;
- <emphasis role="em"> LzHistory.save(this,'mystate', this.mystate);</emphasis>
- Debug.write("recordState", newstate)
- </method>
-
- <method name="gotoState" args="ns">
- unselectAll();
- if (ns == "START") {
- s1.select(true);
- } else if (ns == "STATE_2") {
- s2.select(true);
- } else if (ns == "STATE_3") {
- s3.select(true);
- } else if (ns == "END") {
- s4.select(true);
- }
- </method>
- </view>
-
-</canvas>
-
-</programlisting></example>
-<para/></section><section><title>Scaling OpenLaszlo Applications to Browser Dimensions</title>
-<para>
-You can make the canvas of the OpenLaszlo application either a fixed size, or you can make it expand or contract as the browser window expands or contracts.
-To make the canvas an absolute size, set its height and width with integer values, for example, <literal>width="40" height="40"</literal>. To have the canvas scale,
-simply express the height and width as percentages.</para>
-
-
-
-<para/></section><section><title>Browser Limitations</title>
-<para>Intercepting keystrokes can pose some challenges. The keys
-that are intercepted varies from browser to browser, but anything
-that the browser defines will not be passed to your OpenLaszlo
-application. Mozilla Firefox seems to do this correctly, but many
-browsers won't pass alt and ctrl key combinations down to the application. The
-application below should demonstrate this, [Ctrl-n] in many browsers is
-the command you use to open a new browser window. In Mozilla
-Firefox, you can get the debugger to print the right message, but
-only if your mouse is floating over the application.</para>
-
-<example role="live-example">
- <title>Intercepting keystrokes</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/browser-integration-$19.lzx"/></textobject>
- </programlisting>
-</example>
-<?informalexample role="live-example"><programlisting role="lzx-embednew"><filename>browser-integration-$19.lzx</filename><parameter/><code>
-<canvas height="130" debug="true">
- <command oninit="this.setKeys(['Control','n'])"
- onselect="Debug.write('the [Ctrl-n] key combination was pressed');" />
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="130" debug="true">
- <command oninit="this.setKeys(['Control','n'])"
- onselect="Debug.write('the [Ctrl-n] key combination was pressed');" />
-</canvas>
-</programlisting><?lzx-edit programs/browser-integration-$19.lzx></informalexample?>
-
-<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis>Safari caching info goes here</remark></para>
-<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis>
-not all browsers support transparency of Flash over html. In those cases changing the background color has no effect.
-canvas transparent by default -- so bgcolor should be respected by rendering browser. Default bgcolor comes from canvas, if set.
-Two classes of browsers
--- active x
--- plug ing
-
-Windows browsers often active x exception is open source mozilla(s)
-
-Active X -- uses object tag
-others use embed tag
-
-so, "Wrapper" page must include info for BOTH types.
-
-Esoteric combinations exist, but we generate code for general cases.
-
-what we send depends on request type. If lzt=swf then we just send swf. Else, we send and html page (of some form -- link to chapter on lps request types.)
-
-</remark></para>
-
-
-
-
-
-
-
-
-
-
- <para/></section></chapter>
+ <example extract="false" title="The embed tag">
+ <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+ codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
+ width="705"
+ height="80">
+ <param name="movie" value="OpenLaszloapplication.lzx?lzt=swf">
+ <param name="quality" value="high">
+ <param name="scale" value="noscale">
+ <param name="salign" value="LT">
+ <param name="menu" value="false">
+ <param name="bgcolor" value="#394660">
+ <embed src="OpenLaszloapplication.lzx?lzt=swf"
+ scale="noscale"
+ salign="lt"
+ width="705"
+ height="80"
+ bgcolor="#394660"
+ type="application/x-shockwave-flash"
+ pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
+ </embed>
+ </object>
+ </example>
+ ?>
+ <para />
+ </section>
+ <section>
+ <title>Detecting which flash player is running</title>
+ <para>The default wrapper page contains logic to detect the
+ version of flash running on the client.</para>
+ <para>This page that will look something like the
+ following:</para>
+ <example role="live-example">
+ <title>Flash player version-detecting wrapper</title>
+ <programlisting>
+ <!-- remove para tags for valid DocBook LI, LPP-4594 9/3/2007 -->
+ <!-- para is not a legal child of programlisting -->
+ <!-- <para role="fixme"> -->
+ <remark role="fixme">
+ <emphasis role="para-label">FIXME:</emphasis>
+ </remark>
+ <!-- </para> -->
+ </programlisting>
+ </example>
+ <para>Depending on which version is running, you may wish to
+ use some LZX features that run in some, but not all, versions
+ of the Flash Player.</para>
+ <para />
+ <section>
+ <title>Version detection</title>
+ <para>OpenLaszlo uses client-side player detection. If the
+ user either a) doesn't have the Flash Player plug-in or b)
+ has an older version, they'll be prompted to download a
+ fresh version. This feature is included in the default HTML
+ wrappers for lzt=html and the SOLO deployment wizard</para>
+ <para />
+ </section>
+ <section>
+ <title>Features available only in Flash 7 or later</title>
+ <para>The following features are available only in the
+ Flash 7 or later environments:</para>
+ <itemizedlist spacing="compact">
+ <listitem>
+ <para>Support for the html <img> tag</para>
+ </listitem>
+ <listitem>
+ <para>Support for context ("right-click") menus</para>
+ </listitem>
+ </itemizedlist>
+ <para />
+ </section>
+ </section>
+ </section>
+ <section>
+ <title>Integrating with Frames</title>
+ <para>Frames are a very handy way to use OpenLaszlo
+ applications within a page. If you are using a OpenLaszlo
+ application for your navigation or as a widget in your page you
+ might consider using frames to format your layout.</para>
+ <para />
+ <section>
+ <title>Frame Sets</title>
+ <para>When laying out a page that will use OpenLaszlo
+ applications in different places, you can use a frameset like
+ this:</para>
+ <example role="live-example">
+ <title>example frameset</title>
+ <programlisting><html> <frameset cols="128,*">
+ <frame name="navBar" src="myOpenLaszloNav.lzx?lzt=html"
+ /> <frame name="contentArea"
+ src="myOpenLaszloContent.lzx?lzt=html" />
+ </frameset> </html></programlisting>
+ </example>
+ <para>Inside your application use the target parameter of
+ <indexterm>
+ <primary>
+ <literal>LzBrowser.LoadURL()</literal>
+ </primary>
+ </indexterm>
+ <methodname>LzBrowser.LoadURL()</methodname>to load pages in
+ the target frame.</para>
+ <example role="live-example">
+ <title>target in loadURL</title>
+ <programlisting>
+ LzBrowser.loadURL('http://www.laszlosystems.com','contentArea');</programlisting>
+ </example>
+ <para />
+ </section>
+ <section>
+ <title>Inline Frames</title>
+ <para>Like framesets, OpenLaszlo applications can be embedded
+ within an "inline frame" or <iframe> which can be more
+ flexible for your layout and easier to use. Like regular
+ frames, inline frames can be named for later reference by the
+ OpenLaszlo application.</para>
+ <example role="live-example">
+ <title>iframes and applications</title>
+ <programlisting><html> <body> <h1>Here is
+ a header</h1> <div align="center"> <iframe
+ src="myOpenLaszloApplication.lzx?lzt=html" width="200"
+ height="200" frameborder="0" name="inlineApplication"
+ scrolling="no"/> </div> </body>
+ </html></programlisting>
+ </example>
+ <para>Bear in mind that the iframe will contain a canvas, and
+ unless you want the browser to provide scrollbars, you should
+ set the width and height equal to that of your canvas plus
+ any margin you may have included.</para>
+ <para />
+ </section>
+ <section>
+ <title>Popping and reusing browser windows</title>
+ <para>The same way you would target content to a frame, you
+ can target the loadUrl to new window.</para>
+ <example role="live-example">
+ <title>new blank browser window</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/browser-integration-$8.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>new Blank window</title><programlisting role="lzx-embednew"><filename>browser-integration-$8.lzx</filename><parameter/><code>
+ <canvas height="27" >
+ <button onclick="LzBrowser.loadURL('http://www.laszlosystems.com','_blank');" text="Click Me!"/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="27" >
+ <button onclick="LzBrowser.loadURL('http://www.laszlosystems.com','_blank');" text="Click Me!"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/browser-integration-$8.lzx></example?>
+ <para>This mechanism can also be used to name the window
+ allowing subsequent loads to occur in the same window</para>
+ <example role="live-example">
+ <title>reusing new browswer window</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/browser-integration-$9.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>new Blank window</title><programlisting role="lzx-embednew"><filename>browser-integration-$9.lzx</filename><parameter/><code>
+ <canvas height="56" >
+ <simplelayout/>
+ <button onclick="LzBrowser.loadURL('http://www.openlaszlo.org','newOpenLaszloWindow');" text="OpenLaszlo Homepage"/>
+ <button onclick="LzBrowser.loadURL('http://www.mylaszlo.com','newOpenLaszloWindow');" text="myLaszlo.com"/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="56" >
+ <simplelayout/>
+ <button onclick="LzBrowser.loadURL('http://www.openlaszlo.org','newOpenLaszloWindow');" text="OpenLaszlo Homepage"/>
+ <button onclick="LzBrowser.loadURL('http://www.mylaszlo.com','newOpenLaszloWindow');" text="myLaszlo.com"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/browser-integration-$9.lzx></example?>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title>Passing startup Data to Embedded Applications</title>
+ <para>Any query parameters that you add to the end of your url
+ to load the application get passed into the application as
+ globals.</para>
+ <example role="live-example">
+ <title>Passing query parameters to LZX application</title>
+ <programlisting>
+ <!-- remove para tags for valid DocBook LI, LPP-4594 9/3/2007 -->
+ <!-- para is not a legal child of programlisting -->
+ <!-- <para role="fixme"> -->
+ <remark role="fixme">
+ <emphasis role="para-label">FIXME:</emphasis>example
+ showing passing of parameters</remark>
+ <!-- </para> -->
+ </programlisting>
+ </example>
+ <para />
+ <section>
+ <title>Query Parameters and Global Variables</title>
+ <para>Once the data has been passed in you can simply access
+ it as a global variable from within the OpenLaszlo
+ application.</para>
+ <example role="live-example">
+ <title>Accessing parameters</title>
+ <programlisting><canvas debug="true"
+ oninit="Debug.write(globalVar)"/></programlisting>
+ </example>
+ <para>In many cases you will have full control of the HTML
+ content that is embedding your application. In many other
+ cases you won't be able to depend on the existence of those
+ query parameters so it is wise to provide sane defaults for
+ those values:</para>
+ <example role="live-example">
+ <title>setting defaluts</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/browser-integration.setting-defaults.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Setting defaults</title><programlisting role="lzx-embednew"><filename>browser-integration.setting-defaults.lzx</filename><parameter/><code>
+ <canvas debug="true" width="200" height="200">
+ <script>
+ var innerVar = typeof(global.globalVar) != 'undefined' ? global.globalVar : 'bar';
+ Debug.write(global.innerVar);
+ </script>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas debug="true" width="200" height="200">
+ <script>
+ var innerVar = typeof(global.globalVar) != 'undefined' ? global.globalVar : 'bar';
+ Debug.write(global.innerVar);
+ </script>
+ </canvas>
+ </programlisting><?lzx-edit programs/browser-integration.setting-defaults.lzx></example?>
+ <para>The above application is requested without a
+ <literal>globalVar</literal>query parameter. The debugger
+ therefore displays the default value
+ <literal>bar</literal>. If this application is requested with
+ the
+ <literal>globalVar=foo</literal>query parameter, it will
+ display the default value 'bar'. Click
+ <ulink type="onclick"
+ url="javascript:window.open('programs/browser-integration.setting-defaults.lzx?lzt=swf&globalVar=foo','example','resizable=0,width=200,height=200,menubar=0,location=0,status=0,scrollbars=0,toolbar=0,address=0')">
+ here</ulink>to see the application in a popup window with the
+ query parameter applied.</para>
+ <para />
+ </section>
+ <section>
+ <title>Application state</title>
+ <para>Using query parameters, you can craft your application
+ to start up in a specific state. The default behavior of a
+ tabslider is to have none of the tabelements opened at
+ startup. The following application changes that default to
+ open to the tab specified on the query parameter, and if one
+ isn't provided, open to the first element.</para>
+ <example role="live-example">
+ <title>setting defaluts</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/browser-integration.restoring-state.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Restoring state</title><programlisting role="lzx-embednew"><filename>browser-integration.restoring-state.lzx</filename><parameter/><code>
+ <canvas width="300" height="250">
+ <script>
+ var opened = typeof(global.tab) != 'undefined' ? global.tab : 'one';
+ </script>
+ <tabslider width="150" x="10" y="10"
+ height="200"
+ spacing="2" slideduration="300" oninit="this[global.opened].setAttribute('selected',true)">
+ <tabelement name="one" text="Tabelement One"/>
+ <tabelement name="two" text="Tabelement Two"/>
+ <tabelement name="three" text="Tabelement Three"/>
+ </tabslider>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas width="300" height="250">
+ <script>
+ var opened = typeof(global.tab) != 'undefined' ? global.tab : 'one';
+ </script>
+ <tabslider width="150" x="10" y="10"
+ height="200"
+ spacing="2" slideduration="300" oninit="this[global.opened].setAttribute('selected',true)">
+ <tabelement name="one" text="Tabelement One"/>
+ <tabelement name="two" text="Tabelement Two"/>
+ <tabelement name="three" text="Tabelement Three"/>
+ </tabslider>
+ </canvas>
+ </programlisting><?lzx-edit programs/browser-integration.restoring-state.lzx></example?>
+ <para>Click
+ <ulink type="onclick"
+ url="javascript:window.open('programs/browser-integration.restoring-state.lzx?lzt=swf&tab=two','example','resizable=0,width=200,height=250,menubar=0,location=0,status=0,scrollbars=0,toolbar=0,address=0')">
+ here</ulink>to see this application in a popup with a
+ different initial state applied. This is useful when creating
+ links from outside the application, or for creating a
+ bookmark for an application. Another thing to do is read
+ browser cookies from JavaScript and pass in the parameters
+ when calling the application.</para>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title>Supporting Multiple Resolutions</title>
+ <para>Most web surfers have discovered the merits of high
+ resolution displays. Some, though, still view the web using
+ very low resolutions. OpenLaszlo applications can be written in
+ a way that allows for multiple resolution versions of the same
+ application to coexist using the same codebase.</para>
+ <para>Begin by creating your application in a library file
+ instead of a canvas, but use
+ <literal>$once{}</literal>constraints to size the visual
+ elements relative to the canvas.</para>
+ <example role="live-example">
+ <title>Multi-canvas application library</title>
+ <programlisting>mainApplication.lzx: <library>
+ <tabslider width="$once{canvas.width - 20}" x="10" y="10"
+ height="$once{canvas.height - 20}" spacing="2"
+ slideduration="300"> <tabelement name="one"
+ text="Tabelement One"/> <tabelement name="two"
+ text="Tabelement Two"/> <tabelement name="three"
+ text="Tabelement Three"/> </tabslider>
+ </library></programlisting>
+ </example>
+ <para>Then create multiple files, one for each canvas area you
+ wish to support.</para>
+ <example role="live-example">
+ <title>Multi-canvas application files</title>
+ <programlisting>mainApplication640.lzx: <canvas
+ width="640" height="480"> <include
+ href="mainApplication.lzx"/> </canvas>
+ mainApplication800.lzx: <canvas width="800"
+ height="600"> <include href="mainApplication.lzx"/>
+ </canvas> mainApplication1024.lzx: <canvas
+ width="1024" height="768"> <include
+ href="mainApplication.lzx"/> </canvas>
+ mainApplication1280.lzx: <canvas width="1280"
+ height="1024"> <include href="mainApplication.lzx"/>
+ </canvas></programlisting>
+ </example>
+ <para>For real world deployments, you will want to set the size
+ of your canvas to account for screen area occupied by browser
+ controls. Selecting the correct application size requires some
+ JavaScript to pick the right application when the visitor comes
+ to the page. This example keys off the screen width which will
+ help you determine with high accuracy the height of the client
+ as well.</para>
+ <example role="live-example">
+ <title>Selecting the Correct Canvas</title>
+ <programlisting>
+ <!-- remove para tags for valid DocBook LI, LPP-4594 9/3/2007 -->
+ <!-- para is not a legal child of programlisting -->
+ <!-- <para role="fixme"> -->
+ <remark role="fixme">
+ <emphasis role="para-label">FIXME:</emphasis>this is
+ broken</remark>
+ <!-- </para> -->
+ <script type="text/javascript"> var screenW =
+ screen.width; var screenH =0; switch (true) { case (screenW
+ >= 1280): screenW = 1280; screenH = 1024; break; case
+ (screenW >= 1024): screenW = 1024; screenH = 768; break;
+ case (screenW >= 800): screenW = 800; screenH = 600;
+ break; default: screenW = 640; screenH = 480; break; }
+ lzEmbed({url: 'mainApplication'+screenW+'.lzx?lzt=swf',
+ bgcolor: '#394660', width: screenW, height: screenH});
+ </script></programlisting>
+ </example>
+ <!-- move title to the next example. title is hot valid here -->
+ <!-- <title>Example: building a URL</title> -->
+ <para>The
+ <methodname role="LzBrowser.prototype.loadURL">
+ loadURL()</methodname>method is used to create a URL based on
+ user input. This URL is then communicated to browser, where a
+ JavaScript function is used to unpack it and fill in a form.
+ The wrapper page is shown immediately below.</para>
+ <!-- change to example to include title LI, LPP-4594 9/3/2007 -->
+ <!-- <informalexample role="live-example"> -->
+ <example role="live-example">
+ <title>Example: building a URL</title>
+ <programlisting><canvas width="200" height="400">
+ <attribute name="appear" type="number" value="0" />
+ <handler name="onappear"> win.show.doStart();
+ </handler> <window id="win" title="Create and
+ Account" y="-300" width="180" height="300"> <animator
+ name="show" attribute="y" from="-300" to="50" start="false"
+ relative="false" duration="500" /> <animator
+ name="hide" attribute="y" from="50" to="-300" start="false"
+ relative="false" duration="500" /> <simplelayout
+ axis="y" spacing="4" /> <state name="question"
+ apply="true"> <text multiline="true" width="160"
+ align="center"> It looks like you don't have an account.
+ Would you like to create one now? </text>
+ <button>Go <handler name="onclick">
+ parent.question.remove(); parent.signup.apply();
+ </handler> </button> </state> <state
+ name="signup"> <text>Name:</text> <edittext
+ /> <text>Email:</text> <edittext />
+ <text>Username:</text> <edittext
+ name="uname"/> <text>Password:</text>
+ <edittext name="pass" /> <button>Create Account
+ <handler name="onclick"> var s =
+ "javascript:fillFormValues('" + parent.uname.getText() + "',
+ '" + parent.pass.getText() + "')"; LzBrowser.loadURL(s);
+ parent.hide.doStart(); </handler> </button>
+ </state> </window>
+ </canvas></programlisting>
+ </example>
+ <para />
+ </section>
+ <section>
+ <title>Using the browser's "back" button</title>
+ <para>The
+ <indexterm>
+ <primary>LzHistory</primary>
+ </indexterm>
+ <classname>LzHistory</classname>service allows you to preserve
+ the state of your application, and then use the "back" button
+ of the browser to move among such states.</para>
+ <para>The default wrapper page enables the back button and
+ browser-to-LZX communication. Once you've got this, you can
+ call the browser javascript method</para>
+ <programlisting>javascript:lzSetCanvasAttribute(attributeName,
+ value)</programlisting>
+ <para>to set a canvas attribute and send an event. The
+ following example shows the way the
+ <indexterm>
+ <primary>LzHistory</primary>
+ </indexterm>
+ <classname>LzHistory</classname>service works to move among
+ states. To see the program in action, copy this code to your
+ applications directory.</para>
+ <example role="live-example">
+ <title>Communicating with Back button</title>
+ <programlisting><canvas width="1400" height="600"
+ debug="true"> <debug width="500" height="500"
+ fontsize="12" x="450"/> <!-- Click on blob START,
+ STATE_2, STATE_3, END, then click browser back button -->
+ <!-- a blob you can click on to select --> <class
+ name="blob" extends="drawview" width="100" height="100">
+ <attribute name="title" type="text"/> <attribute
+ name="selected" type="boolean" /> <text y="20" x="4"
+ fontsize="16" text="${parent.title}"/> <handler
+ name="onclick"> this.setAttribute('selected', true);
+ main.selectBlob(this); </handler> <method
+ name="select" args="val"> if (val) { // draw a border to
+ select this.lineStyle = 0x000000; this.lineWidth = 4;
+ moveTo(0,0); lineTo(0,100); lineTo(100,100); lineTo(100,0);
+ lineTo(0,0); stroke(); } else { clear(); } </method>
+ </class> <!-- A view with four states -->
+ <view id="main" x="10" y="10" layout="axis: x; spacing:
+ 10"> <attribute name="mystate" type="string"
+ value="START"/> <blob bgcolor="#ffcccc" id="s1"
+ title="START"/> <blob bgcolor="#ccccff" id="s2"
+ title="STATE_2"/> <blob bgcolor="#ccffcc" id="s3"
+ title="STATE_3"/> <blob bgcolor="#cccccc" id="s4"
+ title="END"/> <method name="unselectAll">
+ s1.select(false); s2.select(false); s3.select(false);
+ s4.select(false); </method> <method
+ name="selectBlob" args="blob">
+ <emphasis role="em">// save the old state
+ LzHistory.next();</emphasis>setAttribute('mystate',
+ blob.title); unselectAll(); blob.select(true);
+ recordState(blob.title); </method> <handler
+ name="oninit"> unselectAll(); recordState("START");
+ selectBlob(s1); </handler> <handler
+ name="onmystate"> Debug.write("got onmystate event: ",
+ this.mystate); gotoState(this.mystate); </handler>
+ <method name="recordState" args="newstate">
+ this.mystate = newstate;
+ <emphasis role="em">LzHistory.save(this,'mystate',
+ this.mystate);</emphasis>Debug.write("recordState", newstate)
+ </method> <method name="gotoState" args="ns">
+ unselectAll(); if (ns == "START") { s1.select(true); } else
+ if (ns == "STATE_2") { s2.select(true); } else if (ns ==
+ "STATE_3") { s3.select(true); } else if (ns == "END") {
+ s4.select(true); } </method> </view>
+ </canvas></programlisting>
+ </example>
+ <para />
+ </section>
+ <section>
+ <title>Scaling OpenLaszlo Applications to Browser
+ Dimensions</title>
+ <para>You can make the canvas of the OpenLaszlo application
+ either a fixed size, or you can make it expand or contract as
+ the browser window expands or contracts. To make the canvas an
+ absolute size, set its height and width with integer values,
+ for example,
+ <literal>width="40" height="40"</literal>. To have the canvas
+ scale, simply express the height and width as
+ percentages.</para>
+ <para />
+ </section>
+ <section>
+ <title>Browser Limitations</title>
+ <para>Intercepting keystrokes can pose some challenges. The
+ keys that are intercepted varies from browser to browser, but
+ anything that the browser defines will not be passed to your
+ OpenLaszlo application. Mozilla Firefox seems to do this
+ correctly, but many browsers won't pass alt and ctrl key
+ combinations down to the application. The application below
+ should demonstrate this, [Ctrl-n] in many browsers is the
+ command you use to open a new browser window. In Mozilla
+ Firefox, you can get the debugger to print the right message,
+ but only if your mouse is floating over the application.</para>
+ <example role="live-example">
+ <title>Intercepting keystrokes</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/browser-integration-$19.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?informalexample role="live-example"><programlisting role="lzx-embednew"><filename>browser-integration-$19.lzx</filename><parameter/><code>
+ <canvas height="130" debug="true">
+ <command oninit="this.setKeys(['Control','n'])"
+ onselect="Debug.write('the [Ctrl-n] key combination was pressed');" />
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="130" debug="true">
+ <command oninit="this.setKeys(['Control','n'])"
+ onselect="Debug.write('the [Ctrl-n] key combination was pressed');" />
+ </canvas>
+ </programlisting><?lzx-edit programs/browser-integration-$19.lzx></informalexample?>
+ <para role="fixme">
+ <remark role="fixme">
+ <emphasis role="para-label">FIXME:</emphasis>Safari caching
+ info goes here</remark>
+ </para>
+ <para role="fixme">
+ <remark role="fixme">
+ <emphasis role="para-label">FIXME:</emphasis>not all browsers
+ support transparency of Flash over html. In those cases
+ changing the background color has no effect. canvas
+ transparent by default -- so bgcolor should be respected by
+ rendering browser. Default bgcolor comes from canvas, if set.
+ Two classes of browsers -- active x -- plug ing Windows
+ browsers often active x exception is open source mozilla(s)
+ Active X -- uses object tag others use embed tag so,
+ "Wrapper" page must include info for BOTH types. Esoteric
+ combinations exist, but we generate code for general cases.
+ what we send depends on request type. If lzt=swf then we just
+ send swf. Else, we send and html page (of some form -- link
+ to chapter on lps request types.)</remark>
+ </para>
+ <para />
+ </section>
+</chapter>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/databinding.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/databinding.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/databinding.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -375,7 +375,10 @@
<para>There are several points at which the client makes requests for the data:</para>
-<itemizedlist spacing="compact"><listitem><para>The client will request the data as soon as the app loads if the the dataset's <indexterm><primary>request</primary></indexterm><sgmltag class="attribute">request</sgmltag> attribute is true. </para></listitem><listitem><para>The client will also request the data every time the querystring or base URL of the dataset changes (using the <indexterm><primary><literal>setQueryString()</literal></primary></indexterm><methodname>setQueryString()</methodname> or <indexterm><primary><literal>setURL()</literal></primary></indexterm><methodname>setURL()</methodname> respectively) methods of the LzHTTPDataset object.</para></listitem><listitem><para>When the dataset's <indexterm><primary><literal>doRequest()</literal></primary></indexterm><methodname>doRequest()</methodname> method gets called.</para></listitem></itemizedlist>
+<itemizedlist spacing="compact"><listitem><para>The client will request the data
+<!-- fix typo LI 9/3/2007 -->
+<!-- as soon as the app loads if the the dataset's -->
+as soon as the app loads if the dataset's <indexterm><primary>request</primary></indexterm><sgmltag class="attribute">request</sgmltag> attribute is true. </para></listitem><listitem><para>The client will also request the data every time the querystring or base URL of the dataset changes (using the <indexterm><primary><literal>setQueryString()</literal></primary></indexterm><methodname>setQueryString()</methodname> or <indexterm><primary><literal>setURL()</literal></primary></indexterm><methodname>setURL()</methodname> respectively) methods of the LzHTTPDataset object.</para></listitem><listitem><para>When the dataset's <indexterm><primary><literal>doRequest()</literal></primary></indexterm><methodname>doRequest()</methodname> method gets called.</para></listitem></itemizedlist>
<para>In the table above, we referenced a file locally (myXMLDoc.xml), but we could have done it absolutely, or we could have hit a server-side script (PHP, ASP, JSP or some CGI) that returned an XML document. We could add the query string to the <indexterm><primary>dataset</primary></indexterm><sgmltag class="element"><dataset></sgmltag> tag:</para>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/debugging.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/debugging.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/debugging.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -58,8 +58,9 @@
<canvas height="150" debug="true"/>
</programlisting><?lzx-edit programs/debugging-$2.lzx></example?>
</listitem></varlistentry><varlistentry><term>The "Debug" button</term><listitem><para>Press the "Debug" button on the <glossterm>developer console</glossterm> to request a copy of the application with debugging enabled. This is equivalent to recompiling the application with the <literal>debug="true"</literal>.</para>
-
-</listitem></varlistentry><varlistentry><term><para>The <literal>debug</literal> query parameter</para></term><listitem><para>Edit the URL that is used to request the application to include
+<!-- remove para tags; para is not a legal child of term LI LPP-4636 9/3/2007 -->
+<!-- <term><para>The <literal>debug</literal> query parameter</para></term> -->
+</listitem></varlistentry><varlistentry><term>The <literal>debug</literal> query parameter</term><listitem><para>Edit the URL that is used to request the application to include
the <literal>debug=true</literal> <glossterm>query parameter</glossterm>.
This is equivalent to pressing the "Debug" button in the developer
console.</para>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/developers_guide_preface.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/developers_guide_preface.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/developers_guide_preface.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -1,5 +1,6 @@
<section>
-
+<!-- added title to validate against DocBook LI, LPP-4595 9/3/2007-->
+<title>Preface</title>
<para>We invented this technology to make it possible to create web
applications that are delightful to use.</para>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/editing-lzx.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/editing-lzx.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/editing-lzx.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -1,300 +1,639 @@
<chapter id="editing-lzx">
+ <title>Editing</title>
+ <para />
+ <section>
+ <title>Overview</title>
+ <para>LZX source files are text files. Any standard text editor
+ such as Notepad (on Windows) or TextEdit (on MacOS) can be used
+ to edit them.</para>
+ <para />
+ <section>
+ <title>XML Editors</title>
+ <para>LZX source files are a particular type of text file:
+ they are XML files. An
+ <emphasis role="em">XML-aware editor</emphasis>such as
+ <ulink url="http://www.eclipse.org">Eclipse</ulink>,
+ <ulink url="http://www.barebones.com/products/bbedit/index.shtml">
+ BBEdit</ulink>, or
+ <ulink url="http://www.gnu.org/software/emacs/emacs.html">
+ Emacs</ulink>(with
+ <literal>
+ <ulink url="http://www.lysator.liu.se/projects/about_psgml.html">
+ psgml-mode</ulink>
+ </literal>or
+ <literal>
+ <ulink url="http://www.thaiopensource.com/download/">
+ nxml-mode</ulink>
+ </literal>) will provide additional editing facilities such
+ as automatic indentation, syntax highlighting (coloring
+ markup characters such as
+ <literal><</literal>and tag names such as
+ <indexterm>
+ <primary>canvas</primary>
+ </indexterm>
+ <sgmltag class="element"><canvas></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: canvas-->
+ ), and well-formedness checking (letting you know when you
+ have an unbalanced
+ <literal><</literal>or quotation mark).</para>
+ <para>To configure an XML-aware editor to edit LZX files, you
+ must configure it to edit those files in XML mode. This is
+ done by registering the
+ <literal>lzx</literal>extension with the XML mode of the
+ editor. How to do this depends on the exact editor; this
+ chapter gives instructions for some popular editors.</para>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title>XML Schema</title>
+ <para>An
+ <indexterm significance="preferred">
+ <primary>XML schema</primary>
+ </indexterm>
+ <glossterm>XML schema</glossterm>lists the tag and attribute
+ names that can occur within an XML document. Many XML editing
+ tools are
+ <indexterm significance="preferred">
+ <primary>schema-aware</primary>
+ </indexterm>
+ <glossterm>schema-aware</glossterm>. These tools can associate
+ an XML document with a schema file, and use the schema file for
+
+ <indexterm significance="preferred">
+ <primary>code completion</primary>
+ </indexterm>
+ <glossterm>code completion</glossterm>(to complete a tag or
+ attribute name, or suggest a list of valid attribute values)
+ and
+ <indexterm significance="preferred">
+ <primary>validation</primary>
+ </indexterm>
+ <glossterm>validation</glossterm>(to indicate invalid tag or
+ attribute names within the editor, so that you don't have to
+ wait until you compile the file).</para>
+ <para>The method for associating an XML document with a schema
+ file depends on the editor. This chapter gives instructions for
+ some popular editors.</para>
+ <para />
+ <section>
+ <title>Types of Schema</title>
+ <para>There are three types of schemas in popular use: DTDs,
+ XSD, and RNG (and its associated format RNC). The LZX schema
+ is distributed in each of these formats. They can be found in
+ the
+ <literal>lps/tools</literal>directory.</para>
+ <para>A
+ <indexterm significance="preferred">
+ <primary>Document Type Definition</primary>
+ </indexterm>
+ <glossterm>Document Type Definition</glossterm>(DTD) is the
+ oldest type, and is recognized by the most editors.
+ Unfortunately, the DTD format is very weak compared with the
+ other schema description languages, and can't indicate
+ certain contextual information such as that a
+ <indexterm>
+ <primary>dataset</primary>
+ </indexterm>
+ <sgmltag class="element"><dataset></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: dataset-->
+ can contain arbitrary XML. A DTD should only be used in an
+ editor that doesn't support the other formats.</para>
+ <para>W3 and OASIS are standards bodies. The W3 standard for
+ describing XML documents is the XML Schema Definition (XSD).
+ The OASIS standard is RELAXNG. RNG and RNC files are RELAXNG
+ files that contain schema definitions. RNG files are in XML;
+ RNC files are intended to be human-readable.</para>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title>Eclipse</title>
+ <para>Eclipse is an open source development environment created
+ by IBM and maintained by the Eclipse Foundation. You can use
+ different Eclipse plug-ins to develop LZX programs.</para>
+ <para />
+ <section>
+ <title>XMLBuddy</title>
+ <para>There are four steps to using Eclipse with
+ XMLBuddy</para>
+ <itemizedlist spacing="compact">
+ <listitem>
+ <para>Step 1: Download Eclipse</para>
+ <para>Download Eclipse from
+ <ulink url="http://www.eclipse.org/downloads/index.php" />.</para>
+ </listitem>
+ <listitem>
+ <para>Step 2: Download XMLBuddy, an XML plugin for
+ Eclipse</para>
+ <para>Download XMLBuddy from
+ <ulink url="http://www.xmlbuddy.com">
+ http://www.xmlbuddy.com</ulink>. Get the right version
+ for your Eclipse.</para>
+ <para>Installation is simple. After you unzip XMLBuddy,
+ just drag the folder into your eclipse/plugins
+ folder.</para>
+ </listitem>
+ <listitem>
+ <para>Step 3: Configure Eclipse to use XMLBuddy for
+ <literal>
+ <replaceable>*</replaceable>.lzx</literal>files</para>
+ <para>In Eclipse:</para>
+ <figure>
+ <title>Configuring Eclipse for XMLBuddy</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/eclipse-preferences.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <orderedlist spacing="compact">
+ <listitem>
+ <para>Go to menu: Window -> Preferences</para>
+ </listitem>
+ <listitem>
+ <para>Twist down "Workbench", and select "File
+ Associations"</para>
+ </listitem>
+ <listitem>
+ <para>Click "Add" next to the "File Types" box and
+ enter
+ <literal>*.lzx</literal></para>
+ </listitem>
+ <listitem>
+ <para>Click "Add" next to the "Associated Editors"
+ box and select XMLBuddy</para>
+ </listitem>
+ </orderedlist>
+ </listitem>
+ <listitem>
+ <para>Step 4: Configure XMLBuddy to use the LZX schema
+ for
+ <literal>canvas</literal>files</para>
+ <orderedlist spacing="compact">
+ <listitem>
+ <para>Go to menu: Window -> Preferences</para>
+ </listitem>
+ <listitem>
+ <para>Twist down XMLBuddy, and then XML, and then
+ Validation</para>
+ </listitem>
+ <listitem>
+ <para>Click on DTD</para>
+ </listitem>
+ <listitem>
+ <para>Click "New..."</para>
+ </listitem>
+ <listitem>
+ <para>In the "New Default DTD" dialog, enter:
+ <programlisting>Root Name: canvas PUBLIC Id:
+ -//Laszlo Systems, Inc.//DTD LZX 2003/05//EN SYSTEM
+ Id:
+ http://www.laszlosystems.com/lps/tools/lzx.dtd</programlisting></para>
+ </listitem>
+ </orderedlist>
+ </listitem>
+ <listitem>
+ <para>Step 5: Configure XMLBuddy to use the LZX schema
+ for
+ <literal>library</literal>files</para>
+ <para>Repeat steps (4-5), but with a Root Name of
+ "library".</para>
+ </listitem>
+ </itemizedlist>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title>GNU Emacs</title>
+ <para>For GNUEmacs, an XML mode that understands RELAX-NG
+ schemas at
+ <ulink url="http://www.thaiopensource.com/download/">
+ http://www.thaiopensource.com/download/</ulink>and a discussion
+ group for this package at
+ <ulink url="http://groups.yahoo.com/group/emacs-nxml-mode/">
+ http://groups.yahoo.com/group/emacs-nxml-mode/</ulink>.</para>
+ <para role="fixme">
+ <remark role="fixme">
+ <emphasis role="para-label">FIXME:</emphasis>Describe how to
+ install this mode.</remark>
+ </para>
+ <para />
+ <section>
+ <title>XEmacs and PSGML-Mode</title>
+ <para>The
+ <literal>lzx.el</literal>file tells emacs to recognize
+ <literal>
+ <replaceable>*</replaceable>.lzx</literal>files as XML files.
+ With the DTD, this provides syntax-directed editing and
+ validation of XML entities in LZX files.</para>
+ <para>If mmm-mode is installed, this file will also create an
+ mmm submode to recognize the content of
+ <indexterm>
+ <primary>method</primary>
+ </indexterm>
+ <sgmltag class="element"><method></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: method-->
+ and
+ <indexterm>
+ <primary>script</primary>
+ </indexterm>
+ <sgmltag class="element"><script></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: script-->
+ tags as JavaScript, and direct mmm to use this submode for
+ <literal>
+ <replaceable>*</replaceable>.lzx</literal>files. This
+ provides syntax coloring and intelligent indentation and
+ navigation for JavaScript code within LZX files.</para>
+ <para />
+ <section>
+ <title>Installation</title>
+ <para>Copy lzx.el into a directory on the load-path,
+ optionally byte-compile it (using M-x byte-compile-file),
+ and place the following lines into your .emacs:</para>
+ <programlisting>(add-to-list 'load-path
+ "path/to/mmm-mode-0.4.7") (load-library "mmm-mode")
+ (require 'mmm-mode) (require 'lzx)</programlisting>
+ <para>(If you don't wish to use mmm mode, only the last
+ line is required.)</para>
+ <para>If you want mmm mode to be invoked automatically when
+ you open a file, add the following line to your .emacs
+ file:</para>
+ <programlisting>(mmm-add-find-file-hook)</programlisting>
+ <para />
+ </section>
+ </section>
+ </section>
+ <section>
+ <title>VIM</title>
+ <para>Install the lzx.vim syntax file.</para>
+ <para role="fixme">
+ <remark role="fixme">
+ <emphasis role="para-label">FIXME:</emphasis>See lzx.vim
+ syntax file in //depot/adam/sandbox</remark>
+ </para>
+ <para />
+ <section>
+ <title>Marks and cursor position</title>
+ <table>
+ <title>VIM Editing Keys</title>
+ <tgroup cols="2">
+ <tbody>
+ <row>
+ <entry>
+ <literal>`[mark]</literal>
+ </entry>
+ <entry>will jump you to the appropriate column where
+ the mark was set</entry>
+ </row>
+ <row>
+ <entry>
+ <literal>'[mark]</literal>
+ </entry>
+ <entry>will only jump you to the beginning of the
+ correct line.</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <para>Also, the mark "[" is set to the point where you last
+ entered insert mode. One often has the problem of wanting to
+ leave insert mode where editing began. you can now do this
+ with the following remapping</para>
+ <programlisting>imap ^D <ESC>`[</programlisting>
+ <para>Now, if you hit control-D in insert mode, you leave
+ where tou entered the insert mode.</para>
+ <para>Even more useful is the ability to repeat a previous
+ command without changing the cursor position. Since this is
+ pretty much always the behavior you want, you can remap ".",
+ or you could use some other combination.</para>
+ <programlisting>noremap . .`[</programlisting>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title>Developing OpenLaszlo Applications with IntelliJ</title>
+ <para>IntelliJ by JetBrains (
+ <ulink url="http://www.jetbrains.com/">
+ www.jetbrains.com</ulink>) is currently one of the most popular
+ Java IDEs. IntelliJ also provides very good support for XML,
+ and is therefore an excellent tool for developing OpenLaszlo
+ applications. IntelliJ is particularly well suited for Java
+ developers who want to manage the full life-cycle of an
+ application using a single development environment.</para>
+ <para>This document describes the steps required to optimize
+ the IntelliJ environment for the development of Laszlo
+ applications.</para>
+ <para />
+ <section>
+ <title>Step 1: Define the lzx file type</title>
+ <orderedlist spacing="compact">
+ <listitem>
+ <para>In the main menu, select Options>IDE
+ Settings>File Types</para>
+ </listitem>
+ <listitem>
+ <para>Select XML files in the Recognized File Types
+ box</para>
+ </listitem>
+ <listitem>
+ <para>Click Add for the Registered extensions box</para>
+ </listitem>
+ <listitem>
+ <para>Type lzx as the new extension and click OK</para>
+ </listitem>
+ <listitem>
+ <para>Click OK to close the IDE settings dialog
+ box</para>
+ </listitem>
+ </orderedlist>
+ <figure>
+ <title>Defining the LZX file type in IntelliJ</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/intelliij_1.gif" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para />
+ </section>
+ <section>
+ <title>Step 2: Declare the LZX DTD</title>
+ <orderedlist spacing="compact">
+ <listitem>
+ <!-- replace typo exemple with example-->
+ <para>In IntelliJ, create a new file with the lzx
+ extension, for example test.lzx</para>
+ </listitem>
+ <listitem>
+ <para>Type the following declaration as the first line of
+ the file:</para>
+ </listitem>
+ <listitem>
+ <!-- replace para with programlisting; para is not a legal child of para
+ LI, LPP-4637 9/4/2007-->
+ <!-- <para> -->
+ <para>
+ <programlisting><!DOCTYPE canvas SYSTEM
+ "http://laszlosystems.com/lps-v1/tools/lzx.dtd"></programlisting>
+ </para>
+ </listitem>
+ <!-- </para> -->
+ <!-- add missing listitem and para tags LI, LPP-4637 9/4/2007 -->
+
+ <listitem>
+ <para>The dtd URL appears in red. Click anywhere in the
+ URL: a light bulb appears to the left of the line</para>
+ </listitem>
+ <listitem>
+ <para>
+ <!-- remove extra para tags LI, LPP-4637 9/4/2007 -->
+ <!-- <para> -->
+ <figure>
+ <title>Declaring the LZX DTD in IntelliJ</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/intelliij_2.gif" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <!-- </para> -->
+ </para>
+ </listitem>
+ <!-- add missing para tag LI, LPP-4637 9/4/2007 -->
+ <listitem>
+
+ <para>Click the light bulb and select Fetch External
+ Resource from the popup window. The DTD is fetched into an
+ IntelliJ system file:</para>
+ </listitem>
+ <listitem>
+ <para>You are now ready to develop your OpenLaszlo
+ application, leveraging the rich XML and code completion
+ features provided by IntelliJ.</para>
+ </listitem>
+ </orderedlist>
+ <!-- <para /> -->
+ </section>
+ <section>
+ <title>Step 3: Develop your application</title>
+ <orderedlist spacing="compact">
+ <listitem>
+ <para>Type the following line as the first line of your
+ .lzx source files:</para>
+ <!-- replace para with programlisting; para is not a legal child of para
+ LI, LPP-4637 9/4/2007-->
+
+ <para>
+ <programlisting><!DOCTYPE canvas SYSTEM
+ "http://laszlosystems.com/lps-v1/tools/lzx.dtd"></programlisting>
+ </para>
+ <!-- add missing para tag LI, LPP-4637 9/4/2007 -->
-<title>Editing</title>
-<para/><section><title>Overview</title>
+ </listitem>
+ <listitem>
+ <para>Enjoy IntelliJ rich code completion features. For
+ example:
+ <itemizedlist spacing="compact">
+ <listitem>
+ <!-- remove extra para tags LI, LPP-4637 9/4/2007 -->
+ <!-- <para> -->
+ <para>
+ <informalfigure>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/intelliij_3.gif" />
+ </imageobject>
+ </mediaobject>
+ </informalfigure>
+ </para>
+ <!-- </para> -->
+ <!-- add missing para tag LI, LPP-4637 9/4/2007 -->
+ <para>Type the < character: a list of available
+ LZX tags is displayed in a drop down list. Select the
+ tag you want to insert.</para>
+ </listitem>
+ <listitem>
+ <!-- remove extra para tags LI, LPP-4637 9/4/2007 -->
+ <!-- <para> -->
+ <para>
+ <informalfigure>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/intelliij_4.gif" />
+ </imageobject>
+ </mediaobject>
+ </informalfigure>
+ </para>
+ <!-- </para> -->
+ <!-- add missing para tag LI, LPP-4637 9/4/2007 -->
+ <para>After typing an LZX tag name, a list of LZX tag
+ attributes is displayed in a drop down list. Select
+ the attribute you want to insert.</para>
+ </listitem>
+ <listitem>
+ <para>You can press CTRL+SPACE to display a popup
+ window with a list of LZX tag attributes</para>
+ </listitem>
+ </itemizedlist></para>
+ </listitem>
+ </orderedlist>
+ <para />
+ </section>
+ <section>
+ <title>Step 4: Validate your application</title>
+ <orderedlist spacing="compact">
+ <listitem>
+ <para>In the main menu select Tools>Validate</para>
+ </listitem>
+ <listitem>
+ <para>If your XML document is not well formed or not
+ valid (not compliant with the DTD), errors are reported
+ in the Validate panel that opens at the bottom of the
+ screen. Double-click an error in the list to position the
+ cursor at the location of the error in the code.</para>
+ </listitem>
+ </orderedlist>
+ <informalfigure>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/intelliij_5.gif" />
+ </imageobject>
+ </mediaobject>
+ </informalfigure>
+ <?ignore <p>See the <a href="http://www.laszlosystems.com/developers/development/intellij.php">instructions on the web site</a>. Those instructions may supplant everything here.</p>
-<para>LZX source files are text files. Any standard text editor such as
-Notepad (on Windows) or TextEdit (on MacOS) can be used to edit
-them.</para>
+ <p>In IDE Settings > Resources Add to the top pane (External Resources):</p>
-<para/><section><title>XML Editors</title>
+ <pre>
+ URI: http://www.laszlosystems.com/lzx.dtd
+ Path: c:\lzx.dtd.xml
+ </pre>
-<para>LZX source files are a particular type of text file: they are XML
-files. An <emphasis role="em">XML-aware editor</emphasis> such as <ulink url="http://www.eclipse.org">Eclipse</ulink>, <ulink url="http://www.barebones.com/products/bbedit/index.shtml">BBEdit</ulink>,
-or <ulink url="http://www.gnu.org/software/emacs/emacs.html">Emacs</ulink>
-(with <literal><ulink url="http://www.lysator.liu.se/projects/about_psgml.html">psgml-mode</ulink></literal>
-or <literal><ulink url="http://www.thaiopensource.com/download/">nxml-mode</ulink></literal>)
-will provide additional editing facilities such as automatic
-indentation, syntax highlighting (coloring markup characters such as
-<literal><</literal> and tag names such as <indexterm><primary>canvas</primary></indexterm><sgmltag class="element"><canvas></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: canvas-->
-),
-and well-formedness checking (letting you know when you have an
-unbalanced <literal><</literal> or quotation mark).</para>
+ <note>local path *must* end in .xml</note>
-<para>To configure an XML-aware editor to edit LZX files, you must
-configure it to edit those files in XML mode. This is done by
-registering the <literal>lzx</literal> extension with the XML mode of the
-editor. How to do this depends on the exact editor; this chapter
-gives instructions for some popular editors.</para>
+ <p>Begin your file with:</p>
+ <pre>
+ <!DOCTYPE canvas PUBLIC "LZX" "http://www.laszlosystems.com/lzx.dtd">
+ </pre>
-<para/></section></section><section><title>XML Schema</title>
-
-<para>An <indexterm significance="preferred"><primary>XML schema</primary></indexterm><glossterm>XML schema</glossterm> lists the tag and attribute names that can
-occur within an XML document. Many XML editing tools are
-<indexterm significance="preferred"><primary>schema-aware</primary></indexterm><glossterm>schema-aware</glossterm>. These tools can associate an XML document
-with a schema file, and use the schema file for <indexterm significance="preferred"><primary>code
-completion</primary></indexterm><glossterm>code
-completion</glossterm> (to complete a tag or attribute name, or suggest a
-list of valid attribute values) and <indexterm significance="preferred"><primary>validation</primary></indexterm><glossterm>validation</glossterm> (to indicate
-invalid tag or attribute names within the editor, so that you don't
-have to wait until you compile the file).</para>
-
-<para>The method for associating an XML document with a schema file
-depends on the editor. This chapter gives instructions for some
-popular editors.</para>
-
-<para/><section><title>Types of Schema</title>
-
-<para>There are three types of schemas in popular use: DTDs, XSD, and RNG
-(and its associated format RNC). The LZX schema is distributed in
-each of these formats. They can be found in the <literal>lps/tools</literal> directory.</para>
-
-<para>A <indexterm significance="preferred"><primary>Document Type Definition</primary></indexterm><glossterm>Document Type Definition</glossterm> (DTD) is the oldest type, and
-is recognized by the most editors. Unfortunately, the DTD format is
-very weak compared with the other schema description languages, and
-can't indicate certain contextual information such as that a
-<indexterm><primary>dataset</primary></indexterm><sgmltag class="element"><dataset></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: dataset-->
- can contain arbitrary XML. A DTD should
-only be used in an editor that doesn't support the other formats.</para>
-
-<para>W3 and OASIS are standards bodies. The W3 standard for describing
-XML documents is the XML Schema Definition (XSD). The OASIS standard
-is RELAXNG. RNG and RNC files are RELAXNG files that contain schema
-definitions. RNG files are in XML; RNC files are intended to be
-human-readable.</para>
-
-
-
-<para/></section></section><section><title>Eclipse</title>
-<para>
-Eclipse is an open source development environment created by IBM and maintained by the Eclipse Foundation. You can use different Eclipse plug-ins to develop LZX programs.</para>
-
-
-<para/><section><title>XMLBuddy</title>
-<para>There are four steps to using Eclipse with XMLBuddy</para>
-<itemizedlist spacing="compact"><listitem><para>Step 1: Download Eclipse</para>
-
- <para>Download Eclipse from <ulink url="http://www.eclipse.org/downloads/index.php"/>. </para>
- </listitem><listitem><para>Step 2: Download XMLBuddy, an XML plugin for Eclipse</para>
-
- <para>Download XMLBuddy from <ulink url="http://www.xmlbuddy.com">http://www.xmlbuddy.com</ulink>. Get the
- right version for your Eclipse.</para>
-
- <para>Installation is simple. After you unzip XMLBuddy, just drag the
- folder into your eclipse/plugins folder.</para></listitem><listitem><para>Step 3: Configure Eclipse to use XMLBuddy for
- <literal><replaceable>*</replaceable>.lzx</literal> files</para>
-
- <para>In Eclipse:</para>
- <figure><title>Configuring Eclipse for XMLBuddy</title><mediaobject><imageobject><imagedata fileref="images/eclipse-preferences.png"/></imageobject></mediaobject></figure>
- <orderedlist spacing="compact"><listitem><para>Go to menu: Window -> Preferences</para></listitem><listitem><para>Twist down "Workbench", and select "File Associations"</para></listitem><listitem><para>Click "Add" next to the "File Types" box and enter
- <literal>*.lzx</literal></para></listitem><listitem><para>Click "Add" next to the "Associated Editors" box and select XMLBuddy</para></listitem></orderedlist>
- </listitem><listitem><para>Step 4: Configure XMLBuddy to use the LZX schema for <literal>canvas</literal> files</para>
- <orderedlist spacing="compact"><listitem><para>Go to menu: Window -> Preferences</para></listitem><listitem><para>Twist down XMLBuddy, and then XML, and then Validation</para></listitem><listitem><para>Click on DTD</para></listitem><listitem><para>Click "New..."</para></listitem><listitem><para>In the "New Default DTD" dialog, enter:
- <programlisting>Root Name: canvas
- PUBLIC Id: -//Laszlo Systems, Inc.//DTD LZX 2003/05//EN
- SYSTEM Id: http://www.laszlosystems.com/lps/tools/lzx.dtd</programlisting>
- </para></listitem></orderedlist>
- </listitem><listitem><para>Step 5: Configure XMLBuddy to use the LZX schema for <literal>library</literal> files
- </para><para>Repeat steps (4-5), but with a Root Name of "library".</para>
- </listitem></itemizedlist>
-
-<para/></section></section><section><title>GNU Emacs</title>
-<para>For GNUEmacs, an XML mode that understands RELAX-NG schemas at <ulink url="http://www.thaiopensource.com/download/">http://www.thaiopensource.com/download/</ulink> and a discussion group for this package at <ulink url="http://groups.yahoo.com/group/emacs-nxml-mode/">http://groups.yahoo.com/group/emacs-nxml-mode/</ulink>.</para>
-
-<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis>Describe how to install this mode.</remark></para>
-
-<para/><section><title>XEmacs and PSGML-Mode</title>
-
-<para>The <literal>lzx.el</literal> file tells emacs to recognize
-<literal><replaceable>*</replaceable>.lzx</literal> files as XML files. With the DTD, this
-provides syntax-directed editing and validation of XML entities in LZX
-files.</para>
-
-<para>If mmm-mode is installed, this file will also create an mmm submode
-to recognize the content of <indexterm><primary>method</primary></indexterm><sgmltag class="element"><method></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: method-->
- and
-<indexterm><primary>script</primary></indexterm><sgmltag class="element"><script></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: script-->
- tags as JavaScript, and direct mmm to use
-this submode for <literal><replaceable>*</replaceable>.lzx</literal> files. This provides
-syntax coloring and intelligent indentation and navigation for
-JavaScript code within LZX files.</para>
-
-<para/><section><title>Installation</title>
-
-<para>Copy lzx.el into a directory on the load-path, optionally
-byte-compile it (using M-x byte-compile-file), and place the
-following lines into your .emacs:</para>
-
-<programlisting>
- (add-to-list 'load-path "path/to/mmm-mode-0.4.7")
- (load-library "mmm-mode")
- (require 'mmm-mode)
- (require 'lzx)
-</programlisting>
-
-<para>(If you don't wish to use mmm mode, only the last line is
-required.)</para>
-
-<para>If you want mmm mode to be invoked automatically when you open a
-file, add the following line to your .emacs file:</para>
-
-<programlisting>
- (mmm-add-find-file-hook)
-</programlisting>
-
-
-<para/></section></section></section><section><title>VIM</title>
-<para>Install the lzx.vim syntax file.</para>
-
-<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis>See lzx.vim syntax file in //depot/adam/sandbox</remark></para>
-
-<para/><section><title>Marks and cursor position</title>
-
-<table><title>VIM Editing Keys</title><tgroup cols="2"><tbody><row><entry>
- <literal>`[mark]</literal>
- </entry><entry>will jump you to the appropriate column where the mark was set</entry></row><row><entry>
- <literal>'[mark]</literal>
- </entry><entry>will only jump you to the beginning of the correct line.</entry></row></tbody></tgroup></table>
-
-<para>Also, the mark "[" is set to the point where you last entered insert mode. One often has the problem of wanting to leave insert mode where editing began. you can now do this with the following remapping</para>
-<programlisting>
- imap ^D <ESC>`[
-</programlisting>
-<para>Now, if you hit control-D in insert mode, you leave where tou entered the insert mode.</para>
-
-<para>Even more useful is the ability to repeat a previous command without changing the cursor position. Since this is pretty much always the behavior you want, you can remap ".", or you could use some other combination.</para>
-
-<programlisting>
- noremap . .`[
-</programlisting>
-
-<para/></section></section><section><title>Developing OpenLaszlo Applications with IntelliJ</title>
-
-<para>IntelliJ by JetBrains (<ulink url="http://www.jetbrains.com/">www.jetbrains.com</ulink>) is currently
-one of the most popular Java IDEs. IntelliJ also provides very good
-support for XML, and is therefore an excellent tool for developing
-OpenLaszlo applications. IntelliJ is particularly well suited for Java
-developers who want to manage the full life-cycle of an application
-using a single development environment.</para>
-
-<para>This document describes the steps required to optimize the IntelliJ environment for the development of Laszlo applications.</para>
-
-<para/><section><title>Step 1: Define the lzx file type</title>
-
-<orderedlist spacing="compact"><listitem><para>In the main menu, select Options>IDE Settings>File Types</para></listitem><listitem><para>Select XML files in the Recognized File Types box</para></listitem><listitem><para>Click Add for the Registered extensions box</para></listitem><listitem><para>Type lzx as the new extension and click OK</para></listitem><listitem><para>Click OK to close the IDE settings dialog box</para></listitem></orderedlist>
-
-<figure><title>Defining the LZX file type in IntelliJ</title><mediaobject><imageobject><imagedata fileref="images/intelliij_1.gif"/></imageobject></mediaobject></figure>
-
-<para/></section><section><title>Step 2: Declare the LZX DTD</title>
-
-<orderedlist spacing="compact"><listitem><para>In IntelliJ, create a new file with the lzx extension, for exemple test.lzx</para></listitem><listitem><para><para><!DOCTYPE canvas SYSTEM "http://laszlosystems.com/lps-v1/tools/lzx.dtd"></para></para>Type the following declaration as the first line of the file:</listitem><listitem><para>The dtd URL appears in red. Click anywhere in the URL: a light bulb appears to the left of the line</para></listitem><listitem><para><para>
- <figure><title>Declaring the LZX DTD in IntelliJ</title><mediaobject><imageobject><imagedata fileref="images/intelliij_2.gif"/></imageobject></mediaobject></figure>
- </para>
- </para>Click the light bulb and select Fetch External Resource from the popup window. The DTD is fetched into an IntelliJ system file:</listitem><listitem><para>You are now ready to develop your OpenLaszlo application, leveraging the rich XML and code completion features provided by IntelliJ.</para></listitem></orderedlist>
-
-<para/></section><section><title>Step 3: Develop your application</title>
-
-<orderedlist spacing="compact"><listitem><para><para><!DOCTYPE canvas SYSTEM
- "http://laszlosystems.com/lps-v1/tools/lzx.dtd"></para></para>Type the following line as the first line of your .lzx source
- files:</listitem><listitem><para>Enjoy IntelliJ rich code completion features. For example:
- <itemizedlist spacing="compact"><listitem><para><para><informalfigure><mediaobject><imageobject><imagedata fileref="images/intelliij_3.gif"/></imageobject></mediaobject></informalfigure></para></para>Type the < character: a list of available LZX tags is
- displayed in a drop down list. Select the tag you want to
- insert.</listitem><listitem><para><para><informalfigure><mediaobject><imageobject><imagedata fileref="images/intelliij_4.gif"/></imageobject></mediaobject></informalfigure></para></para>After typing an LZX tag name, a list of LZX tag attributes is
- displayed in a drop down list. Select the attribute you want to
- insert.</listitem><listitem><para>You can press CTRL+SPACE to display a popup window with a list
- of LZX tag attributes</para></listitem></itemizedlist>
- </para></listitem></orderedlist>
-
-<para/></section><section><title>Step 4: Validate your application</title>
-
-<orderedlist spacing="compact"><listitem><para>In the main menu select Tools>Validate</para></listitem><listitem><para>If your XML document is not well formed or not valid (not
- compliant with the DTD), errors are reported in the Validate panel
- that opens at the bottom of the screen. Double-click an error in the
- list to position the cursor at the location of the error in the
- code.</para></listitem></orderedlist>
-
-<informalfigure><mediaobject><imageobject><imagedata fileref="images/intelliij_5.gif"/></imageobject></mediaobject></informalfigure>
-
-<?ignore <p>See the <a href="http://www.laszlosystems.com/developers/development/intellij.php">instructions on the web site</a>. Those instructions may supplant everything here.</p>
-
-<p>In IDE Settings > Resources Add to the top pane (External Resources):</p>
-
-<pre>
- URI: http://www.laszlosystems.com/lzx.dtd
- Path: c:\lzx.dtd.xml
-</pre>
-
-<note>local path *must* end in .xml</note>
-
-<p>Begin your file with:</p>
-<pre>
-<!DOCTYPE canvas PUBLIC "LZX" "http://www.laszlosystems.com/lzx.dtd">
-</pre>
-
-<p>Notice that code hinting is provided for schema types.</p>
-?>
-
-<para/></section><section><title>Namespaces and OpenLaszlo Schema</title>
-<para>
-OpenLaszlo applications can be written with a namespace:</para>
-<programlisting>
- <canvas xlmns="http://www.laszlosystems.com/2003/05/lzx">...</canvas>
-</programlisting>
-<para>
-or without:</para>
-<programlisting>
- <canvas>...</canvas>
-</programlisting>
-
-<para>
-If there is no namespace, the compiler defaults it to the LZX namespace (<ulink url="http://www.laszlosystems.com/2003/05/lzx">http://www.laszlosystems.com/2003/05/lzx"</ulink>).
-</para>
-<para>
-As of OpenLaszlo release 3.1, the schema in <literal>lax.rnc </literal>has three deficiencies:</para>
-<itemizedlist spacing="compact"><listitem><para>- It only works for sources that include the namespace declaration; e.g. it won't validate <canvas/> because it doesn't declare any elements in the empty namespace.</para></listitem><listitem><para>- It only knows about the foundation classes, not the components; e.g. it won't validate <canvas xmlns="..."><button/></canvas> because <button> isn't a foundation class.</para></listitem><listitem><para>- It isn't aware of tags that are defined in the application or its libraries; e.g. <canvas xmlns="..."><class name="myclass"/><myclass/></canvas></para></listitem></itemizedlist>
-<para>
-The difficulty is that the <class> tag in LZX actually extends the
-schema by adding new tags and attributes. We have a hand-written
-basic schema (WEB-INF/lps/schema/lzx.rnc) which is used to start with,
-but then user and system component libraries can extend the schema,
-depending on the application.
-</para>
-<para>
-<indexterm><primary>window</primary></indexterm><sgmltag class="element"><window></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: window-->
-, for example, is defined in a source library in
-lps/components/lz/window.lzx, so it is not in the base schema. So it
-is difficult to use a static RNG schema, because it needs to be
-modified as the app defines new classes.
-</para>
-<para>
- The LZX compiler can be asked to give you the RNG schema from a source file, so something might be able to be hooked up to keep regenerating the schema from the source file, although it would be hard because the sources are often in an inconsistent state as you develop your application, so the parser has to be very forgiving about badly formed XML.</para>
-<para>
-We have worked around the first problem with a transform of that schema that strips out the namespace declaration. That's <literal>tools/lzx+libraries-nons.rnc</literal>.
-We have worked around the second problem with a script that makes a copy of the schema and adds the components. This is <literal>tools/lzx+libraries.rnc</literal>.
-The third problem can't be fixed without modifying nxml-mode to either add declarations for <class> declarations that it sees, or request the schema for an application from the compiler. (From the command line, the --schema option does this.) OpenLaszlo does neither of these.
-</para>
-<para>
-The LZX tag set is defined in a relax.ng schema located in the <literal>lps/tools</literal> directory. </para>
-<para>
-If you are going to use the schema, </para>
-<itemizedlist spacing="compact"><listitem><para>Use <literal>tools/lzx+libraries.rnc</literal> for files that include the XML namespace declaration </para></listitem><listitem><para>Use <literal>tools/lzx+libraries-nons.rnc</literal> for files that don't include a namespace declaration.</para></listitem></itemizedlist>
-<para/></section><section><title>Emacs note</title>
-<para>
-nxml-mode can be set to choose between these schemes automatically by pointing it at the schema locator file in tools/nxml-schemas.xml:</para>
-<programlisting>
- (setq rng-schema-locating-files
- (append
- (list (substitute-env-vars "$LPS_HOME/tools/nxml-schemas.xml"))
- rng-schema-locating-files))
-</programlisting>
-<note><para>
-(SUBSTITUTE-ENV-VARS isn't a standard gnu emacs functions; it's just a hack that we use in the .init file that has a few environment variables hardwired.)
-</para></note>
-<para role="todo"><remark role="todo"><emphasis role="para-label">TODO: </emphasis>Other Editors: notepad, bbedit</remark></para>
-
-<para/></section></section></chapter>
\ No newline at end of file
+ <p>Notice that code hinting is provided for schema types.</p>
+ ?>
+ <para />
+ </section>
+ <section>
+ <title>Namespaces and OpenLaszlo Schema</title>
+ <para>OpenLaszlo applications can be written with a
+ namespace:</para>
+ <programlisting><canvas
+ xlmns="http://www.laszlosystems.com/2003/05/lzx">...</canvas></programlisting>
+ <para>or without:</para>
+ <programlisting>
+ <canvas>...</canvas></programlisting>
+ <para>If there is no namespace, the compiler defaults it to
+ the LZX namespace (
+ <ulink url="http://www.laszlosystems.com/2003/05/lzx">
+ http://www.laszlosystems.com/2003/05/lzx"</ulink>).</para>
+ <para>As of OpenLaszlo release 3.1, the schema in
+ <literal>lax.rnc</literal>has three deficiencies:</para>
+ <itemizedlist spacing="compact">
+ <listitem>
+ <para>- It only works for sources that include the
+ namespace declaration; e.g. it won't validate
+ <canvas/> because it doesn't declare any elements
+ in the empty namespace.</para>
+ </listitem>
+ <listitem>
+ <para>- It only knows about the foundation classes, not
+ the components; e.g. it won't validate <canvas
+ xmlns="..."><button/></canvas> because
+ <button> isn't a foundation class.</para>
+ </listitem>
+ <listitem>
+ <para>- It isn't aware of tags that are defined in the
+ application or its libraries; e.g. <canvas
+ xmlns="..."><class
+ name="myclass"/><myclass/></canvas></para>
+ </listitem>
+ </itemizedlist>
+ <para>The difficulty is that the <class> tag in LZX
+ actually extends the schema by adding new tags and
+ attributes. We have a hand-written basic schema
+ (WEB-INF/lps/schema/lzx.rnc) which is used to start with, but
+ then user and system component libraries can extend the
+ schema, depending on the application.</para>
+ <para>
+ <indexterm>
+ <primary>window</primary>
+ </indexterm>
+ <sgmltag class="element"><window></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: window-->
+ , for example, is defined in a source library in
+ lps/components/lz/window.lzx, so it is not in the base
+ schema. So it is difficult to use a static RNG schema,
+ because it needs to be modified as the app defines new
+ classes.</para>
+ <para>The LZX compiler can be asked to give you the RNG
+ schema from a source file, so something might be able to be
+ hooked up to keep regenerating the schema from the source
+ file, although it would be hard because the sources are often
+ in an inconsistent state as you develop your application, so
+ the parser has to be very forgiving about badly formed
+ XML.</para>
+ <para>We have worked around the first problem with a
+ transform of that schema that strips out the namespace
+ declaration. That's
+ <literal>tools/lzx+libraries-nons.rnc</literal>. We have
+ worked around the second problem with a script that makes a
+ copy of the schema and adds the components. This is
+ <literal>tools/lzx+libraries.rnc</literal>. The third problem
+ can't be fixed without modifying nxml-mode to either add
+ declarations for <class> declarations that it sees, or
+ request the schema for an application from the compiler.
+ (From the command line, the --schema option does this.)
+ OpenLaszlo does neither of these.</para>
+ <para>The LZX tag set is defined in a relax.ng schema located
+ in the
+ <literal>lps/tools</literal>directory.</para>
+ <para>If you are going to use the schema,</para>
+ <itemizedlist spacing="compact">
+ <listitem>
+ <para>Use
+ <literal>tools/lzx+libraries.rnc</literal>for files that
+ include the XML namespace declaration</para>
+ </listitem>
+ <listitem>
+ <para>Use
+ <literal>tools/lzx+libraries-nons.rnc</literal>for files
+ that don't include a namespace declaration.</para>
+ </listitem>
+ </itemizedlist>
+ <para />
+ </section>
+ <section>
+ <title>Emacs note</title>
+ <para>nxml-mode can be set to choose between these schemes
+ automatically by pointing it at the schema locator file in
+ tools/nxml-schemas.xml:</para>
+ <programlisting>(setq rng-schema-locating-files (append (list
+ (substitute-env-vars "$LPS_HOME/tools/nxml-schemas.xml"))
+ rng-schema-locating-files))</programlisting>
+ <note>
+ <para>(SUBSTITUTE-ENV-VARS isn't a standard gnu emacs
+ functions; it's just a hack that we use in the .init file
+ that has a few environment variables hardwired.)</para>
+ </note>
+ <para role="todo">
+ <remark role="todo">
+ <emphasis role="para-label">TODO:</emphasis>Other Editors:
+ notepad, bbedit</remark>
+ </para>
+ <para />
+ </section>
+ </section>
+</chapter>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/media-resources.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/media-resources.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/media-resources.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -1,86 +1,204 @@
<chapter id="media-resources">
<title>Media Resources</title>
- <para>This chapter describes how to include external media resources (images, audio, animation, and video) into OpenLaszlo applications.</para>
+ <para>This chapter describes how to include external media
+ resources (images, audio, animation, and video) into OpenLaszlo
+ applications.</para>
<section>
<title>Overview</title>
- <para>LZX is designed to make it easy for you to integrate media resources into your application in a flexible and dynamic manner. You can include images, audio, video, and animations that were created using standard third-party content creation tools. This chapter describes the media formats that are currently supported as resources to <sgmltag class="element" role="LzView">view</sgmltag>s in OpenLaszlo 4.0. It then goes on to describes how to integrate and control media in your application. It concludes with some optimization tips.</para>
- <para>Note that in addition to media that can be attached as resources to views, streaming audio and video can be played by <indexterm><primary>videoview</primary></indexterm><sgmltag class="element">videoview</sgmltag>s. Please see <xref linkend="video" /> for a discussion of streaming media.</para>
- <para>For a discussion of streaming media, see <xref linkend="video" />.</para>
+ <para>LZX is designed to make it easy for you to integrate
+ media resources into your application in a flexible and dynamic
+ manner. You can include images, audio, video, and animations
+ that were created using standard third-party content creation
+ tools. This chapter describes the media formats that are
+ currently supported as resources to
+ <sgmltag class="element" role="LzView">view</sgmltag>s in
+ OpenLaszlo 4.0. It then goes on to describes how to integrate
+ and control media in your application. It concludes with some
+ optimization tips.</para>
+ <para>Note that in addition to media that can be attached as
+ resources to views, streaming audio and video can be played by
+ <indexterm>
+ <primary>videoview</primary>
+ </indexterm>
+ <sgmltag class="element">videoview</sgmltag>s. Please see
+ <xref linkend="video" />for a discussion of streaming
+ media.</para>
+ <para>For a discussion of streaming media, see
+ <xref linkend="video" />.</para>
</section>
<section>
<title>Supported media types</title>
- <para>The list of supported media types varies slightly depending on the target runtime and whether the application is to be deployed SOLO or proxied.</para>
+ <para>The list of supported media types varies slightly
+ depending on the target runtime and whether the application is
+ to be deployed SOLO or proxied.</para>
<section>
- <title condition="swf">Media for SWF SOLO applications</title>
- <para>SOLO applications compiled to SWF depend on Flash to load images (whereas the proxied applications get help from the transcoder on the server). This means that SOLO applications are limited to file types supported natively by Flash.</para>
+ <title condition="swf">Media for SWF SOLO
+ applications</title>
+ <para>SOLO applications compiled to SWF depend on Flash to
+ load images (whereas the proxied applications get help from
+ the transcoder on the server). This means that SOLO
+ applications are limited to file types supported natively by
+ Flash.</para>
<section>
<title>Flash 7 and Flash 8 limitations</title>
- <para>Flash player version 7 it can only load a limited set of jpegs encodings; it cannot do interleaved or progressive jpeg. If you run Flash player 8 it can do more wide range of jpeg encoding. Set the compiler to compile for Flash 8 as a target runtime to get this expanded range of image formats (also PNG and GIF).</para>
+ <para>Flash player version 7 it can only load a limited set
+ of jpegs encodings; it cannot do interleaved or progressive
+ jpeg. If you run Flash player 8 it can do more wide range
+ of jpeg encoding. Set the compiler to compile for Flash 8
+ as a target runtime to get this expanded range of image
+ formats (also PNG and GIF).</para>
</section>
</section>
<section>
- <title condition="dhtml">DHTML Limitations and workaround</title>
- <para>Browsers do not natively support .swf or audio or video formats. You must transcode them, omit them from your application, or embed a flash player in your application to handle them.</para>
+ <title condition="dhtml">DHTML Limitations and
+ workaround</title>
+ <para>Browsers do not natively support .swf or audio or video
+ formats. You must transcode them, omit them from your
+ application, or embed a flash player in your application to
+ handle them.</para>
<section>
<title>Transcoding .swf to .png</title>
- <para>Files in .swf format can be transcoded to .png format for display by the DHTML runtime. OpenLaszlo provides a facility, called
- <literal>autopng</literal>, for doing this automatically. As a convenience, the server and compiler search for a corresponding png file if a swf file is referenced in the DHTML runtime. To use this mechanism in your own code, create a png file with the same basename as the swf file, and place it in the same directory as the swf resource you want it to replace.</para>
+ <para>Files in .swf format can be transcoded to .png format
+ for display by the DHTML runtime. OpenLaszlo provides a
+ facility, called
+ <literal>autopng</literal>, for doing this automatically.
+ As a convenience, the server and compiler search for a
+ corresponding png file if a swf file is referenced in the
+ DHTML runtime. To use this mechanism in your own code,
+ create a png file with the same basename as the swf file,
+ and place it in the same directory as the swf resource you
+ want it to replace.</para>
</section>
<section>
<title>Audio and Video in DHTML applications</title>
- <note><para>The following discussion applies to audio and video resources attached to <sgmltag class="element" role="LzView">view</sgmltag>s, not to <indexterm><primary>videoview</primary></indexterm><sgmltag class="element">videoview</sgmltag>s. <indexterm><primary>videoview</primary></indexterm><sgmltag class="element">videoview</sgmltag>s are not supported at all for the DHTML runtime.</para></note>
- <para>In order to display swf-formatted audio and video within a DHTML application, you may embedd a swf player in the page. For a discussion of how to do this, see <xref linkend="browser-integration" />.</para>
+ <note>
+ <para>The following discussion applies to audio and video
+ resources attached to
+ <sgmltag class="element" role="LzView">view</sgmltag>s,
+ not to
+ <indexterm>
+ <primary>videoview</primary>
+ </indexterm>
+ <sgmltag class="element">videoview</sgmltag>s.
+ <indexterm>
+ <primary>videoview</primary>
+ </indexterm>
+ <sgmltag class="element">videoview</sgmltag>s are not
+ supported at all for the DHTML runtime.</para>
+ </note>
+ <para>In order to display swf-formatted audio and video
+ within a DHTML application, you may embedd a swf player in
+ the page. For a discussion of how to do this, see
+ <xref linkend="browser-integration" />.</para>
</section>
</section>
<section>
<title>Summary of Supported Media</title>
- <para>OpenLaszlo 4.0 and above support the following media types:</para>
+ <para>OpenLaszlo 4.0 and above support the following media
+ types:</para>
<variablelist>
<varlistentry>
<term>JPEG</term>
<listitem>
- <para>Depending on target runtime and mode of deployment, different .jpg and .jpeg files are supported. Progressive and interleaved files are not supported for Flash 7 SOLO deployment. See the <ulink url="http://www.w3.org/Graphics/JPEG/">W3C JPEG JFIF Specification</ulink>.
- <note><para><emphasis>Progressive</emphasis> files are re-encoded in the OpenLaszlo Server.</para></note>
- </para>
+ <para>Depending on target runtime and mode of
+ deployment, different .jpg and .jpeg files are
+ supported. Progressive and interleaved files are not
+ supported for Flash 7 SOLO deployment. See the
+ <ulink url="http://www.w3.org/Graphics/JPEG/">W3C JPEG
+ JFIF Specification</ulink>.
+ <note>
+ <para>
+ <emphasis>Progressive</emphasis>files are re-encoded
+ in the OpenLaszlo Server.</para>
+ </note></para>
</listitem>
</varlistentry>
<varlistentry>
<term>GIF</term>
<listitem>
- <para>All .gif files are supported. See the <ulink url="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF Spec</ulink>.</para>
+ <para>All .gif files are supported. See the
+ <ulink url="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">
+ GIF Spec</ulink>.</para>
</listitem>
</varlistentry>
<varlistentry>
<term>PNG</term>
<listitem>
- <para>All Portable Network Graphics files (<ulink url="http://www.w3.org/Graphics/PNG/">PNG details at W3C information</ulink>) are supported. This includes PNGs with alpha channels (transparency).</para>
+ <para>All Portable Network Graphics files (
+ <ulink url="http://www.w3.org/Graphics/PNG/">PNG
+ details at W3C information</ulink>) are supported. This
+ includes PNGs with alpha channels
+ (transparency).</para>
</listitem>
</varlistentry>
<varlistentry>
<term>MP3</term>
<listitem>
- <para condition="swf">For proxied applications compiled to .swf, support is limited to audio MP3 files with <emphasis>sample</emphasis>-rates of 44.1 kHz, 22.050 kHz, 11.025 kHz, 8.000 kHz and 5.512 kHz.</para>
- <para>Flash behaves poorly with mp3s it doesn't like, which makes tracking down problems difficult. If you run into a problem, a good idea would be to find out whether your mp3 plays in a standalone Flash app separate from OpenLaszlo. (You can use the mtasc.org compiler to test this, using Flash's Sound class to load an play your mp3.) If your mp3 works does not work in standalone Flash, hen the problem is not OpenLaszlo.</para>Mp3s are not natively supported by browsers, so applications that compile to DHTML should make provisions, as described above.
- </listitem>
+ <para condition="swf">For proxied applications compiled
+ to .swf, support is limited to audio MP3 files with
+ <emphasis>sample</emphasis>-rates of 44.1 kHz, 22.050
+ kHz, 11.025 kHz, 8.000 kHz and 5.512 kHz.</para>
+ <!-- fix typo: works does not work -->
+ <para>Flash behaves poorly with mp3s it doesn't like,
+ which makes tracking down problems difficult. If you run
+ into a problem, a good idea would be to find out whether
+ your mp3 plays in a standalone Flash app separate from
+ OpenLaszlo. (You can use the mtasc.org compiler to test
+ this, using Flash's Sound class to load an play your
+ mp3.) If your mp3 does not work in standalone
+ Flash, hen the problem is not OpenLaszlo.</para>
+ <!-- add missing para tags LI LPP-4639 9/4/2007-->
+ <para>
+ Mp3s are
+ not natively supported by browsers, so applications that
+ compile to DHTML should make provisions, as described
+ above.</para></listitem>
</varlistentry>
<varlistentry>
<term>SWF</term>
<listitem>
- <para>Macromedia Flash (SWF) files. (See <ulink url="http://www.macromedia.com/software/flash/open/licensing/fileformat/">Macromedia documentation</ulink>).</para>
- <para>For applications compiled to Flash, support is limited to SWF files that contain stills or animation only. Very limited ActionScript is allowed/supported (see below for more details).</para>
- <para>For applications compiled to DHTML, .swf format files are not supported. See above for a workaround.</para>
+ <para>Macromedia Flash (SWF) files. (See
+ <ulink url="http://www.macromedia.com/software/flash/open/licensing/fileformat/">
+ Macromedia documentation</ulink>).</para>
+ <para>For applications compiled to Flash, support is
+ limited to SWF files that contain stills or animation
+ only. Very limited ActionScript is allowed/supported
+ (see below for more details).</para>
+ <para>For applications compiled to DHTML, .swf format
+ files are not supported. See above for a
+ workaround.</para>
</listitem>
</varlistentry>
</variablelist>
- <para>For up-to-date discussion of supported media and considerations about their deployment in various runtimes, see the
- <ulink url="http://wiki.openlaszlo.org/MediaSupport">OpenLaszlo Wiki</ulink>.</para>
+ <para>For up-to-date discussion of supported media and
+ considerations about their deployment in various runtimes,
+ see the
+ <ulink url="http://wiki.openlaszlo.org/MediaSupport">
+ OpenLaszlo Wiki</ulink>.</para>
</section>
</section>
<section>
<title>Views and resources</title>
- <para>The <sgmltag class="element" role="LzView">view</sgmltag> is the most basic viewable element in an OpenLaszlo application and it is described in <xref linkend="views" />. A view may have a <emphasis>resource</emphasis> attached to it. The resource represents a piece of media (image, audio, video, or animation) that the view controls. For images, the view typically displays the image. For time-based media (audio, video, animation), the view can be used to start, stop, or jump to a specific frame or time in the media.</para>
- <para>For a simple informal introduction to attaching resources to views, see <xref linkend="art_assets" />. The chapter you're reading now briefly goes over topics covered in that tutorial and then goes into greater depth.</para>
- <para>Resources may be declared directly inside a view using the view's <sgmltag class="attribute" role="LzView.__ivars__.resource">resource</sgmltag> attribute:</para>
+ <para>The
+ <sgmltag class="element" role="LzView">view</sgmltag>is the
+ most basic viewable element in an OpenLaszlo application and it
+ is described in
+ <xref linkend="views" />. A view may have a
+ <emphasis>resource</emphasis>attached to it. The resource
+ represents a piece of media (image, audio, video, or animation)
+ that the view controls. For images, the view typically displays
+ the image. For time-based media (audio, video, animation), the
+ view can be used to start, stop, or jump to a specific frame or
+ time in the media.</para>
+ <para>For a simple informal introduction to attaching resources
+ to views, see
+ <xref linkend="art_assets" />. The chapter you're reading now
+ briefly goes over topics covered in that tutorial and then goes
+ into greater depth.</para>
+ <para>Resources may be declared directly inside a view using
+ the view's
+ <sgmltag class="attribute" role="LzView.__ivars__.resource">
+ resource</sgmltag>attribute:</para>
<example role="live-example">
<title>Importing a resource</title>
<programlisting language="lzx">
@@ -88,16 +206,18 @@
<textdata fileref="programs/media-resources-$1.lzx" />
</textobject>
</programlisting>
- </example><?example role="live-example"><title>Importing a resource</title><programlisting role="lzx-embednew"><filename>media-resources-$1.lzx</filename><parameter/><code>
- <canvas height="110">
- <view resource="../resources/logo.gif"/>
- </canvas>
- </code></programlisting><programlisting>
- <canvas height="110">
- <view resource="../resources/logo.gif"/>
- </canvas>
- </programlisting><?lzx-edit programs/media-resources-$1.lzx></example?>
- <para>Or they may be declared externally as first-class objects themselves:</para>
+ </example>
+ <?example role="live-example"><title>Importing a resource</title><programlisting role="lzx-embednew"><filename>media-resources-$1.lzx</filename><parameter/><code>
+ <canvas height="110">
+ <view resource="../resources/logo.gif"/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="110">
+ <view resource="../resources/logo.gif"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/media-resources-$1.lzx></example?>
+ <para>Or they may be declared externally as first-class objects
+ themselves:</para>
<example role="live-example">
<title>Declaring a resource</title>
<programlisting language="lzx">
@@ -105,99 +225,240 @@
<textdata fileref="programs/media-resources-$2.lzx" />
</textobject>
</programlisting>
- </example><?example role="live-example"><title>Declaring a resource</title><programlisting role="lzx-embednew"><filename>media-resources-$2.lzx</filename><parameter/><code>
- <canvas height="110">
- <resource name="myname" src="../resources/logo.gif"/>
- <view resource="myname"/>
- </canvas>
- </code></programlisting><programlisting>
- <canvas height="110">
- <resource name="myname" src="../resources/logo.gif"/>
- <view resource="myname"/>
- </canvas>
- </programlisting><?lzx-edit programs/media-resources-$2.lzx></example?>
+ </example>
+ <?example role="live-example"><title>Declaring a resource</title><programlisting role="lzx-embednew"><filename>media-resources-$2.lzx</filename><parameter/><code>
+ <canvas height="110">
+ <resource name="myname" src="../resources/logo.gif"/>
+ <view resource="myname"/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="110">
+ <resource name="myname" src="../resources/logo.gif"/>
+ <view resource="myname"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/media-resources-$2.lzx></example?>
<section>
<title>Resources are not views</title>
- <para>Note that a <sgmltag class="element" role="LzView.__ivars__.resource">resource</sgmltag> is <emphasis>not</emphasis> itself a view. Resources do not have x and y positions, or background color, or any of the 49 or so attributes that views have. A resource that is not attached to a view is essentially invisible to the application. As explained below, in order to manipulate a resource, you perform actions on the view to which the resource is attached.</para>
+ <para>Note that a
+ <sgmltag class="element" role="LzView.__ivars__.resource">
+ resource</sgmltag>is
+ <emphasis>not</emphasis>itself a view. Resources do not have
+ x and y positions, or background color, or any of the 49 or
+ so attributes that views have. A resource that is not
+ attached to a view is essentially invisible to the
+ application. As explained below, in order to manipulate a
+ resource, you perform actions on the view to which the
+ resource is attached.</para>
</section>
<section>
<title>Summary of APIs that act on resources</title>
- <para>There are a number of <sgmltag class="element">view</sgmltag> APIs (methods, fields, and events) that can be used to find out about and control a view's resource.</para>
+ <para>There are a number of
+ <sgmltag class="element">view</sgmltag>APIs (methods, fields,
+ and events) that can be used to find out about and control a
+ view's resource.</para>
<itemizedlist spacing="compact">
<listitem>
- <para>Resource and view size, scaling and stretching:</para>
+ <para>Resource and view size, scaling and
+ stretching:</para>
<itemizedlist spacing="compact">
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.resourcewidth">resourcewidth</sgmltag></listitem>
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.resourceheight">resourceheight</sgmltag></listitem>
-<?ignore obsolete?
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.xscale">xscale</sgmltag></listitem>
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.yscale">yscale</sgmltag></listitem>
-?>
- <listitem><property role="LzView.stretches">stretches</property></listitem>
- <listitem><methodname role="LzView.prototype.stretchResource">stretchResource()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.measureWidth">measureWidth()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.measureHeight">measureHeight()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.updateResourceSize">updateResourceSize()</methodname></listitem>
+ <listitem>
+ <sgmltag class="attribute"
+ role="LzView.__ivars__.resourcewidth">
+ resourcewidth</sgmltag>
+ </listitem>
+ <listitem>
+ <sgmltag class="attribute"
+ role="LzView.__ivars__.resourceheight">
+ resourceheight</sgmltag>
+ </listitem><?ignore obsolete?
+ <listitem><sgmltag class="attribute" role="LzView.__ivars__.xscale">xscale</sgmltag></listitem>
+ <listitem><sgmltag class="attribute" role="LzView.__ivars__.yscale">yscale</sgmltag></listitem>
+ ?>
+ <listitem>
+ <property role="LzView.stretches">
+ stretches</property>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.stretchResource">
+ stretchResource()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.measureWidth">
+ measureWidth()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.measureHeight">
+ measureHeight()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.updateResourceSize">
+ updateResourceSize()</methodname>
+ </listitem>
</itemizedlist>
- <remark role="fixme">Discuss how view and resource sizes interact (need details from Adam/Sarah since I'm not really sure)</remark>
+ <remark role="fixme">Discuss how view and resource sizes
+ interact (need details from Adam/Sarah since I'm not
+ really sure)</remark>
</listitem>
<listitem>
<para>Resource loading (discussed
- <link linkend="media-resources.loading">below</link>):</para>
+ <link linkend="media-resources.loading">
+ below</link>):</para>
<itemizedlist spacing="compact">
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.resource">resource</sgmltag></listitem>
- <listitem><methodname role="LzView.prototype.setSource">setSource()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.unload">unload()</methodname></listitem>
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.loadratio">loadratio</sgmltag></listitem>
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.framesloadratio">framesloadratio</sgmltag></listitem>
- <listitem><property role="LzView.prototype.onload">onload</property></listitem>
- <listitem><property role="LzView.prototype.onerror">onerror</property></listitem>
- <listitem><property role="LzView.prototype.ontimeout">ontimeout</property></listitem>
- <listitem><property role="LzView.prototype.onaddsubresource">onaddsubresource</property></listitem>
+ <listitem>
+ <sgmltag class="attribute"
+ role="LzView.__ivars__.resource">resource</sgmltag>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.setSource">
+ setSource()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.unload">
+ unload()</methodname>
+ </listitem>
+ <listitem>
+ <sgmltag class="attribute"
+ role="LzView.__ivars__.loadratio">loadratio</sgmltag>
+ </listitem>
+ <listitem>
+ <sgmltag class="attribute"
+ role="LzView.__ivars__.framesloadratio">
+ framesloadratio</sgmltag>
+ </listitem>
+ <listitem>
+ <property role="LzView.prototype.onload">
+ onload</property>
+ </listitem>
+ <listitem>
+ <property role="LzView.prototype.onerror">
+ onerror</property>
+ </listitem>
+ <listitem>
+ <property role="LzView.prototype.ontimeout">
+ ontimeout</property>
+ </listitem>
+ <listitem>
+ <property role="LzView.prototype.onaddsubresource">
+ onaddsubresource</property>
+ </listitem>
</itemizedlist>
</listitem>
<listitem>
<para>Animation/video/frames:</para>
<itemizedlist spacing="compact">
- <listitem><methodname role="LzView.prototype.play">play()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.stop">stop()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.seek">seek()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.getTotalTime">getTotalTime()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.getCurrentTime">getCurrentTime()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.setResourceNumber">setResourceNumber()</methodname></listitem>
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.frame">frame</sgmltag></listitem>
- <listitem><sgmltag class="attribute" role="LzView.__ivars__.totalframes">totalframes</sgmltag></listitem>
- <listitem><property role="LzView.prototype.onlastframe">onlastframe</property></listitem>
- <listitem><property role="LzView.prototype.onplay">onplay</property></listitem>
- <listitem><property role="LzView.prototype.onstop">onstop</property></listitem>
+ <listitem>
+ <methodname role="LzView.prototype.play">
+ play()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.stop">
+ stop()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.seek">
+ seek()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.getTotalTime">
+ getTotalTime()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.getCurrentTime">
+ getCurrentTime()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.setResourceNumber">
+ setResourceNumber()</methodname>
+ </listitem>
+ <listitem>
+ <sgmltag class="attribute"
+ role="LzView.__ivars__.frame">frame</sgmltag>
+ </listitem>
+ <listitem>
+ <sgmltag class="attribute"
+ role="LzView.__ivars__.totalframes">
+ totalframes</sgmltag>
+ </listitem>
+ <listitem>
+ <property role="LzView.prototype.onlastframe">
+ onlastframe</property>
+ </listitem>
+ <listitem>
+ <property role="LzView.prototype.onplay">
+ onplay</property>
+ </listitem>
+ <listitem>
+ <property role="LzView.prototype.onstop">
+ onstop</property>
+ </listitem>
</itemizedlist>
</listitem>
<listitem>
<para>Audio:</para>
<itemizedlist spacing="compact">
- <listitem><methodname role="LzView.prototype.getVolume">getVolume()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.setVolume">setVolume()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.getPan">getPan()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.setPan">setPan()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.play">play()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.stop">stop()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.getTotalTime">getTotalTime()</methodname></listitem>
- <listitem><methodname role="LzView.prototype.getCurrentTime">getCurrentTime()</methodname></listitem>
+ <listitem>
+ <methodname role="LzView.prototype.getVolume">
+ getVolume()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.setVolume">
+ setVolume()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.getPan">
+ getPan()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.setPan">
+ setPan()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.play">
+ play()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.stop">
+ stop()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.getTotalTime">
+ getTotalTime()</methodname>
+ </listitem>
+ <listitem>
+ <methodname role="LzView.prototype.getCurrentTime">
+ getCurrentTime()</methodname>
+ </listitem>
</itemizedlist>
</listitem>
</itemizedlist>
</section>
<section>
<title>Resource declarations and naming</title>
- <para>When a resource is declared externally, it must be given a name. The namespace for resources is global to the entire application. Resource tags can only be used as direct children of either the <sgmltag class="element" role="LzCanvas">canvas</sgmltag> or <sgmltag class="element" role="tag.library">library</sgmltag> tags.</para>
- <para>This style of resource inclusion makes it simpler to separate out art assets from code and can make for improved designer/developer interactions.</para>
- <para>When you directly import a resource without naming it, as in the first example, the LZX compiler assigns a unique name to that resource.</para>
- <para>Behavior when two resources share the same name is undefined. Therefore you should take care to make sure that each resource has a unique and appropriate name.</para>
+ <para>When a resource is declared externally, it must be
+ given a name. The namespace for resources is global to the
+ entire application. Resource tags can only be used as direct
+ children of either the
+ <sgmltag class="element" role="LzCanvas">canvas</sgmltag>or
+ <sgmltag class="element" role="tag.library">
+ library</sgmltag>tags.</para>
+ <para>This style of resource inclusion makes it simpler to
+ separate out art assets from code and can make for improved
+ designer/developer interactions.</para>
+ <para>When you directly import a resource without naming it,
+ as in the first example, the LZX compiler assigns a unique
+ name to that resource.</para>
+ <para>Behavior when two resources share the same name is
+ undefined. Therefore you should take care to make sure that
+ each resource has a unique and appropriate name.</para>
</section>
</section>
<section>
<title>Multi-frame resources</title>
- <para>Laszlo supports the notion of a resource <emphasis>frame</emphasis>. A multi-frame resource is a resource that has a single name but refers to multiple independent pieces of media that are sequenced. Here is an example of declaring a multi-frame resource:</para>
+ <para>Laszlo supports the notion of a resource
+ <emphasis>frame</emphasis>. A multi-frame resource is a
+ resource that has a single name but refers to multiple
+ independent pieces of media that are sequenced. Here is an
+ example of declaring a multi-frame resource:</para>
<example role="live-example">
<title>Declaring a multi-frame resource</title>
<programlisting language="lzx">
@@ -205,48 +466,57 @@
<textdata fileref="programs/media-resources-$3.lzx" />
</textobject>
</programlisting>
- </example><?example role="live-example"><title>Declaring a multi-frame resource</title><programlisting role="lzx-embednew"><filename>media-resources-$3.lzx</filename><parameter/><code>
- <canvas height="180">
- <resource name="myresource">
- <frame src="../resources/logo.gif"/>
- <frame src="../resources/sky.jpg"/>
- </resource>
- <simplelayout spacing="5"/>
- <view id="myview" resource="myresource"/>
- <view layout="axis: x; spacing: 3">
- <text>Frame:</text>
- <radiogroup>
- <radiobutton selected="true">1</radiobutton>
- <radiobutton>2</radiobutton>
- <handler name="onvalue" args="v">
- myview.setResourceNumber(Number(v));
- </handler>
- </radiogroup>
- </view>
- </canvas>
- </code></programlisting><programlisting>
- <canvas height="180">
- <resource name="myresource">
- <frame src="../resources/logo.gif"/>
- <frame src="../resources/sky.jpg"/>
- </resource>
- <simplelayout spacing="5"/>
- <view id="myview" resource="myresource"/>
- <view layout="axis: x; spacing: 3">
- <text>Frame:</text>
- <radiogroup>
- <radiobutton selected="true">1</radiobutton>
- <radiobutton>2</radiobutton>
- <handler name="onvalue" args="v">
- myview.setResourceNumber(Number(v));
- </handler>
- </radiogroup>
- </view>
- </canvas>
- </programlisting><?lzx-edit programs/media-resources-$3.lzx></example?>
- <para>You can use a multi-frame resource to construct an animation that moves between frames when you call the
- <interface>LzView.play()</interface> method. Conversely, when you import a resource that contains an animation, each frame of the animation automatically becomes a frame in that resource. In other words, art assets that contain multiple frames themselves
- <emphasis>are</emphasis> multi-frame resources. Just as with multi-frame resources that are constructed in LZX by importing each frame individually, you can control the frame that is currently displayed.</para>
+ </example>
+ <?example role="live-example"><title>Declaring a multi-frame resource</title><programlisting role="lzx-embednew"><filename>media-resources-$3.lzx</filename><parameter/><code>
+ <canvas height="180">
+ <resource name="myresource">
+ <frame src="../resources/logo.gif"/>
+ <frame src="../resources/sky.jpg"/>
+ </resource>
+ <simplelayout spacing="5"/>
+ <view id="myview" resource="myresource"/>
+ <view layout="axis: x; spacing: 3">
+ <text>Frame:</text>
+ <radiogroup>
+ <radiobutton selected="true">1</radiobutton>
+ <radiobutton>2</radiobutton>
+ <handler name="onvalue" args="v">
+ myview.setResourceNumber(Number(v));
+ </handler>
+ </radiogroup>
+ </view>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="180">
+ <resource name="myresource">
+ <frame src="../resources/logo.gif"/>
+ <frame src="../resources/sky.jpg"/>
+ </resource>
+ <simplelayout spacing="5"/>
+ <view id="myview" resource="myresource"/>
+ <view layout="axis: x; spacing: 3">
+ <text>Frame:</text>
+ <radiogroup>
+ <radiobutton selected="true">1</radiobutton>
+ <radiobutton>2</radiobutton>
+ <handler name="onvalue" args="v">
+ myview.setResourceNumber(Number(v));
+ </handler>
+ </radiogroup>
+ </view>
+ </canvas>
+ </programlisting><?lzx-edit programs/media-resources-$3.lzx></example?>
+ <para>You can use a multi-frame resource to construct an
+ animation that moves between frames when you call the
+ <interface>LzView.play()</interface>method. Conversely, when
+ you import a resource that contains an animation, each frame of
+ the animation automatically becomes a frame in that resource.
+ In other words, art assets that contain multiple frames
+ themselves
+ <emphasis>are</emphasis>multi-frame resources. Just as with
+ multi-frame resources that are constructed in LZX by importing
+ each frame individually, you can control the frame that is
+ currently displayed.</para>
<example role="live-example">
<title>Importing an animation</title>
<programlisting language="lzx">
@@ -254,36 +524,39 @@
<textdata fileref="programs/media-resources-$4.lzx" />
</textobject>
</programlisting>
- </example><?example role="live-example"><title>Importing an animation</title><programlisting role="lzx-embednew"><filename>media-resources-$4.lzx</filename><parameter/><code>
- <canvas height="220">
- <simplelayout spacing="5"/>
- <resource name="myresource" src="resources/logo.swf"/>
- <button onclick="me.stop()"> Stop </button>
- <button onclick="me.play()"> Play </button>
- <text text="${me.frame + ' out of ' + me.totalframes + ' frame(s)'}"/>
- <view layout="axis: x; spacing: 4">
- <button isdefault="true" text="Set current frame: "
- onclick="me.setAttribute('frame', Number(tt.text))"/>
- <edittext id="tt" width="50"/>
- </view>
- <view id="me" resource="myresource"/>
- </canvas>
- </code></programlisting><programlisting>
- <canvas height="220">
- <simplelayout spacing="5"/>
- <resource name="myresource" src="resources/logo.swf"/>
- <button onclick="me.stop()"> Stop </button>
- <button onclick="me.play()"> Play </button>
- <text text="${me.frame + ' out of ' + me.totalframes + ' frame(s)'}"/>
- <view layout="axis: x; spacing: 4">
- <button isdefault="true" text="Set current frame: "
- onclick="me.setAttribute('frame', Number(tt.text))"/>
- <edittext id="tt" width="50"/>
- </view>
- <view id="me" resource="myresource"/>
- </canvas>
- </programlisting><?lzx-edit programs/media-resources-$4.lzx></example?>
- <para>Multi-frame resources are also useful for structuring the display of a single visual element or component that takes on different appearances:</para>
+ </example>
+ <?example role="live-example"><title>Importing an animation</title><programlisting role="lzx-embednew"><filename>media-resources-$4.lzx</filename><parameter/><code>
+ <canvas height="220">
+ <simplelayout spacing="5"/>
+ <resource name="myresource" src="resources/logo.swf"/>
+ <button onclick="me.stop()"> Stop </button>
+ <button onclick="me.play()"> Play </button>
+ <text text="${me.frame + ' out of ' + me.totalframes + ' frame(s)'}"/>
+ <view layout="axis: x; spacing: 4">
+ <button isdefault="true" text="Set current frame: "
+ onclick="me.setAttribute('frame', Number(tt.text))"/>
+ <edittext id="tt" width="50"/>
+ </view>
+ <view id="me" resource="myresource"/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="220">
+ <simplelayout spacing="5"/>
+ <resource name="myresource" src="resources/logo.swf"/>
+ <button onclick="me.stop()"> Stop </button>
+ <button onclick="me.play()"> Play </button>
+ <text text="${me.frame + ' out of ' + me.totalframes + ' frame(s)'}"/>
+ <view layout="axis: x; spacing: 4">
+ <button isdefault="true" text="Set current frame: "
+ onclick="me.setAttribute('frame', Number(tt.text))"/>
+ <edittext id="tt" width="50"/>
+ </view>
+ <view id="me" resource="myresource"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/media-resources-$4.lzx></example?>
+ <para>Multi-frame resources are also useful for structuring the
+ display of a single visual element or component that takes on
+ different appearances:</para>
<example role="live-example">
<title>Using multi-frame resources</title>
<programlisting language="lzx">
@@ -291,81 +564,118 @@
<textdata fileref="programs/media-resources-$5.lzx" />
</textobject>
</programlisting>
- </example><?example role="live-example"><title>Using multi-frame resources</title><programlisting role="lzx-embednew"><filename>media-resources-$5.lzx</filename><parameter/><code>
- <canvas height="120">
- <!-- create the multi-frame resource and give it a name -->
- <resource name="mybutton_rsrc">
- <!-- first frame is the mouseup state of the button -->
- <frame src="../resources/button-up.png"/>
- <!-- second frame is the mouseover state of the button -->
- <frame src="../resources/button-over.png"/>
- <!-- third frame is the mousedown state of the button -->
- <frame src="../resources/button-down.png"/>
- </resource>
-
- <!-- attach the resource to a view with mouse events -->
- <view resource="mybutton_rsrc"
- onmouseover="setResourceNumber(2)"
- onmouseout="setResourceNumber(1)"
- onmousedown="setResourceNumber(3)"
- onmouseup="setResourceNumber(2)"/>
-
-</canvas>
- </code></programlisting><programlisting>
- <canvas height="120">
- <!-- create the multi-frame resource and give it a name -->
- <resource name="mybutton_rsrc">
- <!-- first frame is the mouseup state of the button -->
- <frame src="../resources/button-up.png"/>
- <!-- second frame is the mouseover state of the button -->
- <frame src="../resources/button-over.png"/>
- <!-- third frame is the mousedown state of the button -->
- <frame src="../resources/button-down.png"/>
- </resource>
-
- <!-- attach the resource to a view with mouse events -->
- <view resource="mybutton_rsrc"
- onmouseover="setResourceNumber(2)"
- onmouseout="setResourceNumber(1)"
- onmousedown="setResourceNumber(3)"
- onmouseup="setResourceNumber(2)"/>
-
-</canvas>
- </programlisting><?lzx-edit programs/media-resources-$5.lzx></example?>
+ </example>
+ <?example role="live-example"><title>Using multi-frame resources</title><programlisting role="lzx-embednew"><filename>media-resources-$5.lzx</filename><parameter/><code>
+ <canvas height="120">
+ <!-- create the multi-frame resource and give it a name -->
+ <resource name="mybutton_rsrc">
+ <!-- first frame is the mouseup state of the button -->
+ <frame src="../resources/button-up.png"/>
+ <!-- second frame is the mouseover state of the button -->
+ <frame src="../resources/button-over.png"/>
+ <!-- third frame is the mousedown state of the button -->
+ <frame src="../resources/button-down.png"/>
+ </resource>
+
+ <!-- attach the resource to a view with mouse events -->
+ <view resource="mybutton_rsrc"
+ onmouseover="setResourceNumber(2)"
+ onmouseout="setResourceNumber(1)"
+ onmousedown="setResourceNumber(3)"
+ onmouseup="setResourceNumber(2)"/>
+
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="120">
+ <!-- create the multi-frame resource and give it a name -->
+ <resource name="mybutton_rsrc">
+ <!-- first frame is the mouseup state of the button -->
+ <frame src="../resources/button-up.png"/>
+ <!-- second frame is the mouseover state of the button -->
+ <frame src="../resources/button-over.png"/>
+ <!-- third frame is the mousedown state of the button -->
+ <frame src="../resources/button-down.png"/>
+ </resource>
+
+ <!-- attach the resource to a view with mouse events -->
+ <view resource="mybutton_rsrc"
+ onmouseover="setResourceNumber(2)"
+ onmouseout="setResourceNumber(1)"
+ onmousedown="setResourceNumber(3)"
+ onmouseup="setResourceNumber(2)"/>
+
+ </canvas>
+ </programlisting><?lzx-edit programs/media-resources-$5.lzx></example?>
<section>
<title>Frame rates</title>
- <para>As of OpenLaszlo 3.1, all LZX applications are compiled to Macromedia Flash (SWF) files. With the exception of audio files noted below, SWF files are played by the Flash plugin at a fixed frame rate and all imported animations are played at that frame rate. This frame rate is fixed at 30 frames per second.</para>
+ <para>As of OpenLaszlo 3.1, all LZX applications are compiled
+ to Macromedia Flash (SWF) files. With the exception of audio
+ files noted below, SWF files are played by the Flash plugin
+ at a fixed frame rate and all imported animations are played
+ at that frame rate. This frame rate is fixed at 30 frames per
+ second.</para>
<section>
<title>Audio rates</title>
- <para>Animations that include an audio soundtrack are played at a rate that maintains the original audio/video synchronization in the incoming animation.</para>
+ <para>Animations that include an audio soundtrack are
+ played at a rate that maintains the original audio/video
+ synchronization in the incoming animation.</para>
</section>
</section>
</section>
<section id="media-resources.loading">
<title>Resource loading</title>
- <para>In the examples above, we've declaratively tied resources to view. But we haven't expressed anything about when or how the application should pull in the needed resource. We call this <indexterm significance="preferred"><primary>resource loading</primary></indexterm><glossterm>resource loading</glossterm> and LZX provides flexibility over how and when the application loads resources. The most important choice is whether a resource should be loaded at <glossterm>compile time</glossterm> or <glossterm>run time</glossterm>.</para>
+ <para>In the examples above, we've declaratively tied resources
+ to view. But we haven't expressed anything about when or how
+ the application should pull in the needed resource. We call
+ this
+ <indexterm significance="preferred">
+ <primary>resource loading</primary>
+ </indexterm>
+ <glossterm>resource loading</glossterm>and LZX provides
+ flexibility over how and when the application loads resources.
+ The most important choice is whether a resource should be
+ loaded at
+ <glossterm>compile time</glossterm>or
+ <glossterm>run time</glossterm>.</para>
<section>
<title>Compile time resources</title>
- <para>Resources that are loaded at compile time are included in the application binary and add to the initial download size of the application.</para>
+ <para>Resources that are loaded at compile time are included
+ in the application binary and add to the initial download
+ size of the application.</para>
<example role="live-example">
<title>Including a resource at compile time</title>
- <programlisting><resource name="myname" src="resources/logo.gif"/></programlisting>
+ <programlisting><resource name="myname"
+ src="resources/logo.gif"/></programlisting>
</example>
<para>Compile-time resource inclusion is good for</para>
<itemizedlist spacing="compact">
<listitem>
- <para>small assets that are fixed for the life-time of the running application.</para>
+ <para>small assets that are fixed for the life-time of
+ the running application.</para>
</listitem>
<listitem>
- <para>assets that are needed by all users of an application</para>
+ <para>assets that are needed by all users of an
+ application</para>
</listitem>
</itemizedlist>
- <para>Examples of resources that are included at compile time include most of the assets associated with user-interface components.</para>
- <para>The LZX compiler may transcode compile-time resources for inclusion in the SWF application; the OpenLaszlo Server caches the results of these transcodes. The compiler checks the last-modified time of all compile-time-included resources to determine if an application needs to be recompiled.</para>
+ <para>Examples of resources that are included at compile time
+ include most of the assets associated with user-interface
+ components.</para>
+ <para>The LZX compiler may transcode compile-time resources
+ for inclusion in the SWF application; the OpenLaszlo Server
+ caches the results of these transcodes. The compiler checks
+ the last-modified time of all compile-time-included resources
+ to determine if an application needs to be recompiled.</para>
</section>
<section id="media-resources.runtime-resources">
<title>Run-time resources</title>
- <para>There are two main ways to load resources at run-time. The first is to use special syntax that is understood by the <sgmltag class="element" role="LzView">view</sgmltag>'s <sgmltag class="attribute" role="LzView.__ivars__.resource">resource</sgmltag> attribute. If you specify a value for this attribute that is an HTTP url, the compiler assumes that this resource should be loaded at runtime:</para>
+ <para>There are two main ways to load resources at run-time.
+ The first is to use special syntax that is understood by the
+ <sgmltag class="element" role="LzView">view</sgmltag>'s
+ <sgmltag class="attribute" role="LzView.__ivars__.resource">
+ resource</sgmltag>attribute. If you specify a value for this
+ attribute that is an HTTP url, the compiler assumes that this
+ resource should be loaded at runtime:</para>
<example role="live-example">
<title>Loading a resource at runtime</title>
<programlisting language="lzx">
@@ -373,16 +683,20 @@
<textdata fileref="programs/media-resources-$7.lzx" />
</textobject>
</programlisting>
- </example><?example role="live-example"><title>Loading a resource at runtime</title><programlisting role="lzx-embednew"><filename>media-resources-$7.lzx</filename><parameter/><code>
- <canvas height="180">
- <view resource="http:../resources/logo.gif"/>
- </canvas>
- </code></programlisting><programlisting>
- <canvas height="180">
- <view resource="http:../resources/logo.gif"/>
- </canvas>
- </programlisting><?lzx-edit programs/media-resources-$7.lzx></example?>
- <para>The second method is to use the <methodname role="LzView.prototype.setSource">setSource()</methodname> method. The previous example is equivalent to the following one:</para>
+ </example>
+ <?example role="live-example"><title>Loading a resource at runtime</title><programlisting role="lzx-embednew"><filename>media-resources-$7.lzx</filename><parameter/><code>
+ <canvas height="180">
+ <view resource="http:../resources/logo.gif"/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="180">
+ <view resource="http:../resources/logo.gif"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/media-resources-$7.lzx></example?>
+ <para>The second method is to use the
+ <methodname role="LzView.prototype.setSource">
+ setSource()</methodname>method. The previous example is
+ equivalent to the following one:</para>
<example role="live-example">
<title>Loading a resource at runtime using script</title>
<programlisting language="lzx">
@@ -392,34 +706,88 @@
</programlisting>
</example>
<note>
- <para>LZX treats HTTP URLs that omit the two slashes <literal>//</literal> after the colon (:) as being relative to the application.</para>
+ <para>LZX treats HTTP URLs that omit the two slashes
+ <literal>//</literal>after the colon (:) as being relative
+ to the application.</para>
</note>
- <para><indexterm><primary>setSource</primary></indexterm><methodname role="LzView.prototype.setSource">setSource()</methodname> provides more control over the loading of the resource. Using this method, you can:</para>
+ <para>
+ <indexterm>
+ <primary>setSource</primary>
+ </indexterm>
+ <methodname role="LzView.prototype.setSource">
+ setSource()</methodname>provides more control over the
+ loading of the resource. Using this method, you can:</para>
<itemizedlist spacing="compact">
<listitem>
- <para>choose whether or not the server and/or client should cache the resource;</para>
+ <para>choose whether or not the server and/or client
+ should cache the resource;</para>
</listitem>
<listitem>
- <para>specify a URL that instructs the server to use a specific protocol to fetch the resource;</para>
+ <para>specify a URL that instructs the server to use a
+ specific protocol to fetch the resource;</para>
</listitem>
<listitem>
- <para>specify HTTP request headers that should be used when fetching the resource over HTTP.</para>
+ <para>specify HTTP request headers that should be used
+ when fetching the resource over HTTP.</para>
</listitem>
</itemizedlist>
<section>
<title>Protocols for proxied applications</title>
<note>
- <para>This section does not apply to SOLO applications.</para>
+ <para>This section does not apply to SOLO
+ applications.</para>
</note>
- <para>Before sending resources to a running, proxied, OpenLaszlo application, the OpenLaszlo Server first fetches (or proxies) the resource. The server uses the URL for the resource to determine how and where to get the resource. The term
- <emphasis>back-end</emphasis>is used to refer to the server that is ultimately providing the resource. Depending on your configuration, the back-end can be the OpenLaszlo Server host itself. Or it may be another distinct host.</para>
- <para>The OpenLaszlo Server determines the protocol to use to communicate to the back-end based on the URL for the resource. By default, URLs that are to be loaded at runtime, that don't specify the protocol are assumed to be HTTP urls. OpenLaszlo supports communication to back-end hosts (including localhost itself) via the HTTP protocol. Relative HTTP URLs are thus fetched using a localhost HTTP transfer.</para>
+ <para>Before sending resources to a running, proxied,
+ OpenLaszlo application, the OpenLaszlo Server first fetches
+ (or proxies) the resource. The server uses the URL for the
+ resource to determine how and where to get the resource.
+ The term
+ <emphasis>back-end</emphasis>is used to refer to the server
+ that is ultimately providing the resource. Depending on
+ your configuration, the back-end can be the OpenLaszlo
+ Server host itself. Or it may be another distinct
+ host.</para>
+ <para>The OpenLaszlo Server determines the protocol to use
+ to communicate to the back-end based on the URL for the
+ resource. By default, URLs that are to be loaded at
+ runtime, that don't specify the protocol are assumed to be
+ HTTP urls. OpenLaszlo supports communication to back-end
+ hosts (including localhost itself) via the HTTP protocol.
+ Relative HTTP URLs are thus fetched using a localhost HTTP
+ transfer.</para>
</section>
<section>
<title>Caching</title>
- <para>By default, in proxied applications, media that is accessed at runtime is cached both in the server <emphasis role="bold">and</emphasis> in the client browser. The OpenLaszlo Server uses the standard HTTP If-Modified-Since/Last-Modified caching mechanism specified in the <ulink url="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP 1.1 specification</ulink>.</para>
- <para>The OpenLaszlo Server actually maintains two media caches. One cache is used for resources that are requested at runtime. This is simply called the <indexterm significance="preferred"><primary>Media Cache</primary></indexterm><glossterm>Media Cache</glossterm>. It also maintains a second cache for resources that are compiled into applications called the <indexterm significance="preferred"><primary>Compiler Media Cache</primary></indexterm><glossterm>Compiler Media Cache</glossterm>. In general, the Compiler Media Cache settings only affect the speed of the OpenLaszlo compiler. The settings for the Media Cache can affect server performance. See <ulink url="../deploy/" type="">The Deployer's Guide</ulink> for details.</para>
- <para>The example below provides a text input area for you to type in urls that you'd like to test. To run the example, copy it into your local environment and compile it:</para>
+ <para>By default, in proxied applications, media that is
+ accessed at runtime is cached both in the server
+ <emphasis role="bold">and</emphasis>in the client browser.
+ The OpenLaszlo Server uses the standard HTTP
+ If-Modified-Since/Last-Modified caching mechanism specified
+ in the
+ <ulink url="http://www.w3.org/Protocols/rfc2616/rfc2616.html">
+ HTTP 1.1 specification</ulink>.</para>
+ <para>The OpenLaszlo Server actually maintains two media
+ caches. One cache is used for resources that are requested
+ at runtime. This is simply called the
+ <indexterm significance="preferred">
+ <primary>Media Cache</primary>
+ </indexterm>
+ <glossterm>Media Cache</glossterm>. It also maintains a
+ second cache for resources that are compiled into
+ applications called the
+ <indexterm significance="preferred">
+ <primary>Compiler Media Cache</primary>
+ </indexterm>
+ <glossterm>Compiler Media Cache</glossterm>. In general,
+ the Compiler Media Cache settings only affect the speed of
+ the OpenLaszlo compiler. The settings for the Media Cache
+ can affect server performance. See
+ <ulink url="../deploy/" type="">The Deployer's
+ Guide</ulink>for details.</para>
+ <para>The example below provides a text input area for you
+ to type in urls that you'd like to test. To run the
+ example, copy it into your local environment and compile
+ it:</para>
<example>
<title>Testing runtime resource loading</title>
<programlisting language="lzx">
@@ -433,6 +801,15 @@
</section>
<section>
<title>Using the <image> tag</title>
- <para>The <sgmltag class="element" role="lz.image">image</sgmltag> tag has the effect of declaring a view and associating a resource with it. This is a convenient shorthand that can make your programs easier to read and maintain. Do not confuse the <sgmltag class="element" role="lz.image">image</sgmltag> tag with the <sgmltag class="element" role="img">img</sgmltag> tag. The latter is used to include images inside HTML text and behaves like the <img> tag in HTML.</para>
+ <para>The
+ <sgmltag class="element" role="lz.image">image</sgmltag>tag has
+ the effect of declaring a view and associating a resource with
+ it. This is a convenient shorthand that can make your programs
+ easier to read and maintain. Do not confuse the
+ <sgmltag class="element" role="lz.image">image</sgmltag>tag
+ with the
+ <sgmltag class="element" role="img">img</sgmltag>tag. The
+ latter is used to include images inside HTML text and behaves
+ like the <img> tag in HTML.</para>
</section>
</chapter>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/methods-events-attributes.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/methods-events-attributes.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/methods-events-attributes.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -945,15 +945,18 @@
<para/></section><section><title>Event Handler Attributes</title>
<para>Event Handler attributes are instructions for what to perform when a particular event happens. They always contain script, and cannot be changed at run-time (i.e. from script). Their values cannot (and do not need to) be retrieved from script.</para>
+<example>
+ <title>Event handler attributes</title>
+
-
+<programlisting>
<canvas debug="true" height="400">
<debug y="200"/>
<view width="50" height="50" bgcolor="red" />
</canvas>
-
-
+</programlisting>
+</example>
<para/></section><section><title>Final Attributes</title>
<para>Final attributes are declared and set in the tag, but cannot be changed in using script.
Good examples of final attributes are <indexterm><primary>name</primary></indexterm><sgmltag class="attribute">name</sgmltag> and <indexterm><primary>id</primary></indexterm><sgmltag class="attribute">id</sgmltag>. They can be read from script using dot syntax (e.g. myView.name).</para>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/proxied.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/proxied.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/proxied.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -1,4 +1,6 @@
<chapter id="proxied">
+<!-- move title to validate against DocBook LI, LPP-4593 9/3/2007-->
+<title>Proxied and SOLO Applications</title>
<para role="fixme"><remark role="fixme"><emphasis role="para-label">FIXME: </emphasis>
When compiling for DHTML, you should ensure that gzipping is turned on at the server. This is done automatically for swf files, but not for DHTML.
</remark></para>
@@ -11,7 +13,7 @@
</remark></para>
-<title>Proxied and SOLO Applications</title>
+
<para>
</para>
<para/><section><title>Review of deployment modes</title>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/rpc-soap.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/rpc-soap.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/rpc-soap.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -1,9 +1,9 @@
<chapter id="rpc-soap">
+ <!-- move title before warning to validate against DocBook dtd LI LPP-4641 9/4/2007 -->
+<title>SOAP</title>
<warning><para>
This feature works in proxied applications only. It does not work in SOLO applications.
</para></warning>
-<title>SOAP</title>
-
<para>SOAP (Simple Object Access Prototcol) is used to exchange information in a
distributed environment. A typical scenario involves a SOAP client invoking a
client-side function stub to invoke a SOAP web service operation. The SOAP web
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/text.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/text.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/text.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -1,878 +1,1398 @@
<chapter id="text">
+ <title>Text Views</title>
+ <para>This section describes the
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: text-->
+ and
+ <indexterm>
+ <primary>inputtext</primary>
+ </indexterm>
+ <sgmltag class="element"><inputtext></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: inputtext-->
+ tags (
+ <indexterm>
+ <primary>LzText</primary>
+ </indexterm>
+ <classname>LzText</classname>and
+ <indexterm>
+ <primary>LzInputText</primary>
+ </indexterm>
+ <classname>LzInputText</classname>classes). It assumes you're
+ familiar with basic LZX concepts such as views (
+ <xref linkend="views" />), methods, and attributes.</para>
+ <para>For a gentle introduction, see
+ <xref linkend="text-tutorial" />.</para>
+ <!-- remove empty para tag LI LPP-4642 9/4/2007-->
+ <!-- <para /> -->
+ <section>
+ <title>Summary of properties</title>
+ <para>To a first approximation, "text" refers to displayable
+ data in UTF-8 encoding; depending on context "text" can mean
+ the data itself, or its display. The term "font" refers to the
+ software that is used to draw, or render, the textual
+ characters on the screen. The topics are intertwined. In this
+ chapter we'll be talking about mostly about text, but you
+ should be sure that you understand key concepts about fonts in
+ OpenLaszlo applications.</para>
+ <para condition="swf">In particular, you should understand the
+ difference between client fonts and embedded fonts in
+ applications compiled to SWF. (Applications compiled to DHTML
+ cannot use embedded fonts). Because they don't always behave
+ the same way (for example client fonts can not be rotated or
+ changed in opacity due to a limitation of the Flash Player),
+ changing from one to the other can cause bewildering changes in
+ behavior. Furthermore, it's possible to implicitly change from
+ one kind of font to the other in your application without
+ realizing you've done so. Fonts are described in
+ <xref linkend="fonts" />.</para>
+ <para />
+ </section>
+ <section>
+ <title>Text as attribute and text as object</title>
+ <para>LZX is an XML language. By deffinition, in XML, whatever
+ comes between an opening and closing tag is called text. As we
+ have seen text in this context is implemented as HTML.</para>
+ <para>In other words, despite being called text, in our
+ implementation you can use HTML markup in anything that is
+ text. (In browser DOM, there are properties innerText,
+ outerText, innerHTML, and outerHTML. Only the latter two
+ interpret HTML markup.)</para>
+ <para>In LZX, we've also exposed that text as an attribute of
+ components, because sometimes it is useful to do so. For
+ example, you might want to constrain the text of a node; that's
+ easy to do with LZX constraints. Thus, text can be specified as
+ an attribute in the opening tag of basecomponent and
+ subclasses, which include all components. For example,</para>
+ <programlisting><button text="this is a fine kettle of
+ fish"></programlisting>
+ <para>is equvalent to</para>
+ <programlisting><button> this is a fine kettle of fish
+ </button></programlisting>
+ <para>LZX also includes a text object,
+ <literal>lz.text</literal>, which can be instantiated by using
+ the
+ <sgmltag class="element"><text></sgmltag>tag.</para>
+ <para>In addition to the HTML markup properties of text
+ attributes,
+ <sgmltag class="element">lz.text</sgmltag>objects have
+ additional properties such as maximum length, selectability,
+ and so forth, which are described later on in this chapter.
+ Oddly enough, one of the attributes of the
+ <sgmltag class="element"><lz.text></sgmltag>object is
+ <literal>text</literal>.</para>
+ <para>Thus,</para>
+ <programlisting><text id="sam" text="King Samuel was a fine
+ hamster"></programlisting>
+ <para>is equvalent to</para>
+ <programlisting><text id="sam"> King Samuel was a fine
+ hamster </text></programlisting>
+ <para>In each case we have defined an
+ <literal>lz.text</literal>object with an id of "sam" whose text
+ attribute is set to the string King Samuel was a fine hamster,
+ which can be marked up with the supported HTML markup supported
+ by LZX, as defined below. In this document, we have tried to
+ make clear when we are talking about text as text, and when we
+ are talking about text as an lz.text object. However, we may
+ have been loose at times. If you keep in mind that many
+ objects, including the
+ <literal>lz.text</literal>object have
+ <literal>text</literal>attributes.</para>
+ </section>
+ <!-- <para /> -->
+ <!-- remove empty para tag LI LPP-4642 9/4/2007-->
+ <section>
+ <title>Text width and height</title>
+ <para>Generally speaking, unless an explicit width and height
+ are specified as attributes, the text field will by default be
+ sized to a width and height which encloses its compile-time
+ text content. The text field can be set to automatically resize
+ itself when its value is modified at runtime, by setting the
+ attribute
+ <literal>resize="true"</literal>.</para>
+ <para>The exception to this rule is when the
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>element contains
+ an
+ <indexterm>
+ <primary>img</primary>
+ </indexterm>
+ <sgmltag class="element"><img></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: img-->
+ tag, in which case you may in some cases have to explicitly set
+ the height and width of the
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>, as explained
+ below.</para>
+ <programlisting><text resize="true" bgcolor="#ffcccc"
+ name="t1">Initial text from
+ server.</text></programlisting>
+ <para>Text can be set to automatically wrap at the right
+ margin, by setting the attribute
+ <literal>multiline="true"</literal>.</para>
+ <para />
+ <section>
+ <title>HTML formatting</title>
+ <para>Within a text element, a simple subset of HTML
+ formatting is supported for the text content, supporting
+ XHTML tags
+ <indexterm>
+ <primary>br</primary>
+ </indexterm>
+ <sgmltag class="element"><br></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: br-->
+ ,
+ <indexterm>
+ <primary>b</primary>
+ </indexterm>
+ <sgmltag class="element"><b></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: b-->
+ ,
+ <indexterm>
+ <primary>i</primary>
+ </indexterm>
+ <sgmltag class="element"><i></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: i-->
+ ,
+ <indexterm>
+ <primary>u</primary>
+ </indexterm>
+ <sgmltag class="element"><u></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: u-->
+ ,
+ <indexterm>
+ <primary>font</primary>
+ </indexterm>
+ <sgmltag class="element"><font></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: font-->
+ ,
+ <indexterm>
+ <primary>pre</primary>
+ </indexterm>
+ <sgmltag class="element"><pre></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: pre-->
+ , and
+ <indexterm>
+ <primary>a</primary>
+ </indexterm>
+ <sgmltag class="element"><a></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: a-->
+ .</para>
+ <para>The
+ <indexterm>
+ <primary>img</primary>
+ </indexterm>
+ <sgmltag class="element"><img></sgmltag>is also
+ supported, but with some caveats. See below.</para>
+ <para>The examples below show how to use XHTML tags in text
+ content:</para>
+ <para>For font style, the text element itself supports
+ attributes for setting the font parameters. These are the
+ <indexterm>
+ <primary>font</primary>
+ </indexterm>
+ <sgmltag class="attribute">font</sgmltag>,
+ <indexterm>
+ <primary>fontstyle</primary>
+ </indexterm>
+ <sgmltag class="attribute">fontstyle</sgmltag>, and
+ <indexterm>
+ <primary>fontsize</primary>
+ </indexterm>
+ <sgmltag class="attribute">
+ fontsize</sgmltag>attributes:</para>
+ <example role="live-example">
+ <title>Setting font, fontstyle and fontsize</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$1.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>setting font, fonstyle and fontsize</title><programlisting role="lzx-embednew"><filename>text-$1.lzx</filename><parameter/><code>
+ <canvas height="50">
+ <simplelayout axis="y"/>
+ <text fontstyle="bold">Default bold</text>
+ <text fontstyle="italic">Default italic</text>
+ <text fontstyle="bold italic">Default bold italic</text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="50">
+ <simplelayout axis="y"/>
+ <text fontstyle="bold">Default bold</text>
+ <text fontstyle="italic">Default italic</text>
+ <text fontstyle="bold italic">Default bold italic</text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$1.lzx></example?>
+ <para>Within the text content, HTML tags may also be
+ used:</para>
+ <example role="live-example">
+ <title>HTML tags within text</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$2.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>HTML tags within text</title><programlisting role="lzx-embednew"><filename>text-$2.lzx</filename><parameter/><code>
+ <canvas height="50">
+ <simplelayout axis="y"/>
+ <text><b>Default bold</b></text>
+ <text><i>Default italic</i></text>
+ <text fontstyle="bold"><i>Default bold italic</i></text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="50">
+ <simplelayout axis="y"/>
+ <text><b>Default bold</b></text>
+ <text><i>Default italic</i></text>
+ <text fontstyle="bold"><i>Default bold italic</i></text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$2.lzx></example?>
+ <para>Text can contain preformatted regions, where linebreaks
+ and whitespace are preserved:</para>
+ <example role="live-example">
+ <title>Preformatted text</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$3.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Preformatted text</title><programlisting role="lzx-embednew"><filename>text-$3.lzx</filename><parameter/><code>
+ <canvas height="80">
+ <text id="ttext" multiline="true" height="300">
+ This text field contains some preformatted text
+ <pre>
+ This is a line of text.
-<title>Text Views </title>
+ here was a blank line before this line.
+ And another line of text.
+ </pre>
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="80">
+ <text id="ttext" multiline="true" height="300">
+ This text field contains some preformatted text
+ <pre>
+ This is a line of text.
-<para> This section describes the <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: text-->
- and <indexterm><primary>inputtext</primary></indexterm><sgmltag class="element"><inputtext></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: inputtext-->
- tags (<indexterm><primary>LzText</primary></indexterm><classname>LzText</classname> and
-<indexterm><primary>LzInputText</primary></indexterm><classname>LzInputText</classname> classes). It assumes you're familiar
-with basic LZX concepts such as views (<xref linkend="views"/>), methods, and attributes.</para>
-<para>For a gentle introduction, see <xref linkend="text-tutorial"/>.
-</para>
-<para/><section><title>Summary of properties</title>
-<para>
-To a first approximation, "text" refers to displayable data in UTF-8 encoding; depending on context "text" can mean the data itself, or its display. The term "font" refers to the software that is used to draw, or render, the textual characters on the screen. The topics are intertwined. In this chapter we'll be talking about mostly about text, but you should be sure that you understand key concepts about fonts in OpenLaszlo applications.
-</para>
-<para condition="swf"> In particular, you should understand the difference between client fonts and embedded fonts in applications compiled to SWF. (Applications compiled to DHTML cannot use embedded fonts). Because they don't always behave the same way (for example client fonts can not be rotated or changed in opacity due to a limitation of the Flash Player), changing from one to the other can cause bewildering changes in behavior. Furthermore, it's possible to implicitly change from one kind of font to the other in your application without realizing you've done so. Fonts are described in <xref linkend="fonts"/>.
-</para>
-<para/>
-</section>
-<section><title>Text as attribute and text as object</title>
-<para>
-LZX is an XML language. By deffinition, in XML, whatever comes between an opening and closing tag is called text. As we have seen text in this context is implemented as HTML.
-</para>
- <para>
-In other words, despite being called text, in our implementation you can use HTML markup in anything that is text. (In browser DOM, there are properties innerText, outerText, innerHTML, and outerHTML. Only the latter two interpret HTML markup.)
-</para>
-<para>
- In LZX, we've also exposed that text as an attribute of components, because sometimes it is useful to do so. For example, you might want to constrain the text of a node; that's easy to do with LZX constraints. Thus, text can be specified as an attribute in the opening tag of basecomponent and subclasses, which include all components. For example,
-</para>
-<programlisting>
-<button text="this is a fine kettle of fish">
-</programlisting>
-<para>
-is equvalent to
-</para>
-<programlisting>
-<button>
- this is a fine kettle of fish
-</button>
-</programlisting>
-<para>
-LZX also includes a text object, <literal>lz.text</literal>, which can be instantiated by using the <sgmltag class="element"><text></sgmltag> tag.
-</para>
-<para>
-In addition to the HTML markup properties of text attributes, <sgmltag class="element">lz.text</sgmltag>objects have additional properties such as maximum length, selectability, and so forth, which are described later on in this chapter. Oddly enough, one of the attributes of the <sgmltag class="element"><lz.text></sgmltag>object is <literal>text</literal>.
-</para>
-<para>
-Thus,
-</para>
-<programlisting>
-<text id="sam" text="King Samuel was a fine hamster">
-</programlisting>
-<para>
-is equvalent to
-</para>
-<programlisting>
-<text id="sam">
- King Samuel was a fine hamster
-</text>
-</programlisting>
-<para>
-In each case we have defined an <literal>lz.text</literal> object with an id of "sam" whose text attribute is set to the string King Samuel was a fine hamster, which can be marked up with the supported HTML markup supported by LZX, as defined below. In this document, we have tried to make clear when we are talking about text as text, and when we are talking about text as an lz.text object. However, we may have been loose at times. If you keep in mind that many objects, including the <literal>lz.text</literal> object have <literal>text</literal> attributes.
-</para>
-</section>
-<para/><section><title>Text width and height</title>
-<para>
-Generally speaking, unless an explicit width and height are specified as attributes, the text field will by default be sized to a width and height which
-encloses its compile-time text content. The text field can
-be set to automatically resize itself when its value is modified at
-runtime, by setting the attribute <literal>resize="true"</literal>.
-</para>
-<para>
-The exception to this rule is when the <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag> element contains an <indexterm><primary>img</primary></indexterm><sgmltag class="element"><img></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: img-->
- tag, in which case you may in some cases have to explicitly set the height and width of the <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag>, as explained below.
-</para>
+ here was a blank line before this line.
+ And another line of text.
+ </pre>
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$3.lzx></example?>
+ <para>Within a text element, the HTML
+ <emphasis role="i">font</emphasis>tag supports the
+ <indexterm>
+ <primary>face</primary>
+ </indexterm>
+ <sgmltag class="attribute">face</sgmltag>,
+ <indexterm>
+ <primary>size</primary>
+ </indexterm>
+ <sgmltag class="attribute">size</sgmltag>, and
+ <indexterm>
+ <primary>color</primary>
+ </indexterm>
+ <sgmltag class="attribute">color</sgmltag>attributes. The
+ color must be specified as an RGB hex string of the form "
+ <literal>#
+ <varname>RRGGBB</varname></literal>".</para>
+ <example role="live-example">
+ <title>Setting text colors using RGB strings</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$4.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Setting text colors using RGB strings</title><programlisting role="lzx-embednew"><filename>text-$4.lzx</filename><parameter/><code>
+ <canvas height="60">
+ <simplelayout axis="y"/>
-<programlisting>
-<text resize="true" bgcolor="#ffcccc" name="t1">Initial text from server.</text>
-</programlisting>
+ <font name="Times Roman" src="bitstream-vera-1.10/vera.ttf"/>
+
+ <text height="30">
+ <font face="Times Roman" size="24">Times Roman</font>
+ </text>
+ <text bgcolor="#ffcccc">
+ <font color="#FF0000">C</font><font color="#FFFF00">O</font><font color="#00FFCC">L</font
+ ><font color="#CC00CC">O</font><font color="#AABB00">R</font><font color="#DDA00A">S</font>
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="60">
+ <simplelayout axis="y"/>
-<para>
-Text can be set to automatically wrap at the right margin, by setting the
-attribute <literal>multiline="true"</literal>.
-</para>
-<para/><section><title>HTML formatting</title>
-<para>Within a text element, a simple subset of HTML formatting is
-supported for the text content, supporting XHTML tags
-<indexterm><primary>br</primary></indexterm><sgmltag class="element"><br></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: br-->
-, <indexterm><primary>b</primary></indexterm><sgmltag class="element"><b></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: b-->
-, <indexterm><primary>i</primary></indexterm><sgmltag class="element"><i></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: i-->
-,
-<indexterm><primary>u</primary></indexterm><sgmltag class="element"><u></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: u-->
-, <indexterm><primary>font</primary></indexterm><sgmltag class="element"><font></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: font-->
-, <indexterm><primary>pre</primary></indexterm><sgmltag class="element"><pre></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: pre-->
-,
-and <indexterm><primary>a</primary></indexterm><sgmltag class="element"><a></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: a-->
-.</para>
-<para>
-The <indexterm><primary>img</primary></indexterm><sgmltag class="element"><img></sgmltag> is also supported, but with some caveats. See below.
-</para>
+ <font name="Times Roman" src="bitstream-vera-1.10/vera.ttf"/>
+
+ <text height="30">
+ <font face="Times Roman" size="24">Times Roman</font>
+ </text>
+ <text bgcolor="#ffcccc">
+ <font color="#FF0000">C</font><font color="#FFFF00">O</font><font color="#00FFCC">L</font
+ ><font color="#CC00CC">O</font><font color="#AABB00">R</font><font color="#DDA00A">S</font>
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$4.lzx></example?>
+ <para>If you wish to include HTML escape characters in the
+ text value, you can use entity codes such as
+ <literal>&amp;</literal>or
+ <literal>&lt;</literal>(or the numeric codes
+ <literal>&#
+ <varname>ddd</varname>;</literal>), or you may enclose the
+ characters using a CDATA region:</para>
+ <example role="live-example">
+ <title>Escaping HTML characters</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$5.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Escaping HTML characters</title><programlisting role="lzx-embednew"><filename>text-$5.lzx</filename><parameter/><code>
+ <canvas height="20">
+ <text bgcolor="#ffcccc"><![CDATA[<b>this text shouldn't be bold</b>]]></text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="20">
+ <text bgcolor="#ffcccc"><![CDATA[<b>this text shouldn't be bold</b>]]></text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$5.lzx></example?>
+ <para />
+ <section>
+ <title>Text Scrolling</title>
+ <para>Text fields can be scrolled using the
+ <indexterm>
+ <primary>
+ <literal>setXScroll()</literal>
+ </primary>
+ </indexterm>
+ <methodname>setXScroll()</methodname>and
+ <indexterm>
+ <primary>
+ <literal>setYScroll()</literal>
+ </primary>
+ </indexterm>
+ <methodname>setYScroll()</methodname>methods. The arguments
+ to these functions set the pixel position of the top line
+ of text relative to the text view bounding box, and should
+ be less than or equal to zero. When the text is scrolled
+ horizontaly or vertically, an
+ <indexterm>
+ <primary>onscrollx event</primary>
+ </indexterm>
+ <literal>onscrollx</literal>or
+ <indexterm>
+ <primary>onscrolly event</primary>
+ </indexterm>
+ <literal>onscrolly</literal>event will be sent.</para>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title>Text Width</title>
+ <para>A text view which is not given an explicit width will
+ default to have a width which is the length of the longest
+ line. (See below, however, about resizing text fields, and
+ also about the
+ <indexterm>
+ <primary>img</primary>
+ </indexterm>
+ <sgmltag class="element"><img></sgmltag>.) Given that
+ the initial text content is normalized according to HTML
+ normalization rules, and if you do not specify an explicit
+ width, the only way a linebreak will occur is if you have an
+ explicit HTML linebreak code such as
+ <literal><br/></literal>,
+ <literal><p/></literal>or a newline inside of the text
+ contents of a
+ <indexterm>
+ <primary>pre</primary>
+ </indexterm>
+ <sgmltag class="element"><pre></sgmltag>element.</para>
+ <para>The text view will default to a height which encloses
+ all of the lines of text.</para>
+ <para>If you want to know the total height of the text in a
+ text field (if you want to know how large to draw a
+ scrollbar, for example) there are a couple of ways to figure
+ this out: For a
+ <literal>multiline=false</literal>text field (i.e., one in
+ which wrapping is not being done automatically by the
+ system), you can use the
+ <indexterm>
+ <primary>
+ <literal>getTextHeight()</literal>
+ </primary>
+ </indexterm>
+ <methodname>getTextHeight()</methodname>method on
+ <indexterm>
+ <primary>LzText</primary>
+ </indexterm>
+ <classname>LzText</classname>.</para>
+ <para>For a
+ <literal>multiline=true</literal>output text field, the
+ system computes a property
+ <indexterm>
+ <primary>text.scrollHeight</primary>
+ </indexterm>
+ <sgmltag class="attribute">text.scrollHeight</sgmltag>which
+ which you may examine. This field is not maintained for input
+ text.</para>
+ <para>There are two basic classes for displaying text,
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>and
+ <indexterm>
+ <primary>inputtext</primary>
+ </indexterm>
+ <sgmltag class="element"><inputtext></sgmltag>. The
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: text-->
+ class is used for displaying text, while
+ <indexterm>
+ <primary>inputtext</primary>
+ </indexterm>
+ <sgmltag class="element"><inputtext></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: inputtext-->
+ is used for input fields where the user can type or edit text
+ interactively.</para>
+ <para />
+ <section>
+ <title>Resizable text fields</title>
+ <para>Take care when using text whose width must be
+ calculated at run time. Because the compiler does not know
+ what the text is (and the text field doesn't even know what
+ it is until the contraints evaluate), it can't really know
+ at construct time how wide to make itself.</para>
+ <para>If you add
+ <literal>resize=true</literal>, the field will expand to
+ fit the text. In the example below, notice how the last
+ concatenation is invisible and the last digit of the
+ numeric value from the slider gets cut off.</para>
+ <example role="live-example">
+ <title>Non-resizing text does not concatenate</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$6.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>non-resizing text does not concatentate</title><programlisting role="lzx-embednew"><filename>text-$6.lzx</filename><parameter/><code>
+ <canvas height="50" >
+ <simplelayout/>
+ <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
+ keystep="1000"/>
+ <text text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="50" >
+ <simplelayout/>
+ <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
+ keystep="1000"/>
+ <text text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$6.lzx></example?>
+ <para>The following shows the use of
+ <indexterm>
+ <primary>resize="true"</primary>
+ </indexterm>
+ <sgmltag class="attribute">resize="true"</sgmltag>to get
+ the desired behavior.</para>
+ <example role="live-example">
+ <title>Using the 'resize' attribute</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$7.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Using the 'resize' attribute</title><programlisting role="lzx-embednew"><filename>text-$7.lzx</filename><parameter/><code>
-<para>The examples below show how to use XHTML tags in text content:</para>
+ <canvas height="50">
+ <simplelayout/>
+ <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
+ keystep="1000"/>
+ <text resize="true" text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
+ </canvas>
+ </code></programlisting><programlisting>
-<para>For font style, the text element itself supports attributes for
-setting the font parameters. These are the
-<indexterm><primary>font</primary></indexterm><sgmltag class="attribute">font</sgmltag>, <indexterm><primary>fontstyle</primary></indexterm><sgmltag class="attribute">fontstyle</sgmltag>, and
-<indexterm><primary>fontsize</primary></indexterm><sgmltag class="attribute">fontsize</sgmltag> attributes:</para>
+ <canvas height="50">
+ <simplelayout/>
+ <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
+ keystep="1000"/>
+ <text <emphasis role="em">resize="true"</emphasis> text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$7.lzx></example?>
+ <para />
+ </section>
+ </section>
+ </section>
+ <section id="text.textview">
+ <title>The
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>View</title>
+ <para>The
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: text-->
+ tag instantiates an
+ <indexterm>
+ <primary>LzText</primary>
+ </indexterm>
+ <classname>LzText</classname>view. The text content can be
+ specified at compile time using either of the two methods
+ below; as the content of the
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>tag, or as the
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="attribute">text</sgmltag>attribute.</para>
+ <example role="live-example">
+ <title>Text views</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$8.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Text views</title><programlisting role="lzx-embednew"><filename>text-$8.lzx</filename><parameter/><code>
+ <canvas height="125">
+ <simplelayout/>
+ <text>Hello World!</text>
+ <text text="Hello World!"/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="125">
+ <simplelayout/>
+ <text>Hello World!</text>
+ <text text="Hello World!"/>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$8.lzx></example?>
+ <!-- remove empty para tag LI LPP-4642 9/4/2007-->
+ <!-- <para /> -->
+ <!-- duplicate section id; the other looks correct LI LPP-4642 9/4/2007-->
+ <!-- <section id="text.multiline"> -->
+ <section>
+ <title>Idiosyncrasies of lz.text views</title>
+ <para>
+ <literal>lz.text</literal>extends
+ <literal>lz.view</literal>, but some of its behaviors are
+ different from what you might expect. For example,
+ <literal>lz.text</literal>inherits opacity from view, as well
+ as rotation. But these attributes don't work in all cases, as
+ described below.</para>
+ <para>
+ <literal>lz.text</literal>has the following additional
+ peculiarities:</para>
+
+ <itemizedlist spacing="compact">
+ <listitem><para>Unlike lz.views, lz.text elements do not
+ auto-size to fit their contents. Use the resize or
+ multiline attributes to acheive this.</para></listitem>
+ <listitem><para>Even though lz.text is a subclass of lz.view, you
+ cannot nest views inside of it.</para></listitem>
+ <listitem><para>Data-bound text fields will automatically display
+ the text theyare bound to.</para></listitem>
+ </itemizedlist>
+ </section>
+ <!-- remove empty para tag LI LPP-4642 9/4/2007-->
+ <!-- <para /> -->
+ <section id="text.multiline">
+ <title>Single-line and multiline text</title>
+ <para>A text field can be either a single line or multiple
+ lines. The
+ <indexterm>
+ <primary>multiline</primary>
+ </indexterm>
+ <sgmltag class="attribute">multiline</sgmltag>sets whether
+ wrapping is enabled. The default is a single-line text
+ field.</para>
+ <example role="live-example">
+ <title>Multiline text</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$9.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Multiline text</title><programlisting role="lzx-embednew"><filename>text-$9.lzx</filename><parameter/><code>
+ <canvas height="125">
+ <simplelayout spacing="5"/>
+ <!-- Single line text, the default -->
+ <text bgcolor="#ffcccc">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
+ nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
+ augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
+ </text>
-<example role="live-example">
- <title>Setting font, fontstyle and fontsize</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$1.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>setting font, fonstyle and fontsize</title><programlisting role="lzx-embednew"><filename>text-$1.lzx</filename><parameter/><code>
-<canvas height="50">
- <simplelayout axis="y"/>
- <text fontstyle="bold">Default bold</text>
- <text fontstyle="italic">Default italic</text>
- <text fontstyle="bold italic">Default bold italic</text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="50">
- <simplelayout axis="y"/>
- <text fontstyle="bold">Default bold</text>
- <text fontstyle="italic">Default italic</text>
- <text fontstyle="bold italic">Default bold italic</text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$1.lzx></example?>
+ <!-- Multiline text (without an explicit width, the width would be
+ sized to fit the entire string on a single line) -->
+ <text bgcolor="#ccccff" multiline="true" width="300" >
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
+ nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
+ augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="125">
+ <simplelayout spacing="5"/>
+ <!-- Single line text, the default -->
+ <text bgcolor="#ffcccc">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
+ nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
+ augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
+ </text>
-<para>Within the text content, HTML tags may also be used:</para>
-
-<example role="live-example">
- <title>HTML tags within text</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$2.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>HTML tags within text</title><programlisting role="lzx-embednew"><filename>text-$2.lzx</filename><parameter/><code>
-<canvas height="50">
- <simplelayout axis="y"/>
- <text><b>Default bold</b></text>
- <text><i>Default italic</i></text>
- <text fontstyle="bold"><i>Default bold italic</i></text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="50">
- <simplelayout axis="y"/>
- <text><b>Default bold</b></text>
- <text><i>Default italic</i></text>
- <text fontstyle="bold"><i>Default bold italic</i></text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$2.lzx></example?>
-
-<para>Text can contain preformatted regions, where linebreaks and whitespace
-are preserved:</para>
-
-<example role="live-example">
- <title>Preformatted text</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$3.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Preformatted text</title><programlisting role="lzx-embednew"><filename>text-$3.lzx</filename><parameter/><code>
-<canvas height="80">
- <text id="ttext" multiline="true" height="300">
- This text field contains some preformatted text
- <pre>
- This is a line of text.
-
- here was a blank line before this line.
- And another line of text.
- </pre>
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="80">
- <text id="ttext" multiline="true" height="300">
- This text field contains some preformatted text
- <pre>
- This is a line of text.
-
- here was a blank line before this line.
- And another line of text.
- </pre>
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$3.lzx></example?>
-
-<para>Within a text element, the HTML <emphasis role="i">font</emphasis> tag supports the
-<indexterm><primary>face</primary></indexterm><sgmltag class="attribute">face</sgmltag>, <indexterm><primary>size</primary></indexterm><sgmltag class="attribute">size</sgmltag>, and
-<indexterm><primary>color</primary></indexterm><sgmltag class="attribute">color</sgmltag> attributes. The color must be specified
-as an RGB hex string of the form "<literal>#<varname>RRGGBB</varname></literal>".</para>
-
-<example role="live-example">
- <title>Setting text colors using RGB strings</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$4.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Setting text colors using RGB strings</title><programlisting role="lzx-embednew"><filename>text-$4.lzx</filename><parameter/><code>
-<canvas height="60">
- <simplelayout axis="y"/>
-
- <font name="Times Roman" src="bitstream-vera-1.10/vera.ttf"/>
-
- <text height="30">
- <font face="Times Roman" size="24">Times Roman</font>
- </text>
- <text bgcolor="#ffcccc">
- <font color="#FF0000">C</font><font color="#FFFF00">O</font><font color="#00FFCC">L</font
- ><font color="#CC00CC">O</font><font color="#AABB00">R</font><font color="#DDA00A">S</font>
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="60">
- <simplelayout axis="y"/>
-
- <font name="Times Roman" src="bitstream-vera-1.10/vera.ttf"/>
-
- <text height="30">
- <font face="Times Roman" size="24">Times Roman</font>
- </text>
- <text bgcolor="#ffcccc">
- <font color="#FF0000">C</font><font color="#FFFF00">O</font><font color="#00FFCC">L</font
- ><font color="#CC00CC">O</font><font color="#AABB00">R</font><font color="#DDA00A">S</font>
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$4.lzx></example?>
-
-<para>If you wish to include HTML escape characters in the text value,
-you can use entity codes such as <literal>&amp;</literal> or
-<literal>&lt;</literal> (or the numeric codes
-<literal>&#<varname>ddd</varname>;</literal>), or you may enclose the characters
-using a CDATA region:</para>
-
-<example role="live-example">
- <title>Escaping HTML characters</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$5.lzx"/></textobject>
- </programlisting>
-</example>
-
-<?example role="live-example"><title>Escaping HTML characters</title><programlisting role="lzx-embednew"><filename>text-$5.lzx</filename><parameter/><code>
-<canvas height="20">
- <text bgcolor="#ffcccc"><![CDATA[<b>this text shouldn't be bold</b>]]></text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="20">
- <text bgcolor="#ffcccc"><![CDATA[<b>this text shouldn't be bold</b>]]></text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$5.lzx></example?>
-
-<para/><section><title>Text Scrolling</title>
-
-<para>Text fields can be scrolled using the <indexterm><primary><literal>setXScroll()</literal></primary></indexterm><methodname>setXScroll()</methodname>
-and <indexterm><primary><literal>setYScroll()</literal></primary></indexterm><methodname>setYScroll()</methodname> methods. The arguments to these
-functions set the pixel position of the top line of text relative to
-the text view bounding box, and should be less than or equal to
-zero. When the text is scrolled horizontaly or vertically, an
-<indexterm><primary>onscrollx event</primary></indexterm><literal>onscrollx</literal> or <indexterm><primary>onscrolly event</primary></indexterm><literal>onscrolly</literal> event will be sent.</para>
-
-<para/></section></section><section><title>Text Width</title>
-
-<para>
- A text view which is not given an explicit width will default to
- have a width which is the length of the longest line. (See below, however, about
-resizing text fields, and also about the <indexterm><primary>img</primary></indexterm><sgmltag class="element"><img></sgmltag>.) Given that
- the initial text content is normalized according to HTML
- normalization rules, and if you do not specify an explicit width,
- the only way a linebreak will occur is if you have an explicit
- HTML linebreak code such as <literal><br/></literal>,
- <literal><p/></literal> or a newline inside of the text contents
- of a <indexterm><primary>pre</primary></indexterm><sgmltag class="element"><pre></sgmltag> element.
- </para>
-<para>
- The text view will default to a height which encloses all of
- the lines of text.
- </para>
-
-<para>
- If you want to know the total height of the text in a text field
- (if you want to know how large to draw a scrollbar, for example)
- there are a couple of ways to figure this out: For a
- <literal>multiline=false</literal> text field (i.e., one in which
- wrapping is not being done automatically by the system), you can use the <indexterm><primary><literal>getTextHeight()</literal></primary></indexterm><methodname>getTextHeight()</methodname> method on <indexterm><primary>LzText</primary></indexterm><classname>LzText</classname>.</para>
-
-<para>
- For a <literal>multiline=true</literal> output text field, the system
- computes a property <indexterm><primary>text.scrollHeight</primary></indexterm><sgmltag class="attribute">text.scrollHeight</sgmltag>
- which which you may examine. This field is not maintained for
- input text.
-</para>
-
-
-<para>There are two basic classes for displaying text,
-<indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag> and <indexterm><primary>inputtext</primary></indexterm><sgmltag class="element"><inputtext></sgmltag>. The
-<indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: text-->
- class is used for displaying
-text, while <indexterm><primary>inputtext</primary></indexterm><sgmltag class="element"><inputtext></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: inputtext-->
- is used
-for input fields where the user can type or edit text interactively.
-</para>
-<para/><section><title>Resizable text fields</title>
-<para>
-Take care when using text whose width must be calculated at run time.
-Because the compiler does not know what the text
-is (and the text field doesn't even know what it is until the contraints
-evaluate), it can't really know at construct time how wide to make itself.
-</para>
-<para>
-If you add <literal>resize=true</literal>, the field will expand to fit the text. In the example below, notice how the last concatenation is invisible and the last digit of the numeric value from
-the slider gets cut off.
-</para>
-
-<example role="live-example">
- <title>Non-resizing text does not concatenate</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$6.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>non-resizing text does not concatentate</title><programlisting role="lzx-embednew"><filename>text-$6.lzx</filename><parameter/><code>
-<canvas height="50" >
- <simplelayout/>
- <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
-keystep="1000"/>
- <text text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="50" >
- <simplelayout/>
- <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
-keystep="1000"/>
- <text text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
-</canvas>
-</programlisting><?lzx-edit programs/text-$6.lzx></example?>
-<para>
-The following shows the use of <indexterm><primary>resize="true"</primary></indexterm><sgmltag class="attribute">resize="true"</sgmltag> to get the desired behavior.
-</para>
-
-<example role="live-example">
- <title>Using the 'resize' attribute</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$7.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Using the 'resize' attribute</title><programlisting role="lzx-embednew"><filename>text-$7.lzx</filename><parameter/><code>
-
-<canvas height="50">
- <simplelayout/>
- <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
-keystep="1000"/>
- <text resize="true" text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
-</canvas>
-</code></programlisting><programlisting>
-
-<canvas height="50">
- <simplelayout/>
- <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
-keystep="1000"/>
- <text <emphasis role="em">resize="true"</emphasis> text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
-</canvas>
-</programlisting><?lzx-edit programs/text-$7.lzx></example?>
-
-<para/></section></section></section><section id="text.textview"><title>The <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag> View</title>
-<para>
-The <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: text-->
- tag instantiates an <indexterm><primary>LzText</primary></indexterm><classname>LzText</classname> view.
-The text content can be specified at compile time using either of the two methods below;
-as the content of the <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag> tag, or as the <indexterm><primary>text</primary></indexterm><sgmltag class="attribute">text</sgmltag> attribute.
-</para>
-
-<example role="live-example">
- <title>Text views</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$8.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Text views</title><programlisting role="lzx-embednew"><filename>text-$8.lzx</filename><parameter/><code>
-<canvas height="125">
- <simplelayout/>
- <text>Hello World!</text>
- <text text="Hello World!"/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="125">
- <simplelayout/>
- <text>Hello World!</text>
- <text text="Hello World!"/>
-</canvas>
-</programlisting><?lzx-edit programs/text-$8.lzx></example?>
-<para/><section id="text.multiline"><title>Idiosyncrasies of lz.text views</title>
-<para>
-<literal>lz.text</literal> extends <literal>lz.view</literal>, but some of its behaviors are different from what you might expect. For example, <literal>lz.text</literal> inherits opacity from view, as well as rotation. But these attributes don't work in all cases, as described below.
-</para>
-<para>
-<literal>lz.text</literal> has the following additional peculiarities:</para>
-<itemizedlist spacing="compact">
- <listitem>Unlike lz.views, lz.text elements do not auto-size to fit their contents. Use the resize or multiline attributes to acheive this.</listitem>
- <listitem>Even though lz.text is a subclass of lz.view, you cannot nest views inside of it.</listitem>
- <listitem>Data-bound text fields will automatically display the text theyare bound to. </listitem>
-</itemizedlist>
-</section>
-
-<para/><section id="text.multiline"><title>Single-line and multiline text</title>
-
-<para>A text field can be either a single line or multiple lines. The <indexterm><primary>multiline</primary></indexterm><sgmltag class="attribute">multiline</sgmltag> sets whether wrapping is enabled. The
-default is a single-line text field.
-</para>
-
-<example role="live-example">
- <title>Multiline text</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$9.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Multiline text</title><programlisting role="lzx-embednew"><filename>text-$9.lzx</filename><parameter/><code>
-<canvas height="125">
- <simplelayout spacing="5"/>
- <!-- Single line text, the default -->
- <text bgcolor="#ffcccc">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
- nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
- augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
- </text>
-
- <!-- Multiline text (without an explicit width, the width would be
- sized to fit the entire string on a single line) -->
- <text bgcolor="#ccccff" multiline="true" width="300" >
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
- nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
- augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="125">
- <simplelayout spacing="5"/>
- <!-- Single line text, the default -->
- <text bgcolor="#ffcccc">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
- nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
- augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
- </text>
-
- <!-- Multiline text (without an explicit width, the width would be
- sized to fit the entire string on a single line) -->
- <text bgcolor="#ccccff" multiline="true" width="300" >
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
- nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
- augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$9.lzx></example?>
-
-
-<para>With multiline text, the automatic wrapping is always enabled. You can disable wrapping
-by setting the <indexterm><primary>multiline</primary></indexterm><sgmltag class="attribute">multiline</sgmltag> to false. When multiline=false, the
-linebreaks will only be placed where you specify them in the text content, either as <literal><br/></literal> tags for HTML content, or newlines inside of a <literal><pre/></literal> preformatted text region.
-</para>
-
-<example role="live-example">
- <title>Multiline text with explicit line breaks</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$10.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Multiline text with explicit linebreaks</title><programlisting role="lzx-embednew"><filename>text-$10.lzx</filename><parameter/><code>
-<canvas height="125">
- <simplelayout spacing="5"/>
- <text bgcolor="#ccccff" multiline="true" width="400" >
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Cras
- nibh. Quisque justo. <br/>Donec porta, wisi quis vehicula interdum,
- augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="125">
- <simplelayout spacing="5"/>
- <text bgcolor="#ccccff" multiline="true" width="400" >
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Cras
- nibh. Quisque justo. <br/>Donec porta, wisi quis vehicula interdum,
- augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$10.lzx></example?>
-
-<para>Below is a non-wrapping text field with explicit line breaks.</para>
-
-<example role="live-example">
- <title>non-wrapping text with breaks</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$11.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Non-wrapping text with breaks</title><programlisting role="lzx-embednew"><filename>text-$11.lzx</filename><parameter/><code>
-<canvas height="125">
- <simplelayout spacing="5"/>
- <text bgcolor="#ccccff" multiline="false" width="500" height="100" >
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras<br/>
- nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,<br/>
- augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="125">
- <simplelayout spacing="5"/>
- <text bgcolor="#ccccff" multiline="false" width="500" height="100" >
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras<br/>
- nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,<br/>
- augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$11.lzx></example?>
-
-
-
-
-
-
-<para/></section><section id="text.width-height"><title>Text Width and Height</title>
-
-<para>If no explicit text width and height attributes are supplied, the text field
-will be sized to contain the initial text content. If the text view is single-line,
-then it will be sized to the height of the current font.
-</para>
-<para>Setting the <indexterm><primary>resize</primary></indexterm><sgmltag class="attribute">resize</sgmltag> on a text field will cause it to be resized to
-fit its text content at runtime, whenever the <methodname role="LzText.prototype.setText">setText()</methodname> method is called.
-</para>
-
-<para>
- Note: If no initial text content is specified, i.e., you have an
- empty tag such as <text/> , then the text view will be sized to
- some nonzero default width and height. This helps in debugging
- applications, (especially in the case of text views which are
- initialized from datapaths) because zero width text fields
- would be invisible no matter what their text value was set to
- at runtime.
- </para>
-
-
-<example role="live-example">
- <title>Resizing text</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$12.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Resizing text</title><programlisting role="lzx-embednew"><filename>text-$12.lzx</filename><parameter/><code>
-<canvas height="125">
- <debug x="400"/>
- <simplelayout/>
- <!-- Single line text, the default -->
- <text id="t1" bgcolor="#ffcccc" resize="false">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </text>
- <text id="t2" bgcolor="#ccffcc" resize="true">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </text>
- <button text="setText(...)">
- <handler name="onclick">
- t1.setText('resize='+t1.resize);
- t2.setText('resize='+t2.resize);
- </handler>
- </button>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="125">
- <debug x="400"/>
- <simplelayout/>
- <!-- Single line text, the default -->
- <text id="t1" bgcolor="#ffcccc" resize="false">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </text>
- <text id="t2" bgcolor="#ccffcc" resize="true">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </text>
- <button text="setText(...)">
- <handler name="onclick">
- t1.setText('resize='+t1.resize);
- t2.setText('resize='+t2.resize);
- </handler>
- </button>
-</canvas>
-</programlisting><?lzx-edit programs/text-$12.lzx></example?>
-
-<para/></section><section id="text.selection"><title>Text Selection</title>
-
-<para>Text can be made user-selectable with the <indexterm><primary>selectable</primary></indexterm><sgmltag class="attribute">selectable</sgmltag> attribute.
-This allows copy operations (and cut and paste, for <indexterm><primary>inputtext</primary></indexterm><sgmltag class="element"><inputtext></sgmltag>) by the user.
-</para>
-
-<example role="live-example">
- <title>Selectable text</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$13.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Selectable text</title><programlisting role="lzx-embednew"><filename>text-$13.lzx</filename><parameter/><code>
-<canvas height="125">
- <simplelayout spacing="4"/>
- <!-- Single line text, the default -->
- <text id="t1" bgcolor="#ffcccc" selectable="true" resize="false">
- I am selectable text. Select me!
- </text>
- <text id="t2" bgcolor="#ccffcc" resize="true">
- I am not selectable text. Try to select me!
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="125">
- <simplelayout spacing="4"/>
- <!-- Single line text, the default -->
- <text id="t1" bgcolor="#ffcccc" selectable="true" resize="false">
- I am selectable text. Select me!
- </text>
- <text id="t2" bgcolor="#ccffcc" resize="true">
- I am not selectable text. Try to select me!
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$13.lzx></example?>
-
-<para/></section><section><title>HTML Text Content</title>
-
-<para>Within a text view, a limited set of HTML tags and parameter
-entities may be used to format the text.</para>
-
-<table><title>HTML Tags</title><tgroup cols="2"><thead><row><entry>Tag</entry><entry>Example</entry></row></thead><tbody><row><entry><literal><b></literal></entry><entry><programlisting><b>bold text</b></programlisting></entry></row><row><entry><literal> <a href="url"></literal></entry><entry><programlisting><a href="http://www.boston.com">The Boston Globe</a></programlisting></entry></row><row><entry><literal> <font [color="#xxxxxx"] [face="Type Face"] [size="Type Size"]></literal></entry><entry><programlisting><font color="#ff0000" face="myfont" size="12">Red text in LPS font 'myfont'</font></programlisting></entry></row><row><entry><literal><i></literal></entry><entry><programlisting><i>italic text</i></programlisting></entry></row><row><entry><literal> <p></literal></entry><entry><programlisting>line break <p> after p tag</programlisting></entry></row><row><entry><literal>u</literal></entry><entry><programlisting><u>underline text</u></programlisting></entry></row><row><entry><literal>&quot;</literal></entry><entry><programlisting>"</programlisting></entry></row><row><entry><literal>&apos;</literal></entry><entry><programlisting>'</programlisting></entry></row><row><entry><literal>&amp;</literal></entry><entry><programlisting>&</programlisting></entry></row><row><entry><literal>&lt;</literal></entry><entry><programlisting><</programlisting></entry></row><row><entry><literal>&gt;</literal></entry><entry><programlisting>></programlisting></entry></row></tbody></tgroup></table>
-<para>
-To see the example below, compile it and run it in your local environment (Openlaszlo's live examples cannot include CDATA sections).
-</para>
-
-<example role="live-example"><title>HTML tags in text views</title><programlisting>
-<canvas height="125">
- <font name="Times Roman">
- <face src="timmonsr.ttf" />
- <face src="timmonsb.ttf" style="bold"/>
- <face src="timmonsi.ttf" style="italic"/>
- <face src="timmonsbi.ttf" style="bold italic"/>
- </font>
- <splash/>
- <view font="Times Roman" fontsize="16">
- <simplelayout axis="y"/>
- <text>
- normal <i>italic</i> <b>bold</b> <b><i>bold-italic</i></b>
- HTML Metachars: &lt; &gt; &amp; &quot;
- </text>
- <text>
- <font color="#FF0000">C</font><font color="#FFFF00">O</font><font color="#00FFCC">L</font
- ><font color="#CC00CC">O</font><font color="#AABB00">R</font><font color="#DDA00A">S</font>
- </text>
- <text><![CDATA[<b>this text shouldn't be bold, it's CDATA</b>]]></text>
- <text height="30"><font size="24">This is a 24 point font.</font></text>
- </view>
-</canvas>
-</programlisting></example>
-
-<para/></section><section><title>Using <img> tag to include images in HTML content</title>
-<para>
-The <indexterm><primary>img</primary></indexterm><sgmltag class="element"><img></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: img-->
- tag allows you to include certain kinds of images in HTML content within a <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag> element, or within an HTML element that a <text> element contains</para>
-<para condition="swf">
- When you're compiling to SWF, the image you include must be natively supported by the Flash Player (regardless whether your application is SOLO or proxied).</para>
-<note><para>
-<indexterm><primary>img</primary></indexterm><sgmltag class="element"><img></sgmltag> tag does not work inside <indexterm><primary>inputtext</primary></indexterm><sgmltag class="element"><inputtext></sgmltag>, only <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag>.
-</para></note>
-<para>
-Due to implementation details of the Flash Player, the <img> tag is only rendered when the <indexterm><primary sortas="multiline">@multiline</primary></indexterm><sgmltag class="attribute">@multiline</sgmltag> attribute of the <text> element is true. </para>
-<para condition="dhtml">
-Applications compiled to DTHML may not match exactly the appearance of those compiled to SWF. You may find that you need to "tweak" the layout using things like <br> tags. However, remember that applications compiled to DHTML can make use of the <indexterm><primary>HTML</primary></indexterm><sgmltag class="element"><HTML></sgmltag><remark role="fixme">[unknown tag]</remark>
-<!--unknown tag: HTML-->
- tag, which supports all HTML markup.
-</para>
-
-<para>
-The <img> tag supports the following attributes. All of these attributes are optional except the <indexterm><primary>src</primary></indexterm><sgmltag class="attribute">src</sgmltag> attribute. All attributes must be specified as literals (not constraints) in the program source.</para>
-<itemizedlist spacing="compact"><listitem><para>@src: This attribute is either a URI, or a JavaScript identifier. If it is a URI, it specifies the location of the image resource, which must be a JPEG or (Flash deployment targets only) SWF file. If it is a JavaScript identifier, it must be the name of a resource defined via the <resource> tag. This attribute is required. </para></listitem><listitem><para>@align = bottom | middle | top | left | right. The values have the same meaning as in HTML: </para></listitem><listitem><para>bottom: means that the bottom of the object should be vertically aligned with the current baseline. This is the default value. </para></listitem><listitem><para>middle: means that the center of the object should be vertically aligned with the current baseline. </para></listitem><listitem><para><para>
-Two other values, left and right, cause the image to float to the current left or right margin</para>
-</para>top: means that the top of the object should be vertically aligned with the top of the current text line.
-</listitem><listitem><para> @alt: string. When specified, the content of this attribute is made available to screen readers. </para></listitem><listitem><para>@width, @height: When specified, the width and height attributes scale the natural image size to these values. The value of @width and @height is a literal number of pixels. </para></listitem><listitem><para>@hspace: This attribute specifies the amount of white space to be inserted to the left and right of an IMG. The default value is not specified, but is generally a small, non-zero length. (On the Flash deployment target, this value is 8 pixels.) </para></listitem><listitem><para>@vspace: This attribute specifies the amount of white space to be inserted above and below an IMG. The default value is not specified, but is generally a small, non-zero length. (On the Flash deployment target, this value is 8 pixels.) </para></listitem></itemizedlist>
-<para>
-The <text> view is not by default sized to the content of the <img> tag.</para>
-<para>
-Here's an example of the basic use of the <indexterm><primary>img</primary></indexterm><sgmltag class="element"><img></sgmltag> tag.
-</para>
-
-<example role="live-example">
- <title>Basic use of <img> tag</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$15.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Basic use of <img> tag</title><programlisting role="lzx-embednew"><filename>text-$15.lzx</filename><parameter/><code>
-<canvas height="320" >
- <text multiline="true" width="300" height="300">
- Hello dear friends on the Red Planet! How is the Garden today?
- <img src="./images/horse-3.jpg"/>
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="320" >
- <text multiline="true" width="300" height="300">
- Hello dear friends on the Red Planet! How is the Garden today?
- <img src="./images/horse-3.jpg"/>
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$15.lzx></example?>
-<para>
-Notice that you cannot have an image in a text tag without also having text. Watch what happens when we comment out the text:
-</para>
-<example role="live-example">
- <title>You must include text with images</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$16.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>You must include text with images</title><programlisting role="lzx-embednew"><filename>text-$16.lzx</filename><parameter/><code>
-<canvas height="220" >
- <text multiline="true" width="200" height="200">
- <!--Hello dear friends on the Red Planet! How is the Garden today?-->
- <img src="./images/horse-3.jpg"/>
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="220" >
- <text multiline="true" width="200" height="200">
- <emphasis role="em"><!--Hello dear friends on the Red Planet! How is the Garden today?--></emphasis>
- <img src="./images/horse-3.jpg"/>
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$16.lzx></example?>
-<para>
-By giving values to the <indexterm><primary>height</primary></indexterm><sgmltag class="attribute">height</sgmltag> and <indexterm><primary>width</primary></indexterm><sgmltag class="attribute">width</sgmltag> attributes on the <indexterm><primary>img</primary></indexterm><sgmltag class="element"><img></sgmltag> tag, you can scale the image:
-</para>
-
-<example role="live-example">
- <title>Scaling an image included in text</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$17.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Scaling an image included in text</title><programlisting role="lzx-embednew"><filename>text-$17.lzx</filename><parameter/><code>
-<canvas height="100">
- <text multiline="true" height="80">
- Some text and
- <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
- some more text
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="100">
- <text multiline="true" height="80">
- Some text and
- <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
- some more text
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$17.lzx></example?>
-<para>
-You can position the included image by setting the <indexterm><primary>align</primary></indexterm><sgmltag class="attribute">align</sgmltag>
-</para>
-
-<example role="live-example">
- <title>Scaled and left-aligned image</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$18.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Scaled and left-aligned image</title><programlisting role="lzx-embednew"><filename>text-$18.lzx</filename><parameter/><code>
-<canvas height="350">
- <text multiline="true" height="300">
- Some text and
- <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
- some more text
- </text>
-</canvas>
-</code></programlisting><programlisting>
-<canvas height="350">
- <text multiline="true" height="300">
- Some text and
- <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
- some more text
- </text>
-</canvas>
-</programlisting><?lzx-edit programs/text-$18.lzx></example?>
-<para>
-You can include multiple <indexterm><primary>img</primary></indexterm><sgmltag class="element"><img></sgmltag> tags within the same <indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag> elements. Take care with the positioning; it's possible to position the images on top of each other, so you may not get the effect you want.
-</para>
-
-<example role="live-example">
- <title>Multiple images in text</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/text-$19.lzx"/></textobject>
- </programlisting>
-</example>
-<?example role="live-example"><title>Multiple images in text</title><programlisting role="lzx-embednew"><filename>text-$19.lzx</filename><parameter/><code>
-<canvas>
- <text multiline="true" width="100%">
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat.
- <img src="./images/horse-3.jpg"/>
-Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim.
- <img src="./images/horse-3.jpg"/>
-Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus.
- <img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
-Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Suspendisse accumsan, mauris dapibus pretium laoreet, nibh purus imperdiet lectus, a euismod elit enim a mi. Morbi commodo lacus quis nisl.
- <img src="./images/horse-3.jpg" align="left"/>
- Duis leo tortor, gravida eget, euismod non, ullamcorper quis, metus. Phasellus ornare facilisis metus. Aliquam at est.
- <img src="./images/horse-3.jpg" align="right"/>
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat. Phasellus eget massa sit amet lorem condimentum porta. Ut nec lorem. Pellentesque quam. Sed porttitor, elit vitae faucibus porta, enim nibh cursus augue, vitae iaculis enim lorem at eros.
- <img src="./images/horse-3.jpg" width="20" height="20" hspace="50"/>
-Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus.
- <img src="http:horse-3.jpg"/>
-Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus. Nulla facilisi. Aenean metus. Nullam vitae sem id risus accumsan luctus. Nam sit amet velit. Mauris ut est. Proin id sem ullamcorper pede luctus tristique. Pellentesque dapibus, neque et pellentesque tincidunt, sapien diam imperdiet ipsum, nec porttitor turpis lectus nec libero. Praesent ut elit.
- <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
-Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Etiam adipiscing urna quis tellus. Nam aliquam vehicula arcu.
- <img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
-Nunc malesuada. Curabitur tortor metus, malesuada et, suscipit ut, convallis ac, magna. Nam venenatis viverra ipsum. Phasellus dignissim sagittis urna. Phasellus cursus. Cras pede arcu, tempus a, consectetuer vel, faucibus fermentum, diam. Donec lacus.
-<img src="./images/horse-3.jpg"/>Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim. In suscipit congue dolor.
-</text>
-<scrollbar/>
-</canvas>
-</code></programlisting><programlisting>
-<canvas>
- <text multiline="true" width="100%">
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat.
- <img src="./images/horse-3.jpg"/>
-Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim.
- <img src="./images/horse-3.jpg"/>
-Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus.
- <img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
-Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Suspendisse accumsan, mauris dapibus pretium laoreet, nibh purus imperdiet lectus, a euismod elit enim a mi. Morbi commodo lacus quis nisl.
- <img src="./images/horse-3.jpg" align="left"/>
- Duis leo tortor, gravida eget, euismod non, ullamcorper quis, metus. Phasellus ornare facilisis metus. Aliquam at est.
- <img src="./images/horse-3.jpg" align="right"/>
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat. Phasellus eget massa sit amet lorem condimentum porta. Ut nec lorem. Pellentesque quam. Sed porttitor, elit vitae faucibus porta, enim nibh cursus augue, vitae iaculis enim lorem at eros.
- <img src="./images/horse-3.jpg" width="20" height="20" hspace="50"/>
-Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus.
- <img src="http:horse-3.jpg"/>
-Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus. Nulla facilisi. Aenean metus. Nullam vitae sem id risus accumsan luctus. Nam sit amet velit. Mauris ut est. Proin id sem ullamcorper pede luctus tristique. Pellentesque dapibus, neque et pellentesque tincidunt, sapien diam imperdiet ipsum, nec porttitor turpis lectus nec libero. Praesent ut elit.
- <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
-Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Etiam adipiscing urna quis tellus. Nam aliquam vehicula arcu.
- <img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
-Nunc malesuada. Curabitur tortor metus, malesuada et, suscipit ut, convallis ac, magna. Nam venenatis viverra ipsum. Phasellus dignissim sagittis urna. Phasellus cursus. Cras pede arcu, tempus a, consectetuer vel, faucibus fermentum, diam. Donec lacus.
-<img src="./images/horse-3.jpg"/>Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim. In suscipit congue dolor.
-</text>
-<scrollbar/>
-</canvas>
-</programlisting><?lzx-edit programs/text-$19.lzx></example?>
-<para/></section></section><section><title>The <indexterm><primary>inputtext</primary></indexterm><sgmltag class="element"><inputtext></sgmltag> View</title>
-
-<para>Editable text fields are created with the
-<indexterm><primary>inputtext</primary></indexterm><sgmltag class="element"><inputtext></sgmltag> tag. Like the non-editable
-<indexterm><primary>text</primary></indexterm><sgmltag class="element"><text></sgmltag> view, an input text field can be single line
-or multiline (wrapped).</para>
-
-<para/><section><title>Handling Inputtext Selection</title>
-
-<para>
-When a region of text is selected in an inputtext view, the <indexterm><primary><literal>getSelectionPosition()</literal></primary></indexterm><methodname>getSelectionPosition()</methodname> and <indexterm><primary><literal>getSelectionSize()</literal></primary></indexterm><methodname>getSelectionSize()</methodname> methods
-can be used to obtain the offset and length of the selected text. The <indexterm><primary><literal>setSelection()</literal></primary></indexterm><methodname>setSelection()</methodname>
-selects a region of text in the view.
-
-</para>
-
-
-<para/></section></section></chapter>
+ <!-- Multiline text (without an explicit width, the width would be
+ sized to fit the entire string on a single line) -->
+ <text bgcolor="#ccccff" multiline="true" width="300" >
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
+ nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
+ augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$9.lzx></example?>
+ <para>With multiline text, the automatic wrapping is always
+ enabled. You can disable wrapping by setting the
+ <indexterm>
+ <primary>multiline</primary>
+ </indexterm>
+ <sgmltag class="attribute">multiline</sgmltag>to false. When
+ multiline=false, the linebreaks will only be placed where you
+ specify them in the text content, either as
+ <literal><br/></literal>tags for HTML content, or
+ newlines inside of a
+ <literal><pre/></literal>preformatted text
+ region.</para>
+ <example role="live-example">
+ <title>Multiline text with explicit line breaks</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$10.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Multiline text with explicit linebreaks</title><programlisting role="lzx-embednew"><filename>text-$10.lzx</filename><parameter/><code>
+ <canvas height="125">
+ <simplelayout spacing="5"/>
+ <text bgcolor="#ccccff" multiline="true" width="400" >
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Cras
+ nibh. Quisque justo. <br/>Donec porta, wisi quis vehicula interdum,
+ augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="125">
+ <simplelayout spacing="5"/>
+ <text bgcolor="#ccccff" multiline="true" width="400" >
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Cras
+ nibh. Quisque justo. <br/>Donec porta, wisi quis vehicula interdum,
+ augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$10.lzx></example?>
+ <para>Below is a non-wrapping text field with explicit line
+ breaks.</para>
+ <example role="live-example">
+ <title>non-wrapping text with breaks</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$11.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Non-wrapping text with breaks</title><programlisting role="lzx-embednew"><filename>text-$11.lzx</filename><parameter/><code>
+ <canvas height="125">
+ <simplelayout spacing="5"/>
+ <text bgcolor="#ccccff" multiline="false" width="500" height="100" >
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras<br/>
+ nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,<br/>
+ augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="125">
+ <simplelayout spacing="5"/>
+ <text bgcolor="#ccccff" multiline="false" width="500" height="100" >
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras<br/>
+ nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,<br/>
+ augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$11.lzx></example?>
+ <para />
+ </section>
+ <section id="text.width-height">
+ <title>Text Width and Height</title>
+ <para>If no explicit text width and height attributes are
+ supplied, the text field will be sized to contain the initial
+ text content. If the text view is single-line, then it will
+ be sized to the height of the current font.</para>
+ <para>Setting the
+ <indexterm>
+ <primary>resize</primary>
+ </indexterm>
+ <sgmltag class="attribute">resize</sgmltag>on a text field
+ will cause it to be resized to fit its text content at
+ runtime, whenever the
+ <methodname role="LzText.prototype.setText">
+ setText()</methodname>method is called.</para>
+ <para>Note: If no initial text content is specified, i.e.,
+ you have an empty tag such as <text/> , then the text
+ view will be sized to some nonzero default width and height.
+ This helps in debugging applications, (especially in the case
+ of text views which are initialized from datapaths) because
+ zero width text fields would be invisible no matter what
+ their text value was set to at runtime.</para>
+ <example role="live-example">
+ <title>Resizing text</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$12.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Resizing text</title><programlisting role="lzx-embednew"><filename>text-$12.lzx</filename><parameter/><code>
+ <canvas height="125">
+ <debug x="400"/>
+ <simplelayout/>
+ <!-- Single line text, the default -->
+ <text id="t1" bgcolor="#ffcccc" resize="false">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ </text>
+ <text id="t2" bgcolor="#ccffcc" resize="true">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ </text>
+ <button text="setText(...)">
+ <handler name="onclick">
+ t1.setText('resize='+t1.resize);
+ t2.setText('resize='+t2.resize);
+ </handler>
+ </button>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="125">
+ <debug x="400"/>
+ <simplelayout/>
+ <!-- Single line text, the default -->
+ <text id="t1" bgcolor="#ffcccc" resize="false">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ </text>
+ <text id="t2" bgcolor="#ccffcc" resize="true">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ </text>
+ <button text="setText(...)">
+ <handler name="onclick">
+ t1.setText('resize='+t1.resize);
+ t2.setText('resize='+t2.resize);
+ </handler>
+ </button>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$12.lzx></example?>
+ <para />
+ </section>
+ <section id="text.selection">
+ <title>Text Selection</title>
+ <para>Text can be made user-selectable with the
+ <indexterm>
+ <primary>selectable</primary>
+ </indexterm>
+ <sgmltag class="attribute">selectable</sgmltag>attribute.
+ This allows copy operations (and cut and paste, for
+ <indexterm>
+ <primary>inputtext</primary>
+ </indexterm>
+ <sgmltag class="element"><inputtext></sgmltag>) by the
+ user.</para>
+ <example role="live-example">
+ <title>Selectable text</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$13.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Selectable text</title><programlisting role="lzx-embednew"><filename>text-$13.lzx</filename><parameter/><code>
+ <canvas height="125">
+ <simplelayout spacing="4"/>
+ <!-- Single line text, the default -->
+ <text id="t1" bgcolor="#ffcccc" selectable="true" resize="false">
+ I am selectable text. Select me!
+ </text>
+ <text id="t2" bgcolor="#ccffcc" resize="true">
+ I am not selectable text. Try to select me!
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="125">
+ <simplelayout spacing="4"/>
+ <!-- Single line text, the default -->
+ <text id="t1" bgcolor="#ffcccc" selectable="true" resize="false">
+ I am selectable text. Select me!
+ </text>
+ <text id="t2" bgcolor="#ccffcc" resize="true">
+ I am not selectable text. Try to select me!
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$13.lzx></example?>
+ <para />
+ </section>
+ <section>
+ <title>HTML Text Content</title>
+ <para>Within a text view, a limited set of HTML tags and
+ parameter entities may be used to format the text.</para>
+ <table>
+ <title>HTML Tags</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Tag</entry>
+ <entry>Example</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>
+ <literal><b></literal>
+ </entry>
+ <entry>
+ <programlisting><b>bold
+ text</b></programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal><a href="url"></literal>
+ </entry>
+ <entry>
+ <programlisting><a
+ href="http://www.boston.com">The Boston
+ Globe</a></programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal><font [color="#xxxxxx"] [face="Type
+ Face"] [size="Type Size"]></literal>
+ </entry>
+ <entry>
+ <programlisting><font color="#ff0000"
+ face="myfont" size="12">Red text in LPS font
+ 'myfont'</font></programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal><i></literal>
+ </entry>
+ <entry>
+ <programlisting><i>italic
+ text</i></programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal><p></literal>
+ </entry>
+ <entry>
+ <programlisting>line break <p> after p
+ tag</programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal>u</literal>
+ </entry>
+ <entry>
+ <programlisting><u>underline
+ text</u></programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal>&quot;</literal>
+ </entry>
+ <entry>
+ <programlisting>"</programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal>&apos;</literal>
+ </entry>
+ <entry>
+ <programlisting>'</programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal>&amp;</literal>
+ </entry>
+ <entry>
+ <programlisting>&</programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal>&lt;</literal>
+ </entry>
+ <entry>
+ <programlisting><</programlisting>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <literal>&gt;</literal>
+ </entry>
+ <entry>
+ <programlisting>></programlisting>
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <para>To see the example below, compile it and run it in your
+ local environment (Openlaszlo's live examples cannot include
+ CDATA sections).</para>
+ <example role="live-example">
+ <title>HTML tags in text views</title>
+ <programlisting><canvas height="125"> <font
+ name="Times Roman"> <face src="timmonsr.ttf" />
+ <face src="timmonsb.ttf" style="bold"/> <face
+ src="timmonsi.ttf" style="italic"/> <face
+ src="timmonsbi.ttf" style="bold italic"/> </font>
+ <splash/> <view font="Times Roman"
+ fontsize="16"> <simplelayout axis="y"/>
+ <text> normal <i>italic</i>
+ <b>bold</b>
+ <b><i>bold-italic</i></b> HTML
+ Metachars: &lt; &gt; &amp; &quot;
+ </text> <text> <font
+ color="#FF0000">C</font><font
+ color="#FFFF00">O</font><font
+ color="#00FFCC">L</font ><font
+ color="#CC00CC">O</font><font
+ color="#AABB00">R</font><font
+ color="#DDA00A">S</font> </text>
+ <text><![CDATA[<b>this text shouldn't be
+ bold, it's CDATA</b>]]></text> <text
+ height="30"><font size="24">This is a 24 point
+ font.</font></text> </view>
+ </canvas></programlisting>
+ </example>
+ <!-- remove empty para tag LI LPP-4642 9/4/2007-->
+ <!-- <para /> -->
+ </section>
+ <section>
+ <title>Using <img> tag to include images in HTML
+ content</title>
+ <para>The
+ <indexterm>
+ <primary>img</primary>
+ </indexterm>
+ <sgmltag class="element"><img></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: img-->
+ tag allows you to include certain kinds of images in HTML
+ content within a
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>element, or
+ within an HTML element that a <text> element
+ contains</para>
+ <para condition="swf">When you're compiling to SWF, the image
+ you include must be natively supported by the Flash Player
+ (regardless whether your application is SOLO or
+ proxied).</para>
+ <note>
+ <para>
+ <indexterm>
+ <primary>img</primary>
+ </indexterm>
+ <sgmltag class="element"><img></sgmltag>tag does not
+ work inside
+ <indexterm>
+ <primary>inputtext</primary>
+ </indexterm>
+ <sgmltag class="element"><inputtext></sgmltag>, only
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>.</para>
+ </note>
+ <para>Due to implementation details of the Flash Player, the
+ <img> tag is only rendered when the
+ <indexterm>
+ <primary sortas="multiline">@multiline</primary>
+ </indexterm>
+ <sgmltag class="attribute">@multiline</sgmltag>attribute of
+ the <text> element is true.</para>
+ <para condition="dhtml">Applications compiled to DTHML may
+ not match exactly the appearance of those compiled to SWF.
+ You may find that you need to "tweak" the layout using things
+ like <br> tags. However, remember that applications
+ compiled to DHTML can make use of the
+ <indexterm>
+ <primary>HTML</primary>
+ </indexterm>
+ <sgmltag class="element"><HTML></sgmltag>
+ <remark role="fixme">[unknown tag]</remark>
+ <!--unknown tag: HTML-->
+ tag, which supports all HTML markup.</para>
+ <para>The <img> tag supports the following attributes.
+ All of these attributes are optional except the
+ <indexterm>
+ <primary>src</primary>
+ </indexterm>
+ <sgmltag class="attribute">src</sgmltag>attribute. All
+ attributes must be specified as literals (not constraints) in
+ the program source.</para>
+ <itemizedlist spacing="compact">
+ <listitem>
+ <para>@src: This attribute is either a URI, or a
+ JavaScript identifier. If it is a URI, it specifies the
+ location of the image resource, which must be a JPEG or
+ (Flash deployment targets only) SWF file. If it is a
+ JavaScript identifier, it must be the name of a resource
+ defined via the <resource> tag. This attribute is
+ required.</para>
+ </listitem>
+ <listitem>
+ <para>@align = bottom | middle | top | left | right. The
+ values have the same meaning as in HTML:</para>
+ </listitem>
+ <listitem>
+ <para>bottom: means that the bottom of the object should
+ be vertically aligned with the current baseline. This is
+ the default value.</para>
+ </listitem>
+ <listitem>
+ <para>middle: means that the center of the object should
+ be vertically aligned with the current baseline.</para>
+ </listitem>
+ <listitem>
+ <!-- remove duplicate para tag LI LPP-4642 9/4/2007-->
+ <!-- <para> -->
+ <para>Two other values, left and right, cause the image
+ to float to the current left or right margin</para>
+ </listitem>
+ <!-- </para> -->
+ <!-- insert missing listitem, para tags LI LPP-4642 9/4/2007-->
+ <listitem>
+ <para>
+
+ top: means that the top of the object should be
+ vertically aligned with the top of the current text
+ line.</para></listitem>
+ <listitem>
+ <para>@alt: string. When specified, the content of this
+ attribute is made available to screen readers.</para>
+ </listitem>
+ <listitem>
+ <para>@width, @height: When specified, the width and
+ height attributes scale the natural image size to these
+ values. The value of @width and @height is a literal
+ number of pixels.</para>
+ </listitem>
+ <listitem>
+ <para>@hspace: This attribute specifies the amount of
+ white space to be inserted to the left and right of an
+ IMG. The default value is not specified, but is generally
+ a small, non-zero length. (On the Flash deployment
+ target, this value is 8 pixels.)</para>
+ </listitem>
+ <listitem>
+ <para>@vspace: This attribute specifies the amount of
+ white space to be inserted above and below an IMG. The
+ default value is not specified, but is generally a small,
+ non-zero length. (On the Flash deployment target, this
+ value is 8 pixels.)</para>
+ </listitem>
+ </itemizedlist>
+ <para>The <text> view is not by default sized to the
+ content of the <img> tag.</para>
+ <para>Here's an example of the basic use of the
+ <indexterm>
+ <primary>img</primary>
+ </indexterm>
+ <sgmltag class="element"><img></sgmltag>tag.</para>
+ <example role="live-example">
+ <title>Basic use of <img> tag</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$15.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Basic use of <img> tag</title><programlisting role="lzx-embednew"><filename>text-$15.lzx</filename><parameter/><code>
+ <canvas height="320" >
+ <text multiline="true" width="300" height="300">
+ Hello dear friends on the Red Planet! How is the Garden today?
+ <img src="./images/horse-3.jpg"/>
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="320" >
+ <text multiline="true" width="300" height="300">
+ Hello dear friends on the Red Planet! How is the Garden today?
+ <img src="./images/horse-3.jpg"/>
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$15.lzx></example?>
+ <para>Notice that you cannot have an image in a text tag
+ without also having text. Watch what happens when we comment
+ out the text:</para>
+ <example role="live-example">
+ <title>You must include text with images</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$16.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>You must include text with images</title><programlisting role="lzx-embednew"><filename>text-$16.lzx</filename><parameter/><code>
+ <canvas height="220" >
+ <text multiline="true" width="200" height="200">
+ <!--Hello dear friends on the Red Planet! How is the Garden today?-->
+ <img src="./images/horse-3.jpg"/>
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="220" >
+ <text multiline="true" width="200" height="200">
+ <emphasis role="em"><!--Hello dear friends on the Red Planet! How is the Garden today?--></emphasis>
+ <img src="./images/horse-3.jpg"/>
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$16.lzx></example?>
+ <para>By giving values to the
+ <indexterm>
+ <primary>height</primary>
+ </indexterm>
+ <sgmltag class="attribute">height</sgmltag>and
+ <indexterm>
+ <primary>width</primary>
+ </indexterm>
+ <sgmltag class="attribute">width</sgmltag>attributes on the
+ <indexterm>
+ <primary>img</primary>
+ </indexterm>
+ <sgmltag class="element"><img></sgmltag>tag, you can
+ scale the image:</para>
+ <example role="live-example">
+ <title>Scaling an image included in text</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$17.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Scaling an image included in text</title><programlisting role="lzx-embednew"><filename>text-$17.lzx</filename><parameter/><code>
+ <canvas height="100">
+ <text multiline="true" height="80">
+ Some text and
+ <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
+ some more text
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="100">
+ <text multiline="true" height="80">
+ Some text and
+ <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
+ some more text
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$17.lzx></example?>
+ <para>You can position the included image by setting the
+ <indexterm>
+ <primary>align</primary>
+ </indexterm>
+ <sgmltag class="attribute">align</sgmltag></para>
+ <example role="live-example">
+ <title>Scaled and left-aligned image</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$18.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Scaled and left-aligned image</title><programlisting role="lzx-embednew"><filename>text-$18.lzx</filename><parameter/><code>
+ <canvas height="350">
+ <text multiline="true" height="300">
+ Some text and
+ <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
+ some more text
+ </text>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas height="350">
+ <text multiline="true" height="300">
+ Some text and
+ <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
+ some more text
+ </text>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$18.lzx></example?>
+ <para>You can include multiple
+ <indexterm>
+ <primary>img</primary>
+ </indexterm>
+ <sgmltag class="element"><img></sgmltag>tags within the
+ same
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>elements. Take
+ care with the positioning; it's possible to position the
+ images on top of each other, so you may not get the effect
+ you want.</para>
+ <example role="live-example">
+ <title>Multiple images in text</title>
+ <programlisting language="lzx">
+ <textobject>
+ <textdata fileref="programs/text-$19.lzx" />
+ </textobject>
+ </programlisting>
+ </example>
+ <?example role="live-example"><title>Multiple images in text</title><programlisting role="lzx-embednew"><filename>text-$19.lzx</filename><parameter/><code>
+ <canvas>
+ <text multiline="true" width="100%">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat.
+ <img src="./images/horse-3.jpg"/>
+ Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim.
+ <img src="./images/horse-3.jpg"/>
+ Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus.
+ <img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
+ Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Suspendisse accumsan, mauris dapibus pretium laoreet, nibh purus imperdiet lectus, a euismod elit enim a mi. Morbi commodo lacus quis nisl.
+ <img src="./images/horse-3.jpg" align="left"/>
+ Duis leo tortor, gravida eget, euismod non, ullamcorper quis, metus. Phasellus ornare facilisis metus. Aliquam at est.
+ <img src="./images/horse-3.jpg" align="right"/>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat. Phasellus eget massa sit amet lorem condimentum porta. Ut nec lorem. Pellentesque quam. Sed porttitor, elit vitae faucibus porta, enim nibh cursus augue, vitae iaculis enim lorem at eros.
+ <img src="./images/horse-3.jpg" width="20" height="20" hspace="50"/>
+ Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus.
+ <img src="http:horse-3.jpg"/>
+ Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus. Nulla facilisi. Aenean metus. Nullam vitae sem id risus accumsan luctus. Nam sit amet velit. Mauris ut est. Proin id sem ullamcorper pede luctus tristique. Pellentesque dapibus, neque et pellentesque tincidunt, sapien diam imperdiet ipsum, nec porttitor turpis lectus nec libero. Praesent ut elit.
+ <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
+ Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Etiam adipiscing urna quis tellus. Nam aliquam vehicula arcu.
+ <img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
+ Nunc malesuada. Curabitur tortor metus, malesuada et, suscipit ut, convallis ac, magna. Nam venenatis viverra ipsum. Phasellus dignissim sagittis urna. Phasellus cursus. Cras pede arcu, tempus a, consectetuer vel, faucibus fermentum, diam. Donec lacus.
+ <img src="./images/horse-3.jpg"/>Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim. In suscipit congue dolor.
+ </text>
+ <scrollbar/>
+ </canvas>
+ </code></programlisting><programlisting>
+ <canvas>
+ <text multiline="true" width="100%">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat.
+ <img src="./images/horse-3.jpg"/>
+ Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim.
+ <img src="./images/horse-3.jpg"/>
+ Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus.
+ <img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
+ Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Suspendisse accumsan, mauris dapibus pretium laoreet, nibh purus imperdiet lectus, a euismod elit enim a mi. Morbi commodo lacus quis nisl.
+ <img src="./images/horse-3.jpg" align="left"/>
+ Duis leo tortor, gravida eget, euismod non, ullamcorper quis, metus. Phasellus ornare facilisis metus. Aliquam at est.
+ <img src="./images/horse-3.jpg" align="right"/>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat. Phasellus eget massa sit amet lorem condimentum porta. Ut nec lorem. Pellentesque quam. Sed porttitor, elit vitae faucibus porta, enim nibh cursus augue, vitae iaculis enim lorem at eros.
+ <img src="./images/horse-3.jpg" width="20" height="20" hspace="50"/>
+ Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus.
+ <img src="http:horse-3.jpg"/>
+ Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus. Nulla facilisi. Aenean metus. Nullam vitae sem id risus accumsan luctus. Nam sit amet velit. Mauris ut est. Proin id sem ullamcorper pede luctus tristique. Pellentesque dapibus, neque et pellentesque tincidunt, sapien diam imperdiet ipsum, nec porttitor turpis lectus nec libero. Praesent ut elit.
+ <img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
+ Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Etiam adipiscing urna quis tellus. Nam aliquam vehicula arcu.
+ <img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
+ Nunc malesuada. Curabitur tortor metus, malesuada et, suscipit ut, convallis ac, magna. Nam venenatis viverra ipsum. Phasellus dignissim sagittis urna. Phasellus cursus. Cras pede arcu, tempus a, consectetuer vel, faucibus fermentum, diam. Donec lacus.
+ <img src="./images/horse-3.jpg"/>Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim. In suscipit congue dolor.
+ </text>
+ <scrollbar/>
+ </canvas>
+ </programlisting><?lzx-edit programs/text-$19.lzx></example?>
+ <para />
+ </section>
+ </section>
+ <section>
+ <title>The
+ <indexterm>
+ <primary>inputtext</primary>
+ </indexterm>
+ <sgmltag class="element">
+ <inputtext></sgmltag>View</title>
+ <para>Editable text fields are created with the
+ <indexterm>
+ <primary>inputtext</primary>
+ </indexterm>
+ <sgmltag class="element"><inputtext></sgmltag>tag. Like
+ the non-editable
+ <indexterm>
+ <primary>text</primary>
+ </indexterm>
+ <sgmltag class="element"><text></sgmltag>view, an input
+ text field can be single line or multiline (wrapped).</para>
+ <!-- remove empty para tag LI LPP-4642 9/4/2007-->
+ <!-- <para /> -->
+ <section>
+ <title>Handling Inputtext Selection</title>
+ <para>When a region of text is selected in an inputtext view,
+ the
+ <indexterm>
+ <primary>
+ <literal>getSelectionPosition()</literal>
+ </primary>
+ </indexterm>
+ <methodname>getSelectionPosition()</methodname>and
+ <indexterm>
+ <primary>
+ <literal>getSelectionSize()</literal>
+ </primary>
+ </indexterm>
+ <methodname>getSelectionSize()</methodname>methods can be
+ used to obtain the offset and length of the selected text.
+ The
+ <indexterm>
+ <primary>
+ <literal>setSelection()</literal>
+ </primary>
+ </indexterm>
+ <methodname>setSelection()</methodname>selects a region of
+ text in the view.</para>
+ <!-- remove empty para tag LI LPP-4642 9/4/2007-->
+ <!-- <para /> -->
+ </section>
+ </section>
+</chapter>
Modified: openlaszlo/branches/legals-doctools/docs/src/developers/views.dbk
===================================================================
--- openlaszlo/branches/legals-doctools/docs/src/developers/views.dbk 2007-09-07 15:38:56 UTC (rev 6398)
+++ openlaszlo/branches/legals-doctools/docs/src/developers/views.dbk 2007-09-07 19:38:08 UTC (rev 6399)
@@ -110,7 +110,8 @@
<simplelayout axis="x" spacing="5"/>
</canvas>
</programlisting><?lzx-edit programs/views-$4.lzx></example?>
-<calloutlist><callout arearefs="N10058">This view is a red square.</callout><callout arearefs="N1005B">This view has no visual representation because it has no color, but it still exists and displaces other views.</callout><callout arearefs="N1005E">This view has no visual representation because it has no width, but it still exists.</callout><callout arearefs="N10061">This view displays the jpg image.</callout></calloutlist>
+ <!-- added para tags: callout can not contain CDATA LI LPP-4643 9.4.2007 -->
+<calloutlist><callout arearefs="N10058"><para>This view is a red square.</para></callout><callout arearefs="N1005B"><para>This view has no visual representation because it has no color, but it still exists and displaces other views.</para></callout><callout arearefs="N1005E"><para>This view has no visual representation because it has no width, but it still exists.</para></callout><callout arearefs="N10061"><para>This view displays the jpg image.</para></callout></calloutlist>
<para/></section><section><title>Z Axis</title>
@@ -419,7 +420,9 @@
<informalexample role="live-example"><programlisting>
<view width="20"/> <co id="N1013E"/>
<view width="20" height="35"/>
-</programlisting></informalexample><calloutlist><callout arearefs="N1013E">This view is not visible, because it has a height of zero</callout></calloutlist>
+</programlisting></informalexample>
+ <!-- added para tags: callout can not contain CDATA LI LPP-4643 9.4.2007 -->
+ <calloutlist><callout arearefs="N1013E"><para>This view is not visible, because it has a height of zero</para></callout></calloutlist>
<para>
If a view's dimension is not explicitly set, and that view contains subviews (or has a resource attached), then the view will automatically scale to the extents of its contents or resource. In this case the yellow view will be 40px wide and 25px high:
</para>
@@ -946,7 +949,8 @@
</mywindow>
</canvas>
</programlisting><?lzx-edit programs/views-$22.lzx></example?>
-<calloutlist><callout arearefs="N102AC">default placement view: instance or subclass children go here</callout></calloutlist>
+ <!-- added para tags: callout can not contain CDATA LI LPP-4643 9.4.2007 -->
+<calloutlist><callout arearefs="N102AC"><para>default placement view: instance or subclass children go here</para></callout></calloutlist>
<para>The view that contains the text <literal>hello</literal> has a
<indexterm><primary>parent</primary></indexterm><sgmltag class="attribute">parent</sgmltag> of <varname>w</varname> and an
More information about the Laszlo-checkins
mailing list