[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卻顯示不出來