2013年12月21日 星期六

AngularJS and jQuery 近期專案開發心得

最近好久沒寫文章了，因為這陣子遇到的事情太多太雜...，但是學到很多...，可是我沒有辦法一一記錄下來，...一時也提不起勁啊，這篇只好用一種當作日記的心情來寫寫了，請大家看看就好，不用太認真 xd，真的。

還有我不想跟大家筆戰，我只是分享一個專案同時使用 AngularJS 跟 jQuery 的感覺是什麼，是『AngularJS and jQuery』，而不是『AngularJS v.s jQuery』，更何況每個專案的體質本來就不同。



AngularJS  (logo來源)
前陣子社群非常活躍的一套 JavaScript Framework，我一直很想嘗試看看使用 AngularJS 是什麼感覺，但是我想一路走來的人都能理解，有時候寫玩具跟真正用在專案上是真的不太一樣的感覺 (當然自己的玩具也叫做專案xd)，只是有客戶的苛求，比較能夠往更多地方鑽研，如果什麼事情都照著工程師的想法做，那當然做什麼都比較順，因為我們都知道，『怎麼做對自己比較方便，而且可以達到一樣的功能』，恩...有點離題了。

所以這次用在工作的專案上，因為專案的需求，會使用到較多的 Ajax 的 Request，來替換頁面上的內容，因為 AngularJS 順暢的 Data Binding 的特性，以及 View Template，因此感覺蠻適合使用 AngularJS 作為這次專案想用的 Framework，從學習怎麼用 $http 到串到專案的功能，大約不會超過4天。 （我必須說明這次真的有太多的時間花在學習 AngularJS 的架構)。

說實在的，如果我今天很熟練 AngularJS，我想時間開支不會超過4天，以開發速度來說，AngualarJS 真的是不錯的選擇，再加上我第一次認真用過MV* 架構的 Framework，寫起來程式碼真的有架構許多，說實在的，如果還有機會，我是一定會再使用 AngularJS，或是學習其他 Framework，工具雖然學不完，但是這些架構跟 Framework 的設計真的蠻值得學習。

不過從 jQuery 寫到 Angular，一定要完全忘記 DOM 這件事情，剛開始用 Angular 有點不習慣，動不動我就想要用 selector，但是... 真的，要學會『綁手綁腳』的使用 Angular，我現在也正在努力適應這件事。:)



jQuery
jQuery 算是我比較熟的，從大學在程式設計公司打工時就是寫 jQuery，中間從來沒換過，至於他的優，我就不再多介紹了，但是就以這次專案遇到的功能，我真的是蠻想捨棄 jQuery 的...，(因為覺得 AngularJS 的 Temlate 太好用了...)，可是最後我還是把整個 AngularJS 改成 jQuery code 了，原因詳見下方轉折點。




轉折點
因為整個專案並不是公司自己開發的產品，因此要考慮到客戶想支援的瀏覽器程度，最後還是改用 jQuery 了，說實話心裡覺得有點杯具，3天內把整個之前用 Angular 寫好的功能改成用 jQuery 寫，還包含要不斷的測試。

  • 最大的問題是 IE 瀏覽器版本的支援

為了符合客戶的 IE 瀏覽器的支援性，我自己測試是 AngularJS 在 IE7 完全沒辦法(我怎麼找都沒找到解法，如果有歡迎告訴我，謝謝～)，所有的表達式 {{expression }} 都會暴露在畫面上，並且也抓不到 Ajax 吐回來的資料，IE8 是有解法，就像官方網站上寫的那幾招。

還有一些 Angular 本來就很方便的功能，像是 $filter, $watch ...，使用 jQuery 全部要自己來，而且瀏覽器反應的速度真的有差。

遺憾的是，因為趕時程的關係，好像留下不少程式負債，總覺得不知道 jQuery 到底要怎麼寫，才會比較有架構，比較好讓人維護，這次很汗顏沒有寫的很好，而且我覺得我的 code 真的有夠『得體』(Dirty)。

好玩的是，平常沒有這麼多閒功夫，因為這次的教訓，一樣的功能用 jQuery 跟 AngularJS 各寫一次，真的很有感覺...。也算是長知識了。能夠靠專案學到這些，感覺也是挺過癮的。


於 2 則留言:
標籤： ,

2013年12月8日 星期日

[Node.js Web Framework] Sails 檔案目錄結構

上一篇 [Node.js Web Framework] Sails 介紹與安裝 提到，如何安裝 sails 。
這一篇會接續上一篇所建立的 sails 的 web 目錄做一些簡單的說明。

1. sails new newProject
2. cd newProject

上次第一個步驟我們使用 sails new 專案名稱，初始化一個新的專案，叫做 yourNewProjectName ， 不過在今天這個範例我是把我的 project name 叫做 newProject。接著我們打開 (cd) 這個 newProject 資料夾。


閱讀更多 »
於 沒有留言:
標籤： ,

2013年12月4日 星期三

[Node.js Web Framework] Sails 介紹與安裝

官網連結：sailsjs.org
Sails 是一套執行在 Node 環境下的 Web Framework，其實它主要提供的功能跟 Express 是蠻類似的，一樣具有 MVC 架構，快速架設等優點，如果你平常都使用 Express，不仿試試看 Sails。


Sails 的優勢
具有自動產生 RESTful JSON API 的功能（REST Blueprints）。預設的情況下，當你每次 gen (產生，我都用 gen 代表 generate) 一個 controller 的時候，都是預設產生 CRUD 的方法 (method)，當然也可以自己客製化 controller 裡面所有的 method。

而且可以利用指令的方式就可以產生 controller 以及 model 的 files，有些人認為這種 scaffolding 的方式跟 ROR 很像，不過這個就讓有學過 ROR 的朋友來感覺看看了，因為我沒寫過 ROR。
閱讀更多 »
於 沒有留言:
標籤： ,

2013年11月18日 星期一

Node.js 開發環境的好工具 Nodemon

此圖截自 Nodemon 官網




今天要來推薦一個還不錯的工具給大家，Nodemon 這個工具非常適合在開發環境使用，可以隨時監控你檔案的儲存動作，然後幫你重啟 server，可以避免讓你一直 node ... node ... node ... 某一隻檔案，某種程度上我認為他跟 grunt-contrib-watch 一樣好用。相見恨晚啊...另外他也可以監控其他類型的檔案，像是 coffee-script 等等。



安裝方式：
npm install -g nodemon

-g 是全域的安裝方式，通常我也這麼做，這樣就不用在意一定要在特定的 folder 才能使用 nodemon，任何電腦的資料夾底下都可以用。


nodemon 某隻檔案：
nodemon [your node app]

Example:
nodemon app.js


最基本的用法大概是這樣，他應該還有其他有用的功能，只是我現在主要只有用最基本的這種。不過我記得我剛學 node 時好像還有另外一套叫做什麼 forever 的，忘記了 xdd
NPM 有很多工具常常會讓我驚訝 :)


於 沒有留言:
標籤：

使用 Node.js + SQLite3




SQLite 算是比較輕便型的資料儲存方式，適合開發時的時候使用，但如果是真的 Production 的環境就沒這麼適合。其實我以前沒想過 SQLite 這麼方便，大學還在學 PHP 時看到 SQLite 的章節是直接跳過的，因為當時的公司也沒使用 SQLite :P

SQLite 有以下幾點的特質：

  • 輕薄短小，使用簡單
  • 沒有資料庫的伺服器，它是用檔案或是 memory 的方式儲存
  • 適合開發階段使用，儲存少量資料
  • 帶資料存在硬碟，存取速度稍慢
  • 沒有 user 權限設定的功能，較不適合儲存個人或私密資料

