Introducing OpenLaszlo
by Sreekumar Parameswaran Pillai | Pages: 1, 2, 3, 4, 5

Set Up the Projects in Eclipse

The First Laszlo Project:

1. Select File >> New >> Project.

Figure 6. The Laszlo Select Wizard page

2. Select Laszlo Project and click Next.

3. Enter the project name as "laszlotutorial" and click Next.

Figure 7. The New Laszlo Project wizard

4. When asked "Open associated perspective?", say "Yes," and the Laszlo perspective will be enabled for the current workspace.

Create helloworld.lzx

1. Right-click the src folder in the Laszlo project, select New > Other … and select Laszlo File.

2. Click Next.

3. Enter the name as helloworld.lzx, and press Finish. The values against Container and File type may be left for their default values. This will typically appear as in Figure 8.

Figure 8. Naming the Laszlo file

4. Click Finish and the helloworld.lzx will be opened in the Laszlo editor for any update. Refer to Figure 9 for the view of the entire workbench.

Figure 9. helloworld.lzx in the Laszlo perspective (Click image for full-size.)

In Laszlo perspective, the numbered windows illustrated in Figure 9 provide the following features.

1. Script Explorer lets you view the content of the Laszlo project, including the class libraries available with Laszlo.

2. This is the Laszlo editor, the actual text editor for Laszlo. The editor also helps to structure the code and to provide content assistance. With the cursor positioned at a node, pressing Ctrl-spacebar will pop up the options allowable at that point.

3. The editor also provides for Source and Design view to enable visual editing.

4. Along with the design view in the editor, the Component Palette helps visual drag and drop of Laszlo components to the canvas.

5. The Outline view represents the Laszlo file as a hierarchy of nodes, as in an XML structure. Right-clicking the node enables the option to add attributes or child nodes.

6. The Attributes window lets you set the value of each attribute selected either in the text editor or the outline view.

Modify helloworld.lzx

Now, let's add some content -- say, a simple "Hello World" -- to the helloworld.lzx file so that we can view this in the browser. This is a very simple window: 250 pixels wide and 150 pixels high with a "Hello World" message. Copy and paste the code snippet below to the helloworld.lzx file.

Listing 1. helloworld.lzx

<canvas width="800" height="600">
<window name="mainwindow" width="250" height="150" title="Hello
World!">
<simplelayout axis="y" spacing="10"/>
<text text="Hello World" fontsize="14" fontstyle="bold" />
</window>
</canvas>

Deploy helloworld.lzx

Deploying an .lzx file is the process of publishing the file on the LPS (Laszlo Presentation Server), where it will be compiled. Once deployed, any standard web browser will be able to access this from the server.

The Laszlo IDE provides a facility to deploy a file from the Laszlo perspective. This requires creating a launch configuration from the Run configuration window. To make a launch configuration, go to menu bar, Run >> Run.

1. In the Run configuration window, select Laszlo Application, click New..., and name the new configuration on the right window (laszlotutorial_config), as shown in Figure 10.

2. Select the Project button and browse to the Laszlo project in the workspace.

3. Select the radio button corresponding to the Project file and browse to select helloworld.lzx from the workspace.

Figure 10. Run configuration window

4. Fill the common tab with the information in Figure 11, and click Run.

Figure 11. Run configuration window (common tab)

5. The helloworld.lzx will be deployed on the Laszlo Presentation Server, and the Hello World window will be displayed in the default browser, as shown in Figure 12. (You'll notice that this process is a little slow. In the subsequent section, we'll see how Ant can speed up the whole process in a real situation.)

Figure 12. Hello World in the browser

Pages: 1, 2, 3, 4, 5

Next Page