2016年7月24日 星期日

Css-基本認知( 二 )_樣式宣告、選擇器

前一篇 :

那我們要如何去宣告 ?
那宣告的格式為何 ?

1 . 宣告樣式方法
選擇器 {
    <!-- 屬性 : 參數 ; -->
    樣式
}

2 . 我們知道公式後,要怎麼套用 ?

選擇器 : 簡單來說,我要把這樣式套用在哪裡。
樣式 : 字體大小、顏色...等。

接下來這篇介紹選擇器 :

  • Html 標籤
  • 物件名稱
  • ID 名稱
  • 子項選擇器
  • 後代選擇器
  • 通用選擇器
  • 多組選擇器


1 ) Html 標籤
p{
   color:red;
}

2 ) 物件名稱 : 選擇器前面有加 "."
.setColor{
   color:red;
}
<span class="setColor">Tom</span>

3 ) ID 名稱 : 選擇器前面有加 "#",但是 ID 多用於辨識元件或讀取參數
#setColor{
    <!-- 屬性 : 參數 ; -->
   color:red;
}
<span id="setColor">Tom</span>

4 ) 子項選擇器 : 某元件底下一層的元件 ( 只對一層 ),中間會用 : >
.ttable>li {
    <!-- 屬性 : 參數 ; -->
   border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

5 )  後代選擇器 : 某元件底下所有被選擇到的元件 : 中間會用 : _ ( 空白 )
.ttable li {
    border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

為了讓大家更能了解到 4 、 5 的差異














6 ) 通用選擇器 : 全部的標籤都會被套用到樣式,會使用 : *
*{
    border:1px solid red;
}

<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>






7 ) 多組選擇器 : 共用相同的樣式,減少重複的風格樣式,會使用 : ,
h1,span{color:red;}

3 . 樣式權重
p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

同選擇器具權重 : 標籤遠近
<style>
p{color:red;}
p{color:green;} V
</style>

最重要 !important
<style>
p{color:red!important;} V
p{color:green;} 
</style>

歡迎轉載,請註明出處。

2016年7月20日 星期三

Css-基本認知( 一 )_CSS?

建議 : 此篇要有一些些 Html 的基礎會比較容易懂。

CSS 在網頁的角色定位 ?

回歸正題,我們在這裡就先統稱"樣式"
CSS 最大的功用是來幫我們網頁添加色彩
有時候也可以幫我們解決客戶一些奇怪的需求
( 咳咳... )


首先,我們要在哪裡宣告 ? ( 哪裡放置我們的樣式? )
有三種方式可用( 三選一;也可三種一起宣告同名,但會受到優先權影響 )

1 . 直接在標籤內宣告,要添加 : "" 和 ;
<p style="font-size:12px; color:red;">大家好...</p>

2 . 在 Style 區塊宣告
</head>
<style type="text/css">
p{
   font-size:12px;
   color:red;
   font-weight:bold;
}
</style>
<body>

3 . 外部文件 : 指定檔案位置 ( .css )
<head>
    .
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

剛剛有提到,如果標籤 <p></p> 三種宣告方法都有設定樣式怎辦 ?
他會依照優先權 : 標籤內 > Style 區塊 > 外部文件

歡迎轉載,請註明出處。

Html-基本認知(五)_資料格式標籤簡介

前幾篇有簡單介紹過頁面的設定
接下來是如何將資料傳送到後端的前置元件

<form></form>將在 form 內的參數送至目標服務器method = GET、POST
action = 服務端位置
<form method="post" action="main.jsp">
.
.
.
</form>
<textarea></textarea>文字區塊rows : 行數
cols : 列數
<textarea rows="20" cols="20">請輸入文字</textarea>
<select><option></option></select>下拉選單select : 選擇器
name : 元件名稱

