Java堂 » DynamicLanguage http://www.javatang.com Java Tang Thu, 08 Dec 2011 08:29:06 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Ext中设置Ajax超时时间 http://www.javatang.com/archives/2011/10/18/1847563.html http://www.javatang.com/archives/2011/10/18/1847563.html#comments Tue, 18 Oct 2011 12:18:47 +0000 Jet http://www.javatang.com/?p=563 在Ext中无论是在Grid、Combox中使用Store加载数据，还是直接使用Ajax发送请求，其超时时间均可以统一使用如下代码进行设置：

  1. // 超时时间，单位毫秒
  2. Ext.Ajax.timeout = 5 * 60 * 1000;

注意，单位是毫秒。

不过以前不知道是因为在哪里搜索的结果，还是Ext 2.x版本中的问题，使用了Ext.lib.Ajax.timeout = 5 * 60 * 1000;的方式进行设置，但是这种方式是无效的。

Ext的版本是3.2.1.

]]> http://www.javatang.com/archives/2011/10/18/1847563.html/feed 0 IE6下使png透明的完美解决方式（续） http://www.javatang.com/archives/2010/07/19/1736428.html http://www.javatang.com/archives/2010/07/19/1736428.html#comments Mon, 19 Jul 2010 09:17:36 +0000 Jet http://www.javatang.com/?p=428 自从上次介绍一种在IE6下使png透明的方式之后，今天又遇到一种更加完美的解决方案 DD_belatedPNG，详细的使用方法大家可以看文档，我这里只是简单说一下如何来使用（其实使用的时候也非常简单）：

首先是在DD_belatedPNG网站上下载js文件，可以选择压缩后的文件，然后按照下面的方式在页面中引用（这一点和unitpngfix调用方式一样）：

  1. <!--[if lt IE 7]>
  2. <script type="text/javascript" src="scripts/DD_belatedPNG.js"></script>
  3. <script type="text/javascript">
  4. // 设定需要渲染的DOM对象
  5. DD_belatedPNG.fix('.png_bg');
  6. </script>
  7. <![endif]-->

接下来就是体现DD_belatedPNG灵活性的一面了，与UnitPNG不同，DD_belatedPNG需要你使用一个js脚本来指定所要渲染的页面对象，其选择方式与CSS中选择器的方式相同。像上面的例子就是选择页面中所有class为png_bg的DOM对象。

另外，为了做一个统一的设置，我的做法是直接在DD_belatedPNG.js文件后面加上DD_belatedPNG.fix(‘.png_bg’);，这样只要在页面中设定DOM对象的class为png_bg就可以了，这一点可以做到与UnitPNG相同，只不过UnitPNG的名称是固定的，而DD_belatedPNG可以随心所欲了。

参考资料：
DD_belatedPNG，最佳IE6环境下实现PNG-24的应用方案

]]> http://www.javatang.com/archives/2010/07/19/1736428.html/feed 0 ExtJS中调用focus方法无效的解决方法 http://www.javatang.com/archives/2010/07/08/4916413.html http://www.javatang.com/archives/2010/07/08/4916413.html#comments Thu, 08 Jul 2010 02:49:16 +0000 Jet http://www.javatang.com/?p=413 在ExtJS中用于盒型控件的BoxComponent（TextField、TextArea、CheckBox、ComboBox等的父类）提供了一个focus方法，用于控制光标的焦点。但是在调用该方法的时候往往会发现达不到预期的效果，很多时候根本没有办法来控制光标的焦点。

在BoxComponent文档中对focus方法的说明如下：

focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.

可以看到这个方法有两个可选的参数，第一个的含义是是否全选中所在的文本内容（默认为false），第二个是设置一个延迟的时间，单位是毫秒（默认为0，不延迟）。下面是两种调用的方法：

  1. var textField = new Ext.form.TextField({
  2. // 属性就省略了 ....
  3. });
  4. // 默认的调用
  5. textField.focus();
  6. // 设置延迟的调用
  7. textField.focus(false, 100);
  8. // 等同于上面的方式
  9. textField.focus.defer(100, textField);

如果做一个测试的话可以发现使用后面两种方式之后就会达到预期的效果了，这是因为所有的可视控件需要一个渲染的时间的，如果不设置focus的延迟时间，则再调用focus方法的时候该控件还没有渲染完成，当时是不会成功了。

参考资料：关于window的中field的focus问题

]]> http://www.javatang.com/archives/2010/07/08/4916413.html/feed 0 ExtJS中TextField或TextArea支持按键事件的条件 http://www.javatang.com/archives/2010/07/07/5638409.html http://www.javatang.com/archives/2010/07/07/5638409.html#comments Wed, 07 Jul 2010 03:56:38 +0000 Jet http://www.javatang.com/?p=409 在ExtJS中，对事件进行捕获有两种方式：一种是设置listeners属性，另外一种就是使用on方法，代码如下：

  1. var textArea = new Ext.form.TextArea({
  2.   listeners: {
  3.     'keyup': {
  4.       fn: function(o, evt) {},
  5.       scope: this
  6.     }
  7.   }
  8. });
  9.  
  10. // 也可以使用on方法
  11. textArea.on('keypress', function(o, evt), this);

但是如果这样的话还是无法捕获按键事件，原来除了增加监听之外，还要设置一个enableKeyEvents属性，该属性的作用是是否处理按键事件，默认是false。

参考资料： 不显示删除回复显示所有回复显示星级回复显示得分回复 Extjs中textarea不支持keyup事件？

]]> http://www.javatang.com/archives/2010/07/07/5638409.html/feed 0 ExtJS hack: Add multiple toolbars to a Panel http://www.javatang.com/archives/2010/03/21/1529393.html http://www.javatang.com/archives/2010/03/21/1529393.html#comments Sun, 21 Mar 2010 02:15:29 +0000 Jet http://www.javatang.com/?p=393 在ExtJS中实现多行工具栏的效果

hack code:

  1. /**
  2. * ExtJS hack: Add multiple toolbars to a Panel
  3. *
  4. * @author Jet Ma (jetmah(at)gmail(dot)com)
  5. */
  6. // 将原来的onRender方法进行重定义，以免造成递归调用！
  7. // rename the original onRender method to avoid call itself
  8. Ext.Panel.prototype.originalonRender = Ext.Panel.prototype.onRender;
  9. // 扩展onRender方法，实现在Toolbar中增加多行
  10. // override onRender method
  11. Ext.Panel.prototype.onRender = function(ct, position) {
  12.     this.originalonRender(ct, position);
  13.    
  14.     // 增加使用rowtbar添加换行的Toolbar
  15.     // use the custom rowtbar argument to add it to this TopToolbar
  16.     if(this.tbar && this.rowtbar){
  17.         var rowtbar = this.rowtbar;
  18.         if(!Ext.isArray(rowtbar))
  19.             return;
  20.        
  21.         for(var i = 0; i < rowtbar.length; i ++) {
  22.             new Ext.Toolbar(rowtbar[i]).render(this.tbar);
  23.         }
  24.     }
  25.    
  26.     // 增加使用rowbbar添加换行的Bottombar
  27.     // use the custom rowbbar argument to add it to this BottomToolbar
  28.     if(this.bbar && this.rowbbar) {
  29.         var rowbbar = this.rowbbar;
  30.         if(!Ext.isArray(rowbbar))
  31.             return;
  32.            
  33.         for(var i = 0; i < rowbbar.length; i ++) {
  34.             new Ext.Toolbar(rowbbar[i]).render(this.bbar);
  35.         }
  36.     }
  37. }

usage:

  1. var panel = new Ext.Panel({
  2.     //...   
  3.     tbar: [{text: 'button one'}, {text: 'button two'}],   
  4.     rowtbar: [       
  5.         [{text: 'row1 buttone 1'}, {text: 'row1 button2'}],      
  6.         [{text: 'row2 buttone 1'}, {text: 'row2 button2'}]   
  7.     ],   
  8.     bbar:  [{text: 'button one'}, {text: 'button two'}],   
  9.     rowbbar: [       
  10.         [{text: 'row1 buttone 1'}, {text: 'row1 button2'}],       
  11.         [{text: 'row2 buttone 1'}, {text: 'row2 button2'}]   
  12.     ]
  13. });

