無聊看看

前言 本章會介紹如何建立基本Android應用，我們開發主要Android Strudio做為開發工具，選擇Gradle為建構 工具主要的原因，是因為它已經是官方的開發工具，你只需要寫幾行建構方式，就可以給不同平台去使用。 事前準備 下載Android Strudio:  http://developer.android.com/sdk/index.html 建立Android APP專案 File –> New –> New Project… 選擇目的裝置的類型: 選擇平板和手機 選擇空白活動 預設活動名稱和版面名稱不變 專案家目錄可以看到build.gradle和settings.gradle， Gradle Scripts檔案 說明 build.gradle   local.properties sdk.dir=<Location of Android sdk> settings.gralde   在android專案會有兩個build.gradle的檔案，一個是/app/build.gradle和/root/build.gradle， (1) root/app/build.gradle apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { applicationId "tw.com.bryan.myapplication" minSdkVersion 8 targetSdkVersion 23 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-and...

目標 本章深入介紹多個專案、屬性管理和日誌功能三方面討論，多個專案建置會由一個主專案的build.gradle 編譯各個子專案模組。這樣方便管理每個專案的功能。 War plugin 網頁專案通常會打包成.war或是.ear的檔案形式，在.gradle需要加入下列任務後，在建構的過程中，war會 取代原先的jar任務， apply plugin : "war"    //打包為.war檔案 apply plugin : “ear”     //打包為.ear檔案 使用gradle建構網頁專案，在src/main/java裡面為java檔、/src/main/webapp為jsp檔與WEB-INF檔案 在war plugin裡面增加providedCompile和providedRuntime跟java plugin的complie和runtime相同，於不同的地方 它不會為打包入war檔案中，下面為例servlet-api:2.5將不會被打包進去WEB-INF/lib/裡面，因為這些在tomcat的 lib就有提供。 apply plugin: “war” repositories{    mavenCentral() } dependencies{     providedCompile "javax.servlet:servlet-api:2.1" }   apply plugin: 'war' webAppDirName="WebContent" repositories {      mavenCentral() } dependencies {       providedCompile "javax.servlet:servlet-api:2.1" } war{     baseName = "simpleapp"     version = "1.0"     extension = "war"  ...

目標 在本章我們會著重在如何管理專案相依、解決相互衝突、解析策略並教你如何發佈artifacts 在不同的元件版本下。 歷史 相依管理在建構工具是一個很重要的指標，在傳統的ANT建構工具，他無法幫你處理相依 問題，你必須自己將每一個jar名稱和它的位置寫在build.xml。但是在企業應用，有些軟體 會相依其他函式庫，使用ANT的方式，需要花費很多成本去維護相依的問題。後來，Maven 解決這個缺點，ANT整合Ivy也是解決這個問題。在Gradle有自己的相依管理方式，同時它也 支援Ivy和Maven的套件。Gradle主要定義相依關係 相依環境 當我們開發完成的軟體套件，必須要做版本部署並儲存中央版本庫(central repository)，讓所有 團隊可以分享使用這些軟體套件。版本命名參考 http://semver.org/ Gradle相依管理 gradle相依管理定義在dependencies裡面，需要遵循它的規則和定義方式即可。 宣告相依定義: dependencies {     <configuration name> <dependencies> } 區塊內定義方式: 1. 個別定義     compile group: 'log4j', name: 'log4j', version: '1.2.16' 2.陣列定義:    compile 'log4j:log4j:1.2.16','junit:junit:4.10' 3. Closure定義:    compile ('log4j:log4j:1.2.16') ) {             // extra configurations    } apply plugin: 'java' repositories {         mavenCentral() } dependencies {   ...

前面有介紹如何建立web專案或是Java專案等等，本章詳細說明Gralde 多Gradle腳本運用 當你需要載入其他gradle腳本時，使用apply from 還載入 語法: apply from: <Path of otherfile.gradle> 範例一、 多Gradle腳本載入 C\:>calcuate.gradle   //計算 apply plugin : 'java' task task1 {     println "task1" } C\:>project.gradle apply from :  "calcuate.gradle" task  mainTask {     println "It is a main task!" } 結果 task1 It is a main task! 二位元插件 二進位插件必須實做Plugin的介面功能後，你可以載入它到你的建構腳本。Gradle已經內件函式庫 可以使用。如果你想要使用其他third-party pluings，需要確定可用的classpath路徑，請使用buildscript{} 來設定。 語法 : apply plugin: '<pluginid>' 範例一、 apply plugin : “java” Gradles內建plugins (1) 建構和測試常用plugins      Java , Groovy , Scala,  War (2) 分析plugins     Checkstyle ,FindBugs ,Sonar ,Sonar Runner ,PMD (3) IDE plugins      Eclipse, IDEA ..etc 參考: https://docs.gradle.org/current/userguide/userguide. Third plugins https://plugins.gradle.org/ Java plugin Java plugin是...

