[jQuery] IE8踩雷: 使用$('element')建立元素未加入結尾

最近寫了一個dropbox like breadcrumbs的外掛，
結果在IE8測試下有個地方沒反應，
查了一下是建立元素的時候沒有結尾。

//會爆掉!!
//  var $anchor = $("<a data-id='" + nodeData.id + "'>");
  var $anchor = $("<a data-id='" + nodeData.id + "'></a>");

[AngularJS] 整理一下學習資源

目前很熱的NG框架，記錄一下找資料蒐集的東東。

電子書

AngularJS O'REILLY 中文翻譯 (保哥)
https://github.com/doggy8088/angularjs-tw

AngularJS-Learning
https://github.com/justjavac/AngularJS-Learning-zh_CN

文章

AngularJS-學習資源匯集
https://github.com/justjavac/AngularJS-Learning-zh_CN

三十天新手教學文系列
http://ithelp.ithome.com.tw/profile/share?id=20071512&page=1

用MAN架構打造超人般的網頁應用程式http://ithelp.ithome.com.tw/ironman6/player/blackie1019/alll/1

AngularJS 社群

http://angularjs.cn/#/

範例:

AngularJS book sample
https://github.com/shyamseshadri/angularjs-book

Angular seed
https://github.com/iambigd/angular-seed

Angular + RequireJS seed
https://github.com/iambigd/angular-requirejs-seed

ng-option (directive)
https://github.com/doggy8088/TWZipCode-AngularJS

right-click (directive)
http://jsfiddle.net/bcaudan/vTZZ5/

drag and drop (directive)
https://github.com/codef0rmer/angular-dragdrop

context menu (directive)
http://plnkr.co/edit/qPL2w1?p=preview

currency format (directive)
http://jsfiddle.net/WsRcc/

網站設計參考

bm.S5-style.com 這個網站有蒐集很多設計的很不錯的網站，可以供設計師模仿參考 :D

[工具] htaccess 產生器

懶人htacess產生器

http://cooletips.de/htaccess/

[jQuery] 如何新增plugin的 public method

寫了很多外掛用了很多外掛，一直再找覺得看起來順利的寫作pattern，Stackoverflow也有人提到jQuery官方如何擴充公用方法的實踐方法!!

統一整理到以下這篇:D

[jQuery Plugin] 撰寫jQuery plugin的一些寫作樣式

[jQuery] 搞懂 jquery plugin 與 jquery widget

對於jquery plugin與widget字義上有不清楚可以看一下stackoverflow解釋可以有助理解xd

jQuery plugins vs widgets

You can either write a jQuery plugin or a jQuery UI widget.

Depends on what you want to do. Neither of these is outdated. If you write a widget, it will depend on jQuery UI (and jQuery of course), if you write a plugin, it will only depend on jQuery. Really, it depends on what you want to achieve.

Jquery Widget vs Jquery Plugin, Differences, When to use which?

I've never heard of a jQuery widget. I imagine some people might use the term to describe a... widget... that has been made with jQuery. Certainly there are widgets in jQuery UI, for example. It's an odd question.

A widget is a widget (always includes a visual element, sometimes includes reusable functionality), and can be a subset of a plugin or a plugin in and of itself.

A plugin extends jQuery directly and may or may not have a visual component.

[PHP] Assetic 初探

Assetic是一個Asset的管理工具，可以把網站的靜態資源(js.css)打包在一起。

前置工具：
要獲得這個工具，請安裝composer，方便又快速

1.在你的專案下面建立一個composer.json
{
        "require":{
                "kriswallsmith/assetic": "1.1.*"
        }
}


2.安裝套件
$>composer install

裝完會在目錄下看到一個vendor的資料夾：

                                                                                                                          
vendor下面放的東西

3.建立一個測試頁面


  include_once 'vendor/autoload.php'; //記得要呼叫autoload.php

  use Assetic\Asset\AssetCollection;
  use Assetic\Asset\FileAsset;
  use Assetic\Asset\GlobAsset;
  use Assetic\Filter\GoogleClosure\CompilerApiFilter;

  $APP_FOLDER = dirname(dirname(__FILE__)) . "/flicklinkr";


  $js = new AssetCollection(array(
       // new GlobAsset($APP_FOLDER '/js/*'),
       new FileAsset($APP_FOLDER . '/js/plugins/jquery.logger.js'),
  ), array(
    new CompilerApiFilter()
  ));
 
  //the code is merged when the asset is dumped
  header("Content-Type: text/javascript");
  echo $js->dump();
