qooxdoo框架環境搭建+登錄頁面

這是搭建的qooxdoo的一個平臺環境.創建了一個自己的web應用並寫了一個登錄界面.

說一下搭建步驟:

1、下載qooxdoo的sdk包.(1.6),並安裝和配置其環境變量.

2、下載python2.7(2.5-2.7爲官方推薦版本,python之後版本不支持qx),並安裝配置其環境變量.

3、打開cmd到下載的qx目錄qooxdoo-1.6-sdk\tool\bin下。打開python命令執行創建:

a) create-application.py--name=myQXapp –out=輸入目錄

b) 到輸出目錄下\myQXapp中執行 generate.py source-all等下載結束即可在source目錄下看到index.html文件.

c) 初次打開會有一個按鈕.點擊彈出”HelloWorld！”

4、打開\myQXapp\source\class\myqxap\Application.js文件可見其源碼:

//….部分代碼省略
var button1 = new qx.ui.form.Button("First Button","myqxapp/test.png");
// Document is the application root 翻譯:Document是這個應用的根節點
var doc = this.getRoot();
// Add button to document at fixed coordinates 翻譯：在文檔的座標點上添加一按鈕
doc.add(button1, {left: 100, top: 50});
// Add an event listener 翻譯:添加一個事件監聽
button1.addListener("execute", function(e) {
    alert('Hello World!');
});

5、更改其部分源碼即可得到上訴登錄頁面(將倆按鈕刪除即可)

var doc =this.getRoot();
var form = newqx.ui.form.Form();
   form.addGroupHeader('登錄信息');
var loginName =new qx.ui.form.TextField();
   loginName.setWidth(300);
   loginName.name = 'loginName';//這種添加name的方法源於我沒找到怎麼定義該組件的name,獲取form裏的items元素的方法也沒找到,就自定義實現了一個.
   loginName.setPlaceholder("輸入郵箱/手機號/登錄名");
form.add(loginName, '登錄名',function(value,field){
   if(value==null||value==''){return false;}
});
var password =new qx.ui.form.PasswordField();
   password.setWidth(300);
   password.setPlaceholder("輸入密碼...");
   password.setRequired(true);
   password.name = 'password';
form.add(password,"密碼",function(value,field){
   if(value==null||value==''){return false;}
});
 
var submitBtn =new qx.ui.form.Button("提交");
var resetBtn =new qx.ui.form.Button("重置");
   submitBtn.addListener('execute',function(){
     if(form.validate()){
         var manager = form.getValidationManager();
         varitems = manager.getItems();
var result = {};
         for(var i=0,len=items.length;i<len;i++){
                 result[items[i].name] =items[i].getValue();
         }
         console.log(result);//得到的是key:value對象.傳遞到後臺進行登錄驗證
     }else{
             alert('登錄名和密碼不可爲空.');
     }
   });
   resetBtn.addListener('execute',function(){
       form.reset();
   });
   form.addButton(submitBtn);
   form.addButton(resetBtn);
doc.add(newqx.ui.form.renderer.Single(form),{left:200,top:200});

上述案例中經測試發現:其在初次加載的時候耗時>5秒,此僅限於其基礎源碼並且在本機。如果項目需要的話,其加載文件的耗時應該不止大於5秒.

其官方的pdf文檔中有關於創建截圖: