Get Started with .Net
The following sections will walk you through creating your first .Net project injected with Appcelerator Entourage. We will also build a simple sample application to help get you going with Appcelerator Entourage.
Prerequisites
Before you begin you will need Visual C# Express (or better) and IIS installed on your machine.
Once that is ready you will need to download the Appcelerator Entourage package for .Net. Remember where you put this. We are going to unpack it next.
Create a new project
Creating a new Appcelerator Entourage project is fairly easy. Just extract the zip file you downloaded.
Now let's make sure we can open our solution in Visual C#. Go to File → Open Project… and navigate to the solution file in the src directory.
Once that's done, let deploy our app to IIS. First, copy your project folder to your IIS root directory (“C:\Inetpub\wwwroot” on a XP SP2 machine).
Now, create a new IIS Virtual Directory pointing to the “public” folder in your project directory (“myproject\public”). Name it something recognizable (e.g. “foo”).
Next, create an Application Mapping for the “.app” extension to the ISAPI dll on your system. On a XP SP2 machine, one right-clicks the Virtual Directory created above, clicks Properties, then Configuration on the Virtual Directory tab of the properties dialog. Now, map the .app extension to the “aspnet_isapi.dll” on your system (e.g. “C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll”).
Hello World
Let’s start by creating a simple user interface that will test remote messaging. Lets create ./web/hello_world.html and replace the body contents with the following:
<html> <head> <title>Appcelerator Entourage™ 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>
Test out your new application by accessing it at the following url: http://localhost/virtual_directory_name/hello_world.html (make sure to use the name of the virtual directory you chose and 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 ./src/Examples/TestService.cs and create a new service method like the one below:
[Service("hello.world.request", "hello.world.response")] public void HelloWorld(Message request, ref Message response) { String message; try { message = ((JsonString)request.Data["your_message"]).Value; } catch { message = ""; } response.Data.Add("message", message); }
Save your service, compile it to a DLL and deploy to ./app/services.
You should be able to test out your new application by accessing it at:
Again, you should be able to test out your new application by accessing it at the following url: http://localhost/virtual_directory_name/hello_world.html (make sure to use the name of the virtual directory you chose and add your port if not 80)