screenshot:

more discussion: http://www.extjs.com/forum/showthread.php?t=94762

]]> http://www.javatang.com/archives/2010/03/21/1529393.html/feed 0 使用DWR出现“例外被抛出且未被接住”错误的原因和解决办法 http://www.javatang.com/archives/2008/07/10/1954272.html http://www.javatang.com/archives/2008/07/10/1954272.html#comments Thu, 10 Jul 2008 08:19:54 +0000 Jet http://www.javatang.com/archives/2008/07/10/1954272.html DWR提供了两个js文件：engine.js和util.js，通常来说我们都是动态来引用这两个js文件，在官方的例子中也是这样做的（其中dwr是mapping时的路径）：

  1. <script type="text/javascript" src="/dwr/engine.js"></script>
  2. <script type="text/javascript" src="/dwr/util.js"></script>

但是根据页面优化原则，我们如果将所有的js文件进行压缩整合在一起的话将会极大的减少页面加载的时间。但是当我们将上面的两个js文件下载下来然后跟其他js文件整合压缩之后，访问页面的时候会出现一个“例外被抛出且未被接住”的脚本错误。

用百度搜索了一下基本只搜到一篇名为《dwr应用时请注意（初学者）》的文章，文章中建议使用他在附件中所提供的dwr.jar包。但是作者所提供的dwr版本有些低，另外作者并没有在文章中说明造成问题的原因。

后来将异常转换为英文 Exception thrown and not caught 在google中搜索了一下，得知是因为没有在页面中动态引用engine.js，因为dwr在运行的时候需要动态控制这个文件。

但是这样的话就达不到压缩engine.js文件的目的了，我无意中在官方看到一篇专门讲解怎样缓存engine.js文件的文章，下面我就将作者建议的做法说明如下：

首先使用动态加载engine.js文件，然后将该文件下载下来。打开下载下来的engine.js文件，然后将第226到242行之间的文字剪切下来，然后将dwr.jar包中的org/directwebremoting/engine.js文件内容删除，然后粘贴到该文件中并替换dwr.jar包中原来的engine.js文件，内容大致如下：

  1. dwr.engine._origScriptSessionId = "${scriptSessionId}";
  2. dwr.engine._sessionCookieName = "${sessionCookieName}";
  3. dwr.engine._allowGetForSafariButMakeForgeryEasier = "${allowGetForSafariButMakeForgeryEasier}";
  4. dwr.engine._scriptTagProtection = "${scriptTagProtection}";
  5. dwr.engine._defaultPath = "${defaultPath}";
  6. dwr.engine._pollWithXhr = "${pollWithXhr}";

这样就可以将下载下来的engin.js文件同其他文件进行压缩合并了，但是在页面中还必须动态引用engine.js：

  1. <script type="text/javascript" src="/dwr/engine.js"></script>

这样一来即压缩了engine.js文件中静态的部分，又使用了engine.js中的动态部分，并且最重要的是“例外被抛出且未被接住”异常也不会再出现了。

参考资料：
Caching engine.js

]]> http://www.javatang.com/archives/2008/07/10/1954272.html/feed 3 如何使用DWR2.0的注解功能 http://www.javatang.com/archives/2008/07/07/5648271.html http://www.javatang.com/archives/2008/07/07/5648271.html#comments Mon, 07 Jul 2008 08:56:48 +0000 Jet http://www.javatang.com/archives/2008/07/07/5648271.html DWR2.0新增加了JDK5的注解(Annotation)功能，使用注解功能之后可以从很大程度上简化了原来的dwr.xml的配置，使用起来非常的方便。

一、配置DWR使用注解功能