閱讀更多 »
於 沒有留言:
標籤： ,

2013年11月11日 星期一

Node Knockout TW 2013 參賽心得

活動官網：http://nodeknockout.nodejs.tw/
時間 ： 2013/11/9 ~ 2013/11/10


今年至今報了兩次黑客松，yahoo 的沒上，還好 node.js knockout tw 不需要審核，就在網路上跟別人組隊報名了。

人生的第一場黑客松


黑客松如果不知道自己為什麼要參加，或是不熟那項技能，腦袋的想法就會有點乾渴，今年的我就是這種心情，關於 node.js 我也僅僅用過 socket.io ，除此之外，我只會 frontend，然後...沒了。
( 其實出去比賽不是什麼難事，我自己個人比較擔心自己的能力沒有辦法 match 到自己的組員 )

閱讀更多 »
於 沒有留言:
標籤：

2013年11月2日 星期六

安裝 Compass

compass簡介：

Compass 使用 Sass，而 sass 是一種 Css Preprocessor / Css Extension，
Compass & Sass 都是需要 Ruby 編譯
Compass 是一個 css 編寫 Framework (css authoring framework)
(題外話，像 Sass 這種透過編譯的方式就可以產出 Css 的 通常稱之為 CSS 預處理器(css preprocessor)，當然世界上不止 Sass，很多人也聽過 less, stylus 等等的，可以看看 8 CSS preprocessors to speed up development time)

通常大家都會 Sass 搭配 Compass 做使用，為什麼？因為 Sass 搭配 Compass 更強大，這也是為什麼很多網路上的教學都會把這兩個一起做教學。

比方說 Compass 讓我覺得最主要的功能是 @import ，比方說我們需要用到 border-shawow，會幫你寫好所有的 css 前綴，像這樣：

@import 'compass/css3/box-shadow'
h1
    @include box-shadow(3px)
而編譯後會得到的結果是： 

h1 {
  -moz-box-shadow: 3px;
  -webkit-box-shadow: 3px;
  box-shadow: 3px;
}

要開始用 Compass 以及想要擁有 import, sprites 等等的功能，你必須要有可以編譯 compass 的環境，或者是一些現成的工具，以下是介紹用 CLI 安裝 Compass。
compass 有很多很神奇之處，之後再聊 :) 我歡迎有人陪我一起學習。

Setup Compass Environment

閱讀更多 »
於 沒有留言:
標籤： , ,

2013年10月29日 星期二

前端工作流程筆記

最近剛好在看一些前端工作流程 (Frontend Workflow) 的文章或是 slide，說到前端的工作流程，不外乎就是想要做到自動化，要『省時, 省力, 省麻煩...』，不過以我自己的認知，一個團隊，有人是負責 follow 這些流程的人，當然也有制定流程跟規則的人，不知道為什麼，以最近接觸 Grunt 的程度來說，我覺得一個團隊負責處理這些自動化流程的人真是挺不簡單，以 Grunt 來說，有這麼多 plugin，身為制定自動化流程的人，或許要很熟悉什麼套件做什麼事情，才會更適合某個專案使用。算了，其實我現在也沒到這個等級 ，這邊就不多談了xdd

以下是筆記的部分：
關於自動化工作流程，幾乎網路上的文章，都會提到 Bower, Grunt, Yeoman。

Grunt 與 Bower

  • Bower 是 Twitter 開發的前端套件管理工具 (Frontend Package Manager)。
  • Bower 需要 node.js 環境以及 npm。
  • 安裝: npm install -g bower。
  • bower.json 可以先設定一些預設的相依性套件 ( bower 在 0.9.0 以前是使用 component.json ， 0.9.0 之後使用 bower.json )
    (這個跟 npm install 時要用的 package.json 很像)。
  • 如果編輯完 bower.json 之後還有其他相依性套件 (dependencies) 要使用，可以重新下指令：bower install 或是使用 bower install packagename --save。
  • Grunt，一個可以處自動化工作流程的工具，如同 bower 一樣需要 node.js 環境以及使用 npm。
  • Gruntfile.js 通常會放在你的根目錄下。
  • 這時候我有點疑惑...，有點分不清楚 Grunt 跟  Bower 的差別，上網找了一下解答 

閱讀更多 »
於 沒有留言:
標籤： , ,

2013年10月28日 星期一

Sass 線上編輯器 : Sass meister

網址：http://sassmeister.com/
功能：
  • 線上編輯 Sass, SCSS
  • 使用如 Compass 等 Extension
  • 可 github 登入，可 Save Gist

像我昨天在寫 for 迴圈，只透過自己本機 watch 跟 compiler 效率很低，這種工具真的是太方便了。真是學習 Sass 的利器 :)


閱讀更多 »
於 沒有留言:
標籤： ,

改變 yii 的 registerScriptFile/registerCoreScript 的檔案出現位置...

通常在 yii 載入其他 JavaScript 或是 CSS 檔案，都會用
Yii::app()->clientScript->registerCoreScript('jquery'); 
或是
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/admin/bootstrap.min.js');

但是用這兩種方法載入 JavaScript 或是 CSS 的位置都很讓我頭疼...，完全插入在 <head>標籤之後。



這樣的安插位子有時候實在很讓人不解，因為這樣瀏覽器要 render 我的頁面的時候是這樣：

閱讀更多 »
於 沒有留言:
標籤： ,

[快快樂樂學SASS系列] 四種 Sass 編譯後的風格（Output Style）

說明網址

Sass 編譯的風格總共有四種：

  • nested (預設的樣式) : 巢狀顯示
  • expanded : 不要巢狀
  • compact : 簡潔樣式，縮進成一行
  • compressed ：壓縮模式
實測：

閱讀更多 »
於 沒有留言:
標籤： ,

2013年10月26日 星期六

[快快樂樂學SASS系列] Sass v.s SCSS

這兩個名詞實在有夠饒舌，
Sass 跟 SCSS 對我來說只是寫法不同，
或許有些人習慣 css 寫法有 { } ，結尾有 ; 分號 ，
那麼你可能會喜歡用 SCSS。
簡單來說 SCSS 可以讓你直接使用 CSS 的寫法，
但附檔名是名是 .scss，也有人說這是 Sassy CSS。

 如果要寫 Sass，要用縮排 ( indented syntax ) 表示，
我比較喜歡這種，我比較懶 :P，懶得一直補 { }... xd，
如果第一次寫 sass 要小心別踩到雷，可能需要練習，
( 結尾不能有 ; 分號，width:100% 編譯不會過，：後面要有一個空格，改成 width: 100%)
初學者可以選擇先從 SCSS 上手，
會用一些技巧之後轉用縮排的寫法，
也就是改用 Sass。

剛剛實驗了一下同樣的效果用 sass 跟 scss 寫的差別：
style.sass:
 $primary_color : #fff  
 $content_width : 980px  
 body  
   color : $primary_color  
   width : $content_width - 20px  
 a   
   color : $primary_color

style.scss:
 $primary_color : #fff;  
 $content_width : 980px;  
 body{  
   color : $primary_color;  
   width : $content_width - 20px;  
 }  
 a{  
  color : $primary_color;  
 }


不過編譯出來的結果都一樣：
 body {  
  color: white;  
  width: 960px;  
 }  
 a {  
  color: white;  
 }

大概是這樣子，這種東西還真的不知道能寫什麼，真的是多寫才知道...
不過，這類的 CSS extension 實現了讓你用變數, 程式邏輯去控制 css 撰寫，的確是蠻有趣的。

