2009年7月15日 星期三

JSP read GAE&JDO

基本上是GAE&JDO by XMLHttpRequest()
這一篇的延伸

主要差異就是結合javascript 和 JSP 來讀取 JDO 的資料


在此設定如下

1. 在JDO中定一個資料表User 包含 Name 和 Content 兩個欄位
2. 建立一個JSP file " testIndex.jsp" , 記得修改 war/WEB-INF/web.xml 的 welcome-file-list 為 testIndex.jsp


其他就不贅述了 直接看看 testIndex.jsp 的結構, 記得要在head 之上 import 些定義好得class

以下會比較一下 testIndex.jsp 中 function show() 在server端撰寫 和編譯後的情況






Server CODE 如下

<%@ page contentType="text/html; charset=Big5" import="java.io.*" pageEncoding="Big5" %>

<%@ page import="jsp.jdo.*" %> <%@ page import="jsp.jdo.User" %> <%@ page import="javax.jdo.PersistenceManager" %> <%@ page import="java.util.List" %>

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=charset=big5">

<title>JSP read JDO file</title>

<script type="text/javascript">




// --------------------------------------------------------- // set httprequest by explorer // ---------------------------------------------------------
XmlsReq = false;
if(window.XMLHttpRequest) {
XmlsReq = new XMLHttpRequest(); // common
} else if(window.ActiveXObject) {
try {
XmlsReq = new ActiveXObject("Msxml2.XMLHTTP"); // ie
} catch(e) {
XmlsReq = new ActiveXObject("Microsoft.XMLHTTP"); // ie
}
}


// --------------------------------------------------------- // Add Http request to add user information // ---------------------------------------------------------
function PostHttpRequestAdd() {
var uri='add';
XmlsReq.onreadystatechange=function() {
if (XmlsReq.readyState==4 && XmlsReq.status == 200) {
alert(XmlsReq.responseText);
}
}


var aUserName = document.getElementById('aUserName').value;
var aUserContent= document.getElementById('aUserContent').value;


var param = "aUserName="+aUserName+"&aUserContent="+aUserContent;

XmlsReq.open("POST",uri,true);
XmlsReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XmlsReq.send(param);
}




// ---------------------------------------------------------
// Show the all User in the JDO File by JSP
// ---------------------------------------------------------
function Show() {
var TempString ;
var Size;
<%
/// get Persistence Manager
PersistenceManager pm = PMF.get().getPersistenceManager();
/// set query String
String query = "select from " + User.class.getName() ;
/// start query
ist<User> userAll = (List<User>) pm.newQuery(query).execute();
if(userAll.isEmpty()){
%>
alert("The User has no Item");
<%
}
else { %> Size = <%= userAll.size() %> ;
TempString = new Array(Size);
for(var i = 0; i < Size; i++)  
TempString[i] = new Array(2);
<%
for (int i=0;i<userAll.size();i++) {
%>
// save in TempString
// userAll.get(i).GetName() 回傳字串,但javascript 字串要放在雙引號內""
TempString[<%= i %>][0]="<%= userAll.get(i).GetName() %>";
TempString[<%= i %>][1]="<%= userAll.get(i).GetContent() %>";
<%
}
}
%>
alert(TempString[3][1]);
}



</script>


</head>




<body>
<h2>讀取JDO File </h2><hr>


<table>
<tr>
<td colspan="2" style="font-weight:bold;">Available Servlets:</td>
</tr>
<tr>
<td><a href="jspjdo"/>jspJDOServlet</td>
</tr>

<tr>
<td colspan="2" style="font-weight:bold;">Add function:</td>
</tr>
<tr>
<td>

請輸入姓名:
<input type=text Id="aUserName">
請輸入Content:
<input type=text Id="aUserContent">

<input type=submit value="確定新增" onclick="PostHttpRequestAdd()">

</td>
</tr>

<tr>
<td colspan="2" style="font-weight:bold;">Show all user:</td>
</tr>
<tr>
<td>
<input type=submit value="顯示所有使用者" onclick="Show()">
</td>
</tr>


</table>

</body>
</html>




Show function 編譯後
// ---------------------------------------------------------
// Show the all User in the JDO File by JSP
// ---------------------------------------------------------
function Show() {

var TempString ;

var Size;

Size = 5 ;

TempString = new Array(Size);
for(var i = 0; i < style="color: rgb(0, 102, 0);">
// save in TempString
// userAll.get(i).GetName() 回傳字串,但javascript 字串要放在雙引號內""

TempString[0][0]="null";
TempString[0][1]="null";

// save in TempString // userAll.get(i).GetName() 回傳字串,但javascript 字串要放在雙引號內""

TempString[1][0]="null";
TempString[1][1]="null";

// save in TempString // userAll.get(i).GetName() 回傳字串,但javascript 字串要放在雙引號內""

TempString[2][0]="dg";
TempString[2][1]="gg";
// save in TempString // userAll.get(i).GetName() 回傳字串,但javascript 字串要放在雙引號內""

TempString[3][0]="gg";
TempString[3][1]="hh";

// save in TempString // userAll.get(i).GetName() 回傳字串,但javascript 字串要放在雙引號內""

TempString[4][0]="gfjj";
TempString[4][1]="ll";

alert(TempString[3][1]);
}




但可惜的是目前無法將 含有jsp file 的 檔案無放上傳到 google app engine....
可參考 這個議題



jsp 教學可參考
http://caterpillar.onlyfun.net/Gossip/JSPServlet/JSPServlet.htm

1 則留言:

Cc 提到...

關於 含有jsp file 的 檔案無放上傳到 google app engine....

更新到 GAE 的 plugin 1.2.2 後ok
(之前是用1.2.0 版)