?>

4.輸出結果

(function(a){a.console=function(a){"undefined"!=typeof window.console&&console.log(a)}})(jQuery);

[PHP] 安裝 composer套件

記錄一下composer的安裝步驟

安裝流程

1. Change into a directory in your path like cd /usr/local/bin 
2. Get Composersudo curl -sS https://getcomposer.org/installer | sudo php
3. Make the phar executable sudo chmod a+x composer.phar 
4. Change into a project directory cd /path/to/my/project 
5. Use Composer as you normally would composer.phar install 
6. Optionally you can rename the composer.phar to composer to make it easier
1. sudo mv composer.phar composer

[RequireJS] requireJS 中文資料

今天在測試RequireJS相關功能時，
找到竟然有人翻簡體中文:

RequireJS API中文版

比照官方文件翻譯，有興趣的人可以參考。

[Alfresco] 原始碼解讀

對岸同胞解讀alfresco代碼的網站，對alfresco有興趣的人可以看一下: D
http://www.ecmkit.com/zh-hans

[Mac] 砍掉MAC網路磁碟產生的暫存檔"._"

掛載網路硬碟時，不小心把一些噁心的finder產生的暫存檔 ._ 丟到git上XD，
可參考這篇教學:How to remove all Mac "._" files from a Network Drive

可以透過find的指令把相關檔案找出來

$>find <路徑> -name "._*"

然後就會看到相關的暫存檔

要砍掉的話就加個 -delete 參數即可


$>find <路徑> -name "._*" -delete

好用的Effeckt css動畫效果

為了強調良好的UX，
透過一些動畫效果讓使用者清楚的知道頁面有哪些元素變動是非常重要的。現在除了Animation CSS之外又多了一個 Effeckt CSS，
可以適需求導入自已的專案中喔XD

http://h5bp.github.io/Effeckt.css/dist/

bootstrap

火紅很久的BootstrapUI框架，看來工程師要靠這個救一下自已了XD

英文
http://twitter.github.io/bootstrap/

繁體中文
http://kkbruce.tw/

[Java] Jersey 自動轉址

今天測試透過Jersey轉址到另一個下載連結，記錄一下操作方法。
主要透過Response.setOther這個方法就可以簡單達到，
不過要注意使用URI.create下載的連結時，
要避免不合法的URI格式，可用URLEncode.encode解決。 
不過會遇到空白檔案下載變+號的編碼，記得取代一下+為%20即可

 (謎之聲:The URLEncoder implements the HTML Specifications for how to encode URLs in HTML forms.)。 URLEncoder.encode(obj_name).replace("+", "%20")

 如果炸掉可以將回傳結果轉換成json輸出，請看exception的程式範例

@GET
@Path("/download/{store_type}/{store_id}/{uuid}/{obj_name}")
public Response downloadObject(@Context HttpServletRequest request,
   @Context HttpServletResponse response,
   @PathParam(value = "store_type") String store_type,
   @PathParam(value = "store_id") String store_id,
   @PathParam(value = "uuid") String uuid,
   @PathParam(value = "obj_name") String obj_name,
   @QueryParam(value = "alf_ticket") String alf_ticket){
 
//...省略很多

String downloadlink = "http://test.jpg";
URI reidrectURI = null;
  
  try{
   
   reidrectURI = URI.create(downloadlink );
   
   return Response.seeOther(reidrectURI).build();
   
  }catch(IllegalArgumentException illaEx){
  
   illaEx.printStackTrace();
 JSONObject resp = new JSONObject();
   resp.put("statuscode", 500);
   resp.put("link", originalAlfDownloadLink);
  
   ResponseBuilder builder = 
     Response.status(Response.Status.INTERNAL_SERVER_ERROR).type(MediaType.APPLICATION_JSON);
   builder.entity(resp.toString());
   Response respBuilder = builder.build();
   
   return respBuilder;
  }
}

[Java] 監看誰呼叫了目前的程式

今天要找一個奇怪的bug，需要追踨整個Java Class呼叫的Stack

StackTraceElement[] stackTraceElements = Thread.currentThread().getStackTrace()

According to the Javadocs:

