Combine the power of WebSphere sMash and Adobe Flex

Today, a multitude of informational tasks — from obtaining regional weather forecasts to sharing video files with five hundred closest friends — are solved using Web 2.0 applications. In connection with the expansion of the use of Web 2.0 technologies, IBM released WebSphere sMash, a framework for developing and executing applications based on such basic concepts as dynamic development, simplicity, and RESTful interfaces. In most WebSphere sMash applications, user interfaces are implemented using Ajax, HTML, or the Dojo Toolkit.



In this post, the example of a simple “training” application shows how to implement in the application support for the Web 2.0 user interface, written in Adobe Flex. Provided server implementations in two languages ​​- Groovy and PHP. You can also download the “training” file and ask your questions to IBM representatives.

Introduction

The term Web 2.0 is often used in too broad a sense. This term is probably best defined as an architectural style based on using “fast” application programming interfaces, such as REST (REpresentational State Transfer) to create consumer applications.

')

As an architectural style, Web 2.0 does not dictate the need to use certain technologies either on the client side (browser) or on the server side. In fact, the most attractive feature of Web 2.0 applications is the clear separation of client and server technologies. This separation allows the developer to choose client and server technologies based on their relevance to the problem being solved, without the need to use a single solution for all occasions.



On the server side, the WebSphere sMash framework is particularly well suited to specialists with Java development experience, focused on getting results quickly (usually associated with dynamic scripting languages). The WebSphere sMash environment supports PHP and Groovy (a dynamic scripting language with Java syntax), making it available to a wide range of developers.



Although WebSphere sMash does not dictate the use of certain client technologies, WebSphere sMash applications are often bundled with HTML / Ajax-based user interfaces, sometimes enhanced with the Dojo Toolkit. Although these technologies meet the requirements of many user interfaces, some applications require a higher degree of interactivity and a more advanced framework. This is exactly what the Adobe Flex v product is. 3, which is widely used to create a so-called. RIA-applications (Rich Internet Application).



In this post, some approaches to combining the capabilities of WebSphere sMash and Adobe Flex are illustrated by the example of a simple WebSphere sMash application for which a visually appealing user interface is created using Adobe Flex. This application is intentionally made quite simple, which allows you to more clearly demonstrate the technology combining the capabilities of WebSphere sMash to Adobe Flex. According to the WebSphere sMash philosophy, all communication between the browser and the server is based on RESTful interfaces and uses standard data coding. To demonstrate the flexibility of WebSphere sMash and Adobe Flex, the article shows several types of training applications:



- WebSphere sMash application using Groovy or PHP.



- Transfer data between WebSphere sMash code and Adobe Flex code using XML or JSON.

Using WebSphere sMash

The WebSphere sMash product, created as part of the Project Zero open incubator project, is based on three basic principles: simplicity, agility and speed. With these attributes, this powerful framework makes it easy to create applications that support reuse and do not require significant effort to adapt to changes. The WebSphere sMash environment is focused on dynamic development, so many companies that need to urgently create new applications use this environment today to quickly and easily develop stable applications. WebSphere sMash dependency management removes many of the obstacles encountered when deploying an application. This greatly simplifies the deployment of applications in various environments, eliminating the need to resolve classpath dependencies. Unlike many other environments for developing applications, WebSphere sMash includes only the really necessary modules, which significantly reduces the final size of applications and ensures their quick initialization. Thus, WebSphere sMash is a truly excellent environment for dynamic development.

Web 2.0 and REST-style programming

By the term REST, many mistakenly imply the appropriate architecture; in this case, REST is rather an application programming interface on which the Web 2.0 architecture is based. REST interfaces represent the traditional list / create / read / update / delete operations using standard HTTP methods GET, POST, PUT and DELETE. Examples of using some of these methods are described in the following sections.



Web 2.0 technologies provide real benefits - they allow companies to present their internal services and data sources in the Internet in formats that are simpler for use by browser-based applications (for example, using ATOM, JSON, RSS, RESTful interfaces). Companies such as Google and Amazon have a leading position in the field of Web 2.0 APIs, which allow developers to use existing functionality and create applications based on them, i.e. with minimal effort.

Appbuilder

AppBuilder is a tool for developing applications in the WebSphere sMash environment (the zip file accompanying this article was packaged using AppBuilder). AppBuilder allows you to quickly design applications thanks to the following functions: a built-in editor with syntax highlighting tools, the ability to start / stop the server, access to the execution log, the ability to trace using the console. The AppBuilder tool is available for download on the Project Zero Web site .



Figure 1. AppBuilder features for syntax highlighting in the application editor