雖然說當了一年多的前端現在才開始接觸這樣的 CSS extension，
不過不知道為什麼沒有相見恨晚的感覺，
我還是覺得手刻有手刻的好，
畢竟要在這些 CSS extension 大展身手也需要經過基本的手刻過程，
再者，依照團隊與個人的習慣而定 :)
如果什麼都想擁抱，只會讓自己辛苦。

於 沒有留言:
標籤： , ,

[快快樂樂學SASS系列] Sass 開發環境設定 (搭配 Grunt)

  + 
(Grunt img source : http://gruntjs.com/img/grunt-logo.png)
(Sass img source :http://sass-lang.com/assets/img/logo-235e394c.png)

SASS 開發環境設定，搭配 Grunt 

SASS 需要 Ruby 才能編譯。
所以你一定要有 Ruby 的環境，若只裝 Grunt 是無法編譯的。
Grunt 只是 Task Runner，別誤會一定要用 Grunt...。
SASS 是 CSS 的 Extension Language，可以用比較靈活, 寫 SASS，最後透過 Grunt，幫你去處理編譯的工作 (猜測 Grunt 會請 ruby 編譯)，最後產出 css 檔案。

當初選擇 Grunt 是考慮到整個開發方式最後也需要使用 Grunt 進行 css 壓縮等整合的功能，所以選擇 Grunt。對了，不是說一定要 Grunt 才能編譯 SASS，再次強調它只是幫你做事情的工具。
若你以透過 ruby 安裝 SASS :

  1. sudo gem install sass

你可以直接透過 command line 編譯 sass 產出 css 檔案:
  1. sass style.scss output_style.css

就先談到這裡，剩下的留到之後再講，SASS 太多人在用了，歡迎大家上網爬好文。


環境必需品 (我是 Mac)
每種作業系統有不同的裝法，可參考 http://sass-lang.com/install（你也可以選擇使用一些現有的 Application）。

  • 安裝 ruby  ( Mac本來就有 ruby的環境 )
  • 安裝 sass ( sudo gem install sass) 
  • 要有 node.js 環境並且安裝 NPM (node package manager)
    注意，如果你安裝的 Grunt 版本大於 0.4.x ， 那你的 node.js 版本要高於 0.8.0
  • 安裝 Grunt
  • 註：
    • 檢測是否有ruby : ruby -v
    • 檢測使否有node: node -v
    • 檢測是否有裝 npm： npm -v 
    • 檢測使否有 grunt : grunt -V (大寫Ｖ)
    • 若以上帶 -v 有檢視版本訊息，應該不會有問題，至少我是這樣看的...。

編輯器語法變色設定



以一個網站的資料夾為例

這是我的網站目錄:
style.css 不會是我要編輯的 css 檔，style.sass 才是，我會讓 style.sass 編譯後去蓋掉 style.css 這個檔案。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md


接著新增 package.json 以及 Gruntfile.js 這兩個檔案：
這兩個檔案我都寫得很基本，除了這個範例，也就是 sass 會用到的東西之外，也沒加入什麼其他的相依性套件了，通常，Gruntfile.js 會用到很多套件，像是 cssmin, uglify 等等，只是在這邊簡單化。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md     
   |-Gruntfile.js  
   |-package.json

package.json:
package.json 的相依性除了要有 grunt 之外，也要包含 grunt 的 sass 的套件，也就是 grunt-contrib-sass。
Gruntfile.js:

接著在 command line 到資料夾根目錄，以我來說是 /Users/win/Sites/demo_web。

接著下 npm install ，把會用到的相依性套件下載下來，接著就會產生 node_modules 目錄。

 npm install

接著編輯我的 style.sass:
寫一些簡單的 sass
 $primary_color : #fff  
 body  
   color : $primary_color  
 a   
   color : $primary_color

編輯完 sass 之後，下 Grunt 指令，就開始幫你工作了:)

Done, without errors，沒有任何編譯的 error 就會出現這句，接著再去看 style.css 編譯後的結果就可以了。


這是 before 跟 after 的結果：


實在挺方便的，接著就是好好看熟 SASS 怎麼用。
其實網路上的教學看一看，不難上手。


可以參考一些好文：




於 沒有留言:
標籤： , , , , ,

2013年10月23日 星期三

Jekyll 到 Semantic UI 三天完成公司 Blog

最近的 Task 就是完成公司的 blog 架設。
其實 blog 的部署方式非常多，現成的像是 Blogger, Wordpress, 自己架設的像是 Joomla 等等都是很好的選擇。

不過這次選擇使用  Jekyll ，Jekyll 可以讓你用 Markdown 的方式寫完文章，再幫你產生靜態的 HTML 頁面（最主要是因為公司也用 Markdown 寫內部技術文章），並且有很多現成的變數可以用，不論你是要取得 文章列表 , 上一篇, 下一篇, 等等...，其實以 Blog 的功能來說也已經夠用了。
(有機會再寫個 Jekyll 教學 :P，還蠻值得接觸看看的)


Jekyll 官網


使用 Jekyll ，需要 Ruby 的環境，以 Mac 來說，比較 friendly，之前曾經陪我朋友一起在 windows 安裝 Jekyll，發現困難重重，除了 ruby 之外，也需要裝一些 Python 的套件。

通常不會只需要 Jekyll ，你還會想要有現成的 Theme （畫面樣式）， 可以考慮這套 jekyllbootstrap ，http://jekyllbootstrap.com/usage/jekyll-quick-start.html （不過他畫面改版了我不太會用....）。

用 Jekyll 的好處是沒有任何 Database 的事情需要處理，基本上都是靜態頁面，而且只需要用 Markdown 編輯。另外也可以 Host 到自己的 github，使用 github.io 專頁，部署自己的 Blog 。


像公司之前使用 jekyllbootstrap.com 的 Theme，用起來的 UI 大概是像這樣：
不過因為是內部文件，不方便公開內容。

以我的自己 host 在 github.io 的 blog 使用 jekyllbootstrap 來說，我有改過一些 css 樣式，部署起來像這樣：



不過，因為樣式很難脫離現在在線上找得到的 Theme ，我自己還蠻想要一些不太一樣的感覺，因此我才會想到用個 Semantic UI 來另外寫個 Theme 來套用。



Semantic UI
http://semantic-ui.com/


Semantic UI，我第一次用，有種相見恨晚的感覺，也許是之前太常用 bootstrap，突然換個口味，感覺不錯，如果你要問我他像什麼，其實就是另外一種前端 html/css Framework 的選擇，如果你的 team 或公司沒有特別找 UI 設計 blog 樣式，這些 framework 就很常被 developer 拿來使用。

接下來的工程就是整合 UI 到 jekyll build 出來的 theme ， 大部份是搬移 css / js ，然後整頓一下畫面的 UI，麻煩的是整合，好看的 css 樣式就算不用這些 Framework 也能上網輕鬆找到現成的 html/css，只是整合很耗時間。


將 Theme 都設計好之後，Jekyll Build 出來的網站架構有些 Config 可以設定，把預設的 theme 切到自己做的 Theme 就大功告成了。在不影響架構之下的情況，這種做法有個好處就是既能保留最原始的 Theme，也能有一份自己開發的 Theme，當公司今天不想使用這個 Theme 的時候，也能透過切換 Theme ，變回原本的樣子。




這個是做完之後的成果，UniSharp Blog

我做好的 Theme 很容易辨識就是 Semantic（xdd）的 UI。左側的選單可以收合，這是 Semantic UI 本來就有的效果。


接著是文章內文的 layout，嵌入一些 social link/share 的功能，已經是 blog 的基本配備了。



文章還要有留言的功能，如果要使用 DISQUS 的話，只要去申請 account，取得 blog 的代碼，嵌入到自己的 blog 就可以了。



接著再調整一下再其他 device 上的樣子：
就差不多完成了80% (剩下的20%等 bug 出現就知道是什麼了xdd)
Hosting

當 blog 整個 layout 都整頓好之後，公司給了我一個 ubuntu 的空間去設定網站，是一個乾淨無暇的 linux 空間，也給我機會練練架設 apache 之類的服務，還蠻有趣的，等我弄好再把網址貼上來。

於 2 則留言:
標籤： , ,

2013年10月16日 星期三

[AngularJS] ch01:Introduction to AngularJS 讀書筆記

書目資訊
* ch01 : Introduction to AngularJS
* 網址：AngularJS
[更新，文章有些error，可搭配errata觀看。]

說到 angularJS，身邊的朋友都已經 an 很久了，我現在正起步...，打算把英文原書慢慢看過，不想急著看...，到底會不會看完我也不能保證 :P。第一章內容還算客氣了，至少我還看得懂70%，而且只有 9 頁。可是講的觀念也夠多了。
希望大家能夠自己去發掘書中的內容跟表達的意思，畢竟這只是我的個人筆記（不是教學哦...只是筆記...），如果有錯誤就請糾正我唄！


第一章主要分成幾個部分
  • Concepts 概念 
  • MVC Pattern MVC架構
  • Data Binding  資料綁定
  • Dependency Injection(DI) 相依性注入
  • HTML Directives HTML的 (Attritube) 的擴充
  • 還有一個範例(Shopping Cart)


Concepts 概念
  • AngularJS 可以說是一個具有 MVC 架構的 Framework。
  • AngularJS 神奇的地方之處：
    • 可以不用透過 HTML 的 id 或是 class 去附加任何的事件。
    • 可以不用註冊事件也可以不用寫 callback。
  • 使用的觀念跟過去所學的 jQuery 不太一樣，以前 jQuery 所學的觀念都是從抓到 DOM 的觀念開始...，而 Angular 給我的感覺是縱觀整個 Web Application，以及資料的部分，不單單只有 DOM selector / 事件綁定等等。
  • Client-side Template 的觀念，個人覺得這裡要講的事情其實跟後面的 Data Binding 很像。

MVC架構

前面講到 MVC 最核心的精神就是 資料/試圖/控制器 ，分別處理資料 ( Model ); 頁面的邏輯 ( Controller ); 以及視圖 ( view )。

當要處理資料面時，controller 就會出來幫忙，做些回應，再跟 view 說，決定最後呈現給user的資料跟畫面。這樣子的 MVC 架構其實挺熟悉的，讓我想到 PHP Framework 像是 Codeigniter, Yii 好像也是差不多這樣子的運作方式。



然而，AngularJS 的 MVC 是這樣運作的：
對 AngularJS來說，View 的部分，就是指整個 DOM;
Controller 部分，指的是 JavaScript 的 Classes;
Model 部分，指的是 Object 的內容，key 跟 value 的對應。
圖片請看 docs.angularjs.org ：
http://docs.angularjs.org/guide/dev_guide.mvc.understanding_view


Data Binging 資料綁定
這個部分提到的事情還蠻妙的，想到過去 web 對於處理 HTML 顯示的部分，通常會是組字串的方式，不過我記得很久以前已經有一些 template engine 可以做到不用組字串的事情。

不過這也不重要了，在 AngularJS，將某個 UI（DOM） 綁在某個定義好的 JavaScript 屬性，就可以非同步的更新該 DOM 的內容，算了這裡有點難講，當我沒說好了...。

Angular 結合了 HTML template 的觀念，將結果組塞回去到該 HTML element，這也是他的特色之一，這種做法可以讓你的前端語言變個更純粹/乾淨。



Dependency Injection(DI) 相依性注入

參考網址：
http://docs.angularjs.org/guide/di
這個聽起來很抽象...
頁面上的 data binding 是透過 $scope 這個物件，來達到自動更新畫面的資料。
我們不用透過任何 function 去呼叫他，但有個唯一的要求是你一定要把 $scope 加到該
Constructor。但是，除了 $scope 之外，還有其他的，後面章節會介紹到。

Angular 的 dependency injection system，符合 Law of Demeter (低藕合) 的設計。


HTML Directives HTML的 (Attribute) 的擴充

使用 AngularJS 時你會在 HTML 元素加入很多他專屬的屬性 (Attribute)，像是 ng- 為首的 Attribute。
Directives 是一個可以讓你擴充 html attribute 屬性及功能的特性。
Angular 已經有很多現成的 Attribute 可以使用，讓你定義你的 view 該如何呈現，但是這些 Attribute 不一定是 HTML spec 有的。
你也可以自己擴充 HTML template 的功能，做你想做的事。


最後的部分是個簡單的練習，有興趣可以翻書來看:P


  • ng-app 宣告 angular 可以控管的範圍。
  • ng-controller 設定某個 controller 可以控制的範圍 (資料綁定...等等)。
  • ng-repeat 在 ng-repeat 裡面的 Dom 會依資料的數量而重複呈現。
  • {{item.title}} 透過{{ }}，angular 可以知道這裡要擺什麼資料，而且keep it in sync。
  • <input ng-model="item.quatity"> ng-model 綁定輸入跟呈現的值。
  • {{item.price | currency}}  這個 | (pipeline) 是做什麼的，後面章節應該會講到。


於 沒有留言:
標籤： ,

2013年10月15日 星期二

JavaScript 抓 ID 對上(v.s) jQuery 抓 ID

我以為，document.getElementById('AAA') 會跟 jQuery 的 selector 抓到一樣的東西，換句話說...我以為他們會指到一樣的東西，但是我錯了（慚愧，當了一年多的前端現在才懂...）。


這種事情發生在我在 maintain 原生 JavaScript 跟 jQuery 並存的 js 檔。
比方說我把原本的 $player 改成用 jQuery 的 selector:
 $player = document.getElementById('player');  
 $player = $('#player');
但如果真的這樣改就毀了。


因為...
getElementById 抓到的是 HTML DOM Object;
而 jQuery 的 selector 抓到的是 jQuery Object。

如果要把 jQuery 抓到的東西變成 HTML DOM Object，必須明確的指到該 jQuery Object 的第一個元素，像這樣:
 var $player = $('#player')[0];


截一下 console.log 的比較：


不知道以上的解釋o不ok，
不過學習就這樣樣，答案就是找出來的，而我目前只找到這樣的解法，
如果錯誤還麻煩大大們幫忙指正:)



