ext 打包桌面应用程序_使用Ext构建富Internet应用程序

ext 打包桌面应用程序

Ext(可从extjs.com获得 )是一个JavaScript开发框架,由受人尊敬JavaScript专家Jack Slocum发起和维护。 通过提供不断增长JavaScript类结构来解决与使用JavaScript开发富Internet应用程序(RIA)相关的许多常见问题,Ext可以潜在地为您节省数月的Web应用程序工作量。

在本文中,我将向您简要介绍Ext的本质和作用-为什么我认为我们作为Web开发人员需要它,以及它如何使RIA的开发变得如此容易。 我们将回答以下问题:实际上,什么是Ext? 为什么我们需要它?

定义“丰富的Internet应用程序”

众所周知,在本文中,我故意删除了广为人知(并大肆宣传)的“ Ajax”和“ Web 2.0”术语,因为在我看来,它们的真正含义似乎仍然有些混乱。 但是,“丰富应用程序”的定义是公认的。 该术语定义了具有功能丰富的用户界面的应用程序-与我们日常使用的任何桌面应用程序一样,具有响应能力和智能的应用程序。 Adobe Photoshop和Microsoft Excel(如下所示)是丰富的桌面应用程序的很好的例子。

Microsoft Excel:丰富的桌面应用程序

那么,为什么我们需要RIA? 我们已经在桌面上拥有了所需的所有应用程序,对吗? 好吧,尽管这是事实,但越来越多的公司正在接受RIA概念,用基于Web的等效物替代其传统的桌面应用程序。 当然,这种方法最明显的好处是,您的潜在客户可以从可以访问Web浏览器和Internet连接的任何位置获得对您的应用程序的完全访问权限。 对于使用不仅由第三方开发而且由第三方管理和运行的应用程序的客户,将操作关键任务应用程序的责任移交给外部方,这有可能释放内部资源。

Google Spreadsheets:Rich Internet Application,Google Spreadsheets(RIA)

通过Web分发应用程序属于SaaS(软件即服务)概念,该概念在过去几年中已成为业界最热门的主题之一。 SaaS的采用在北美已经很普遍,并且有人希望它很快就会在欧洲起飞

SaaS和RIA的概念紧密相关:SaaS的潜在成功自然取决于市场生产优质Web应用程序的潜力:人们不会愿意放弃他们的传统软件,除非基于Web的替代方法被证明同样出色。 为了构建可与传统桌面应用程序竞争的Web应用程序,我们需要向传统的静态Web添加另一个维度。 这就是Ext出现的地方。 但是首先,让我们看一下开发人员在开发RIA时传统上所遇到的问题。

开发丰富的Internet应用程序

可以使用几种不同的技术来开发RIA:Java Applet,Flash和Microsoft的XBAP是可以用作平台的技术。 但是,已被最广泛采用的技术(实际上已成为事实上的标准)是JavaScript。 通过使用JavaScript动态更改加载到用户浏览器中HTML和CSS,开发人员发现了一种创建看起来像真实应用程序并具有HTML的所有可访问性和SEO优点的网站的方法。

但是这种方法并非没有缺点:许多用户界面必须从头开始创建。 例如,使用Windows窗体开发Windows桌面应用程序时,您具有一组预定义的小部件,这些小部件会自动生成美观的表,树,对话框,上下文菜单,工具栏等。 这些小部件都不存在于JavaScript中。 毕竟,JavaScript和CSS处于较低的技术水平,因此使用这些技术从头开始编程高级用户界面非常复杂,或者至少非常麻烦。

当然,上述构件的许多示例已经存在,它们作为代码示例甚至免费软件分布在Internet的各个站点上。 因此,如果您要付出一些努力,则可能会找到构建RIA所需的大多数构建块的工作版本或至少代码示例。 问题在于这些代码示例分散在整个Internet上,并且它们的质量和样式都不同。 当您将这种方法与从头开始做的一切进行比较时,收集JavaScript代码并使用您发现的内容作为应用程序的基础可能会节省大量开发时间。 但这可能还需要您更改发现的许多代码才能获得一致的外观。 此外,您无法保证会得到更新或错误修复,这会使这种方法不理想。

如果我们想轻松地开发出统一,专业,易于使用且稳定的RIA,则显然必须克服一些问题。

分机来救援

简而言之,Ext满足了我们的需求-一个稳定,统一JavaScript平台,用于构建富Web应用程序。 最初基于Yahoo! UI库 ,Ext看起来很有前途。 但是,上周发布2.0版时,该库已发展成为可能最强大JavaScript库,可用于开发丰富的Web用户界面。

当然,还有其他一些选择,例如Dojo和Yahoo!。 UI库,但是有一些关键点结合在一起使Ext在人群中脱颖而出。 这些要点包括:

  • Ext非常快。 在编写JavaScript时,性能通常是一个问题。
  • Ext以100%面向对象,结构良好,一致的方式实现。 这使得该库快速学习,并且代码易于阅读和理解。
  • 具有一致基础的模块化实现使该库易于扩展。
  • 所有Ext元素(小部件)都可以使用。 与许多其他库相反,这些小部件按原样可用,具有预定义的样式,设置和行为。 尽管如此,所有元素都是完全可定制的,并且可以根据需要进行主题设置。
  • Ext开发人员非常敬业和称职,并且对用户的需求有了解,最重要的是有兴趣。 Ext文档是详尽且完整的工作示例。
  • Ext社区非常活跃,基调通常非常积极。
  • Ext可以在免费和商业许可下使用。
  • 最后但并非最不重要的一点是,Ext看起来非常漂亮!

