2011年9月30日 星期五

Javascript switch UTC Date to local time



Date.prototype.formatDate = function(format)
{
var date = this;
if (!format)
format="MM/dd/yyyy";

var month = date.getMonth() + 1;
var year = date.getFullYear();

format = format.replace("MM",month.toString().padL(2,"0"));

if (format.indexOf("yyyy") > -1)
format = format.replace("yyyy",year.toString());
else if (format.indexOf("yy") > -1)
format = format.replace("yy",year.toString().substr(2,2));

format = format.replace("dd",date.getDate().toString().padL(2,"0"));


var hours = date.getHours();
var hasAMPM = false;
if (format.indexOf("t") > -1)
{
hasAMPM = true;
if (hours > 11)
format = format.replace("t","pm")
else
format = format.replace("t","am")
}

if (format.indexOf("hh") > -1) {
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
format = format.replace("hh",hours.toString().padL(2,"0"));
}
if (format.indexOf("HH") > -1) {
if(!hasAMPM) {
format = format.replace("HH",hours.toString().padL(2,"0"));
} else {
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
format = format.replace("HH",hours.toString().padL(2,"0"));
}
}
if (format.indexOf("mm") > -1)
format = format.replace("mm",date.getMinutes().toString().padL(2,"0"));
if (format.indexOf("ss") > -1)
format = format.replace("ss",date.getSeconds().toString().padL(2,"0"));

if(format.indexOf("O") > -1)
format=format.replace("O",(date.getTimezoneOffset() < 0 ? '-' : '+') + (date.getTimezoneOffset() / 60 < 10 ? '0' : '') + (date.getTimezoneOffset() / 60) );

return format;
}




2011年9月23日 星期五

Mac — Adding Hex Color Picker to Color Picker

I’ve actually been launching Photoshop here and there to get my color picker (ridiculous, I know), or if I manage to remember, preview + color picker.
It’s time to set up a real hex color picker.
First, let’s make the color picker an executable app.
Push CMD + Space, and run AppleScript Editor

In the window that appears, type in “choose color”.

Save it as an app in the “file format” field, and name it what you’d like.

Now I’d go ahead and give it the icon of the Digital Color Meter and throw it on the dock:


Install HexColorPicker
Download file at http://wafflesoftware.net/hexpicker/
and move the HexColorPicker.colorPicker to your ~/Library/ColorPickers

You’re done — start the app and look at your shiny new tab on the right.


reference : http://yuji.wordpress.com/2010/08/01/mac-adding-hex-color-picker-to-color-picker/

2011年9月22日 星期四

讓AJAX動態內容支援瀏覽器回上頁功能

隨著AJAX動態更新技術的普及,手邊專案有愈來愈多網頁開始實現"無PostBack"的設計風格,透過jQuery $.post(), $.get()與ASP.NET程式溝通,執行查詢、更新作業並取得結果,再動態改變HTML DOM回應使用者。(註: 對ASP.NET開發者來說,UpdatePanel是另一個無痛實現AJAX化的選項,但有些副作用)

由使用者的回饋來看,減少網頁PostBack與網頁重新導向次數,確實大幅提高操作回應速度,提供更好的操作體驗,不過倒有一個常被垢病之處 --- 使用者明明覺得點選操作後瀏覽器切換到下一個畫面,為什麼按覽器的回上頁卻無法回到上個畫面?

細究這個問題的根源,在於程式是透過AJAX方式取得下一畫面內容更新在網頁上,或是動態顯示/隱藏不同的DOM元素,給予使用者"由操作網頁A切換到操作網頁B"的認知,但以瀏覽器的角度,卻始終是同一個網頁;由於使用者覺得網頁已被切換過,當需要回前一個介面進行資料修改或重新選擇時,直覺上便會去點選"回上頁",結果跳過了AJAX切換介面的過程,直接進入這個網頁前的瀏覽網頁,造成認知與執行結果的落差,形成抱怨。

當然,在吃過幾次悶虧(例如: 回上頁造成結果沒儲存之類的,這個倒有解藥),碰了一鼻子灰之後,使用者就會學乖,自動避開"在某某網頁不能按【回上頁】,很可怕,不要問"的地雷。或者,我們也可以恐嚇提示或教育使用者避免在這類介面按回上頁,或是在網頁加上自己寫的"AJAX版回上頁"按鈕實現切換回上一個UI效果做為替代,不過,這些治標做法終究無法完全避免使用者誤觸回上頁所造成的困擾。

用一個實例來展示這個問題:

排版顯示純文字




AJAX GoBack







STEP1



STEP2



FINAL





線上展示



以上的網頁包含三個
,假裝是輸入流程中的三個步驟,STEP1按Next可以跳到STEP2,STEP2按Next可以跳到STEP3。在操作上,讓使用者感覺在不同的網頁介面間切換,但對瀏覽器來說,自始至終都在同一網頁,於是,如圖所以,操作時連回上頁鈕都沒得按。