option : 選項
value : 向後台提出的值
<select name="selected">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input></input>輸入元件type : 輸入元件的型態
name : 輸入元件的名稱,用於後端辨別
value : 預設參數
placeholder : 文字框提醒文字
<input type="text" name="inputAcc" value=""></input>
hidden : 隱藏輸入元件
image : 圖像按鈕
number : 數字控制器
password : 密碼格式
radio : 單選按鈕
range : 左右滑動扭
reset : 重置按鈕
search : 搜索文字字段
submit :提交按鈕
text 文字。預設20字元
.
因為屬性很多,請上W3c 搜尋。

2016年7月18日 星期一

Html-基本認知(五)_連結標籤簡介

這篇介紹有關連結會用到的標籤
比如 : 超連結、第三方元件的連線位置、圖片...等。

標籤功能說明用法
<a></a>超連結href : Hypertext Reference 超文本引用
title : 滑鼠移至文字後,出現的浮動提醒文字
target : 視窗
_bank = 新視窗
_parent = 當前視窗
_self = 預設
<a href="www.yahoo.com.tw" target="_blank" title="Yahoo">Yahoo</a>
<a></a>電子郵件mailto : 電子信箱
cc : 副本
bbc : 密件副本
subject : 主旨
body : 內容
<a href="mailto:aa@yahoo.com;bb@yahoo.com
?cc=cc@yahoo.com
&bbc=dd@yahoo.com
&subject=今天會議。
&body=大家對今天會議的看法。">大家對今天會議的看法。</a>
<img></img>圖片src : 來源
alt : 載入失敗
title : 滑鼠移動到此元件後,浮出的提醒
<img src="http://img.mukewang.com/52172.jpg" alt="" title="电影介绍"> 

1 ) <a></a>













2 ) <a></a>













3 ) <img></img>























4 )  <img></img>



Html-基本認知(四)_Table標籤簡介

20161112 更新 : 新增 Div + Css 範例連結

看到Table表格標籤不知不覺就想到表格( 廢話
此 Table 標籤可以參考看看
如果資料異動、UI需求不大在使用
不然建議使用 Div + Css 方法

標籤功能說明用法
<table><tbody><tr><th><td>表格
table : 表格框架
tbody : 可不加入。
加入,載入完後顯示。
不加,邊載邊顯示。
tr( table row ) : 列
th( table head ) : 標頭
td( table data ) : 資料

th 和 td 差異?
th 會把標頭文字邊粗體
因程式碼無法對齊,所以放置於下方
<caption></caption>表格標題放置在 table 下方

<table>
    <caption>班級人數</caption>
    <tbody>
        <tr>
            <th>班級</th>
            <th>人數</th>
        </tr>
        <tr>
            <td>101</td>
            <td>36</td>
        </tr>
        <tr>
            <td>102</td>
            <td>39</td>
        </tr>
    </tbody>
</table>






















參考資料:Div+Css Table
參考資料:HTML Table 表格


2016年7月17日 星期日

Html-基本認知(三)_各式標籤簡介

看到標籤
大家一定會跟我一樣一樣搖搖頭
( 天呀 ! 怎麼這麼多,要記到什麼時候才記的完 )
好吧 ! 也有可能只有我....

但是
至少把標籤嘗試一次或是參考網頁原始碼就更有方向的
( P.s. 以下標籤有附成果圖,請用網頁尋找功能

標籤功能說明用法
<hx></hx>標題x : 1~6
h1 : 最重要 ; 以此類推
<h1>重要標題</h1>
<h2>次之標題</h2>
<p></p>段落為什麼不直接輸入<br />?
段落上下行文字間距會有明顯差別
<p>這是第1-1段
這是第1-2段
這是第1-3段</p>
<p>這是第2-1段
這是第2-2段
這是第2-3段</p>

這是第3-1段
這是第3-2段
這是第3-3段<br/>
這是第4-1段
這是第4-2段
這是第4-3段<br/>
<em></em>斜體<em>斜體字?</em>
<strong></strong>粗體字<strong>粗體字?</strong>
<span></span>獨立文字效果一行文字內,只想對某字處理方法一 :
我是<span style=color:red>Tom</span>,請多多指教。

方法二 :
<style>
span{
color:red;
}
</style>
<body>
...
我是<span>Tom</span>,請多多指教。
...
</body>
<q></q>雙引號<q>大明星</q>
<blockquote></blockquote>範圍內文字縮排.........
<blockquote>床前明月光,疑是地上霜。舉頭望明月,低頭思故鄉。</blockquote>
........
&nbsp;空白&nbsp;&nbsp&nbsp;&nbsp;我是某某某
<hr />水平分隔線將標籤前後做分割.........
<hr />
.........
<address></address>地址、郵件跟<em>一樣會顯示斜體,但多獨立換行聯絡地址 : <address>南投縣信義鄉111號</address>
<code></code>簡短程式碼為何不直接打?
因為瀏覽器有可能誤會成要執行
<code>int a = 0;
a++;
</code>
<pre></pre>大量程式碼為何不直接打?
因為瀏覽器有可能誤會成要執行
<ul><li></li></ul>列表( 點 )文字前會帶圓點以下幾點 :
<ul>
<li>訊息</li>
<li>訊息</li>
</ul>
<ol><li></li></ol>列表( 排序 )文字前會帶數字以下幾點 :
<ol>
<li>信息</li>
<li>信息</li>
</ol>

 1 ) <hx></hx>






















2 ) <p></p> 段落















3 ) <em></em> 斜體字














4 ) <strong></strong>














5 ) <span></span>









6 ) <q></q>












7 ) <blockquote></blockquote>













8 ) &nbsp;












9 ) <hr />











10 ) <address></address>












12 ) <ul><li></li></ul>

























13 ) <ul><li></li></ul>


2016年7月15日 星期五

Html-基本認知(二)_標籤、結構、註解

Html 最大的特色在於它的標籤了??

什麼是標籤? ( 開啟瀏覽器後可點擊鍵盤 F12 )
不同的標籤帶有不同元件的特性













標籤是如何宣告、使用?
1) 一律用 "<標籤>" + 內容 + "</標籤>"
2) 標籤內容可再加標籤
3) 大小寫都通用

Html 的最大結構 html、head、body
<html>
    <head>
    .
    .
    .
    </head>
    <body>
    .
    .
    .
    </body>
</html>

Html 的註解
<!-- 這裡寫註解 -->



Html-基本認知(一)_Html、Css、JavaScript是什麼關係?

相信各位大大對標題的不陌生吧
但我還是要提醒我自己
如果有不同見解或解釋有誤的部分
歡迎提出

HTML : 內容的載體( 人 )
CSS : 外觀型態( 衣物、高矮 )
JavaScript : 動作特效( 抬腿、踢球 )

這真的對剛入門的是非常重要的資訊
希望使有幫助的

2016年7月8日 星期五

Android-FireBase 的前置作業_(一)

只要用 FireBase 來開發應用程式
前置作業一定不可少
因為這篇是回頭寫的
如有遺漏請務必告知

首先很重要一點 !!!
不要查到舊版本的 API !
不要查舊版本的 API !
不要查舊版本的 API !
( 舊版 )














( 新版 )














接下來先說明步驟 :
1 . 註冊 Firebase console 專案 ( 請參考 1 - 3 點 )

2 . 下載專案設定檔案( google-services.json)

















3 . 將剛下載的檔案放置專案目錄下























4 . build.gradle 新增
buildscript {
    // ...
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:3.0.0'
    }
}

5 . app/build.gradle 新增
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

android {
  // ...
}

dependencies {
  // ...
  compile 'com.google.firebase:firebase-core:9.2.0'
}


以上就是前置的步驟
不管是分析、資料庫、Crash、推播...等才能用。

參考資料 : Add Firebase to your Android Project

Android-Firebase Authentication 認證( Register Account )

更新日期 :
20160827 : 強化說明
20160917 : 更新程式碼

