= GlareUI =

''GlareUI'' is a Smalltalk framework to build Adobe Flex applications in Smalltalk.

Like your domain components, you can define your entire view logic within Smalltalk. There is no need to write any ActionScript, GlareUI will automatically synchronize your clients with the state of your application in Smalltalk.

[[Image(glareui.png)]] [[BR]]
[[span(Icons copyright KDE Artists. Licensed under the LGPL, style=font-size: 80%; color: #888)]]


== Installing ==

Make sure you have installed GlareUI and the GlareUI client as described in the [wiki:Installation installation guide].


== Hello World ==

Let's dive right in to GlareUI by writing a simple application.

Because GlareUI is designed to be scriptable, there is no need to implement any classes. Simply fire up a workspace or anything else that you can evaluate code in and type in the following:

{{{
#!smalltalk
| app |
app := Application new.
app placePanel title: 'Hello World!'; with: [
	app placeLabel text: 'Welcome to your first GlareUI application!'.
].
app register
}}}

Once you have evaluated the code (select the source and "do it") fire up your web browser to the location of your GlareUI Flash client. You should see the following:

[[Image(helloworld.png)]]

Congratulations! You have written your first GlareUI application!

Let's go back to the source code and take a look at what we have written. All user interface start with an `Application` which is the base component of any GlareUI. With the `placePanel` scripting instruction we have told our application to add a new panel to itself and then added a label with the specified text to that panel by using the `with:` block. Finally we have told the application to register itself as the current user interface by issuing the `app register` message.


== Callbacks ==

Now our Hello World application might look nice but it does not do very much at the moment. Lets change that by modifying our hello world application to be a simple counter:

{{{
#!smalltalk
| app label |
app := Application new.
app placePanel title: 'Simple counter'; with: [
	label := app placeLabel text: 0.
	app placeButton label: '++'; onClick: [ label text: label text + 1 ].
].
app register
}}}

We have replaced the text of the label with the number 0 and saved a reference to the label for future use. We have also added a button with a callback block that gets evaluated whenever the user presses the button. Whenever the button is clicked, the counter is incremented by one.

GlareUI automatically serializes the click event back to the server where the block is evaluated. Our changes made to the user interface (changing the value of the label's text) are then automatically synchronized back to the client.

Open the example and click the button a couple of times. You should see something like this:

[[Image(counter.png)]]

We will leave it as an exercise to the reader to add a decrement button to the above example.