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 文件显示的样子为
这就说明 你已成功安装 Adobe Air 的运行环境,直接鼠标双击该文件即可安装。
选择安装即可
装好之后会在你的桌面上面出现一个快捷方式的图标
直接双击即可运行了。
如图: