[Android] 解決SearchView發生 API版本錯誤

今天在使用SearchView時，

發生elicpse會發生View requires API Level11 (current min is 7): 錯誤

只要

Right click on the project folder > Android tools > Clear Link Markers 就可以解決啦

[Anroid] EditText onTextChanged 低級錯誤 infini loop

很腦的bug，記錄一下，不小心造成onTextChanged無窮執行，

起因在於更新UI Text時，又call了一下setText的函數，因為onTextChanged觸發時，Text已在UI變更，不應再使用setText

[GoogleMap] 如何動態載入Googlemap API

最近試著使用google map的離線api，目前google可以找到不同版本的，目前測試是3.8.2。

如果是在頁面直接透過script標籤引入mapapi.js是沒什麼大問題的!!

不過由於要實作讓使用者切換線上與離線地圖就發現了很扯的bug，

記錄以下失敗的方法，有需要的朋友可以參考。

嘗試失敗的方法

使用document.write，整個瀏覽器白畫面，無法使用且google map無法完全載入

                     var jsTag = '<' + 'script src="http://localhost:8080/js/libs/offlinemap/google/mapapi.js"' +
                        ' type="text/javascript"><' + '/script>';
                document.write(jsTag);

使用document.createElement的方法，console會噴以下這個錯誤 
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

   var element = document.createElement("script");
                element.src = "js/libs/offlinemap/google/mapapi.js";
                element.type = "text/javascript";
                document.getElementsByTagName("head")[0].appendChild(element);

成功的方法

[Java] Granule Asset 函式庫測試

記錄一下使用Granule來編譯js/css檔的過程，雖然專案有點舊了，但試用起來效果還不錯。
主要是看上有JSP Tag很好整合。

功能如下

1. Combine and compresses JS and CSS using different methods: on fly or in build process, CSS and JS fast compression or more sophisticated Google Closure compression, or just simple file combining.
2. No-lock in solution. The tag just put around existing scripts. The tag can be turn on/off on the different levels: page and application.
3. Debug and production modes.
4. Calculate dependencies using Closure Library package/namespace system.
5. Can automatically choose optimization methods.
6. Multiple combinations of JS/CSS even with different compression methods on one page.
7. Support JSP includes.
8. Several types of cache, memory and file.
9. Automatically regenerates the bundle if you modify an included file.
10. Proxy-friendly GZip support.
11. Rewrites relative URLs in your CSS files.
12. JSP, JSF, Grails integration.
13. Multiple loggers support (SLF4J, Log4J, Apache Logger)
14. Can be setup to preserve license headers of JS libraries.
15. JDK1.5 and higher even for Google Closure Compiler.

安裝

[Java] Granule 解決tomcat8 檔案路徑回傳null問題

https://github.com/JonathanWalsh/Granule

最近找了這個工具來幫js/css瘦身，在tomcat 8下轉換assets file路徑會在getRealPath下產生Exception。

The parameter for getRealPath() is a 'virtual path' which - unfortunately - is a concept used in the Java docs but not actually defined anywhere. It is assumed to be a path to a resource in your web application and the separator in that case is always '/' regardless of platform.

解決方法要在html頁面引用javascript file時，要多加一個/

[Shellscript] 批次修改檔名

一行指令修改檔案: D 測試環境Mac OSX已ok

 find . -name '*.jpg' -exec sh -c 'mv "$0" "${0%.jpg}.png"' {} \;


For M$ windows可以參考這個軟體

[Raphael.js] ie8 圖片無法置中

今天測試在ie8執行時，發現圖片會無法置中，找到以下這個討論

https://github.com/DmitryBaranovskiy/raphael/issues/361


主要是svg使用vml轉換時的問題，解決方法如下：

只要打開原始碼找到以下這段

fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);

修改如下即可解決

fill.size = _.fillsize[0] * abs(sx)/1.34 + "pt" + S + _.fillsize[1] * abs(sy)/1.34 + "pt";

[jQuery Plugin] jqplot 重新調整tooltip

