|
Advertisement |
FLEX CLIENT PROGRAMS FOR ASP.NET, JSP & PHP & JAVA WEBSERVICE / DOTNET WEBSERVICE
Posted On April 3, 2012 by Geeta Priya filed under
Nowadays a web application can be in the form of web services. We have three traditional web applications such as JSP, PHP & ASP.Net. As like the traditional application, web services can be done in two approaches such as JAVA and DOTNET. These both are server -side applications.
But now, we require RIA(Rich Internet Application) at client side. That RIA can be of two types as follows:
1.AJAX based
2.FLEX based
In the previous issue, Ajax based clients was discussed in detail. Now, I am going to show how to work with flex based clients.
I am going to give 5 demonstrations here,
1.demo1 - flex client for ASP.Net
2.demo2 - flex client for JSP
3.demo3 - flex client for PHP
4.demo4 - flex client
for JAVA webservice
5.demo5 - flex client
for DOTNET webservice
The specialty of FLEX is that, it has several ready-made methods for HTTPservices and for webservices too. The syntax of both will be almost the same. So, we should be very careful while working with it.
The ASP.Net and JSP will be complied at server side. So, it will take time to get response when we are executing it for first time.
------------------
First, we have to install FLEX software development kit in our machine. I have installed it in C:\
My working folder is named as flexdemos. All my files are present at e:\flexdemos.
All my client programs are present at c:\xampp\htdocs\flexclients
(NOTE:All client programs resembles same. The only difference is that the URL of each program)
JSP
====
I begin with JSP.
We are going to use querybean in our JSP. If we use bean in our JSP, the package is mandatory.
Unlike AJAX, FLEX is like an applet GUI. So, we have to use newline("\n") instead of break("<br>").
In JSP, there is no difference between for get or post.
querybean.java
package mypack;
import java.sql.*;
public class querybean
{
public String
getrecords(String sql)
{
String r = "";
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url = "jdbc:odbc:keynameplace";
Connection connection= DriverManager.getConnection(url);
Statement statement = connection.createStatement();
ResultSet rs = statement.executeQuery(sql);
while(rs.next())
{
r = r + rs.getString(1) + "\n"
+ rs.getString(2) + "\n"
+ rs.getString(3) + "\n"
+"..............."+ "\n";
}
}
catch(Exception e1) { r = ""+e1 ; }
return r;
}
}
======
This is only the usual. Now we have to compile it and place the bean class file(querybean.class)in
e:\tomcat5\webapps\root\WEB-INF\
classes\mypack.
===========================
// queryjsp.jsp
<jsp:useBean id='bean1' class='mypack.querybean'/>
<%
String a= request.getParameter("text1");
String r = bean1.getrecords(a);
out.println(r);
%>
=============================
We have to place the JSP file(queryjsp.jsp) in
e:\tomcat5\webapps\root\flexer folder.
// queryjsp.mxml
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" >
<mx:HTTPService id='service1'
resultFormat='text'
url='http://localhost:8080/flexer/
queryjsp.jsp' >
<mx:request>
<text1>
{text1.text}
</text1>
</mx:request>
</mx:HTTPService>
<mx:Button label="send"
click="service1.send();
area1.text='sent' " />
<mx:TextInput id='text1' />
<mx:TextArea id="area1" width='200' height='300' />
<mx:Button label="show result"
click="area1.text=String(service1.lastResult)"/>
</mx:Application>
Before compiling set the path as
set path=c:\windows\system32;
c:\jdk1.5\bin;c:\flex2\bin
The flexclient program (queryjsp.mxml)is now compiled by using the command
f:\flexdemos>mxmlc queryjsp.mxml.
Now we will get a file with an extension queryjsp.swf.This file is now copied to c:\xampp\htdocs\flexclients.
Start tomcat5.
Now, in the browser window type the url as http://localhost/
flexclients/queryjsp.swf.
(xampp server is running by default.
We are browsing a file in that server and not tomcat5. So the port number is 80 (default) Need not mention it.)
The resulting screen is shown in screen-1. Give attention to the URL in the screen shot.
(screen-1)
ASP.Net
Unlike JSP, Servlet, PHP & ASP.Net have different syntax for collecting data, for GET method and for POST method. So, we should be careful in handling with that syntax. I observed that GET method works smoothly for Flex clients.
//queryaspxget.aspx
<%@ Page Language="c#" Debug="true" %>
<%@ import Namespace="System.Data" %>
<%@ import Namespace="System.Data.OleDb" %>
<%
String s1 =
"Provider=Microsoft.JET.OLEDB.4.0;data source=g://keynameplace.mdb";
OleDbConnection connection=
new OleDbConnection(s1);
connection.Open();
String s2 = Request.QueryString["text1"]; // GET
OleDbCommand command =
new OleDbCommand(s2,connection);
OleDbDataReader rs = command.ExecuteReader();
String r = "";
while(rs.Read())
{
r = r+rs[0]+"\n"+
rs[1]+"\n"+
rs[2]+"\n"+
"-------"+"\n";
}
Response.Write(r);
%>
==============================
The above mentioned aspx file(queryaspxget.aspx) is placed in g:\matrix\root\flexer folder.
One important point we have remember here is FLEX and AJAX will work reliably only in GET method.
That is why I am using
Request.QueryString["text1"];
( note the square bracket).
If I had used POST method, it would have been
Request.Form["text1"];
------------------------------------
//queryaspx.mxml
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" >
<mx:HTTPService id='service1'
resultFormat='text'
url='http://localhost:8000/flexer/
queryaspxget.aspx' >
<mx:request>
<text1>
{text1.text}
</text1>
</mx:request>
</mx:HTTPService>
<mx:Button label="send"
click="service1.send();
area1.text='sent' " />
<mx:TextInput id='text1' />
<mx:TextArea id="area1" width='200' height='300' />
<mx:Button label="show result"
click="area1.text=String(service1.lastResult)"/>
</mx:Application>
===================================
Compile the queryaspx.mxml file.
After compiling copy the queryaspx.swf file to c:\xampp\htdocs\flexclients.
Start Tomcat5
Now,in the browser window type the URL as http://localhost/flexclients/queryaspx.swf
(screen-2)
PHP
//querygetflex.php
<?php
$db=mysql_connect("localhost","root","");
mysql_select_db("ourcontacts");
$a = $_GET['text1'];
$sql=str_replace("\'","'",$a);
// very important
$result=mysql_query($sql);
$n = mysql_num_rows($result);
if ( $n == 0) { print "no records ";}
for($j=0; $j<$n; $j++)
{
$row=mysql_fetch_array($result);
echo $row[0];
echo "\n";
echo $row[1];
echo "\n";
echo $row[2];
echo "\n";
echo "-----------";
echo "\n";
}
?>
=====================
//queryphp.mxml
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" >
<mx:HTTPService id='service1'
resultFormat='text'
url=
'http://localhost/dbdemos/
querygetflex.php' >
<mx:request>
<text1>
{text1.text}
</text1>
</mx:request>
</mx:HTTPService>
<mx:Button label="send"
click="service1.send();
area1.text='sent' " />
<mx:TextInput id='text1' />
<mx:TextArea id="area1" width='200' height='300' />
<mx:Button label="show result"
click="area1.text=String(service1.lastResult)"/>
</mx:Application>
===============================
Compile the queryphp.mxml file.
After compiling copy the queryaspx.swf file to c:\xampp\htdocs\flexclients.
Start tomcat5.
Now, in the browser window type the URL as http://localhost/flexclients/queryphp.swf
(screen-3).
Thus, we find that all normal web applications like JSP, ASP.NET and PHP have almost the same Flex Client file, the only difference is the URL of the web side application.
====================================
I will now give a brief note on Flex client for WebService.
Flex has a separate class for WebService, distinct from HTTPService.
We can easily create a Java Webservice in Axis by Drop-in-Deployment.
Just place javabean source file with extension ".jws" in Tomcat5\webapps\axis folder.
Start Tomcat5.
In the browser window type the URL as http://localhost:8080/axis/
querybean.jws?wsdl
The URL mentioned above is known as End-point URL
The great merit of Flex is that we can simply invoke the service directly by mentioning this as URL.
(as shown in the following mxml file).
//axisquery.mxml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:WebService id='service1'
wsdl="http://localhost:8080/axis/
querybean.jws?WSDL">
<mx:operation name="getrecords">
<mx:request>
<s>
{ text1.text }
</s>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Button label="send"
click="service1.getrecords();
area1.text='sent';"/>
<mx:TextInput id="text1" />
<mx:TextArea id="area1" width='300' height='400' />
<mx:Button label="show result"
click="area1.text=String(service1.getrecords.lastResult)"/>
</mx:Application>
=============
Now compile the mxml file.
Place the obtaine axisquery.swf into c:\xampp\htdocs\flexclients.
In the browser window type the URL as http://localhost/flexclients/axisquery.swf
(screen-4)
Now lets see how to use Flexclient in DOTNET webservice.
It is always better use our function bean in asmx rather than in aspx, because we can use the asmx file from any platform like PHP.
// query.asmx in
g:\matrix\root\flexer
<%@ webservice Language="c#" class='query' %>
using System;
using System.Data;
using System.Web.Services;
using System.Data.OleDb;
[WebService (Namespace="http://localhost/") ]
public class query : WebService
{
[WebMethod()]
public String
getdata(String sql)
{
String s1=
"Provider=Microsoft.JET.OLEDB.4.0;data source=g:\\keynameplace.mdb";
OleDbConnection connection=
new OleDbConnection(s1);
connection.Open();
OleDbCommand command = new OleDbCommand(sql,connection);
OleDbDataReader reader = command.ExecuteReader();
String r="";
while(reader.Read())
{
r = r+ reader[0].ToString()+"\n"+
reader[1].ToString()+"\n"+
reader[2].ToString()+"\n"+
"-----------"+"\n";
}
connection.Close();
return r;
}
}
Now we are going to test the service by typing the URL as http://localhost:8000/flexer/
query.asmx?wsdl
//matrixquery.mxml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:WebService id='service1'
wsdl='http://localhost:8000/flexer/
query.asmx?wsdl' >
<mx:operation name='getdata' >
<mx:request>
<sql>
{text1.text}
</sql>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Button label="send"
click="service1.getdata();
area1.text='sent' " />
<mx:TextInput id='text1' />
<mx:TextArea id="area1" width='200' height='300' />
<mx:Button label="show result"
click="area1.text=String(service1.getdata.lastResult)"/>
</mx:Application>
=============================
Now compile the mxml file.
Copy the matrixquery.swf file to
c:\xampp\htdocs\flexclients
Start Matrix server.
In the browser window type the URL as http://localhost/flexclients/
matrixquery.swf
(Screen-5)
-------------
While j2ee and DotNet are used for creating XMLWebService, PHP WEBSERVICE is not common. PHP is really elegant as a client for WebService but clumsy for creating WebService.
That completes the article on Flex Clients for various WebServer Technologies.
justin p commented, on April 3, 2012 at 5:32 p.m.:
scroll bars not working if i set the minWidth and minHeight properties on application, how to solve this problem?