The last element of the array represents the bottom of the stack, which is the least recent method invocation in the sequence.

A StackTraceElement has getClassName(), getFileName(), getLineNumber() andgetMethodName().

You will have to experiment to determine which index you want (probably stackTraceElements[1] or[2]).

http://stackoverflow.com/questions/421280/in-java-how-do-i-find-the-caller-of-a-method-using-stacktrace-or-reflection

[Java] 計算Concurrent User

客戶希望能看到網站目前的在線人數有哪些，
網路上大家都使用HttpSessionListener與HttpSessionBindingListener

二者的用法有點不一樣，但都可以達到一樣的效果。

細節的說明可以參考這篇：

http://www.cnblogs.com/cdr-cool/archive/2013/05/08/3066975.html

這次的測試用HttpSessionBindingListener的示範：

搶到COSCUP2013的票 XD

[Javascript] 透過prototype的方法存取private member

記錄一下先前遇到的事情，
某一天在寫類別的時候，遇到想要用prototype去存取private member的成員，
就偷懶直接把private member改為public member XD，
查了一下Stackflow javascript - accessing private member variables from prototype-defined functions

No, there's no way to do it. That would essentially be scoping in reverse.

Methods defined inside the constructor have access to private variables because all functions have access to the scope in which they were defined.

Methods defined on a prototype are not defined within the scope of the constructor, and will not have access to the constructor's local variables.

You can still have private variables, but if you want methods defined on the prototype to have access to them, you should define getters and setters on the this object, which the prototype methods (along with everything else)will have access to.

function Dog(_dogName){
    var that = this;
    
    var dogname = _dogName || "dog" ;//default setting
  
    that._getName = function(){
       return dogname;
    };
    
    that._setName = function(newName){
         dogname = newName;
    };

};
//use getName to access private member
Dog.prototype.getName = function(){
    return  this._getName();
};
Dog.prototype.setName = function(newName){
    return  this._setName(newName);
};
    
var myDog = new Dog();
console.log("mydog:" + myDog.getName());

var tomDog = new Dog("tom");
console.log("tomDog:" + tomDog.getName());
tomDog.setName("mary");
console.log("tomDog2:" + tomDog.getName());

Fiddle看範例: Go

Reference:
Private Members in JavaScript

[jQuery plugins] 超激推 qtip plugin，讓錯誤訊息的位置不會撐爆XD

jquery validate是一個幾乎每個網站都會採用的外掛，
但是常常會因為錯誤訊息讓版面整個錯亂，
最近為了這個問題，找到了qtip2這個外掛，
強力的支援各種jquery plugin的tooptip外掛。

http://craigsworks.com/projects/qtip2/

為了方便使用就支接寫了一個擴充的方法，避免專案太多地方引用重覆的程式碼
原則上只是把範例的程式包起來而已...XD

//移除qtip2
 $.validator.prototype.qtipDestory = function(element){
      if( $(element).valid()){
       $(element).filter(".valid").qtip("destroy"); 
      }
    };
//顯示qtip2
$.validator.prototype.qtip = function(error,element,my,at){
  // Set positioning based on the elements position in the form
  var elem = $(element),  
  corners = ["right center", "bottom left"],
  flipIt = elem.parents("span.right").length > 0;

  if(my == "undefined" && at != "undefined"){
   corners = [my,at];
  }
  
  // Check we have a valid error message
  if(!error.is(":empty")) {
    // Apply the tooltip only if it isn"t valid
    elem.filter(":not(.valid)").qtip({
     overwrite: false,
     content: error,
     position: {
      my: corners[ flipIt ? 0 : 1 ],
      at: corners[ flipIt ? 1 : 0 ],
      viewport: $(window)
     },
     show: {
      event: false,
      ready: true
     },
     hide: false,
     style: {
      classes: "qtip-red" // Make it red... the classic error colour!
     }
    })

    // If we have a tooltip on this element already, just update its content
    .qtip("option", "content.text", error);
  } 
  // If the error is empty, remove the qTip
  else { elem.qtip("destroy"); }
 }

接著就照老樣子在errorPlacement補上一刀

...省略
errorPlacement:function(error,element){  
  $your_validated.qtip(error,element);
},
//驗證成功會把qtip消除
success:$.noop,

有時候你需要手動清除qtip(自已遇到關掉dialog要手動清除qtip)