本章會介紹Gradle的核心語法為Groovy，讓使用者更容易了解gradle工具使用，Groovy運行在JVM上面， 所以很容易與Java做整合利用。 資料類型 Data type Wrapper type values byte Byte 0 short Short 0 int Integer 0 long Logn 0L float Float 0.0f double Double 0.0d char Character \u0000 boolean Boolean false String Not Applicable null 資料型態跟Java相同，現在介紹如何宣告變數， 範例一、 宣告變數 def a1 = ‘ It is a sunday.’ def a2 = “It is a sunday.” def a3 = “example1. ${a1}” def a4 =/ This is                //斷航符號 /               a              book / 動態型別(Dynamic typing)宣告 Groovy支援動態型別與靜態型別兩種，靜態型別通常會再編譯時檢查、記憶體最佳化等等工作。 動態型別表示你不知道宣告的函式的型態或回傳的資料類型是什麼，但是這種方式開發人員比較 有彈性宣告方式。當我宣告時，不會預設型別給宣告之變數，會決定變數型別是在執行的時候才 會決定要丟甚麼型別給他。 範例二、動態型別宣告 //(1) 宣告變數 def   var1 var1 = “It’s a book” println var1.class     ...

本章會介紹使用Eclipse，如何安裝Gradle套件與應用 安裝篇 步驟1 : Help -> Eclipse MaketPlace... 步驟2: 在Find打上gralde 按下 Go按鈕，如果未安裝請你按下Install ，已經安裝過，確定是否要更新gralde版本 步驟3 : 接著只要一直按next，最後按finish就可以在eclipse使用gradle

在本章節我們會介紹使用gradle架構下，web專案的架構和常用的設定 web 架構 (1) 專案架構 +---bank +------src +-----------main +-------------------java +---------------------|---com +---------------------------|-account +--------------------------------|----createAccount.java                   +--------------------webapp +------------------------------jsp/ +-----------------------------------Account.jsp   apply plugin: ‘java’ apply plugin: ‘eclipse-wtp’   //有使用eclispe需要

Yeoman介紹 我們建議使用 Yeoman 來發展你的網頁應用產品，他整合很多JS前端的技術，例如 Bootstrap 、 Compass 、 Modernizr 、 CoffeeScript 、 Jasmine 、 PhantomJS 、 Grunt 等。 Yeoman軟體開發流程 在軟體開發流程階段可以分為需求訪談、產品分析、產品開發、產品測試和上線，這些步驟Yeoman有提供完整前端開發工具與架構。在官方網站可以看到下圖Yeoman前端開發流程架構圖，從產品開發到上線，Yeoman 首先利用yo工具快速開發網頁的骨架、當會載入不同JS框架時可以應用bower框架之間相依性，最後產品上線前會經過壓縮、測試、打包 package 等佈署動作這些可以使用grunt完成。 Yeoman包含三套工具 (1) yo      : 當建構新的應用系統，可以用來建立新的建構環境 (2) bower : 套件管理用來管理JS框架之間的相依關係 (3) grunt  :  部屬前檔案壓縮、預覽、測試webapp專案 Yeoman環境安裝 為了可以安裝Yeoman的架構，我們必須先安裝 node.js , Git for Windows 與 RubyInstaller 這三套工具， 才可以安裝Yeoman的工具， Step1. 下載node.js，安裝node.js: https://nodejs.org/download/ 注意: 需要安裝python 2.6或是python 2.7 確定是否安裝成功 Step2. 下載git安裝，git : https://git-scm.com/ 確定git安裝成功 Step3. 下載ruby安裝 : http://rubyinstaller.org/downloads/ 安裝時，注意的事項   Yeoman安裝 步驟一、確定node.js版本與npm的版本 在命令列輸入: node --version && npm --version v0.12.3 2.9.1 步驟二: 安裝yo bower和 grunt套件 C:\Users\bryan\npm> npm install --global yo bow...

我們接下來介紹使用AngularJS開發產品時，使用哪些工具或是方法會讓開發流程更有效率且符合軟體開發流程使用。 如何規畫網頁應用程式開發用於快速應用程式開發模式 使用Karma工具用於單元測試 產品佈署時，將AngularJS編碼編譯為最小化 使用Batarang來偵錯(debug) 簡化開發流程 整合RequireJS來管理版本JS函式庫相依性

