Wakanda Client-Side Development Meetup #2 Agenda

Shibuya, Tokyo
Wakanda
勉強会 #2
2013-08-13
presented by

Shibuya, Tokyo
agenda
client-side development
.../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html
studio server
NoSQL object datastore
+
web server
WAF: widget-centric JavaScript framework
Single Page Application (SPA) method

Shibuya, Tokyo
agenda
widget: datasourceにバインドされたHTMLコントロール

Shibuya, Tokyo
agenda
<button>
<input>
<label>
<div>
<span>

Shibuya, Tokyo
agenda
datasource: コミュニケーションレイヤーを提供するオブジェクト

Shibuya, Tokyo
agenda
datasource: コミュニケーションレイヤーを提供するオブジェクト
datasource
widgetwidget
server

Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html
page
architecture
WAK1 WAK2 WAK3
page.htmlpage.html
page.waPagepage.csspage.css page.waPage
page.jspage.js
page.waPage

Shibuya, Tokyo
page
architecture
page.waPagepage.waPagepage.waPage
index.htmlindex.html
index-smartphone.htmlindex-smartphone.html
index-tablet.htmlindex-tablet.html
stylesstyles
index.css
index-smartphone.css
index-tablet.css
scriptsscripts
index.js
index-smartphone.js
index-tablet.js

Shibuya, Tokyo
page
desktop
stylesstyles
index.css
index-tablet.css
scriptsscripts
index.js
index-smartphone.js
index-tablet.js

Shibuya, Tokyo
page
smartphone
stylesstyles
index.css
index-tablet.css
scriptsscripts
index.js
index-smartphone.js
index-tablet.js

Shibuya, Tokyo
page
tablet
stylesstyles
index.css
index-tablet.css
scriptsscripts
index.js
index-smartphone.js
index-tablet.js

Shibuya, Tokyo
page
view
page.waPagepage.waPagepage.waPagepage.waPage
GUI Designerと連動index-smartphone.htmlindex-smartphone.html GUI Designerと連動
GUI Designerと連動
stylesstylesstyles
index.css
GUI Designerと連動index-smartphone.css GUI Designerと連動
index-tablet.css
scriptsscriptsscripts
index.js
GUI Designerと連動index-smartphone.js GUI Designerと連動
index-tablet.js

Shibuya, Tokyo
Architecture-of-a-Wakanda-Solution/Page.200-1022685.ja.html
page
view
index.html
GUI Designerと連動index-smartphone.html GUI Designerと連動
index-tablet.html
<meta name="generator" content="Wakanda GUIDesigner"/>
<meta name="wakanda-version" content="5 build 5.137191"/>
<meta name="wakanda-build" content="5.137191"/>

Shibuya, Tokyo
Architecture-of-a-Wakanda-Solution/Page.200-1022685.ja.html
page
view
index.html
index-tablet.html
XHTML5: 空要素のタグも閉じる
<img src="car.jpg" alt="vehicle" height="128" width="128" /> OK
<img src="car.jpg" alt="vehicle" height="128" width="128"> NG

Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer.200-306826.ja.html
page
view
index.html
index-tablet.html
<input type="checkbox" name="vehicle" value="Car" checked="checked" /> OK
<input type="checkbox" name="vehicle" value="Car" checked /> NG
XHTML5: 属性の省略書式は使用しない

Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer.200-306826.ja.html
page
view
index.html
index-tablet.html
<a href="/myscript?name=miyako&value=keisuke" /> OK
<a href="/myscript?name=miyako&value=keisuke" /> NG
XHTML5: アンパーサンドは&と記述する

Shibuya, Tokyo
page
styles
stylesstylesstyles
index.css
index-tablet.css
index*.css: 編集してはいけない（GUI Designerが上書き）

Shibuya, Tokyo
page

Shibuya, Tokyo
page
styles
stylesstylesstyles
index.css
index-tablet.css

Shibuya, Tokyo
page
styles
stylesstylesstyles
index.css
index-tablet.css
page.css 自由

Shibuya, Tokyo
page
styles
stylesstylesstyles
index.css
index-tablet.css
page.css 自由
application.css theme/role管理（後述）

Shibuya, Tokyo
page
index.js
index-tablet.js
scripts
index*.js: 既定のイベントでコールされるJavaScript

Shibuya, Tokyo
page

Shibuya, Tokyo
page
scripts
desktop smartphone tablet
On LoadOn LoadOn Load
On Orientation ChangeOn Orientation Change
index*.js: 既定のイベント

Shibuya, Tokyo
page
index.js
index-tablet.js
scripts

Shibuya, Tokyo
page
index.js
index-tablet.js
scripts
page.js 自由

Shibuya, Tokyo
page
index.js
index-tablet.js
scripts
page.js 自由
WAF.onAfterInit = function() {
    WAF.addListener("button1", "click", function(event) {
    //put code here for your event
    });
};
エントリーポイント: onAfterInit

