[Andorid] Mac版Eclipse ADT 安裝擷圖

骨灰級Eclipse安裝ADT圖文擷取記錄 :D

安裝ADT外掛，輸入網址

[CSS] IE8 顯示背景圖的icon的解決方法

遇到IE8的背景圖跑不出來的問題，另外ie8也看不懂 background-position 與 background-size

「background-size」是 CSS3 才有的進階語法，ie9後才有支援
.nav-icon-devicemgmt{
    background: url('../images/icons/nav-icon-devicemgmt.png') no-repeat left  ;
}

/*IE8可跑*/
.nav-icon-devicemgmt{  
    background-size: 32px 32px;
    background-image:url('../images/icons/nav-icon-devicemgmt.png') ;
    background-repeat:  no-repeat;
    background-position:  left ;
    background-position-x: 5px;
}

[jQuery API] IE8 隱藏column後表格寬度異常解決方法

昨天遇到ie8在表格的column隱藏時，表格的寬度未自動變動的問題。
慘況如下圖記念擷圖

找到這個作者的解法，透過變動display的屬性成inline-talbe，再透過setTimeout再把dispaly重設，表格的寬度就會正常了。

[CSS] IE8 border無法正常顯示

記錄一下處理ie8有關border無法正常顯示議題

/*.tblList tr td{
     position: relative;fix ie8 border issue
}
*/
先前的版本為了讓border的寬度能在ie8顯示，於是加了position:relative，但卻造成了後面版本的border卻顯示不出來

[Android] Android Studio 安裝記錄

最近要開始把玩Andorid，由於新手入門大家都建議不用完Eclipse ADTXD，

直接換Android Studio開發可能對長遠比較好，加上AS的功能與性能似乎幹爆Eclipse。

以下是安裝過程中炸掉的處理方法

安裝步驟

Step1: 遇到安裝JDK前會爆炸的話，請先下載這個補丁XD

http://support.apple.com/kb/DL1572?viewlocale=zh_TW&locale=en_US

Step2: 安裝JDK

Step3: 指定AS要用的JDK路徑，之後就一直下一步Next

網路上額外找的相關JDK的安裝路徑

For different types of JDKs or installations, you will have different paths.

On Mac OS X Mavericks, the path I found as following:

1) Built-in JRE default:

 /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin/Contents/Home

2) JDKs downloaded from Apple:

 /System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/

3) JDKs downloaded from Oracle:

/Library/Java/JavaVirtualMachines/jdk1.8.0_11.jdk/Contents/Home

Step4: 開始享用

參考

http://blog.ccc99.tw/2014/10/os-x-1010-java.html

[Java] Unable to load class for JSP 炸掉筆記

20150204更新:
最後發現有重覆的jar甘擾造成慘劇!!

• jasper-compiler-5.5.23.jar
• jasper-runtime-5.5.23.jar
• jsp-2.1-6.1.14.jar
• jsp-api-2.1-6.1.14.jar

好死不死遇到Unable to load class for JSP ，
手記這個bug的處理情況， 問了google大神也一堆人遇到
但沒統一的解法，有的人是用到的jar有衝突還是缺之類的，還是classpath跑掉blabla
目前的狀況整個IDE新舊專案的JSP都無法編譯。
索性就用重灌ide的方法，結果執行的時候也爆了。
原來一灌的時候，忘了設Tomcat的VM Options(會導致libs無法載入太多而炸掉)
接著就能跑了....

炸掉的error

[NetBeans] 設定Utf-8編碼

預設的netbeans好像沒有gui設定utf-8編碼開啟檔案，可以透過修改設定檔的方式來解決

步驟:

1. 打開設定檔:
C:\Program Files (x86)\NetBeans 7.2.1\etc\netbeans.conf

2. 找到netbeans_default_options參數

3. 加入-J-Dfile.encoding=UTF-8

[NetBeans] 自動刷新專案目錄結構

記錄一下刷新netbeans專案目錄的ide操作

手動掃描變動

"Source" > "Scan for External Changes"

自動掃描變動

ide預設好像是開啟的:d

[NetBeans] Project Group功能筆記

如果有多個專案版本要同時在netbeans運行可以使用Project Group這個功能來切換不同的project，記錄有關於這功能的事項:D

設定檔路徑

找不到怎麼砍掉舊有的project group可以到以下路徑

