根我一步一步学Qooxdoo
2015-11-02 16:09
190 查看
Qooxdoo入门
qooxdoo(发音['kuksdu:])和EasyUI,ExtJS 相似,是一种基于浏览器建立用户友好,界面表现丰富RIA应用系统的通用JavaScript框架。Qooxdoo的核心是完全基于类,并充分利用了JavaScript面向对象的功能。它的命名空间功能使用户很方便的管理和组织自己的代码,且很容易与其他JS类库进行集成。Qooxdoo支持大多数现代浏览器(如Firefox, IE, Opera, Safari, Chrome)。它本身集成的工具链不仅可以象Javadoc那样自动生成API文档,还允许快速完整的应用系统进行自动构建、优化、压缩、链接和部署。它的核心功能还包括了国际化和本地化功能,可以自动生成不同国家和语言的应用程序。qooxdoo是开放源代码的,基于LGPL和EPL双协议,也就是说它可以免费使用,无论您是个人使用还是商业应用。
以上对qooxdoo做了一个简单的介绍,下面我们就一步一步的进行学习。
一、Qooxdoo开发环境设置
由于qooxdoo自带工具使用Python脚本语言,因此环境设置的第一步是下载ActivePython脚本语言程序交并安装,打开下载网址:http://www.activestate.com/activepython/downloads
Qooxdoo使用的版本为2.7,因此我们点击下载2.7.10版本。下载完成后运行安装程序,并按默认设置进行安装。安装成功后在cmd窗口运行命令python,如出现下面内容表明安装成功。
如提示找不到python命令,请设置python环境变量(http://jingyan.baidu.com/article/48206aeafdcf2a216ad6b316.html)。
第二步需要下载qooxdoo的框架源码。打开下载地址:http://qooxdoo.org/downloads
由于我们开发是的RIA程序,所以请下载Desktop版,当前最新版为5.0.1,下载完成后将qooxdoo-5.0.1-sdk.zip压缩文件解压到你的WEB服务器目录下(其它目录下也可以,这里为了讲解决方法请使用c:\web_app\webroot\qx)。这时在D:\WebRoot目录下应有一个Qooxdoo-5.0.1目录,结构如下:
到这里qooxdoo的开发及运行环境就设置完成了。
二、第一个qooxdoo程序。
使用qooxdoo系统自带的工具生成第一个qooxdoo程序框架。进行d:\webroot\qooxdoo5.0.1目录执行create-application.py命令。
此时在c:\web_app\webroot\qx目录以会自动生成子目录qxtest。
参数说明:-n 应用名称 -t 应用类型 -o 程序输出目录
使用cmd窗口进行这个目录。使用generate.py命令对系统进行代码编译。
现在你可以打开一个浏览器,输入地址:http://127.0.0.1/qx/qxtest/source查看框架的效果。
浏览器出现上面的按钮表示我们的第一个qooxdoo程序顺利完成。
三、第一个qooxdoo窗口
下面利用我开发的qooxdoo可视化窗口设计器设计开发第一个qooxdoo窗口。请到百度网盘下载qooxdoo可视化开发工具(地址:http://download.csdn.net/detail/qhdcsj/9235547)QXDesigner.exe,运行它会打开应用程序界面如下图:
点击新建按钮
,创建一个新的窗口(具体IDE操作可以参考Delphi的IDE操作)。
设置窗口的名称为qxtest_WinMain(格式为qooxdoo的命名空间加下划线加窗口名称)。
通过Caption属性设置窗口标题,通过Icon属性设置窗口的标题栏使用的图标(如不设置窗口只显示标题)
点击工具栏中
按钮选择qooxdoo的js文件及图标所保存的目录并进行代码自动生成。
这时系统会自动弹出对话框显示所生成的代码。
并且在你所选择的目录下生成WinMain.js文件以及WinMain目录。
将WinMain.js文件拷贝到C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest目录下。将WinMain目录整个拷贝到C:\WEB_APP\webroot\qx\qxtest\source\resource\qxtest目录下。使用文本编辑工具编辑文件C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest\Application.js文件。
将button1的单击事件代码修改为如上图所示内容。
执行generate.py source命令重新编译代码。再次使用浏览器打开我们的qooxdoo应用并点击按钮,程序就会打开刚刚设计的qooxdoo窗口。如下图所示:
当打缺口个窗口时发现它每次都出现在浏览器的左上角,我们在Application.js文件中加入下面的代码将窗口打开时居中显示。
当然,上面的例子只是一个空窗体,它还没有任何功能。
注:这一节中使用的窗口设计器中的Form窗体可以使用属性有:
Caption:窗口标题
BorderIcons:窗口右上角三个按钮是否显示。
Name:窗口的名称。这个名称必须是应用的命名空间+下划线+窗口名称的格式。
Width:窗口宽
Height:窗口高
Icon:窗口标题栏图标
Font:窗口字体
四:TextField,Button组件。
这一节我们使用TextField,Button组件来完成一个简单的应用,即点击按钮时将输入框1中输入的内容显示到输入框2中。我们使用窗体设计器设计界面如下图:
选择按钮的Events标签,双击OnClick定义按钮单击事件。
生成WinMain.js文件
将WinMain.js文件拷贝到C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest目录下覆盖原来的文件。使用文本编辑器打开这个文件。在QxButton1的单击事件中录入下面的代码
使用执行generate.py source命令重新编译代码。再次使用浏览器打开我们的qooxdoo应用并点击按钮打开qooxdoo窗口。此时单击QxButton1按钮,QxTextField1内容就会显示到QxTextField2中。
注:本节中QxTextField控件可以使用的属性有:
Value,Name,Height,Width,Left,Top,Font
QxButton控件可以使用的属性有:
Caption,Name,Layout,Glyph,Height,Width,Left,Top,Font
事件:OnClick
qooxdoo(发音['kuksdu:])和EasyUI,ExtJS 相似,是一种基于浏览器建立用户友好,界面表现丰富RIA应用系统的通用JavaScript框架。Qooxdoo的核心是完全基于类,并充分利用了JavaScript面向对象的功能。它的命名空间功能使用户很方便的管理和组织自己的代码,且很容易与其他JS类库进行集成。Qooxdoo支持大多数现代浏览器(如Firefox, IE, Opera, Safari, Chrome)。它本身集成的工具链不仅可以象Javadoc那样自动生成API文档,还允许快速完整的应用系统进行自动构建、优化、压缩、链接和部署。它的核心功能还包括了国际化和本地化功能,可以自动生成不同国家和语言的应用程序。qooxdoo是开放源代码的,基于LGPL和EPL双协议,也就是说它可以免费使用,无论您是个人使用还是商业应用。
以上对qooxdoo做了一个简单的介绍,下面我们就一步一步的进行学习。
一、Qooxdoo开发环境设置
由于qooxdoo自带工具使用Python脚本语言,因此环境设置的第一步是下载ActivePython脚本语言程序交并安装,打开下载网址:http://www.activestate.com/activepython/downloads
Qooxdoo使用的版本为2.7,因此我们点击下载2.7.10版本。下载完成后运行安装程序,并按默认设置进行安装。安装成功后在cmd窗口运行命令python,如出现下面内容表明安装成功。
如提示找不到python命令,请设置python环境变量(http://jingyan.baidu.com/article/48206aeafdcf2a216ad6b316.html)。
第二步需要下载qooxdoo的框架源码。打开下载地址:http://qooxdoo.org/downloads
由于我们开发是的RIA程序,所以请下载Desktop版,当前最新版为5.0.1,下载完成后将qooxdoo-5.0.1-sdk.zip压缩文件解压到你的WEB服务器目录下(其它目录下也可以,这里为了讲解决方法请使用c:\web_app\webroot\qx)。这时在D:\WebRoot目录下应有一个Qooxdoo-5.0.1目录,结构如下:
到这里qooxdoo的开发及运行环境就设置完成了。
二、第一个qooxdoo程序。
使用qooxdoo系统自带的工具生成第一个qooxdoo程序框架。进行d:\webroot\qooxdoo5.0.1目录执行create-application.py命令。
此时在c:\web_app\webroot\qx目录以会自动生成子目录qxtest。
参数说明:-n 应用名称 -t 应用类型 -o 程序输出目录
使用cmd窗口进行这个目录。使用generate.py命令对系统进行代码编译。
现在你可以打开一个浏览器,输入地址:http://127.0.0.1/qx/qxtest/source查看框架的效果。
浏览器出现上面的按钮表示我们的第一个qooxdoo程序顺利完成。
三、第一个qooxdoo窗口
下面利用我开发的qooxdoo可视化窗口设计器设计开发第一个qooxdoo窗口。请到百度网盘下载qooxdoo可视化开发工具(地址:http://download.csdn.net/detail/qhdcsj/9235547)QXDesigner.exe,运行它会打开应用程序界面如下图:
点击新建按钮
,创建一个新的窗口(具体IDE操作可以参考Delphi的IDE操作)。
设置窗口的名称为qxtest_WinMain(格式为qooxdoo的命名空间加下划线加窗口名称)。
通过Caption属性设置窗口标题,通过Icon属性设置窗口的标题栏使用的图标(如不设置窗口只显示标题)
点击工具栏中
按钮选择qooxdoo的js文件及图标所保存的目录并进行代码自动生成。
这时系统会自动弹出对话框显示所生成的代码。
并且在你所选择的目录下生成WinMain.js文件以及WinMain目录。
将WinMain.js文件拷贝到C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest目录下。将WinMain目录整个拷贝到C:\WEB_APP\webroot\qx\qxtest\source\resource\qxtest目录下。使用文本编辑工具编辑文件C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest\Application.js文件。
将button1的单击事件代码修改为如上图所示内容。
执行generate.py source命令重新编译代码。再次使用浏览器打开我们的qooxdoo应用并点击按钮,程序就会打开刚刚设计的qooxdoo窗口。如下图所示:
当打缺口个窗口时发现它每次都出现在浏览器的左上角,我们在Application.js文件中加入下面的代码将窗口打开时居中显示。
当然,上面的例子只是一个空窗体,它还没有任何功能。
注:这一节中使用的窗口设计器中的Form窗体可以使用属性有:
Caption:窗口标题
BorderIcons:窗口右上角三个按钮是否显示。
Name:窗口的名称。这个名称必须是应用的命名空间+下划线+窗口名称的格式。
Width:窗口宽
Height:窗口高
Icon:窗口标题栏图标
Font:窗口字体
四:TextField,Button组件。
这一节我们使用TextField,Button组件来完成一个简单的应用,即点击按钮时将输入框1中输入的内容显示到输入框2中。我们使用窗体设计器设计界面如下图:
选择按钮的Events标签,双击OnClick定义按钮单击事件。
生成WinMain.js文件
将WinMain.js文件拷贝到C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest目录下覆盖原来的文件。使用文本编辑器打开这个文件。在QxButton1的单击事件中录入下面的代码
使用执行generate.py source命令重新编译代码。再次使用浏览器打开我们的qooxdoo应用并点击按钮打开qooxdoo窗口。此时单击QxButton1按钮,QxTextField1内容就会显示到QxTextField2中。
注:本节中QxTextField控件可以使用的属性有:
Value,Name,Height,Width,Left,Top,Font
QxButton控件可以使用的属性有:
Caption,Name,Layout,Glyph,Height,Width,Left,Top,Font
事件:OnClick
相关文章推荐
- OpenCV学习:fastAtan2函数解密
- Oracle数据库SqlLoad常用技巧总结
- 随机分布画墙相册
- HDU 5521 Meeting 最短路
- python实现拷贝指定文件到指定目录
- uboot---linux
- typedef
- Android 开发中,有哪些坑需要注意?
- 第4周实践项目2--建设“单链表”算法库
- <iOS>UIScrollView实践经验
- Nginx内存管理及数据结构浅析–共享内存的实现
- 学习iOS设计:iOS8的颜色、文字和布局学习
- Objective-OC中的Category(分类)
- 在CentOS 7 上安装 icinga2
- Lisp的本质
- ofbiz实体 查询
- 01电话拨号器
- kill用法详细解释(特别是信号量9的使用以及理解)
- JDK所有旧版本在官网中的下载地址
- HTTP协议详解之请求篇