Hello World

Hello World

Let’s start by creating a simple user interface that will test remote messaging. Open ./public/index.html and replace the body contents with the following

<body style="visibility:hidden" on="l:app.compiled then visible">

	<!-- generate request -->
	<textarea id="your_message" fieldset="hello_world">type something</textarea>
	<div>
		<input type="button" value="click me" 
			on="click then r:hello.world.request" fieldset="hello_world"/> 
	</div>

	<!-- display response -->
	<div>
		You typed: 
		<span on="r:hello.world.response then value[message]" style="color:blue">
			nothing yet
		</span>	
	</div>

	<!-- mock service -->
	<app:script on="r:hello.world.request then execute">
	 $MQ("r:hello.world.response",{"message":this.data.your_message});
	</app:script>

</body>

Save the file and run it by loading the file directly in your browser using your browser’s File->Open menu option.

User Interface Explanation

There are several basic concepts covered in this example. First, we use the fieldset attribute to link the TEXTAREA with the INPUT button. When a click event is generated by an element with a fieldset, Appcelerator will look for other input elements with the same fieldset value, and it will include their values in the message generated by the click event. This feature is very useful when creating forms.

Second, we show how an element can subscribe to a message and set its value based on an attribute in the message payload - in this case the message attribute.

Finally, we show an example of how to create a mock service. A mock service is a SCRIPT widget that subscribes to a remote request and responds with a remote response. This is a powerful capability because it enables you to create fully functional user interfaces (UI) without writing a single line of service code. These UIs are also 100% reusable. Once you finish your UI, you can remove your mock services as you create the remote service implementations. We call this Interactive Use Case development. You can learn more about Interactive Use Cases in the Best Practices section of this documentation.

Service

Now we’re ready to implement the service for our Hello World example. First, remove (or comment out) the mock service that you created above. Next, open ./Service/HelloService.pm and create a new service method like the one below:

Service("hello.world.request", "hello.world.response", *hello_world);
sub hello_world {
    my $self = shift;
    my $args = shift;

    my $request = $args->{"-request"};
    my $response = $args->{"-response"};
    my $session = $args->{"-session"};

    $response->data()->{"message"} =  $message;
}

You should be able to test out your new application by accessing it at:

http://localhost