Figure 2. Runtime log tab in the file editor

Groovy and PHP

We want to focus on expanding the consumer capabilities of an existing application by building its front-end in the Adobe Flex environment, so the article covers only certain aspects of the WebSphere sMash infrastructure.



One of the attributes of the WebSphere sMash environment is the ability to create an application very quickly, based on the use of the powerful scripting languages ​​Groovy and PHP.



Having appropriate built-in WebSphere sMash agreements greatly simplifies and streamlines the creation of a resource in an application. Any Groovy or PHP script placed in the WebSphere sMash application directory named app / resources is automatically presented as a RESTful resource:



Table 1. Scripts presented as RESTful resources



More information: Project Zero: Programming Model and Resource Agreements (REST) .



Our first task will be to create a server component for the to-do list application.

Creating a to-do service with Groovy

Groovy is a scripting language aimed at programmers who cannot do without Java. With easy integration with existing Java code and scripting capabilities, Groovy guarantees speed and ease of development.



To store a custom to-do list, the app zone is used in a global context. The following methods are used:



- onList: creates a list of to-do items.

- onCreate: creates a new item in the to-do list by adding the specified item.

- onRetrieve: places an item in the list based on the index ID.

- onDelete: removes an item from the to-do list



In the original version, the application in question was created with the expectation of returning data in XML format. The code shown in this article is almost identical to the typical REST resource from the above-mentioned article on the Project Zero Web site. The complete WebSphere sMash source code for the snippets shown below: CombiningThePowerOfWSWithAdobeFlex / src / TodoService-1.0.0 / TodoService / app / resources / todos_xml_grovy.groovy (see the Download section below).



Listing 1. onList () event handler

def onList () {

logger.INFO {"onList (): called"}



def todos = app.todosXML []



if (todos == null) {

todos = []

}

else {

todos = todos.values ​​()

}



outputXML (todos)

logger.INFO {"onList (): returning $ {todos}"}

}

Listing 2. onCreate () event handler

def onCreate () {

logger.INFO {"onCreate (): called"}



def item = request.params.item []

request.status = HttpURLConnection.HTTP_BAD_REQUEST



if (item! = null && item.length ()> 0) {

def todos = app.todosXML []

def index = app.index []



if (todos == null) {

todos = [:]

index = 0

}



index ++

todos.put (index, [id: index, value: item])



app.todosXML = todos

app.index = index



request.status = HttpURLConnection.HTTP_CREATED

request.headers.out.Location = request.uri [] + '/' + index



logger.INFO {"onCreate (): created id $ {index} -> $ {item}"}

}

}

Listing 3. onRetrieve () event handler

def onRetrieve () {

logger.INFO {"onRetrieve (): called"}



def id = request.params.todos_xml_groovyId []



if (id! = null) {

def todos = app.todosXML []

def value = todos.get (id.toInteger ())



if (value! = null) {

outputXML (value)

logger.INFO {"onRetrieve (): returning $ {value}"}

return

}

}



send404 ()

}

Listing 4. onDelete () event handler

def onDelete () {

logger.INFO {"onDelete (): called"}



def id = request.params.todos_xml_groovyId []



if (id! = null) {

def todos = app.todosXML []



if (todos.remove (id.toInteger ())) {

app.todosXML = todos

logger.INFO {"onDelete (): deleted $ {id}"}

return

}

}



send404 ()

}

Listing 5. Rendering response in the outputXML method

def outputXML (data) {

logger.INFO {"converting $ {data} to XML"}



request.headers.out.'Content-Type '=' application / xml '

request.view = 'XML'

request.xml.output = data

render ()

}

Creating a to-do service with PHP

PHP is a universal scripting language. The PHP implementation shown in this section is functionally equivalent to the Groovy implementation shown above. There are only a few syntactic differences between these two implementations. Depending on the complexity of the objects being serialized, indirect rendering is handled by WebSphere sMash.



The complete WebSphere sMash source code for the snippets shown below: CombiningThePowerOfWSWithAdobeFlex / src / TodoService-1.0.0 / TodoService / app / resources / todos_xml_php.php (see the Download section below).



Listing 6. The onList () method

function onList () {



$ todos = zget ("/ app / todos_xml_php");



if ($ todos == null) {

$ todos = array ();

}



zput ('/ request / view', 'XML');

zput ('/ request / xml / output', array_slice ($ todos, 0));

zput ('/ request / xml / rootelement', 'arraylist');

render_view ();

}

Listing 7. onCreate () method

