覆寫jQuery UI Dialog plugin

       最近有一個需求是要自訂jQuery UI Dialog plugin的行為，像是增加新的option和額外處理dialog出現時的 UI配置。研究一下知道要用Jquery UI的Widget Factory，讓jQuery UI Dialog覆寫他自己的function。

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {}):

再把要覆寫的function寫到最後的{}底下：

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
//覆寫open事件，先呼叫super再執行自訂的函式。把醜醜的jquery ui 叉叉圖案改成fontawesome
  open: function() {
    $.ui.dialog.prototype.open.apply(this, arguments);
    var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
    titlBar.empty().append("");
  },
  //覆寫建立title事件，改為自行定義的函式。增加title前的圖案
  _title: function(title) {
    if (!this.options.type || this.options.type == "info") {
      this.uiDialog.removeClass("error").addClass("info");
      if (!this.options.title) {
        title.html(" 提示");
      } else {
        title.html(" " + this.options.title);
      }
    } else {
      switch (this.options.type) { //可新增其他的類型
        case "error":
          this.uiDialog.removeClass("info").addClass("error");
          if (!this.options.title) {
            title.html(" 錯誤");
          } else {
            title.html(" " + this.options.title);
          }
          break;
      }
    }
  }
}));

其中在呼叫jQuery UI Dialog原來的父類別open函數撞牆了，按照網路上的討論是：

$.ui.dialog.prototype.open.apply(this, arguments);

但是這樣會進入一個無限的循環，然後就甚麼都動不了。必須在一開始先將這個父類別函數取出來，再進行呼叫 ：

var _dialogOpen = $.ui.dialog.prototype.open;
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  open: function() {
    _dialogOpen.apply(this, arguments);
    var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
    titlBar.empty().append("");
  }
========略========
}

fiddle完成範例：

免電池車燈使用心得

        騎腳踏車到捷運站轉乘上班已經有好長一段時間了，之前為了安全都會買車尾燈跟前燈以確保安全。但是目前買到需要裝電池的車燈，不是下雨天進水就是常常短路，時亮時不亮，平均兩三個月就要換一組。 後來改用塑膠型的快拆車燈，防水是防水了，但是常常被偷，塑膠一扯就帶走了。因為要常常趕車搭捷運不會每次都記得要拆下來放到背包裡，而且用久之後都會髒髒的，其實也不想特別收起來啊!偏偏就是有人愛偷這種的。光是這種類型的車燈就被偷了三個，一個可是要三百元啊!

        前陣子在FB上看到有一種是免電池的車燈，這個在我小時候用過，他會有一個長長的裝置連接到車輪，用車輪帶動他發電，也就是以馬達發電。但是這種接觸式的缺點就是騎起來車會變得比較重。因為需要拿腳的動力去帶動發電機發電。  不過看到的這款是免接觸的，所以不會碰到車輪也不會有多餘的功耗費；主要就是由磁力產生電力，看起來好像挺有意思的。於是就跟老闆買了一組來試用看看。

        目前用的這款是淑女車和小折專用的，另一款就是給碟煞車輪用的，看原理是用強力磁鐵來帶動發電機發電；用了一個月之後感覺還滿滿意的，因為他裝上去之後就不用再去碰他了，而且他是鎖在煞車皮的部位，要偷走他還得準備工具才行。

        目前好像還有白光版，之後再來下單買一組用用看。感覺這組車燈還滿適合在都市通勤的人使用的。老闆也可以考慮研發一下可以儲電的，這樣在郊區使用的時候也不怕車停下來就沒電囉。

官方粉絲團
https://www.facebook.com/xbatlightch/

好用，但是問題多多的Chart.js

Chart.js是一個很好用的javascript畫圖表工具，但是他卻有一些奇怪的問題。這麼久了似乎也沒有被解掉。
在這邊紀錄一下目前使用Chart.js遇到的問題：

• 變換圖表資料導致錯亂

當你有一個有使用ToolTip的圖表，而這個圖表的內容需要動態替換時這個問題就會產生，範例如下

當切換圖表的時候，之前的第一個圖表會時不時的出現，擾亂使用者的思緒(只有當滑鼠在圖表上移動的時候會發生這個問題)
解決問題的方式很簡單，我被這個問題困住好久啊！ 解法為 -- 在更換新的資料前，要先執行destroy()，如果不這麼做的話，當使用者在圖表上下了click事件的時候，圖表上的值也會取不到，或是會取到最早那個圖表的資料。看來就是兩個圖表完全重疊在一起了，而且事件還共用。

• 不要使用barValueSpacing

這個問題只會發生在bar chart，因為只有bar chart有這個參數(喂~)，加了這個參數之後在每個bar之間會出現一個間隙，但是這個東西會導致click也會完全出錯，到目前為止1.0.2還是沒有解決

利用Selenium IDE進行UI測試

• 安裝與執行

• Selenium IDE是Firefox的一個plugin，用來做UI的自動測試：下載網址為http://docs.seleniumhq.org/download/
• 安裝後，點一下firefox 的工具 -> Selenium IDE ，就會出現底下畫面

• 建立test Case可以使用畫面右方的來進行錄製，錄製完後的畫面如下所示：