%USER_HOME%\AppData\Roaming\NetBeans\<版本號>\config\Preferences\org\netbeans\module‌​s\projectui\groups

裡面有產生java的properties檔案來記錄相關資訊，檔名為 .properties

[Java] Grails Asset pipeline

有關Grails Asset pipeline的簡報介紹 :D

http://tednaleid.github.io/asset-pipeline-presentation/?full#1

[jQuery Plugin] required depends 讓驗證欄位基於其他特地條件成立

如果你使用jquery validator要讓required規則依特地條件成立才驗證的話， 可以使用呼叫的depends方法，並自訂規則:D

$('#ProspectDtlFrm').validate({ 
    rules: {
        prsptEmail: {
            required: {
                depends: function(element) {
                    return ($('#prsptHomePhone').val() == '' && 
                            $('#prsptBusinessPhone').val() == '' && 
                            $('#prsptMobilePhone').val() == '');
                }
            }
        }    
    }, 
    messages: { 
        prsptEmail: 'Please enter your first name'
    } 
});

Reference
jquery validate depends rule

[AngularJS] restangular 更方便操作REST API的模組

好像比$resource更進階的REST操作模組，尚未試用過。

https://github.com/mgonto/restangular

[jQuery API] 小心元素undefined的操作，而引起的getAttribute

當操作使用jquery selector操作未定義的物件所引起的getAttribute的錯誤的小地雷


Uncaught TypeError: Cannot read property 'getAttribute' of undefined

var iframe = $("#videoIntro")[0];
       if (typeof(iframe) != "undefined") {
           var player = $f(iframe);
}

[jQuery Mobile] 設定select menu的初始化

想要指定select menu的初始化的話只要設定val就好了，但要記得refresh一下

範例：

  $('#frmAnalytics_ReportGroup').val('avg').selectmenu('refresh');

[jquery plugin] jquery validator 驗證多個選取盒checkbox

常用的需求，怕忘記直接寫個範例記一下。
以下範例介紹如何透過jquery validator來驗證多個checkboxes，
可以透過minlength參數來指定選取數量

HTML

欲代理區域：
                        <input type="checkbox" id="north" name="area" value="north" /> 北部
                        <input type="checkbox" id="central" name="area" value="central" /> 中部
                        <input type="checkbox" id="south" name="area" value="south" /> 南部
                        <input type="checkbox" id="east" name="area" value="east" /> 東部

JS範例

$validatedContact
   = $("#contactForm").validate({
    rules: {

     //共同 checkbox
     area: {
      required: true
      ,minlength: 2
     }
},
messages:{
area: {
      required: "區域未選取"
      ,minlength: "至少選取二個區域"
     }
},
 submitHandler: function(form) {
}
});

結果

[jQuery plugin] 移除已初始化過的jquery validator

今天有一個頁面需求，需求在切換不同type的時候，變更不同的form的顯示的欄位， 為了方便就是重設jquery validator，可以透過以下範例重設form的validator

範例

$("#contactForm").data("validator", null);
  $("#contactForm").unbind("validate");
  $("#contactForm").removeData("validator")
  $("#contactForm").unbind("submit");//必需移除submit的行為，不然會多重綁定

[Javascript] Timer議題: setTimeout 與 setInterval的筆記

最近用timer來實作dashboard相關的機制，順便查一查筆記一下:d

字面上說明

Timeout  ==>逾時
Interval  ==>間隔

定義:

Javascript的計時功能提供了setTimeout與setInterval這兩種用法，執行後會取得一個Timer ID。

要取消計時可以用的分別是clearTimeout()和clearInterval()，然後把執行後取得的Timer ID殺掉即可

兩者差別:

setTimeout()只做一次；setInterval()會不停的的調用函數。

運作原因:

由於javascript是只有單一執行緒，因此只是告訴Js在某一段時間後，再插入執行你指定的函式

[jQuery API] Uncaught SyntaxError: Unexpected token )

今天在綁定jquery click事件時，一直會噴Unexpected token的error XD

原來是綁定原始的超連結tag，的href打錯了!! 眼殘的錯誤

I had:

 id="register_hyperlink" href="javascript:void();">Register an account

I changed it to:

 id="register_hyperlink" href="javascript:void(0);">Register an account

So that explains it :-)

[PHP] 西元日期轉中文年月日

如果有需要將西元日期轉換的話，可以不用拆解字串的方式。
可參考內建的date函數即可

echo date('Y年n月d日',strtotime('2014-11-18')); 

[jQuery API] JSON SyntaxError: Unexpected token s

今天call同事的api，發現http status都是200正確，但都跑到$.ajax的error handler

17 Nov 2014 17:39:07,698 [DEBUG] [frmDeviceMgmt] jqXHR.responsetext: undefined log4javascript.min.js:155
17 Nov 2014 17:39:07,700 [DEBUG] [frmDeviceMgmt] textStatus: parsererror log4javascript.min.js:155
17 Nov 2014 17:39:07,700 [DEBUG] [frmDeviceMgmt] errorThrown: SyntaxError: Unexpected token s

查了一下原來是回傳的JSON格式是驗證錯誤的關係，踩雷共勉之:D

[Javascript] 日期增加運算

常用的增加時間運算函式，有興趣的朋友可以選用。可以自行設定Interval，非常方便:D
Reference: http://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object

 function dateAdd(date, interval, units) {
        var ret = new Date(date); //don't change original date
        switch(interval.toLowerCase()) {
            case 'year'   :
                ret.setFullYear(ret.getFullYear() + units);
                break;
            case 'quarter':
                ret.setMonth(ret.getMonth() + 3*units);
                break;
            case 'month'  :
                ret.setMonth(ret.getMonth() + units);
                break;
            case 'week'   :
                ret.setDate(ret.getDate() + 7*units);
                break;
            case 'day'    :
                ret.setDate(ret.getDate() + units);
                break;
            case 'hour'   :
                ret.setTime(ret.getTime() + units*3600000);
                break;
            case 'minute' :
                ret.setTime(ret.getTime() + units*60000);
                break;
            case 'second' :
                ret.setTime(ret.getTime() + units*1000);
                break;
            default       :
                ret = undefined;
                break;
        }
        return ret;
    }

[Angular Directive] 取代傳統Alert的 ngSweetAlert

ngSweetAlert是基於sweetAlert的套件中的套件XD
比傳統的alert效果美觀太多了，下一個專案再來套用看看 :D

http://oitozero.github.io/ngSweetAlert/#/home

[jQuery Plugin] 時間範圍的Slider元件

想要slider效果的時間選擇器的話，可以試試這個JQRangeSlider

http://ghusse.github.io/jQRangeSlider/demo.html

[AngularJS] Retrieve JSON Data的key與data

一般使用ng-repeat的時候，除了有一般Array的結構之外，
有時API回傳的結果可能需要透過JSON DATA內部的Key結構來綁定。

今天的Case是要綁定一個問卷:D 資料結構長這個


為了讓元素的name id不一致也用了nested ng-repeat如何拿$index的方法，範例如下：

使用ng-init可以將第一層的迴圈$index透過 qTitleIndex取得

    

    <form id="investQuestionnaireForm">
     <div id="investQuestionnaireList"
      ng-controller="MyQuestionnaireCtrl" class="dialog-moduleContent msgBoxDetail">
   <div class="question-list">
    <ul >
     <li ng-repeat="(qTitle, ansList) in questionnaireList"
      ng-init="qTitleIndex = $index">
      <div>{{qTitle}}</div>
      <ul class="answerlist">
       <li ng-repeat="ans in ansList">
        <input type="radio" name="{{qTitleIndex}}_ans_{{$index}}" value="{{ans}}" /> {{ans}} <br/>
       </li>
      </ul>
     </li>
    </ul>

   </div>
     </div>

最後示意
 

[AngularJS] 使用jquery來呼叫Angular scope 方法與更新變數

想在舊的jQuery專案內呼叫Angular的方法與變數，可以在jquery中使用以下方法取得scope

var ngScope = angular.element(document.getElementById('元素ID')).scope();

ngScope即可以操作原本在ng內的方法與變數了，在透過jquery更新完變數後，記得要呼叫$apply來告知Angular裡面的變數的值已改變了!!

參考以下完整範例:

[Javascript] 網路拓樸的函式庫蒐集

由於工作的關係，未來會用到一些呈現網路拓樸的套件，找了以下函式庫。
目前偏好使用jsplumb，網路上的中文資料好像也不是很多。
實作完再來分享

http://sigmajs.org/

http://arborjs.org/

https://github.com/sporritt/jsplumb/