function onCreate () {



$ item = zget ("/ request / params / item");

zput ("/ request / status", 400);



if ($ item! = null && strlen ($ item)> 0) {

$ todos = zget ("/ app / todos_xml_php");

$ index = zget ("/ app / index");



if ($ todos == null) {

$ todos = array ();

$ index = 0;

}



$ index ++;

$ todos [$ index] = array ('id' => $ index, 'value' => $ item);



zput ("/ app / todos_xml_php", $ todos);

zput ("/ app / index", $ index);



zput ("/ request / status", 201);



$ uri = zget ("/ request / uri");

zput ("/ request / headers / out / Location", "$ uri / $ index");

}

}

Listing 8. onRetrieve () method

function onRetrieve () {



$ id = zget ("/ request / params / todos_xml_phpId");



if ($ id! = null) {

$ todos = zget ("/ app / todos_xml_php");

$ value = $ todos [$ id];



if ($ value! = null) {

zput ('/ request / view', 'XML');

zput ('/ request / xml / output', $ value);

render_view ();

return;

}

}



// Error handling

zput ("/ request / status", 404);

echo "An error occurred while processing your request";

}

Listing 9. onDelete () method

function onDelete () {



$ id = zget ("/ request / params / todos_xml_phpId");



if ($ id! = null) {

$ todos = zget ("/ app / todos_xml_php");

unset ($ todos [$ id]);



zput ("/ app / todos_xml_php", $ todos);

return;

}



// Error handling

zput ("/ request / status", 404);

echo "An error occurred while processing your request";

}

JSON format

In keeping with its nature of Web 2.0, WebSphere sMash supports XML (in addition to XML format) (JavaScript ™ Object Notation) format (for more information on JSON format, see the Resources section). One of the major advantages of the Groovy language is the ease of parsing using XML and JSON formats, which saves the developer from the considerable time spent writing the appropriate code.



The WebSphere sMash environment is capable of rendering an HTTP response using direct rendering using an API or indirect rendering. To create output information in XML and JSON formats, this post only uses indirect rendering. In general, the renderer is invoked as follows:



1. Set the value of / request / view in the global context Global Context of the relevant renderer.

2. Specify additional values ​​for this renderer in the global context of GlobalContext, where appropriate.

3. Call the renderer zero.core.views.ViewEngine.render ().



The above example uses only XML data. The following section describes how to implement the output of data in JSON format by minimally modifying program code in Groovy and PHP.



Full source software WebSphere sMash technology and technology services (see the Download section below).



Listing 10. JSON output when using Groovy

def outputJson (data) {

logger.INFO {"converting $ {data} to JSON"}



request.headers.out.'Content-Type '=' application / json '

request.view = 'JSON'

request.json.output = data

render ()

}

Listing 11. Output in JSON format using PHP

zput ('/ request / view', 'JSON');

zput ('/ request / json / output', $ todos);

render_view ();

Using Adobe Flex

Up to now, we have described building the server part of the application. Now we will look at building the browser part of the application, which should interact with the server part created earlier using WebSphere sMash.



Adobe Flex provides the creation of platform-independent RIA applications (Rich Internet Application) that can be uniformly deployed in all major browsers, desktop environments, and operating systems (see the Resources section). These RIA applications can be executed in browsers using an Adobe Flash player or in desktop environments using the Adobe Integrated Runtime (AIR) tool.



Full Adobe Flex source code for code snippets: CombiningThePowerOfWSWithAdobeFlex / src / todoJSON.mxml and CombiningThePowerOfWSWithAdobeFlex / src / todoXML.mxml (see Download section).



Building an application in the Adobe Flex environment is as follows:



1. Retrieving data from a WebSphere sMash environment



Adobe Flex makes it easy for you to load external data using the HTTPService component (see Resources). The article shows two ways to perform HTTP requests - for XML and for JSON, respectively. Adobe Flex has built-in support for XML (that is, it uses ECMAScript for XML (e4x) technology to parse data), so in this case the developer has to write less software code. To support JSON data serialization in Adobe Flex, you must load the corelib library (see the Resources section). The sample code shown in Listing 12 creates the HTTPService component and makes it available to the application. This allows you to delete, retrieve, and create items in the to-do list using the XML data provided by the WebSphere sMash application.



The Adobe Flex MXML code shown in Listing 12 makes extensive use of the Adobe Flex binding mechanisms (variable names in curly brackets) to dynamically replace names and resource identifiers when sending requests in real time. The WebSphere sMash environment maps the URLs specified in the <mx: HTTPService> elements to previously created Groovy or PHP scripts. The selection of the method (function) from these scenarios to be called for processing the corresponding request is based on the attributes and URLs of the methods (functions).