• 錄製完後的case可以使用播放的按鈕來執行。
• 這個功能可以設定你要跑的test case是要快一點還是慢一點，通常慢一點比較好，跑太快常常會出問題。
• 底下的Log視窗可以顯示目前執行發生了多少個問題或是正常完成。
• 如果有設定WaitFor的Command的話，最長的等待時間是三十秒(預設，可以在option裡面設定)
• 編寫測試語法
• 除了自動錄製外，使用者也可以自行撰寫測試語法：點選右邊Table區塊的任一個工作項目後，視窗下方會出現Command、Target與Value三個欄位。
• Command : 使用Seleium IDE提供的命令，有Click、Verify、Waitfor、Assert等數十種命令可以使用 http://docs.seleniumhq.org/docs/02_selenium_ide.jsp#script-syntax，官網的文件寫的很爛，可以參考http://software-testing-tutorials-automation.blogspot.in/search/label/selenium%20ide
• Targert : 用來指定Command所要處理的目的，可以是CSS selector、Xpath、link、id或數值(例如pause這個command需要停留的毫秒數)，點取target旁邊的Select可以在firefox的視窗裡面選擇你想要套用的元件，但是這個功能常常失效。
• Value : 指定Command需要用到的數值，例如type時需要輸入什麼字串(pause的秒數需要設定在target)
• 所有的測試語法都是html的table格式，每列共有三欄，分別是command,target與value。
• 可以利用store這個Command將javascript運算結果儲存到selenium IDE裏面方便其他command叫用。
• 例如底下的範例：

command：store target：javascript{ var a = Math.random() * 5; Math.ceil(a+1);} value：j

將會產生一個變數j，且其值為亂數取得2~6之間的整數，調用方式如下：

command：click
target：css=#modifyLocalTree > ul.jqueryFileTree:nth-child(${j}) > li.directory.collapsed > a

利用${}將變數括起來就可以直接使用。

• 利用waitForxxx系列Command可以讓程式等待某個元件顯示或隱藏時再進行下一個動作，例如：
• waitForElementNotPresent : 當DOM被移除時才會繼續進行下一步。
• waitForElementPresent: 當DOM產生時才會繼續進行下一步。
• waitForVisible : 只有當css的display屬性被設定可顯示時才會繼續進行。
• waitFoNotrVisible : 只有當css的display屬性被設定none時才會繼續進行。
• 利用type指令可以在指定的input裡面輸入自定的文字。
• 利用click指令可以點選指定的DOM，同時也可以用來模擬點選radio或是checkbox，如果沒有指定radio的index，預設會點選第一個。

後面等我繼續使用，有心得再來補好了

jQuery 1.9之後的attr

今天在寫一個table中tr的click事件，本來想要在某一列上click之後就自動選取前方的checkbox；經過許久的測試後發現事情並不單純，利用以前舊有的attr方法來做竟然發生問題

原來的版本

在這個解法中是利用.attr('checked')來檢查目前checkbox的選取狀態，在第一次run的時候，功能完全正常；但是如果點了第二次他就失靈了，如果利用Chrome developer tool來查看元件，會發現checkbox的後面會忠實地加上checked="checked"這樣的屬性，妙的是checkbox的顯示完全是未選取狀態。

查了jQuery的文件後發現，在jQuery 1.9之後要改用prop，雖然這個在1.6版就有了，但現在看來1.9不用這個會出大問題

http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

修改後的版本

改用prop來檢測目前的checkbox狀態，並且用prop來變更checkbox狀態。這樣就可以正常呈現想要的功能，不過如果再用Chrome developer tool來看的話，會發現checkbox之後的checked ="checked"根本不會改變...
這真是太詭異了

PL/SQL迴圈及暫存資料表

莫名其妙被扯入Oracle EBS系統，被迫學習PL/SQL語法；

以下為建立暫存資料表及利用迴圈取得相對應子項目資料再一起寫入暫存的筆記：

//建立暫存資料表

create GLOBAL TEMPORARY TABLE temp_wales (

  DESCRIPTION VARCHAR2(80 BYTE),

  ASSET_NUMBER VARCHAR2(15 BYTE),

  DATE_PLACED_IN_SERVICE DATE,

  LIFE_IN_MONTHS NUMBER(4,0)

)

ON COMMIT PRESERVE ROWS;

//由A取得ID後再去比對B資料表中的Parent_ID

BEGIN

    FOR rec IN (SELECT ID,DESCRIPTION,ASSET_NUMBER,DATE_PLACED_IN_SERVICE,LIFE_IN_MONTHS FROM A )

//開始迴圈

    LOOP

//先寫入父資料的記錄到暫存裡

      INSERT INTO temp_wales( ASSET_NUMBER,DESCRIPTION,DATE_PLACED_IN_SERVICE, LIFE_IN_MONTHS) values( rec.ASSET_NUMBER,rec.DESCRIPTION,rec.DATE_PLACED_IN_SERVICE,rec.LIFE_IN_MONTHS);

//再寫入子資料的記錄到暫存裡

      INSERT INTO temp_wales( ASSET_NUMBER,DESCRIPTION,DATE_PLACED_IN_SERVICE, LIFE_IN_MONTHS)  SELECT ASSET_NUMBER,'改良',rec.DATE_PLACED_IN_SERVICE,rec.LIFE_IN_MONTHS FROM B WHERE Parent_ID=   rec.ID;

//結束迴圈

    END LOOP;

END;

//撈撈看是否有資料了

select * from temp_wales;

好濕!好濕啊~

蚤起，沐浴更衣。排腹中穢物，良久!

出浴門，驚覺八點過廿，疾著衣靴。天雨之，披雨簑，名之雙濕；跨鐵輪疾驅。過半，果蓑衣汁水淋漓，衣衫褲襪竟皆濕透，雙濕之稱果不負其名!

忽鐵輪沉重難以駕馭，下車觀之，鐵輪竟開口而笑!本應肥腴身型竟如路邊瘦丐奄奄一息。

攙鐵輪尋巷道中鐵輪工匠，不果，萬念俱灰!

撚袋中銅幣一枚，卜卦之；曰:今天不宜仕事，大喜!乃歸。