https://github.com/anvaka/VivaGraphJS

Amazon書的
http://www.yasiv.com/amazon#/Search?q=graph%20drawing&category=Books&lang=US

[Raphael.js ] 讓Morrisjs 支援Pie chart與水平bar chart

最近要套用morrisjs這套基於Raphael.js 的畫圖函式庫，發現了缺少了Pie Chart與水平bar chart功能，不過已經有二個fork這專案的人實作了，有興趣的人可以自已把這二個需求合在一起 :D

Pie Chart

https://github.com/tiraeth/morris.js

提供Pie chart的新圖形實作，不過不是merged到最新的master，使用的話，donut chart的hover顯示的文件位置會不一樣

PR Issue:
https://github.com/morrisjs/morris.js/pull/149

Bar Chart

https://github.com/JelteF/morris.js
支援水平的bar chart

[CSS] CSS菜鳥茶包: 讓div的內容置中

測試二個讓Div內的文字可以置中的效果

[jQuery Plugin] 基於 畫佈的jquery 進度條外掛

https://github.com/aterrien/jQuery-Knob

[jQuery plugin] 超靈活的grid layout 外掛: girdster.js

如果要一個很強大又客製化的gird layout給dashboard，可以試試這個girdster.js。
可以省去很多時間的用jquery sortable來實作:d

https://github.com/ducksboard/gridster.js

另一個大大使用這個套件的實作
http://maharshi-singh.blogspot.tw/2013/10/gridsterjs-saving-state-and-dynamic.html
http://gridsterbymaharshi.appspot.com/

[AngularJS] currency 去除小數點decimal-cents

今天用到Angular預設的currency filter時，發現都會在小數點後多二個 00，
查了一下可以透過自定的currency來解決，請參考以下這篇討論串:

http://stackoverflow.com/questions/14782439/removing-angularjs-currency-filter-decimal-cents

[CSS] 語話氣球產生器 Word Ballonns

今天剛好在找參考的css，就找到了這個好用的工具 CSS Arrow Please
透過GUI點一點就會產生樣式了

[WordPress plugin] 顯示所有產品類別title過長的問題

今天發現使用顯示產品類別的short code中的title好像會長出很多換行空白，
因為就順便找一個原始碼的呼叫方式，進入點可以從這個檔案 includes/class-wc-shortcodes.php 開始， 所以就順利找到對應的產品列表原始碼位置 templates/content-product_cat.php 更詳細的資訊可以透過 http://oik-plugins.eu/woocommerce-a2z/ 來協助你追原始碼 :D

[WordPress Plugin] Woocomerce 顯示產品分類到首頁

Woocommerce內建提供簡單的語法讓使用者可以在自訂的頁面顯示產品分類
找到這篇討論串的解法: https://wordpress.org/support/topic/show-only-top-level-product-category-on-home-page

***

[product_categories number="12" parent="0"]

Set the parent paramater to 0 to only display top level categories.

如果要秀全部的分類的話，把number設 number="" 即可

***

經過測試是可以正常執行的，官方shortcode的文件裡面也找的到這行指令XD (RTFM)

http://docs.woothemes.com/document/woocommerce-shortcodes/

顯示的效果如下：

當然預設的指令碼只會顯示如上圖的效果，如果模更進階的顯示的話，Wootheme提供你額外付錢的外掛:D，效果就比較靈活，如下圖所示。

有這樣需求的朋友可至此購買 

http://www.woothemes.com/products/woocommerce-nested-category-layout/

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

太久沒寫jQuery外掛了，找了一些資料來複習一下。
這篇文章記錄一下自已喜歡用的jquery plugin寫作方式。
初學者建議讀一下這篇: http://learn.jquery.com/plugins/

外掛功能

1. 保持jQuery物件鏈結 (非常重要)
2. 提供公有方法(有時候在init plugin之後，可能會需要公有方法能變更plugin的行為或屬性)
3. 提供預設的參數設定
4. 儲存產生plugin 物件的參考 (基於第二個方法)

方法一: 類似bootstrap的解法

最後參考這篇 Things I learnt creating a jQuery Plugin (Part I)，作者也基於這個寫作方式，寫了一個bootstrap的tagger外掛: https://github.com/acanimal/tagger.js

