Software Engineer's Guide to Developing OpenLaszlo Applications
Prev     Next

Software Engineer's Guide to Developing OpenLaszlo Applications

Laszlo Systems, Inc.

Copyright © 2001-2007 Laszlo Systems, Inc.

Laszlo® is a registered trademark, and OpenLaszlo™, LZX™ and OpenLaszlo Explorer™ are trademarks of Laszlo Systems, Inc.

March, 2007

Table of Contents

Preface
I. Overview
1. OpenLaszlo Architecture
2. Language Preliminaries
3. OpenLaszlo for Designers
4. Overview of OpenLaszlo Application Development
II. Tutorial Introduction
5. OpenLaszlo Basics
6. Introduction to Components
7. Introduction to Views
8. Introduction to Media and Art Assets
9. Introduction to Text and Fonts
10. Introduction to Scripting
11. Introduction to Databinding
12. Introduction to Classes and Object Oriented Programming
13. Introduction to Drawing
14. Building a Calculator
III. Fundamental Concepts
15. Program Structure
16. Getting More from Components
17. Layout and Design
18. Media Resources
19. CSS -- Cascading Style Sheets
20. Color
21. Text Views
22. Rich Text
23. Fonts
24. Animation
IV. In Depth
25. Proxied and SOLO Applications
26. Views
27. Constraints
28. Classes
29. Methods, Events, Handlers, and Attributes
30. Delegates
31. Input Devices and Gestures
32. States
33. Extending Classes
34. Designing Custom Components
35. Browser Integration
V. Data and Databinding
36. Data, XML, and XPath
37. Data Access and Binding
38. Building Data-Driven Applications
VI. Media
39. Audio and Video
VII. Examining Applications
40. A Components-based application
VIII. Performance Monitoring and Tuning
41. Performance Monitoring and Tuning
IX. Server Integration
42. Cookies and Sessions
43. The Persistent Connection
X. OpenLaszlo RPC
44. OpenLaszlo RPC
45. JavaRPC
46. SOAP
47. XML-RPC
XI. Development Methodology
48. Understanding Compilation
49. Editing
50. Debugging
51. Unit Testing
XII. Appendices
A. Understanding Instantiation
B. ECMAScript

List of Figures

1.1. Applications may be deployed either SOLO or proxied by the OpenLaszlo Server
1.2. OpenLaszlo Compiles to Different Runtimes
1.3. OpenLaszlo Server Architecture
1.4. Laszlo Client Architecture
1.5. Openlaszlo Application Software Stack
1.6. OpenLaszlo Application Data Flow diagram for the Weather Application (proxied)
3.1. Continuous interaction
3.2. Design process
3.3. Using resources
3.4. Fonts
25.1. Proxied applications use services from provided by the OpenLaszlo Server
25.2. After they have been deployed, SOLO applications do not contact the OpenLaszlo Server
34.1. Basic design of custom slider
34.2. Enlarged view of custom slider
39.1. Permission to record dialoge
39.2. Permission to record dialoge
42.1. Data request lifecycle
49.1. Configuring Eclipse for XMLBuddy
49.2. Defining the LZX file type in IntelliJ
49.3. Declaring the LZX DTD in IntelliJ

List of Tables

15.1. Attributes for <import>
21.1. HTML Tags
23.1. Default values for font attributes
43.1. LzConnectionDatasource Methods
49.1. VIM Editing Keys
50.1. Runtime error checks
B.1. Supported ECMAScript Properties
B.2. ECMAScript Keywords

List of Examples