在jqplot裡面的highlighter擴充模組提供了tooltipContentEditor方法讓使用者可以處理tooltip的效果，測試ok的範例如下：



tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) { plugin.logger.debug('tooltipContentEditor (x,y): ' + str); // console.log('str: ' + str);// x , y // console.log('seriesIndex: ' + seriesIndex); // console.log('pointIndex: ' + pointIndex); // console.log(jqPlot.options.axes.xaxis.ticks); // console.log(jqPlot.data[seriesIndex]); // console.log(jqPlot); var xAxis = jqPlot.options.axes.xaxis.ticks[parseInt(str) - 1]; // str.split(',')[0]; var yAxis = str.split(',')[1];//這樣取比較準 var newElem = '
' + '' //以下這個方法有時候取得的值會異常，例如設成年的時候 // +'

' + jqPlot.series[seriesIndex]["label"] + '
x axis:	' + xAxis + '
y axis:	' + jqPlot.data[seriesIndex][pointIndex] + '

'; + '
y axis:
' + yAxis + '
'; return newElem; }
http://stackoverflow.com/questions/17719534/jqplot-tooltip-content-editor

2015/12/28後記

被qa發了tooltip值異常的問題，擷圖來記錄一下，最後修正最完了的xaxis的解法請參上的範例即可。

[jQuery plugin] 解決jqplot 動態繪圖記憶體一直長大的問題

目前在專案上使用jqplot來繪圖，遇到記憶體一直長大的問題，
經過測試以下這個作者的解法是可用的
https://edsilverton.wordpress.com/2011/04/11/avoiding-jqplot-memory-leaks/

在每次重新繪圖時需要把元素整個幹掉，記憶體才會真的往下嶧放掉。

[CI] 記錄一下CI框架新手功能

記錄一些CI框架Seed常用的功能手記，讓日後可以快速回憶 :D

雖然已經是被很多人放棄的技術，不過還是有他方便的地方XD

測試版本

CI 2.x

設定起始的base url

http://stackoverflow.com/questions/18075257/set-dynamic-base-url-in-codeigniter

Just overwrite the line in config/config.php with the following:

$config['base_url']    = 'http://'.$_SERVER['HTTP_HOST'].'/';

If you are using the sub folder you can use following code:

$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url']    = "$root";

設定資料庫

application/config/database.php：

設定啟動的控制器

打開application/config/routes.php：
$route['default_controller'] = 'index';

設定啟動時載入相關的helper

打開application/config/autoload.php：

// $autoload['helper'] = array();

$autoload['helper'] = array('form','url','assets','images','load_view_helper');

[Wordpress] Limit Login Attempts 設定使用者登入太多次的鎖定外掛

如果要預防使用者一直嘗試登入電腦，可以透過 Limit Login Attempts
來限制使用者可以登入錯誤的次數，不過外掛已經有二年未更新了XD

https://wordpress.org/plugins/limit-login-attempts/

[Docker] 快快樂樂學Docker指令集

由於上周為了在MAC上面安裝跟開發機一樣的環境，結果費時費力還會爆炸，決定使用docker來統一一下開發的環境。

測試環境

Mac OS X 10.9.5

安裝Docker

1. 下載boot2docker
https://github.com/boot2docker/osx-installer/releases/

安裝後docker 和 boot2docker 的執行檔就已經放在 /usr/local/bin，而且也會多裝一個Virtualbox，因為docker是要跑在linux核心上面

2. 安裝新的linuxVM

$boot2docker init

執行過程中，會去下載 boot2docker.iso，並建立 Linux VM

3. 啟動 boot2docker-vm 虛擬機器 => 有了這個VM才有辦法開始使用docker
$boot2docker start

啟動後會提示需要export 以上設定，否則無法使用docker指令集

另外boot2docker安裝後，可以在應用程式看到一個boot2ocker iCON，也可以用來開這個vm

boot2docker 其他指令集

#取得boot2docker VM IP

$boot2docker ip

#可以在啟動前，先檢查有沒有新版的images
$boot2docker upgrade

docker常用指令集

[Android] 無法產生R.java檔

記錄一下第一次import要android專案踩到的雷，基本上網路上都找的到，但大家遇到的CASE都不一定相同。以下自已的解決方法，希望可以幫助遇到一樣問題的人。

R.java無法產生的問題如下：

• ADT更新不完成 => 套用的SDK版本相關的組件沒安gk
• 專案內的libs:裡面也放了參照的library，造成偵測到二個版本而無法編譯

          

• res內的 *.xml一定有格式爆炸了，所以才會無法產生。
• 有遇到新增新的Activity時，對應的樣版xml檔案內缺少XML 文件宣告而爆炸
• 重覆引用appcompat_v7 專案的library(這個是新增Android自行產生的專案lib): 僅需使用android-support-v7-appcompat (這專案是從android-sdk_r24.3.3-macosx.zip下載之後內的專案匯入的，主要是要import它build出來的android-support-v7-appcompat.jar與android-support-v4.jar)

如何設定android-support-v7-appcompat設定成專案可以引用的libraries

1. 首先從下載android-sdk_r24.3.3-macosx.zip 解開後，把裡面的/Applications/eclipse/android-sdk-macosx/extras/android/support/v7的專案import到eclipse的workspace

2. 匯入後，在android-support-v7-appcompat的專案按右鍵，選properties，跳出下圖視窗，照紅色框線步驟點擊，第三步要把Library內的is Library打勾，我們就可以build一個library

3. 接著在匯入的專案指定要referenc android-support-v7-appcompat專案所產生的lib，按下ADD按鈕後，會跳出讓你選你要參考的專案lib，記得只能選擇android-support-v7-appcompat的lib而不要選appcompat_v7 專案的lib

請教完同事後，建議沒事不要亂更新IDE的SDK，除非是專案有必要，不然很容易爆炸的XD

android模擬器常發生專案無法run上去的情形，但大原則是專案只要沒有紅色的警告，接上手機來build code基本上都是可以跑的，筆記筆記。

[jQuery plugin] 讓table能夠支援變更行寬大小與調整行的位置

如果要實作table的拖拉行與行寬大小可以參考這二個元件:D

http://www.jqueryscript.net/table/Simple-jQuery-Plugin-For-Draggable-Table-Columns-Dragtable.html

http://dobtco.github.io/jquery-resizable-columns/

[jQuery API] textarea加入change 事件

記錄一下如何監聽textarea裡面的文件被改變

$('#textareaID').bind('input propertychange', function() {

});

[NetBeans] tomcat8.0.x 如何在netbeans 8成功執行

當使用tomcat8要在netbeans8執行時會發生錯誤，
可以修改catalina.bat裡面的JAVA_OPTS參數設定，
請照以下三步驟即可解決無法run tomcat的問題。


Step1: 打開你的catalina.bat
C:\\apache-tomcat-8.0.23\apache-tomcat-8.0.23\bin\catalina.bat


Step2: 找到以下的設定

:noJuliConfig
set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%"

:noJuliManager
set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_MANAGER%"

Step3: 移掉雙引號

:noJuliConfig
set JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%

:noJuliManager
set JAVA_OPTS=%JAVA_OPTS% %LOGGING_MANAGER%

[AngularJS-3rd] angular-dialog-service 模組輕鬆整合訊息對話窗效果

記錄一下整合angular-dialog-service的程式筆記

主程式

libs/angular-dialog-service/dialogs.min.js => version 5.0.0

其他相依模組

required ngSanitize, bootstrap.ui,ngTranslate

Demo

以一個編輯用戶的LIST來做說明

編輯使用者

             $scope.editUser = function($index, user) {
            logger.info('edit user');
               var dlg = dialogs.create(
                'partials/users/dialog/dialog.updateUserInfo.html',
                'DialogUpdateUserInfoCtrl',
                user, {}
            );
            dlg.result.then(function(resultData) {

                $scope.users[$index] = resultData; //update users data

               
            }, function() {

            });
        };

刪除使用者

  $scope.deleteUser = function($index, user) {
            logger.info('delete user');
            // console.log(user);
            var dlg = dialogs.confirm(
                '刪除帳戶',
                '你確定要刪除帳戶' + user.U_Email + '嗎?'
            );
            dlg.result.then(function(resultData) {
//reload user data
            });

        };

[AngularJS] 不透過type=reset來清除表單

記錄一下如何在angular清除表單內的值呢?
一般來說除了透過在頁面上放置一個按鈕類型為reset的效果最快。
但如果要在送出表單後，Server確定新增正確後，
再清除表單可自已新增一個resetForm的方法來處理。
以下是一個新建用戶的頁面來說明：

重設2按鈕是使用自訂的方法來清除表單資料，這裡需要額外注意type=mail資料驗證失敗是不會被寫入進$scope的，透過手動來清除，透過上圖可以清除看到$scope.user物件並無存到已輸入的錯誤文字

 $scope.resetForm = function(formModel) {
            logger.debug('resetForm');
            console.log(formModel);


            $scope.addForm.$setPristine();
            angular.copy({}, formModel);

            $scope.user.email = '';//解決email input無法清除的問題，email欄位要在通過規則後才會被model綁定
        };

頁面元素放入 ng-click="resetForm(user)，user則為表單的物件

  <button type="button"
                                 ng-click="resetForm(user)" class="btn btn-default">
                                <i class="fa fa-refresh"></i> 重設2</button>

[CSS] 處理內部元素無法完全顯示的問題，當父元素加入overflow:hidden時

之前遇到頁面上做了一個contextmenu的選單效果，但一直被顯示時，選單會因為父元素裡面設了overflow:hidde，導致這個問題。


討論串位址:
http://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent

This is an old question but encountered it myself.

I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")

If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.

If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.

[jQuery Plugins] fancybox 執行在1.9.x的jquery錯誤處理

處理一些新版jquery跑fancybox 1.3.4的處理方法:

討論位址:

http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

It seems like it exists a bug in jQuery reported here : http://bugs.jquery.com/ticket/13183 that breaks the Fancybox script.

Also check https://github.com/fancyapps/fancyBox/issues/485 for further reference.

As a workaround, rollback to jQuery v1.8.3 while either the jQuery bug is fixed or Fancybox is patched.

---

UPDATE (Jan 16, 2013): Fancybox v2.1.4 has been released and now it works fine with jQuery v1.9.0.

For fancybox v1.3.4- you still need to rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.

---

UPDATE (Jan 17, 2013): Workaround for users of Fancybox v1.3.4 :

Patch the fancybox js file to make it work with jQuery v1.9.0 as follow :

1. Open the jquery.fancybox-1.3.4.js file (full version, not pack version) with a text/html editor.
2. Find around the line 29 where it says :

   isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,

   and replace it by (EDITED March 19, 2013: more accurate filter):

   isIE6 = navigator.userAgent.match(/msie [6]/i) && !window.XMLHttpRequest,

   UPDATE (March 19, 2013): Also replace $.browser.msie by navigator.userAgent.match(/msie [6]/i) around line 615 (and/or replace all $.browser.msieinstances, if any), thanks joofow ... that's it!

Or download the already patched version from HERE (UPDATED March 19, 2013 ... thanksfairylee for pointing out the extra closing bracket)

NOTE: this is an unofficial patch and is unsupported by Fancybox's author, however it works as is. You may use it at your own risk ;)

Optionally, you may rather rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.

[Javascript] 如果透過window物件來將字串轉換成執行程式

先前需要遇到不同狀況時，
呼叫不同含式，
但函式內部只是call不同api，
於是為了簡寫一點程式，利用字串的方法來取得函式物件，
可以使用window[你的函式字串]來轉換含式

           var runAPI = '';
                switch (reportType) {

                    case 'datastream':
                        runAPI = 'FUN_A';
                        break;

                    case 'avg':
                        runAPI = 'FUN_B';
                        break;

                    case 'max':
                        runAPI = 'FUN_C';
                        break;

                    case 'min':
                        runAPI = 'FUN_B';

                        break;

                }//end of switch

                //conv to real js function !!important
                var fnRunAPI = window[runAPI];

接著funRunAPI就變一個可執行的函式了

2015/10/21 更新

另外要使用物件或帶入參數也是可行的


window[你的函式字串](參數)

window[物件Class名稱][物件函式字串](參數)

[工具] 好用的線上影像地圖工具

http://www.maschek.hu/imagemap
透過這個工具就可以簡單選取出影像地圖所要使用的坐標範圍，非常方便:D

[Java] Java專案的JS/CSS minify

針對Java專案js/css最小化相關open souces資源記錄

pack-tag

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

https://github.com/galan/packtag

Jawr

https://github.com/ic3fox/jawr

Granule

Java JS/CSS optimization solution (tag and ant,servlet). Whitespace remover and Google Closure compilator integration
https://github.com/JonathanWalsh/Granule

wro4j

Free and Open Source Java project which brings together almost all the modern web tools: JsHint, CssLint, JsMin, Google Closure compressor, YUI Compressor, UglifyJs, Dojo Shrinksafe, Css Variables Support, JSON Compression, Less, Sass, CoffeeScript and much more. In the same time, the aim is to keep it as simple as possible and as extensible as

https://github.com/wro4j/wro4j

[CSS] backgroud 與 backgroud-image 小踩雷

今天在弄二層下拉選單時(以前都有美工拉好T_T)，
在mouse hover的時候設定要改一下背景色，結果卻把a裡面設定的backgroupd-image ICON蓋掉了，
原來是用錯指令啦，記得要使用backgroupd-color

.sub-nav li a:hover,.sub-nav li:hover{
    color:  #000 !important;
/*    border-bottom:  2px solid  #58616d;*/

    /*background是設背景圖，會把icon換掉的，要改backgroupd-color即可*/
    /*background:#dfdfdf !important;*/ 
     background-color: #dfdfdf !important;
}

[AngularJS-3rd] ui-select 操作筆記

記錄一下ui-select這個元件的操作
https://github.com/angular-ui/ui-select

ui-select transclude 錯誤

遇到這個問題只要升級angular的版本到1.2.18即可:D

// Recreates old behavior of ng-transclude. Used internally.
        .directive('uisTranscludeAppend', function () {
            return {
                link: function (scope, element, attrs, ctrl, transclude) {
                    transclude(scope, function (clone) {
                        element.append(clone);
                    });
                }
            };
        })

[jQuery API] 如何讓元素透過tabindex來達到Focus效果

今天在實作一個下拉選單顯示與隱藏的效果(透過點擊一個按鈕)，
當下拉選單出現時，設定呼叫focus()，反之在失去Focus時，會自動hide。

加入tabindex屬性，讓元素(div or ul)支援focus方法

//再focus執行前，加入tabindex屬性
  $dropdownMenu.attr('tabindex',-1).fadeIn().focus();

偵測被Focus的元素的方法

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

去除瀏覽器的tabindex外框

當你讓選單focus的時候，會發現外框出現的色框

可以透過以下css，讓border消失

:focus { 
    outline: none; 
}

參考

• http://stackoverflow.com/questions/5594431/jquery-focus-not-working-without-tabindex-attribute-of-div
• http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery

[Bootstrap 3] 替下拉式選單加上三角形的對話框圖

如果想讓bootstrap的下拉選單多了一個三角形的圖案的視覺效果， 可以加入二個虛擬元素 before與after，如下所示：

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

效果

[Bootstrap 3] 讓Label顯示於input的左側

今天想讓Label配置在input的左側，可以參考以下作法，加了一個control-label即可。


http://stackoverflow.com/questions/18404003/bootstrap-3-label-on-the-left-side-instead-above-a-input-field

[AngularJS-3rd] UI-Router 常用筆記

本篇慢慢記錄UI-Router相關的操作心得

UI-Router $state帶參數轉頁

  
$state.go('admin.productlist.uuid', 
{
uuid: product.FD_CurrentFilePathHash
});

 
// Admin page for productlist/:uuid
   $stateProvider
    .state('admin', {
     abstract: true,
     template: "",
     data: {
      authorizedRoles: [USER_ROLES.admin]
     }
    })
.state('admin.productlist.uuid', {

    /*manage user page */
    url: '/productlist/:uuid',

    views: {

     // the main template will be placed here (relatively named)
     // replace unnamed view '


'  in this state's parent state, 'home'.
     '': {
      templateUrl: 'partials/global.index.html'
     },

     //viewname@statusname
     // the child views will be defined here (absolutely named)

     'header@admin.productlist': {
      templateUrl: 'partials/global.header.html',
      controller: 'HeaderCtrl'
     },

     'main_body@admin.productlist': {

      templateUrl: 'partials/product_dm/productlist.body.html',
      controller: 'ProductListCtrl'
     },

     // for column two, we'll define a separate controller
     'footer@admin.productlist': {
      templateUrl: 'partials/global.footer.html'
     }

    },

    data:{
     pageTitle: '產品DM'
    }
   });

[AngularJS] 小踩雷筆記: select option 綁定

當我們使用select做資料綁定的時候，需要注意一下綁型的變數型別是什麼字串或數值。
今天遇到的問題是，從db撈回來的select 設定的值是字串(String)，但元件上綁定為數值(Int)
所以在設定model綁定的時候忘記轉成字串，就會發現綁定失敗XD

示意圖(圖好像合成錯張了，紅色是這次的注意的重點)

[UI-Bootstrap] 小踩雷筆記 Tabset元件的scope操作

記錄一下使用Tabset取得控制child scope變數的筆記：
由於Tabset會建立child scope，
所以想要存在tab內部的scope變化除了用 $parent.scope變數 (如果又巢狀的scope可能會發生錯誤例外)，
也可以在parent controller宣告一致的變數，就能方便取值了。
以下這個Tabset的範例可以參考:
http://plnkr.co/edit/vclolFBfF7QMQAQgNmiL?p=preview


範例目的：
Justified這個tab裡面的input，一但值被改變，外面的parent scope會一起連動。

在tabset內綁定了一個parent scope宣告的model(model.selection)

<div ng-controller="TabsDemoCtrl">
  {{model.selection}}
  <tabset>
    <tab heading="Justified">
      <input ng-model="model.selection">
    </tab>
  </tabset>
</div>

宣告一個model的物件在parent scope，所以當tab裡面的input變動時，就容易取到變動的值了。

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
  ];

  $scope.model = {selection: ''};
  $scope.options = ['a', 'b', 'c', 'd'];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert("You've selected the alert tab!");
    });
  };

  $scope.navType = 'pills';
};