參考：
document.getElementById vs jQuery $()

於 沒有留言:
標籤： ,

利用 onerror 事件偵測圖片沒出現

JavaScript 有個事件叫做 onerror，是說我也是今天才知道，可以用在當你圖片沒抓到時，出現叉燒包及 server responded status 403，可以做一些事情。

通常在網路上爬到的範例，都是將 onerror 的事件偵測寫在行內，像下面這一行這樣，
以這個例子來說，當 demo.jpg 找不到時，就會去做寫在 onerror 裡面的事情，當然啦，假如有 demo.jpg，應該不會觸發 onerror 事件。
<img src="demo.jpg" onerror="alert('no image');"/>


那麼像我不習慣把事件綁在 HTML tag 上，
所以用 jQuery 的事件綁定 (bind) 來做：
當抓到 error 時，把該 img 標籤的 src 取代成預設的圖片。

有趣的是，上面的做法只適合非 Ajax 產生的 img ，我只有第一次載入畫面的時候，會做這件事情，當我點按是用 ajax 處理的分頁時，這下 high 了， 怎麼處理呢？

這時候想到 jQuery 有個 ajaxStop，可以偵測到當你切換頁面，也就是透過 ajax 切換畫面時且在 AJAX 請求結束後執行ajaxStop() 。

