Author: jsundman
Date: 2006-11-13 09:19:51 -0800 (Mon, 13 Nov 2006)
New Revision: 2504
Added:
openlaszlo/trunk/docs/src/dguide/images/AdobeFlashPlayerSettings1.png
openlaszlo/trunk/docs/src/dguide/images/AdobeFlashPlayerSettings2.png
openlaszlo/trunk/docs/src/dguide/video.html
Modified:
openlaszlo/trunk/docs/src/dguide/architecture.html
openlaszlo/trunk/docs/src/dguide/colors.html
openlaszlo/trunk/docs/src/dguide/index.dbk
openlaszlo/trunk/docs/src/dguide/media-resources.html
openlaszlo/trunk/docs/src/dguide/proxied.html
openlaszlo/trunk/docs/src/wrappers/camera.html
openlaszlo/trunk/docs/src/wrappers/mediadevice.html
openlaszlo/trunk/docs/src/wrappers/mediastream.html
openlaszlo/trunk/docs/src/wrappers/microphone.html
openlaszlo/trunk/docs/src/wrappers/rtmpconnection.html
openlaszlo/trunk/docs/src/wrappers/videoview.html
Log:
Adding color and CSS chapters and improvements to Proxied and other chapters
Modified: openlaszlo/trunk/docs/src/dguide/architecture.html
===================================================================
--- openlaszlo/trunk/docs/src/dguide/architecture.html 2006-11-13 16:32:14 UTC
(rev 2503)
+++ openlaszlo/trunk/docs/src/dguide/architecture.html 2006-11-13 17:19:51 UTC
(rev 2504)
@@ -43,19 +43,28 @@
</p>
<h2>Client and Server: Synopsis</h2>
<p>
-OpenLaszlo Server is a Java application that executes in a J2EE servlet
+The OpenLaszlo Server is a Java application that executes in a J2EE servlet
container. The OpenLaszlo Server may communicate with <glossterm>back
end</glossterm>
servers and data sources using a variety of protocols. OpenLaszlo
-applications written in LZX are compiled by the OpenLaszlo Server and served
as bytecode
-to a plug in that runs in the client's web browser. This constitutes
+applications written in LZX are compiled by the OpenLaszlo Server and served
either as bytecode
+to a plug in that runs in the client's web browser (such as Flash or J2ME) or
as JavaScript (DHTML) that is directly executed by the browser itself. This
constitutes
the <dfn>front end</dfn>. The currently supported run-time
-environment, the Flash 7 or higher plug-in, executes consistently and
+environments, including DTHTML and the Flash 7 or higher plug-in, executes
consistently and
reliably on a variety of operating systems and device types, including
Windows, Pocket PC, Mac OS, Linux, and Solaris, and a variety of
-mobile and set-top box platforms. The OpenLaszlo Server outputs bytecode in
the SWF file
+mobile and set-top box platformss.
+</p>
+<p>
+When compiled for execution by the Flashplayer, the OpenLaszlo Server outputs
bytecode in the SWF ("shockwave format) file
format recognized by the Macromedia Flash player (version 7 and
higher). Nothing in the OpenLaszlo architecture binds it to Flash,
-however. In the future, OpenLaszlo may support other run time clients as
+however.
+</p>
+<fixme>
+about DHTML format.
+</fixme>
+<p>
+In the future, OpenLaszlo may support other run time clients as
they become widely available.</p>
<p>
Modified: openlaszlo/trunk/docs/src/dguide/colors.html
===================================================================
--- openlaszlo/trunk/docs/src/dguide/colors.html 2006-11-13 16:32:14 UTC
(rev 2503)
+++ openlaszlo/trunk/docs/src/dguide/colors.html 2006-11-13 17:19:51 UTC
(rev 2504)
@@ -1,104 +1,319 @@
-<html xmlns="http://www.w3.org/1999/xhtml"; id="colors">
+<html xmlns="http://www.w3.org/1999/xhtml"; id="color">
<head>
- <title>Color in Laszlo Applications</title>
+ <!-- title is currently ignored; doc tool uses h1 instead -->
+ <title>Color</title>
</head>
<body>
-<h1>Colors in Laszlo Applications</h1>
-<todo>
-This chapter is not written. We expect to able to cover some of the following
topics:
- </todo>
-
-<pre>
-HTML and CSS Colors
-Animating Colors
-Design Considerations
- e.Pointer to later chapter on subclassing "layout"
- ii.Setcolor() and sectcolorTransform()
-</pre>
-
-<p> </p>
-<h2>Colors and .SWF files</h2>
+<!-- Put Chapter title in h1 -->
+<h1>Color</h1>
+
+
+
+<!--=========================================================================-->
+<!-- Major sub-heads in h2, etc
-->
+<!--=========================================================================-->
+<h2>Overview</h2>
+
+<p>This chapter gives a brief introduction to the use of colors in OpenLaszlo
applications. It explains the various syntaxes that are used to specify color,
and gives general guidelines for using color effectively.</p>
+<p>
+OpenLaszlo uses the standard web color definitions, three hexadecimal values
in a row, representing red, green, and blue components of a color (all colors
can be created by mixing these three primary colors). Computer monitors are
comprised of thousands of red, green, and blue dots grouped so closely by
threes that our eyes see them as one blended color.
+</p>
<fixme>
+Different syntaxes for javascript and HTML color specifications.
+</fixme>
-Chris from Semaphore is porting some old code that used to colorize a
-SWF. He asserts that it's not just tinting he's looking for:
+<h2>RGB or Red, Green, Blue</h2>
+<p>
+Each red, blue, or green dot can have a value from 0 to 255. If the red dot is
fully "on" at 255, while blue and green are fully "off" at 0, we see red. The
RBG color code for red is 255,0,0. Blue is 0,255,0; green is 0,0,255. (Some
graphics systems combine an RGB triplet with an 8-bit alpha value, and get a
32-bit color word; in those systems, we think of colors as RGBA.)
+</p>
+<example title="RGB color values">
+<canvas height="125">
+ <simplelayout axis="x" spacing="10"/>
+ <class name="gView">
+ <view height="100" width="100"/>
+ </class>
+ <gView id="red" bgcolor="rgb(255,0,0)"/>
+ <gView id="blue" bgcolor="rgb(0,255,0)"/>
+ <gView id="green" bgcolor="rgb(0,0,255)"/>
+</canvas>
+</example>
+
-=================================================
-<view name="some_color" resource="colorbox.swf">
+<h2>Hexadecimal Code</h2>
+<p>
+Some web applications require that RGB be expresssed in hexadecimal (base 16
instead of base 10) values. OpenLaszlo much prefers hex values; for one thing,
using hexadecimal values enables the use of stylesheets (see Cascading Style
Sheets):
+</p>
+<example title="Using Hex for Colors with Sytlesheet">
+<canvas height="125">
- <method name="applyColor" args="someRGB">
- var thisClass = this.parent;
- this.colorControl=new Color(this.movieClipRef);
- this.colorControl.setRGB(someRGB);
- </method>
+ <stylesheet>
+
+ #red {
+ bgcolor: "0xFF0000";
+ }
-</view>
-=================================================
+ #blue {
+ bgcolor: "0x00FF00";
+ }
+
+ #green {
+ bgcolor: "0x0000FF";
+ }
+
+ </stylesheet>
+
+ <simplelayout axis="x" spacing="10"/>
-a) Does that code really affect the SWF or is it the same as
-setcolortransform?
+ <class name="gView">
+ <view height="100" width="100" bgcolor="$style{'bgcolor'}"/>
+ </class>
+
+ <gView id="red" />
+ <gView id="blue" />
+ <gView id="green"/>
-LzView.setColor is probably what he wants. It does the same thing as the
example code you have (takes an RGB and applies it as an offset.)
+</canvas>
+</example>
+<p>
+OpenLaszlo enables coloring in four ways: 0x000000, #000000, rgb(0,0,0), and
"black". For now, the best reason to prefer to use the hex style 0x000000 is
that it always works, whether the color is assigned explicitly within the view,
or by stylesheet. Color assignment by stylesheet fails by name, #hex, or rgb().
Explicit color assignment by rgb() fails unless the RGB values are all numerals
-- that is, rgb(0,0,0) produces black, but rgb(FF,FF,FF), which should produce
white, comes back at compile time as an invalid color.
+</p>
+<p>
+Coloring of text with fgcolor="foo" is enabled in the same fashions, but with
the same limitations.
+</p>
+<example title="coloring text using CSS">
+<canvas width="860" debug="true">
-LzView.setColorTransform allows you to set both the RGB offsets and the RGB
alphas.
+<stylesheet>
+ #vName {
+ bgcolorName : "blue";
+ }
+
+ #tName {
+ fgcolorName : "blue";
+ }
-b) What's the movieClipRef for?
+ #vRGB {
+ bgcolorRGB : "#0000FF";
+ }
+
+ #tRGB {
+ fgcolorRGB : "#0000FF";
+ }
+
+ #vHex {
+ bgcolorHex : "0x0000FF";
+ }
-That's the way Flash does it. To control the color of a clip you make a Color
object that references the clip. It's like the Color object exposes some
otherwise inaccessible API.
+ #tHex {
+ fgcolorHex : "0x0000FF";
+ }
-Here's the post:
+ #vParens {
+ bgcolorParens : "rgb(0,0,255)";
+ }
+
+ #tParens {
+ fgcolorParens : "rgb(0,0,255)";
+ }
+
+</stylesheet>
+<wrappinglayout axis="x" spacing="10"/>
-http://www.laszlosystems.com/developers/community/forums/showthread.php
- postid=3315#post3315
-</fixme>
-<!--=========================================================================-->
-<!-- Major sub-heads in h2, etc
-->
-<!--=========================================================================-->
-<h2>Overview</h2>
+ <view id="vName" height="100" width="100"
bgcolor="$style{'bgcolorName'}"/>
+ <text id="tName" font="verdana,sans-serif" fontsize="30"
fontstyle="bold" height="40"
fgcolor="$style{'fgcolorName'}">Blue1</text>
-<p>This-a-here chapter is about this subject.</p>
+ <view id="vRGB" height="100" width="100"
bgcolor="$style{'bgcolorRGB'}"/>
+ <text id="tRGB" font="verdana,sans-serif" fontsize="30"
fontstyle="bold" height="40"
fgcolor="$style{'fgcolorRGB'}">Blue2</text>
-<p>If the first h2 heading is named "Overview", it is given index 0.
Otherwise, it is given index 1.</p>
-<example class="code" title="Using setattribute to change a color">
-<canvas>
- <view width="60" height="60" bgcolor="red" onclick="changecolor()">
- <method name="changecolor">
- this.setattribute(bgcolor, "red")
- </method>
- </view>
+ <view id="vHex" height="100" width="100"
bgcolor="$style{'bgcolorHex'}"/>
+ <text id="tHex" font="verdana,sans-serif" fontsize="30"
fontstyle="bold" height="40"
fgcolor="$style{'fgcolorHex'}">Blue3</text>
+
+ <view id="vParens" height="100" width="100"
bgcolor="$style{'bgcolorParens'}"/>
+ <text id="tParens" font="verdana,sans-serif" fontsize="30"
fontstyle="bold" height="40"
fgcolor="$style{'fgcolorParens'}">Blue4</text>
+
+ <view id="explicitVName" height="100" width="100" bgcolor="blue"/>
+ <text id="explicitTName" font="verdana,sans-serif" fontsize="30"
fontstyle="bold" height="40" fgcolor="blue">Blue5</text>
+
+ <view id="explicitVRGB" height="100" width="100" bgcolor="#0000FF"/>
+ <text id="explicitTRGB" font="verdana,sans-serif" fontsize="30"
fontstyle="bold" height="40" fgcolor="#0000FF">Blue6</text>
+
+ <view id="explicitVHex" height="100" width="100" bgcolor="0x0000FF"/>
+ <text id="explicitTHex" font="verdana,sans-serif" fontsize="30"
fontstyle="bold" height="40" fgcolor="0x0000FF">Blue7</text>
+
+ <view id="explicitVParens" height="100" width="100"
bgcolor="rgb(0,0,255)"/>
+ <text id="explicitTParens" font="verdana,sans-serif" fontsize="30"
fontstyle="bold" height="40" fgcolor="rgb(0,0,255)">Blue8</text>
+
+<script>
+Debug.write("1=styled by blue");
+Debug.write("2=styled by #0000FF");
+Debug.write("3=styled by 0x0000FF");
+Debug.write("4=styled by rgb(0,0,255)");
+Debug.write("5=explicitly named blue");
+Debug.write("6=explicitly colored #0000FF");
+Debug.write("7=explicitly colored 0x0000FF");
+Debug.write("8=explicitly colored rgb(0,0,255)");
+</script>
+
</canvas>
</example>
-<example class="code" title="applying transform to text color">
-<canvas debug="true">
- <simplelayout axis="y" spacing="10" />
+<h3>Mixing Colors</h3>
+<p>
+To blend a color, combine the RGB values. Red (FF0000) plus blue (0000FF)
equals fuchsia (FF00FF):
+</p>
+<example title="Blending Colors">
+<canvas height="850">
+ <window name="raptor" x="25" y="50" height="200" width="200"
resizable="true" title="Resize this window">
+ <view name="red" height="${raptor.height*.5}"
width="${raptor.height*.5}" bgcolor="0xFF0000"/>
+ <view name="blue" height="${raptor.red.height}"
width="${raptor.red.width}" bgcolor="0x0000FF"
x="${raptor.red.width-(raptor.red.width*.5)}"
y="${raptor.red.height-(raptor.red.height*.5)}"/>
+ <view name="fuchsia" height="${raptor.red.height*.5}"
width="${raptor.red.width*.5}" bgcolor="0xFF00FF"
x="${raptor.red.width-(raptor.red.width*.5)}"
y="${raptor.red.height-(raptor.red.height*.5)}" />
+ </window>
+</canvas>
+</example>
- <view id="foo" width="400" height="200">
- <simplelayout axis="y" spacing="10" />
- <text>
- <font color="#0000FF">
- Hello world
- </font>
- </text>
- </view>
+<h3>Standard Web Colors</h3>
+<p>
+The 16 basic web colors can be employed by name:
+</p>
+<example title="Named Colors">
+<canvas height="250" width="250">
+<wrappinglayout axis="y" spacing="10"/>
+
+<class name="swatch" width="50" height="50" />
+<swatch bgcolor="black">
+ <text fgcolor="white" text="Black"/>
+</swatch>
+<swatch bgcolor="silver">
+ <text text="Silver"/>
+</swatch>
+<swatch bgcolor="gray">
+ <text text="Gray"/>
+</swatch>
+<swatch bgcolor="white">
+ <view name="inner" width="50" height="50" bgcolor="black">
+ <view name="furtherinner" width="46" height="46" bgcolor="white"
x="2" y="2"/>
+ </view>
+ <text text="White"/>
+</swatch>
+<swatch bgcolor="maroon">
+ <text fgcolor="white" text="Maroon"/>
+</swatch>
+<swatch bgcolor="red">
+ <text text="Red"/>
+</swatch>
+<swatch bgcolor="purple">
+ <text fgcolor="white" text="Purple"/>
+</swatch>
+<swatch bgcolor="fuchsia">
+ <text text="Fuchsia"/>
+</swatch>
+<swatch bgcolor="green">
+ <text text="Green"/>
+</swatch>
+<swatch bgcolor="lime">
+ <text text="Lime"/>
+</swatch>
+<swatch bgcolor="olive">
+ <text text="Olive"/>
+</swatch>
+<swatch bgcolor="yellow">
+ <text text="Yellow"/>
+</swatch>
+<swatch bgcolor="navy">
+ <text fgcolor="white" text="Navy"/>
+</swatch>
+<swatch bgcolor="blue">
+ <text fgcolor="white" text="Blue"/>
+</swatch>
+<swatch bgcolor="teal">
+ <text fgcolor="white" text="Teal"/>
+</swatch>
+<swatch bgcolor="aqua">
+ <text text="Aqua"/>
+</swatch>
+</canvas>
+</example>
+<h3>Non-Standard Colors</h3>
+<p>
+To specify any color but the 16 which are usable by name, use 0xFFFFFF hex
codes. An alternative is to include colors.lzx -- <include
href="../lps/components/base/colors.lzx"/> -- which assigns names to various
non-standard colors. Note the ${constraint} syntax around the bgcolor
specification.
+</p>
+<example title="Non-standard colors">
+<canvas height="200" width="120">
- <button>Apply tint now
+<include href="../lps/components/base/colors.lzx"/>
+
+<wrappinglayout axis="x" spacing="10"/>
+
+<class name="swatch" width="50" height="50" />
+
+<swatch bgcolor="${gold4}">
+ <text text="Sun"/>
+</swatch>
+
+<swatch bgcolor="${iceblue1}">
+ <text fgcolor="0xFFFFFF" text="Mystic"/>
+</swatch>
+
+</canvas>
+</example>
+<h3>Opacity</h3>
+<p>
+In OpenLaszlo, a view has a color and an opacity which are handled separately.
The opacity attribute ranges from 0 (transparent) to 1 (opaque).
+</p>
+<example title="Color and Opacity">
+<canvas height="300" width="600" debug="true">
+ <simplelayout axis="x"/>
+ <class name="fader">
+ <view height="100" width="200">
<handler name="onclick">
- var transColor = {rb:255};
- foo.setColorTransform( transColor );
+ immediateparent.animate('opacity', -.20, 25, true);
</handler>
- </button>
+ <handler name="onmouseout" >
+ immediateparent.animate('opacity', 1, 2500, false);
+ </handler>
+ </view>
+
+ </class>
+ <fader name="houston" bgcolor="0xFF0000">
+ <text text="Comet"/>
+ </fader>
+ <fader name="sacramento" bgcolor="0x800080">
+ <text fgcolor="0xFFFFFF" text="Monarch"/>
+ </fader>
+ <fader name="seattle" bgcolor="0x008000">
+ <text text="Storm"/>
+ </fader>
+ <script>
+ Debug.write("Click on a view to reduce its opacity. Mouse out to restore
100% opacity.");
+ </script>
</canvas>
</example>
-<fixme>
-SetColorTransform applies a tint :-)
+<h2>When Red Isn't Red</h2>
-SetColor sets an rgb color, but setColorTransform takes an argument with 8
components that lets you adjust the percentage and offset of each of the
red/green/blue channels or an overall percent and offset. It is applied as a
transform to the view and all subviews.
+<p>
+The print world paid careful attention to color matching: the color the client
saw on the comprehensives in the conference room turned out the same as the
color the customer saw on the cereal boxes. That involved synchronizing colors
between a computer monitor and a laser printer (used to print the
comprehensives), then the physical film separation into cyan, magenta, yellow,
and black for the printer, and finally the finished product.
+</p>
-I'm no color expert, so I can't tell you how to compute the right value for a
particular tint, but I'm guessing that if you wanted to tint something red, you
could just apply a transform with a positive red offset.
-</fixme>
+<p>
+Web publishers had to let go of all that. Color specifications look different
on different platforms and workstations -- Macintosh or Windows, normal backlit
LCD screens or aging CRTs, projectors in a conference room or high fidelity
cinema displays. Web designers pretend that "0x6C6BA2" is always the same
color, and hope it looks right other places.
+</p>
+
+<p>
+The best a designer can do is look at his/her application on several different
kinds of monitors and operating systems, and tweak the application until it
looks decent across each platform.
+</p>
+
+<p>
+W3 aims to mitigate this problem with support for the color model <a
href="www.w3.org/Graphics/Color/sRBG">SRBG: Standard Default Color Space for
the Internet</a>.
+</p>
+
+<p>
+!! For more about this topic, look up "color gamut", "color space", "color
matching", "display gamma", and the ActionScript function setColorTransform.
+</p>
+
+
+
</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
Added: openlaszlo/trunk/docs/src/dguide/images/AdobeFlashPlayerSettings1.png
Property changes on:
openlaszlo/trunk/docs/src/dguide/images/AdobeFlashPlayerSettings1.png
___________________________________________________________________
Name: svn:mime-type
+ image/png
Added: openlaszlo/trunk/docs/src/dguide/images/AdobeFlashPlayerSettings2.png
Property changes on:
openlaszlo/trunk/docs/src/dguide/images/AdobeFlashPlayerSettings2.png
___________________________________________________________________
Name: svn:mime-type
+ image/png
Modified: openlaszlo/trunk/docs/src/dguide/index.dbk
===================================================================
--- openlaszlo/trunk/docs/src/dguide/index.dbk 2006-11-13 16:32:14 UTC (rev
2503)
+++ openlaszlo/trunk/docs/src/dguide/index.dbk 2006-11-13 17:19:51 UTC (rev
2504)
@@ -42,6 +42,7 @@
<xi:include href="layout-and-design.dbk"/>
<xi:include href="media-resources.dbk"/>
<xi:include href="css.dbk"/>
+ <xi:include href="colors.dbk"/>
<xi:include href="text.dbk"/>
<xi:include href="richtext.dbk"/>
<xi:include href="fonts.dbk"/>
@@ -69,6 +70,10 @@
<xi:include href="databinding.dbk"/>
<xi:include href="../tutorials/data_app.dbk"/>
</part>
+ <part id="media">
+ <title>Media</title>
+ <xi:include href="video.dbk"/>
+ </part>
<part id="application">
<title>Examining Applications</title>
<xi:include href="survey-chapter.dbk"/>
Modified: openlaszlo/trunk/docs/src/dguide/media-resources.html
===================================================================
--- openlaszlo/trunk/docs/src/dguide/media-resources.html 2006-11-13
16:32:14 UTC (rev 2503)
+++ openlaszlo/trunk/docs/src/dguide/media-resources.html 2006-11-13
17:19:51 UTC (rev 2504)
@@ -15,13 +15,16 @@
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
-of OpenLaszlo 3.1. It then goes on to describes how to integrate and control
+of OpenLaszlo 4.0. It then goes on to describes how to integrate and control
media in your application. It concludes with some
optimization tips.</p>
+<p>
+For a discussion of streaming media, see <xref linkend="video"/>.
+</p>
<h2>Supported media types</h2>
<p>
-OpenLaszlo 3.1 and above support the following media types:</p>
+OpenLaszlo 4.0 and above support the following media types:</p>
<dl>
<dt>JPEG</dt>
<dd>All .jpg or .jpeg files are supported. See the <a target="_blank"
href="http://www.w3.org/Graphics/JPEG/";>W3C JPEG JFIF Specification</a>.
Modified: openlaszlo/trunk/docs/src/dguide/proxied.html
===================================================================
--- openlaszlo/trunk/docs/src/dguide/proxied.html 2006-11-13 16:32:14 UTC
(rev 2503)
+++ openlaszlo/trunk/docs/src/dguide/proxied.html 2006-11-13 17:19:51 UTC
(rev 2504)
@@ -570,6 +570,116 @@
</canvas>
</example>
+<h2>Further Analysis of Proxied versus SOLO Deployment</h2>
+<p>
+It's best to avoid OpenLaszlo proxied mode if possible in deployed
applications, and just run the OpenLaszlo server on your development machine
when you're developing them.
+</p>
+
+<p>
+The OpenLaszlo server can perform a lot of different functions, including
transcoding, proxying and compiling programs, not all of which are needed by
every application. In fact, most applications need none of these functions,
which is why they can be run SOLO.
+</p>
+<h3>Creating Your Own Proxy</h3>
+<p>
+It's possible to write proxies and transcoders in other languages, so you only
really need the OpenLaszlo server if you want to dynamically compile OpenLaszlo
programs on the fly. Python, Ruby, Java and PHP all work well for writing
proxies and transcoders, depending on the kind of data formats you need to work
with. Of course, using the OpenLaszlo Server is easier then writing your own
from scratch, but if you need to do so, there is nothing in the OpenLaszlo
architecture that prevents that.
+</p>
+
+<p>
+The OpenLaszlo source code depends on a bunch of stand-alone Java libraries
for manipulating Flash files, XML and images, which (if you're using Java) you
could use in your own applications without incorporating the entire OpenLaszlo
server.
+</p>
+<h3>Transcoding Media</h3>
+<p>
+One thing the OpenLaszlo server does that you can implement in other ways is
transcoding media. Different versions of the flash player only support certain
types of media, so if you want to load a gif image from another server whose
content you don't have control over (for example, a gif thumbnail of a person
from a social networking site), then you need a server somewhere to transcode
it from gif to something the flash player can read like swf or png. A lot of
scripting languages support the "ming" dynamic swf generation toolkit, and
there are other libraries like Python's "flashticle" for reading and writing
Flash content on the fly (including swf and flv).
+</p>
+<h3>ReST versus XML/RPC</h3>
+<p>
+Another thing is performing SOAP and XML/RPC requests on behalf of the
OpenLaszlo client. It's easiest to use ReST instead of SOAP and XML/RPC, since
it's so much less complicated and lets you tailor the XML for your particular
application (simplifying the XML to make data binding to visual OpenLaszlo
classes more direct, resulting in less processing and simpler code on the
client). But if there's an existing SOAP or ReST service you have to use, then
you can write a proxy on the server to translate between simple ReST requests
from OpenLaszlo to more complex remote procedure calls. This lets you do some
processing and filtering and multiple requests on the server side (where the
network's lightning fast), so you can have a more efficient client/server
protocol (because that goes through skinny pipes to the client, so it should be
optimized, where remote procedure calls from server to server across the
backbone can send lots of fluffy data quickly and don't need to be boile!
d down to the bare essentials).
+</p>
+<h3>Example of Rest: Cooqy</h3>
+<p>
+A great example of this philosophy in action is the Cooqy OpenLaszlo interface
to eBay, which lets you browse eBay efficiently over a low-bandwidth dial-up
line. The Cooqy server talks to the eBay web API, and boils it down to the
essential results to display in the OpenLaszlo client, which downloads XML and
images incrementally and starts displaying results immediately. So the
client/server protocol between the client and Cooqy is extremely efficient,
while the server/server protocol between Cooqy and eBay runs between fast
servers over the internet backbone.
+</p>
+
+<p>
+You can see the Cooqy program in action <a
href="http://www.cooqy.com/";>here</a>.
+</p>
+
+<p>
+Rich object oriented interfaces like the eBay web service API aren't always
the right level of abstraction for the most efficient client/server
communication. So there are some good reasons to make a proxy server that boils
everything down to your own application specific XML format, instead of trying
to mash together a whole bunch of complex general purpose APIs in the client.
Cooqy does a great job of distributing the processing and network load so it
works well over a low speed network connection, so it's much more efficient
that the equivalent html pages. Plus it doesn't hurt that the entire Cooqy
application is smaller than eBay's html home page!
+</p>
+<h3>Crossdomain Security Issues</h3>
+<p>
+The other issue you have to deal with are the security restrictions on the
Flash player downloading XML and .swf files from other servers than the one
it's running from. The remote server you want to download xml from must give
you permission with a <code>crossdomain.xml</code> file. If you need to
download swf or XML from a server that doesn't give the Flash player permission
with a crossdomain.xml file, then that's another reason you might want to have
a proxy running on your own server.
+</p>
+<h4>Using Proxies to Handle Browser Inconsistencies</h4>
+<p>
+And of course there are always unfortunate browser bugs that may force you to
use a proxy. Internet Explorer has a bug that makes it impossible to download
compressed content into plug-ins like Flash, which you can work around with a
proxy.
+</p>
+
+<p>
+For example, the first version of <a
href="http://www.donhopkins.com/drupal/node/126";>Don Hopkin's YouTube
player</a> in OpenLaszlo had the Flash player directly download the YouTube
text html web page for the video, and then it parsed out the url of the FLV
file from the web page so it could play it directly. Unfortunately that only
worked in Firefox because of a bug in Internet Explorer not delivering
compressed text content to plug-ins (and YouTube gzip compresses their web
pages). To solve this problem a proxy on the server was written to perform the
screen scraping.
+</p>
+
+<p>
+You can run the YouTube player here:
+</p>
+
+<p>
+http://www.donhopkins.com/trunk/demos/youtube/youtube.lzx?lzt=swf
+</p>
+
+<p>
+This is the youtubeplayer component source, and its supporting lzx files:
+</p>
+
+<p>
+http://www.donhopkins.com/trunk/demos/youtube/youtubeplayer.lzx?lzt=source
+http://www.donhopkins.com/trunk/demos/youtube/youtube.lzx?lzt=source
+http://www.donhopkins.com/trunk/demos/youtube/videolibraryicon.lzx?lzt=source
+http://www.donhopkins.com/trunk/demos/youtube/videolibrarypopup.lzx?lzt=source
+</p>
+
+<p>
+Here's the source of the YouTube proxy in Java, as a JSP. We've copied it to
another file and added the .txt extension so you can look at the source instead
of executing it.
+</p>
+
+<p>
+http://www.DonHopkins.com/trunk/demos/youtube/youtube.jsp.txt
+</p>
+
+<p>
+It performs a ReST call on the YouTube API to perform searches (which only
returns the id of the video and the url of the html web page the view the
video, but not the actual url of the FLV video file). When the user plays the
video, it performs another call to download the web pages of the video, and
scrape out the URL of the FLV file from each one.
+</p>
+
+<p>
+The youtube proxy supports the following functions:
+</p>
+
+<p>
+videoGetFlvUrl(id)
+http://www.DonHopkins.com/trunk/demos/youtube/youtube.jsp?method=videoGetFlvUrl&id=SRCux7wefH0
+</p>
+
+<p>
+videosListFeatured()
+http://www.DonHopkins.com/trunk/demos/youtube/youtube.jsp?method=videosListFeatured
+</p>
+
+<p>
+videosListByTag(tag) // comma separated tags
+http://www.DonHopkins.com/trunk/demos/youtube/youtube.jsp?method=videosListByTag&tag=kitten,cute
+</p>
+
+<p>
+videosListByUser(user)
+http://www.DonHopkins.com/trunk/demos/youtube/youtube.jsp?method=videosListByUser&user=marccanter
+</p>
+<h4>Another example of SOLO deployment: LaszloMail</h4>
+<p>
+A lot of work has gone into optimizing the Laszlo Mail client/server API. You
can watch how it works with the "Fiddler" proxy utility, which you can use as
an http proxy with Internet Explorer or Firefox. It captures all the requests,
responses, headers and bodies that go back and forth, so you can see exactly
how Laszlo Mail, Cooqy, Pandora or any other application talks with the server.
(Unfortunately the Fiddler proxy doesn't support streaming content, so when
Fiddler is engaged you have to wait for stuff like flv videos and mp3's to
completely download, before they start playing).
+</p>
+
+
+
<fixme>
The non-existent transport chapter needs to be rewritten/updated for
serverless deployment.
Added: openlaszlo/trunk/docs/src/dguide/video.html
Property changes on: openlaszlo/trunk/docs/src/dguide/video.html
___________________________________________________________________
Name: svn:mime-type
+ text/html
Name: svn:eol-style
+ native
Modified: openlaszlo/trunk/docs/src/wrappers/camera.html
===================================================================
--- openlaszlo/trunk/docs/src/wrappers/camera.html 2006-11-13 16:32:14 UTC
(rev 2503)
+++ openlaszlo/trunk/docs/src/wrappers/camera.html 2006-11-13 17:19:51 UTC
(rev 2504)
@@ -16,9 +16,10 @@
</lzelement>
<p>
+In order to use a camera in an LZX application, the
<attribute>visible</attribute> and <attribute>allowed</attribute> attributes
must be set to <code>true</code>. The <attribute>visible</attribute> indicates
the program's intent and the <attribute>allowed</attribute> attribute indicates
the user's permission. To protect privacy, camera operation must be explicitly
approved by the user.
</p>
-<example class="program">
+<example class="program" extract="false">
<canvas height="100">
<camera id="rtc" src="rtmp://localhost/test" autoconnect="false"/>
<text text="${rtc.status}"/>
Modified: openlaszlo/trunk/docs/src/wrappers/mediadevice.html
===================================================================
--- openlaszlo/trunk/docs/src/wrappers/mediadevice.html 2006-11-13 16:32:14 UTC
(rev 2503)
+++ openlaszlo/trunk/docs/src/wrappers/mediadevice.html 2006-11-13 17:19:51 UTC
(rev 2504)
@@ -10,23 +10,18 @@
<lztier>Audio Video</lztier>
<lzcategory>audio video</lzcategory>
<lzshortdesc>
- A connection to an RTMP server.
+ The base class for media devices such as <tagname>microphone</tagname>
and <tagname>camera</tagname>.
</lzshortdesc>
<lztag>extensions/av/mediadevice.xml</lztag>
</lzelement>
<p>
+As of OpenLaszlo release 4.0, subclasses of this class are <tagname
link="true">microphone</tagname> and <tagname link="true">camera</tagname>.
</p>
-<example class="program">
-<canvas height="100">
- <mediadevice id="rtc" src="rtmp://localhost/test" autoconnect="false"/>
- <text text="${rtc.status}"/>
- <button onclick="rtc.connect()">Click to Connect</button>
-</canvas>
-</example>
+
</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
Modified: openlaszlo/trunk/docs/src/wrappers/mediastream.html
===================================================================
--- openlaszlo/trunk/docs/src/wrappers/mediastream.html 2006-11-13 16:32:14 UTC
(rev 2503)
+++ openlaszlo/trunk/docs/src/wrappers/mediastream.html 2006-11-13 17:19:51 UTC
(rev 2504)
@@ -14,16 +14,47 @@
</lzshortdesc>
<lztag>extensions/av/mediastream.xml</lztag>
</lzelement>
+<p>
+A <tagname>mediastream</tagname> opens a connection for recieving streaming
media.
+</p>
<p>
-
+Note: Total time is only defined for FLV's delivered over http
+if they have "metaData" defined, and we don't know the stream
+length until it starts playing.
</p>
-<example class="program">
-<canvas height="100">
- <mediastream id="rtc" src="rtmp://localhost/test" autoconnect="false"/>
- <text text="${rtc.status}"/>
- <button onclick="rtc.connect()">Click to Connect</button>
+<example title="A media stream" extract="false">
+<canvas>
+
+ <simplelayout axis="y" inset="10" spacing="5"/>
+ <constantlayout axis="x" value="10"/>
+ <videoview>
+ <mediastream id="s"
+ url="http://localhost:8080/video/test/video/videos/good-dog.flv";
+ debug="true"
+ />
+ </videoview>
+ <button
+ text="play"
+ onclick="s.play()"
+ />
+ <button
+ text="pause"
+ onclick="s.pause()"
+ />
+ <text
+ text="${'playtime: ' + s.playtime}"
+ />
+ <text
+ text="${'totaltime: ' + s.totaltime}"
+ />
+ <text
+ width="300"
+ multiline="true"
+ >
+ </text>
+
</canvas>
</example>
Modified: openlaszlo/trunk/docs/src/wrappers/microphone.html
===================================================================
--- openlaszlo/trunk/docs/src/wrappers/microphone.html 2006-11-13 16:32:14 UTC
(rev 2503)
+++ openlaszlo/trunk/docs/src/wrappers/microphone.html 2006-11-13 17:19:51 UTC
(rev 2504)
@@ -10,20 +10,88 @@
<lztier>Audio Video</lztier>
<lzcategory>audio video</lzcategory>
<lzshortdesc>
- A connection to an RTMP server.
+ A microphone connection to a media server.
</lzshortdesc>
<lztag>extensions/av/microphone.xml</lztag>
</lzelement>
<p>
-
+The <tagname>microphone</tagname> element allows you to set up and control a
microphone that is connected to a media server. For privacy protection, the
<attribute>allowed</attribute> attribute must be set to <code>true</code> by
the user.
</p>
-<example class="program">
-<canvas height="100">
- <microphone id="rtc" src="rtmp://localhost/test" autoconnect="false"/>
- <text text="${rtc.status}"/>
- <button onclick="rtc.connect()">Click to Connect</button>
+<example title="microphone control" extract="false">
+<canvas>
+
+ <microphone id="m"
+ capturing="${controlpanel.capturing.value}"
+ />
+
+ <view
+ x="10"
+ y="20"
+ width="102"
+ height="12"
+ bgcolor="black"
+ >
+ <view
+ x="1"
+ y="1"
+ bgcolor="yellow"
+ width="${m.level}"
+ height="10"
+ />
+ </view>
+ <view
+ y="100"
+ >
+ <simplelayout
+ axis="x"
+ inset="10"
+ spacing="20"
+ />
+ <view
+ layout="axis: y; spacing: 4"
+ >
+ <text
+ text="${'deviceindex: ' + m.deviceindex}"
+ resize="true"
+ />
+ <text
+ text="${'devicename: ' + m.devicename}"
+ resize="true"
+ />
+ <text
+ text="${'capturing: ' + m.capturing}"
+ resize="true"
+ />
+ <text
+ text="${'allowed: ' + m.allowed}"
+ resize="true"
+ />
+ <text
+ text="${'level: ' + m.level}"
+ resize="true"
+ />
+ </view>
+ <view
+ width="1"
+ height="100"
+ bgcolor="black"
+ />
+ <view id="controlpanel"
+ layout="axis: y; spacing: 10"
+ >
+ <checkbox name="capturing"
+ text="Capturing"
+ value="false"
+ />
+ <button
+ text="Show Settings"
+ onclick="m.showSettings()"
+ />
+ </view>
+ </view>
+
</canvas>
</example>
Modified: openlaszlo/trunk/docs/src/wrappers/rtmpconnection.html
===================================================================
--- openlaszlo/trunk/docs/src/wrappers/rtmpconnection.html 2006-11-13
16:32:14 UTC (rev 2503)
+++ openlaszlo/trunk/docs/src/wrappers/rtmpconnection.html 2006-11-13
17:19:51 UTC (rev 2504)
@@ -21,15 +21,32 @@
receive live audio and/or video, as well as recording video from a webcam or
audio from a microphone to files on the server. Recorded files may be played
back over http (using <classname>stream</classname> and
-<classname>videoview</classname> classes) or with RTMP to allow
+<tagname link="true">videoview</tagname> classes) or with RTMP to allow
seeking within and playback of long files that are impractical to load
into memory.</p>
-<example class="program">
-<canvas height="100">
- <rtmpconnection id="rtc" src="rtmp://localhost/test"
autoconnect="false"/>
- <text text="${rtc.status}"/>
- <button onclick="rtc.connect()">Click to Connect</button>
+<example extract="false" title="Simple RTMP Connection">
+<canvas>
+
+ <simplelayout inset="10" spacing="10"/>
+ <rtmpconnection id="rtc"
+ src="rtmp://localhost/test"
+ autoconnect="false"
+ debug="true"
+ />
+ <view
+ layout="axis: x; spacing: 4"
+ >
+ <rtmpstatus/>
+ <text
+ text="${rtc.status}"
+ resize="true"
+ />
+ </view>
+ <button
+ onclick="rtc.connect()"
+ >Click to Connect</button>
+
</canvas>
</example>
Modified: openlaszlo/trunk/docs/src/wrappers/videoview.html
===================================================================
--- openlaszlo/trunk/docs/src/wrappers/videoview.html 2006-11-13 16:32:14 UTC
(rev 2503)
+++ openlaszlo/trunk/docs/src/wrappers/videoview.html 2006-11-13 17:19:51 UTC
(rev 2504)
@@ -10,23 +10,69 @@
<lztier>Audio Video</lztier>
<lzcategory>audio video</lzcategory>
<lzshortdesc>
- A connection to an RTMP server.
+ A subclass of view that can be used to show video from a video server.
</lzshortdesc>
<lztag>extensions/av/videoview.xml</lztag>
</lzelement>
<p>
+See the Developer's Guide for a more complete description.
+<fixme>
+Introductory paragraph
+</fixme>
</p>
-<example class="program">
-<canvas height="100">
- <microphone id="rtc" src="rtmp://localhost/test" autoconnect="false"/>
- <text text="${rtc.status}"/>
- <button onclick="rtc.connect()">Click to Connect</button>
+<example title="A simple videowview" extract="false">
+<canvas>
+
+ <simplelayout
+ axis="y"
+ inset="10"
+ spacing="10"
+ />
+
+ <button
+ text="shrink width then height"
+ onclick="v.shrink.doStart()"
+ />
+
+ <button
+ text="grow"
+ onclick="v.grow.doStart()"
+ />
+
+ <videoview id="v"
+ bgcolor="red"
+ width="200"
+ height="200"
+ >
+
+ <animatorgroup name="grow"
+ duration="1000"
+ start="false"
+ process="simultaneous"
+ >
+ <animator attribute="width" to="400"/>
+ <animator attribute="height" to="400"/>
+ </animatorgroup>
+
+ <animatorgroup name="shrink"
+ duration="1000"
+ start="false"
+ >
+ <animator attribute="width" to="40"/>
+ <animator attribute="height" to="40"/>
+ </animatorgroup>
+
+ <camera id="c"
+ show="true"
+ />
+
+ </videoview>
+
</canvas>
</example>
-
</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