https://github.com/angular/angular.js/wiki/Understanding-Scopes
https://github.com/angular-ui/bootstrap/issues/1553

[AngularJS] 多個信箱驗證的directive實作

記錄一下多個信箱驗證的directive實作。

.directive('multimails', function() {

    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl, ngModel) {

            var validator = function(value) {
                // console.log('validator: ' + value);
                if (value != '' && typeof(value) != 'undefined') {
                    var splitMailsArr = value.split(';');
                    // .filter(function(el) {return el.length != 0});
                    for (var i = 0; i < splitMailsArr.length; i++) {
                        var currMail = splitMailsArr[i];
                        // console.log('currMail: ' + currMail);
                        if (currMail != '') {
                            if (/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i.test(currMail)) {
                                ctrl.$setValidity('multimails', true);
                                // console.log('pass');

                            } else {

                                ctrl.$setValidity('multimails', false);
                                // console.log('no pass');
break;
                            }
                        }

                    }
                    return value;

                }

            };

            //驗證規則的順序
            ctrl.$parsers.unshift(validator);
            ctrl.$formatters.unshift(validator);
        }
    };
})

[GIT] 改壞了怎麼回到上一個版本

記錄一下GIT如何回到上一個版本的指令集

 Reverting Working Copy to Most Recent Commit To revert to previous commit, ignoring any changes:

git reset --hard HEAD

where HEAD is the last commit in your current branch Reverting Working Copy to an Older Commit To revert to a commit that's older than the most recent commit: # Resets index to former commit; replace '56e05fced' with your commit code
git reset 56e05fced  # Moves pointer back to previous HEAD git reset --soft HEAD@{1}

 git commit -m "Revert to 56e05fced" # Updates working copy to reflect the new commit git reset --hard

http://stackoverflow.com/questions/4114095/revert-to-previous-git-commit


另一篇Apple大大建議

cherry-pick跟reset + rebase (有點難懂XD)

https://blog.wu-boy.com/2009/12/git-how-to-remove-file-and-commit-from-history%E5%A6%82%E4%BD%95%E7%A7%BB%E9%99%A4-commit-%E6%AD%B7%E5%8F%B2%E7%B4%80%E9%8C%84/

[Javascript 茶包筆記] 簡單列表網頁的小函式

最近有客戶需要列印網頁的內容，於是找到了簡單的方法:D

//列印網頁
function printPage(text){
 
 var text= document;
 print(text);
}

[AngularJS] 小踩雷筆記: ng-class的css name使用-符合

如果你的class name使用了-符號，搭配使用ng-class時，請加上''符號，不然則會失效

請參考: http://stackoverflow.com/questions/15557151/ngclass-style-with-dash-in-key

