Aptana 构建 Air 项目（集成ExtJS）

最新推荐文章于 2022-06-04 15:09:01 发布

最新推荐文章于 2022-06-04 15:09:01 发布 · 283 阅读

文章标签：

#AIR #Aptana #项目管理 #EXT #JavaScript #ViewUI

ExtJS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用Aptana Studio集成开发环境配置ExtJS和Adobe Air开发环境，并通过一个通讯录管理示例详细展示了从环境搭建到项目实现及打包部署的全过程。

1、安装Aptana IDE

本程序应用的是Aptana Studio 2.0

2、安装好 Aptana 开发工具之后安装ExtJS及Air插件

点击这里的 Install Plugins 进行安装 ExtJS支持

选择安装 ExtJS ，单击 Get it 我这里已经将ExtJS的支持已经加了进去所以显示 This plugin is up to date

然后安装对 Adobe Air的支持

同上操作选中安装 Adobe AIR1.5

之后去 Adobe 官网上面去下载 AdobeAIRSDK，下载之后进行解压配置到Aptana里面

（你解压文件的跟路径）

其次配置Aptana对JavaScript 的 Code Assist 属性，主要是将 Ext与Adobe AIR勾选上

到此为止对于IDE的环境配置就已经完成了。

现在开始创建一个HelloWorld实例

现在这个HelloWorld创建成功，现在我们运行一下

运行结果：

如果你可以如上图的运行结果，现在我们可以将 ExtJS 集成到项目当中了呵呵

修改 MyAir.html 页面内容：

<html>
	<head>
        <title>ExtJS & AIR Sample</title>
		 <!--引入ExtJS-->
		 <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
         <link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" />
		 <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
    	 <script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
   	 	 <script type="text/javascript" src="lib/ext/air/ext-air.js"></script>
		 <script type="text/javascript" src="lib/ext/air/src/SystemTray.js"></script>
		
		 <!--引入Air-->
         <link href="sample.css" rel="stylesheet" type="text/css"/>
         <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
         <script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
         
		 <script type="text/javascript" src="myAir.js"></script>
	</head>

    <body>
        <div style="margin: 5px">
			<div id="contactList"></div>
		</div>      
    </body>
</html>

添加 myAir.js 文件

/**
 * @author JLee
 */