1.1. Empty Application
4.1. Hello, world
4.2. invisible canvas
4.3. null program
4.4. <script> tag at canvas level
4.5. <script> tag not allowed inside <view>
4.6. names and IDs
4.7. addressing named children of the canvas
4.8. nested views
4.9. Parent and children dimensions
4.10. clipping
4.11. simple databinding
4.12. app.lzx
4.13. library.lzx
4.14. Commenting out code
4.15. using the debugger to write messages
4.16. setting attributes with the debugger
5.1. Empty Canvas
5.2. Simple_window
5.3. Specifying window size
5.4. Window Title
5.5. Window Text
5.6. Overlapping text fields
5.7. Manually positioning text
5.8. Simplelayout
6.1. Components miscellany
6.2. Components example-tags only
6.3. Creating components from script
6.4. Component APIs
6.5. Data-Driven Components
7.1. Simple window
7.2. Constraining button position relative to window
7.3. Centering the button
7.4. A button that stays centered
7.5. Growing button
7.6. Vertically aligned buttons
7.7. Grouping buttons in a <view>
7.8. Constraining a width to a parent's width
7.9. Constraining veiw to child's height
7.10. Using the 'valign' attribute
7.11. Applying 'valign' to container view
7.12. Using <simplelayout> to align buttons
8.1. Using the 'resource' attribute
8.2. Positioning images
8.3. Local pathname
8.4. Using the resource global identifier
8.5. Absolute referencing
8.6. Local referencing
8.7. Stretching resources
8.8. Multiframe resources
8.9. Working with swf files
8.10. Stopping swf animations
9.1. The simple <text> tag
9.2. <text> is a <view>
9.3. Multiline text
9.4. Inserting line breaks
9.5. Specifying a font
9.6. The <html> tag
9.7. Using the src attribute to specify font
9.8. Naming a font family
9.9. Including bold font
9.10. Assigning fonts to <text> tag
9.11. Views inherit font properties
9.12. Overwriting font specifications
9.13. Getting and setting text
9.14. Text returned
9.15. Using <inputtext>
9.16. <inputtext> accepts <text> attributes
9.17. Using <edittext>
10.1. Using the debugger
10.2. Incorporating JavaScript
10.3. JavaScript Subtleties
10.4. XML characters cause errors
10.5. Encoding XML characters
10.6. Using CDATA
10.7. JavaScript functions
10.8. A simple method
10.9. Manipulating attributes
10.10. Getting attributes
10.11. Moving window by function call
10.12. From function to method
10.13. One button call another's methods
10.14. Using the <id> attribute
10.15. Methods and arguments
10.16. Passing multiple arguments to a method
10.17. More on attributes
11.1. Datasets
11.2. Assigning a datapath to a view
11.3. Range of nodes
11.4. Manipulating datapointers
12.1. Simple Class Example
12.2. Extending the 'button' class
12.3. Overwriting methods
12.4. Passing an argument to a class instance
12.5. Extending a class more than once
13.1. view and drawview
13.2. invisble drawing
13.3. Stroking the line
13.4. Stroking the line
13.5. fillstyle
13.6. Using globalAlpha
13.7. Adding a gradient
13.8. Backgrounds and gradients
13.9. beginPath
13.10. Clearing the view
13.11. Drawview with animator
14.1. Using resourced for body image
14.2. Adding the display
14.3. code for a single button
14.4. code for a row of buttons
14.5. Spacing rows with <simplelayout>
14.6. top row of buttons
14.7. Completed calculator
14.8. Single button
14.9. Converting button to class
14.10. Classes in calculator
14.11. Updating class definition
14.12. Grouping classes in libraries
14.13. Placing display in a library
14.14. Calculator implemented with libraries
15.1. Hello World
15.2. Simple include
15.3. Including a library file
15.4. Including a node
15.5. inner.lzx
15.6. Including text
15.7. mytext.txt
15.8. Include library.lzx file
15.9. Include directory with library file
15.10. Including a library file
15.11. Use button with implicit include
15.12. Subclass button with explicit include
15.13. Subclass button with implicit include
15.14. Define button
15.15. Define and subclass button
15.16. Switch tag for conditional compilation
15.17. Compiling with the debugger
15.18. Specifiying accessibility parameters
16.1. The <style> tag
16.2. extending a component
17.1. Simple Layout
17.2. Adding a view to a layout
17.3. Isolating views
17.4. hbox and vbox
17.5. Stableborder Layout
17.6. Creating a border
17.7. Using a floating view
17.8. Constant Layout
17.9. Outline of photo application
17.10. Building a "floating view"
17.11. Using a dataset to drive layouts
17.12. ignorelayout
17.13. Addressing layouts
17.14. Locking and unlocking layouts
17.15. Updating a layout
17.16. Horizontal simplelayout
18.1. Importing a resource
18.2. Declaring a resource
18.3. Declaring a multi-frame resource
18.4. Importing an animation
18.5. Using multi-frame resources
18.6. Including a resource at compile time
18.7. Loading a resource at runtime
18.8. Loading a resource at runtime using script
18.9. Testing runtime resource loading
19.1. Simplest view
19.2. Simplest view with CSS
19.3. Selector
19.4. Attribute example
19.5. Attribute selector
19.6. Element example
19.7. Element selector
19.8. ID example
19.9. ID selector
19.10. Descendant example
19.11. Descendant selector
19.12. Nested view
19.13. Styled views created dynamically
19.14. Specificity
19.15. Lexical order
19.16. Imported stylesheet clipping
19.17. Imported stylesheet example
20.1. RGB color values
20.2. Using Hex for colors with stylesheet
20.3. Coloring text using CSS
20.4. Blending Colors
20.5. Named colors
20.6. Non-standard colors
20.7. Color and opacity
21.1. Setting font, fontstyle and fontsize
21.2. HTML tags within text
21.3. Preformatted text
21.4. Setting text colors using RGB strings
21.5. Escaping HTML characters
21.6. Non-resizing text does not concatenate
21.7. Using the 'resize' attribute
21.8. Text views
21.9. Multiline text
21.10. Multiline text with explicit line breaks
21.11. non-wrapping text with breaks
21.12. Resizing text
21.13. Selectable text
21.14. HTML tags in text views
21.15. Basic use of <img> tag
21.16. You must include text with images
21.17. Scaling an image included in text
21.18. Scaled and left-aligned image
21.19. Multiple images in text
22.1. Inline markup of rich text
22.2. Rich text manipulation
23.1. Using device fonts
23.2. setting the default font on the canvas
23.3. Using the font attribute
23.4. Default font
23.5. Default font with non-default font size
23.6. Equivalence of generic and definite names
23.7. "nofont" attribute
23.8. Declaring a font
23.9. Declaring fonts
23.10. Declaring multiple font styles (faces) at once
23.11. Using a font
23.12. Using font styles and html text
23.13. Using multiple fonts in HTML text
23.14. Using the fontsize attribute
23.15. Omitting the fontsize attribute
23.16. Specifying the font for inputtext
23.17. Using cascaded font attributes
23.18. Specifying a canvas font
23.19. Using font attributes in a class definition
23.20. Verity and vera fonts
23.21. Redefining the default font
23.22. Changing the fonts for Laszlo components
23.23. Redefining the default font for OpenLaszlo components
24.1. A simple animator
24.2. Specifying starting conditions
24.3. linear movement
24.4. Controlling animation with a script
24.5. Relative animation
24.6. Basic Animation
24.7. Basic Animation
24.8. Using the "from" attribute
24.9. Using the "motion" attribute
24.10. The "bounce effect"
24.11. Indirect attribute
24.12. Animator groups
24.13. animatorgroup-2
24.14. Animating Layout
24.15. compound behavior in single animator
25.1.
25.2.
25.3.
25.4.
25.5.
25.6.
25.7.
25.8.
25.9.
25.10.
25.11. Serverless canvas cannot contain proxied library
25.12.
25.13.
25.14. Proxied
25.15. Serverless (direct) media request
25.16. Storing URLS in an external file
25.17. XML file to hold URLS
26.1. Simple view
26.2. Invisible view
26.3. Clicking on invisible view
26.4. Invisible views affect placement
26.5. Simple layout
26.6. Moving views along z axis
26.7. Views containing other views
26.8. Using the "clip" attribute
26.9. blank view
26.10. Layouts and bounding box of subviews
26.11. Relative positions
26.12. Resizing view
26.13. Simple scaling with text
26.14. Simple scaling with text and colored view
26.15. Offsets and registration point
26.16. Simple offsets
26.17. Absolute positioning
26.18. Using constraintes to position views
26.19. Positive and negative offsets
26.20. Simple view hierarchy
26.21. Parent and immediateparent
26.22. Simple placement
27.1. Runtime constraintes with applyConstraint
27.2. states and constraints
27.3. An element appears when a checkbox is set
27.4. Constrain to mouse position
27.5. Multiple Dependencies
27.6. Circular constraints
28.1. Defining a new tag
28.2. Without the class tag
28.3. Defining a new tag in a library file
28.4. Overriding a class attribute
28.5. Defining an attribute
28.6. Class children
28.7. Using attributes and class children together
28.8. Built-in text classes
28.9. Extending the built-in text classes
28.10. Defining new text classes
28.11. Default placement of children in a class
28.12. Using placement within a class
28.13. Defining a pointer in a class definition
28.14. passing a pointer in constructor function
28.15. passing a parameter to a constructor function
28.16. Accessing views by name
28.17. A trivial method
28.18. A trivial method in a class
29.1. Defining a method
29.2. Defining a method with arguments
29.3. Returning data from a method
29.4. sendEvent
29.5. Event handler defined in opening tag
29.6. A simple handler
29.7. Multiple handlers for single events
29.8. Calling a method from a handler
29.9. Overriding an event-handler method in a subclass
29.10. Overriding an event-handling method in an instance
29.11. Referencing an event in another object
29.12. Different ways to send events
29.13. Setting an attribute value in the tag header
29.14. Using the atrribute element to set an attribute value
29.15. Using dot syntax to retrieve an attribute value
29.16. Using getAttribute to retrieve an attribute value
29.17. Using setAttribute to set an attribute value
29.18. Using setAttribute to update a constraint
29.19. An attribute without a setter method
29.20. Defining an attribute in a class
29.21. Defining an attribute in a view
29.22. Incorrect: attribute has no effect
29.23. Declaring attribute type
29.24. attribute for internal flags
29.25. Defining an explicit setter method
29.26. init() method vs oninit event
29.27. Using "this" keyword
29.28. Using a setter method
29.29. Setting attributes directly
30.1. Registering an event at runtime
30.2. Delegates and memory
30.3. Using LzTimer to create a second timer
30.4. Registering for an event when the last view has been replicated
30.5. delegate as attribute
31.1. The basic mouse events
31.2. Making views clickable
31.3. Setting a clickregion
31.4. Changing the cursor
31.5. Enabling and disabling the hand cursor
31.6. Creating a custom button using basebutton
31.7. Dragging a view
31.8. Simple mouse tracking
31.9. Using basetrackgroup
31.10. Creating a context menu
31.11. Reading key values
32.1. Following mouse events without states
32.2. Using states to follow mouse
32.3. attributes of states
32.4. Attributes pertain to container, not to parent
32.5. Using setters in <state> attributes
32.6. Using states to animiate transitions
32.7. Dropshadow done using states
33.1. Inheritance chain
33.2. Inheriting properties
33.3. The super keyword
33.4. Classroot
33.5. Referring to outer class's root using classroot
33.6. Classroot and top level instance
33.7. Extending text classes
33.8. Text type: HTML
33.9. Inheriting fonts
33.10. Script instantiation
33.11. Inheriting views
33.12. Inherited view order
33.13. Inherited view order with simplelayout
33.14. Undesired placement
33.15. Placing a child in the desired subview
33.16. Defaultplacement
33.17. Layout placement
33.18. Parent vs. Imediateparent
33.19. Obtaining reference to the defaultplacment node
33.20. Overriding determineplacement
33.21. Construction and initialization
33.22. creatChildren()
34.1. Basevaluecomponent
34.2. Baseslider extends basevaluecomponent
34.3. Basic baseslider attributes
34.4. More baseslider attributes
34.5. Percentage APIs
34.6. Min/max value APIs and events
34.7. Sending events
34.8. Defining events in the slider
34.9. Min/max value APIs and events
34.10. Baseslidertrack
34.11. Basesliderthumb
34.12. Slider
34.13. Slidertrack
34.14. Sliderthumb
34.15. Using slider
35.1. The Lz Class
35.2. Placing the LZX (SWF) application within an HTML page
35.3. Placing the LZX (DHTML) application within an HTML page
35.4. Flash player version-detecting wrapper
35.5. example frameset
35.6. target in loadURL
35.7. iframes and applications
35.8. new blank browser window
35.9. reusing new browswer window
35.10. Passing query parameters to LZX application
35.11. Accessing parameters
35.12. setting defaluts
35.13. setting defaluts
35.14. Multi-canvas application library
35.15. Multi-canvas application files
35.16. Selecting the Correct Canvas
35.17. Communicating with Back button
35.18. Intercepting keystrokes
36.1. An XML Document
36.2. Datasets
37.1. Embedding data in an OpenLaszlo application
37.2. Dataset from a remote source
37.3. Assigning a datapath to a view
37.4. Range of nodes
37.5. local datasets
37.6. XMLHTTPRequest
37.7. Manipulating datapointers
37.8. Explicitly defined datasets
37.9. Overriding applyData
37.10. $path constratint bindings
37.11. Assigning an attribute value by $path constraint
37.12. calculations on $path{} values
37.13. Using the data property
37.14. Ondata event
37.15. Using rerunxpath attribute
37.16. Visibility of datamapped views
37.17. Proper handling of data updates
37.18. Using datapointer's iterator methods
37.19. Using setPointer
37.20. Dereferencing datapaths
37.21. Datapath iteration
37.22. Datapath iteration workaround
37.23. Using clones and the onclones event
37.24. Using the nodes property
37.25. Using pooling to optimize data updates
37.26. Using a lazyreplicationmanager to display a large dataset
37.27. $path does not replicate
38.1. Defining a dataset
38.2. Binding data to views
38.3. Using an external dataset
38.4. using onclick handler to update data
38.5. UI for adding new contact
38.6. Adding a node to a dataset
38.7. Using onclick handler to add new contact
38.8. Using "contactview" class
38.9. using ondata handler to check for success
39.1. Trivial rtmpstatus example
39.2. automatic connection to RTMP connection
39.3. Turning microphone and camera on
39.4. Selecting which camera to use
39.5. Video Display over HTTP
39.6. Adding playback controls on a stream
39.7. A simple multi-party video application
39.8. control of Muting, Recording, Broadcasting
40.1. Survey tool radiogroup
40.2. Survey tool simple form
40.3. data model
40.4. extending a component
41.1. Measurement Framework
41.2. Globals vs. Locals
41.3. Caching globals
41.4. Adding elements to an array
41.5. Iterating with for, for in, or while
41.6. Conditionals vs. logical operators
41.7. With (this) vx. this.
41.8. The cost of a function call
41.9. Moving constant expressions out of a loop
41.10. Lazy replication increases efficiency
41.11. Pooling views
41.12. lib1.lzx
41.13. writing your own virtual constraints
42.1. jsp code for generating cookie
42.2. Combobox that creates a cookie
42.3. cookie.jsp
43.1. Simple connection manager
43.2. Different ways to disconnect
43.3. Sending message over connection
44.1. Return object
44.2. LzDataElement.valueToElement()
44.3. SOAP array
44.4. Setting generated return value LzDataElement in a dataset
44.5. Setting a dataobject toa dataset
44.6. Setting dataobject to an LzDataElement
44.7. Remotecall
44.8. Setting dataobject in remotecall
44.9. Remotecontext
45.1. Loading an object
45.2. Unloading proxy from the RPC object
45.3. Allow classes that start with org.openlaszlo
45.4. Passing different parameter types
45.5. Java to JavaScript
46.1. A simple SOAP tag
46.2. Loading Amazon SOAP service
46.3. Unloading Amazon SOAP service
46.4. WS-I Basic Profile 1.0 Draft: Section 4.1, R1005-R1007
46.5. Document sytle SOAP operation
46.6. XML Schema for .NET Math
46.7. Passing simple parameters in RPC style operation
46.8. Amazon WSDL: KeywordSearchRequest SOAP operation
46.9. Inovoking a SOAP operation using a complex type value
46.10. XML schema array pattern
46.11. Google array complex type and object complex type
46.12. SOAP request headers
46.13. Setting SOAP request headers in a method
46.14. SOAP response headers
47.1. SOAP
47.2. Creating a function stub
48.1. <switch> for conditional compilation
50.1. The canvas debug attribute
50.2. Runtime exceptions printed once per line
50.3. Logging to the debugger
50.4. Two ways of calling Debug.write
51.1. LzUnit simple case
51.2. Sequential execution of tests
51.3. Deferred execution of tests
51.4. setUp and tearDown
51.5. Chaining tests
51.6. Canvas
51.7. Go button
51.8. Test stub
51.9. testGoButtonTrue
51.10. testGoButtonTrue
51.11. testGoButtonTrueFalse
51.12. testGoButtonCounter
51.13. testGoButtonCounter
51.14. testGoButtonWhile
51.15. testIdle
51.16. startDraggingFloater method
51.17. testIdle
51.18. testGoButtonCount
51.19. cancelFloater method
51.20. testGoButtonCount

Copyright © 2002-2007 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.

Prev     Next
  Home  Preface