我的技术贴的首发地址:http://atian25.javaeye.com/

天猪部落阁 - (ExtJS && AS3 && Java)

专注于ExtJS && AS3 && Java

常用链接

统计

FLASH

WORK

友情链接

最新评论

2008年8月25日 #

ExtJS 3.0 在skpet里面的代码提示 (含破解jar)

原文地址:http://atian25.javaeye.com/blog/426824


官方的extjs3.0包里面没有提供ext.jsb文件.

于是去官方论坛问了下, 3.0他们提供的是jsb2,基于json的.

现在spket还不支持。

 

有人重新做了个临时的3.0的jsb文件,如附件。

 

用法:

 

1.下载后放到3.0的src目录下 (一定要切记...我就是一时糊涂放错了...在官方那闹了笑话 -.-!!)

 

2.然后在skpet中如下图设置:

 


 

 

3.设置为默认profile


 

4.设置完后,关闭所有标签页 ,重启skpet就ok了.

 

5.提示效果如下图:


 

 

关于spket和extjs的ide,请参考:http://www.javaeye.com/topic/161161

 

 

09.07.23更新:

skpet出新版本了,支持extjs的jsb2.官方下载:

Spket IDE 1.6.17 released - 22 July 2009

http://spket.com/

 

09.08.11更新

spket1.6.16的破解包,覆盖即可.

 下载地址见http://atian25.javaeye.com/blog/426824文末


09.08.12更新:

ext.jsb2已经包含在官方的压缩包里面了.

或者你可以从我另一篇blog中下载:http://atian25.javaeye.com/admin/blogs/445480

注意:

1.该jsb2文件需要spket1.6.17

2.放置目录为根目录而不是src目录 (跟前面的jsb文件不同)

 

- by tz

posted @ 2009-08-13 21:50 天猪 阅读(2653) | 评论 (2)编辑 收藏

ExtJS 2.3/3.0 定制你所需要的模块

原文地址:http://atian25.javaeye.com/blog/445480  
天猪部落阁 - 专注于(ExtJS && AS3 && Java)
附件地址见原文地址文末

很实在的一个需求,就是我们只需要extjs的一部分功能,不想把整个类库都包含进来.

 

所以让我们来定制extjs吧~

 

 

1. ExtJS 1.1.1或2.3.0

 

可以用官方的在线工具来定制:http://extjs.com/products/extjs/build/

 

使用教程:

e文:http://extjs.com/learn/Tutorial:Building_Ext_From_Source

中文:http://extjs.org.cn/node/364

 

2. EXTJS 3.0

 

现在还没有在线版,可以通过以下方法来自己定制:

 

1. 下载Ext 3.0.0 SDK. http://extjs.com/products/extjs/download.php?dl=extjs3 
2. 下载JSBuilder2. http://extjs.com/products/jsbuilder/   (或者看文末的附件)
3. 下载Ext 3.0.0的ext.jsb2文件   http://extjs.com/forum/showthread.php?p=354473  (或者看文末的附件)

4.  把JSBuilder2解压jar到extjs根目录下,ext.jsb2也放到根目录下

5.  用你的文本编辑器编辑ext.jsb2文件,仅保留你需要的模块

6.  jsb2文件中的deployDir: 'ext-3.0.0-build'表示相对输出目录

7.  cmd,切换到ext根目录下,执行:

 

G:\Learning\Web\Javascript\ExtJS\ext-3.0.0> java -jar "JSBuilder2.jar" -p ./ext.jsb2 -d ./ 

 

8.等待刷屏完毕后去你在jsb2中指定的目录下找输出吧.

 

 

3.试验

一个试验的例子,仅包含Tree组件,如附件

 

1) resource部分未作过滤

2) 注意依赖关系,如

        name: 'Trees',
        file: 'pkgs/pkg-tree.js',
        isDebug: true,
        pkgs: ['pkgs/cmp-foundation.js']

 

3)输出的文件树如下:

 

adapter\
|--ext\
|----ext-base.js 
|----ext-base-debug.js

pkgs\
|--cmp-foundation.js 
|--ext-foundation.js 
|--pkg-tree.js 
|--cmp-foundation-debug.js
|--ext-foundation-debug.js
|--pkg-tree-debug.js

resources\
license.txt

posted @ 2009-08-13 21:48 天猪 阅读(2246) | 评论 (1)编辑 收藏

ExtJS 3.0 Designer Preview (官方的IDE可视化工具)

