Networking in Frontal

From Frontal Wiki

Jump to: navigation, search

Contents

Introduction

Networking is the ability to integrate your Frontal document with web services. With Frontal, there are many ways to achieve this.

Using Forms

The most typical integration is via forms. In this case, the user enters data into a form and submits it to a server. The server processes the submission and returns some result. Frontal provides a 'form' tag, modeled after the HTML form tag, to enable this common use case. See the documentation for this tag for examples of how it may be used.

Using XML RPCs

While not part of the Frontal library, there's an XML RPC library installed on the Frontal server for you to use. We've already seen it in use once -- integrated with the 'form' tag to retrieve Flicker user IDs. Here's an example of how we can use it without the 'form' tag to send and receive information. Again, we're using it to retrieve a Flickr user ID from a username. 

<include rel="inline" src="http://www.frontalcode.com/repository/envs/staging/htdocs/assets/xml/xmlrpc.xml" />
<script><![CDATA[
    // Enter some username here.
    var userID = "test";
 
    var userIDLookup = new xmlRPC ( );
    // All Flickr APIs take a single object parameter.
    userIDLookup.addParameter ( { api_key: "fa0ccb3c5f57dc174a484baa4d0f4ba8", username: userID } );
    userIDLookup.setMethodName ( 'flickr.people.findByUsername' );
    userIDLookup.setServer ( 'http://api.flickr.com/services/xmlrpc/' );
    userIDLookup.send ( function ( event, rpc, userID )
        {
            // This it the callback for the XML RPC.
            if ( event.type == flash.events.Event.COMPLETE )
            {
                if ( rpc.isFault )
                {
                    // We got an error. Probably user not found.
                    document.write ( rpc.response.faultString );
                }
                else
                {
                    // Flickr sends back an XML document. Parse it with the
                    // Flash XML class.
                    var response = new XML ( rpc.response );
                    document.write ( userID + " = " + response.attribute ( "nsid" ).toString ( ) );
                }
            }
        }, userID );
]]></script>

Using Flash Networking APIs

You can also use the standard Flash networking classes URLRequest, URLVariables and URLLoader in Frontal. Here, we use them to access the Google Search AJAX APIs. These APIs return their results as JavaScript, which can be evaluated as variables and then used. In this example, we take advantage of the similarity between the Frontal scripting approach and JavaScript to achieve a similar outcome. 

<style><![CDATA[
    .searchButton
        {
            @onClick
                {
                    // Setup our request.
                    var request = new flash.net.URLRequest ( "http://ajax.googleapis.com/ajax/services/search/web" );
                    var variables = new flash.net.URLVariables ( );
                    variables.v = "1.0";
                    variables.q = gE ( 'keywords' ).text;
                    request.data = variables;
 
                    var loader = new flash.net.URLLoader ( request );
 
                    // We'll register this handler for various events passed
                    // dispatched from the loader.
                    var loadEventHandler = function ( event )
                        {
                            var loader = event.target;
                            loader.removeEventListener ( flash.events.Event.COMPLETE, loadEventHandler );
                            loader.removeEventListener ( flash.events.IOErrorEvent.IO_ERROR, loadEventHandler );
                            loader.removeEventListener ( flash.events.SecurityErrorEvent.SECURITY_ERROR, loadEventHandler );
 
                            if ( event.type == flash.events.Event.COMPLETE )
                            {
                                // We got a successful result. Interpret the data.
                                var results = com.frontalcode.ActionScriptInterpreter.evaluate ( "return " + loader.data + ";" );
                                var formattedResults = "";
                                for ( var i = 0; i < results.responseData.results.length; i++ )
                                {
                                    // Loop through the result create clickable
                                    // text.
                                    var result = results.responseData.results [ i ];
                                    formattedResults += "<a href=\"" + result.url + "\" target=\"_blank\">" + result.titleNoFormatting + "</a><br>";
                                    formattedResults += result.content + "<br><br>";
                                }
                                gE ( 'results' ).text = formattedResults;
                            }
                            else
                            {
                                // Display the error.
                                com.frontalcode.Debugger.logMessage ( com.frontalcode.Debugger.ERROR, "User", "while loading \"" + loader.request.url + "\": " + event.text );
                            }
                        }
 
                    loader.addEventListener ( flash.events.Event.COMPLETE, loadEventHandler );
                    loader.addEventListener ( flash.events.IOErrorEvent.IO_ERROR, loadEventHandler );
                    loader.addEventListener ( flash.events.SecurityErrorEvent.SECURITY_ERROR , loadEventHandler );
                }
        }
    document
        {
            padding: 20px;
        }
]]></style>
 
<text style="float: left;">Search:</text>
<text id="keywords" style="flash-text-type: input; condense-white: false; border-width: 1px; width: 300px; height: 16px; multiline: false; float: left;" />
<text class="searchButton" style="is-link: true; float: left; width: auto; multiline: false; word-wrap: false;"><![CDATA[Go >]]></text>
<text id="results" style="width: 400px; height: 300px; border-width: 1px; clear: left;" />
previous | next
Retrieved from "http://www.frontalcode.com/wiki/index.php/Networking_in_Frontal"
Personal tools
Get Adobe Flash player