//別忘了reset
$your_validated.resetForm();
$(".qtip").each(function(){
   $(this).data("qtip").destroy();
})

[Eclipse] bitbucket not authorized

先前把flicklinkr的原始碼改放在bitbucket，

今天要checkout的時候遇到not authorized錯誤

原來使用HTTPS將專案拉回的時候，要輸入你bitbucket上的帳號密碼XD

[jQuery Plugins] jquery form ajaxsubmit前修正欄位的名稱或值

jquery form是一個很常用的外掛，
能讓我們簡單做到ajax form的效果，
今天有一個需求想要在送出的時候多加一個欄位時該怎麼處理，
只要在beforeSubmit的callback event下，
擴充form欄位的array就可以了。

參考stackoverflow
http://stackoverflow.com/questions/247284/modifying-form-values-with-beforesubmit-with-jquery-ajaxsubmit

範例如下

$(form).ajaxSubmit({
       url: apiEndpoint,
       type: "post",
//       data: postData,
       dataType:  "json", 
       beforeSubmit: function(arr, $form, options){
        

       //The array of form data takes the following form: 
       //$.console(arr);
       arr[arr.length] = { name:"draft", value:draft};
}
});

不過在測試multiform/data post的時候似乎不管用，殘念!!

[jQuery API] removeData 一直都拿不掉資料 WTF

今天發生一很怪的bug，想要用removeData移除先前暫存的資料一直移不掉(某些特別的key:user_jmeter-slave1-user1)，如果像是簡單一點的ken,jack倒是沒問題。
想說是不是這個key，對$data方法會有bug發生。

結果寫了測試的方法也沒問題!!，範例如下

http://jsfiddle.net/e92s6/2/

但是在 瀏覽器下的console執行js code也不行。