After hours of hacking around, it turns out the dash gets interpolated! Quotes are needed.

 class="icon-home" ng-class="{'icon-white': someBooleanValue}">

I hope this helps someone from tearing their hair out.

UPDATE:

In older versions of Angular, using a backslash also does the trick, but not in the newer versions.

 class="icon-home" ng-class="{icon\-white: someBooleanValue}">

The former is probably preferred, since you can search for it in your favorite editor.

[AngularJS] 小踩雷筆記: button鈕點擊一直發生submit form的動作

今日踩雷小筆記: 如果你在form表單裡放了button鈕，並自行綁定ng-click方法時，如果html的button忘記加入type="button"， angular將會貼心幫你觸發form submit XD

[Java] JPA 使用IN查詢

由於不習慣用jpa來操作db，第一次要使用in查詢式就踩雷了。
成功的方法如下：

  String cmd = "SELECT d FROM Device d  WHERE d.agentId IN :agentId";
            Query query  = entityManager.createQuery(cmd);
            query.setParameter("agentId", dealAgentIds);

備註: 

• 不要把 :agentId多包一個括號，例如(:agentId)，會炸給你看的。 
• d.agentId是你產生結構裡面的欄位命名，不要用原本database的欄位。

[Angular] ng-src造成的infinite loop