Result attributes and errors provide a code to be executed if the condition “successful completion” or “error” occurs, respectively. Automatic processing of the data returned by the list and retrieve calls is provided by binding data in any part of the MXML code. Updating the displayed data after completing calls to create and delete is provided by initiating the next call to list.



Listing 12. Creating an HTTPService component using XML

<mx: HTTPService id = "listTodosHS"

url = "/ resources / {resource}" method = "GET"

resultFormat = "e4x" />





<mx: HTTPService id = "retrieveTodoHS"

url = "/ resources / {resource} / {idToRetrieve}" method = "GET"

resultFormat = "e4x"

result = "detailsBox.visible = true" />





<mx: HTTPService id = "createTodoHS"

url = "/ resources / {resource}" method = "POST"

result = "listTodosHS.send ()"

fault = "listTodosHS.send ()">

<mx: request xmlns = "">

{itemToAdd.text}

</ mx: request>

</ mx: httpsservice>





<mx: HTTPService id = "deleteTodoHS"

url = "/ resources / {resource} / {idToDelete}" method = "POST"

result = "listTodosHS.send ()"

fault = "listTodosHS.send ()" />

The JSON library allows you to provide similar functionality for parsing JSON data provided by the WebSphere sMash application (Listing 13). The main difference between JSON and the XML in Listing 12 is that the list and retrieve handlers have explicit calls for decoding JSON data.



Listing 13. Creating an HTTPService component using JSON

<mx: HTTPService id = "listTodosHS"

url = "/ resources / {resource}" method = "GET"

resultFormat = "text"

result = "todoItems = JSON.decode (listTodosHS.lastResult as String);" />





<mx: HTTPService id = "retrieveTodoHS"

url = "/ resources / {resource} / {idToRetrieve}" method = "GET"

resultFormat = "text"

result = "detailItem = JSON.decode (retrieveTodoHS.lastResult as String);

detailsBox.visible = true; "/>





<mx: HTTPService id = "createTodoHS"

url = "/ resources / {resource}" method = "POST"

result = "listTodosHS.send ()"

fault = "listTodosHS.send ()">

<mx: request xmlns = "">

{itemToAdd.text}

</ mx: request>

</ mx: httpsservice>





<mx: HTTPService id = "deleteTodoHS"

0 url = "/ resources / {resource} / {idToDelete}" method = "POST"

result = "listTodosHS.send ()"

fault = "listTodosHS.send ()" />

2. Parsing and displaying data



As shown in Listing 14, Adobe Flex components make it easy to handle the results of an HTTPService request.



Listing 14. Processing the results of an HTTPService request

<mx: HBox left = "10" horizontalGap = "15">

<mx: VBox backgroundColor = "white"

paddingBottom = "5" paddingLeft = "5"

paddingRight = "5" paddingTop = "5"

cornerRadius = "5" borderThickness = "1"

borderStyle = "solid" borderColor = "black"

dropShadowEnabled = "true" shadowDistance = "3"

shadowDirection = "right">

<mx: Text text = "Your todo items:" fontWeight = "bold" fontSize = "14" />

<mx: Repeater id = "todoItemsRp"

dataProvider = "{listTodosHS.lastResult.item}">

<mx: HBox width = "100%" verticalAlign = "middle"

paddingBottom = "3" paddingLeft = "3"

paddingRight = "3" paddingTop = "3"

rollOver = “event.currentTarget.setStyle

('backgroundColor', 0xffff88) "

rollOut = “event.currentTarget.clearStyle

('backgroundColor') ">

<mx: CheckBox click = "deleteItem (event)"

toolTip = "Click to delete item" />

<mx: Text text = "{todoItemsRp.currentItem.value}" />

<mx: LinkButton label = "details"

fontSize = "8" textDecoration = "underline"

click = "getItemDetails (event)" />

</ mx: HBox>

</ mx: Repeater>



<mx: Spacer height = "10" />



<mx: HBox width = "100%" verticalAlign = "middle">

<mx: Text text = "Add:" />

<mx: TextInput id = "itemToAdd"

toolTip = "Press Enter to add the new item."

enter = “createTodoHS.send (); event.currentTarget.text = '' "/>

</ mx: HBox>

</ mx: vbox>





<mx: VBox id = "detailsBox" visible = "false" showEffect = "{fade}"

backgroundColor = "white"

paddingBottom = "5" paddingLeft = "5" paddingRight = "5" paddingTop = "5"

cornerRadius = "5" borderThickness = "1"

borderStyle = "solid" borderColor = "black"

