[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);
        }
    };
})