;(function($) {
    //define plugin name
    var pluginName =  'jqueryPlugin';
    
    //create plugin class
    function Plugin (element,options){
        
        this.el = element;
        this.$el = $(element);
        
        this.options = $.extend({}, $.fn[pluginName].defaults, options);
       
        //constrctor
        this.init();
        
        return this;
    };
    
    Plugin.prototype.name = pluginName;
    Plugin.prototype.version =  '0.0.1';
    
    Plugin.prototype = {
        
        init : function(){
            
            var plugin = this;
        },
        
        /**
         * The 'destroy' method is were you free the resources used by your plugin:
         * references, unregister listeners, etc.
         *
         * Remember to unbind for your event:
         *
         * @example
         * this.$someSubElement.off('.' + pluginName);
         *
         * Above example will remove any listener from your plugin for on the given
         * element.
         */
        destroy: function() {

            // Remove any attached data from your plugin
            this.$el.removeData();
        },
        
         /**
         * Write public methods within the plugin's prototype. They can 
         * be called with:
         *
         * @example
         * $('#element').jqueryPlugin('somePublicMethod','Arguments', 'Here', 1001);
         *  
         * @param  {[type]} foo [some parameter]
         * @param  {[type]} bar [some other parameter]
         * @return {[type]}
         */
        pubMethod : function(){
            
        }
        
    }
 
    /**
     * This is a real private method. A plugin instance has access to it
     * @return {[type]}
     */
    var privateMethod = function() {
        console.log("privateMethod");
        console.log(this);
    };
    
    // Plugin wrapper around the constructor,
    $.fn[pluginName] = function(options) {
        
        var args = arguments;

        if (options === undefined || typeof options === 'object') {
            // Create a plugin instance for each selected element.
            return this.each(function() {
                if (!$.data(this, 'plugin_' + pluginName)) {
                    $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
                }
            });
        } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
            // Call a pluguin method for each selected element.
            if (Array.prototype.slice.call(args, 1).length == 0 && $.inArray(options, $.fn[pluginName].getters) != -1) {
                // If the user does not pass any arguments and the method allows to
                // work as a getter then break the chainability
                var instance = $.data(this[0], 'plugin_' + pluginName);
                return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
            } else {
                // Invoke the speficied method on each selected element
                return this.each(function() {
                    var instance = $.data(this, 'plugin_' + pluginName);
                    if (instance instanceof Plugin && typeof instance[options] === 'function') {
                        instance[options].apply(instance, Array.prototype.slice.call(args, 1));
                    }
                });
            }
        }
    }

     /**
     * Names of the pluguin methods that can act as a getter method.
     * @type {Array}
     */
    $.fn[pluginName].getters = ['pubMethod'];
    
     /**
     * Default options
     */
    $.fn[pluginName].defaults = {
         defaultOption: "I'm a default option"
    };
    
})(jQuery);

[jQuery Mobile] 動態更改jquery mobile 按鈕的圖示

記錄一下如何動態變更jquery mobile 生成的按鈕Icon. http://stackoverflow.com/questions/12627864/change-data-icon-on-click-with-jquery-mobile

$(buttonSelector).attr('data-icon', newIcon)
                 .find('.ui-icon')
                     .addClass('ui-icon-' + newIcon)
                     .removeClass('ui-icon-' + oldIcon);

[AngularJS] 如何在UI-Bootstrap取得input file

今天在使用DialogService的時候，在modal那層的controller一直取不到input file的$scope變數，查了一下在以下這篇討論：

http://stackoverflow.com/questions/23913998/how-to-access-file-input-in-controller-using-angular-ui-bootstrap-modal

解法如下：

透過自已新建一個fileService，再新增一個directive語法去記錄檔案改變時，將file存到fileService

[CSS] IE8 透明度寫法

記錄一下如何在萬惡的IE8支援透明度:D

img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }

[JavaScript] 快快樂樂學log4javascript

log4javascript 是基於Apache log4j的log系統，基本上用過log4j的人應該很快就可以上手。
有興趣的話可以看一下之前的筆記: [Java] 快快樂樂學會log4j

Appender 

提供以下幾種Appender

Appender
AlertAppender =>將log透過alert秀出來
AjaxAppender => 將log寫到Server存起來
PopUpAppender
InPageAppender
BrowserConsoleAppender => 將log印在console上

[D3.js] 使用d3.js畫出Google 風格的測量儀器效果