Shibuya, Tokyo
Architecture-of-a-Wakanda-Solution/Routing-Pages.300-972295.ja.html
view
targets.json
{Solution folder}/targets.json
{Wakanda Server folder}/walib/WAF/routing/targets.json
{Project folder}/targets.json
[
{
"name" : "PSP",
"suffix" : "smartphone",
"touch" : "true",
"resolution" : "480x272",
"background-landscape" : "background-psp-landscape.png",
"background-portrait" : "background-psp-portrait.png",
"rules" : [
{ "include" : "PlayStation Portable"}
]
}
]

Shibuya, Tokyo
view

Shibuya, Tokyo
view
targets.json
waPlatform: キャッシュされたCookie (User-Agent)
iPhone, Android, Mobile
phone, Samsung Galaxy Note
Galaxy Nexus, Nexus One
DROID2, DROID, DROIDX
HTC Desire, ADR6300
myTouch, Desire,
SonyEricssonX10i, E10i
SGH
iPad, Android (ex.Mobile)
GT
SCH
Xoom
Streak

Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html
designer preferences
preferences.json
Library/Application Support/Wakanda Studio/
C:Users{userName}AppDataRoamingWakanda Studio
{
"gui":{
snapping : {
grid : {
activeByDefault : true,
showByDefault : true,
color : "black"
}
}
}
}

Shibuya, Tokyo
Snap to grid
Show grid

Shibuya, Tokyo
{
"gui":{
themes : {
desktop: "lilac",
smartphone: "cupertino",
tablet: "cupertinoIpad"
}
}
}
preferences.json

Shibuya, Tokyo
preferences.json
default cupertino cupertino
metal cupertinoIpad cupertinoIpad
lilac
light
softGray

Shibuya, Tokyo
command/control+drag

Shibuya, Tokyo
{
"gui":{
snapping : {
magneticGrid : {
automaticallyActive : true,
onlySnapToSiblings : true,
color : "red"
}
}
}
}
preferences.json

Shibuya, Tokyo
Google Fonts

Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html
widget roles

Shibuya, Tokyo
application.css
.waf-theme.lilac .waf-button.waf-role-Japanese-Button {ゴ
" font-family: 'メイリオ,'Meiryo','ヒラギノ角ゴro W3','Hiragino Kaku Gothic
Pro','ＭＳＰゴシック,'MS PGothic',Osaka,sans-serif;
}
theme毎/widget-type毎のクラス
widget roles

Shibuya, Tokyo
page.waPage/styles/index.css
#button1 {
" width: 186px;
" height: 99px;
" top: 40px;
" left: 21px;
"
" position: absolute;
" font-family: 'Lucida grande', 'Segoe UI', Tahoma, sans-serif;
}
widget roles

Shibuya, Tokyo
http://www.w3.org/TR/css3-selectors/
speciﬁcity
speciﬁcity = a b c (n進数)
count the number of ID attributes in the selector a
count the number of other attributes and pseudo-classes in the selector b
count the number of element names in the selector c
widget roles

Shibuya, Tokyo
widget roles
application.css | index.css
widgetを配置 (index.css)
styleを設定 (index.css)
roleを作成 (application.css)
スタイルを削除 (index.css)
styleを変更 (index.css)
roleを更新 (application.css)
スタイルを削除 (index.css)
roleを設定した後にスタイルをいじることは避けたほうが良い

Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Button.300-307059.ja.html
button

Shibuya, Tokyo
button
properties/general
link datasource
ID HTML unique idHTML unique id
Hide widget on load
Button title
Source
Action
URL http, ftp, mailto...
Target _blank, _self
Tabindex

Shibuya, Tokyo
button
properties/general
link datasource
ID HTML unique idHTML unique id
Hide widget on load
Button title
Source datasource
Action simple, auto
URL
Target
Tabindex

Shibuya, Tokyo
button
properties/general
buttonbuttonbuttonbutton
simplesimplesimple
On Click
JavaScript記述
On Double Click
JavaScript記述
On Mouse Down, Out, Over, Up
JavaScript記述
On Touch Start, End, Cancel
JavaScript記述
!simple!simple!simple
Create, Save, Remove
自動処理
Previous , Next, First, Last
自動処理

Shibuya, Tokyo
Widgets-API/Widgets-API.100-744727.ja.html
widgets
var myValue = $$('widgetID').getValue();
var myValue = WAF.widgets.widgetID.getValue();
syntax
method()
var myLabel = $$('widgetID').label;
var myLabel = WAF.widgets.widgetID.label;
property

Shibuya, Tokyo
Widgets-API/Button.201-867857.ja.html
widgets
syntax
var myValue = this.getValue();
var myLabel = this.label;
this

Shibuya, Tokyo
button
button2.click = function button2_click (event)
{
" var url = $$('textField1').getValue();
"
" if(url.length){
" " if(url.substr(0,7) == "http://"){
" " this.setURL(url);"
" " this.setValue("jump to " + url);
" " }
" }
};
index.js

Wakanda Client-Side Development Meetup #2 Agenda

Recomendados

Recomendados

Más contenido relacionado

Similar a Wakanda Client-Side Development Meetup #2 Agenda

Similar a Wakanda Client-Side Development Meetup #2 Agenda (20)

Más de kmiyako

Más de kmiyako (20)

Último

Último (20)

Wakanda Client-Side Development Meetup #2 Agenda