原文地址: http://atian25.javaeye.com/blog/444581

 

官方大爆料... http://extjs.com/blog/2009/08/10/ext-js-30-be-outstanding/

 

Ext JS 3.0.0 Patch Release  --- 要收费...等流放吧 ^_^
Ext JS Public Commit Log 
JS Builder 2 
CSS Refactor & Improvements 
Memory Management Improvements

 

Designer Preview

 

Constructing your interfaces in code will be a thing of the past. We are releasing a Designer Preview that will allow you to experiment with the designer interface and to explore how configs affect your layout. Soon, you will be able to build your application components using base Ext components and Certified User Extensions.

Code generation is currently not available. Our intentions are to charge a fee for this service and to enable our community to create and sell their creations on our marketplace. Our goals are lofty. We want to be the iTunes of Web App Development.

 

附件中有下载.

 

预览版还不提供代码生成功能.出了也是会收费的...

不过嘛...群众的智慧...

 

另,安装该AIR应用后,可以自己去看下\Ext Designer Preview\deploy\designer-complete.js的源码.

http://jsbeautifier.org/ 来格式化

附件中也有格式化后的代码,9k行.




下载地址见http://atian25.javaeye.com/blog/444581文末



posted @ 2009-08-13 21:46 天猪 阅读(6492) | 评论 (3)编辑 收藏

[翻译]ExtJS ChangeLog 2.2 -> 3.0.0 -- by tz

http://atian25.javaeye.com/blog/426310


郁闷...本来都写完的了...结果插入一个表格...JE编辑器就出问题了...内容不见了一半...格式也全乱了...得重来...

翻译的不好,请多见谅。其中有些地方觉得太拗口了,就直接给出原文了,如果你有更好的翻译,请跟帖,谢谢。

原文地址: http://extjs.com/forum/showthread.php?t=70352

Changes, Additions  (roughly organized alphabetically)

1.Ext

  •  新增:
    •  iterate 方法 - 遍历一个数组或对象,对每个元素都执行指定的函数
    •  isNumber 方法 - 判断传递的参数对象是否是数字
    •  isString 方法 - 判断传递的参数对象是否是字符串
    •  isBoolean 方法 - 判断传递的参数对象是否是布尔值
    •  isDefined 方法 - 判断传递的参数对象是否已经定义

2.Ext.lib.Ajax

  • 变更: Ajax responses. The core adapter file in the Ext.lib.Ajax class has been changed in line with the W3 XMLHttpRequest specification. The response object which emulates the XHR now has getResponseHeader and getAllResponseHeaders as f unctions rather than Arrays to keep inline with the real XHR object. So, anyone who was currenltly examining headers using an Array (as inherited from YUI via yui-ext) will need to change to use a function.

3.Ext.Componet

  • 新增:
    • A Component's Observable events may now be set to bubble up the Component-ownerCt axis.

4.Ext.BoxComponent

  • 新增:
    • getWidth() 
    • getHeight()
    • getOuterSize()

5.Ext.Button

  • 新增:
    • Rather than being limited to only positioning buttons in a buttons configuration, they can now be placed anywhere you please. 你的按钮现在可以放在任意地方,而不仅限于buttons配置项
    • Button现在可以缩放为任意高宽,并且有高级的文字布局。 (Buttons can now scale to any height or width and have advanced text positioning.)
    •  新的配置:scale: 'small'  ,  iconAlign : 'left' , arrowAlign : 'right'
  • 变更:
    • Button现在是一个有效的BoxComponent,可以被布局管理器管理。 (Button is now a valid BoxComponent and can partake in layout management. )
    • Button的实现已经完全重写,所以旧版本时候写的自定义样式/主题需要相应的修改。(The markup for buttons is completely different and will require changes if you had implemented a custom theme. )
6.Ext.Component
  • 新增:
    • afterrender事件
    • ref 配置项 - establish a named reference for an object an ancestor Container (mitigate dependency on 'id' and Ext.getCmp).
    • ptypes - ComponentMgr manages plugins similar to xtypes (use Ext.preg similar to Ext.reg)
    • nextSibling
    • previousSibling
    • getDomPositionEl
7.Ext.ComponentMgr
  • 新增:
    • isRegistered 方法 - 检查一个xtype是否已经被注册
8.Ext.Container
  • 新增:
    • get()
9.Ext.data.Reader
  • 已过时:
    • 推荐使用id, 请用 propertyIdidIndex
