Adobe Edge -- Create the Web in Taipei 小記

今天參加 Adobe 創新製作網頁之旅，深入探索現代化網頁工具及技術
講者為 
Ryan Stewart (https://twitter.com/ryanstewart)
以及
Paul Burnett (https://twitter.com/pburnett)

Adobe 參與了一些 open source 的專案, 也建立了一些很 cool 的工具

參加心得如下

Abstract:

• Optimized different screen size (Responsive Web Design).
• work with cloud service(Adobe Edge PhoneGap / Web Font).
• Many free tools and open source tools and projects.
  • http://html.adobe.com/

Support HTML 5 and CSS 3

Areas of Focus

• Magazine-style Advance Layout
  • CSS Exclusions
  • CSS Regions
• Cinematic Effects
  • CSS Custom Filters
• Advanced Graphical Effects
  • CSS Blending
  • CSS Compositing

Focus on Webkit Browser

• WebKit open source project
• CSS FilterLab

Notes:

• when execute the effect, above will show the code

Adobe Edge Tool and Service

• Optimized for creating mobile-ready web content and apps
• Focused on a specific task
• Improve productivity without hiding the underlying web technologies

Adobe Edge Animate 1.0

• Like Flash interface
• Free (1.0 if free forever) via Adobe ID
• Optimized the different screen size.
• Can execute in application or browser, but it is HTML 5.
• It can open with any normal html page, create some animate and output. (good point)

Adobe Edge Reflow

• For optimized the different screen size (Responsive Web Design)

Adobe Typekit (Charge) (https://typekit.com/)

• Use font on the web
• 1253 font families, 53 foundries
• Not support double byte font now.

Adobe Edge Web Font (Free)(http://html.adobe.com/edge/webfonts/)

• Work with Google
• Get started with Free Web Font
• 500 + open source and free fonts
• Open URLs fro each family
• Not support double byte font now.

Source Sans Pro

• A new font
• Source Code Pro (for developer)
  • clear to identify ( l 1 0 O)

Brackets

• open source tool ( MIT license)
• https://github.com/adobe/brackets
• Light weight editor
• Not only text editor, and support CSS, HTML, JavaScript for developer
• Quick edit (ctrl + e)
• Live Preview (good point, show the result real time)
• Brackets Extensions
  • InlineColorEditor

Adobe Edge Code

• Code HTML, CSS, and JavaScript

Adobe Edge Inspect

• Preview and Inspect on Mobile Devices
• Install application on device and install a google chrome plugin to test.
• Screen for every device look like.(And use text file to describe the device – screen resolution, and information)
• Check remote device and modify real time.

PhoneGap

• An SDK to build mobile apps with web technologies
• PhoneGap provides acces to a number of core device APIs. (With a Java API)

Apache CORDOVA

• PhoneGap is an Adobe distribution of the apache CORDOVA.

Adobe PhoneGap Build

• Package Mobile Apps in the Cloud
• And for different screen size and platform.(ios / Android / Windows … )
• No need to test the device and download SDK.
• Same code for different device. (one code to build 5 binary)
• For update the program, you can only upload the html you wan to fix. Not all program.

Responsive Web Design

• Fluid & Flexible Grid
• Flexible Images
• Media Queries (set min width, automatic move the content)

先記下來

^__^

OCPJP Day 14

Lab: Exception

假如 Exception 的架構如下

Exception ← AException ← BException ←CException

AException.java

package mod12;

public class AException extends Exception {

public AException() {

}

public AException(String msg) {

super(msg);

}

}

BException.java

package mod12;

// BException 繼承AException

public class BException extends AException {

}

CException.java

package mod12;

//

public class CException extends BException {

}

Parent.java

package mod12;

public class Parent {

public void work() throws BException{

boolean sucess = false;

if(!sucess){

//Can throw BException or child excpetion

throw new BException();

}

}

public void work2() throws BException{

//

(new Staffing()).doStaff();

}

}

Staffing.java

package mod12;

public class Staffing {

public void doStaff() throws BException{}

}

*方法Overriding 及 Exception

Overriding 方法

• 可以丟出
  • 一到多個從Overridden方法宣告會丟出的Exception與子孫類別
  • 任意的的Unchecked Exception (Error / Runtime Exception)
• 不可以丟出
  • 未被Overridden方法宣告會丟出的Exception
  • Overridden方法宣告會丟出Exception的父類別

Child.java

package mod12;

public class Child extends Parent {

//public void work() throws SQLException{ } //這個不行, 不可宣告未被宣告的Excepton

//public void work() throws AException{ } //這個不行, 宣告Exception的父類別

public void work() throws BException{ } // OK, 宣告子類別BException

public void work2() throws CException{ } // OK, 宣告子類別CException

}

修改 Parent.java

package mod12;

import java.io.IOException;

public class Parent {

public void work() throws BException{

boolean sucess = false;

if(!sucess){

//Can throw BException or child excpetion

throw new BException();

}

}

public void work2() throws BException{

//

(new Staffing()).doStaff();

}

//父類別有丟兩個類別

public void work3() throws BException,IOException{

}

}

修改 Child.java

package mod12;

import java.io.FileNotFoundException;

public class Child extends Parent {

//public void work() throws SQLException{ } //這個不行, 不可宣告未被宣告的Excepton

//public void work() throws AException{ } //這個不行, 宣告Exception的父類別

public void work() throws BException{

//No need to announce RuntimeException

} // OK, 宣告子類別BException

public void work2() throws CException{ } // OK, 宣告子類別CException

public void work3() throws BException, FileNotFoundException{

//Can throws BException or IOException or IOException's child Exception

//Can throws one or more Exceptions

}

}

*Assertion 概論

• 系統上線時期的除錯工具
• 用來註明並測試程式執行時應符合的假設條件
• 測試可以在執行時期完全移除, 對程式執行速度完全不受影響
• Assertion檢查的機制預設是被關閉的
  • 藉由下列的指令啟動
    • java -enableassertions MyApplication
    • java -ea MyApplication

*Assertion 機制的建議用法

• 使用Assertion機制來紀錄並確認單一方法的假設及內部邏輯是否合理
  • 內部執行的不變性(internal invariants)
  • 流程控制的不變性(control flow invariants)
  • 後置狀況及類別不變性(Postcondition and class invariants)

int a = ( new Staffing()).doStaff();

if ( a > 0 ){

} else {

//內部執行的不變性(internal invariants)

assert( a == 0 );

}

switch ( XXX ) {

case SPRING:

case SUMMER:

case FAIL:

case WINTER:

default:

//流程控制的不變性(control flow invariants)

assert(false);

}

*不適當的Assertion使用時機

• 不要在public方法中用Assertion機制來檢查參數
• 不要在Assertion的檢測中造成任何副作用

Lab: assert

TestAssertions.java

package mod12;

public class TestAssertions {

public static void main(String[] args) {

int testFlag = 100;

//設定 assert ,但是預設是關閉的如果沒有在 VM option設定 -ea 就不會啟動

assert( testFlag > 100);

//也可以在後面加上訊息

//assert( testFlag > 100 ):"This is an error Message";

System.out.println("Done!");

}

}

*Chapter 15 Java I/O

*I/O基礎概論: I/O stream (輸出入串流)

• byte stream
  • 一次只能讀取1個byte
  • 透過 InputStream讀資料
  • 透過OutputStream寫資料
• char stream
  • 解決雙位元語系國家字元傳送及接收問題
  • 一次可以傳送2個bytes (相當於1個char)
  • 透過Reader讀取資料
  • 透過Writer寫資料

http://docs.oracle.com/javase/7/docs/api/

InputStreamReader

http://docs.oracle.com/javase/7/docs/api/java/io/InputStreamReader.html

轉換的API, 將InputStream 轉成 Reader

OutputStreamWriter

http://docs.oracle.com/javase/7/docs/api/java/io/OutputStreamWriter.html

轉換的API, 將OutputStream 轉成 Writer

*輸出入串流(I/O stream)

• Node: (在第一線處理的API)(一次處理一個byte)(FileReader)
  • Filter: (加工的串流)(BufferedReader 可以一次讀取一行)(節省處理)

Notes:

• 串流都是單行道, 讀資料使用來源的串流(source stream), 盡頭串流(sink stream)開啟輸出資料流

Notes:

• filter 也稱加工的串流(Processing String)
• 可以在網路傳送java的物件只要實作 Serializable介面

*Console I/O

• System.out變數可以將資料輸出到系統的標準輸出端(standard output), 他是一個PrintStream型別物件
• System.in變數可以從系統的標準輸入端(standard input)輸入資料, 他是一個InputStream型別物件
• System.err變數可以將錯誤資訊輸出到系統的標準錯誤輸出端(standard error), 他是一個PrintStream型別物件

Notes:

• e.printStackTrace();

Scanner API 提供格式化輸入的功能, 可以套用於console 以及檔案或是網路的串流.

http://docs.oracle.com/javase/7/docs/api/java/util/Scanner.html

Notes:

• useDelimiter 設定切割符號

• 關閉串流的動作是釋放系統的資源

*格式化輸出

• 可以使用格式化(formatting)的功能如下:
  • System.out.printf(%s %d%n, "Ken",100)
    • %s 輸出字串(任何的資料都可以用%s來輸出)
    • %d %o %x 輸出整數 (, 10進位, 8進位, 16進位)
    • %n 為換行
    • %f %g 輸出浮點數 ()
    • 可以在前面加上數字指定長度, 例如 %10s 長度為10
    • %% 輸出%符號
    • %b 輸出 boolean
      • If the argument arg is null, then the result is "false". If arg is a boolean or Boolean, then the result is the string returned by String.valueOf(arg). Otherwise, the result is "true".

IllegalFormatconversionException 為指定的資料與型別不符(例如應該給整數卻給浮點數)

Mod15.java

package mod15;

import java.util.Date;

public class Mod15 {

public static void main(String[] args) {

int a = 100;

double b = 12.345;

String c = "Hello";

Date d = new Date();

//%30s --> output 30 characters

System.out.printf("%s%n", a);

System.out.printf("%s%n", b);

System.out.printf("%s%n", c);

System.out.printf("%s%n", d);

System.out.printf("%20.5f%n", b);

// 使用%b的時候, 如果值為null 輸出false, 如果是大小寫Boolean就看是true 或是 false來輸出, 如果是其他的型別但是值又不是null就會輸出true

String e = null;

Date f = null;

boolean g = true;

Boolean h = false;

int i = 100;

String j = "Hello";

Date k = new Date();

System.out.printf("%b%n", e);

System.out.printf("%b%n", f);

System.out.println();

System.out.printf("%b%n", g);

System.out.printf("%b%n", h);

System.out.println();

System.out.printf("%b%n", i);

System.out.printf("%b%n", j);

System.out.printf("%b%n", k);

}

}

*檔案和檔案I/O

• 建立File物件
• 操作File物件(對檔案本身進行操作, 例如重新命名或是刪除, 不對內容操作)
• 讀取或是寫入檔案的串流(File streams)

何謂可序列化的資料(物件)?

• 基本型別預設就是可序列化
• 物件要可序列化必須符合
  • 其類別要實作java.io.Serializable interface
  • 類別屬性也一定要是可序列化的.

OCPJP Day 13

*系統參數(System Properties)

• 類似作業系統環境變數的概念, 可以算是JVM的環境變數
• 透過System.getProperties方法可以回傳一個Properties的物件
• 透過System.getProperty方法回傳一個代表某一命名property對應的字串值
• 透過 -D 還可以新增新的property

*Properties 類別

• Properties類別實作了property名稱和property值之前的對應關係(String to String)
• propertyNames方法回傳一個包含所有property名稱的Enumeration物件
• getProperty方法回傳一個代表某一個命名property的對應字串.

Notes:

• Enumeration 是 TS(Thread-safe), Iterator 是NTS(Non-Thread-safe)
• Enumeration 會在指標上下各放一個指標(Before the first)(After the last) 來配合 hasMoreElements 以及 nextElement. 也就是如果有10個記憶體指標, 會有12個位置.

PropertiesDemo.java

package mod14;

import java.util.Enumeration;

import java.util.Properties;

public class PropertiesDemo {

public static void main(String[] args) {

Properties props = System.getProperties();

//下面那個Enumeration 以及 while 迴圈來取得properties, 也可以透過 props.list這個API來達成

props.list(System.out);

//分隔符號以下是用 Enumeration 以及 while 迴圈來取得properties

System.out.println("#########################################");

Enumeration propNames = props.propertyNames();

//

while (propNames.hasMoreElements()) {

String propName = (String) propNames.nextElement();

System.out.println("-------------------------------");

String property = props.getProperty(propName);

System.out.println("Property : " + propName + " is " + property + "");

}

}

}

Lab:

Lottery.java

package lab14;

import java.util.HashSet;

import java.util.Set;

public class Lottery {

public static void main(String[] args) {

//如果要排序就使用TreeSet(), 不排序就使用 HashSet()

Set<Integer> numbers = new HashSet();

int random;

while (numbers.size() != 6){

random = (int) Math.ceil(Math.random()*49);

numbers.add(random);

}

System.out.println(numbers);

}

}

*Chapter 12 Exception 與 Assertion

• Exception
  • Exception是被動的,用來表示一些非預期的情況.
  • 執行時期才會發生.
  • Exception都是類別, 而且每一個套件中均有各自Exception類別.
  • 使用者回報bug的時候常用Exception.
• Assertion
  • Assertion是主動的
  • 當程式時好時壞的時候, 會使用Assertion

*Exception架構與分類

Throwable

• Error: 硬體錯誤, JVM錯誤 (嚴重型的錯誤, 不處理)(Unchecked Exception)
• Exception
  • Runtime Exception: 邏輯上的錯誤(Unchecked Exception 編譯器無法檢查)
    • 80%通常代表程式有瑕疵, 語法上無法處理
    • 20%User Error, 考慮處理他
  • Checked Exception
    • Checked 代表編譯器會檢查
    • 在語法上面一定要處理
      • try-catch
      • throw / throws

AddArguments.java

package mod12;

public class AddArguments {

public static void main(String[] args) {

//

int sum = 0;

for (String s : args) {

sum += Integer.parseInt(s);

}

//

System.out.println("Sum= " + sum);

System.out.println("Thannks you !! Bye!!");

}

}

於外部執行此 java 程式例如(執行命令時位於執行檔案頂層目錄)

java mod12/AddArguments 1 2 3

輸出結果為

Sum= 6

Thannks you !! Bye!!

Notes:

• 如果有使用 try-catch, 程式會繼續運作下去, 不是直接中斷

Lab: try-catch

AddArguments.java

package mod12;

public class AddArguments {

public static void main(String[] args) {

//

try {

int sum = 0;

for (String s : args) {

sum += Integer.parseInt(s);

}

//

System.out.println("Sum= " + sum);

} catch (NumberFormatException numberFormatException) {

// Report to User 回報使用者輸出的字串

System.out.println("There might be some mistakes with your input.");

}

System.out.println("Thannks you !! Bye!!");

}

}

如果只針對該行程式進行 try-catch

AddArguments.java

package mod12;

public class AddArguments {

public static void main(String[] args) {

//

int sum = 0;

for (String s : args) {

try {

sum += Integer.parseInt(s);

} catch (NumberFormatException numberFormatException) {

System.out.println("Input[ "+s+" ]not correct, So we don't add it!");

}

}

//

System.out.println("Sum= " + sum);

System.out.println("Thannks you !! Bye!!");

}

}

這樣既使輸入的參數有誤, 正確的參數也會加總

例如

java mod12/AddArguments 1 2 3 for 2

輸出結果

Input[ for ]not correct, So we don't add it!

Sum= 8

Thannks you !! Bye!!

Notes:

• try-catch 陳述式可以多個catch 子句
  • 如果Excepton 沒有繼承關係,
    • 那catch順序可以隨便排
  • 如果Exception 有繼承關係( java 會使用 instance of 來詢問)
    • 那catch 必須先catch 子類別, 再catch 上層的父類別(不然詢問父類別 instance of 一定會回傳 true, 就不會執行下面的catct)
    • 最後會去catch Exception 類別(因為他是所有Exception的父類別)

Exception (有父類別與子類別的關係)

• IOException (跟 Input / Output 出錯有關)
  • FileNotFoundException
  • EOFException
• HRException (使用者自訂, 通用大分類的Exception)
  • GenReportException(子類別通常比較細微且實際)
  • CalcSalayException

*finallly 子句

• 保護的機制
• 無論如何一定會被執行的程式區塊.
• 開啟串流要確保串流被關閉

Lab: finally

加上 finally

AddArguments.java

package mod12;

public class AddArguments {

public static void main(String[] args) {

//

// try {

int sum = 0;

for (String s : args) {

try {

sum += Integer.parseInt(s);

} catch (NumberFormatException numberFormatException) {

System.out.println("Input[ "+s+" ]not correct, So we don't add it!");

}finally{

System.out.println("Finally exec!");

}

}

//

System.out.println("Sum= " + sum);

// } catch (NumberFormatException numberFormatException) {

// Report to User 回報使用者輸出的字串

// System.out.println("There might be some mistakes with your input.");

//}

System.out.println("Thannks you !! Bye!!");

}

}

執行該程式

java mod12/AddArguments 1 2 3 for 2

輸出結果為

Finally exec!

Finally exec!

Finally exec!

Input[ for ]not correct, So we don't add it!

Finally exec!

Finally exec!

Sum= 8

Thannks you !! Bye!!

上面會看到輸入 5 個參數, 就確定執行5次final 的程式

Notes:

• Call Stack Mechanism
  • Exception 如果一直往上層(呼叫者丟),丟給 main() 再丟給JVM, JVM 會終止這個程式, 這個稱為Call Stack Mechanism
    

假如 Exception 的架構如下

Exception ← AException ← BException ←CException

程式如下

public void test(){

try{

1

2

3

4

}catch(BException e){

A

}finally{

B

}

C

}

Case 1 如果程式沒有發生任何Exception

1 → 2 → 3 → 4 → A → B → C

Case 2 如果程式在 3 發生BException

1 → 2 → 3 → 4 → A → B → C

Case 3 如果程式在3發生RuntimeException

1 → 2 → 3 → B → Call Stack Mechanism

Case 4 基於Case 2 但是catch A的程式碼內有 return; 在 catch 區塊

1 → 2 → 3 → A → B → return

Notes:

• 不管如何, finally都會執行

*常見的例外狀況

• NullpointException
• NumberFormatException
• ArithmeticException
  • 分子與分母都是整數, 然後除以0

*例外處理或宣告的規則

• 處理
  • 使用try-catch-finally區塊來處理
• 宣告
  • 透過throws子句來宣告程式(往外面丟)(一定是屬於Checked Exception)

關鍵字有三個是動詞加上s (第3人稱)

• extends
• implements
• throws

public class Parent{

//這邊的 throws 有加上s

public void work() throws BException{

//狀況1 if ( … ) { throw new BException(); } //這邊throw沒有加上 s, 命令式, 祈使句

//方法本身即為丟出BException的源頭

//狀況2 ( new Staffing()).doStaff();

// 方法內部去呼叫會丟出BException的API但是並未使用try-catch來加以處理

}

}

public class Staffing{

public void doStaff()

throws BException{

}

}

Notes:

• 所以如果方法本身是處理throw的源頭就不會加上s, 反之如果是呼叫別的API就會加上s