Get Started with Perl
Trace: » Extending UI With Custom Widgets & Behaviors » Dialog » Contributing to Entourage » Content » Get Started with Perl

Get Started with Perl

The following sections will walk you through creating your first Appcelerator Perl project. We will also build a simple sample application to help get you going with Appcelerator.

This guide assumes you have some introductory knowledge of using both Perl and Apache. If you are new to these concepts, there are a lot of great references that can be found at http://www.perl.com/, http://www.perl.org/, and http://www.apache.org/.

Prerequisites

Apart from the Perl distribution itself, Appcelerator has a few CPAN dependencies. These can be installed by using the CPAN console. To begin using the CPAN console, simply run this command from your command-line:

perl -MCPAN -e shell

When the CPAN prompt appears install the necessary modules:

> install XML::Simple
> install Apache::Session::File
> install JSON::Any

During the installation of the JSON::Any package, the CPAN interface will prompt for the installation of one of the required JSON libraries. Be sure to say “yes” to at least one of these.

Once Perl is ready you will need to download the Appcelerator Entourage package for Perl. Remember where you put this. We are going to unpack it next.

Create a new project

We want a simple Perl project that includes Appcelerator Entourage. We could use an existing project, but for simplicity we are going to create a new one. Most of what we want was included in our download of Appcelerator Entourage, but we need a project directory. Run the following command:

mkdir -p path/to/your/new/application

Then we need to unzip the Appcelerator Entourage package for Perl into our new project. The process for this is different if you are on Window or *nix.

*nix

Run the following command:

unzip -q -d path/to/your/new/application path/to/entourage-package.zip

Windows

Unpack the archive in Windows Explorer. Select it's entire contents and copy them to the clipboard. Then paste them into your new application directory.

Back to common instructions

Ensure that your Apache docroot points to your Appcelerator public directory. In some installations that setting will appear as below in the Apache configuration file:

DocumentRoot /path/to/your/public/directory

Open a web browser and go to http://localhost/servicetester.html (make sure to add your port if not 80) and try to execute the example echo service that was included.

Hello World

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

<html>
<head>
  <title>Appcelerator Entourage&trade; Hello World</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="/javascripts/entourage.js" type="text/javascript"></script>
</head>
<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" fieldset="hello_world"
       on="click then r:hello.world.request"/> 
  </div>
 
  <!-- display response -->
  <div>
    You typed: 
    <span on="r:hello.world.response then value[message]"
        style="color:blue">
      nothing yet
    </span>  
  </div>
 
  <!-- mock service -->
  <script type="text/javascript">
    $MQL("r:hello.world.request", function(message) {
      $MQ({
        name: "r:hello.world.response",
        payload: {
          message: message.payload.your_message
        }
      });
    });
  </script>
 
</body>
</html>

You should be able to test out your new application by accessing it at the following url: http://localhost/hello_world.html (make sure to add your port if not 80)

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 ./app/services/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;
}

Again, you should be able to test out your new application by accessing it at the following url: http://localhost/hello_world.html (make sure to add your port if not 80)

services/perl.txt · Last modified: 2009/03/24 02:48 by kwhinnery