![\"webapipage\"](\"http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2016\/03\/webapipage.png\")
<\/a><\/p>\nAnd here is the javascript code that allows is to get the list of customers and save a customer<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
$(function()\r\n{\r\n $.getJSON('\/api\/customer', function(customersJsonPayload)\r\n {\r\n $(customersJsonPayload).each(function(i, item)\r\n {\r\n $('#customers').append('<li>' + item.Name + '<\/li>');\r\n });\r\n });\r\n});\r\n\r\n$('#saveCustomer').click(function () {\r\n $.post(\"api\/customer\",\r\n $(\"#saveCustomerForm\").serialize(),\r\n function (value) {\r\n $('#customers').append('<li>' + value.Name + '<\/li>');\r\n },\r\n \"json\"\r\n );\r\n});\r\n<\/pre>\nthis all works fine of course and is not the part we are really interested in.<\/p>\n
What is interesting is how can we call a RESTful web service from a DataFlex application<\/p>\n
As mentioned earlier RESTful web services simply use the HTTP protocol. DataFlex has the cHTTPTransfer class that can be use to call RESTful services<\/p>\n
so in our test view we can simple use the cHTTPTransfer package and create an object based on the class as follows<\/p>\n
Use Windows.pkg\r\nUse DFClient.pkg\r\nUse cHttpTransfer.pkg\r\n\r\nDeferred_View Activate_oWebAPITest for ;\r\nObject oWebAPITest is a dbView\r\n\r\n Set Border_Style to Border_Thick\r\n Set Size to 200 300\r\n Set Location to 2 2\r\n Set Label to \"Web API Test\"\r\n \r\n Object oHTTPTransfer is a cHttpTransfer \r\n Set psRemoteHost to \"localhost\"\r\n Set piRemotePort to 60387\r\n Set pbShowErrorDialog to True\r\n End_Object\r\n<\/pre>\nWe have to set the psRemoteHost property to the host name or ip address of the server the web service is running on. In our case we are using a local Visual Studio service so the psRemoteHost is localhost and the piRemotePort is 60387. The port also depends on your \u00a0service and could be 80 for the standard HTTP port or anything the service publisher uses to publish the service.<\/p>\n
The way the cHTTPTransfer class works is that it has an event called OnDataReceived that is called when data is returned from the server. So we have to implement this event<\/p>\n
Object oHTTPTransfer is a cHttpTransfer \r\n Set psRemoteHost to \"localhost\"\r\n Set piRemotePort to 60387\r\n Set pbShowErrorDialog to True\r\n \r\n Procedure OnDataReceived String sContentType String sData\r\n Showln sContentType \r\n Showln \"-----------------------------------------------\"\r\n Showln sData\r\n Showln \"-----------------------------------------------\"\r\n \r\n End_Procedure\r\n End_Object<\/pre>\nwe simply show the content type and the data<\/p>\n
Now lets see what it takes to call the GET verb to get all the customers<\/p>\n
Lets add a button and\u00a0add the following code to the OnClick procedure<\/p>\n
Procedure OnClick\r\n Integer iRetVal\r\n Get HttpGetRequest of oHTTPTransfer \"\/api\/customer\" to iRetVal\r\nEnd_Procedure<\/pre>\nThis will call the url \/api\/customer with GET request which in turn will then call the OnDataReceived event<\/p>\n
Here is the data we receive back<\/p>\n
![\"webapigetshowln\"](\"http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2016\/03\/webapigetshowln.png\")
<\/a><\/p>\nthe data type received is a JSON data type (application\/json)<\/p>\n
the data itself is as follows<\/p>\n
[\r\n {\r\n \"Id\":1,\r\n \"Name\":\"StarZen Technologies, Inc\"\r\n },\r\n {\r\n \"Id\":2,\r\n \"Name\":\"Palms West Photo\"\r\n }\r\n]\r\n<\/pre>\nwhich is essentially a JSON array containing two customer records with each having an Id and a Name field<\/p>\n
All we have to do now is to parse the JSON data and use it in our application<\/p>\n
Now what if we wanted to save a new customer. This would require the use of a POST. In our simple example we used a standard web form with a POST request.<\/p>\n
We can do the same from DataFlex<\/p>\n
Lets add two forms and a button as follows<\/p>\n