OpenLaszlo components are high-level objects that implement common user-interface functions. They range from relatively simple objects such as button<button>[unknown tag] to complex objects such as form<form>[unknown tag] and grid<grid>[unknown tag] . Components that are written by Laszlo Systems, Inc., and supplied with the OpenLaszlo Server are called LZ components.

This tutorial introduction is intended to show you the variety of OpenLaszlo components and demonstrate how to use their basic features. Later chapters explain how to use advanced features of components and how to create your own components. The simplest way to build an OpenLaszlo application is to use LZ components "out of the box" with their default behaviors. This chapter includes a few such examples. It also includes a few examples that use concepts that have not yet been introduced. Don't worry if you don't understand exactly how they work. The idea here is to get acquainted with the general "feel" of an OpenLaszlo application that is built mostly from components. The subsequent tutorials present the concepts you'll need in order to create your own applications.

Before reading this chapter about how to use components to build an OpenLaszlo application, you should take a few moments to get familiar with the range of components that ship with OpenLaszlo. The example below shows a miscellaneous collection of components. It's an abbreviated version of the sampler in the OpenLaszlo Explorer, which contains a visual tour of all the components. The code that implements these components may look a little intimidating if you have not worked with this kind of language before, but don't be put off. In fact you may not even want to look at the code yet. Your goal here is to start thinking about the kinds of things you can do in an OpenLaszlo application, and components provide your quickest route to productivity. The LZX Reference documents all the tags, attributes and methods associated with each component. height: 500, width: 800

You will notice that the OpenLaszlo Explorer groups components into "form components" and "general components." This is merely a heuristic grouping of those components that usually appear within a form<form>[unknown tag] tag and those that don't. There is no essential difference; for example, the button<button> tag can be contained in a view<view>[unknown tag] or window<window>[unknown tag] ??? it does not have to be contained in a form<form>.

Depending on your background in building web applications, you may be inclined to use the form<form> in place of the HTML <form> tag. This is often a mistake; OpenLaszlo applications are based on a different interaction model than HTML-based applications and overuse of the <form> tag results in LZX programs that fail to exploit OpenLaszlo's range of options. The form<form> tag is, generally speaking, not a widely used tag in LZX applications. It is intended to be used in situations in which the client-server interaction is simple, and there is a 1:1 mapping between the returned server data and the form elements. When the server interaction is more complicated, more advanced databinding techniques should be used, as explained in later chapters.

In this section we'll explore the various ways to use components in OpenLaszlo applications: using tagsusing script APIsusing databinding As mentioned above, the concepts of scripting and databinding are presented in later chapters. Don't worry if you're not completely comfortable with these topics.

The simplest way to use the components is in an application that has tags only???no script. The following trivial example shows what this looks like. height: 100 As a practical matter, you will usually need to use some script, whether in a method, or, less frequently, to create a component within a script<script>[unknown tag] element.

In addition to declaring components in tags, you can create and manipulate components from script. The following example shows how you can create buttons using tags and script. height: 150 In the example below, the onclick method procedurally adds an item to the list <list >[unknown tag] component. height: 150

A third way to create components is through databinding. In the example below, a new component textlistitem is created for each matching node in the "mydata" dataset. height: 200, width:800