如果让dwr使用注解功能需要在web.xml进行如下配置：

  1. <servlet>
  2.         <servlet-name>dwr-invoker</servlet-name>
  3.         <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  4.         <init-param>
  5.             <param-name>debug</param-name>
  6.             <param-value>true</param-value>
  7.         </init-param>
  8.         <!-- 将设定注解的域对象和业务实现类放在下面列表中，中间使用逗号间隔 -->
  9.         <init-param>
  10.             <param-name>classes</param-name>
  11.             <param-value>
  12.                 com.javatang.domain.Book,
  13.                 com.javatang.bank.Bank,
  14.                 com.javatang.dao.BookDao
  15.             </param-value>
  16.         </init-param>
  17.     </servlet>
  18.     <servlet-mapping>
  19.         <servlet-name>dwr-invoker</servlet-name>
  20.         <url-pattern>/scripts/ajax/*</url-pattern>
  21.     </servlet-mapping>

这样设置之后就可以在dwr中使用注解了，非常的方便。

二、DWR提供的注解类型
经常用到的注解主要有：@RemoteProxy、@RemoteMethod、@DataTransferObject和@RemoteProperty。

1. @RemoteProxy和@RemoteMethod
@RemoteMethod对应于原来dwr.xml文件中的create标签，用于创建DWR所提供的远程方法；而@RemoteMethod对应于create标签中的 <include method=”"/>，用来指定所要暴露的方法名称。我们举例来说明：

  1. @RemoteProxy(name="bankFunctions")
  2. public class  Bank {
  3.  
  4.     @RemoteMethod
  5.     public void buy() {
  6.         // ...
  7.     }
  8. }

从上面可以看出，@RemoteProxy表示这个类将用于远程方法，而使用@RemoteMethod指定所要暴露的方法，没有使用@RemoteMethod的方法将不会显示在客户端。
上面的注释使用dwr.xml表示如下：

  1. <!DOCTYPE dwr PUBLIC
  2.     "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
  3.     "http://getahead.ltd.uk/dwr/dwr20.dtd">
  4. <dwr>
  5.     <allow>
  6.         <create creator="new" javascript="bankFunctions">
  7.             <include method="buy" />
  8.         </create>
  9.     </allow>
  10. </dwr>

如果使用Spring中的DAO活逻辑层则需要进行如下的设置：

  1. // BookDao
  2. @RemoteProxy(creator = SpringCreator.class,
  3.     creatorParams = @Param(name = "beanName", value = "bookDao"),
  4.     name="bookFunctions")
  5. public class  BookDao {
  6.  
  7.     @RemoteMethod
  8.     public void addBook(Book book) {
  9.         // ...
  10.     }
  11. }

通过指定@RemoteProxy中的creator类型为SpringCreator，然后在creatorParams指定对应的beanName名称。对应的dwr.xml文件如下：

  1. <!DOCTYPE dwr PUBLIC
  2.     "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
  3.     "http://getahead.ltd.uk/dwr/dwr20.dtd">
  4. <dwr>
  5.     <allow>
  6.         <create creator="spring" javascript="bookFunctions">
  7.             <param name="beanName" value="bookDao" />
  8.             <include method="addBook" />
  9.         </create>
  10.     </allow>
  11. </dwr>

2. @DataTransferObject和@RemoteProperty
@DataTransferObject对应于原来dwr.xml文件中的convert标签，用于转换Java对象；@RemoteProperty则对应于convert标签中的 <param name=”include” value=”" />。

举例说明一下：

  1. @DataTransferObject
  2. public class Book {
  3.     @RemoteProperty
  4.     private int id;
  5.  
  6.     @RemoteProperty
  7.     private String name;
  8.  
  9.     public Book() {
  10.     }
  11.  
  12.     public int getId() {
  13.         return id;
  14.     }
  15.  
  16.     public void setId(int id) {
  17.         this.id = id;
  18.     }
  19.  
  20.     public String getName() {
  21.         return name;
  22.     }
  23.  
  24.     public void setName(String name) {
  25.         this.name = name;
  26.     }
  27. }

@RemoteProperty可以放在JavaBean中的私有变量上面，也可以放在getXXX方法上面。另外如果想将JavaBean中所有的属性都暴露出来的话，不需要在任何属性上面添加@RemoteProperty注释就可以了。

上面的注释对应的dwr.xml文件如下：

  1. <!DOCTYPE dwr PUBLIC
  2.     "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
  3.     "http://getahead.ltd.uk/dwr/dwr20.dtd">
  4. <dwr>
  5.     <allow>
  6.         <convert converter="bean"
  7.             match="com.javatang.domain.Book">
  8.             <param name="include" value="id, name" />
  9.         </convert>
  10.         <!-- 或者用下面的方式也可以
  11.         <convert converter="bean" match="com.javatang.domain.Book" />
  12.         -->
  13.     </allow>
  14. </dwr>

关于具体每个注释使用的方法已经所包含的参数可以参考Java Doc。使用DWR2.0的注解极大的简化了原来dwr.xml的配置，非常的方便。

参考资料：
DWR Annotations
[原创]DWR Annotations and Spring
DWR Annotations 使用 SpringCreator

]]> http://www.javatang.com/archives/2008/07/07/5648271.html/feed 0 Javascript的国际化方案 http://www.javatang.com/archives/2008/04/20/5034268.html http://www.javatang.com/archives/2008/04/20/5034268.html#comments Sun, 20 Apr 2008 06:50:34 +0000 Jet http://www.javatang.com/archives/2008/04/20/5034268.html 目前Ajax框架是层出不穷，而且功能变得越来越强大，从而使得Web页面发展为现在的三层结构之说：HTML + CSS + Script。在使用Javascript的时候涉及到其中一个国际化的问题。

Javascript中没有像Java那样拥有国际化的方案，但是可以使用一些技巧来达到目的。首先将在脚本中用到的文字全部保存到每个语种的文件中，比如简体中文zh_CN.js、英文en.js等等，然后使用动态语言判断客户端浏览器或Cookies的语言来决定加载对应语种的js文件，这样就实现了国际化的效果。

但是对于保存文本的变量而言有不同的形式，可以每个文本指定一个变量，也可以将所有的变量保存到一个或几个数组中。我发现ExtJS框架是采用通过覆盖对应模块的类属性来实现不同模块中文本的多语种显示。下面我就举例来说明这种方式：

  1. /* base.js */
  2.  
  3. if (javatang== null) var javatang= {};
  4.  
  5. if (javatang.lang == null) javatang.lang = new function(){
  6.     this.sampleText= "This is sample text";
  7.     // 设置下面的属性 ...
  8. };
  9.  
  10. /* zh_CN.js */
  11. this.sampleText = "例子";