对于其他库,其中的某些(或什至全部)也是正确的。 我不假装没有其他优秀的替代方案,在决定坚持使用之前,您应该研究所有方案。 但是,以我的经验,Ext给出了最佳的总体印象,这就是为什么我决定使用它。

让我们看一下Ext可以为我们做什么的一个简单示例。 假设我们想在应用程序中实现图形淡入淡出功能-可以用来使对象以看起来令人愉悦的方式出现和消失的东西。 这是在不使用Ext的情况下用纯JavaScript可能实现的功能:

<html>
 <head>  
   <title>Fading without Ext</title>  
 </head>  
 <body>  
   <div  
     id="my-element-to-fade"  
     style="width:100px;height:100px;background-color:Red">  
   </div>  
   <br />  
   <button onclick="shiftOpacity('my-element-to-fade', 1000);">  
     Fade!  
   </button>  
         
   <script type="text/javascript">  
     function changeOpacity(opacity, id)  
     {  
       var object = document.getElementById(id).style;  
       object.opacity = (opacity / 100);  
       object.MozOpacity = (opacity / 100);  
       object.KhtmlOpacity = (opacity / 100);  
       object.filter = "alpha(opacity=" + opacity + ")";  
     }  
         
     function setOpacity(id, opStart, opEnd, ms)  
     {              
       var speed = Math.round(ms / 100);  
       var timer = 0;  
 
       if(opStart > opEnd)  
       {  
         for(i = opStart; i >= opEnd; i--)  
         {  
         setTimeout(  
           "changeOpacity(" + i + ",'" + id + "')",  
           (timer * speed)  
         );  
           timer++;  
         }  
       }  
       else if(opStart < opEnd)  
       {  
         for(i = opStart; i <= opEnd; i++)  
         {  
           setTimeout(  
             "changeOpacity(" + i + ",'" + id + "')",  
             (timer * speed)  
           );  
           timer++;  
         }  
       }  
     }  
             
     function shiftOpacity(id, ms)  
       {  
         if(document.getElementById(id).style.opacity == 0)  
         {  
           setOpacity(id, 0, 100, ms);  
         }  
         else  
         {  
           setOpacity(id, 100, 0, ms);  
         }  
       }  
   </script>  
 </body>  
</html>

这段代码生成一个简单的页面,上面只有一个红色正方形和一个按钮( 查看演示 )。 单击该按钮会根据当前是否可见来淡入或淡出红色方块。 该功能运行良好,但是如您所见,它需要很多行(丑陋的)代码。 幸运的是,我们可以使用Ext实现完全相同的功能,但所需的代码要少得多(如果您想在家玩,请下载Ext ):

<html>
 <head>  
   <title>Fading with Ext</ title>  
   <script  
     type="text/javascript"  
     src="ext/adapter/prototype/prototype.js">  
   </script>  
   <script  
     type="text/javascript"  
     src="ext/adapter/prototype/scriptaculous.js?load=effects">  
   </script>  
   <script  
     type="text/javascript"  
     src="ext/adapter/prototype/ext-prototype-adapter.js">  
   </script>  
   <script  
     type="text/javascript"  
     src="ext/ext-all.js">  
   </script>  
 </head>  
 <body>  
   <div  
     id="my-element-to-fade"  
     style="width:100px;height:100px;background-color:Red;">  
   </div>  
   <button onclick="showHide('my-element-to-fade');" style="margin-top: 10px;">  
     Fade!  
   </button>  
   <script type="text/javascript">  
     function showHide(id)  
     {  
       Ext.get(id).toggle(true);  
     }  
   </script>  
 </body>  
</html>

这两个代码示例都给出了完全相同的结果,如下所示( 请参阅参考资料 )。

免费学习PHP!

全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

JavaScript衰落示例

在这些示例中,我们感兴趣的代码就是您在两个代码清单的<script>标记之间看到的代码。 尽管这是一个非常简单的示例,但差异非常明显。 如果将其放在更大的上下文中(例如成熟的基于Web的文字处理器),您可以想象使用Ext这样的库可能会产生什么变化。

摘要

Ext JavaScript库可以使您免于头疼。 七年前,在诸如Ajax和Rich Internet Application之类的词出现之前,我加入了一个团队,该团队开始开发功能齐全的基于Web的业务系统。 我们希望使其成为基于桌面系统的替代品,因此必须具有丰富而智能的用户界面。 那时,甚至没有接近Ext的东西存在,并且尽管今天我们的系统实现了我们需要的一切,但是毫无疑问的是,如果从一开始就存在Ext之类的东西,它将大大减少开发工作。

正如我在本文中多次提到的那样,Ext是一个非常一致的库-许多功能可以在整个库中找到。 这意味着从一开始就把事情做好,这一点很重要,因为在前进到更高级(更有趣)的功能时,它将为您提供很多帮助。

翻译自: https://www.sitepoint.com/build-rich-applications-ext/

ext 打包桌面应用程序

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值