GoogleWebToolkit和GoogleAppEngine综合教程.doc

Google Web Toolkit 和 Google App Engine 综合教程 启蒙篇2009年4月15日 由 KyleWu留言 什么是Google Web Toolkit 和 Google App Engine?Google Web Toolkit: 如今，编写网络应用程序是一个单调乏味且易于出错的过程。开发人员可能要花费 90% 的时间来处理浏览器行话。此外，构建、重复使用以及维护大量 JavaScript 代码库和 AJAX 组件可能困难且不可靠。Google Web 工具包 (GWT) 通过允许开发人员用 Java 编程语言快速构建和维护复杂但高性能的 JavaScript 前端应用程序来减轻该负担。Google App Engine: Google App Engine 使您可以在支持 Google 应用程序的同一可扩展系统上构建网络应用程序。上面是直接摘自Google Web Toolkit和Google App Engine的主页。总的来说，前者提供一个用Java编写Javascript的工具，后者提供一个网络平台，用户可以在上面搭建自己的应用。为什么要使用Google Web Toolkit 和 Google App Engine?首先，如Google一贯作风，两者都是免费的，是下的项目。其次，Google App Engine开始支持Java，这样，两个工具在一起使用更加方便了。当然，熟悉了Google Web Toolkit有助于开发JavaScript，了解Google App Engine可以在网上搭建自己的应用。最后，学习新技术是提升自己的途径，能够开阔自己的眼界，锻炼自己的思想。如何获得Google Web Toolkit 和 Google App Engine?我推荐最简单的方法就是去下载Eclipse插件。具体的方法请Google或者baidu，有空的话我会再写一篇介绍的文章。如何使用Google Web Toolkit 和 Google App Engine?Google Web Toolkit和Google App Engine都有各自的教程，喜欢看的可以看一下。当然在这里就不是仅仅翻译一下教程了，我将带领大家来构建一个Google Web Toolkit和Google App Engine整合的应用。最近我总是有一些想法或者创意，可总是没时间实现，这样时间一长，就忘记了，所以我想写一个列表，这样，每当我有新的想法，那么我就可以记录下来，以后就可以回顾，看看自己都想了什么都做了什么上面就是我问什么做这个应用的原因，东西十分的简单，其实主要还是希望能够与大家一同入门，熟悉Google Web Toolkit和Google App Engine的开发。好了废话不多说了，开始吧，这个教程最终的结果见这里。Google Web Toolkit 和 Google App Engine 综合教程 界面篇2009年4月15日 由 KyleWu留言 诸位还不清楚Google Web Toolkit和Google App Engine是什么的同学，请移步这里，看我的综合教程 启蒙篇。请装好Eclipse的插件，后面的程序都是以插件为准，用命令行的同学请自己注意。创建Eclipse工程点击最左面的小图标就开始创建新的Web应用。我这里创建了一个名为kylewuidea的Project，包设为net.kylewu.idea，我们这里要同时使用Google Web Toolkit 和 Google App Engine，所以两个都要选择支持。确认后可以看到Eclipse为我们创建好了整个Project，结构见图。Google Web Toolkit 部分打开Kylewuidea.java，里面已经写好了一个事例程序，有兴趣的同学可以先熟悉一下。接下来删除这个文件里多余的代码，仅保留下面这些。12345678910111213141516packagenet.kylewu.idea.client;importcom.google.gwt.core.client.EntryPoint;/* Entry point classes define onModuleLoad().*/publicclassKylewuideaimplementsEntryPoint /* * This is the entry point method. */ publicvoidonModuleLoad() 下面我们就要往里面填东西了，同学们来看一下页面的结构，一个表格，包括了IdeaId，Idea主题，Idea详情，Idea完成进度及完成时间，按钮，备注。最后有一个添加Idea按钮，用来加入Idea。结构清晰了，就来写代码吧。12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849packagenet.kylewu.idea.client;importcom.google.gwt.core.client.EntryPoint;importcom.google.gwt.user.client.ui.Button;importcom.google.gwt.user.client.ui.DialogBox;importcom.google.gwt.user.client.ui.FlexTable;importcom.google.gwt.user.client.ui.ListBox;importcom.google.gwt.user.client.ui.Panel;importcom.google.gwt.user.client.ui.RootPanel;importcom.google.gwt.user.client.ui.TextArea;importcom.google.gwt.user.client.ui.TextBox;importcom.google.gwt.user.client.ui.VerticalPanel;/* Entry point classes define onModuleLoad().*/publicclassKylewuideaimplementsEntryPoint privateFlexTable table=newFlexTable(); /* * This is the entry point method. */ publicvoidonModuleLoad() / Initial all items. init(); / Add table to html page. RootPanel.get(idea).add(createBasePanel(); / Initial table. importFromDatabase(); privatevoidinit() / TODO Initial table structure. / TODO Set table attribute. privatevoidimportFromDatabase() / TODO Add initial data to table or get from database. privatePanelcreateBasePanel() / Base Panel of this project. VerticalPanel mainPanel=newVerticalPanel(); / TODO Add click handler to add button. / TODO Assemble the panel. returnmainPanel; onModuleLoad()方法就是程序的入口，这里我们写了一下初始化的代码。我在这里是直接写成方法了，这样看入口感觉清爽一些。写Google Web Toolkit的代码与写普通Java界面很相似，在Panel里加入一些组件。这里要注意，RootPanel.get()方法得到的就是HTML页面中的某个元素，也就是我们的最上级容器。在这里我get名为idea的panel，那么它到底在什么地方呢？打开war/Kylewuidea.html，删除body内除iframe的所有内容，改为如下代码。1Kyle Wus Idea看到了么，我们将一个div命名为idea，这样我们Project都会在这个div标签下，当然，你也可以get到其他的元素。到这里页面中还没有任何元素，下面任务很简单了。点击添加Idea的按钮，弹出一个对话框，可以填入主题和详情等。当我们点击添加Idea的时候，一条新的Idea将显示在表格中。对于每条idea，都需要更新或者删除，功能应该不难了吧，同学们可以自己写写看。Google Web Toolkit 的任务差不多了，让我们看看最后的代码。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256packagenet.kylewu.idea.client;importjava.util.ArrayList;importjava.util.HashMap;importjava.util.Map;importnet.kylewu.idea.client.service.DBWorkerService;importnet.kylewu.idea.client.service.DBWorkerServiceAsync;importcom.google.gwt.core.client.EntryPoint;importcom.google.gwt.core.client.GWT;importcom.google.gwt.event.dom.client.ClickEvent;importcom.google.gwt.event.dom.client.ClickHandler;importcom.google.gwt.user.client.rpc.AsyncCallback;importcom.google.gwt.user.client.ui.Button;importcom.google.gwt.user.client.ui.DialogBox;importcom.google.gwt.user.client.ui.FlexTable;importcom.google.gwt.user.client.ui.HasHorizontalAlignment;importcom.google.gwt.user.client.ui.HasVerticalAlignment;importcom.google.gwt.user.client.ui.HorizontalPanel;importcom.google.gwt.user.client.ui.ListBox;importcom.google.gwt.user.client.ui.Panel;importcom.google.gwt.user.client.ui.RootPanel;importcom.google.gwt.user.client.ui.TextArea;importcom.google.gwt.user.client.ui.TextBox;importcom.google.gwt.user.client.ui.VerticalPanel;/* Entry point classes define onModuleLoad().*/publicclassKylewuideaimplementsEntryPoint privatefinalintCOL_ID=0; privatefinalintCOL_SUBJECT=1; privatefinalintCOL_DETAIL=2; privatefinalintCOL_PROGRESS=3; privatefinalintCOL_TIME=4; privatefinalintCOL_OPERATION=5; privateFlexTable table=newFlexTable(); privateArrayListsubjectList=newArrayList(); privateMapmapStrToInt=newHashMap(); privateMapmapIntToStr=newHashMap(); /* * This is the entry point method. */ publicvoidonModuleLoad() / Initial all items. init(); / Add table to html page. RootPanel.get(ideastorm).add(createBasePanel(); / Initial table. importFromDatabase(); privatevoidinit() mapStrToInt.put(0%, 0); mapStrToInt.put(25%, 1); mapStrToInt.put(50%, 2); mapStrToInt.put(75%, 3); mapStrToInt.put(100%, 4); mapIntToStr.put(0,0%); mapIntToStr.put(1,25%); mapIntToStr.put(2,50%); mapIntToStr.put(3,75); mapIntToStr.put(4,100%); / Initial table structure. table.setText(0, COL_ID,ID); table.setText(0, COL_SUBJECT,Subject); table.setText(0, COL_DETAIL,Detail); table.setText(0, COL_PROGRESS,Progress); table.setText(0, COL_OPERATION,Operation); table.setText(0, COL_TIME,Time); / Set table attribute. table.setCellPadding(5); table.getColumnFormatter().setWidth(0,10); table.getColumnFormatter().setWidth(1,200); table.getColumnFormatter().setWidth(2,400); table.getColumnFormatter().setWidth(3,150); table.getColumnFormatter().setWidth(4,100); /* * Initial table data */ privatevoidimportFromDatabase() / Get exist ideas from db /* * Create base panel * * return */ privatePanelcreateBasePanel() / Base Panel of this project. VerticalPanel mainPanel=newVerticalPanel(); ButtonbtnAdd=newButton(Add Idea); / Add click handler to add button. btnAdd.addClickHandler(newClickHandler() publicvoidonClick(ClickEvent event) / Show Add Idea Dialog showIdeaEditDialog(true,-1); ); / Assemble the panel. mainPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); mainPanel.add(table); mainPanel.add(btnAdd); returnmainPanel; /* * Show Add Idea Dialog */ privatevoidshowIdeaEditDialog(finalbooleanisNew,finalintindex) / Initial Add Idea Dialog. finalDialogBox dialog=newDialogBox(); finalTextBox txtBoxSubject=newTextBox(); finalTextAreatxtAreaDetail=newTextArea(); finalListBox listBox=newListBox(); VerticalPanel dialogPanel=newVerticalPanel(); HorizontalPanel itemPanel=newHorizontalPanel(); ButtonbtnInsert=newButton(); ButtonbtnClose=newButton(Close); / Set attribute. dialog.setText(Input your idea); dialog.setAnimationEnabled(true); txtAreaDetail.setSize(300,380); listBox.clear(); listBox.addItem(0%); listBox.addItem(25%); listBox.addItem(50%); listBox.addItem(75%); listBox.addItem(100%); listBox.setVisibleItemCount(5); if(isNew) btnInsert.setText(Insert); txtBoxSubject.setText(Input your indea); listBox.setSelectedIndex(0); else btnInsert.setText(Update); txtBoxSubject.setText(table.getText(index, COL_SUBJECT); txtAreaDetail.setText(table.getText(index, COL_DETAIL); listBox.setSelectedIndex(mapStrToInt.get(table.getText(index, COL_PROGRESS); if(table.getText(index, COL_PROGRESS).compareTo(100%)=0 ) listBox.setEnabled(false); / Add ClickHandler to Insert button btnInsert.addClickHandler(newClickHandler() publicvoidonClick(ClickEvent event) / Check empty if(txtBoxSubject.getText().length()=0 |txtAreaDetail.getText().length()=0) return; / Check exist if(subjectList.contains(txtBoxSubject.getText()=true &&isNew) return; insertIdeaIntoTable(index, txtBoxSubject.getText(), txtAreaDetail.getText(), mapIntToStr.get(listBox.getSelectedIndex(),); dialog.hide(); ); / Add ClickHandler to Close button btnClose.addClickHandler(newClickHandler() publicvoidonClick(ClickEvent event) dialog.hide(); ); / Assemble dialog panel. itemPanel.setWidth(100%); itemPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE); itemPanel.add(listBox); itemPanel.add(btnInsert); itemPanel.add(btnClose); dialogPanel.add(txtBoxSubject); dialogPanel.add(txtAreaDetail); dialogPanel.add(itemPanel); / Associate the dialog with the panel. dialog.setWidget(dialogPanel); / Show dialog. dialog.center(); privatevoidinsertIdeaIntoTable(intindex,finalStringid, finalStringsubject,Stringdetail,Stringprogress,Stringdate) / if(index=-1) index=table.getRowCount(); subjectList.add(subject); else subjectList.set(index-1, subject); HorizontalPanel panel=newHorizontalPanel(); ButtonbtnUpdate=newButton(Update); ButtonbtnRemove=newButton(Remove); / Add handler to buttons btnUpdate.addClickHandler(newClickHandler() Override publicvoidonClick(ClickEvent event) inti=subjectList.indexOf(subject); showIdeaEditDialog(false, i+1); ); btnRemove.addClickHandler(newClickHandler() Override publicvoidonClick(ClickEvent event) / Remove ); panel.add(btnUpdate); panel.add(btnRemove); table.setWidget(index, COL_OPERATION, panel); table.setText(index, COL_ID, id); table.setText(index, COL_SUBJECT, subject); table.setText(index, COL_DETAIL, detail); table.setText(index, COL_PROGRESS, progress); if(pareTo(100%)=0&&table.getText(index, COL_TIME).length()=0) table.setText(index, COL_TIME, date); 好奇的同学肯定会问，光写Google Web Toolkit 的东西了，怎么不见Google App Engine 呢？呵呵，不要着急，休息，休息一下：） 在下一篇里将介绍Google App Engine 在我们这个应用里如何帮助诸位同学把idea存储起来。Google Web Toolkit 和 Google App Engine 综合教程 存储篇2009年4月17日 由 KyleWu留言 前面已经向同学们简要介绍了Google Web Toolkit和Google App Engine，并且做出了一个初步的界面。在这篇教程里，我们将一起学习如何使用Google App Engine 的数据库。简单介绍Google App Engine 的数据库Google App Engine 的数据库提供了健壮的可扩展的分布式数据存储，我们不必考虑连接哪一个数据库，也不需要配置连接参数。我们需要做的是调用简单的API来进行各种操作。Google App Engine 的数据库提供了两套API ： 标准API和底层API。标准API是与App Engine解耦的，所以使用标准API你可以很方便的将你的应用移植到其他环境中；而是用底层API，你可以让你的应用拥有更好的性能。Google App Engine 支持两种连接数据库的标准： Java Data Objects (JDO) 和 Java Persistence API (JPA)。从Google App Engine 的网站中可以看到，它们都是由DataNucleus Access Platform提供的，不过我没有细看，有兴趣的同学可以自己点进去学习。什么是JDO ?Java Data Objects (JDO) 是存储对象的标准接口。使用了JDO的应用程序不需要关心数据库类型，不论是关系数据库，层次数据库还是对象数据库，这样在我们更换数据源的时候会非常的方便。要在Google App Engine项目中支持JDO，需要进行配置，不过Eclipse的插件已经帮我们做好了，再次请有兴趣的同学移步这里仔细学习。Java Persistence API (JPA) 和JDO的作用相似，我现在使用的JDO，所以就不多做介绍了，链接补上。建立数据库的POJO类前面进行了简单介绍，下面来实际操作一下。新建一个net.kylewu.idea.db.dataobject.Idea类。12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091packagenet.kylewu.idea.server;importjava.io.Serializable;importjavax.jdo.annotations.IdGeneratorStrategy;importjavax.jdo.annotations.IdentityType;importjavax.jdo.annotations.PersistenceCapable;importjavax.jdo.annotations.Persistent;importjavax.jdo.annotations.PrimaryKey;PersistenceCapable(identityType=IdentityType.APPLICATION)publicclassIdeaimplementsSerializable /* * */ privatestaticfinallongserialVersionUID=1083036616443527590L; PrimaryKey Persistent(valueStrategy=IdGeneratorStrategy.IDENTITY) privateLongid; Persistent privateStringsubject; Persistent privateStringdetail; Persistent privateStringprogress; Persistent privateStringdate; publicIdea(Longid,Stringsubject,Stringdetail,Stringprogress, Stringdate) super(); this.id=id; this.subject=subject; this.detail=detail; gress=progress; this.date=date; publicIdea(Stringsubject,Stringdetail,Stringprogress,Stringdate) this.subject=subject; this.detail=detail; gress=progress; this.date=date; publicLonggetId() returnid; publicvoidsetId(Longid) this.id=id; publicStringgetSubject() returnsubject; publicvoidsetSubject(Stringsubject) this.subject=subject; publicStringgetDetail() returndetail; publicvoidsetDetail(Stringdetail) this.detail=detail; publicStringgetProgress() returnprogress; publicvoidsetProgress(Stringprogress) gress=progress; publicStringgetDate() returndate; publicvoidsetDate(Stringdate) this.date=date; publicStringtoString() returnString.valueOf(id)+|+subject+|+detail+|+progress+|+date; JDO使用annotations来表示数据如何在数据库中存储。这里我们把id设置为主键。与数据库交互需要用到PersistenceManager对象，它是由PersistenceManagerFactory中获得的，为了免去重复创建factory的开销，使用singleton模式来实现这个类。Google App Engine 上提供了一个很好的例子，我直接拿来用了。12345678910111213141516packagenet.kylewu.idea.db;importjavax.jdo.JDOHelper;importjavax.jdo.PersistenceManagerFactory;publicfinalclassPMF privatestaticfinalPersistenceManagerFactory pmfInstance=JDOHelper .getPersistenceManagerFactory(transactions-optional); privatePMF() publicstaticPersistenceManagerFactory get() returnpmfInstance; 好了，这样就可以get到PersistenceManager对象了，那么该如何存储查询对象呢？代码很简单。12345Ide