Fabula Example: “Hello, World!”

As a gentle introduction to Fabula, let’s consider a classic example, “Hello, World!”

Without any interactions, this application is trivial:


<library>
    <applet name="main">
        <view>'Hello, World!'</view>
    </applet>
</library>

To try it, you can start the Fabula Launchpad, enter “Hello World” into the Name field and press “Create”; then, after a new row appears in the project list (in green colour), find the Edit icon in the Actions column and click it. This will open the Fabula Project Builder in a new window/tab, having code editor with some code in it. Ignore the code and replace it with the code above. Press Ctrl+S to save. To run, switch to the Test tab; here you can either click “Play in embedded window” button or click the large “Launch in new window” icon. You will see that our application simply displays text “Hello, World!”

Now, let’s make it less trivial. Say, we want it to display the text in a text box after a button is clicked.

To do this, we’ll need two applets – one for the entire page (‘main’) and one for the button (‘mybutton’), and a channel to inform the main window that the button was pressed. ‘main’ will have state consisting of a string to display in the text box, and a view containing two HTML elements. The channel will transfer only a signal with no data attached to it, i.e. its item data type will be null (composite object with no properties). The full source is below.


<library>
<!-- Title: Hello World -->
<!-- Author: Roman Movchan -->
	<channel name="click">
<!-- 		channel with null data -->
		<com/>
	</channel>
	<applet name="main">
		<model state="state">
<!-- 			state is string to display -->
			<string/>
		</model>
		<view applets="mybutton: mybutton">
			<text>
<!-- 				view consists of a text box and button -->
				<input type="text" value="[%state%]" readonly="readonly"/>
				<button class="[%mybutton%]">Button</button>
			</text>
		</view>
<!--            initially, the state is empty string -->
		<init>''</init>
		<receive data="data">
<!-- 			when data (null) is received from channel, change the state to 'Hello, World!' -->
			<from channel="click">'Hello World!'</from>
		</receive>
	</applet>
	<applet name="mybutton">
<!-- 		this applet signals when the button was clicked by sending null to channel -->
		<events>
			<click>
				<send channel="click">{}</send>
			</click>
		</events>
	</applet>
</library>

First, note expressions in special brackets [% and %]. When inside a text expression, these are replaced with the values of the expressions. Therefore, the text box will initially contain empty string, and after the state changes to ‘Hello, World!’ (upon receiving a signal from the channel, when the button is clicked) its content will be that text.

Second, note how applet ‘main’ employs the other applet, ‘mybutton’. The ‘applets’ attribute of the view binds the classname of instances of ‘mybutton’ to a variable with the same name. This value then substitutes [%mybutton%] and becomes the value of the ‘class’ attribute of the button. This will create an instance of applet ‘mybutton’ and “attach” it to the actual element of the web page – the button.

Please try to enter this code in Project Builder’s code editor and then run it from the Test tab to see how it works. Don’t forget to save (Ctrl+S) before you run it.

See also our YouTube video

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s