wakanda#2

Shibuya, Tokyo

Wakanda勉強会 #22013-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

http://doc.wakanda.org/Introduction-to-Wakanda-Client-Side-Development/Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html


Shibuya, Tokyo

agenda



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



Shibuya, Tokyo

agenda




<button><input><label><div><span>



Shibuya, Tokyo

agenda






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

http://doc.wakanda.org/Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html


Shibuya, Tokyo


page

architecture

page.waPagepage.waPagepage.waPageindex.htmlindex.htmlindex-smartphone.htmlindex-smartphone.htmlindex-tablet.htmlindex-tablet.htmlstylesstyles

index.cssindex-smartphone.cssindex-tablet.css

scriptsscriptsindex.jsindex-smartphone.jsindex-tablet.js



Shibuya, Tokyo


page

desktop






Shibuya, Tokyo


page

smartphone






Shibuya, Tokyo


page

tablet






Shibuya, Tokyo


page

view

page.waPagepage.waPagepage.waPagepage.waPageindex.htmlindex.html

GUI Designerと連動index-smartphone.htmlindex-smartphone.html GUI Designerと連動index-tablet.htmlindex-tablet.html

GUI Designerと連動

stylesstylesstylesindex.css

GUI Designerと連動index-smartphone.css GUI Designerと連動index-tablet.css


scriptsscriptsscriptsindex.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

page.waPagepage.waPagepage.waPageindex.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"/>

http://doc.wakanda.org/Architecture-of-a-Wakanda-Solution/Page.200-1022685.ja.html


Shibuya, Tokyo

Architecture-of-a-Wakanda-Solution/Page.200-1022685.ja.html

page

view




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




<input type="checkbox" name="vehicle" value="Car" checked="checked" /> OK

<input type="checkbox" name="vehicle" value="Car" checked /> NG

XHTML5: 属性の省略書式は使用しない

http://doc.wakanda.org/Wakanda-Studio-Reference-Guide/GUI-Designer.200-306826.ja.html


Shibuya, Tokyo

Wakanda-Studio-Reference-Guide/GUI-Designer.200-306826.ja.html

page

view




<a href="/myscript?name=miyako&value=keisuke" /> OK

<a href="/myscript?name=miyako&value=keisuke" /> NG

XHTML5: アンパーサンドは&と記述する



Shibuya, Tokyo


page

styles

page.waPagepage.waPagepage.waPagepage.waPagestylesstylesstyles

index.cssGUI Designerと連動index-smartphone.css GUI Designerと連動

index-tablet.cssGUI Designerと連動

index*.css: 編集してはいけない（GUI Designerが上書き）



Shibuya, Tokyo


page



Shibuya, Tokyo


page

styles






Shibuya, Tokyo


page

styles




page.css 自由



Shibuya, Tokyo


page

styles




page.css 自由application.css theme/role管理（後述）



Shibuya, Tokyo

page

page.waPagepage.waPagepage.waPagepage.waPagescriptsscriptsscripts

index.jsGUI Designerと連動index-smartphone.js GUI Designerと連動

index-tablet.jsGUI Designerと連動

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




Shibuya, Tokyo

page




scripts




Shibuya, Tokyo

page




scripts


page.js 自由



Shibuya, Tokyo

page




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"} ] }]

http://doc.wakanda.org/Architecture-of-a-Wakanda-Solution/Routing-Pages.300-972295.ja.html


Shibuya, Tokyo


view



Shibuya, Tokyo


view

targets.json

waPlatform: キャッシュされたCookie (User-Agent)

desktop smartphone tabletiPhone, Android, Mobilephone, Samsung Galaxy NoteGalaxy Nexus, Nexus OneDROID2, DROID, DROIDXHTC Desire, ADR6300myTouch, Desire, SonyEricssonX10i, E10iSGH

iPad, Android (ex.Mobile)GTSCHXoomStreak



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}\AppData\Roaming\Wakanda Studio\

{ "gui":{ snapping : { grid : { activeByDefault : true, showByDefault : true, color : "black" } } }}

http://doc.wakanda.org/Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html


Shibuya, Tokyo


Snap to gridShow grid




Shibuya, Tokyo


{ "gui":{ themes : { desktop: "lilac", smartphone: "cupertino", tablet: "cupertinoIpad" } }}

preferences.json






Shibuya, Tokyo


preferences.json

desktop smartphone tablet

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

https://developers.google.com/fonts/docs/developer_api

https://developers.google.com/fonts/docs/developer_api

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html

widget roles

http://doc.wakanda.org/Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Widget-Overview.300-306931.ja.html%231009782


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


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/

specificity

specificity = 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

http://doc.wakanda.org/Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Button.300-307059.ja.html


Shibuya, Tokyo


button

properties/general

link datasourceID HTML unique idHTML unique idHide widget on loadButton titleSourceActionURL http, ftp, mailto...Target _blank, _selfTabindex



Shibuya, Tokyo


button

properties/general

link datasourceID HTML unique idHTML unique idHide widget on loadButton titleSource datasourceAction simple, autoURLTargetTabindex



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


button



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

http://doc.wakanda.org/Widgets-API/Widgets-API.100-744727.ja.html

http://doc.wakanda.org/Widgets-API/Widgets-API.100-744727.ja.html

Shibuya, Tokyo

Widgets-API/Button.201-867857.ja.html

widgets

syntax

var myValue = this.getValue();

var myLabel = this.label;

this

http://doc.wakanda.org/Widgets-API/Button.201-867857.ja.html

http://doc.wakanda.org/Widgets-API/Button.201-867857.ja.html

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



Shibuya, Tokyo

Wakanda勉強会 #22013-08-13

presented by

wakanda#2

Technology