Ext.onReady(function() {
				
	var contactName = new Ext.form.TextField({
		fieldLabel:'姓名',
		name:'name',
		anchor:'100%'
	});
	var contactEmail = new Ext.form.TextField({
		fieldLabel:'Email地址',
		name:'email',
		anchor:'100%',
		vtype:'email'
	});
	var contactPhone = new Ext.form.TextField({
		fieldLabel:'电话',
		name:'phone',
		anchor:'100%'
	});
	var contactDOB = new Ext.form.DateField({
		fieldLabel:'生日',
		name:'dob',
		anchor:'100%',
		format:'Y-m-d'
	});
	
	var newForm = 
		new Ext.form.FormPanel({
			baseCls: 'x-plain',
			labelWidth: 95,
			defaultType: 'textfield',
			autoShow: true,
			items: [contactName, contactEmail, contactPhone, contactDOB]
		});
					
	var newWin = 
		new Ext.Window({
			title: '添加记录',
			resizable: false,
			width: 300,
			height: 200,
			layout: 'fit',
			bodyStyle: 'padding:5px;',
			closeAction: 'hide',
			plain: true,
			items: newForm,
			buttons: [{
				text: '提交',
				handler: function(){
					contactStore.insert(0, new Ext.data.Record({
						name: contactName.getValue(),
						email: contactEmail.getValue(),
						phone: contactPhone.getValue(),
						dob: contactDOB.getRawValue()
					}));
					this.ownerCt.hide()
					newForm.getForm().reset();
					contactGrid.getSelectionModel().selectFirstRow();
				}
			}, {
				text: '取消',
				handler: function(){
					this.ownerCt.hide()
				}
			}]
		});
		
	var win = 
		new Ext.air.NativeWindow({
			id: 'mainWindow',
			instance: window.nativeWindow,
//			minimizeToTray: true,
			trayIcon: 'icons/AIRApp_16.png',
			trayTip: '通讯管理',
			trayMenu: [{
				text: 'Open',
				handler: function() {
					win.activate();
				}
			}, '-', {
				text: 'Exit',
				handler: function() {
					win.activate();
					Ext.Msg.show({
						title:'Confirm Exit',
						msg:'Are you sure you wish to exit Contact Manager?',
						buttons:Ext.Msg.YESNO,
						fn: function(btn, text) {
							if(btn == "yes") {
								air.NativeApplication.nativeApplication.exit();
							}
						},
						animEl: 'elId',
						icon: Ext.MessageBox.QUESTION
					});
				}
			}]
		});
	
	win.on('closing', function (e) {	
		e.preventDefault();	
		win.activate();			
		Ext.Msg.show({
			title:'系统提示',
			msg:'是否确定真的退出?',
			buttons:Ext.Msg.YESNO,
			fn: function(btn, text) {
				if(btn == "yes") {
					air.NativeApplication.nativeApplication.exit();
				}
			},
			animEl: 'elId',
			icon: Ext.MessageBox.QUESTION
		});
	});
	
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	
    function linkEmail(val){
		return '<a href="mailto:' + val + '">' + val + '</a>';
    }

	var recordArray = [
		{name:'name',mapping:'name' },
		{name:'email',mapping:'email' },
		{name:'phone',mapping:'phone' },
		{name:'dob',mapping:'dob' }
	] ;
	
	var record = 
		new Ext.data.Record.create(recordArray);

	var rowNum = 
		new Ext.grid.RowNumberer();	
	
	var sm = 
		new Ext.grid.CheckboxSelectionModel();	
		
	var cm = 
		new Ext.grid.ColumnModel({
			defaultSortable : true, 
			columns :[
				rowNum ,sm ,
	            {header: "姓名", width: 120, sortable: true, dataIndex: 'name'},
	            {header: "Email地址", width: 160, sortable: true, renderer: linkEmail, dataIndex: 'email'},
	            {header: "电话号码", width: 120, sortable: true, dataIndex: 'phone'},
	            {id:'birth',header: "出生日期", width: 120, sortable: true, dataIndex: 'dob'}
	        ]
		});
		
	var contactStore = 
		new Ext.data.Store({
			proxy : new Ext.data.HttpProxy({url:'data.json',method:'POST'}),
			reader:new Ext.data.JsonReader({
				totalProperty:"totalProperty",
				root:"root"
			},record),
			remoteSort:true 
		});
		
    var contactGrid = new Ext.grid.GridPanel({
        store: contactStore,
		cm : cm ,
		sm : sm ,
        stripeRows: true,
        autoExpandColumn: 'birth',
        autoHeight:true,
		autoWidth : true ,
        title:'联系表',
		tbar : [{
			text:'查询' ,
			handler : function(){
				contactStore.load();
			}
		},{
			text:'添加' ,
			handler : function(){
				newWin.show();
			}
		},{
			text:'修改' ,
			handler:function(){
				alert('');
			}
		},{
			text:'删除' ,
			handler: function() {
				if (contactGrid.getSelectionModel().getCount() == 1) {
					Ext.Msg.show({
						title: '系统提示',
						msg: '是否确认删除这条记录?',
						buttons: Ext.Msg.YESNO,
						fn: function(btn, text){
							if (btn == "yes") {
								contactStore.remove(contactGrid.getSelectionModel().getSelected());
								contactGrid.getSelectionModel().selectFirstRow();
							}
						},
						animEl: 'elId',
						icon: Ext.MessageBox.QUESTION
					});	
				}
			}
		},{
			text : '退出' ,
			handler : function(){
				Ext.Msg.show({
					title:'系统提示',
					msg:'是否真的退出系统?',
					buttons:Ext.Msg.YESNO,
					fn: function(btn, text) {
						if(btn == "yes") {
							air.NativeApplication.nativeApplication.exit();
						}
					},
					animEl: 'elId',
					icon: Ext.MessageBox.QUESTION
				});
			}
		},{
			text:'帮助' ,
			handler:function(){
				new Ext.Window({
					title : '系统说明' ,
					width : 240 ,
					height : 180 ,
					html : 'ExtJS 结合 Air<br />制作人：JLee' ,
					resizable : false ,
					modal : true 
				}).show();
			}
		}]
    });

    contactGrid.render('contactList');

// new Ext.Window({
//           width : 400 ,
//           height : 300 ,
//           items : [contactGrid] ,
// }).show();
	
});

添加 JSON 数据文件 data.json

{
	totalProperty : 2 ,
	root : [{
		name : 'jlee',email:'444823046@qq.com',phone:13582461851 ,dob:'2011-01-01'
	},{
		name : 'Java',email:'444823046@qq.com',phone:13582461851 ,dob:'2011-01-01'
	}]
}

此时的运行结果：

好，项目完成！

接下来的任务是将这个程序打包为 *.air 文件然后安装到自己的机器上。

选中项目 MyAir -->右键单击--> Export --> Adobe AIR Package --> Next -->

然后需要输入 Certificate 与 Certificate Password 如果你是第一次使用可以自己先配置一个 Certificate ，选择右边的 Configure Certificate --> add --> 输入Certificate名字 --> 选择单选按钮(Create new certificate) --> OK

Certificate 与 Certificate Password 输入之后 --> Next --> Finish

好了，很简单吧。

现在到你的工程跟目下就可以找到 MyAir.air 这么一个文件了。

当然现在你的系统如果还没有安装 Adobe AIR Runtime 所以可能显示的是系统未知文件的图标

现在你需要到Adobe 网站上面去下载 Adobe AIR Runtime 的安装文件
下载到本机之后双击安装 AdobeAIRInstaller.exe

安装之后 MyAir.air 文件显示的样子为