2013年3月23日星期六

Google Web Toolkit 和 Google App Engine 综合教程 界面篇

诸位还不清楚Google Web Toolkit 和 Google App Engine是什么的同学，请移步这里，看我的综合教程 启蒙篇。
请装好Eclipse的插件，后面的程序都是以插件为准，用命令行的同学请自己注意。

创建Eclipse工程

3445125282 b4c2cde5bd o Google Web Toolkit 和 Google App Engine 综合教程 界面篇点 击最左面的小图标就开始创建新的Web应用。我这里创建了一个名为kylewuidea的Project，包设为net.kylewu.idea，我们这 里要同时使用Google Web Toolkit 和 Google App Engine，所以两个都要选择支持。确认后可以看到Eclipse为我们创建好了整个Project，结构见图。
3444307627 1b0ab58861 o Google Web Toolkit 和 Google App Engine 综合教程 界面篇3444307657 86ab8b604b o Google Web Toolkit 和 Google App Engine 综合教程 界面篇

Google Web Toolkit 部分

打开Kylewuidea.java，里面已经写好了一个事例程序，有兴趣的同学可以先熟悉一下。接下来删除这个文件里多余的代码，仅保留下面这些。

Java代码  收藏代码
  1. package net.kylewu.idea.client;  
  2.   
  3. import com.google.gwt.core.client.EntryPoint;  
  4.   
  5. /** 
  6.  * Entry point classes define onModuleLoad(). 
  7.  */  
  8. public class MyIdeaStorm implements EntryPoint {  
  9.   
  10.     /** 
  11.      * This is the entry point method. 
  12.      */  
  13.     public void onModuleLoad() {  
  14.   
  15.     }  
  16. }  

下面我们就要往里面填东西了，同学们来看一下页面的结构，一个表格，包括了IdeaId，Idea主题，Idea详情，Idea完成进度及完成时间，按钮，备注。最后有一个添加Idea按钮，用来加入Idea。结构清晰了，就来写代码吧。

Java代码  收藏代码
  1. package net.kylewu.idea.client;  
  2.   
  3. import com.google.gwt.core.client.EntryPoint;  
  4. import com.google.gwt.user.client.ui.Button;  
  5. import com.google.gwt.user.client.ui.DialogBox;  
  6. import com.google.gwt.user.client.ui.FlexTable;  
  7. import com.google.gwt.user.client.ui.ListBox;  
  8. import com.google.gwt.user.client.ui.Panel;  
  9. import com.google.gwt.user.client.ui.RootPanel;  
  10. import com.google.gwt.user.client.ui.TextArea;  
  11. import com.google.gwt.user.client.ui.TextBox;  
  12. import com.google.gwt.user.client.ui.VerticalPanel;  
  13.   
  14. /** 
  15.  * Entry point classes define onModuleLoad(). 
  16.  */  
  17. public class MyIdeaStorm implements EntryPoint {  
  18.   
  19.     private FlexTable table = new FlexTable();  
  20.   
  21.     /** 
  22.      * This is the entry point method. 
  23.      */  
  24.     public void onModuleLoad() {  
  25.         // Initial all items.  
  26.         init();  
  27.         // Add table to html page.  
  28.         RootPanel.get("idea").add(createBasePanel());  
  29.         // Initial table.  
  30.         importFromDatabase();  
  31.     }  
  32.   
  33.     private void init() {  
  34.         // TODO Initial table structure.  
  35.         // TODO Set table attribute.  
  36.     }  
  37.     private void importFromDatabase() {  
  38.         // TODO Add initial data to table or get from database.  
  39.   
  40.     }  
  41.     private Panel createBasePanel() {  
  42.         // Base Panel of this project.  
  43.         VerticalPanel mainPanel = new VerticalPanel();  
  44.         // TODO Add click handler to add button.  
  45.         // TODO Assemble the panel.  
  46.   
  47.         return mainPanel;  
  48.     }  
  49. }  