自從 FireBase 開放有關行動開發的功能後
行動裝置開發者就可以專注在 UI 和 UX 的呈現
如果 App 還需要註冊、登入才能使用某些功能
這真的是一大福音
不僅省時又好控管也可以針對資料的存取做篩選

我們話不多說
直接開始進入主題吧
為什麼要有這功能? 用途為?
1 . 讓 FireBase 的 資料庫多一層保護
2 . 會員與非會員資料存取的差異
3 . 運用很廣,請大家集思廣益一起在底下留言

有關此篇的註冊是用一般註冊( 電子郵件、密碼 )
如果想用 Gmail、Facebook...等,官方皆有說明


請先完成 FireBase 的前置作業 : Android-FireBase 的前置作業

1 . 安裝 auth 相關 Lib
build.gradle{
    .
    .
    compile 'com.google.firebase:firebase-auth:9.2.0'
}

2 .  確認 FireBase Console 的註冊 Auth 是否有開啟














如果沒開啟郵件註冊







3 . 確認信的內容,除非要有特定格式,否則建議使用預設














4 . 程式 ( 註冊帳號 )
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;

public class MainActivity extends AppCompatActivity{

    private FirebaseAuth mFirebaseAuth;
    private final String TAG = "Auth";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String email = "email";
        String password = "password";
        
        mFirebaseAuth = FirebaseAuth.getInstance();
        mFirebaseAuth.createUserWithEmailAndPassword(email, password)
                .addOnCompleteListener(new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        Log.d(TAG, "signInWithEmail:onComplete:" + task.isSuccessful());

                        if (!task.isSuccessful()) {
                            Log.w(TAG, "signInWithEmail:failed", task.getException());
                        }
                    }
                });
    }
}


5 . 如果註冊成功,在 FireBase Console 會出現註冊用戶














參考資料 : Authenticate with Firebase using Password-Based Accounts on Android
參考資料 :  Firebase Authentication

Android-EditText AndroidStudio Glide 問題

