Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Intégration de Flex 4 et les Servlet Java avec HTTPService

Tutorial Flex écrit par Naoufal Ben Bouazza
Publiez vous aussi sur flex-tutorial!

La plupart des applications Flex qu’on développe communique avec un serveur en utilisant l’une des méthodes proposées par le SDK Flex.
Dans ce tutoriel, nous nous concentrerons sur la façon de développer des applications Flex pour communiquer avec des Servlet côté serveur Java (http://fr.wikipedia.org/wiki/Servlet), et comment traiter les données envoyées par le serveur dans votre application Flex.
Flex 4 propose trois méthodes pour accéder à des données côté serveur:

• HTTPService,( http://www.flex-tutorial.fr/2008/06/24/flex-httpservice-envoyer-des-requetes-et-traiter-le-resultat-exemple/)
• WebService (http://www.flex-tutorial.fr/2008/06/25/flex-webservice-en-mxml-envoyer-des-requetes-et-traiter-le-resultat-exemple/)
• RemoteObject

Dans ce tutoriel nous allons nous concentrer sur la méthode d'accès aux données HTTPService. Nous allons apprendre à l'utiliser en conjonction avec les Servlet sur le serveur pour envoyer et récupérer des résultats dynamiques dans votre application Flex.

Nous allons discuter du format léger d'échange de donnée JSON (JavaScript Object Notation) (http://json.org/jsonfr.html) qui peut être utilisé pour envoyer et récupérer des données sur HTTP à partir d'une application Flex à une Servlet Java.
Typiquement, une Servlet est utilisée pour créer dynamiquement des données, et en retournant la présentation du code HTML / une page HTML qui est rendue par votre navigateur Web. Mais dans ce tutoriel, vous apprendrez comment utiliser une Servlet pour construire des résultats dynamiques et retourner un objet JSON au lieu du code HTML, ainsi que comprendre comment la classe HTTPService peuvent être utilisée pour charger des données JSON.
Dans l’exemple suivant, nous allons utiliser certaines bibliothèques tierces open source pour coder et décoder des objets JSON en Flex et Java.

• Json-lib (http://json-lib.sourceforge.net/) : est une bibliothèque Java open source pour l'encodage et le décodage des objets JSON en Java.

JSON-lib nécessite (au moins) les dépendances suivantes dans votre classpath:

• jakarta commons-lang 2.5
• jakarta commons-beanutils 1.8.0
• jakarta commons-collections 3.2.1
• jakarta commons-logging 1.1.1
• ezmorph 1.0.6

En plus de ces librairies Java, vous aurez besoin d'une librairie pour votre projet Flex:

• as3corelib (https://github.com/mikechambers/as3corelib): est une bibliothèque open source ActionScript pour l'encodage et le décodage des objets JSON en Flex /ActionScript

Ici, je suppose que vous savez créer un projet Web Java et ajoutez la bibliothèque Json-lib ainsi que les dépendances dont elle a besoin à votre projet dans Eclipse, ou dans votre IDE préféré. Une fois que vous avez copié le fichier JAR json-slib dans votre projet, commencez à écrire le code Java Servlet suivant et de le déployer sur votre serveur web.

Vous pouvez bien sûr utiliser des systèmes de résolution de dépendances comme Maven

Notez que vous devrez spécifier l'adresse du serveur web comme l'url de votre HTTPService dans le code MXML.
Nous allons commencer avec l'écriture JSONService.java :

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;

/**
 *
 * @author dell
 */
public class JSONService extends HttpServlet {

    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            JSONObject obj = new JSONObject();

            obj.put("titre", "Titre1");
            obj.put("pages", new Integer(300));
            obj.put("prix", new Double(99.99));
            obj.put("disponibilité", new Boolean(true));
            obj.put("description", "Description1");
            out.println(obj.toString());
        } finally {
            out.close();
        }
    }

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /**
     * Handles the HTTP <code>GET</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP <code>POST</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

Dans le code ci-dessus JSONService.java, nous avons créé un JsonObject fournis par la bibliothèque json-lib et nous avons modifié ses propriétés en utilisant les différents obj.put (Object, Object). Enfin, nous avons écrit notre JsonObject dans la sortie de notre Servlet.

Ensuite, nous allons écrire le code MXML Flex, qui va utiliser HTTPService pour invoquer la servlet qui construit et renvoie un objet JSON. Mais avant cela nous allons devoir copier le fichier as3corelib.swc dans le dossier de notre projet libs. Cela garantit que toutes les classes JSON API seront disponibles lors de la compilation. Donc, assurez-vous que vous avez téléchargé As3corelib partir de l'URL spécifiée ci-dessus.

Code MXML :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="httpSrv.send()">
	<fx:Script>
		<![CDATA[
			import com.adobe.serialization.json.JSONDecoder;

			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;

			protected function httpSrv_resultHandler(event:ResultEvent):void
			{
				var jd:JSONDecoder = new JSONDecoder(String(event.result),true);
				dgGrid.dataProvider = jd.getValue();

			}

			protected function httpSrv_faultHandler(event:FaultEvent):void
			{
				Alert.show(event.fault.message);

			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:HTTPService id="httpSrv"
						url="http://localhost:8080/JsonExemple/JSONService"
						result="httpSrv_resultHandler(event)"
						fault="httpSrv_faultHandler(event)"/>
	</fx:Declarations>
	<mx:DataGrid id="dgGrid" width="100%" height="100%"/>

</s:Application>

Dans le code ci-dessus, nous avons défini HTTPService avec la propriété url mis au fichier JSONService.java déployé sur notre serveur web. Vous pouvez modifier cette valeur pour correspondre à l'adresse de votre serveur Web. Nous gérons l'événement résultat de HTTPService via la méthode gestionnaire d'événement httpSrv_resultHandler().  Dans cette méthode, nous avons créé un objetJSONDecoder ActionScript (provenant de la bibliothèque d’as3corelib open source).

La classe JSONDecoder lit le résultat de HTTPService et le décode en un objet ActionScript en utilisant la méthode getValue (). Cette méthode renvoie un objet, que l'on peut définir comme dataProvider du composant DataGrid. Nous invoquons le service HTTP par la méthode httpSrv.send() qui est appelée sur l’évènement creationComplete de notre application.

Conclusion

Ce tutorial présente la manière la plus simpliste de faire communiquer une Servlet et une application Flex. Bien sûr dans un cas concret, on se connecterait à une base de données et on construirait nos objets JSON à la volée.
Dans un prochaine tutoriel je montrerai comment envoyer des paramétrés depuis Flex vers la servlet en utilisant des collections Java pour stocker ces valeurs au lieu d'une base de données.

<?xml version="1.0" encoding="utf-8"?>
<spark:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:spark="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   initialize="onInit()">

  <fx:Declarations>

  </fx:Declarations>

  <fx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;

      [Bindable]
      private var sharePointList:ArrayCollection;

      private function onInit():void
      {
      }

      private function searchItems():void
      {
      }

      private function searchResultHandler(event:ResultEvent):void
      {
      }

      private function faultHandler(event:FaultEvent):void
      {
        Alert.show(event.fault.message, "Warning");
      }

      private function updateItemResultHandler(event:ResultEvent):void
      {
      }
    ]]>
  </fx:Script>
  <spark:VGroup horizontalAlign="left">
    <spark:VGroup horizontalAlign="right">
      <mx:Form labelWidth="100" paddingRight="0" paddingBottom="0">
        <mx:FormItem label="Site Address">
          <spark:Label text="{siteAddress}"/>
        </mx:FormItem>
        <mx:FormItem label="List GUID">
          <spark:TextInput id="list" width="300"/>
        </mx:FormItem>
        <mx:FormItem label="View GUID">
          <spark:TextInput id="view" width="300"/>
        </mx:FormItem>
      </mx:Form>
      <spark:Button label="search" click="searchItems()"/>
    </spark:VGroup>

    <mx:DataGrid id="allItems" dataProvider="{sharePointList}" width="100%">
      <mx:columns>
        <mx:DataGridColumn dataField="ows_ID"       headerText="Id"       width="15"/>
        <mx:DataGridColumn dataField="ows_Title"    headerText="Title"    width="90"/>
        <mx:DataGridColumn dataField="ows_Modified" headerText="Modified" width="50"/>
      </mx:columns>
    </mx:DataGrid>

  </spark:VGroup>
</spark:Application>