モーダルウインドウ作成
モーダルウインドウは、ユーザになんらかの操作を
促すウインドウ
必要なのは呼び出すボタンと
ウインドウ
まずはボタンを a要素で作成
,a href=”#myModal” class=”btn” data-toggle=”modal”>Modal window</a>
これで
class=”btn” によりリンクがボタンの形になる
そして、次にウインドウの作成
これは
<div id=”myModal” class=”modal h8ide fade”>
</div>
としてウインドウをつくる
そして、スマホページのように
ヘッダー
ボディ
フッターを作成する
ヘッダーは
<div class=”modal-header”>
</div>
ボディは
<div class=”modal-body”>
</div>
フッターは
<div class=”modal-fotter”>
</div>
で作成
それぞれに記述していく
ヘッダーには閉じるボタンをつけたいので
<div class=”modal-header”>
<a href=”#” class=”close” data-dismiss=”modal”>×</a>
</div>
とする
月別: 2013年5月
プログレスバーの表示
進捗状況を表すのに使う
<div class=”progress”>
</div>
で指定して
進捗状況は
<div class=”bar” style”=width:45%”>
</div>
また、ストライプにする。つまりシマシマ模様にするなら
<div class=”progress progress-striped”>
とする
動きも付け加えたいのなら
<div class=”progress progress-striped active”>
として
さらに色もつけたいのなら
<div class=”progress progress-striped active progress-success”>
詳しいことは
http://twitter.github.io/bootstrap/components.html#progress
を参考にするとわかりやすい
ラベルとバッジとアラート
ラベルをつけるなら
<p>
<span class=”label”>Note</span> Message
</p>
というようにする
また、このラベルには種類があり
label-warning にするとオレンジ色
label-info にすると水色になる
次にバッジ
スマホのメールの未読数字のように表示される
やり方は
<span class=”badge”>5</span>
というようにする
ちなみに、これも色を変えることができる
<span class=”badge badge-important”>5</span>
とすれば赤い色になる
ラベルとバッジに関しては
http://twitter.github.io/bootstrap/components.html#labels-badges
を参考にする
次はアラート
<div class=”alert”>
Message
</div>
とすることで、
Message というアラートができる
このアラートも
http://twitter.github.io/bootstrap/components.html#alerts
に詳しい解説が載っている
<div class=”alert alert-success”>
とすれば、アラートの背景色が緑になる
また、アラートとボタンの組み合わせもできる
<button type=”button” class=”close” data-dismiss=”alert”>×</button>
とすれば
アラートのところにxの消すボタンができるので
これを押せば、アラートが消える
あと、視覚効果でフワッと消すなら
<div class=”alert alert-success fade in”>
とすれば
ボタンと組み合わせることでふわっと消える
フラグメンテーションの書き方
フラグメンテーションの書き方
とりあえずメモ
フラグメントのclass属性に
対応するfragmentクラスを指定
ちなみに
com.example.fragmentsample.MainActivity$PageListFragment
これは
完全修飾のクラス名
分類すると
com.examplesfragmentsample
がパッケージ名
MainActivity
がクラス名
PageListFragment
がインナークラス名
インナークラスは、内部クラスという意味
あと、idプロパティに
“@+id/titles”としてあるように
フラグメントにもユニークIDが必要
ちなみに、ユニークとは
ほかと被らないという意味
このIDは
DOM操作のときみたいに
フラグメントの特定以外にも
フラグメントの再生成するときにも使える
ということで、Activityのレイアウトの中へ
Fragmentを記述する
フラグメントのサブクラス
フラグメントのサブクラス
フラグメントには、4つの代表的なサブクラスがある
ダイアログウインドウを表示する
DialogFragment
一覧を表示する
ListFragment
設定情報を表示する
PreferenceFragment
WebViewへWebページを表示する
WebViewFragment
また、フラグメントにも
アクティビティのように、ライフサイクルが存在する
onAttach()
フラグメントがアクティビティと関連付けされたとき
1回だけ呼び出される
onCreate()
フラグメントの初期化
onCreateView()
フラグメントに関連付けされるビュー階層を作成
onActivityCreated()
アクティビティのonCreate()から
戻ってきたら呼び出される
onStart()
アクティビティのonStart()に基づき開始
onResume()
アクティビティのonResume()に基づき開始
onPause()
アクティビティがonPauseになったときや
フラグメントが捜査を受け付けなくなったとき
onStop()
フォアグラウンドてなくなったとき
onDestroyView()
フラグメントに関連付けされてビュー階層が
取り除かれたら呼び出される
onDestroy()
フラグメントが破棄されるとき
onDetach()
フラグメントとアクティビティの関連がなくなったとき
スマホてフラグメント
スマホてフラグメント
以前ならtabHostクラスで
タブ表示してページの切り替えてきたけど
APIレベル13から変更になり
TabActivityは非推奨になったので
別の方法を使うことになった
今は、ActionBarへタブ表示して
アクティビティをナビゲーションするのが推奨
また、APIレベル13から
AlertDialogを表示するための
showDialog()も非推奨になったので
変わりにフラグメントのサブクラスの
DialogFragmentを使うことが推奨になった
このように、スマートフォンでも
タブレットみたいに、フラグメントを使うようになっている
フラグメントについて
フラグメントについて
Androidがタブレットなど大画面化対応のため
フラグメントが作られた
フラグメントは、アクティビティへ組み込む形で使う
アクティビティを複数の表示領域へ分けることで
画面の部分的更新を可能にする
使えるのは
Android4.0以降のスマートフォンと
タブレット
—
から送られてきた高速メモ帳
LogCatビューのログレベル
LogCatビューのログレベル
verbose
詳細なトレース情報を出力
Log.v()
debug
デバッグ情報を出力
Log.d()
info
アプリ操作の情報を出力
Log.i()
warn
アプリの復旧可能なレベルの警告を出力
Log.w()
error
アプリの続行不可能なエラーを出力
Log.e()
assert
アプリの致命的エラーを出力
簡単なテストケース作成
Selenium IDE を使ってアプリのテスト
その中で必要になる
ロケーター
バリデーション
複数のテストケースをまとめるテストスイートについてのめも
ロケーター
Slenese が対象を指定するためのもの
jQuery におけるセレクタと同じ役割
Slenium IDE だと
ロケーターは識別子 identifier
CSS
XPath
DOM
の4種類が使える
まず、識別子の identifier
これはデフォルトで使われるロケータ
identifgier = idOrName
というように記述される
識別子では
idOrName に一致する最初の id 属性を持つ要素を探す
一致するのがみつからないと
idOrName に一致するname 属性を持つ要素を探す
つまり、最初に
id
ないなら
idOrName を探す
デフォルト設定なので、実は
identifier = は省略できる
id だけとか name だけで要素指定するなら
id=myId
name=myName
というように書く
指定する要素の id , name などを振ってあるなら
一番楽に使える
次にCSSの場合
css=
でCSSセレクタと同じ記述で要素を指定できる
Slenium IDEだと
複雑なCSSセレクタで絞り込むとできなかったりする
XPath よりは動作が速い
そして XPath
これは
xpath= に続けてxpath を指定する
いろいろな表現ができるけど
ブラウザ依存するし、実効速度が遅くなったりする
あと、記述はCSSより長めになる傾向あり
Androidで利用可能なレイアウト
Androidで利用可能なレイアウト
LinearLayout
縦、または横の直線上に部品を配置
RelativeLayout
部品同士をお互いの相対的位置へ配置
TableLayout
部品をマス目状に配置
HTMLのtableタグのようなかんじ
GridLayout
部品をマス目状に配置
行、列を指定して直接的に配置可能
FrameLayout
部品を常に左上に配置
ビュー部品を重ねて配置する
AbsoluteLayout
部品を絶対位置へ配置
ただし、ほかのレイアウトと違い
画面サイズの補正をしないため
専用端末のレイアウトになるが
つくるほうはらくかもしれない