`
laodaobazi
  • 浏览: 276540 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Aptana 构建 Air 项目(集成ExtJS)

阅读更多

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 的运行环境,直接鼠标双击该文件即可安装。




 选择安装即可

 

装好之后会在你的桌面上面出现一个快捷方式的图标



 
直接双击即可运行了。

如图:


 

 
 

  • 大小: 77.6 KB
  • 大小: 7.6 KB
  • 大小: 5.8 KB
  • 大小: 8.3 KB
  • 大小: 9.5 KB
  • 大小: 2.4 KB
  • 大小: 4.5 KB
  • 大小: 1.8 KB
  • 大小: 9.3 KB
  • 大小: 13 KB
  • 大小: 7.4 KB
  • 大小: 2.7 KB
  • 大小: 1.8 KB
  • 大小: 9.3 KB
  • 大小: 1.9 KB
  • 大小: 11.8 KB
分享到:
评论
1 楼 wu8467937 2012-02-02  

相关推荐

    使用 Ext、Aptana 和 AIR 构建桌面应用程序

    读者可能可以通过这个示例学习到如何使用ExtJS构建数据驱动的界面,以及如何利用Aptana和AIR将这个Web应用转换为桌面应用。 总之,这篇文章将对希望通过Web技术开发桌面应用的开发者非常有价值,它涵盖了从开发环境...

    Aptana 的 Extjs 3.1 插件

    Aptana的ExtJS 3.1插件就是为了在Aptana IDE中集成ExtJS的开发支持,使得编写ExtJS代码更加便捷。 安装Aptana的ExtJS 3.1插件的过程相对简单。首先,你需要下载包含`features`和`plugins`两个文件夹的压缩包。`...

    Aptana插件aptana3.4.2

    描述中提到的"MyEclipse插件、Eclipse插件",表明Aptana插件可以无缝集成到这两种流行的Java开发工具中。MyEclipse是一款商业的Eclipse衍生版本,包含了更多用于Java EE和Web开发的特性。通过安装Aptana插件,...

    aptana3 IDE 使用

    Aptana 3还提供了一些实用工具,如集成的Terminal视图,可以方便地运行命令行工具,如Node.js或构建脚本。此外,它还支持插件扩展,可以通过Aptana插件库安装更多功能,如支持其他语言、增加代码格式化工具等。 总...

    Aptana IDE 下载(官网版本)

    如今Aptana Studio 1.0支持如下几大方面的开发功能:1、AJAX开发环境 HTML/JavaScript/CSS编辑器 prototype/dojo等常见AJAX类库集成和提示 JSON编辑器 2、Adobe AIR开发环境 3、Apple iPhone开发环境 4、Ruby on ...

    Aptana_Studio_Setup_2.0.5

    随着苹果公司iPhone手机的发布,Aptana也推出了功能完备的iPhone集成开发功能,在Adobe公司的RIA产品AIR推出不久之后,Aptana就支持了AIR的开发环境。如今Aptana Studio 1.0支持如下几大方面的开发功能: ● 1、AJAX...

    hbuilder aptana hph插件

    标题中的“HBuilder APTANA PHP HPHP插件”指的是HBuilder编辑器的一款扩展...通过分析JAR文件,我们可以看到它涵盖了编辑器的核心功能,如代码编辑、用户界面以及项目管理,这些都是构建强大IDE不可或缺的组成部分。

    带有aptana的myeclipse10下载地址

    将Aptana集成到MyEclipse中,可以极大地增强MyEclipse的功能,特别是对于那些同时进行Java和Web开发的项目。Aptana的加入,使得MyEclipse不仅能够处理复杂的Java应用程序,还能够高效地开发和维护Web应用,包括动态...

    Aptana php的安装

    Aptana是一款功能强大的集成开发环境(Integrated Development Environment, IDE),尤其在Web开发领域享有盛誉。Aptana支持多种编程语言,如JavaScript、HTML、CSS等,并且通过扩展插件的方式,还可以支持更多的...

    aptana studio 3

    安装完毕后,用户可以通过Aptana Studio 3创建新的项目,选择模板或从头开始编写代码。此外,该IDE还提供了丰富的插件市场,用户可以根据个人需求安装额外的工具和扩展,以增强其功能,比如添加对其他编程语言的...

    Aptana+python安装软件.rar

    Aptana Studio 3的集成开发环境还包括项目管理工具,可以方便地创建、组织和管理多个项目。它还支持版本控制,如Git,便于团队协作和代码版本管理。除此之外,该IDE提供了强大的调试工具,无论是Python应用还是Web...

    myeclipse 插件aptana spket properties

    Aptana的配置文件通常包含了关于编辑器、项目设置、服务器配置等方面的细节,用户可以根据个人需求调整这些属性以优化工作流程。 Spket,另一方面,是一个专门针对JavaScript、AJAX和JSON的开发工具,它提供智能...

    Aptana 3.4.2 插件1

    总之,Aptana 3.4.2插件1作为Aptana Studio 3.4.2系列的第一部分,可能包含了一些关键的增强功能或工具,旨在提升开发者的工作效率和项目质量。安装并熟练使用这些插件,是每个Aptana用户提升开发体验的重要步骤。在...

    ExtJs4.2 智能提示+开发工具

    ExtJs4.2是一款强大的JavaScript框架,用于构建富客户端Web应用程序。它提供了丰富的组件库、数据绑定机制和灵活的布局管理,使得开发者可以构建出功能强大且用户界面友好的Web应用。在本“ExtJs4.2 智能提示+开发...

    myeclipse6.5安装Aptana插件

    总之,通过在MyEclipse 6.5中安装Aptana插件,用户可以得到一个集成了强大Web开发功能的IDE,包括源码编辑、项目管理和前端框架支持,尤其对于使用jQuery等JavaScript库的开发者来说,将大大提高开发效率。

    aptana studio 3提示jquery

    Aptana Studio 3是一款强大的集成开发...通过在Aptana Studio 3中集成jQuery,开发者可以享受到强大的代码辅助功能,同时还能利用Aptana的其他高级特性,如实时预览、调试工具和版本控制集成,提高开发效率和代码质量。

    aptana2.0.6

    3. **集成开发环境**:作为Eclipse插件,Aptana Studio充分利用了Eclipse的强大功能,如项目管理、版本控制集成(如Git和SVN)、调试工具以及强大的插件生态系统。这使得开发者可以在同一个环境中处理多种开发任务。...

    myeclipse插件_aptana插件

    【标题】"myeclipse插件_aptana插件"涉及到的是在MyEclipse集成开发环境中安装和使用Aptana Studio 3.6版本插件的相关知识点。MyEclipse是基于Eclipse平台的一款强大的Java EE集成开发环境,而Aptana Studio则是一款...

    使用Aptana+Rails开发Rails Web应用(中文)

    Aptana是一款强大的集成开发环境(IDE),尤其适用于Rails项目的开发,它提供了丰富的特性来提升开发效率。本教程将详细介绍如何使用Aptana与Rails结合,创建一个功能完备的Web应用程序。 首先,我们需要安装Aptana...

Global site tag (gtag.js) - Google Analytics