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

Shibuya, Tokyo

agenda

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

Shibuya, Tokyo

agenda

Shibuya, Tokyo

agenda

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

architecture

WAK1 WAK2 WAK3

page.htmlpage.html

page.waPagepage.csspage.css page.waPage

page.jspage.js

page.waPage

Shibuya, Tokyo

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

desktop

Shibuya, Tokyo

smartphone

Shibuya, Tokyo

tablet

Shibuya, Tokyo

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.waPagepage.waPagepage.waPageindex.html

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

Shibuya, Tokyo

Architecture-of-a-Wakanda-Solution/Page.200-1022685.ja.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

<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

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

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

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

Shibuya, Tokyo

styles

page.waPagepage.waPagepage.waPagepage.waPagestylesstylesstyles

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

index-tablet.cssGUI Designerと連動

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

Shibuya, Tokyo

styles

Shibuya, Tokyo

styles

page.css 自由

Shibuya, Tokyo

styles

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

Shibuya, Tokyo

page.waPagepage.waPagepage.waPagepage.waPagescriptsscriptsscripts

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

index-tablet.jsGUI Designerと連動

scripts

index*.js: 既定のイベントでコールされるJavaScript

Shibuya, Tokyo

scripts

desktop smartphone tablet

On LoadOn LoadOn Load

On Orientation ChangeOn Orientation Change

index*.js: 既定のイベント

Shibuya, Tokyo

scripts

Shibuya, Tokyo

scripts

page.js 自由

Shibuya, Tokyo

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

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

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

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

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

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

Google Fonts

Shibuya, Tokyo

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

widget roles

Shibuya, Tokyo

widget roles

Shibuya, Tokyo

widget roles

Shibuya, Tokyo

widget roles

Shibuya, Tokyo

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

widget roles

Shibuya, Tokyo

widget roles

Shibuya, Tokyo

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

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

Shibuya, Tokyo

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

widgets

syntax

var myValue = this.getValue();

var myLabel = this.label;

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

Transcript of Wakanda#2

· 2001. 8. 28. · ˆ(: 4 ˚ ˜ 2 ˙ )˜ 2 ˙˘˝ )˜ 2 2 ˙ 2 220 ) 2˜ 2 2) ˜ 20 2 0 0 2 g ˙2 0 2 2 ˙h ˜ 2 2 0 2 2 0 0 2 2 2 2 2ˇ 0 0 2 2ˇ 2 2 0 2 ˙ ˜ˇ 0 2 2 ˙ 0 2 2

WAKANDA PILEGÅRD HAR GENFUNDET SEJRSFORMEN€¦ · vellykket arrangement, der bekræfter, at vi her i Odense både har et stort stampublikum, men også er i stand til at trække

さよなら夏の日（伴奏） - classhilo.com · 2- 2— 2- 2— 4— —2 4— —4 2— 2- 2— 2- 2- 2- 2- 2- 4— 2- -2 2- 2- 2- 2- 2- 2- 2- 2- 2- Bm7 E 7 A c#m7 1-1 c#m7

· 4/ & -& %.* -& *-& '!. * /2*-2$& 22.& ! $-) ! .& /21-%3.! 2 & '! )'- & ) 2 & 1-2'! % 2 .& * 1-2 !.&) .! & )- & 3!-2'-3 % 2 & * & !-'.2*/!!

pedroescobedo.gob.mx · 2. 2.- 2.- 2.- 1- 2.- 1- 2. 2.- 2.- 2.- 2.- 2.- 2.- 2.- 2.- 2.- Partida Partida Partida Partida Partida Partida Partida Partida Partida Partida

images1.loopnet.com...2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1/2 1. 2. 4. Except hotel uses which shall not exceed 12 stories

2-2-2 2-2-4 2-2-6 2-2-8 2-2-9 2-2-10 2-2-11 2-2-12 2-2-13 ... · 2-2-2 2-2-4 2-2-6 2-2-8 2-2-9 2-2-10 2-2-11 2-2-12 2-2-13 2-2-14 2-2-15 2-2-16 2-2-17 g 2-2-18 g 2-2-19 g 2-2-20 g

Imortais da Terra · Imortais da Terra Histórias de uma vida que viraram Tradição LUCIANA MACHADO Mestre Wakanda Layuth Mahtab

ΟΔΗΓΟΣΣΠΟΥΔ2Ν ΤΜΗΜΑΤΟΣ ΜΑθΗΜΑΤΙΚ2Ν · 3-1 3-1 3-1 3-1 2-2 2-2 2-2 2-2 2-2 2-2 2-2 2-2 2-2 2-2 •. Δεν είναι βέβαιο ότι κατά την

3:00 2:59 2:58 2:57 2:56 2:55 2:54 2:53 2:52 2:51 2:50 2:49 2:48 2:47 2:46 2:45 2:44 2:43 2:42 2:41 2:40 2:39 2:38 2:37 2:36 2:35 2:34 2:33 2:32 2:31 2:30.

reticula arquitectura con especialidad copia - … · 2 2 4 2 2 4 2 4 6 2 6 8 2 6 8 2 6 8 2 6 8 2 6 8 2 2 4 2 2 4 2 2 4 4 2 6 4 2 6 2 2 4 2 2 4 0 4 4 2 2 4 2 2 4 2 2 4 2 2 4 4 2 6

Wakanda 2013-07-02

Les choses sérieuses commencent caChad-wicBo-semaqui enssera le rôT’Chal-la, prince du Wakanda, l’un héros des banssi-nées Marvel puian-nées 60. PAGE 7. 2 Les Dépêches de

LA GENDARMERIE NATIONALE · %2 %2 %2 %2 %2 %2 %2 ...

Bovenlokaal Functioneel Fietsroutenetwerk Toestand ... · 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 kortrijk roeselare

Wakanda presentation

quadernos prácticos para asociaciones - · PDF file2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 quadernos prácticos para asociaciones Manual básico sobre el Impuesto de Sociedades

Agile & Wakanda

NITIDAE recrute dans le cadre du projet WAKANDA au Burkina Faso · 2020-07-02 · NITIDÆ Burkina Faso I rue 28.291 villa N°04 ; parallèle au Boulevard Général Charles de Gaulle,

Unser Weg zum Abitur am EvB€¦ · Ku/Mu/DSP 2 2 2 2 2. Aufgabenfeld PE Geschichte 2 2 2 2 2 2 PE Geografie 2 2 2 2 2 2 WiPo 2 2 2 2 2 2 Religion/ Philosophie 2 2 2 2 3. Aufgabenfeld

· 4/ & -& %.* -& -& '!. /2-2$& 22.& ! $-) ! .& /21-%3.! 2 & '! )'- & ) 2 & 1-2'! % 2 .& 1-2 !.&) .! & )- & 3!-2'-3 % 2 & * & !-'.2*/!!