使用d3.js來製作google style的測量儀器效果，用來顯示cpu、mem非常直覺 :D
作者說可以任意用在商業用途上，請參考作者的gist
https://gist.github.com/tomerd/1499279

[D3.js] 長在D3.js上面的繪圖函式庫

如果喜歡D3又想要加速繪圖，可以試試以下的基於D3的第三方繪圖函式庫，輕鬆體驗D3畫報表的爽度 :D，目前依Github Start數最高的為Rickshaw。

c3

C3 enables deeper integration of charts into your application.

dimple

An object-oriented API for business analytics powered by d3.

Dc.js (Dimensional Charting Javascript Library)

dc.js is a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter's demo). It leverages d3 engine to render charts in css friendly svg format. Charts rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's interaction. The main objective of this project is to provide an easy yet powerful javascript library which can be utilized to perform data visualization and analysis in browser as well as on mobile device.

xCharts

xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.

Rickshaw 

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

[Netbeans] 如何建立資料夾

記錄一下找很久才發現怎麼建新增資料夾 XD

[Raphael.js] 基於Raphaeljs 之上的繪圖函式庫

最近由於新的任務要在web上呈現一些數據，
本來想使用d3.js，但任務需求一定要支援可怕的IE 8相容性問題，
google了一下有其他workaround (r2d3.js與aight.js)，但可能還有其他未知的問題xd
考慮是否選擇另一套 Raphaeljs (http://raphaeljs.com/)，Raphael是一套知名在web上畫出向量圖形的函式庫，主要會依瀏覽器支援的狀況使用SVG(IE 9下不支援)或VML(< IE 8)來進行向量繪圖，不過社群活躍度就不如D3了。

當然主要的任務是畫一些報表的圖形，找了一些基於Raphaeljs上頭的繪圖工具: D

gRaphael (MIT License)

http://g.raphaeljs.com/
較陽春版的charts

[AngularJS] NVD3基於D3繪圖的directive module

An AngularJS directive for NVD3 re-usable charting library (based on D3).
Easily customize your charts via JSON API.

http://krispo.github.io/angular-nvd3/#/

NVD3讓你可以透過directive來實現D3的繪圖效果: D，使用Angular需要圖表呈現可以考慮

[Javascript] 記錄一下目前Mobile APP Framework

本文持續蒐集網路上發現Mobile Web App Framework

Telerik NativeScript
http://www.telerik.com/nativescript

Intel App Framework
http://app-framework-software.intel.com/index.php

Ionic
http://ionicframework.com/

[WordPress] 改wordpress的相關手法筆記

本篇記錄一下簡單幫朋友建置wp的心得

修改siteurl

在資料表wp_options裡面有siteurl的欄位，修改後就能變更網站的固定網址

修改主標題選單

header.php的位置，每次升級themes前請小心header.php被更新後還原

content/themes/<你下載的佈景主題目錄>/header.php

判斷使用者有沒有登入的function

WooCommerce修改側欄選單的項目

外觀->小工具

從可用小工具拖拉WooCommerce到Sidebar即可

WooCommerce修改商品頁先顯示分類

WooCommerce->設定->Tab商品->Shop Page Display->改為顯示子類別

[AngularJS] ngprogress-lite 網頁讀取進度條

想要實作網頁的載入進度提示可以使用ngprogress-lite這個module

https://github.com/voronianski/ngprogress-lite

[AngularJS] 實作簡單的multipart uplaod

簡單記錄一下ng處理上傳的相關資源
Please note that solutions that use FormData(), such as the ones presented here in other answers, do not work correctly in older IE browsers.

The correct solution should use a backup strategy for that, such as using iFrames. There are already many angular JS modules to perform file uploading:

• https://github.com/nervgh/angular-file-upload/
• https://github.com/leon/angular-upload
• https://github.com/uor/angular-file
• https://github.com/danialfarid/angular-file-upload (最多github的讚)
• https://github.com/twilson63/ngUpload

http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
https://egghead.io/lessons/angularjs-file-uploads

[Alfresco] 上傳大檔的相關問題筆記

先前處理alfresco上傳的議題

1. Heap Size issue (Need to increase that) 
2. JVM memory allocation 
3. session time out (It will take more time to write the data on created content so need to make sure session timeout does not happens)

https://addons.alfresco.com/addons/bulk-filesystem-import-tool

[jQuery plugin] 使用同一個驗證規則來驗證多個textobx欄位

今天有個畫面需求，需用驗證多個textbox (也可以動態產生)，使用同一個規則。 一般來說jquery validator只會驗證一個元素(假設你有多個name故意一樣，也只有一個會被驗證)

以下這個StackoverFlow討論串有提供另一個解法:

http://stackoverflow.com/questions/15739390/validating-multiple-textbox-having-same-name-with-jquery-validator-validates-onl

[AngularJS] 自訂directive控制圖片找不到

如果遇到頁面的圖片載入失敗時，通常會load預設的圖片，避免有叉燒包的情況。
可以自建一個directive來處理此事件

以下是Stackoverflow的解法:
http://stackoverflow.com/questions/16310298/if-a-ngsrc-path-resolves-to-a-404-is-there-a-way-to-fallback-to-a-default

app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {

      scope.$watch(function() {
          return attrs['ngSrc'];
        }, function (value) {
          if (!value) {
            element.attr('src', attrs.errSrc);
          }
      });

      element.bind('error', function() {
        element.attr('src', attrs.errSrc);
      });
    }
  }
})

