第三章 范例：the hangman game

　　這一章將會講一下開發(fā)一個基于web的hangman game（猜詞游戲）。這里面會用到一些prado的組件。這個游戲說明了顯示狀態(tài)使prado頁面具有很強的交互性。

　　這個游戲只包括了一個頁面來實現(xiàn)以下的功能：當用戶第一次訪問的時候，允許用戶選擇三種不同難度來開始這個游戲，不同的難度對應著不同的可以猜錯的次數(shù)。游戲開始后，頁面的上半部分會顯示要猜得單詞，沒有猜中的字母用下劃線顯示。頁面的下半部分列出了26個字母，用戶可以點擊對應字母來選擇要猜的字母。如果用戶放棄游戲或者錯誤次數(shù)超過了難度限制，會顯示失敗信息；如果猜對了，會顯示成功信息。任何時候用戶都可以重新開始游戲。

　　范例中會使用的 prado 組件包括：

• tradiobutton: 顯示一個單選框。
• tpanel: 顯示 <div> 元素。
• tlabel: 顯示文本。
• tbutton: 顯示一個提交按鈕。
• tlinkbutton: 顯示一個提交操作的超鏈接。
• tform: 顯示 <form> 元素。

　　這些定義好的組件通過屬性和事件已經封裝好了很多功能。比如，可以設置tpanel 的visible
屬性來控制整個<div>元素是不是可見。可以給tbutton 組件的onclick 事件指定一個響應函數(shù)，這樣當用戶點擊按鈕的時候就會自動調用響應函數(shù)。請參考prado api文檔中關于這些組件更詳細的信息。

　　游戲中的一些數(shù)據(jù)在游戲過程中需要一值保持著的。因為這里只用了一個頁面，所以可以使用顯示狀態(tài)而不需要使用session來保存這些數(shù)據(jù)。下面這些數(shù)據(jù)需要保存在顯示狀態(tài)中：

• word:要猜得單詞。
• guessword: 正在猜的單詞（沒有猜中用下劃線顯示）。
• level:游戲的難度級別。
• misses: 猜錯的次數(shù)。

　　他們都被定義在頁面的屬性中（當然也可以不這么做）。

　　我們需要創(chuàng)建6個文件。假定這個應用放在web服務器的根目錄下，這些文件是：

• hangman.php : 應用的主入口；
• web-inf/hangman.spec: 應用的配置文件；
• web-inf/hangman/homepage.php: 頁面類文件；
• web-inf/hangman/homepage.spec: 頁面規(guī)格文件；
• web-inf/hangman/homepage.tpl: 頁面模板文件；
• web-inf/data/hangman.txt: 包含要猜得單詞的文本文件。

　　下面主要講一下homepage 類的三個文件，其他文件和"hello，world!"例子是類似的。

　　3.1  homepage.tpl

　　首先來說一些頁面模板文件。這個過程也是prado應用開發(fā)的過程。首先在頁面模板中組合prado組件，然后就可以測試一下這個頁面的顯示樣子，最后編寫頁面類文件中需要的代碼。這是一個典型的rad（快速應用開發(fā)）的開發(fā)過程。

　　這個模板文件的位置是 examples/hangman/homepage.tpl .

　　可以看到這個模板被分成4個組件startpanel, guesspanel, winpanel, 和losepanel ；他們將根據(jù)游戲的狀態(tài)來決定是否可視。

　　在 startpanel中，使用了三個 tradiobutton 組件讓用戶可以選擇游戲的難度。tbutton 的onclick 事件指定了一個響應函數(shù)onselectlevel ，當用戶選擇難度后點擊了按鈕就會被觸發(fā)。如果用戶沒有選擇難度，tlabel 組件會顯示一個錯誤提示信息。

　　在 guesspanel中，三個表達式標簽用于顯示頁面的 guessword, misses,和 level 屬性。 同時還有一系列的tlinkbutton 組件來顯示字母a到z，它們用于讓用戶點擊選擇猜哪一個字母。不管是猜對了還是猜錯了，以后這個字母就不允許再被點擊了。注意，所有的這些tlinkbutton 組件都有同樣的一個事件onclick 的響應函數(shù)onguessword 。

  winpanel 和 losepanel 會顯示成功和錯誤的信息。如果用戶點擊了面板上的tlinkbutton ，onclick 事件的響應函數(shù)onstartagain 會被觸發(fā)。

3.2  homepage.spec

　　這個頁面規(guī)格文件在  examples/hangman/homepage.spec。它很簡單，就是定義了4個頁面的屬性： misses, level, guessword 和 word .

3.3  homepage.php

　　這個頁面類文件在 examples/hangman/homepage.php .

　　頁面類 homepage 繼承了框架提供的 tpage 類。

　　getter和setter函數(shù)用來定義頁面屬性。注意： getviewstate() 和  setviewstate() 函數(shù)被調用了，用來返回和保持屬性的數(shù)據(jù)。這兩個函數(shù)在tpage 的父類tcomponent 中實現(xiàn)。它們是顯示狀態(tài)機制的主要代碼。保存在顯示狀態(tài)中的數(shù)據(jù)在頁面的postback中是一直保存著的。

　　接下來實現(xiàn)了4個事件響應函數(shù)： onselectlevel(), onguessword(), ongiveup() 和
onstartagain()。它們對應著在頁面模板中指定的onclick 事件響應函數(shù)。四個函數(shù)的具體內容就不再解釋了，一看就明白。

　　現(xiàn)在你可以試試這個游戲，訪問 url:http://<web-server-address>/examples/hangman.php。