onModuleLoad()方法就是程序的入口，这里我们写了一下初始化的代码。我在这里是直接写成方法了，这样看入口感觉清爽一些。
写Google Web Toolkit的代码与写普通Java界面很相似，在Panel里加入一些组件。这里要注意，RootPanel.get()方法得到的就是HTML页面 中的某个元素，也就是我们的最上级容器。在这里我get名为idea的panel，那么它到底在什么地方呢？
打开war/Kylewuidea.html，删除body内除iframe的所有内容，改为如下代码。
1
<h1>Kyle Wu's Idea</h1>
看到了么，我们将一个div命名为idea，这样我们Project都会在这个div标签下，当然，你也可以get到其他的元素。
到这里页面中还没有任何元素，下面任务很简单了。点击添加Idea的按钮，弹出一个对话框，可以填入主题和详情等。当我们点击添加Idea的时候，一条新的Idea将显示在表格中。对于每条idea，都需要更新或者删除，功能应该不难了吧，同学们可以自己写写看。
Google Web Toolkit 的任务差不多了，让我们看看最后的代码。
Java代码  收藏代码
  1. package net.kylewu.idea.client;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5. import java.util.Map;  
  6.   
  7. import net.kylewu.idea.client.service.DBWorkerService;  
  8. import net.kylewu.idea.client.service.DBWorkerServiceAsync;  
  9.   
  10. import com.google.gwt.core.client.EntryPoint;  
  11. import com.google.gwt.core.client.GWT;  
  12. import com.google.gwt.event.dom.client.ClickEvent;  
  13. import com.google.gwt.event.dom.client.ClickHandler;  
  14. import com.google.gwt.user.client.rpc.AsyncCallback;  
  15. import com.google.gwt.user.client.ui.Button;  
  16. import com.google.gwt.user.client.ui.DialogBox;  
  17. import com.google.gwt.user.client.ui.FlexTable;  
  18. import com.google.gwt.user.client.ui.HasHorizontalAlignment;  
  19. import com.google.gwt.user.client.ui.HasVerticalAlignment;  
  20. import com.google.gwt.user.client.ui.HorizontalPanel;  
  21. import com.google.gwt.user.client.ui.ListBox;  
  22. import com.google.gwt.user.client.ui.Panel;  
  23. import com.google.gwt.user.client.ui.RootPanel;  
  24. import com.google.gwt.user.client.ui.TextArea;  
  25. import com.google.gwt.user.client.ui.TextBox;  
  26. import com.google.gwt.user.client.ui.VerticalPanel;  
  27.   
  28. /** 
  29.  * Entry point classes define onModuleLoad(). 
  30.  */  
  31. public class Kylewuidea implements EntryPoint {  
  32.   
  33.     private final int COL_ID = 0;  
  34.     private final int COL_SUBJECT = 1;  
  35.     private final int COL_DETAIL = 2;  
  36.     private final int COL_PROGRESS = 3;  
  37.     private final int COL_TIME = 4;  
  38.     private final int COL_OPERATION = 5;  
  39.   
  40.     private FlexTable table = new FlexTable();  
  41.   
  42.     private ArrayList subjectList = new ArrayList();  
  43.   
  44.     private Map mapStrToInt = new HashMap();  
  45.     private Map mapIntToStr = new HashMap();  
  46.   
  47.     /** 
  48.      * This is the entry point method. 
  49.      */  
  50.     public void onModuleLoad() {  
  51.   
  52.         // Initial all items.  
  53.         init();  
  54.         // Add table to html page.  
  55.         RootPanel.get("ideastorm").add(createBasePanel());  
  56.         // Initial table.  
  57.         importFromDatabase();  
  58.   
  59.     }  
  60.   
  61.     private void init() {  
  62.   
  63.         mapStrToInt.put("0%", 0);  
  64.         mapStrToInt.put("25%", 1);  
  65.         mapStrToInt.put("50%", 2);  
  66.         mapStrToInt.put("75%", 3);  
  67.         mapStrToInt.put("100%", 4);  
  68.         mapIntToStr.put(0, "0%");  
  69.         mapIntToStr.put(1, "25%");  
  70.         mapIntToStr.put(2, "50%");  
  71.         mapIntToStr.put(3, "75");  
  72.         mapIntToStr.put(4, "100%");  
  73.   
  74.         // Initial table structure.  
  75.         table.setText(0, COL_ID, "ID");  
  76.         table.setText(0, COL_SUBJECT, "Subject");  
  77.         table.setText(0, COL_DETAIL, "Detail");  
  78.         table.setText(0, COL_PROGRESS, "Progress");  
  79.         table.setText(0, COL_OPERATION, "Operation");  
  80.         table.setText(0, COL_TIME, "Time");  
  81.   
  82.         // Set table attribute.  
  83.         table.setCellPadding(5);  
  84.         table.getColumnFormatter().setWidth(0, "10");  
  85.         table.getColumnFormatter().setWidth(1, "200");  
  86.         table.getColumnFormatter().setWidth(2, "400");  
  87.         table.getColumnFormatter().setWidth(3, "150");  
  88.         table.getColumnFormatter().setWidth(4, "100");  
  89.     }  
  90.   
  91.     /** 
  92.      * Initial table data 
  93.      */  
  94.     private void importFromDatabase() {  
  95.         // Get exist ideas from db  
  96.     }  
  97.   
  98.     /** 
  99.      * Create base panel 
  100.      * 
  101.      * @return 
  102.      */  
  103.     private Panel createBasePanel() {  
  104.         // Base Panel of this project.  
  105.         VerticalPanel mainPanel = new VerticalPanel();  
  106.         Button btnAdd = new Button("Add Idea");  
  107.   
  108.         // Add click handler to add button.  
  109.         btnAdd.addClickHandler(new ClickHandler() {  
  110.             public void onClick(ClickEvent event) {  
  111.                 // Show Add Idea Dialog  
  112.                 showIdeaEditDialog(true, -1);  
  113.             }  
  114.         });  
  115.   
  116.         // Assemble the panel.  
  117.         mainPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);  
  118.         mainPanel.add(table);  
  119.         mainPanel.add(btnAdd);  
  120.   
  121.         return mainPanel;  
  122.     }  
  123.   
  124.     /** 
  125.      * Show Add Idea Dialog 
  126.      */  
  127.     private void showIdeaEditDialog(final boolean isNew, final int index) {  
  128.         // Initial Add Idea Dialog.  
  129.         final DialogBox dialog = new DialogBox();  
  130.         final TextBox txtBoxSubject = new TextBox();  
  131.         final TextArea txtAreaDetail = new TextArea();  
  132.         final ListBox listBox = new ListBox();  
  133.         VerticalPanel dialogPanel = new VerticalPanel();  
  134.         HorizontalPanel itemPanel = new HorizontalPanel();  
  135.         Button btnInsert = new Button();  
  136.         Button btnClose = new Button("Close");  
  137.   
  138.         // Set attribute.  
  139.         dialog.setText("Input your idea");  
  140.         dialog.setAnimationEnabled(true);  
  141.         txtAreaDetail.setSize("300", "380");  
  142.         listBox.clear();  
  143.         listBox.addItem("0%");  
  144.         listBox.addItem("25%");  
  145.         listBox.addItem("50%");  
  146.         listBox.addItem("75%");  
  147.         listBox.addItem("100%");  
  148.         listBox.setVisibleItemCount(5);  
  149.   
  150.         if (isNew) {  
  151.             btnInsert.setText("Insert");  
  152.             txtBoxSubject.setText("Input your indea");  
  153.             listBox.setSelectedIndex(0);  
  154.         } else {  
  155.             btnInsert.setText("Update");  
  156.             txtBoxSubject.setText(table.getText(index, COL_SUBJECT));  
  157.             txtAreaDetail.setText(table.getText(index, COL_DETAIL));  
  158.             listBox.setSelectedIndex(mapStrToInt.get(table.getText(index,  
  159.                     COL_PROGRESS)));  
  160.             if (table.getText(index, COL_PROGRESS).compareTo("100%") == 0  )  
  161.                 listBox.setEnabled(false);  
  162.         }  
  163.   
  164.         // Add ClickHandler to Insert button  
  165.         btnInsert.addClickHandler(new ClickHandler() {  
  166.             public void onClick(ClickEvent event) {  
  167.                 // Check empty  
  168.                 if (txtBoxSubject.getText().length() == 0  
  169.                         || txtAreaDetail.getText().length() == 0)  
  170.                     return;  
  171.                 // Check exist  
  172.                 if (subjectList.contains(txtBoxSubject.getText()) == true  
  173.                         &amp;&amp; isNew) {  
  174.                     return;  
  175.                 }  
  176.   
  177.                 insertIdeaIntoTable(index, "", txtBoxSubject.getText(), txtAreaDetail.getText(),  
  178.                         mapIntToStr.get(listBox.getSelectedIndex()), "");  
  179.                 dialog.hide();  
  180.             }  
  181.   
  182.         });  
  183.   
  184.         // Add ClickHandler to Close button  
  185.         btnClose.addClickHandler(new ClickHandler() {  
  186.             public void onClick(ClickEvent event) {  
  187.                 dialog.hide();  
  188.             }  
  189.         });  
  190.   
  191.         // Assemble dialog panel.  
  192.         itemPanel.setWidth("100%");  
  193.         itemPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);  
  194.         itemPanel.add(listBox);  
  195.         itemPanel.add(btnInsert);  
  196.         itemPanel.add(btnClose);  
  197.         dialogPanel.add(txtBoxSubject);  
  198.         dialogPanel.add(txtAreaDetail);  
  199.         dialogPanel.add(itemPanel);  
  200.   
  201.         // Associate the dialog with the panel.  
  202.         dialog.setWidget(dialogPanel);  
  203.   
  204.         // Show dialog.  
  205.         dialog.center();  
  206.     }  
  207.   
  208.     private void insertIdeaIntoTable(int index, final String id,  
  209.             final String subject, String detail, String progress, String date) {  
  210.         //  
  211.         if (index == -1) {  
  212.             index = table.getRowCount();  
  213.             subjectList.add(subject);  
  214.         } else {  
  215.             subjectList.set(index - 1, subject);  
  216.         }  
  217.   
  218.         HorizontalPanel panel = new HorizontalPanel();  
  219.         Button btnUpdate = new Button("Update");  
  220.         Button btnRemove = new Button("Remove");  
  221.   
  222.         // Add handler to buttons  
  223.         btnUpdate.addClickHandler(new ClickHandler() {  
  224.   
  225.             @Override  
  226.             public void onClick(ClickEvent event) {  
  227.                 int i = subjectList.indexOf(subject);  
  228.                 showIdeaEditDialog(false, i + 1);  
  229.             }  
  230.   
  231.         });  
  232.   
  233.         btnRemove.addClickHandler(new ClickHandler() {  
  234.   
  235.             @Override  
  236.             public void onClick(ClickEvent event) {  
  237.                 // Remove  
  238.   
  239.             }  
  240.   
  241.         });  
  242.   
  243.         panel.add(btnUpdate);  
  244.         panel.add(btnRemove);  
  245.   
  246.         table.setWidget(index, COL_OPERATION, panel);  
  247.         table.setText(index, COL_ID, id);  
  248.         table.setText(index, COL_SUBJECT, subject);  
  249.         table.setText(index, COL_DETAIL, detail);  
  250.         table.setText(index, COL_PROGRESS, progress);  
  251.         if (progress.compareTo("100%") == 0 &amp;&amp; table.getText(index, COL_TIME).length() == 0) {  
  252.             table.setText(index, COL_TIME, date);  
  253.         }  
  254.   
  255.     }  
  256. }  

好奇的同学肯定会问，光写Google Web Toolkit 的东西了，怎么不见Google App Engine 呢？呵呵，不要着急，休息，休息一下：） 在下一篇里将介绍Google App Engine 在我们这个应用里如何帮助诸位同学把idea存储起来。
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)