[NetBeans] NetBeans安裝不同的佈景主題

說明如何簡單的更換NetBeans的佈景主題:D

http://askubuntu.com/questions/107873/how-to-use-a-theme-in-netbeans-7-1

Themes are contained in a .zip archive.

1. Open the Options window: Tools -> Options (see picture 1)
2. Press the Import button (see picture 1)
3. Press the Browse button and select the theme file (a .zip archive).
4. Tick the checkbox to select all settings (just Fonts & Colors will be fine as well, those are the themes) (see picture 2)
5. Press OK and accept the confirmation dialog
6. After restarting, go to Options again and select the theme at Fonts & Colors, Profile (see picture 1)

Sublime IDE的預設佈景:

http://plugins.netbeans.org/plugin/51424/sublime-theme

[Angular] MVC MVVM MVP 說文解字

常見的 MVC MVVM MVP 框架說文解字

MVC - Model-View-Controller

MVP - Model-View-Presenter

MVVM - Model-View-ViewModel

MVW / MV* - Model-View-Whatever

HMVC - Hierarchical Model-View-Controller

MMV - Multiuse Model View

MVA - Model-View-Adapter

取自:
https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV

Igor Minar

公開分享 - 2012年7月19日

MVC vs MVVM vs MVP. What a controversial topic that many developers can spend hours and hours debating and arguing about.

For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings and api improvements, it'snow closer to MVVM – the $scope object could be considered the ViewModel that is being decorated by a function that we call a Controller.

Being able to categorize a framework and put it into one of the MV* buckets has some advantages. It can help developers get more comfortable with its apis by making it easier to create a mental model that represents the application that is being built with the framework. It can also help to establish terminology that is used by developers.

Having said, I'd rather see developers build kick-ass apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you".

Angular gives you a lot of flexibility to nicely separate presentation logic from business logic and presentation state. Please use it fuel your productivity and application maintainability rather than heated discussions about things that at the end of the day don't matter that much.

其他討論串:

http://stackoverflow.com/questions/13329485/mvw-what-does-it-stand-for

[AngularJS] IE 相容性

如果讓Angular 支援IE8要注意的項目，要注意的事項

https://code.angularjs.org/1.2.20/docs/guide/ie

[AngularJS] angular 執行順序

這篇文章回應了angular app執行順序:D 附執行範例。

http://stackoverflow.com/questions/20663076/angularjs-app-run-documentation

Here's the calling order:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again if found)

Here's a simple demo where you can watch each execute (and experiment if you'd like).

From Angular's module docs:

Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.

One place you see run blocks used is for authentication

<div ng-app="myApp" ng-controller="myCtrl">
    <div test1 test2> </div>
</div>

var myApp = angular.module('myApp', []);
myApp.factory('aProvider', function() {
   console.log("factory");
});
 
myApp.directive("test1", function() {
    console.log("directive setup");
    return {
        compile: function() {console.log("directive compile");}
    }
});
 
myApp.directive("test2", function() {
    return {
        link: function() {console.log("directive link");}
    }
});
 
myApp.run(function() {
    console.log("app run");
});
 
myApp.config( function() {
    console.log("app config");
});
 
myApp.controller('myCtrl', function($scope) {
    console.log("app controller");
});