10.Ext.data.Store
  • 新增:
    • store xtypes
    • autoDestroy  配置项 - 当store绑定的component被销毁的时候,销毁该Store
    • setBaseParam()
  • 变更:
    • baseParams可以被load方法传递的同名参数所覆盖。( baseParams may be overwritten by params of same name passed to load() )
  • 已过时:
    • 不推荐使用 id ,请用 storeId 代替它
    • 不推荐使用 loadexception 事件,请用 exception 事件
    • SimpleStore 更名为 ArrayStore
11.Ext.Element
  • 新增:
    • mouseenter事件
    • mouseleave事件
  • 变更/已过时:
    • getAttributeNS() - 已过时,用getAttribute()代替
    • autoHeight() - 移除
    • alignTo() - 变更参数"position"
    • query() - 新增参数"unique"
    • focus() - 新增参数"defer"
12.Ext.EventManager
  • 变更:
    • within() - can now also check if the passed element is the target or related target
13.Ext.form
  • 新增:
    • 当动态添加Container到FormPanel时,Fields会被添加到BasicForm's的集合中。所以BasicForm's setValues 方法现在可以始终对动态添加的Fields有效。(When dynamically adding Containers anywhere in a FormPanel, any  Fields are now found and added to the BasicForm's Collection. So BasicForm's setValues  method  will now work consistently with dynamically added Fields.)
  • 变更:
14.Ext.grid.GridPanel
  • 新增:

    • columnLines 配置项 (boolean) - adds class ' x-grid-with-col-lines'
    •  Ext.grid.Column
      • 用来作为columns参数传递给ColumnModel (Instances of this class are used as columns passed to ColumnModel)
      •  xtypes可以用来指定一些预先配置好的renderer(xtypes can be used to specify a preconfigured renderer)
      • renderer may be specified in additional ways
    • Grid RowEditor Class
    • Grid like ListView and ListView.Sorter Classes (译注:就是一个用DataView+XTemplate来模拟的Grid,轻量)
    • Grid BufferedView Class. Buffered GridView enhances performance by waiting to render rows until they are visible.(译注:对大数据量的Grid有明显的性能提升,实际上就是只渲染用户可见的列,拖动的时候再渲染其他.官方还有其他的一个扩展 Ext.ux.LiveGrid,详见:http://extjs.com/forum/showthread.php?t=17791)
15.Layouts:
16.Ext.Menu
  • 新增:
    • Menu Overflow. Whenever a menu gets so long that the items won’t fit the viewable area, it provides the user with an easy UI to scroll the menu. This feature is turned on by default and can be disabled by the configuration option enableScrolling.(译注:简单的说就是Menu溢出后的滚动效果,默认是开启该效果,可以通过enableScrolling来配置,详 见官方示例)
  • 变更/已过时:
    • Toolbar and Menu are now proper Containers (formerly extended from BoxComponent). 现在Toolbar和Menu都继承Container
    • Breaking change: MenuItem的ids现在已经不是局部变量了,所以你不能在多个menu里面用一个id.建议:用唯一的id或者用itemIds来替代 它。(MenuItem ids are no longer local to their menu but global component ids. This means that you can't use the same id in multiple menus. Suggested fix: Use unique ids or switch to using itemIds.)
    • As well as Menu being a Container, this also means Menu can be a regular Component. Menu did not extend BoxComponent before, but was out on its own. Now, it can behave either as a regular floating Menu, or, if configured floating: false, it can be used as a usual inline Component of a Container.(译注:简单的说就是由于menu的继承改变,现在你可以设置Menu为浮动的,或者像平常的组件那样使用它)
    • DateItem和ColorItem已经被移出,因为没有必要了,现在你可以把任意组件放入menu的items中
    • autoWidth() - 变更为autoSize()
17.Ext.MenuButton - 该类已经被移除,用SplitButton代替它

18.Ext.StatusBar - 该类已经被移出core库,在3.0final版会有个Ext.ux.StatusBar

19.Ext.Toolbar
  • 新增:
    • Toolbar Overflow. A menu for items that don’t fit the visible toolbar area will be created by default and can be disabled with the configuration option enableOverflow. Items in the menu react with the same handlers as the toolbar items.(译注:简单的说就是Toolbar溢出后的滚动效果详见官方示例)
  • 变更:
    • Toolbar and Menu are now proper Containers (formerly extended from BoxComponent).现在Toolbar和Menu都继承Container
20.Ext.Tooltip
  • 新增:
    • delegate option added so one Tooltip can handle multiple child elements of its target based on selection using the delegate config.(译注:新增的这个属性很有用,就是通过设置的selector对某个元素的子对象设置Tip,在2.0的时候我们经常需要的Gird RowTip,CellTip都可以实现了,不需要实例化很多Tip对象)
    • AnchorTips - Tooltips now support an anchor configuration which will allow you to bring attention to a particular element or component with a small callout arrow.(译注:简单的说就是箭头Tip,详见:http://extjs.com/deploy/dev/examples/simple-widgets/qtips.html)
21.Ext.util.Format
  • 新增/变更:
    • ellipsis() - "word" parameter added
    • focus() - "defer" parameter added
    • number() - added
    •  numberRenderer() - added
    • plural() - added
22.Ext.util.Observable
  • 新增:
    • Ext.util.Observable.observeClass() - Class level observability 类级别的观察/通知
23.ux's that worked prior to 3.x may need some tweaking (especially if the ux used private properties). ux's should be checked they are utilizing the latest preferred techniques and properties. More notes here. 旧的扩展需要相应的进行修改,详见:http://extjs.com/forum/showthread.php?p=338913#post338913

24.CSS. general updates, as well as refactoring to split css into visual and structural files to simplify theming.

25.新增:图表Charting (Chart, PieChart, CartesianChart, LineChart, BarChart - numeric, time, category axis) -- (译注:其实就是YUI Chart,可以看:http://developer.yahoo.com/yui/charts/ , 或者可以看下我的blog:ExtJS 3.0 Chart 小用一下 http://atian25.javaeye.com/blog/413947)

26.新增:Ext.FlashComponent (译注:似乎是用了swfobject,管理swf方便多了,不用adobe那又长又臭的代码)

27.新增:Direct (Direct, Ext.data.DirectStore, Ext.data.DirectProxy) - 官方3.0极力推出的东西,详见:http://extjs.com/blog/2009/05/13/introducing-ext-direct/

28.新增:Writer

29.新增:Ext.Spacer - xtype 'spacer' (for empty box component)

30.新增:ButtonGroup (xtype: 'buttongroup')  (译注:按钮组,仿office2007风格,详见:http://extjs.com/deploy/dev/examples/button/buttons.html)

31.新增:GroupTabs - (译注:详见http://extjs.com/deploy/dev/examples/grouptabs/grouptabs.html)

32.增强:Debug Console (译注:还是firebug好用,不过它可以看到store等,详见:http://extjs.com/deploy/dev/examples/debug/debug-console.html)

33.新增:Ext.Error


Changes to some example classes: 示例类的修改
(不敢用javaeye编辑器的表格了..自己将就着看吧...)

Class                                              x(p)type                Deprecates
Ext.ux.data.PagingMemoryProxy                                   Ext.data.PagingMemoryProxy
Ext.ux.form.FileUploadField             fileuploadfield         Ext.ux.FileUploadField
Ext.ux.form.SelectBox                     selectbox                Ext.ux.SelectBox
Ext.ux.form.SpinnerField                 spinnerfield             Ext.form.SpinnerField (remove xtype=spinner)
Ext.ux.form.ItemSelector                 itemselector           Ext.ux.ItemSelector
Ext.ux.form.MultiSelect                    multiselect              Ext.ux.Multiselect  
Ext.ux.grid.CheckColumn                checkcolumn (p)      
Ext.ux.grid.GroupSummary                                            Ext.grid.GroupSummary
Ext.ux.grid.HybridSummary                                            Ext.grid.HybridSummary
Ext.ux.grid.RowEditor                     roweditor   (p)
Ext.ux.grid.RowExpander               rowexpander (p)      Ext.grid.RowExpander
Ext.ux.grid.TableGrid                                                       Ext.grid.TableGrid
Ext.ux.GMapPanel                          gmappanel
Ext.ux.SliderTip
Ext.ux.SlidingPager
Ext.ux.Spinner               
Ext.ux.Spotlight                                                              Ext.Spotlight
Ext.ux.Statusbar                                                            Ext.Statusbar
Ext.ux.TabCloseMenu                    tabclosemenu (p)
Ext.ux.tree.ColumnTree                 columntree              Ext.tree.ColumnTree
Ext.ux.tree.ColumnNodeUI                                            Ext.tree.ColumnNodeUI
Ext.ux.tree.XmlTreeLoader                                            Ext.ux.XmlTreeLoader

Changes to Resources 资源的变更
  • Ensure you have updated all the Ext-provided CSS with the new CSS from version 3.
  • Ensure you have updated all the Ext-provided images with the new images from version 3.
Additional References 其他参考

posted @ 2009-07-15 13:26 天猪 阅读(2693) | 评论 (0)编辑 收藏

[原创]ExtJS Grid 自定义排序规则

有一些需求如:

1.一个文件管理的Grid,要求排序的时候,文件夹永远在顶部

2.一个显示成功率的Grid,要求成功数+失败数=0的数据,不参与排序,永远在底部

ExtJs本身并没有暴露这个接口,所以我们只能自己重写,如下代码:

 1 var store = new Ext.data.JsonStore({  
 2   root:'data',  
 3   fields:[  
 4     'name',  
 5     {name:'sucCount',type:'int'},  
 6     {name:'failCount',type:'int'},  
 7     {name:'sucRate',type:'float'},  
 8     {name:'isValidateTest',type:'boolean'},  
 9     {name:'statType',type:'int'},  
10     'testLogIds','bsc','msc','sgsn'  
11   ],  
12   sortInfo:{field: 'sucRate', direction: 'ASC'},  
13   //排序规则  
14   sortData:function(f, direction){  
15     direction = direction || 'ASC';  
16     var dir = direction == 'ASC' ? 1 : -1;  
17     var st = this.fields.get(f).sortType;  
18     //关键地方,重写排序排序规则  
19     var fn = function(r1, r2){  
20       if(!r1.get('isValidateTest')||!r2.get('isValidateTest')){  
21         //无效数据永远在下面  
22         return !r1.get('isValidateTest') ? dir : -dir;  
23       }else{  
24         var v1 = st(r1.data[f]), v2 = st(r2.data[f]);  
25         return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);  
26       }  
27     };  
28     this.data.sort(direction, fn);  
29     if(this.snapshot && this.snapshot != this.data){  
30       this.snapshot.sort(direction, fn);  
31     }  
32   }  
33 });

posted @ 2009-07-01 10:20 天猪 阅读(2761) | 评论 (0)编辑 收藏

[原创]ExtJS Grid tooltip的几种实现方式

http://atian25.javaeye.com/blog/417361

1.表头提示

在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:

1 var grid = new Ext.grid.GridPanel({  
2   columns:[  
3     {header:'名称',dataIndex:'name',tooltip:'对象名称'},  
4     {header:'开始时间 - 结束时间 <br/>成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}  
5   ]  
6 });

2.单元格提示

1)使用Ext.QuickTips

在开始的时候就执行Ext.QuickTips.init();

然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。

这个在官方的FAQ上有详细描述: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip

代码:


 1 //option 1  
 2 //========  
 3 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {  
 4     //build the qtip:  
 5     var title = 'Details for&nbsp;' + value + '-+ record.get('month') +  
 6         '-+ record.get('year');  
 7     var tip = record.get('sunday_events');  
 8    
 9     metadata.attr = 'ext:qtitle="' + title + '"+ ' ext:qtip="' + tip + '"';  
10    
11     //return the display text:  
12     var displayText = '<span style="color: #000;">+ value + '</span><br />+  
13         record.get('sunday_events_short');  
14     return displayText;  
15 };  
16    
17 //option 2  
18 //========  
19 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {  
20     var qtip = '>';  
21     if(data >= 0){  
22         qtip = " qtip='yeah'/>";  
23         return '<span style="color:green;"+ qtip + data + '%</span>';  
24     }else if(data < 0){  
25         qtip = " qtip='woops'/>";  
26         return '<span style="color:red;"+ qtip + data + '%</span>';  
27     }  
28     return data;  
29 };  
30    
31 //option 3  
32 //========  
33 var qtipTpl = new Ext.XTemplate(  
34     '<h3>Phones:</h3>',  
35     '<tpl for=".">',  
36     '<div><i>{phoneType}:</i> {phoneNumber}</div>',  
37     '</tpl>'  
38 );  
39    
40 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {  
41    
42     // get data   
43     var data = record.data;  
44    
45     // convert phones to array (only once)   
46     data.phones = Ext.isArray(data.phones) ?  
47         data.phones :   
48         this.getPhones(data.phones);  
49    
50     // create tooltip   
51     var qtip = qtipTpl.apply(data.phones);  
52    
53     metadata.attr = 'ext:qtitle="' + title + '"+ ' ext:qtip="' + tip + '"';  
54    
55     //return the display text:  
56     return data;      
57 };

2)使用ToolTip

官方也已经给出方法:

http://extjs.com/forum/showthread.php?p=112125#post112125

http://extjs.com/forum/showthread.php?t=55690

以上给出的方法是可以让一个grid里面的元素共享一个tooltip对象。一般用来做rowtip

不过3.0有更好的方式,如下:

 

3.行提示 RowTip

ExtJS3.0新增的方法,设置tooltip的delegate

代码:


 1 var myGrid = new Ext.grid.gridPanel(gridConfig);  
 2 myGrid.on('render', function(grid) {  
 3     var store = grid.getStore();  // Capture the Store.  
 4   
 5     var view = grid.getView();    // Capture the GridView.  
 6   
 7     myGrid.tip = new Ext.ToolTip({  
 8         target: view.mainBody,    // The overall target element.  
 9   
10         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.  
11   
12         trackMouse: true,         // Moving within the row should not hide the tip.  
13   
14         renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.  
15   
16         listeners: {              // Change content dynamically depending on which element triggered the show.  
17   
18             beforeshow: function updateTipBody(tip) {  
19                 var rowIndex = view.findRowIndex(tip.triggerElement);  
20                 tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;  
21             }  
22         }  
23     });  
24 }); 

4.其他方法

监听GridView或Store的事件,然后通过rowSelector或getRow方法来遍历,自己加tooltip... 这个方式请无视吧

posted @ 2009-07-01 10:14 天猪 阅读(2317) | 评论 (0)编辑 收藏

IE7/FF3可用的获取异常发生所在的行数

Error具有下面一些主要属性:
 
    * description: 错误描述 (仅IE可用).
    * fileName: 出错的文件名 (仅Mozilla可用).
    * lineNumber: 出错的行数 (仅Mozilla可用).
    * message: 错误信息 (在IE下同description)
    * name: 错误类型.
    * number: 错误代码 (仅IE可用).
    * stack: 像Java中的Stack Trace一样的错误堆栈信息 (仅Mozilla可用).


在IE里面没有lineNumber. 但可用下面的方法找出:

http://forum.byr.edu.cn/wForum/disparticle.php?boardName=SoftDesign&ID=29948&pos=6&page=1

 1 <script type="text/javascript">
 2 window.onerror=testError;
 3 function testError(){
 4  arglen=arguments.length;
 5  var errorMsg="参数个数:"+arglen+"";
 6  for(var i=0;i<arglen;i++){
 7   errorMsg+="\n参数"+(i+1)+""+arguments[i];
 8  }
 9  alert(errorMsg);
10  window.onerror=null;
11  return true;
12 }
13  
14 function test(){
15  error
16 }
17 test()
18 </script>

posted @ 2008-09-26 14:26 天猪 阅读(336) | 评论 (0)编辑 收藏

理清几个RIA的概念及技术的选择 (AIR,WPF,JAVA,FLEX,SLIVERLIGHT)

转帖自:http://blog.csdn.net/david_lv/archive/2008/03/05/2149377.aspx

昨天去参加adobe AIR发布会

首先申明:我不是adobe雇佣的枪手,我也从不认识adobe的人。我只是一名被C/S和B/S长期困扰希望寻找一套解决方案的人。

昨天去参加了adobe AIR 发布会

adobe是业界著名的客户端展现工具和展现设计工具 提供商。

展现工具:PDF、FLASH。展现设计工具:photoshop、Dreamwaver、FLASH。

很多人都疑问AIR有什么用。昨天在会场也有同学提出了这个问题。既然有了AJAX 纯的JS的客户端表现组件包,如最近刚获得金牛奖的ZK组件包,那为何要有AIR?

我给大家解释解释。大家都能看到现在的趋势:互联网软件在向客户端融合,客户端在向互联网融合。

互联网企业发源于WEB世界,那么它要延伸互联网,必须要基于现在自己的优势和根。JS技术,这种根植于网络世界的技术就是最理想的选择。使用惯了WEB应用软件的用户,对于本地安装一个软件,本地软件那样的操作习惯就感到很奇怪。

而对于习惯了使用本地软件的用户,现在开始有了互联网跨出局域网的业务需求了,怎么办?一种办法当然是给他们另外开发一套B/S企业管理软件,但他们怎么使用都不顺手。

于是AIR产生。让他们能满足互联网处理,又能像本地软件一样操作。

又有客官问了,听过微软也推出了一种客户端跨互联网处理的技术,叫WPF和WCF。微软是客户端的霸主,而且微软的 开发工具也是一流的,adobe既不熟悉开发工具这行当,也没有客户端优势,微软在OS层面做点手脚,就像当年给netscape下点药做点限制一 样,AIR就没前途了。

但是,但是。这个世界总有但是。

要知道,做企业管理软件应用,很重要的就是数据安全。要把自己的数据和业务处理放到公网上,就有担忧。但是企业发展 必须跨互联网,有需求啊。那怎么办?用微软的?太不安全了。于是挑选了JAVA。但JAVA一直雄霸于服务器端,客户端JAVA也没有经验啊。从早期的 Applet,到Swing,都以失败告终。不能让JAVA的服务器端配合WPF的客户端吧?于是AIR出场了。

adobe也很聪明,知道微软这个长年想扩展到互联网却屡屡受挫的困兽,必然拼了老命也要推自己的WPF和WCF技术,这是微软未来的命啊。想在这个霸主的肩膀上吃肉,是比登天难。于是祭出微软最害怕的一招:开源、免费、基于开放技术标准、跨平台。

adobe不擅长开发工具的开发,那就不开发。况且这个世界上除了微软世界的visual studio工具外,微软的对立阵营就有最开放的eclipse。eclipse已经不仅仅是一个JAVA的开发IDE,现在Ruby、PHP、C++、 Python都在它上面有插件。于是adobe也把自己插在上面。跟着程序员大潮走,让程序员使用自己最熟悉的IDE开发AIR。

adobe一直擅长客户端表现,所以adobe也没有必要提供一个从服务器到客户端一整套技术方案。说白了,AIR 就是一个和AJAX组件包一个层次的解决方案。主要用于客户端表现。这点非常重要。许多同学没有看清这一点,和DELPHI比,和JAVA比,和.net 比。其实AIR就专注客户端表现。你的业务层完全可以用PHP、JAVA、C#来写。再说了,AIR技术,内在其实就是HTML+JAVAScript, 只不过改进了一些,换了个名字,叫MXML和ActionScript。微软的WPF技术,也是这两个技术组成。大家都是一路子。

PDF抓住了PC时代,FLASH抓住了浏览器时代,AIR是要抓住浏览器和PC融合的时代。这也是adobe的命 根,所以两家公司都拼了命。微软有其强大的现实客户和研究开发中心和营销手段,adobe则采用了最开放最联盟来对抗,让微软一家公司之力来对抗全球开放 的程序员。

WPF仅限于微软平台,虽然sliverlight号称以后也要垮MAC和LINUX平台。但我说的比较是AIR和WPF,而非FLEX和Sliverlight这两种技术。

我对FLEX和Sliverlight这两种技术一直心存怀疑。他们到底是给什么用户用的呢?习惯于浏览器的用户?人家有AJAX组件包啊,优秀开源的N多,商业的也N多。习惯于本地运行软件的用户?人家有AIR和WPF这两种技术啊。

FLEX和Sliverlight这两种技术产生,我来解释一下我自己的观点。

adobe的AIR还没有炼成。FLASH是adobe现在的优势。要想走到目的地,FLASH必须是自己的跳板,于是FLEX必须作为过渡。

而微软呢?VISTA本来就是微软最寄予希望的操作系统,原生的.net framework 3.0,而且全部用.net重写,一流的面向service的操作系统,圆了当年微软COM之梦。而且.net framework 3.0最主要的技术WPF、WCF,还有一个夫死胎中的WF,其实都是很有未来前瞻的技术,但由于技术难度太大,当然也由于太多人看透了微软在互联网战略 的陌生和迟疑和旧有EXE技术思想,所以都跑到了纯正的互联网公司,给VISTA形成了难产。微软希望能无缝且毫无体验差异的整合互联网和本地。但是这个 过程太漫长了。眼看着adobe利用FLASH做跳板,以占领自己未来想占领的位置,自己能不能到达目的地还不好说,于是在急匆匆中推出了 sliverlight。其实微软本来没有sliverlight研究计划,希望借助VISTA一举掀开未来大幕,但VISTA不争气,没掀好,于是必须 应急。

所以,奉劝开发惯了网站的程序员,继续拿起你们的AJAX,因为你们不理解人们为什么要用AIR。

对于开发惯了EXE的程序员,继续使用AIR或WPF来开发你们的下一代产品,别想着用FLEX。习惯用微软技术的就用WPF,习惯用非微软技术的,就选择AIR。就这么简单。

我给大家列了一个对比列表,大家可以理解这个新技术和过去技术的相似和关联。

AIR runtime=.net framework=JVM

AIR=WPF=JAVA Application

FLEX=Sliverlight=JAVA Applet

至于Google Gears,是互联网向桌面融合的产物,而我们今天讨论的是桌面向互联网融合。虽然Google Gears、JAVA JSF、Adobe AIR/FLEX、微软WPF/Sliverlight都是RIA的解决方案。但都是各自从各自的优势出发发展的技术方案

最后结尾总结关键几句:

1 AIR是给习惯开发EXE程序员准备的非微软技术的互联网解决方案。习惯微软技术的请离开,习惯网站的请离开

2 AIR工作在表现层。AIR只是一个客户端表现,和AJAX是一样的。都是HTML+JAVASCIRPT。不要奢望它能做各种业务处理和运算。你的业务 可以包装成webservice,也可以是PHP或JSP或asp.net页面,调用方式可以是webservice,可以是httpservice,可 以是remoting。这样你的业务层就可以和表现层AIR交流数据了

3 AIR IDE只是HTML+AVACRIPT设计和调试工具,所以你也别奢望AIR IDE能象JAVA和C#的IDE环境那样强大。你过去怎么设计和调试HTML+JAVASCRIPT,那么你现在仍然保持那种心态。

 4 AIR不是FLASH。他们是两种不同的应用目的和技术发展方向。不要用FLASH开发企业管理软件,也不要用AIR开发多媒体。虽然能,但不擅长(就如 你拿C来开发WEB)。AIR不需要运行在浏览器中,不需要使用FLASH容器。AIR有自己的容器和运行环境。AIR和你的EXE是一样的安装和执行。

5AIR和WPF都处于不成熟期,可以作项目,但不要把宝押在他们上面做下一代产品线(预计下下版应该可以进行企业 下一代产品线开发,一般都是软件3个版本后才强壮稳定起来,按照竞争的激烈程度,这个第三个正式版本时间会在明年的上半年)。不过你也不要等待他们成熟后 再做再研究,这样的等待就如同2001年等待JAVA成熟一样。现在JAVA是成熟了,但是你还有机会么?

6不要怀疑AIR和WPF是不是未来。业界早有共识,这就是未来。不要在GOOGLE WEBOS和客户端OS之间选择来选择去,如果你是网站开发人员,安心研究你的GOOGLE RIA技术。不要怀疑是跟微软还是跟adobe。如果你一直在微软的技术圈子中行走,那么你安心用你的WPF好了,都是未来。

7有许多人问起来了SEO在AIR和FLEX上的缺陷。说slivelight支持SEO和搜索友好。我想说的一句是:开发企业管理软件,怕的就是搜索,怕的就是企业数据被搜索引擎搜索到。不能搜索到才好呢

8AIR为过去的EXE程序员提供了自动版本检测和自动升级的API,这是让C/S程序员非常兴奋的一件事。回想当 年,客户端版本不一致,出了不少怪异的事情。AIR也提供了离线后暂时保存数据到本地内嵌在AIR runtime中的sqlite(操作和平常SQL一样),继续操作软件,连线后同步数据。OK

9 你如果没有开发过MVC架构,没有用过COM多层开发,那么你不会明白业务层和表现层的分工和通讯的。你会一直想弄清楚怎么在AIR中写SQL语句或 JAVA语句。你也一直会想在servlet中写JAVASCRIPT和HTML代码。你还处在浆糊代码阶段,建议给自己的代码技术升升级。

想问我为什么关注AIR吗?

因为我一直战斗在行业管理软件的开发上。我对于开发一套C/S,一套B/S,这样极耗费开发成本开发时间和维护成本 的开发方式烦透了,要让两者操作习惯和功能都保持一致,难。如果有了BUG,两个产品是两个开发团队,BUG都出在不同的地方,分别修改。让一个公司维护 两套人马两个产品,在中国大部分都是小软件作坊的现状下,哪个都做不好。不如做一个既是C/S又是B/S的软件。

那是多么美好的事情啊。

posted @ 2008-08-25 10:20 天猪 阅读(1997) | 评论 (2)编辑 收藏