最近建立專案後
發現 ExitText 會拋出例外
所以記錄
Process: activity.aaaa.aaa.com.aaa, PID: 9467
java.lang.RuntimeException: Unable to start activity ComponentInfo{activity.aaaa.aaa.com.aaa/activity.aaaa.aaa.com.aaa.ReActivity}: android.view.InflateException: Binary XML file line #29: Error inflating class EditText
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2305)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2365)
    at android.app.ActivityThread.access$800(ActivityThread.java:148)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1283)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:135)
    at android.app.ActivityThread.main(ActivityThread.java:5272)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:909)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:704)
 Caused by: android.view.InflateException: Binary XML file line #29: Error inflating class EditText
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:763)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:806)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:809)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:809)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:504)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:414)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:365)
    at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:280)
    at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
    at activity.aaaa.aaa.com.aaa.ReActivity.onCreate(RegisterActivity.java:14)
    at android.app.Activity.performCreate(Activity.java:5977)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1105)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2258)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2365) 
    at android.app.ActivityThread.access$800(ActivityThread.java:148) 
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1283) 
    at android.os.Handler.dispatchMessage(Handler.java:102) 
    at android.os.Looper.loop(Looper.java:135) 
    at android.app.ActivityThread.main(ActivityThread.java:5272) 
    at java.lang.reflect.Method.invoke(Native Method) 
    at java.lang.reflect.Method.invoke(Method.java:372) 
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:909) 
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:704) 
 Caused by: android.content.res.Resources$NotFoundException: File res/drawable-v21/abc_edit_text_material.xml from drawable resource ID #0x7f020012
    at android.content.res.Resources.loadDrawableForCookie(Resources.java:2469)
    at android.content.res.Resources.loadDrawable(Resources.java:2371)
    at android.content.res.TypedArray.getDrawable(TypedArray.java:749)
    at android.view.View.<init>(View.java:3737)
    at android.widget.TextView.<init>(TextView.java:676)
    at android.widget.EditText.<init>(EditText.java:65)
    at android.widget.EditText.<init>(EditText.java:61)
    at android.support.v7.widget.AppCompatEditText.<init>(AppCompatEditText.java:60)
    at android.support.v7.widget.AppCompatEditText.<init>(AppCompatEditText.java:56)
    at android.support.v7.app.AppCompatViewInflater.createView(AppCompatViewInflater.java:112)
    at android.support.v7.app.AppCompatDelegateImplV7.createView(AppCompatDelegateImplV7.java:1008)
    at android.support.v7.app.AppCompatDelegateImplV7.onCreateView(AppCompatDelegateImplV7.java:1067)
    at android.support.v4.view.LayoutInflaterCompatHC$FactoryWrapperHC.onCreateView(LayoutInflaterCompatHC.java:44)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:725)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:806) 
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:809) 
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:809) 
    at android.view.LayoutInflater.inflate(LayoutInflater.java:504) 
    at android.view.LayoutInflater.inflate(LayoutInflater.java:414) 
    at android.view.LayoutInflater.inflate(LayoutInflater.java:365) 
    at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:280) 
    at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
    at activity.rollcall.brian.com.rollcall.RegisterActivity.onCreate(RegisterActivity.java:14) 
    at android.app.Activity.performCreate(Activity.java:5977) 
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1105) 
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2258) 
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2365) 
    at android.app.ActivityThread.access$800(ActivityThread.java:148) 
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1283) 
    at android.os.Handler.dispatchMessage(Handler.java:102) 
    at android.os.Looper.loop(Looper.java:135) 
    at android.app.ActivityThread.main(ActivityThread.java:5272) 
    at java.lang.reflect.Method.invoke(Native Method) 
    at java.lang.reflect.Method.invoke(Method.java:372) 
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:909) 
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:704) 
 Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #24: <nine-patch> requires a valid 9-patch source image
    at android.graphics.drawable.NinePatchDrawable.updateStateFromTypedArray(NinePatchDrawable.java:445)
    at android.graphics.drawable.NinePatchDrawable.inflate(NinePatchDrawable.java:401)
    at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:1095)
    at android.graphics.drawable.StateListDrawable.inflate(StateListDrawable.java:185)
    at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:1095)
    at android.graphics.drawable.InsetDrawable.inflate(InsetDrawable.java:104)
    at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:1095)
    at android.gra

// 如果有更新到最新版本,就會自動生成
// classpath 'com.android.tools.build:gradle:2.2.0-alpha3'
classpath 'com.android.tools.build:gradle:2.1.0'












參考資料 : Android Studio 2.2 preview 1 EditText error

2016年7月4日 星期一

JSP、Servlet-JSP 與 Servlet 結合

為什麼我們不用 Html 就好
則要用 Jsp ??
最主要是我們直接用簡短的程式來完成一大段的功能
有點像是把資料傳給 Jsp 之後收到參數
再把整個頁面轉成 Html 格式

Servlet 3.0 新增使用註解的方式設定
省掉要在 Web.xml 設定的動作
我們直接來說明和操作吧 !


























1 . Index.java
import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 網址
@WebServlet("/index")
public class Index extends HttpServlet{

    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request
            , HttpServletResponse response)
            throws IOException, ServletException {
        
        // 內容    
        RequestDispatcher dispatcher = getServletContext()
                .getRequestDispatcher("/WEB-INF/jsp/index.jsp");
        dispatcher.forward(request, response);
        
    }
 
    public void doPost(HttpServletRequest request
            , HttpServletResponse response)
            throws IOException {
 
    }
    
}

2 . index.jsp
<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
</head>
<body>
    Hello World !!!
</body>
</html>


參考資料 : How to redirect to JSP inside WEB-INF folder
參考資料 : Java EE 6 - Servlet 3.0 新功能 - 注解 (Annotations)
參考資料 : 網頁套版