dropShadowEnabled = "true" shadowDistance = "3"

shadowDirection = "right">

<mx: Text text = "Item details:" fontWeight = "bold" fontSize = "14" />

<mx: Text text = "ID: {retrieveTodoHS.lastResult.id}" />

<mx: Text text = "Value:" />

<mx: TextArea text = "{retrieveTodoHS.lastResult.value}" />

</ mx: vbox>

</ mx: HBox>

Event handling in Adobe Flex

Adobe Flex uses ActionScript, an object-oriented scripting language based on ECMAScript technology (see Resources), which allows you to create dynamic user interfaces to provide interactivity, for example, to manage events (see Listing 15). Note that in the creationComplete () function, additional steps are needed to match the way that HTTP REST calls are generated in Adobe Flex with the results that WebSphere sMash expects to receive.



Listing 15. Sample Adobe Flex Code

/ **

* Logic to run after the mx: Application has been created.

* /

internal function creationComplete (): void {

// initial population of the list

listTodosHS.send ();



// Flex doesn’t know how to generate an HTTP DELETE.

// Fortunately, sMash / Zero will interpret an HTTP POST with

// an X-Method-Override: DELETE header as a DELETE.

deleteTodoHS.headers ['X-Method-Override'] = 'DELETE';



// set a dummy body

// a GET

deleteTodoHS.request ['foo'] = 'I really want a POST';

}



/ **

* Called when you request details for an item.

* /

internal function getItemDetails (event: MouseEvent): void {

// find id of item to be deleted

var lb: LinkButton = event.currentTarget as LinkButton;

var i: int = lb.parent.parent.getChildIndex (lb.parent);

idToRetrieve = listTodosHS.lastResult.item [i-1] .id;



// hide details box while we're getting details

detailsBox.visible = false;



// ask server for details

retrieveTodoHS.send ();

}



/ **

* Called

* /

internal function deleteItem (event: MouseEvent): void {

// find id of item to be deleted

var cb: CheckBox = event.currentTarget as CheckBox;

var i: int = cb.parent.parent.getChildIndex (cb.parent);

idToDelete = listTodosHS.lastResult.item [i-1] .id;



// hide details if deleting same item

if (retrieveTodoHS.lastResult! = null &&

idToDelete == retrieveTodoHS.lastResult.id)

detailsBox.visible = false;



// tell server to delete item list

// delete finishes

deleteTodoHS.send ();

}

The download file (see the Download section) contains the complete source code for this training program.

Generalization of the preceding reasoning

Adobe Flex does not have ready support for serializing JSON data. To implement this support, you must download the corelib library from the Adobe web site and place it in the libs directory of the WebSphere sMash application (see Resources). To deploy an Adobe Flex application, the application (.swf) must be present in the public directory of the WebSphere sMash application. The source code included in this article contains two options for the Adobe Flex application, the first of which uses the XML format, and the second uses the JSON format. If the WebSphere sMash server is running, then these applications can be accessed via the following links: localhost : 8080 / todoXML.html or localhost : 8080 / todoJSON.html, respectively.



Explanations in the following figures.



- View of the loaded application after calling the onList () method (Fig. 3).

- The Adobe Flex browser part sends an HTTP POST request to add a new item to the to-do list (see Figure 4).

- The Adobe Flex interface controls the onclick event (which occurs when the checkbox in the checkbox is checked) to remove an item from the to-do list (Fig. 5).

- When the user clicks the to-do list item, the onRetrieve () method is called (Fig. 6 and Fig. 7).

- This application supports switching between implementations on Groovy and PHP (Fig. 8).



Figure 3. Application view after calling onList ()





Figure 4. Adding an item to the to-do list





Figure 5. Removing an item from the to-do list





Figure 6. The user selected an item in the to-do list





Figure 7. Application view after calling the onRetrieve () method





Figure 8. The application can switch between Groovy and PHP

Conclusion

WebSphere sMash is a simple, yet powerful framework for quickly building Web applications. With support for two dynamic scripting languages ​​(Groovy and PHP), WebSphere sMash allows you to quickly start developing Web 2.0 applications. The article demonstrates standardized RESTful techniques that you can use to combine WebSphere sMash server logic with functionally rich, highly interactive user interfaces written in Adobe Flex. For more information about the topics covered in this article, see the Resources section.

Loading

Downloadable file available for download: smash-flex-sample.zip

Resources

An article on the IBM website



IBM WebSphere sMash. Product Information (EN)



Project Zero Developer Community



Project Zero: REST (Programming Model and Resource Agreements)



Project Zero: JSON support



Project Zero: Response Rendering