在HTML页面中调用方式如下：

  1. <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gbk" >
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=gbk" />
  6. <title> Title </title>
  7. <script type="text/javascript" src="base.js"></script>
  8. <script type="text/javascript" src="zh_CN.js"></script>
  9. <script type="text/javascript">
  10. // 下面开始在页面中调用
  11. </script>
  12. </head>
  13.  
  14. <body>
  15.  
  16. </body>
  17. </html>

参考资料：
了解JavaScript类

]]> http://www.javatang.com/archives/2008/04/20/5034268.html/feed 1 提高页面相应速度之压缩优化js和css文件 http://www.javatang.com/archives/2008/04/13/0212267.html http://www.javatang.com/archives/2008/04/13/0212267.html#comments Sun, 13 Apr 2008 17:02:12 +0000 Jet http://www.javatang.com/archives/2008/04/13/0212267.html Steve Souders在他的《High Performance Web Sites》一书中提出提高网页效率的14条准则，这些可以使用Yahoo! YSlow来进行一个比较形象的检测。

这里主要来说一下第一条准则：Make Fewer HTTP Requests，意思就是尽可能的减少HTTP请求。当时要达到这个目的有很多种方法，其中最重要的一点就是将CSS文件和Javascript文件分别进行压缩和合并，这样就在很大程度上减少了浏览器对服务器的HTTP请求此处，另外一旦被浏览器下载到本地可以对此进行缓存，从而提高了加载速度。