搞HTML的老骨頭可能記得#書籤的用法(參考[請看"書籤"相關說明]),在網頁MyPage.htm中放入,當URL指定MyPage.htm#myBookmark,瀏覽器就會開啟該網頁並捲動到的所在位置。有趣的是,MyPage.htm#a跟MyPage.htm#b可被視為不同網址(這表示在瀏覽歷史中會出現一筆),卻又不會觸發網頁重新載入,這個特性讓AJAX回上頁問題出現一線曙光。

在URI規範中,#符號後方所帶的資訊被定義成Fragment Identifier(#是Hash symbol,#後方的內容也被稱為hash),不只是作為書籤定址,還可實現AJAX的歷史巡覽功能(from Wiki: With the rise of AJAX, some websites use fragment identifiers to emulate the back button behavior of browsers for page changes that do not require a reload, or to emulate subpages.),硬綁綁的規範讓人頭好痛,這裡只研究怎麼應用就好。

以下是一個簡單的hash應用示範(請使用IE8/9/10的標準模式、Firefox、Chrome或Safari執行)

排版顯示純文字




Hash Demo








    線上展示



    網頁裡有一小段程式,會在第0-7秒時,在URL的最後方加上#s0-#s7,執行完畢後,按瀏覽器回上頁及回下頁可在不同的#sn間切換,按下"Show location.href"則會顯示目前的location.hash,當來回切換上一頁下一頁,下方hash=#sn的
  • 顯示並不會被清除,驗證了網頁並未被重新載入,Javascript及DOM的狀態在切換過程中不會遺失。

    但很不幸地,IE7(或IE8/9開相容模式)對location.hash特性支援不夠完整,hash改變時並不會在瀏覽歷史中產生記錄,因此需要透過加入隱藏式iframe等特殊手法來克服,自己處理跨瀏覽器議題太辛苦,有個很好用的jQuery外掛BBQ(不是中秋烤肉巴比Q,是Back Button & Query)可以讓我們輕鬆寫出跨瀏覽器版的AJAX回上頁功能。

    小小改寫前述STEP1-STEP2-FINAL網頁,主要是在切換網頁時透過$.bbq.pushState()將目前的階段設成location.hash(#step=sn),另外在window.onhashchage事件則加入一小段程式,讀取hash值決定現在是STEP1,2還是FINAL,以及該顯示哪一個
    。如此,一旦使用者按下回上頁/回下頁,URL中的hash不同就會觸發hashchange事件,程式就能依指定的階段切換不同的


    排版顯示純文字




    AJAX GoBack








    STEP1



    STEP2



    FINAL





    線上展示



    經過這番加工,網頁就能跨瀏覽器支援回上頁功能,我們又向高級AJAX網頁開發再前進一步囉!

    reference : http://blog.darkthread.net/post-2011-09-22-ajax-goback.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Darkthread+%28Darkthread%29
  • 2011年9月21日 星期三

    Mac OSX intelliJ idea 10.5.2 XDebug setting

    Install XDebug
    Download [xdebug.so] from http://code.activestate.com/komodo/remotedebugging/
    Click [PHP Remote Debugging Client] > [Mac OS X (universal)]
    $ copy xdebug.so /Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so

    edit php.ini
    $vi /path/to/php.ini

    [xdebug]
    zend_extension = /Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so
    xdebug.profiler_enable = 1
    xdebug.profiler_output_dir = /tmp/xdebug
    xdebug.profiler_enable_trigger =1
    xdebug.remote_enable=on
    xdebug.remote_handler=dbgp
    xdebug.remote_host=localhost
    xdebug.remote_port=9000


    Set the path of php bin
    [Preferences] > PHP
    PHP Home :
    /Applications/XAMPP/xamppfiles/bin
    Debugger : Xdebug

    Set the Server information
    Name : MySiteName
    Host : 127.0.0.1
    Port : 3171
    Debugger : Xdebug

    Senerio 1: Javascript Debug Settings
    Step1: [Run] > [Debug Configurations] > Defaults > JavaScript Debug(Mouse right click) > Add New Configuration
    Step2:
    Switch to [Remote] tab
    -Name : JS-IndexPHP (Example: If I want to link to index.php)
    -URL to open : http://127.0.0.1:3171/index.php (Apache webserver url link to index.php)
    -Browser : Chrome
    Step3: Set path of Chrome [/Applications/Google Chrome.app]
    [Preferences] > Web Browsers > Chrome
    check [Active]


    Senerio 1: PHPUnit Settings(AllTests.php testsuite)
    Step1: [Run] > [Debug Configurations] > Defaults > PHPUnit > Add New Configuration
    Step2:
    Switch to [Configuration] tab
    -Test : All in File
    -Test file : /path/to/build/testCase/phpunit/AllTests.php

    Senerio 1: PHPUnit Settings(CustomTest.php testclass)
    Step1: [Run] > [Debug Configurations] > Defaults > PHPUnit > Add New Configuration
    Step2:
    Switch to [Configuration] tab
    -Test : Class or Suite
    -Test file : /path/to/build/testCase/phpunit/inc/class/widgetPool/class/db/WidgetPoolDB.php
    - Test class : WidgetPoolDBTest

    2011年9月18日 星期日

    Eclipse 下右鍵打開文件所在文件夾(Explorer Files) Plugin

    如果你經常需要在Eclipse裡打開相關資源文件所在的文件夾,比較麻煩,要右鍵,屬性,在Location一欄中把所在的文件夾Copy一下,然後再去資源管理器裡輸入這個路徑,Enter,打開它。

    解決方法: 用EasyExplorer插件,有了這個插件就可以很方便地打開資源文件所在的文件夾了.

    安裝: EasyExplorer 從http://sourceforge.net/projects/easystruts

    2011年9月15日 星期四

    IntelliJ IDea PHPUnit Support

    After you set up PHPUnit, Web IDE greatly helps you to run your tests. Namely, to quickly create test run configuration:

    Right-click the desired target: a directory or a PHP file in the Project view, or a test class/method name in the code editor
    Choose Run to start or Create to specify additional parameters
    That’s it!


    XML configuration file

    Advanced settings can be specified through PHPUnit configuration file. All the options specified in Web IDE take precedence over those set in configuration file.



    Test groups

    A test can be tagged as belonging to one or more groups using the @group annotation as shown below.



    The test is run if none of the specified groups is excluded and at least one group is included.



    Run/Debug Tests

    Before you execute tests, please set up PHP home directory (one that contains PHP executable) in Settings | PHP. Debugging is currently available via XDebug. Specify the same debug port in Settings | PHP as in php.ini file (xdebug.remote_port=).



    Test results window

    You can easily navigate from tests results tree and stack trace to the corresponding source code location.



    When debugging your tests you get all the features, such as watches, expressions evaluation, etc. You can have several debug sessions simultaneously.



    All of these features will be available since next EAP.

    Test with pleasure!

    This entry was posted in Feature and tagged PHP, PhpStorm, PHPUnit, testing. Bookmark the permalink.
    page: 2

    Web IDE EAP (build 94.5)
    Posted on December 9, 2009 by neuro159

    There are numerous updates in this build. As usually, most notable are listed below, with details on all (S)FTP, PHPUnit, formatting, javascript and other fixes available in the issue tracker.

    Code analyzer will recognize classes, functions and constants referenced by their PHP 5.3 use aliases.
    Added PHP Unit debugging and XML config support (included/excluded groups etc.)
    Rename refactoring will take care of @param annotations
    Undefined variable inspection will recognize pass by reference parameters as appropriate declarations, i.e. in preg_match(.., .. &$matches)
    Basic “Add declaration” quickfix for unresolved class methods, properties and constants (Alt-Enter)
    Tools|Analyze stacktrace
    It looks like we’re done with PHPUnit support – no pending feature requests or bug fixes, please check it out.

    Nearest plans include complete support for namespaces to finally close PHP 5.3 support, improved remote synchronization setup and all fixes and neat features that we will be able to stuff-in, just as usual.

    Also since IntelliJ IDEA 9.0 is now released we are expecting third party plugins to be updated for 9.0 platform compatibility – that will bring them to WebIDE plugin repository.

    Download Web IDE EAP build 94.5 for your platform from project EAP page.

    -JetBrains Web IDE Team

    reference : http://blog.jetbrains.com/webide/2009/12/phpunit-support/

    2011年9月9日 星期五

    Zend Studio 8.0 PHPUnit Debugger setting[use XDebug in Max OSX 10.6]

    Predefined:
    XAMPP version 1.7.3
    PHP 5.3.1

    Step1 : Install XDebug
    Download [xdebug.so] from http://code.activestate.com/komodo/remotedebugging/
    Click [PHP Remote Debugging Client] > [Mac OS X (universal)]
    $ copy xdebug.so /Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so

    Step2 : Edit php.ini
    $ vi /Applications/XAMPP/etc/php.ini

    [XDebug]
    zend_extension = /Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so


    Zend Studio 8 setting as below:





    Zend Studio 8.0.1 PHPUnit Debugger setting[use XDebug in Windows Server2008]

    Predefined:


    php.ini as below:

    [XDebug]
    zend_extension = C:\AppServ\php5\ext\php_xdebug-2.1.0-5.3-vc9-nts.dll

    [PHPUnit]
    include_path = ".;C:\CruiseControl\projects\Widget_Framework\Int\build\phpunit\PHPUnit"

    [Zend]
    ;zend_extension="C:\Program Files (x86)\Zend\Zend Studio - 8.0.1\plugins\org.zend.php.debug.debugger.win32.x86_5.3.18.v20110322\resources\php53\ZendDebugger.dll"
    zend_debugger.allow_hosts=127.0.0.1
    zend_debugger.expose_remotely=always
    zend_debugger.connector_port = 10013


    Zend Debugger setting as below:








    wibiya widget