真有趣 :)


參考網址：

於 沒有留言:
標籤： ,

2013年10月12日 星期六

關於 JavaScript 清空 Array 的方法

[觀念更正]
Array = [ ] 其實不能算是清空Array的方式，只能說有人會這樣做，
但是意義並不是清空的意思。
詳情就參考我 po 在 ithelp 的文章吧！
感謝 fillano 指正文章內容:)

於 沒有留言:
標籤：

2013年10月11日 星期五

[國慶連假交作業] Shell Script 練習 - BMI 計算

剛開始練習 shell 時不是很習慣

  • 常常不小心行尾加 ; 分號。
  • 不然就是=左右加空白。
    比方說 m=100 跟 m = 100 是不一樣，看顏色變化就知道。




BMI 值計算
  • 運用 read 指令取得 stdin 的值，存到變數，參數 -p 是提示文字。（ex: read -p "你的名字是" your_name）
  • 做簡單的加減乘除計算 BMI，雖然要做到加減乘除要利用 expr，可是 expr 只能取到整數，因此改用 echo scale=2...的方式去做。 scale 的值表示要取到小數第幾位。

執行結果：

於 沒有留言:
標籤：

2013年10月7日 星期一

[媽！我上台了] 從 PHPConf 2013 Lighting Talk 學到的事


今年 PHPConf 2013 ，很高興被大大們推坑xd，講了一場 Lighting Talk，本來覺得自己有點害羞，一直不知道該講什麼，想了好一陣子，最後還是不好意思拒絕，於是也就答應了。

其實難的不是主題，因為只要能跟 PHP 有關係，什麼主題都能講，而是我不知道怎麼講，怎麼把情境帶到我最後想要表達的事情，跟以前大學在報告專題是完全不一樣的方式。

經過這次的 Lighting Talk，發覺以前在學校的自己根本沒什麼改進。
  • 先有企劃書，然後才有 PowerPoint，這個步驟好奇怪...。
  • 就算上台報告了，竟然是 PowerPoint 帶領自己要講什麼，主角變成了 PPT ，而不是講者自己內心想講的事情，我發覺我以前講話好像都沒有先釐清自己要講什麼...。
最後的結論就是，為了五分鐘的 Lighting Talk，花了好多時間在家學講話，實在很搞笑，但也很真實，這就是需要訓練表達能力的開始...。

雖然我不能說自己講的不錯，不過我也盡力了，希望大家有機會也可以多嘗試這樣上台說說話的機會，當你從一個  Listener 到  sharer ，我不敢說會讓你大開眼界，但絕對有另外一層體會。
接著我朋友在youtube發現有人錄下了Lighting Talk，真是太好了，雖然我完全沒有勇氣聽自己的聲音...（影片來源網址：https://www.youtube.com/watch?v=pQFIvqknnrY ｜ 作者： locy69）








於 沒有留言:
標籤： ,

2013年9月26日 星期四

Node for Front End Developers : chapter01 讀書筆記


