整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          項目實訓(xùn)及課程設(shè)計指導(dǎo)-Web表示層典型功能實現(xiàn)的應(yīng)

          項目實訓(xùn)及課程設(shè)計指導(dǎo)-Web表示層典型功能實現(xiàn)的應(yīng)用實例

          件項目實訓(xùn)及課程設(shè)計指導(dǎo)——Web表示層典型功能實現(xiàn)的應(yīng)用實例

          1、Web頁面中的樹形菜單的功能實現(xiàn)

          利用樹形菜單可以實現(xiàn)層次化的命令集,方便導(dǎo)航用戶的操作。目前在 Web頁面中可以采用許多不同的技術(shù)實現(xiàn)樹形菜單的應(yīng)用效果——如基于Ajax技術(shù)實現(xiàn)Web樹狀菜單、采用XML+JavaScript腳本創(chuàng)建樹形菜單或者利用CSS(Cascading Style Sheets,層疊樣式表)實現(xiàn)靜態(tài)效果的樹形菜單等。

          DHTMLXTree是Web開發(fā)中運用較多的一個開源的樹型菜單控件,允許開發(fā)人員快速開發(fā)Web界面中的樹形菜單,它基于Ajax的JavaScript腳本庫,允許在線編輯、拖拽、三種狀態(tài)(全選、不選、半選)、復(fù)選框等模式。在加載大數(shù)據(jù)量的時候,仍然可以保持非常高效的速度。

          DHTMLXTree本質(zhì)上其實是一個在Web頁面上實現(xiàn)樹狀顯示效果的JavaScript控件,因此應(yīng)用它不僅可以實現(xiàn)樹型菜單,也可以實現(xiàn)樹型目錄等"樹"狀結(jié)構(gòu)的數(shù)據(jù)顯示效果。如下示圖為應(yīng)用DHTMLXTree控件實現(xiàn)的一個樹形結(jié)構(gòu)的數(shù)據(jù)顯示效果的應(yīng)用示例局部截圖。

          而如下示圖為DHTMLXTree官方網(wǎng)站頁面提供的有關(guān)技術(shù)文檔局部截圖,讀者可以根據(jù)待開發(fā)的軟件應(yīng)用系統(tǒng)項目的需要下載相關(guān)的系統(tǒng)庫文件和在線瀏覽技術(shù)參考文檔資料。

          在示例項目銀行賬戶信息管理系統(tǒng)的后臺頁面的設(shè)計和實現(xiàn)中,也采用了DHTMLXTree樹型控件實現(xiàn)應(yīng)用系統(tǒng)中的后臺管理功能的樹形菜單,請見下圖所示頁面效果局部截圖。

          2、Web頁面數(shù)據(jù)的分頁顯示功能實現(xiàn)

          由于在軟件應(yīng)用系統(tǒng)中某個功能的頁面需要顯示大量的數(shù)據(jù),為了方便應(yīng)用系統(tǒng)的操作者對數(shù)據(jù)的快速瀏覽,應(yīng)該要對待顯示的目標(biāo)數(shù)據(jù)進行分頁顯示。Web應(yīng)用系統(tǒng)中數(shù)據(jù)分頁顯示技術(shù)也是Web表示層開發(fā)中比較通用的功能實現(xiàn)要求——所謂的數(shù)據(jù)分頁顯示功能要求,也就是將從軟件應(yīng)用系統(tǒng)后臺數(shù)據(jù)庫表中獲得的各種結(jié)果數(shù)據(jù)人為地分成特定長度的數(shù)據(jù)塊、并在Web頁面中只顯示其中某一塊的數(shù)據(jù),并為操作者提供繼續(xù)瀏覽其它塊數(shù)據(jù)的鏈接或者按鈕(包括前、后頁、第一和最后頁、快速定位某頁等方式)。

          下圖所示為示例項目銀行賬戶信息管理系統(tǒng)中對用戶賬戶信息進行數(shù)據(jù)分頁顯示的效果的局部截圖,該分頁實現(xiàn)技術(shù)是每次只向數(shù)據(jù)庫系統(tǒng)請求頁面大小的數(shù)據(jù),大大地提高了每次前/后翻頁時的查詢速度。

          當(dāng)然,在具體實現(xiàn)時一定要達到將軟件應(yīng)用系統(tǒng)的表示層數(shù)據(jù)顯示與數(shù)據(jù)的業(yè)務(wù)邏輯處理相互分離的設(shè)計和開發(fā)實現(xiàn)的基本目標(biāo)。

          3、解決Web表單重復(fù)提交的問題以保證數(shù)據(jù)的唯一性

          由于各個Web瀏覽器都提供有【刷新】功能菜單——請見下圖所示,為了防止操作者點擊【刷新】功能菜單而造成對軟件應(yīng)用系統(tǒng)后臺的多次重復(fù)請求,在軟件應(yīng)用系統(tǒng)的表示層開發(fā)中應(yīng)該要避免產(chǎn)生表單重復(fù)提交的問題。

          對于解決表單重復(fù)提交的技術(shù)問題,許多基于MVC體系架構(gòu)的應(yīng)用框架都提供了對應(yīng)的技術(shù)支持和具體的實現(xiàn)方法。早期的Struts框架是通過提供Token(令牌)機制很好地解決了表單重復(fù)提交的問題——其基本的實現(xiàn)原理是:

          Struts框架的服務(wù)器端程Action類程序在處理到達的請求之前,會將請求中包含的令牌值與保存在當(dāng)前用戶會話中的令牌值進行比較,看是否匹配;而在處理完該次請求后,并且在將響應(yīng)發(fā)送給客戶端瀏覽器之前,將會產(chǎn)生一個新的令牌(一個隨機的字符串),該令牌除傳給客戶端瀏覽器以外,也會將用戶Session會話中保存的舊的令牌進行替換。

          此時如果用戶回退到剛才的提交頁面并再次重復(fù)地提交請求時,客戶端Web瀏覽器再次傳遞過來的令牌字符串就和服務(wù)器端保存的令牌字符串內(nèi)容也就不一致,從而有效地防止了Web表單重復(fù)提交的發(fā)生。

          而在Struts2應(yīng)用框架中利用系統(tǒng)內(nèi)帶的<s:token />標(biāo)簽產(chǎn)生一個GUID(Globally Unique Identifier,全局唯一標(biāo)識符)字符串值的隱藏輸入框,同時還將GUID字符串放到Session會話中;在執(zhí)行某個Web請求之前,Struts2應(yīng)用框架中的缺省的"token"攔截器將會話中的令牌字符串與此時的Web請求令牌字符串比較,如果兩者相同,則將會話中的令牌字符串刪除并繼續(xù)往下執(zhí)行,否則向actionErrors程序類加入相關(guān)的錯誤信息。

          如此一來,如果用戶通過某種手段提交了兩次相同的請求,兩個令牌字符串就會不同。從而也有效地防止了Web表單重復(fù)提交的發(fā)生。

          在示例項目銀行賬戶信息管理系統(tǒng)中為了不依賴于Struts2等MVC框架系統(tǒng),沒有簡單地采用這些MVC應(yīng)用框架系統(tǒng)對Web表單重復(fù)提交的功能實現(xiàn)的技術(shù)支持。而是采用Web頁面表單中的圖形驗證碼進行限制,同樣也能夠達到相同的應(yīng)用效果。

          由于圖形驗證碼在每次不同的Web請求時都會產(chǎn)生不同的值,從而控制重復(fù)提交的行為產(chǎn)生。在示例項目中的"開戶"功能成功后,用戶如果再次點擊Web瀏覽器中的"回退"按鈕后,將回到原來的Web表單請求頁面。但此時Web頁面表單中的驗證碼已經(jīng)不一致,請見下圖所示的功能操作狀態(tài)圖示,此時提交后,軟件應(yīng)用系統(tǒng)后臺的驗證碼驗證程序?qū)蟾驽e誤而終止重復(fù)的Web請求。

          但如果用戶在Web表單中輸入正確的驗證碼后再發(fā)送本次請求,軟件應(yīng)用系統(tǒng)后臺將通過業(yè)務(wù)數(shù)據(jù)中的邏輯性和數(shù)據(jù)的一致性加以限制,而避免在物理數(shù)據(jù)庫系統(tǒng)的數(shù)據(jù)庫表中出現(xiàn)完全一樣的兩條記錄數(shù)據(jù)。

          4、Web表單中的數(shù)據(jù)有效性驗證

          軟件應(yīng)用系統(tǒng)的操作者可能由于操作的失誤或者惡意的攻擊或者無意識的錯誤數(shù)據(jù)輸入等行為,在Web頁面表單中將產(chǎn)生錯誤的輸入數(shù)據(jù)。為了保證在軟件應(yīng)用系統(tǒng)后臺能夠正確地獲得所需要的目標(biāo)數(shù)據(jù),應(yīng)該要對Web表單中的各種關(guān)鍵性的輸入數(shù)據(jù)進行數(shù)據(jù)驗證(數(shù)據(jù)有效性驗證)。

          對于Web表單中提交的數(shù)據(jù)不僅需要應(yīng)用Web客戶端的數(shù)據(jù)驗證(一般是采用JavaScript腳本語言實現(xiàn)),更應(yīng)該要應(yīng)用Web服務(wù)器端數(shù)據(jù)驗證技術(shù)以真正達到軟件應(yīng)用系統(tǒng)的數(shù)據(jù)安全性、正確性和有效性等應(yīng)用的要求。

          這主要是由于目前有許多瀏覽器能夠禁止執(zhí)行Web客戶端頁面中所內(nèi)嵌的JavaScript腳本語言程序代碼而導(dǎo)致Web客戶端的數(shù)據(jù)驗證功能失效、或者惡意的攻擊者直接通過Web客戶端應(yīng)用程序請求訪問軟件應(yīng)用系統(tǒng)中的后臺Web服務(wù)器端相關(guān)程序。下圖所示為FireFox瀏覽器對Web頁面中的JavaScript腳本語言的控制項目的局部截圖。

          在示例項目銀行賬戶信息管理系統(tǒng)中應(yīng)用Apache Validator驗證器框架實現(xiàn)Web服務(wù)器端的數(shù)據(jù)驗證,由于Apache Validator驗證器框架是Jakarta的公共項目的一部分,讀者可以從Apache Validator驗證器官方網(wǎng)站中下載Validator框架的系統(tǒng)包文件。如下示圖為Apache Validator驗證器官方網(wǎng)站中技術(shù)特性介紹、系統(tǒng)庫文件下載等信息頁面局部截圖。

          下圖所示為在示例項目銀行賬戶信息管理系統(tǒng)中的AccountInfoManageAction類的checkVerifyCodeOK方法中應(yīng)用Validator框架的代碼片段局部截圖。

          5、統(tǒng)計軟件應(yīng)用系統(tǒng)的在線人數(shù)

          Web應(yīng)用系統(tǒng)的在線人數(shù)實時反映軟件應(yīng)用系統(tǒng)的訪問狀態(tài),如果能夠顯示當(dāng)前軟件應(yīng)用系統(tǒng)的在線人數(shù),一方面能夠讓軟件應(yīng)用系統(tǒng)的管理人員及時地了解軟件應(yīng)用系統(tǒng)的當(dāng)前負載情況,另一方面也讓訪問者了解到本軟件應(yīng)用系統(tǒng)的熱門程度。

          但要想實時準確地統(tǒng)計Web應(yīng)用系統(tǒng)的在線人數(shù),其實也是一件不太現(xiàn)實的事情。這是因為HTTP協(xié)議本身是無狀態(tài)的協(xié)議,當(dāng)Web客戶端程序(一般為Web瀏覽器程序)向Web服務(wù)器發(fā)出一個Web請求時,Web服務(wù)器會馬上建立一個新的TCP/IP連接(也就是會話Session);在該Web頁面完全載入后,這個會話連接也就關(guān)閉了;另外,正是由于HTTP協(xié)議是無狀態(tài)的,所以也就無法知道某個Web請求訪問是否已經(jīng)離開或者Web請求者已經(jīng)關(guān)閉了Web瀏覽器。

          因此,Web應(yīng)用中所謂的在線人數(shù)其實應(yīng)該是指在"一定時間段內(nèi)"同時訪問Web站點的人數(shù),而不是基于HTTP協(xié)議的并發(fā)連接數(shù)。但這個"一定時間段內(nèi)"對于不同的Web服務(wù)器也是有差別的,如Tomcat服務(wù)器默認的Session會話超時為30分鐘(但一般的Web網(wǎng)站都采用15分種的時間標(biāo)準)。

          在示例項目銀行賬戶信息管理系統(tǒng)中也提供了該功能的具體實現(xiàn),是利用實現(xiàn)HttpSessionListener接口的Web監(jiān)聽器統(tǒng)計在線Session個數(shù)、并將Tomcat服務(wù)器默認的Session會話超時時間改變?yōu)?5分鐘,最后在Web頁面中顯示輸出本軟件應(yīng)用系統(tǒng)的在線人數(shù)。本示例項目最后實現(xiàn)的效果局部截圖如圖所示。

          6、在軟件應(yīng)用系統(tǒng)中實現(xiàn)文件上傳功能

          文件上傳或者下載也是Web應(yīng)用系統(tǒng)中需要提供的功能,在示例項目銀行賬戶信息管理系統(tǒng)中利用Apache Commons-FileUpload組件實現(xiàn)文件的上傳功能,該FileUpload組件可以實現(xiàn)每次上傳一個或多個文件,并可限制文件大小——比如在用戶注冊表單中允許注冊者自行上傳自己的圖像文件,請見下圖所示的局部截圖。

          7、在軟件應(yīng)用系統(tǒng)中實現(xiàn)文件下載功能

          在Web應(yīng)用系統(tǒng)的開發(fā)實現(xiàn)中,大部分的文件下載都是直接通過建立下載文件的URL文件鏈接方式直接進行下載。但是考慮到在Web應(yīng)用中的文件下載具體實現(xiàn)時的盜鏈、跨服務(wù)器下載訪問等方面的因素,直接文件流下載的方式也是必要的。因為,此時Web應(yīng)用系統(tǒng)能夠?qū)ο螺d的文件以及下載的操作者進行更多方面的安全及身份驗證的檢查和控制。

          在Struts2應(yīng)用框架中實現(xiàn)數(shù)據(jù)流下載時只需要改變Struts2應(yīng)用框架中的result Type為Stream類型即可以實現(xiàn)本功能要求——請見下面的代碼示例所示的某個實現(xiàn)文件下載功能的DownLoadFileAction的配置定義示例內(nèi)容中的黑體標(biāo)識的內(nèi)容。如下為某個實現(xiàn)文件下載功能的DownLoadFileAction的配置定義示例

          <action name="oneDownLoadGIFFile"
                  class="com.px1987.struts2.action.DownLoadFileAction">
                  <param name="inputPath">/downImages/logo.gif</param>
                  <result name="success" type="stream">
                        <param name="contentType">image/gif</param>
                        <param name="inputName">inputStream</param>
                        <param name="contentDisposition">filename="logo.gif"</param>
                        <param name="bufferSize">4096</param>
                  </result>
          </action>

          在示例項目銀行賬戶信息管理系統(tǒng)中采用在Servlet程序中直接控制文件輸出流的方式實現(xiàn)文件下載的控制。具體的功能實現(xiàn)代碼請見如下所附的代碼示例,該doDownLoadFile方法作為某個J2EE Servlet程序中一個功能方法被doGet方法所調(diào)用,并請注意其中的黑體部分的語句代碼——實現(xiàn)文件下載功能的代碼示例

          public void doDownLoadFile(HttpServletRequest request, String downFileName,
          HttpServletResponse response, String downFilePath)
          throws ServletException, IOException{
                  ServletOutputStream servletOutputStream=null;
                  FileInputStream fileInputStream=null;
                  BufferedInputStream bufferedInputStream=null;
                  File downLoadTargetFile=new File(downFilePath+"/"+downFileName);
                  if(!downLoadTargetFile.exists()){
                        response.sendError(404,"沒有找到要下載的目標(biāo)文件!");
                        return;
                  }
                try {
                        response.setContentType("application/octet-stream");
                        response.setHeader("Content-Disposition",
                        "attachment; filename=\"" + downFileName + "\"");
                        servletOutputStream=response.getOutputStream(); fileInputStream=new java.io.FileInputStream(downFilePath +
                        "\\"+ downFileName);
                        bufferedInputStream=new BufferedInputStream(fileInputStream);
                        byte[] oneBuffer=new byte[10240];
                        int byteNumber;
                        while ((byteNumber=bufferedInputStream.read(oneBuffer)) !=-1){
                        			servletOutputStream.write(oneBuffer,0,byteNumber);
                        }
                }
                catch (FileNotFoundException e) {
                }
                catch (IOException e) {
                }
                finally {
                      if(bufferedInputStream !=null){
                     			 bufferedInputStream.close();
                      }
                      if(servletOutputStream !=null){
                      			servletOutputStream.close();
                      }
                }
          }

          其中的response.setContentType("application/octet-stream");語句主要是設(shè)置Http響應(yīng)頭和要下載保存的文件名,Web瀏覽器將根據(jù)開發(fā)人員在Http數(shù)據(jù)流的Head部分的MIME(Multipurpose Internet Mail Extensions,多用途互聯(lián)網(wǎng)郵件擴展類型)頭的設(shè)置內(nèi)容"application/octet-stream"直接產(chǎn)生出文件下載的對話框提示、并且按照設(shè)置的內(nèi)容采用二進制數(shù)據(jù)格式傳輸文件流數(shù)據(jù)。

          么是DOM樹?

          DOM(Document Object Model)即文檔對象模型。通過DOM樹這樣一種結(jié)構(gòu),不僅可以直觀的看到HTML的整體結(jié)構(gòu),還可以利用DOM樹的一些屬性獲取到某個元素的子節(jié)點和節(jié)點名稱等信息。

          HTML文檔結(jié)構(gòu):

          樹形結(jié)構(gòu):

          childNodes和nodeName屬性

          childNodes屬性:獲取當(dāng)前節(jié)點的子節(jié)點。

          <div id="box">
              <p>第一個child節(jié)點</p>
              <h4>第二個child節(jié)點</h4>
              <div>第三個child節(jié)點</div>
          </div>
          
          <script>
              let box=document.getElementById("box");
              let boxChild=box.childNodes;
              console.log(boxChild);
          </script>

          空格和換行也屬于一個節(jié)點,用text表示。

          for(let i=1;  i < boxChild.length; i +=2)
          	console.log(boxChild[i]);

          獲取1、3、5……奇數(shù)節(jié)點。

          nodeName屬性:返回節(jié)點名稱。

          for(let i=1;  i < boxChild.length; i +=2)
          	console.log(boxChild[i].nodeName);

          appendChild方法

          appendChild(node):在子節(jié)點最后一位插入新節(jié)點,node為新節(jié)點的名稱。

          let newnode=document.createElement("p");
          newnode.innerHTML="新節(jié)點";
          box.appendChild(newnode);
          
          console.log(boxChild);

          removeChild方法

          removeChild(node):刪除指定父級元素的某個子節(jié)點。

          項目目標(biāo):點擊刪除按鈕,依次刪除列表中書籍。

          btn.onclick=function(){
              list.removeChild(list.childNodes[1]);
          }

          parentNode屬性

          parentNode屬性:返回指定節(jié)點的父節(jié)點。

          <div id="box">
              <p id="box-item1">第一個child節(jié)點</p>
              <h4>第二個child節(jié)點</h4>
              <div>第三個child節(jié)點</div>
          </div>
          
          <script>
              let box_item1=document.getElementById("box-item1");
              console.log(box_item1.parentNode);
          </script>

          項目目標(biāo):點擊叉號刪除內(nèi)容。

          x.onclick=function(){
              document.body.removeChild(this.parentNode);
          }

          replaceChild方法

          replaceChild(newnode,oldnode)方法:用新節(jié)點替換之前的節(jié)點。

          <div id="box">
              <p id="box-item1">第一個child節(jié)點</p>
              <h4>第二個child節(jié)點</h4>
              <div id="box-item3">第三個child節(jié)點</div>
          </div>
          
          <script>
              let box_item1=document.getElementById("box-item1");
              console.log(box_item1.parentNode);
          
              let h1=document.createElement("h1");
              h1.innerHTML="新節(jié)點 第三個child節(jié)點";
          
              let box_item3=document.getElementById("box-item3");
          
              let box=document.getElementById("box");
          
              box.replaceChild(h1, box_item3);
          </script>

          insertBefore方法

          insertBefore可以在已有的子節(jié)點前插入一個新的子節(jié)點。
          項目目標(biāo):點擊按鈕,在ul標(biāo)記子節(jié)點的第一位插入包含內(nèi)容“我的世界”,文字顏色為紅色的h4節(jié)點。

          let btn=document.getElementById("button");
          let game=document.getElementById("game");
          btn.onclick=function() {
          	let newGame=document.createElement("h4");
          	newGame.innerHTML="我的世界";
          	newGame.style.color="red";
          	newGame.style.paddingLeft="40px";
          	game.insertBefore(newGame, game.firstChild);
          }

          setAttribute屬性

          setAttribute屬性:添加指定的屬性,并為其賦指定的值。

          項目目標(biāo):點擊“變”按鈕,將輸入框變?yōu)榘粹o。

          let btn=document.getElementById("btn");
          let input=document.getElementById("put");
          btn.onclick=function() {
          	input.setAttribute("type", "button");
          }

          相關(guān)推薦

          • Javascript對象和選項卡實現(xiàn)
          • 一文詳解javascript輪播圖
          • Javascript簡介和基礎(chǔ)數(shù)據(jù)類型
          • 一文詳解Javascript定時器
          • 一文詳解Javascript鼠標(biāo)事件,拖拽原理
          • Javascript點擊按鈕控制圖片切換
          • 一文詳解javascript函數(shù)和面向?qū)ο缶幊?/li>
          • Javascript獲取className屬性和slice切片

          視頻講解

          戰(zhàn)wxPython系列-039

          wxPythontigo提供了一些高級控件。例如,樹形控件、HTML窗口、網(wǎng)格控件、列表控件、或具有高級樣式功能的編輯器等。

          一、wx.ListBox列表框

          wx.ListBox列表框控件從一個字符串列表中選擇一個或者多個字符串。所選字符串顯示在一個可以滾動的列表框中,所選中的字符串將特別標(biāo)記。列表框可以是單選 (如果選擇了其中的一個項,則清除先前的選擇項)或者多重選擇(選擇一個項的時,不影響對其他項的選擇)。

          列表框元素從0開始編號,雖然元素的最大數(shù)量是無限的,但通常最好使用虛擬控件,不需要一次性將所有項添加到其中。由于這個控件沒有做優(yōu)化,比如在wx.dataview.DataViewCtrl或者使用LC_VIRTUAL樣式的wx.ListCtrl時,需要加載超過上百的項時,性能會有所影響。

          注意,列表框不支持除制表符以外的控制字符。

          wx.ListBox支持的窗口樣式:

          • wx.LB_SINGLE:單選列表。
          • wx.LB_MULTIPLE:多選列表。
          • wx.LB_EXTENDED:擴展選擇列表:用戶可以使用SHIFT或CTRL鍵以及光標(biāo)移動鍵或鼠標(biāo)來擴展選擇。
          • wx.LB_HSCROLL:如果內(nèi)容太多,創(chuàng)建水平滾動條(僅限Windows)。
          • wx.LB_ALWAYS_SB:始終顯示垂直滾動條。
          • wx.LB_NEEDED_SB:只在需要時創(chuàng)建垂直滾動條。
          • wx.LB_NO_SB:不創(chuàng)建垂直滾動條(僅限于wxMSW和wxGTK)。
          • wx.LB_SORT:列表框內(nèi)容按字母順序排序。

          注意:LB_SINGLE, LB_MULTIPLE和LB_EXTENDED樣式是互斥的,最多可以指定其中一個樣式(單選是默認設(shè)置)。

          wx.ListBox發(fā)出的事件:

          • EVT_LISTBOX:當(dāng)列表中的項被選中或選擇發(fā)生變化時,處理wx.EVT_LISTBOX事件。
          • EVT_LISTBOX_DCLICK:當(dāng)雙擊列表框時,處理wx.EVT_LISTBOX_DCLICK事件。

          wx.ListBox常用方法

          • Deselect(self, n):取消選擇列表框中的項(只適用于多選擇列表框)。
          • EnsureVisible(self, n):確保當(dāng)前顯示具有給定索引的項。這個方法只在必要時滾動列表框,如果這個項已經(jīng)顯示,它不會做任何事情。
          • FindString(self, string, caseSensitive=False):查找與給定字符串匹配的項。
          • GetCount(self):返回控件中的項數(shù)。
          • GetCountPerPage(self):返回可以放入列表框垂直可見區(qū)域的項數(shù)量。如果無法確定每頁的條目數(shù),則返回-1。
          • GetSelection(self):返回所選項的索引,如果沒有選擇項,則返回NOT_FOUND。
          • GetSelections(self):用當(dāng)前選定項的位置填充整數(shù)數(shù)組
          • GetString(self, n):返回具有給定索引的項的標(biāo)簽。索引必須是有效的,即小于GetCount返回的值,否則會觸發(fā)斷言。值得注意的是,如果控件為空,則不能調(diào)用此函數(shù)。
          • GetTopItem(self):返回最上面可見項的索引。如果該方法沒有為當(dāng)前平臺實現(xiàn),則返回NOT_FOUND。
          • HitTest (self, point):返回位于point上的項,如果沒有項位于point上,則返回NOT_FOUND。
          • InsertItems(self, items, pos):在指定位置之前插入給定數(shù)量的字符串。
          • IsSelected(self, n):確定是否選擇某項。
          • IsSorted(self):如果列表框為LB_SORT樣式,則返回True。此方法主要僅用于內(nèi)部使用。
          • SetFirstItem (self, string):將指定的項設(shè)置為第一個可見項。
          • SetItemBackgroundColour(self, item, c):如果wx.LB_OWNERDRAW標(biāo)志被設(shè)置,在列表框中設(shè)置一個項的背景顏色(僅對MSW有效)。
          • SetItemFont(self, item, f):如果wx.LB_OWNERDRAW標(biāo)志被設(shè)置,在列表框中設(shè)置一個項的前景顏色(僅對MSW有效)。
          • SetSelection(self, n):將選定項設(shè)置為給定項n,如果n==NOT_FOUND則完全刪除選定項。注意,這不會觸發(fā)任何命令事件,也不會取消控件中支持多個選擇的任何其他項。
          • SetString(self, n, string):為給定的項設(shè)置標(biāo)簽。

          圖1:wx.ListBox類繼承關(guān)系

          二、wx.ListBox演示

          #列表框(wx.ListBox)
          
          import wx
          
          class SampleListBox(wx.Frame):
          
              def __init__(self, *args, **kw):
                  super(SampleListBox, self).__init__(*args, **kw)
          
                  self.InitUi()
          
              def InitUi(self):
                  #設(shè)置標(biāo)題
                  self.SetTitle("實戰(zhàn)wxPython: ListBox演示")
                  #設(shè)置窗口尺寸
                  self.SetSize(400, 240)
          
                  panel=wx.Panel(self)
          
                  #水平布局
                  hbox=wx.BoxSizer(wx.HORIZONTAL)
          
                  # 添加一個列表框
                  self.listbox=wx.ListBox(panel)
                  hbox.Add(self.listbox, wx.ID_ANY, wx.EXPAND | wx.ALL, 20)
          
                  # 按鈕面板
                  btnPanel=wx.Panel(panel)
                  vbox=wx.BoxSizer(wx.VERTICAL)
                  newButon=wx.Button(btnPanel, wx.ID_ANY, "新建", size=(90, 30))
                  renButton=wx.Button(btnPanel, wx.ID_ANY, "重命名", size=(90, 30))
                  delButton=wx.Button(btnPanel, wx.ID_ANY, "刪除", size=(90, 30))
                  clrButton=wx.Button(btnPanel, wx.ID_ANY, "清理", size=(90, 30))
          
                  newButon.Bind(wx.EVT_BUTTON, self.NewItem)
                  renButton.Bind(wx.EVT_BUTTON, self.OnRename)
                  delButton.Bind(wx.EVT_BUTTON, self.OnDelete)
                  clrButton.Bind(wx.EVT_BUTTON, self.OnClear)
                  self.Bind(wx.EVT_LISTBOX_DCLICK, self.OnRename)
          
                  vbox.Add((-1, 20)) #距離頂端20像素
                  vbox.Add(newButon)
                  vbox.Add(renButton, 0, wx.TOP, 5)
                  vbox.Add(delButton, 0, wx.TOP, 5)
                  vbox.Add(clrButton, 0, wx.TOP, 5)
          
                  btnPanel.SetSizer(vbox)
                  hbox.Add(btnPanel, 0.6, wx.EXPAND | wx.RIGHT, 20)
                  panel.SetSizer(hbox)
          
                  self.Centre()
          
              def NewItem(self, e):
                  text=wx.GetTextFromUser("輸入一個新項", "插入對話框")
                  if text !="":
                      self.listbox.Append(text)
          
              def OnRename(self, e):
                  sel=self.listbox.GetSelection()
                  text=self.listbox.GetString(sel)
                  renamed=wx.GetTextFromUser("項重命名", "重命名對話框", text)
          
                  if renamed !="":
                      self.listbox.Delete(sel)
                      item_id=self.listbox.Insert(renamed, sel)
                      self.listbox.SetSelection(item_id)
          
              def OnDelete(self, e):
                  sel=self.listbox.GetSelection()
                  if sel !=-1:
                      self.listbox.Delete(sel)
          
              def OnClear(self, e):
                  self.listbox.Clear()
          
          def main():
              app=wx.App()
              sample=SampleListBox(None)
              sample.Show()
              app.MainLoop()
          
          if __name__=="__main__":
              main()

          這個例子展示了如何從wx.ListBox中添加、修改和刪除項。

          self.listbox=wx.ListBox(panel)
           hbox.Add(self.listbox, wx.ID_ANY, wx.EXPAND | wx.ALL, 20)

          創(chuàng)建一個空的wx.ListBox。設(shè)置列表框邊框距離20px。

          self.Bind(wx.EVT_LISTBOX_DCLICK, self.OnRename)

          綁定wx. EVT_LISTBOX_DCLICK事件到方法OnRename(),這樣,如果雙擊列表框中的特定元素,就會顯示重命名對話框。

          def NewItem(self, e):
                  text=wx.GetTextFromUser("輸入一個新項", "插入對話框")
                  if text !="":
                      self.listbox.Append(text)

          通過單擊新建按鈕調(diào)用NewItem()方法。在NuwItem方法中,使用包裝器wx.GetTextFromUser()方法顯示一個wx.TextEntryDialog。將對話框中輸入的文本返回給文本變量。如果文本不是空的,我們用append()方法將它添加到列表框中。

          if renamed !="":
                 self.listbox.Delete(sel)
                 item_id=self.listbox.Insert(renamed, sel)
                 self.listbox.SetSelection(item_id)

          通過刪除項并在同一位置插入新項來重命名項。將選擇設(shè)置回已修改的項。

          def OnDelete(self, e):
                  sel=self.listbox.GetSelection()
                  if sel !=-1:
                      self.listbox.Delete(sel)

          要刪除一個項,通過調(diào)用GetSelection()方法找到所選項的索引。然后使用delete()方法刪除該項。

          def OnClear(self, e):
                  self.listbox.Clear()

          調(diào)用Clear()方法清除整個列表框。

          圖2:wx.ListBox演示

          三、wx.CheckListBox復(fù)選列表框

          wx.CheckListBox是wx.ListBox的派生類,繼承了它的功能,它在每個選項上額外顯示一個復(fù)選框。

          wx.CheckListBox發(fā)出的事件:

          • EVT_CHECKLISTBOX:當(dāng)選中或取消選中復(fù)選框中的項時,處理wx.EVT_CHECKLISTBOX事件。

          wx.CkeckListBox常用方法:

          • Check(self, item, check=True):設(shè)置給定的項的選擇狀態(tài)。調(diào)用此方法不會導(dǎo)致觸發(fā)wx.EVT_CHECKLISTBOX事件。
          • GetCheckedItems(self):根據(jù)IsChecked返回與控件中已選擇項對應(yīng)的整數(shù)序列。
          • GetCheckedStrings(self):根據(jù)GetChecked返回與控件的已選擇項對應(yīng)的字符串元組。
          • GetSelections(self):返回當(dāng)前選定項的索引列表。
          • IsChecked(self, item):如果選中給定項則返回True,否則返回False。
          • SetCheckedItems(self, indexes):如果在索引序列中找到項的索引,則設(shè)置項的已選定狀態(tài)。
          • SetCheckedStrings(self, strings):如果在字符串序列中找到項的字符串,則設(shè)置項的選定狀態(tài)。

          圖3:wx.CheckListBox類繼承關(guān)系

          將節(jié)二中的演示代碼:

          self.listbox=wx.ListBox(panel)

          修改成

          self.listbox=wx.CheckListBox(panel)

          運行,就可以演示使用wx.CheckListBox,效果如圖4:

          圖4:wx.CheckListBox演示

          四、本文知識點

          • 了解和使用wx.ListBox。
          • 了解和使用wx.CheckListBox。

          前一篇:wxPython - 狀態(tài)欄StatusBar

          歡迎關(guān)注,評論,收藏,點贊,和轉(zhuǎn)發(fā)。


          主站蜘蛛池模板: 亚洲国产老鸭窝一区二区三区| 久久毛片免费看一区二区三区| 亚洲av无码一区二区三区观看| 亚洲AV无码一区二区三区牲色 | 亚洲人成人一区二区三区| 一区二区在线电影| 婷婷亚洲综合一区二区| 91精品国产一区| 国产自产V一区二区三区C| 亚洲乱码av中文一区二区| 少妇人妻精品一区二区三区| 一区二区三区在线观看中文字幕| 亚洲欧洲精品一区二区三区| 爆乳熟妇一区二区三区| 国产成人无码精品一区不卡| 波多野结衣久久一区二区| 日韩人妻精品一区二区三区视频| 亚洲一区精品无码| 高清国产精品人妻一区二区| 精品女同一区二区三区免费播放| 亚洲日韩AV一区二区三区中文| 99久久综合狠狠综合久久一区| 亚洲av日韩综合一区在线观看| 国产成人精品无码一区二区三区| 久久精品国产一区二区| 在线观看国产区亚洲一区成人| 理论亚洲区美一区二区三区| 无码人妻av一区二区三区蜜臀| 中文字幕一区二区三区人妻少妇| 亚洲国产一区在线观看| 亚洲一区中文字幕在线电影网 | V一区无码内射国产| 国产免费伦精品一区二区三区| 一区二区三区四区在线播放| 亚洲一区无码精品色| 三上悠亚国产精品一区| 亚洲爆乳精品无码一区二区三区| 文中字幕一区二区三区视频播放 | 中文字幕一区二区三区乱码| 国产福利电影一区二区三区久久老子无码午夜伦不 | 无码丰满熟妇一区二区|