1. 介紹AngularJS套件 1.1  AngularJS介紹 1.2  MVC 1.3  Template And Data Binding 1.4  Dependency Injection 1.5  Directive & Filter 2.AngularJS深入淺出 2.1 第一個AngularJS程式 2.2 List、Tables and Other Repeated Elements 2.3 過濾器 2.4 路由與多視圖 2.5 3.AngularJS前端開發 3.1 前言 3.2 組織網頁應用產品 3.3

Router and Multiple Views 介紹 在angularJS提供一個很強大的功能叫作路由(router)，主要應用在切換不同model和views，更容易做出SPA( Single Page Application) 註一 等級的產品。本章我們介紹如何利用ngRoute的模組切換不同的網頁視圖。 註一 : SPA 的概念傳統的 HTML 網頁一樣，需要每做一個動作就整個更新網頁，但是SAP希望可以像視窗軟體一樣，只需要變更顯示的內容而不需更新整個網頁。 載入路由功能 <head>      <script src="angular.js" />     <script src="angular-route.js"/> </head> 定義路徑與規畫控制器 我們利用$routeProvider來切換網頁內容，下列範例定/home, /viewItems 兩個畫面規畫。在mainApp.controller控制器來切換/home, /viewItems的 之內容。 itemController.js var mainApp = angular.module("mainApp", [ 'ngRoute' ]); mainApp.config(function($routeProvider) {    $routeProvider         .when('/home', {             templateUrl: 'home.html',             controller: 'ItemController'         })        ...

過濾器(Filters) angularJS在資料格式顯示方面，他們使用過濾器轉換資料，首先我們需要了解過濾器可以處理範圍: 過濾器的格式: {{ filter_expression | filter : expression : comparator}} 過濾器類型 說明 currency 貨幣格式 filter 搜尋集合符合條件的子集合 lowercase 轉換成小寫型態 orderBy 排序 uppercase 轉換成大寫型態 (1)currency 範例: 當宣告currency會補上$的符號 <body ng-app="myList" >     <div ng-controller='ListController' >         <div ng-repeat='item in items'>             <span>{{item.title}}</span>             <input ng-model='item.quantity'>             <span>unit price: {{item.price | currency} }</span>             <span>total: {{item.price * item.quantity | currency}} </span>         </div>...

工廠模式(Factory) 你可以使用工廠模式建立服務，並傳回資料給模組。 1.  factory(name,Function()) 2.  factory(name,[] , Function() ) <body  ng-app="myShoppingList">          <div>             <table ng-controller ="itemsController">                 <tr ng-repeat="item in items" >                     <td>{{item.title}}</td>                     <td>{{item.description}}</td>                     <td>{{item.price | currency}}</td>           ...

複數元素資料 當我們要顯示出多筆物件的資料時，angular有提供ng-repeat的元素它會複製每一筆資料出來 範例一 <html ng-app="myApp" >     <head>          <script src="angular.js"></script>     </head>         <body>         <form ng-controller="fruitController" >             <ul>                 <li ng-repeat="f in fruit" >                     <a href="/fruit/view/{{f.id}}"> {{f.name}} </a>                 </li>                     ...

樣版(templates) 使用Angular框架它是一種樣板的開發模式，我們會在HTML網頁上，規劃需要載入內容或是效果，其他交給Angular處理就可以 <div ng-model=”greeting” >       {{greeting}}    //->樣板開發方式 </div> 資料繫結(Data Binding) 你可以利用資料繫結去同步更新資料，這裡提供兩種寫法 (1) <p ng-bind ="greeting"></p> (2) <p>{{greeting}}</p>

開始撰寫第一個程式 下載Angular套件: https://angularjs.org/ 載入套件: <script src="angular.js"></script> 宣告Angular’s Boundaries (1)和(2) 載入的範圍不同，用來告訴Angular該網頁哪個部分需要處理 (1)載入整個網頁為Template <html ng-app> … </html> (2)載入div元素之間為Template <html> … <div ng-app> … </div> … </html> 完整的網頁 <html ng-app="myList"> <head>      <title>My Shopping List</title>      <script src="angular.js"></script> </head>      <body ng-controller='ListController'>           <div >                <div ng-repeat='item in items'>                    <span> {{item.title}} </span>            ...

Model View Controller (MVC) MVC架構在1970提出，模型Model(M)-檢視View(V)-控制Controller(C)三種介面分開，讓程式可以各司其職也讓開發人員可以分工合作，以達到一個較好的開發效率。 檔案: ex1.html <html ng-app="myApp" > <head>      <script src="angular.js"></script>   </head>      <body >           <div ng-controller='HelloController' >                <p> {{greeting.text}} , World</p>           </div>      </body> <script>         var myApp = angular.module('myApp',[]);      myApp.controller('HelloController', HelloController); </script> </html> 檔案:controllers.js function HelloController($scope) {      $scope.greeting = { text: 'Hello' }; } 說明: 我們定義HelloController顯...

AngularJS由Google 打造的前端 JavaScript 框架，與其他JS框架( ExtJS 、 BackboneJS 、 EmberJS 、 KnockoutJS ) 不同，他可以直接延伸現有的 HTML 架構。以下有幾點關注的概念必須了解，對往後要使用AngularJS框架開發應用 網頁會更為快速: 前端網頁MVC架構: 在AngularJS將前端AngularJS為 控制器 (Controllers) 、 檢視 (Views)與 模組 (module)， 控制器 可以用來切換不同 的 檢視 畫面其內容搭配 模組 (module) 與 相依性注入 (Dependency Injection) 來實做。當前端網頁也切割為MVC 架構表示我們可以自由的抽離這些實做，但是也會使開發人員學習複雜度增加。   資料聯結(Data Binding) 資料繫結很多JS框架都有此功能，我們必須了解 單向資料繫結(One-way Data-Binding) 和 雙向資料繫結(Two- way Data Binding) 兩種 ，單向資料繫結產生檢視之前， 將模組與模板先做合併的動作，但是如果有經過一些操 做改變了模型資料內容，但是檢視上模型並不會改變造成不同步的狀況發生。 雙向資料繫結改善單向的缺點，不管使用者在網頁上做了甚麼操作，AngularJS都會去偵查檢視的改變，同步去更 新模型的資料內容。 相依注入(Dependency Injection,DI) 相依注入是AngularJS 一個強項，它的目地讓程式的組件切割的更加清楚，主要它利用design pattern的方法來將 模型靈活的使用，深入了解可以參考Dependency Injection。 指示指令(Directives) 在HTML中觸發JavaScript行為的參數，舉例來說 ex1: <html ng-app ="myApp"> ex2: <div ng-controller ='HelloController'> ex3: <div ng-repeat ='item in items'>

套件(package) 我們知道在Java語法中，套件語法只要在前面宣告package的關鍵字並依照個人不同需求去 規劃套件的位置，今天我們就深入探討package語法的作用，我們知道套件的命名會影響整 理專案開發和日後的維護系統工作，易讀且統一的套件命名方式，讓人容易理解且易工作。 我們通常會以公司別為命名方式，例如Sun公司為com.sun，Apple公司為com.apple以此類 推。其次為系統層實務上依專案大小來規劃，例如Sun的人資系統為com.sun.hr或是Sun人資 系統中出勤系統com.sun.hr.pd。 最後一層為技術層依使用的框架或是技術來區分，例如Sun 人資系統使用MVC開發: model: com.sun.hr.model、com.sun.hr.view, com.sun.hr.controoler來 規劃。 匯入(import) 在JAVA中不同的套件之間，要互相引用時我們可以利用import來載入裡面的類別。 import com.sun.hr.utility.*               => 載入utility底下的class類別 import com.sun.hr.utility.salaryUtil   => 只載入salaryUtil的類別 不管是*還是salaryUtil編譯器會只會對有用到的類別參考使用，所既使載入全部以不會影響執 行效能，建議開發程式只需要載入用到的類別，以方便日後維護工作。 套件與存取控制 利用package套件系統只要可以建立不同的命名空間(namespace)來組合系統不同組件，當我 宣告不同修飾子(private、protected和public)分別是由嚴謹權限控制到鬆散權限控制。 修飾子 class extend 相同package下 不同package下 private V X X X protected V V V M (需要繼承才可以) public V V V V defult V X V V V: 支援  X:不支援...

我們需要利用一些工具來保持程式的穩定，好的程式是容易維護、花費的成本比較低。本章介紹一些工具可以搭配Gralde來達到公司的軟體政策並制定一些標準。例如Checkstyle, JDepend, PMD, FindBugs, CodeNarc, and Sonar。 (1) Checkstyle plugin 在Gradle腳本可以載入checkstyle，當它執行build任務時，check 任務也會執行，

通常在Java專案會把程式打包為JAR、ZIP檔或是其他檔案，在Gradle中打包程式任務為build<configurationName>且上傳的任務為upload<configurationName>。我們定義 (1) 版本庫上傳 jar檔上傳 apply plugin: 'java' archivesBaseName = 'sample' version = '1.0' repositories {     flatDir {         name 'uploadRep'         dirs   'upload'     } } uploadArchives {         repositories {                //檔案上傳的設定環境為uploadRep         add project.repositories.uploadRep               //額外jar上傳目的檔         flatDir {             dirs 'C:\\libs'         }     } } Maven版本上傳 apply plugin: 'java' apply plugin: 'mav...