本篇轉載於我的github.io

  • 書籍資訊 : Node for Front-End Developers by Garann Means(O'Reilly).copyright 2012 Garann Means, 978-1-449-31883-3
  • 參考網址：Node for Front-End Developers
本書目錄：
  1. Chapter 1 Getting Node Set Up
  2. Chapter 2 Serving Simple Content
  3. Chapter 3 Interaction with the Client
  4. Chapter 4 Server-Side Templates
  5. Chapter 5 Data Sources and Flow Control
  6. Chapter 6 Model-View-Controller and Sharing Code
我的前言
  • 這本書今年暑假以600多元台幣購入（蠻貴的...），等了快兩週才寄來，至今才開始看:P
  • 內容只有 6 個章節，僅僅45頁。
  • 雖然 node 之於我，我並非熟手，但老實說這本書應該不像是給初學者看的，建議裝過 node.js，裝過 npm 的人看看。
  • 作為 Front-End 寫 node.js，會有一些不適應症，我覺得這是正常的，但這也才是有趣的地方，一直要去想 How about write JavaScript on Back-End，跟自己所熟悉的 browser 的環境，完全是不同的兩世界。
  • 輕鬆學就好，雖然目前工作沒有大量使用，不過 Nice to Know。

閱讀更多 »
於 沒有留言:
標籤：

2013年9月22日 星期日

Day7 visual studio 2012 模擬器(Simulator)的介紹

之前的文章列表：
或看我的第六屆鐵人賽文章列表

 這篇要向大家介紹的是 visual studio 2012 的 Simulator（模擬器）


  • 掐指算一算，感覺我寫的東西需要加快速度了...，不然有些我想寫的我怕寫不到XD
  • 之前有提到過，如果要在 visual studio 跑自己正在編寫的專案，可以點按『本機電腦』的那顆按鈕，就會幫你執行你的 App 在 windows 8 的系統上，現在，你有另外一種選擇，那就是模擬器。
  • 為什麼要特別提這個東西呢？ 哦哦也只是一個工具啦！～，不喜歡也可以不用，只是模擬器提供更多的功能，所以才叫模擬器。
  • 執行於本機的模式，環境是真的屬於你的本機，但模擬器，可以模擬出你本機電腦做不到的事。

閱讀更多 »
於 沒有留言:
標籤：

2013年9月14日 星期六

我的blog有第二站

Dear All:

大家好，要跟大家說一件事，

考慮到發文效率與管理的關係，

強烈地感受到 markdown 的編寫快速，排版一致的感覺很不錯。

未來會把文章放到github
http://winwu.github.io/
我把它當作 『win.心得小筆記』 第二站。


還麻煩大家多多包涵！

新 blog 暫時不會有舊的文章，但有機會移駕過去，看時間吧 Orz..。

但是舊的 blog 會有新的文章，只是不知道會維持到什麼時候。

可以依照自己習慣看哪個 blog 做選擇，兩邊的留言我都會管到，老實說也是不太想放棄這邊，畢竟這裡有我這一兩年的心血。

目前新 blog 還很空洞，如果有任何建議，也歡迎告知，謝謝：）


祝 順心
Win 
於 沒有留言:

2013年9月5日 星期四

一起來參加『2013第六屆it邦幫忙鐵人賽』吧！！

活動官網：
http://ithelp.ithome.com.tw/ironman6/earlybird
有興趣的話趕快找個主題報名吧！！


今年我也參加了
不過不知道能不能稱到30天 xd
主題選了冷門的 Windows 8 App，不過，是我自己想玩玩看啦

順利的話，那文章都會也轉載到這邊來。
希望大家多多支持。

於 沒有留言:

Joomla! 3.X.X [工具] AcyMailing Starter 介紹

Extension 介紹網址：
http://extensions.joomla.org/extensions/content-sharing/newsletter/10341

AcyMailing Starter可以做些什麼呢？
一個可以讓你寄送電子報的工具。～
我裝了之後才覺得好用，實在太神奇了。
裝起來在後台看起來就像這樣：

  1. 查看用戶有多少，並且設定是否寄送電子報給該用戶的設定，可以匯出所有的會員，也可以匯入。（其實也不一定要說是電子報，簡單來講就是寄送 email 給 user）
  2. 列表可看出你寄出去了哪些電子報。
  3. 提供電子報的編輯，以及內建預設有四種形式的電子報範本可以供你使用。
  4. 佇列是管理準備發送的信件
  5. 統計非常好用，你可以知道你寄出去信，使否有被user打開過（有在信箱點選『顯示圖片』的user才算）
  6. 設置裡面有蠻多的設定，可以自行去看看，因為蠻雜的，包含外掛的設定也在此。


這是用戶的清單：




新增電子報：


注意右側要點選收件者是誰（群組）




編輯好之後你可以選擇要先儲存，還是就直接預覽/發送，我在這邊是直接選預覽/發送。




預覽/發送的樣子：



我直接點選發送（在此不送測試信）：






然後到信箱收信：


接著再回到統計的頁面：
因為我後來又在追加應外一位user寄出此封信件，因此在這裡總共是寄給兩個人。





大致上的功能都很齊全，也非常好用。
想要更多功能嗎？那就～請～購～買～更高級的版本。
於 沒有留言:
標籤：

Node.js Taiwan Party 36 筆記 （屬雜記，請忽略我）

這偏是比較屬於個人雜記的部分，請忽略我...（應該只有我自己看得懂...）

Node.js TW 36th Party Note

Topic : Express

Starter need...

* node
* npm
* git
* grunt.js

Express → web base framework

express as cli

- e (ejs) -j(jhtml) -H(hogan)
- jade(as default)
- call help 
- c(css)
- s(session)

express as css

- -css
- stylus (as default)

* why need template engine -> m”v”c

run express cli

  • express [-option] [app_name]

folder structure

  • router (like controller + router)
  • static file (at Public folder)
  • app.js is init file

setting in Express

  • app.listen (open port 3000)
  • app.configure (read enviroment variable, ex: develpoment,production…)
  • app.set, app.get
  • app.enable, app.disable (ex, 不啓動view engine)
  • app.use
    • user --> Middleware --> route --> view
      middleware : app.use , will excute every route.
  • app.get
  • app.post
  • app.delete
  • app.update
  • app.all
  • app.locals (少用)

req get parameter

  • req.params（抓url）
    • req (像是讀檔案)
    • reponse (寫)
      app.get('/happymen/:id', function(req, res){
      var id = req.params.id;
  });
  • req.query (取get的資料)
  • req.body
  • req.files
  • req.cookies(read cookie) 重要。

req about HEADER (read only)

  • req.get, req.header (這兩個是相通的)
  • req.is (偵測)
  • req.ip, req.ips
  • req.host (req.subdomains)
  • req.protocol, (req.secure-->'https' == req.protocol; 檢查目前browser是http/https)
  • req.xhr (XMLHttpRequest)
  • Request is READ only in ExpressJS
  • req.status(res.statusCode) 設定header code要給多少（200,400,404,.....）
  • req.clearCookie
  • req.set, res.header
  • req.locals(app.locals is different)
    • life circle is only in url period (<--這好酷)
  • req.redirect (被設成302)
  • req.json, res.send (HEADER:application/json)
  • req.download
  • req.render

Response write data in Express

cross domain access

  • node.js 適合做 api，承載大量的連線 -> know how cross domain access
於 沒有留言:
標籤：

2013年9月4日 星期三

TQC 雲端技術與網路服務 考後心情


（其實這張上週就來了，只是我今天才去考場拿XDD）
說到考 TQC，我也算是老屁股了，從大二考到現在，平均一年考個一張左右，雖然對工作也沒什麼幫助，不過也習慣這樣一直考下去。

關於這張雲端技術，原本想寫個心得，但覺得實在沒什麼心得可言... 心情嘛...，老實說在準備這張的時候就已經有點失望了，以我考過其他科目的比較來說，這張的失望指數蠻高的，為什麼呢？

  • 考試範圍過大（簡直包山包海了），但卻沒有可以參考的書目
  • 如果有在開發web的工作上打滾過，看了這題目會覺得..對工作有幫助的章節實在不多...，長知識倒是可以。
  • 我實在不曉得為什麼...為什麼 gmail 跟 google 日曆的題目怎麼會這麼多? 這麼多可以跟雲端扯上關係的服務很多啊。
  • 第四類跟第六類的題目反而我覺得挺有價值的，會考些 IaaS, PaaS, MapReduce, Hadoop 等一些比較基本的觀念，我覺得這才是我想讀的...，但好像就只有蜻蜓點水
  • 如果純粹當做長知識而來讀這科，是還ok
  • 然後我沒有勸大家不要考的意思XD 每個人預期的結果不同，如果你想考還是可以考，而且準備起來蠻輕鬆的，就當做平常的課外讀物花個幾天念一下應該就差不多了。


於 沒有留言:
標籤：

2013年9月1日 星期日

Pure CSS 實作練習：homepage

又到了練習的時間了...，其實這昨天就弄好了只是沒力寫文。
這篇是延續好久好久以前寫的兩篇筆記，只是看看文章而已會讓我覺得學習中斷，感覺不是很好，後來我還是覺得想弄點什麼東西出來。
之前的兩篇是這個：

先來看看練習的結果：
主要是要練習 pureCSS 的 Grid，然後整格排版設計是參考某家搜尋網站的首頁做改造：P，icon 部分搭配的是 Font-Awesome ，Font-Awesome 的使用方式跟在用 bootstrap 的時候一樣，所以非常順手。至於配色就別跟我這個前端挑了（><），這個練習的重點是在做前端不是Art (Orz)。



閱讀更多 »
於 沒有留言:
標籤： , , ,

2013年8月29日 星期四

我的 Vim 指令筆記

Gist url ： 我的 Vim 指令筆記 （markdown文檔）

vim 的三種模式

模式

  • 輸入模式：輸入內文。
  • 指揮模式：也叫指令模式，主要是進入到可以對文件做修改，複製，剪下貼上，游標移動等動作。
  • 執行模式：文件存檔，離開等等行為。

常用模式的切換

  • 輸入模式 -> 指揮模式 : 鍵盤 Esc
  • 指揮模式 -> 輸入模式 : 鍵盤 i, a, o
  • 指揮模式 -> 執行模式 : 鍵盤 :

如何進入 vim 編輯器

  • 指令 vim 本身就可以開啓 vim 編輯器，跳出請先到執行模式再按 q(:q) 然後 Enter 鍵。
  • 指令 vim 檔名 可開啓某檔案。

如何離開 vim

  • :q : 直接離開（在文件沒有被編輯過的情況下可以用）。
  • :q! : 強制離開（不儲存你的修改強制離開）。
  • :wq : 儲存並離開 (wq順序不能反)。
  • :x : 儲存並離開。

進入輸入模式的幾個方式

  • Append:
    • a: 游標前插入文字。
    • A: 游標移到此行最後一個字元。
  • Insert:
    • i: 游標後插入文字。
    • I: 游標移到此行第一個字元。
  • Open a new line:
    • o: 游標所在的那一行，向下插入新的一行。
    • O: 游標所在的那一行，向上插入新的一行。

指揮模式下的常用指令(注意大小寫有別)

  • 針對現在畫面跳到上中下區域：
    • H : 跳到畫面上面。
    • M : 跳到畫面中間。
    • L : 跳到畫面下方。
  • 上下左右移動：
    • h : 往左移動。
    • j : 往下移動。
    • k : 往上移動。
    • l : 往右移動。
    • 數字 ＋ [h, j, k ,l] : 往左,下,右,上移動幾個字元。
  • gg : 跳到第一行。
  • G : 跳到最後一行。
  • 數字 ＋ gg : 跳到該數字那一行。
  • 數字 ＋ G : 跳到該數字那一行。
  • b : 移動到上一個字的第一個字元。
  • w : 移動到下一個字的第一個字元。
  • W : 移動到下一個字的第一個字元(以空白鍵或是tab鍵當區隔的跳法)。
  • ctrl + f : 下一頁（forward）。
  • ctrl + b : 上一頁（back）。
  • ctrl + g : 顯示你目前位於整份文件的哪一行。
  • ^ : 移到此行的第一個字元。
  • $ : 移到此行的最後一個字元。

指令模式下的操作

  • :q : 直接離開（在文件沒有被編輯過的情況下可以用）。
  • :q! : 強制離開（不儲存你的修改強制離開）。
  • :wq : 儲存並離開 (wq順序不能反)。
  • :x : 儲存並離開。
  • :set nu : 顯示行號（也有人說:set number，取消則為:set nonumber）。
  • :set list : 顯示看不見的空白字元或tab鍵。
  • :set hlsearch : 搜尋到的字串反白。
  • dd : 刪除游標所在的那一行。
  • 數字 ＋ dd : 刪除游標往下多少行。
  • x: 刪除游標後的字元。
  • X: 刪除游標前的字元。
  • 數字＋x(X) : 刪除游標後（前）多少個字元。
  • u : 復原。
  • ctrl + r : 回復（redo）。
  • yy : 複製游標所在的那一行。
  • 數字 ＋ yy : 複製游標下幾行。
  • p : 游標後貼上。
  • P : 游標前貼上。
  • /要搜尋的文字: 游標往下搜尋你要的文字。
  • ?要搜尋的文字 : 游標網上搜尋你要的文字。
  • n : 重複搜尋。
  • N : 反方向的重複搜尋。

Author

於 沒有留言:
標籤： ,

2013年8月27日 星期二

Joomla! 3.1.5 解決網址加上?tp=1不work問題

我先講一下在 joomla 的網站，網址加上 ?tp=1 是要做什麼，
類似這樣-->範例網址寫法：http://joomla_blog.localhost/?tp=1
?tp=1 主要是可以在畫面上看出各個模組的位置是在哪裡，像這樣：


這個有趣的做法可以方便你在後台設定模組位置的時候知道其position在哪。
但如果你加了 ?tp=1 不成功的話，可能是設定沒有開，檢查一下：

系統 --> 
全站設定 --> 
佈景主題管理 -->
將『預覽模組位置』改為『啓用的』。（中）


Sysyem --> 
Global Configuration -->
Template Manager -->
set "Preview Module Positions" to 'Enabled'（英）



於 沒有留言:
標籤： ,

2013年8月26日 星期一

Joomla! 3.X.X 一些基本的權限管理

這是今天在公司做的微分享，
晚一點我會把一些文字敘述補在下面。

只是一些簡單的基本介紹而已，我還沒有研究到很深啦。



補充第15頁的部分，
如何客制Admin的Menu?

關於這個部分，建議大家參考這邊文章，Customizing the Admin Menu
雖然文章是 2. 多的版本，不過在 3. 多也是通用，
需要注意的是，default_enable.php 的路徑在 3. 多版本已經換了，
以我的joomla是3.1.5版本來說路徑是在：
/YOUR_SITE_DIR/administrator/modules/mod_menu/tmpl/default_enabled.php

我的範例主要是在實作，有些 menu 只給特定的群組看。

另外如何知道使用者群組的id是多少？
使用者群組（user group）的記錄是寫在 前綴字_usergroups 這張資料表。

我撈sql的是這樣撈的：

mysql> use 你的site的資料庫名稱;
mysql> show tables;
mysql> select * from 你的table前綴字_usergroups;


撈出來的結果如下：

mysql> select * from tbrxm_usergroups;
+----+-----------+-----+-----+------------------------------+
| id | parent_id | lft | rgt | title                        |
+----+-----------+-----+-----+------------------------------+
|  1 |         0 |   1 |  24 | Public                       |
|  2 |         1 |   8 |  19 | Registered                   |
|  3 |         2 |   9 |  16 | Author                       |
|  4 |         3 |  10 |  13 | Editor                       |
|  5 |         4 |  11 |  12 | Publisher                    |
|  6 |         1 |   4 |   7 | Manager                      |
|  7 |         6 |   5 |   6 | Administrator                |
|  8 |         1 |  20 |  21 | Super Users                  |
| 10 |         3 |  14 |  15 | Shop Suppliers (Example)     |
| 12 |         2 |  17 |  18 | Customer Group (Example)     |
| 13 |         1 |   2 |   3 | Guest                        |
| 14 |         1 |  22 |  23 | 你只能編輯joomlatesting      |
+----+-----------+-----+-----+------------------------------+

因此假設當我要判斷該 user 是不是 administrator 時，就要先取得group，而且得知該group的id :

$groups = $user->get('groups');
$isAdministrator = in_array(7, $groups);

7這個數字就是對應到資料表上的id為7。



於 沒有留言:
標籤： , ,

2013年8月22日 星期四

Joomla! 3.X.X 實作多國語系

第一次碰多國語系的設定...
心得是: 有點複雜，
剛剛做成了文件，雖然還是很複雜，不過我已經盡量簡化了。
希望有幫助到你。

文件連結：
[建議看文件連結比較不辛苦]
補充：
前幾天有朋友跟我說有一套 joomlafish也可以做到多國語系的功能，不過我個人是第一次摸Joomla ，所以沒有很清楚這些過去的種種方式，但我剛剛看了一下joomlafish 好像還沒有支援到 joomla!3 ，如果各位朋友有什麼其他的方式也歡迎推薦。


於 沒有留言:
標籤： ,

2013年8月21日 星期三

Joomla! 3.X.X 之怎麼辦語系裝不起來...

假如你在 joomla 3 的版本要安裝語系有遇到這樣的 Warning：

     JFolder::create: Could not create directory Path: ...  
     Aborting language installation: Failed to create directory ...  
     Package Install: There was an error installing an extension: ....



我不敢肯定我的解法是唯一的解法，只是給大家一個參考，如果你跟我一樣在安裝其他語言時有出現 warning ，請先檢查 joomla 目錄底下所有資料夾的權限是可以寫入的，建議你先到後台的：
System -> System Information 

閱讀更多 »
於 沒有留言:
標籤： , ,

[yii] 判斷表單送出是否有錯誤

判斷表單送出是否有 Error 才顯示某個 widget 或是才顯示什麼，
參考官方文件之 hasErrors()
http://www.yiiframework.com/doc/api/1.1/CModel#hasErrors-detail 
 if($model->hasErrors()) {  
   //echo '你沒有填哦';  
   //echo '你沒有填哦';  
  }



*雖然這篇文章很簡短，但主要是記錄一些身在使用 yii 開發 web 的前端人員需要多留意的事。
於 沒有留言:
標籤： , ,

[yii] 如何在 widget 使用 renderPartial

文章的標題是『如何在widget使用renderPartial』。
其實事情是這樣的，我要把一些 html code 包裝到 widget，這樣子下 widget 只要一兩行，頂多帶幾個參數就可以解決寫好幾行 code，並且把一些會重複用到的 html 模組做成 widget 也是前端的樂趣之一。

本來在view file這樣寫：
 $this->renderPartial('_search',array(  
   'model'=>$model,  
 ));
這樣寫本來就沒有什麼問題。


不過如果要一個 html 結構寫成 widget 的話，
在 widget 就不能這樣用了，
因為直接使用的話會出現：

 ＿＿你的＿＿Widget and its behaviors do not have a method or closure 
named "renderPartial".


因此在widget的時候請使用：

 $this->controller->renderPartial('_search',array(  
     'model'=>$model,  
   ));


參考：
http://www.yiiframework.com/forum/index.php/topic/27311-how-to-renderpartial-in-widget/


於 沒有留言:
標籤： , ,

2013年8月14日 星期三

[yii] 如何客製或 extend 自己的 CButtonColumn 樣式

[yii] 如何客製自己的 CButtonColumn 樣式
[yii] How to customize CButtonColumn


這個文章的內容主要是要講怎麼換掉用 CGridView 產生的 CbuttonColumn 樣式，下圖就是用 CbuttonColumn 預設產生出來的三個 icon：
在 yii 另外使用 Gii 產生出來的 CRUD 的 view files，基本上會包含 admin.php, index.php, create.php, update.php, view.php 還有一些用下底線開頭的 _form.php, _search.php, _view.php 檔案，簡單瞭解了一下其產生列表的方式，會在需要產生列表的檔案去使用這個 widget：

 $this->widget('zii.widgets.CGridView', array(....) );

其中，在後面所帶的array裡，會看到 ：
 array(  
       'class'=>'CButtonColumn',  
     ),

這些預設產生的 Button 就是在這個 Array 產生的，接下來可以看一下官網提供的一些設定api，基本上，這些 Button 的 class, 內容文字, 連結, 底圖都能換。





設定很多，我以我會用到的一些需求為例：

template 屬性：
可以定義icon的出現順序，但若比方說你只寫 'template'=>{view} 那麼只會出現檢視的那顆icon。
 array(  
                'class'=>'CButtonColumn',  
                'template'=>'{view}{delete}{update}',  
           ),



deleteButtonOptions 屬性 : 
設定 delete icon 的基本屬性 ， 以我的例子為例，我想使用 glyphicons 的 icon ， 就必須把 delete button class 改成我要的 glyphicon glyphicon-trash。






 array(  
           'class'=>'CButtonColumn',  
           'deleteButtonOptions'=>array('class'=>'glyphicon glyphicon-trash',
                                        'style'=>'background:red'),  
           'deleteButtonImageUrl'=>'' ,  
           'deleteButtonLabel'=>'', //移除文字  
           ),

deleteButtonImageUrl : 
如果你有自己準備 deleteButton 的 icon ，可以使用這個設定把原本的圖檔路徑蓋掉，因為我是使用改 class name 去顯示 icon ，因此必須把原本塞在裡面的垃圾桶 icon url 清空，若你有自己準備 icon 就可以使用這個屬性。



deleteButtonLabel : 
如果你把 deleteButtonImageUrl 給清空了，也沒有把這個 deleteButtonLabel 清空，就會出現 Delete 文字 ，會像這樣 :


其他 view button 跟  update button 的設定跟上方式一樣的，只是屬性名字換一下而已：

 'updateButtonOptions'=>array('class'=>'....'),  
 'updateButtonImageUrl'=>'' ,  
 'updateButtonLabel'=>'',   
 'viewButtonOptions'=>array('class'=>'....'),  
 'viewButtonImageUrl'=>'' ,  
 'viewButtonLabel'=>'',



因為我使用的是 bootstrap 的 css ，icon也是使用 glyphicons ，最後我換完的結果就是：

這些設定真是神奇，不過麻煩的是如果你有很多頁都需要使用自己定義的 CButtonColumn 是有點麻煩，所以只好為自己的 Project 另外寫 CbuttonColumn 的 Extend。
可以參考：How to extend CButtonColumn



寫自己的 Extend CButtonColumn ：
我自己試寫了一個 YourCustomCButtonColumn，
這種寫 extend 的做法我還蠻喜歡的，
這樣就不用每次為了換一個 icon 改好幾個 CGridView 的設定，
不寫extend，就是複製貼上一堆 array 設定，
寫extend，只要把原本使用的 CButtonColumn 改成使用自己寫的，
好或不好可行評估。


這是我寫的 extend
路徑可能是 protected/widget/YourCustomCButtonColumn.php 

 <?php  
 Yii::import('zii.widgets.grid.CButtonColumn');  
 class YourCustomCButtonColumn extends CButtonColumn  
 {   
   public $deleteButtonOptions=array('class'=>'你的新class');  
   public $deleteButtonImageUrl = '你的新icon img url';  
   public $deleteButtonLabel = '';   
   //deleteButtonLabel 若不清掉文字則不需要設定成''  
   //以下以此類推  
   public $updateButtonOptions = array('class'=>'...');  
   //...  
   public $viewButtonOptions = array('class'=>'...');  
   //..  
   //public $.....  
 }


然後別忘了
在始祖的 CGridView.php 是import原本的 CButtonColumn:
Yii::import('zii.widgets.grid.CButtonColumn');

要把它改成 import 你自己寫的那一個：
Yii::import('zii.widgets.grid.CButtonColumn');
Yii::import('path.to.YourCustomCButtonColumn');




再來是 view file 的部分
要將原本使用的 CButtonColumn 改成：

 <?php $this->widget('zii.widgets.grid.CGridView', array(  
      'id'=>'...',  
      'dataProvider'=>$model->search(),  
      'filter'=>$model,  
      'columns'=>array(  
           .....  
           array(  
                //'class'=>'CButtonColumn', 這個不要用了,改用自己寫的（下一行）  
                'class'=>'YourCustomCButtonColumn',  
           ),  
      ),  
 )); ?>



Hope help you...
於 沒有留言:
標籤： , ,

2013年8月13日 星期二

認識 Pure CSS 之筆記二：了解Buttons, Tables, Menus

此篇是延續上一篇的內容：認識 Pure CSS 之筆記一：了解Base, Grids, Forms


Buttons:
button一直是我覺得網站上應該要蠻單純的元件，統一風格，大小不要忽大忽小是我最喜歡的狀態。在這裡介紹一下 Pure 的 Button ，幾個大方向要記而已，還蠻單純的。

  • 如果要產生一般的button，使用 class name ：pure-button （不論用在<a>還是<button>）。
  • 如果要 disable 效果，請累加 class name ： pure-button-disabled ，例：pure-button pure-button-disabled。
  • 如果要 active 效果，請累加 class name ： pure-button-active ，例：pure-button pure-button-active。
  • primary效果，例：pure-button pure-button-primary。
  • 客制化你自己的 button ， 希望你的客制化 button 的 css 命名可以 follow pure 的命名方式，如 pure-button-red, pure-button-success, pure-button-info,...。
  • pure button 的 size有分幾種等級：
    • xsmall : pure-button  pure-button-xsmall
    • small :  pure-button pure-button-small
    • default : pure-button 
    • large :  pure-button  pure-button-large
    • xlarge :  pure-button pure-button-xlarge
  • button 裡要有 icon嗎？ 沒問題，pure 是搭配 Font Awesome ，詳情的載入方式請看pure button 介紹，使用的時候是類似在 pure-button 裡面包 <i class="icon-XXX"></i>。

Tables:

  • 猜猜看pure 的 table 要加什麼樣的 class name 在 table 的標籤上 ? 前面 button 用的是 pure-button，table 則是使用 pure-table ，只要在 table 的 class name 加上 pure-table 就可以得到 pure 的預設樣式。 
  • pure 目前總共提供三種 table 樣式：
    • Default Table
    • Border Table
    • Striped Table

Menus:
menu還蠻多種選擇的，不過有些menu的效果必須搭配 YUI 的 JavaScript。
分頁的項目也算在 Menus 這個項目裡。
這個部分我希望透過實作來瞭解（好敷衍）




其實看到這裡，大概也手癢，只想實作一下:P
官網上也提供了好幾個用 pure CSS 做出來的 Layouts，看了真是超熱血的～
如果我有遇到什麼問題再上來分享吧！



對了，如果很想用 pure ，配色上卻又不知從何下手
歡迎試試看這個 Skin Builder or YUI Skin Builder - Documentation

於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...