最後發現jquery官方找到了另一條思路的解法(http://jsfiddle.net/rwaldron/AvqeW/9/)，
就是再把資料設成null就好了

範例如下:

//清掉資料
$.data("your_key",null)

//判斷資料還存不存在，如果沒存過第一次是會找到undefined!!
var queryUserData = $.data("your_key",null)
if(typeof (queryUserData) == "undefined" || queryUserData == null){
      //做你要幹的事
  //.....
}

[Eclispe] 設定utf-8

開發專案前請記得請大家的環境統一設定UTF-8編碼，避免一些中文註解爆了XD

General/WorkSpace/Other: UTF-8

[jQuery plugin] 實作Shift + Click多選行為

如果要模擬window shift鍵多選的行為，可以參考以下這篇文章。
Snippet: Shift + Click List Items with jQuery

主要的邏輯是記錄最後一個選擇的項目

$parentNode.delegate("li","click",function(event){
    
    var $currLI = $(this);
   
    if($currLI.hasClass("select_this")){
     
     //unselected
     $.console("[UserList.render] delegate:unselected user");
     
     if(event.shiftKey){
      //just unselected
      $currLI.removeClass("select_this");
     }else{
      //re-locate last selected/unselected
      $currLI.removeClass("select_this");
      $currLI.addClass("last_selected");
      
      $lastSelected.removeClass("last_selected");
      
      //change last selected
      $lastSelected = $currLI;
     }
    }else{
     
     //selected 
     $.console("[UserList.render] delegate:selected user");
    
     //
     // SHIFT + CLICK
     //
     
     var $shiftSelected = [];//record seleted items by shfit key
     if(event.shiftKey){
      
      //shift + click logic 
      if($lastSelected.length > 0){//first click
       
       if($lastSelected == $currLI){
        $.console("[UserList.render] same selection");
        
        return false;
        
       }else{
        
        //detect foward or back
        direction = $currLI.nextAll(".last_selected").length > 0 ? "forward" : "back";
        $.console("[UserList.render] last_selected count:" + $currLI.nextAll(".last_selected").length);
        $.console("[UserList.render] direction:" + direction);
        
        if(direction == "forward"){
         $shiftSelected = $currLI.nextUntil($lastSelected);
        }else{
         //back
         $shiftSelected = $lastSelected.nextUntil($currLI);
        }
        
//        $.console("$shiftSelected:" + $shiftSelected.length);
        $LICollection.removeClass("select_this");//reset pre selected
        
        //final selected items
        $shiftSelected.addClass("select_this");//highlight shift selected
        $lastSelected.addClass("select_this");//highlight last selected
                 $currLI.addClass("select_this");//highlight current selected
                 
       }
       
      }else{
       
       $lastSelected = $currLI;
       $currLI.addClass("select_this last_selected");
      }
      
     }else{
      
      //record last selected
      $lastSelected = $currLI;
      $currLI.addClass("select_this last_selected");
  
     }
     
    }
    
    //for debug
//    $.console("lastselected username:" + $lastSelected.find(".usr_name").html());
    
    if(userlist.selecteEventHandler && typeof(userlist.selecteEventHandler) === "function"){
     userlist.selecteEventHandler($currLI,userlist.getSelectedItems());
    }
   });

[jQuery API] append加上fadeIn的效果

今天要遇到想要在append新元素時，加入fadein的效果。
筆記一下..

//userElem為html tag
$(userElem).hide().appendTo($parentNode).fadeIn(1000);

[Alfresco] 如何取得webscript的參數

這篇記錄如何從webscript取得QueryString、Path parameter of URL與Post body

QueryString
<url>/people/search/email?filter={email}</url>

function main()
{
   var filter = args["filter"];
}

Path parameter
<url>/person/{userName}</url>

function main()
{
   // Get the user name of the person to get
   var userName = url.extension;
}

Post Body

function main(){
 
//invalid input
if(!json.has("users")){
    status.setCode(status.STATUS_BAD_REQUEST, "The request body format is error.");
    return;
}

var usersIndex ;
var users = json.get("users");//json array
for (usersIndex = 0; usersIndex < users.length(); usersIndex++){
 //Get user val 
 var currentUser = users.get(usersIndex);
    

}

其他補充

url

A host object providing access to the URL (or parts of the URL) that triggered the web script.

context

Alfresco context path, for example /alfresco

serviceContext

Alfresco service context path, for example /alfresco/service

service

Web script path, for example /alfresco/service/blog/search

full

Web script URL, for example /alfresco/service/blog/search?q=tutorial

templateArgs

a map of substituted token values (within the URI path) indexed by token name

args

Web script URL arguments, for example q=tutorial

match

The part of the web script URL that matched the web script URL template

extension

The part of the web script URL that extends beyond the match path (if there is no extension, an empty string is returned)

For example, imagine a web script URL template of

/user/{userid}

and a web script request URL of

/alfresco/service/user/fred?profile=full&format=html

The url root object will respond as follows:

• url.context => /alfresco
• url.serviceContext => /alfresco/service
• url.service => /alfresco/service/user/fred
• url.full => /alfresco/service/user/fred?profile=full&format=html
• url.args => profile=full&format=html
• url.templateArgs['userid'] => fred
• url.match => /user/
• url.extension => fred

Reference:
http://wiki.alfresco.com/wiki/Web_Scripts_Examples#URL_Argument_Handling

[Java] Filter Url-Pattern 筆記

久久用一下常常會忘記怎麼正確的設定Filter Url-Pattern，
趁著昨天需要用到，筆記一遍。

第一種解法(舊方法)：
http://fecbob.pixnet.net/blog/post/38258307-tomcat-default-servlet-%E7%9A%84url-pattern

filter-mapping在web.xml中定義的順序相同。
在web.xml檔中，以下語法用於定義映射：

1.  以」/’開頭和以」/*」結尾的是用來做路徑映射的。
2.  以首碼」*.」開頭的是用來做擴展映射的。
3. 「/」 是用來定義default servlet映射的。
4.  剩下的都是用來定義詳細映射的。比如： /aa/bb/cc.action

所以，為什麼定義」/*.action」這樣一個看起來很正常的匹配會錯？因為這個匹配即屬於路徑映射，也屬於擴展映射，導致容器無法判斷。

第二種解法：
http://k2java.blogspot.in/2011/04/servlet-filter-mapping-exclude-pattern.html

透過設定init-parm的方式帶入忽略的URL，並透過Regex來處理

Servlet filter mapping exclude pattern

Once you apply a filter to a URL pattern:

<filter-mapping>
    <filter-name>theFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

/*
there's no option in web.xml to exclude a more specific pattern such as: /public/*.

But you can put the exclusion logic in the filter itself:

<filter>
    <filter-name>theFilter</filter-name>
    <filter-class>org.demo.CustomServletFilter</filter-class>
    <init-param>
 <param-name>excludePatterns</param-name>
 <param-value>public/*</param-value>
    </init-param>
</filter>

org.demo.CustomServletFilter excludePatterns public/*

And in the filter code:

public void init(FilterConfig cfg) throws ServletException {
 this.excludePatterns = cfg.getInitParameter("excludePatterns");
 .
 .
 .
}

public void doFilter(ServletRequest request,
           ServletResponse response,
    FilterChain chain) 
 throws IOException, ServletException {
 String url = request.getRequestURL().toString();
 if (matchExcludePatterns(url)) {
     chain.doFilter(request, response);
     return;
 }
 .
 .
 .
}

[Eclispe] eGIT 建立一個repository

建立一個location repo的擷圖，如果要直接丟到Github上的話，請參考這個

http://wiki.eclipse.org/EGit/User_Guide#GitHub_Tutorial

[Eclipse] 使用eGIT取回Github上面的專案

前言:

由於平常都使用eclispe開發，所以直接安裝git plugin來存取Github的repo是比較方便的，

感覺把一些sample code放在這，比放在blog上好維護多了xd

所以記錄一下如何從github取回專案 :D

前置處理:

1.請先安裝Egit pluign:

Help->Install New Software

EGit - http://download.eclipse.org/egit/updates

記得二個都打勾!!

[教材] Javascript garden

非常佛心的javascript教學
http://bonsaiden.github.com/JavaScript-Garden/zhtw/

[jQuery plugin] 通知訊息外掛測試

今天試了二個有關訊息通知的外掛，分別是noty跟notify


http://needim.github.com/noty/ (還是github上2012的前十名 :D)
noty的功能比較強大，不過你要怎麼客制化訊息的位置都非常方便。
此外還有queue的功能。

http://redeyeoperations.com/plugins/Notify/
Notify相較之下就比較簡便了，訊息只能秀在最上方，
也沒有queue的功能，如果你有訊息可能會一直出現時，
原本的區塊就會被取代了。

[Eclipse] 搜尋取代大量字串

今天需要將一個東西重新命名一下，但整個專案很多地方有引用，需要一個快速取代的方法。
記錄一下eclipse的操作xd，


1.先搜尋要取代的字，指定搜尋範圍

2.接著在搜尋的結果集按右鍵，就可以看到replace all嚕

[Eclipse] 打開行號

筆記XD

[jQuery] 如何觸發超連結click動作

今天在模擬使用File API下載檔案，需要一個觸發超連結引發下載的動作，筆記一下。

//dom api
document.getElementById('dllink').click(); 
//jquery api
$("#dllink")[0].click();

[Java] Java Javascript/CSS Asset pipeline

將js有效的模組化具有許多維護上的好處，但缺點但js模組多的時候，頁面載入的時間也就愈長，雖然能在產品前將所有的js打包成一份(用linux指令)，但感覺流程上並不適用目前的專案。

目前找到pack-tag這個開源軟體，試用過後感覺非常試合導入專案中，不會影響目前Developer的開發，只需替換掉原本的script標籤，並支援javascript minify。

pack-tag

A JSP Taglib for delivering minified, combined and gzip-compressed resources (JavaScript and CSS).

https://github.com/galan/packtag

[jQuery plugin] 不透過submit觸發jquery validation驗證

jquery validation真是不可或缺的好物，每次用往往有很多用法都會忘記。
趁熱筆記一下。
如果想要不透過submit來觸發驗證的話，可以透過.valid()這個方法。
除了整個form全部驗證之外，也可驗證表單內某一要驗證的元件

$("#myform").validate();
$("a.check").click(function() {
    alert("Valid: " + $("#myform").valid());
    return false;
});

Reference: How do I use jQuery Validate directly, without the submit button?

自動化測試工具

排名前十名的測試工具，僅供參考。

[jQuery API] 偵測關閉網頁使用者點選ok或cancel

為了避免使用者在網頁處理中關閉網頁的話，可以綁定onbeforeunload事件來偵測，
但更進一步的應用，可能需要了解使用者到底是按ok還是cancel!!
找到以下這篇所用到的解法，有需要的人可以參考看看。

Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
The code within the first setTimeout method has a delay of 1ms. This is just to add the function into the UI queue. Since setTimeout runs asynchronously the Javascript interpreter will continue by directly calling thereturn statement, which in turn triggers the browsers modal dialog. This will block the UI queue and the code from the first setTimeout is not executed, until the modal is closed. If the user pressed cancel, it will trigger another setTimeout which fires in about one second. If the user confirmed with ok, the user will redirect and the second setTimeout is never fired.

$(function(){ 
 
 $(window).bind("beforeunload", function(e) {
  setTimeout(function() {
  
            setTimeout(function() {
                $("body").css('background-color', 'red').html("User click cancel button");
            }, 1000);
        },1);
        return 'are you sure';
 });
 
 //按ok處理
 $(window).unload( function () { 
  console.log('bye bye :)');
  
 } );
 
});

[Java] Regex驗證不符合的windows檔案名稱

威猛的範例，參考stackoverfolw這篇討論:
 http://stackoverflow.com/questions/6730009/validate-a-file-name-on-windows

public static boolean isValidName(String text)
{
    Pattern pattern = Pattern.compile(
        "# Match a valid Windows filename (unspecified file system).          \n" +
        "^                                # Anchor to start of string.        \n" +
        "(?!                              # Assert filename is not: CON, PRN, \n" +
        "  (?:                            # AUX, NUL, COM1, COM2, COM3, COM4, \n" +
        "    CON|PRN|AUX|NUL|             # COM5, COM6, COM7, COM8, COM9,     \n" +
        "    COM[1-9]|LPT[1-9]            # LPT1, LPT2, LPT3, LPT4, LPT5,     \n" +
        "  )                              # LPT6, LPT7, LPT8, and LPT9...     \n" +
        "  (?:\\.[^.]*)?                  # followed by optional extension    \n" +
        "  $                              # and end of string                 \n" +
        ")                                # End negative lookahead assertion. \n" +
        "[^<>:\"/\\\\|?*\\x00-\\x1F]*     # Zero or more valid filename chars.\n" +
        "[^<>:\"/\\\\|?*\\x00-\\x1F\\ .]  # Last char is not a space or dot.  \n" +
        "$                                # Anchor to end of string.            ", 
        Pattern.CASE_INSENSITIVE | Pattern.UNICODE_CASE | Pattern.COMMENTS);
    Matcher matcher = pattern.matcher(text);
    boolean isMatch = matcher.matches();
    return isMatch;
}

[jQuery plugin] Clearable textbox

想要提供使用者方便清空textbox的plugin嗎
找到一個符合這個需求的clear textbox plugin

http://viralpatel.net/blogs/clearable-textbox-jquery/

Demo site:
http://viralpatel.net/blogs/demo/jquery/clearable-textboxes/

[Javascript] Date.parse在safari NaN解決方法

最近在Safari使用Date.parse的NaN問題，不過以下這個解法，少算了時分秒。

The behavior of the Date.parse method is implementation dependent, on ECMAScript 5, this method can parse ISO8601 formatted dates, but I would recommend you to make the parsing manually.

Some time ago I've made a simple function, that can handle a format specifier argument:

function parseDate(input, format) {
  format = format || 'yyyy-mm-dd'; // default format
  var parts = input.match(/(\d+)/g), 
      i = 0, fmt = {};
  // extract date-part indexes from the format
  format.replace(/(yyyy|dd|mm)/g, function(part) { fmt[part] = i++; });

  return new Date(parts[fmt['yyyy']], parts[fmt['mm']]-1, parts[fmt['dd']]);
}

parseDate('06.21.2010', 'mm.dd.yyyy');
parseDate('21.06.2010', 'dd.mm.yyyy');
parseDate('2010/06/21', 'yyyy/mm/dd');
parseDate('2010-06-21');

Also you could detect the ECMAScript 5 behavior to parse ISO formatted dates, you can check if theDate.prototype.toISOString is available, e.g.:

if (typeof Date.prototype.toISOString == "function") {
  // ES5 ISO date parsing available
}

[Alfresco] 在java backed取得post request body

先前已經用過javascript webscript取的post request body。
這次要改用javabacked的方式取得。
範例如下：

public void execute(WebScriptRequest req, WebScriptResponse response) {
     
 
     
     InputStream inputBody = req.getContent().getInputStream();
     String requestBody = RequestBODY.get(inputBody,Charset.forName("utf-8"));

//requestBody:{"parentUUID":"23d97062-5310-4b80-864a-a2232238fd11","uuids":[]}

     System.out.println("requestBody:" + requestBody);

}

[jQuery plugins] 螢幕鍵盤

http://nettuts.s3.amazonaws.com/378_jqueryKeyboard/demo/index.html

[jQuery plugin] Heat map

Heatmap元件好少人做XD

HeatColor, a jQuery plugin

[Alfresco] 下載Zip

原本的alfresco不支援下載多個檔案與資料夾，可以透過自已實作java backed的方式實現。
以下是找到的範例，不過用的alfresco似乎跟我的不一樣:)
http://code.google.com/p/alfresco-application-samples/

[jQuery plugin] 浮水印+驗證器

浮水印加在inputbox是常見的功能需求，但有時候需要與驗證器整合。

function notWatermark(value, element){
        return value != 'enter text...';
    }

    $.validator.addMethod("notWatermark", notWatermark, "Field cannot be empty.");

    $('#SearchForm').validate({
        rules: {
            SomeField: {
                required: true,
                notWatermark: true
            }
         },

Reference:jQuery Watermarked input and validation

[jQuery plugin] 多檔下載

目前專案有需求要達到多檔下載的需求，目前看過mega雲端儲存的作法個人是比較喜歡。
以下是找到現成的外掛

multiDownload
http://biesiad.github.com/multiDownload/

jQuery File Download Plugin for Ajax like, feature rich file downloads

http://johnculviner.com/post/2012/03/22/Ajax-like-feature-rich-file-downloads-with-jQuery-File-Download.aspx

模擬頻寬限制軟體

有時候需要模擬客戶端超級爛的網路頻寬的議題XD，
Slowyapp可以幫我們快速的完成這件事。

不過只支援Mac OS
http://slowyapp.com/

[jQuery plugin] Text Edit 文字編輯器元件

http://markitup.jaysalvat.com/home/

[Javascript] Regex group

實作拖拉上傳資料夾時，
需判斷客戶端使用的瀏覽器是否支援。
使用了regex group的功能，做個group的使用筆記。
chrome version :24.0.1312.57

var browserVersionFullNumber = $.getBrowserVersion();
 var myRegexp = /([\d]+)/g;
 var match = myRegexp.exec(browserVersionFullNumber);
 browserVersion = match[1];  // abc

[Alfresco] 檢查當前節點下的路徑是否存在

今天想要提升一下目前上傳元件的功能，需要支援拖拉資料夾的上傳。
昨天已經成功上傳所有目錄檔案，只差建資料夾的整合。

需要一個api來自動建立不存在的資料夾!!，之前已經有實作直接建資料夾的webscript。
目前需要一個如何判斷一個資料夾是否存在的方法。
以下是簡單的範例

[jQuery] jQuery countdown

在使用jquery countdown的時候，發生IE8不能正常執行。 發生在轉換Date Object時，Date.parse轉換的格式會因不同的瀏覽器吃的string格式會不一樣。

var expiredDate = $(obj).text();
     $.console("pre expiredDate:" + expiredDate);
     
     expiredDate = expiredDate.replace(/-/g,"/");
     $.console("expiredDate:" + expiredDate);
     
     var bmExpiredDate = new Date(Date.parse(expiredDate)); 
     
     $.console(bmExpiredDate);
    

輸出的結果:

日誌: pre expiredDate:2013-02-17 11:18:31
日誌: expiredDate:2013/02/17 11:18:31
日誌: Sun Feb 17 11:18:31 UTC+0800 2013

 Reference: JavaScript and Dates, What a Mess!

[jQuery] 上傳資料夾

目前Chrome瀏覽器在21版以後支援使用者上傳資料夾

多檔上傳

var dropzone = document.getElementById('dropzone');

dropzone.ondrop = function(e) {
  var length = e.dataTransfer.files.length;
  for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
  }
};

上傳資料夾

dropzone.ondrop = function(e) {
  var length = e.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      ... // do whatever you want
    } else if (entry.isDirectory) {
      ... // do whatever you want
    }
  }
};

Notice that a big difference here is that you can treat a dropped object as Entry (FileEntry or DirectoryEntry) by using new function called getAsEntry (webkitGetAsEntry).
After obtaining access to the Entry object, you can use standard file handling methods that were introduced in the FileSystem API specification. For example, this example shows how you can detect if a dropped object is a file or a directory by examining the .isFile(or the .isDirectory) field.

[Testing] modern IE

http://www.modern.ie/virtualization-tools