有关于这方面的工具最优秀且使用最为广泛的开源软件非YUI Compressor莫属了。但是YUICompressor只能使用命令行一个个对js或css文件进行压缩，现在我们就通过使用ant脚本来达到批量压缩合并多个文件的目的。

下面以压缩js文件为例进行说明。

首先做一个关于js文件编码规范的约定：所有的原始文件均为 .source.js，经过压缩处理后文件变为.js，将多个压缩后的文件合并后的文件名称为all-min.js。

接下来可以写下面的ant脚本：

  1. <!-- 对YUICompressor的引用 -->
  2. <property name="js.dir" value="${web.dir}/scripts" />
  3. <property name="js.release.name" value="all-min.js"/>
  4.  
  5. <!-- 删除之前压缩合并过的文件 -->
  6. <delete>
  7.     <fileset dir="${js.dir}" includes="${js.release.name}"/>
  8. </delete>
  9.        
  10. <!-- 执行 yuicompressor 压缩JS
  11.    -- parallel="false"：对fileset中的每个文件都执行一次executable参数的命令
  12.   -- dest 执行目录
  13.    -->
  14. <apply executable="java" parallel="false" verbose="true" dest="${js.dir}">
  15.     <fileset dir="${js.dir}">
  16.         <include name="**/*.source.js"/>
  17.     </fileset>
  18.         <arg line="-jar"/>
  19.         <arg path="${yuicompressor}"/>
  20.     <!-- 设置待处理源文件及处理后输出文件的编码格式 -->
  21.     <arg line="--charset utf-8"/>
  22.     <srcfile/>
  23.     <arg line="-o"/>
  24.     <!-- 指定文件命名规则 -->
  25.     <mapper type="glob" from="*.source.js" to="*.js" />
  26.         <targetfile/>
  27. </apply>
  28.  
  29. <!-- 合并文件 -->
  30. <concat destfile="${js.dir}/${js.release.name}" fixlastline="true">
  31.     <fileset dir="${js.dir}">
  32.         <include name="**/*.js"/>
  33.         <exclude name="${js.release.name}"/>
  34.             <exclude name="**/*.source.js"/>
  35.             <exclude name="i18n/*.js"/>
  36.         </fileset>
  37. </concat>
  38.        
  39. <!-- 删除生成的临时文件 -->
  40. <delete>
  41.     <fileset dir="${js.dir}">
  42.         <include name="**/*.js"/>
  43.         <exclude name="${js.release.name}"/>
  44.             <exclude name="**/*.source.js"/>
  45.             <exclude name="i18n/*.js"/>
  46.         </fileset>
  47. </delete>

参考资料：
Building Web Applications With Apache Ant
YUI Compression tool as Ant Task
用yuicompressor和Ant压缩Ext的CSS文件
用YSlow分析我们页面（完整版）

]]> http://www.javatang.com/archives/2008/04/13/0212267.html/feed 1 两个PHP的Warning及解决方法 http://www.javatang.com/archives/2007/11/11/5611239.html http://www.javatang.com/archives/2007/11/11/5611239.html#comments Sun, 11 Nov 2007 17:56:11 +0000 Jet http://www.javatang.com/archives/2007/11/11/5611239.html 1. Cannot modify header information

PHP Warning: Cannot modify header information – headers already sent by (output started at yourfiles)

这是因为设置的头文件信息溢出造成的。解决方法：将output_buffering 设为 on 就可以了

2. output handler ‘ob_gzhandler’ conflicts with ‘zlib output compression’

PHP Warning: ob_start() [ref.outcontrol]: output handler ‘ob_gzhandler’ conflicts with ‘zlib output compression’ in yourfiles

这是因为PHP中Zlib模块设置错误造成的，将zlib.output_compression这一行注释掉就可以了。这里需要指出的是PHP5自带GZIP模块的，不需要另外加载。

参考资料：
解决Warning: Cannot modify header information – headers already sent by ……
启用页面 Gzip 压缩后发生错误，请指点

]]> http://www.javatang.com/archives/2007/11/11/5611239.html/feed 0