Flex - Layanan RPC

Flex menyediakan layanan RPC untuk menyediakan data sisi server ke sisi klien. Flex memberikan cukup banyak kontrol ke data sisi server.

  • Dengan menggunakan layanan Flex RPC, kita dapat menentukan tindakan pengguna yang akan dijalankan di sisi server.

  • Layanan Flex RPC dapat diintegrasikan dengan teknologi sisi server apa pun.

  • Salah satu Layanan RPC Flex menyediakan dukungan bawaan untuk data biner terkompresi yang akan ditransfer melalui kabel dan cukup cepat.

Flex menyediakan tiga jenis Layanan RPC berikut

Sr Tidak Layanan & Deskripsi RPC
1

HttpService

Tag <mx: HTTPService> digunakan untuk mewakili objek HTTPService dalam file MXML. Saat Anda melakukan panggilan ke metode send () objek HTTPService, itu membuat permintaan HTTP ke URL yang ditentukan, dan respons HTTP dikembalikan. Anda juga dapat menggunakan metode HTTP HEAD, OPTIONS, TRACE, dan DELETE.

2

WebService

<Mx: WebService> digunakan untuk mendapatkan akses ke operasi layanan web yang sesuai dengan SOAP.

3

RemoteObject

Tag <mx: RemoteObject> digunakan untuk mewakili objek HTTPService dalam file MXML. Tag ini memberi Anda akses ke metode objek Java menggunakan pengkodean Action Message Format (AMF).

Kami akan membahas Layanan HTTP secara rinci. Kami akan menggunakan file sumber XML yang ditempatkan di server dan mengaksesnya di sisi klien melalui Layanan HTTP.

Items.xml

<items>
   <item name = "Book" description = "History of France"></item>
   <item name = "Pen" description = "Parker Pen"></item>
   <item name = "Pencil" description = "Stationary"></item>
<items>

Deklarasi HTTPService

Sekarang deklarasikan HTTPService dan berikan url dari file di atas

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>

Panggilan RPC

Lakukan panggilan ke metode itemRequest.send () dan ikat nilai dari objek lastResult webservice itemRequest ke komponen Flex UI.

...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
   dataProvider = "{itemRequest.lastResult.items.item}">
   <mx:columns>
      <mx:DataGridColumn headerText = "Name" dataField = "name" />
      <mx:DataGridColumn headerText = "Description" dataField = "description" />
   </mx:columns>
</mx:DataGrid>

Contoh Panggilan Layanan RPC

Sekarang, Mari kita ikuti langkah-langkah untuk menguji layanan RPC dalam aplikasi Flex -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga sisa file tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file mxml yang dimodifikasi src/com.tutorialspoint/HelloWorld.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 = "500" minHeight = "500" creationComplete = "init(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.events.FlexEvent;
         import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;

         protected function init(event:FlexEvent):void {
            itemRequest.send();				
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <mx:HTTPService id = "itemRequest" 
         url = "http://www.tutorialspoint.com/flex/Items.xml" />
   </fx:Declarations>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "RPC Service Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "parentPanel" title = "Using RPC Services"  
            width = "500" height = "200" >
            <s:layout>
               <s:VerticalLayout  gap = "10" 
                  verticalAlign = "middle" horizontalAlign = "center" />
            </s:layout>						
            
            <mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
               dataProvider = "{itemRequest.lastResult.items.item}">
               
               <mx:columns>
                  <mx:DataGridColumn headerText = "Name" dataField = "name" />
                  <mx:DataGridColumn headerText = "Description" 
                     dataField = "description" />
               </mx:columns>
            </mx:DataGrid>
         </s:Panel>	
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]