- 浏览: 276540 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhuzhuhenzhencheng:
密码是什么啊
Ext表格(Grid)上面的悬浮提示 -
鹿惊_:
确实如雪中送炭般温暖!
Ext扩展整理后吐血奉献 -
ortega1_2_3:
该版本貌似有bug,当sockIOPool的自平衡线程self ...
Java MemCached Window简单实现 -
q6952592:
好。解决了我的兼容模式下出现的问题。
Ext表格(Grid)上面的悬浮提示 -
fei33423:
请参考 fei33423的文章 java中直接调用groovy ...
Groovy应用(Java与Groovy间相互调用)
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 的运行环境,直接鼠标双击该文件即可安装。
选择安装即可
装好之后会在你的桌面上面出现一个快捷方式的图标
直接双击即可运行了。
如图:
发表评论
-
JSON查看工具
2012-03-09 22:26 0Eclipse 的json插件: 这款插件主要功能是把jso ... -
gzip压缩JavaScript
2012-02-13 17:14 5748为了提高客户端的体验效果,RIA开发逐渐兴起。这样 ... -
Ext扩展整理后吐血奉献
2012-01-19 13:58 7193对 Ext 扩展的一些小总结 1、multicombo (多 ... -
JSON LIB转化时间
2011-11-02 09:32 1381Ext Grid显示Json lib 转化时间为object的 ... -
JS计算日期差
2011-09-24 14:04 1606function Computation(sDate1,sDa ... -
将Air文件转换为EXE进行部署
2011-06-14 17:21 1734如果你的air sdk还没有升级到2.0 那显然是不行的. ... -
禁止IE的backspace键(退格键),但输入文本框时不禁止
2011-06-09 09:59 3696Ext实现方式: Ext.getDoc().on('keyd ... -
Ext中集成在线编辑器Ext.ux.TinyMCE
2011-05-31 15:46 3104Ext.ux.TinyMCE第三方对Ext 在线编辑器的扩展, ... -
Ex的Ajax请求实现同步
2011-05-31 15:29 1365Ext2,.x的Ajax实现同步 Ext.lib.Ajax. ... -
JS实现将XML转化为JSON
2011-05-31 15:09 5595直接上代码 xmlToJson={ parser: ... -
Ext表格(Grid)上面的悬浮提示
2011-05-30 16:36 7624方法一 使用render //鼠标放在Grid上面显示提示 ... -
开发者最容易犯的13个JavaScript错误
2011-04-25 10:28 7221.for.. 数组迭代的用法 U ... -
Ext皮肤切换
2011-04-22 10:46 3353/** * @author JLee * @since ... -
JS获取屏幕大小
2011-04-18 16:56 1248<html> <script> f ... -
在js中对中文和特殊字符转码
2011-04-14 14:21 3954直接上代码 js对文字进行编码涉及3个函数:escape,e ... -
XTemplate
2011-03-16 14:07 4569Ext XTemplate的应用: template. ... -
读取Properties文件中的内容填充本地combo
2011-03-10 16:24 1852首先定义一个properties文件放到classpath路径 ... -
汉字转换为拼音
2011-03-09 10:11 4608首先定义一个html页面: ... -
Ext Grid 实现批量添加或者修改
2011-03-02 22:30 4513将ExtJS Grid 中的record逐一转化为Bean,实 ... -
ExtJS中submit与Ajax的success
2010-11-12 23:10 7918Ajax中使用Success使用response接收后台传来的 ...
相关推荐
读者可能可以通过这个示例学习到如何使用ExtJS构建数据驱动的界面,以及如何利用Aptana和AIR将这个Web应用转换为桌面应用。 总之,这篇文章将对希望通过Web技术开发桌面应用的开发者非常有价值,它涵盖了从开发环境...
Aptana的ExtJS 3.1插件就是为了在Aptana IDE中集成ExtJS的开发支持,使得编写ExtJS代码更加便捷。 安装Aptana的ExtJS 3.1插件的过程相对简单。首先,你需要下载包含`features`和`plugins`两个文件夹的压缩包。`...
描述中提到的"MyEclipse插件、Eclipse插件",表明Aptana插件可以无缝集成到这两种流行的Java开发工具中。MyEclipse是一款商业的Eclipse衍生版本,包含了更多用于Java EE和Web开发的特性。通过安装Aptana插件,...
Aptana 3还提供了一些实用工具,如集成的Terminal视图,可以方便地运行命令行工具,如Node.js或构建脚本。此外,它还支持插件扩展,可以通过Aptana插件库安装更多功能,如支持其他语言、增加代码格式化工具等。 总...
如今Aptana Studio 1.0支持如下几大方面的开发功能:1、AJAX开发环境 HTML/JavaScript/CSS编辑器 prototype/dojo等常见AJAX类库集成和提示 JSON编辑器 2、Adobe AIR开发环境 3、Apple iPhone开发环境 4、Ruby on ...
随着苹果公司iPhone手机的发布,Aptana也推出了功能完备的iPhone集成开发功能,在Adobe公司的RIA产品AIR推出不久之后,Aptana就支持了AIR的开发环境。如今Aptana Studio 1.0支持如下几大方面的开发功能: ● 1、AJAX...
标题中的“HBuilder APTANA PHP HPHP插件”指的是HBuilder编辑器的一款扩展...通过分析JAR文件,我们可以看到它涵盖了编辑器的核心功能,如代码编辑、用户界面以及项目管理,这些都是构建强大IDE不可或缺的组成部分。
将Aptana集成到MyEclipse中,可以极大地增强MyEclipse的功能,特别是对于那些同时进行Java和Web开发的项目。Aptana的加入,使得MyEclipse不仅能够处理复杂的Java应用程序,还能够高效地开发和维护Web应用,包括动态...
Aptana是一款功能强大的集成开发环境(Integrated Development Environment, IDE),尤其在Web开发领域享有盛誉。Aptana支持多种编程语言,如JavaScript、HTML、CSS等,并且通过扩展插件的方式,还可以支持更多的...
安装完毕后,用户可以通过Aptana Studio 3创建新的项目,选择模板或从头开始编写代码。此外,该IDE还提供了丰富的插件市场,用户可以根据个人需求安装额外的工具和扩展,以增强其功能,比如添加对其他编程语言的...
Aptana Studio 3的集成开发环境还包括项目管理工具,可以方便地创建、组织和管理多个项目。它还支持版本控制,如Git,便于团队协作和代码版本管理。除此之外,该IDE提供了强大的调试工具,无论是Python应用还是Web...
Aptana的配置文件通常包含了关于编辑器、项目设置、服务器配置等方面的细节,用户可以根据个人需求调整这些属性以优化工作流程。 Spket,另一方面,是一个专门针对JavaScript、AJAX和JSON的开发工具,它提供智能...
总之,Aptana 3.4.2插件1作为Aptana Studio 3.4.2系列的第一部分,可能包含了一些关键的增强功能或工具,旨在提升开发者的工作效率和项目质量。安装并熟练使用这些插件,是每个Aptana用户提升开发体验的重要步骤。在...
ExtJs4.2是一款强大的JavaScript框架,用于构建富客户端Web应用程序。它提供了丰富的组件库、数据绑定机制和灵活的布局管理,使得开发者可以构建出功能强大且用户界面友好的Web应用。在本“ExtJs4.2 智能提示+开发...
总之,通过在MyEclipse 6.5中安装Aptana插件,用户可以得到一个集成了强大Web开发功能的IDE,包括源码编辑、项目管理和前端框架支持,尤其对于使用jQuery等JavaScript库的开发者来说,将大大提高开发效率。
Aptana Studio 3是一款强大的集成开发...通过在Aptana Studio 3中集成jQuery,开发者可以享受到强大的代码辅助功能,同时还能利用Aptana的其他高级特性,如实时预览、调试工具和版本控制集成,提高开发效率和代码质量。
3. **集成开发环境**:作为Eclipse插件,Aptana Studio充分利用了Eclipse的强大功能,如项目管理、版本控制集成(如Git和SVN)、调试工具以及强大的插件生态系统。这使得开发者可以在同一个环境中处理多种开发任务。...
【标题】"myeclipse插件_aptana插件"涉及到的是在MyEclipse集成开发环境中安装和使用Aptana Studio 3.6版本插件的相关知识点。MyEclipse是基于Eclipse平台的一款强大的Java EE集成开发环境,而Aptana Studio则是一款...
Aptana是一款强大的集成开发环境(IDE),尤其适用于Rails项目的开发,它提供了丰富的特性来提升开发效率。本教程将详细介绍如何使用Aptana与Rails结合,创建一个功能完备的Web应用程序。 首先,我们需要安装Aptana...