目前在介面上顯示圖片列表時，因為圖片的網址加了random的參數來解決cache的議題，
但會產生infinite loop的error,打開console可以看到。
找到了Stackoverflow以下解譯這個的原因。

http://stackoverflow.com/questions/17222526/angular-js-in-ng-src-causes-infinite-loop

Well I think the problem is the getRandom function returning a different value every time it's called. Here's what happens:

1. Angular call your function
2. Gets the value
3. See's it's different from the previous value
4. Marks the cycle as dirty
5. After the cycle is finished it re-runs the cycle thus getting a new value ...

The idea would be to have getRandom give discreet values over a period of time. For example only give a new value every 1, 10, 30 sec whatever you see fit.

This advice applies to many things, actually. Angular provides no guarantees about how many times it will call your functions that are found in bindings. So you need to make them fast and also you need to make sure that for the same input they return the same output(most times, though in this case it might be justified).

Also consider exactly when/how the image might change and if the actual changes can be triggered by something else consider only creating a new result value for getRandom only when the actual changes are triggered(ex: user uploads a new profile image, a timer executes, etc)

UPDATE: Can't replicate it in plunker using Chrome

解決的方法可以利用一個timer來透過記錄上一次變更的時間差來避免一直檢查的問題。

$scope.lastMillis = new Date().getTime();
     $scope.getRandom=function(){
         var curMillis = new Date().getTime();
         if (curMillis-$scope.lastMillis>5000) {
             $scope.lastMillis = curMillis;
         }
         return $scope.lastMillis;
     };

[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