wakanda#4

Shibuya, Tokyo

Wakanda

presented by

勉強会 #42013-08-27

Shibuya, Tokyo

datasource

agenda

.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

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


Shibuya, Tokyo

browsers server

NoSQL object datastore+

web server+

Server Side JavaScript

Client Side JavaScript+

WAF: datasource (widgets)+

WAF: dataprovider (REST)

datasource

agenda




Shibuya, Tokyo

browsers server


web server+





datasource

agenda

async




Shibuya, Tokyo

browsers server


web server+





datasource

agenda




Shibuya, Tokyo

datasource

agenda




Shibuya, Tokyo

agenda

.../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html

widgetとサーバーのコミュニケーションをサポートするオブジェクト

datasource

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


Shibuya, Tokyo

agenda

.../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html


datasource

widgetwidget

server

datasource



Shibuya, Tokyo

agenda

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


datasource

widgetwidget

server

datasource

event dispatch

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

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

Shibuya, Tokyo

GUI designer




Shibuya, Tokyo

<meta data-lib="WAF" name="WAF.config.datasources"data-type="dataSource" data-source-type="dataClass"data-id="company" data-source="Company"data-autoLoad="true" data-initialQueryString="state = 'CA'"data-initialOrderBy="name ASC" />


data source

page



Shibuya, Tokyo


data source

common

data-id - unique data-source

data-lib - 'WAF'

name - 'WAF.con!g.datasources'

data-type - {JavaScript}

data-source-type - 'dataClass', 'scalar', 'array', 'object'



Shibuya, Tokyo


data source

ds class


data-lib - 'WAF' data-initialQueryString

name - 'WAF.con!g.datasources' data-initialOrderBy

data-type - {MyClass} data-scope - 'global', 'local'

data-source-type - 'dataClass'

data-autoload - 'true', 'false'



Shibuya, Tokyo


data source

relation




data-type - {myClass.myRelation} data-scope - 'global', 'local'

data-source-type - 'dataClass'




Shibuya, Tokyo


data source

variable




data-type - {myVariable} data-scope - 'global', 'local'

data-source-type - 'scalar'

data-dataType - string, boolean, date, number




Shibuya, Tokyo


data source

array




data-type - {myArray} data-scope - 'global', 'local'

data-source-type - 'array' data-attributes





Shibuya, Tokyo


data source

array




data-type - {myArray} data-scope - 'global', 'local'

data-source-type - 'array' data-attributes



WAK6 - query(), filterQuery(), primary key サポート



Shibuya, Tokyo


data source

object




data-type - {myObject} data-scope - 'global', 'local'

data-source-type - 'object' data-attributes





Shibuya, Tokyo

relational database

relation

Shibuya, Tokyo

object datastore

relation attribute

Shibuya, Tokyo

object datastore

model API (v5)

model = new DataStoreCatalog();

model.City = new DataClass("CityCollection", "public");

model.City.id = new Attribute("storage", "long", {"primKey": true, "unique": true, "autosequence": true, "indexKind": "btree"});model.City.prefectureId = new Attribute("storage", "long", null);model.City.yomi = new Attribute("storage", "string", {"limiting_length": 22});model.City.name = new Attribute("storage", "string", {"limiting_length": 10, "indexKind": "btree"});model.City.city_Post = new Attribute("relatedEntities", "PostCollection", "post_City", {"reversePath": true});model.City.city_Prefecture = new Attribute("relatedEntity", "Prefecture", "Prefecture");

Shibuya, Tokyo

object datastore

model API (v4)

model = new DataStoreCatalog();

var city = model.addClass = ("CityCollection", "public");

city.addAttribute("id", "storage", "long", {"primKey": true, "unique": true, "autosequence": true, "indexKind": "btree"});city.addAttribute("prefectureId", "storage", "long", null);city.addAttribute("yomi", "storage", "string", {"limiting_length": 22});city.addAttribute("name", "storage", "string", {"limiting_length": 10, "indexKind": "btree"});city.addAttribute("city_Post", "relatedEntities", "PostCollection", "post_City", {"reversePath": true});city.addAttribute("city_Prefecture", "relatedEntity", "Prefecture", "Prefecture");

Shibuya, Tokyo

http://doc.wakanda.org/Model/Working-with-the-Model-API-v5.200-995188.ja.html

v3 v4 v5

モデルエディターに表示 NO YES YES

コードエディターにジャンプ NO NO YES

移行時にコードを自動変換 NO NO YES

model API

object datastore



Shibuya, Tokyo

.../Datastore/Entity/Working-with-Entities.300-598913.en.html

new + object

create entity

var prefecture = new ds.Prefecture({! ! ! ! ! ! ! id : columns[0], yomi: columns[1], name : columns[2] });! ! prefecture.save();



Shibuya, Tokyo


new + assignment

var city = new ds.City(); city.id = columns[0]; city.prefectureId = columns[1]; city.yomi = columns[2]; city.name = columns[3]; city.city_Prefecture = city.prefectureId; !!

city.save();

create entity



Shibuya, Tokyo


constructor

var post = ds.Post.createEntity(); post.id = columns[0]; post.cityId = columns[1]; post.code = columns[2];! ! ! post.yomi = columns[3]; post.name = columns[4]; post.post_City = post.cityId; post.save();}

create entity



Shibuya, Tokyo

.../Datastore-Model-Designer/Model.300-735558.ja.html

allow global access

create entity

modelまたはdataClassレベルで設定ds.myClassの'ds.'を省略できる

var post = ds.Post.createEntity(); post.id = columns[0]; post.cityId = columns[1]; post.code = columns[2];! ! ! post.yomi = columns[3]; post.name = columns[4]; post.post_City = post.cityId; post.save();}



Shibuya, Tokyo

.../Datastore-Model-Designer/Model.300-735558.ja.html

create entity



Shibuya, Tokyo

aliases: source, sources, waf

WAF.sources = WAF.source;source = WAF.source;sources = WAF.source;waf = WAF;

loader.js

.../Hands-On-Example.200-875684.ja.html



Shibuya, Tokyo


GUI designer



Shibuya, Tokyo

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

preferences.json

desktop smartphone tablet

default cupertino cupertino

metal cupertinoIpad cupertinoIpad

lilac

light

softGray

designer preferences

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


Shibuya, Tokyo

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

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

preferences.json

Library/Application Support/Wakanda Studio/

C:\Users\{userName}\AppData\Roaming\Wakanda Studio\

designer preferences



Shibuya, Tokyo

GUI designer

.../GUI-Designer-Datasources/Datastore-Class-Datasources.300-661466.ja.html



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毎のクラス

GUI designer

.../GUI-Designer-Widgets/Widget-Overview.300-306931.ja.html

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

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

Shibuya, Tokyo

GUI designer

.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html



Shibuya, Tokyo

GUI designer

datasource = datastore class: クラスをドラッグ＆ドロップ




Shibuya, Tokyo

GUI designer




Shibuya, Tokyo

GUI designer

datasource = relation attribute: 属性をドラッグ＆ドロップ




Shibuya, Tokyo

GUI designer




Shibuya, Tokyo

GUI designer

other: データソースをドラッグ＆ドロップ（必要に応じて作成）




Shibuya, Tokyo

event dispatch




Shibuya, Tokyo

event dispatch

ウィジェットをクリック: ウィジェットのイベント




Shibuya, Tokyo


event dispatch



Shibuya, Tokyo


event dispatch

データソースをクリック: データソースのイベント



Shibuya, Tokyo


event dispatch


datasource

widgetwidget

server

datasource



Shibuya, Tokyo


event dispatch


datasource

widgetwidget

server

datasource

addListener()

datasource



Shibuya, Tokyo


event dispatch


datasource

widgetwidget

server

datasource

addListener()

datasource

widget



Shibuya, Tokyo


event dispatch


datasource

widgetwidget

server

datasource

addListener()

datasource

widget

dispatch()



Shibuya, Tokyo


event dispatch

datasource

citiesEvent.onCurrentElementChange = function citiesEvent_onCurrentElementChange (event){ //console.log(this.id); sources.post.query("cityId == :1", this.id);};



Shibuya, Tokyo


event dispatch

datasource

citiesEvent.onCurrentElementChange = function citiesEvent_onCurrentElementChange (event){ console.log(this.id); sources.post.query("cityId == :1", this.id);};

datasource: datasourceの内部ではthis



Shibuya, Tokyo


event dispatch

datasource

dataGrid3.onRowClick = function dataGrid3_onRowClick (event){ console.log(this.source.id);};

datasource: widgetの内部ではthis.source



Shibuya, Tokyo


metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css

loader.js



Shibuya, Tokyo



loader.js

<meta name="WAF.catalog" content="Prefecture,City,Post"/><meta name="WAF.config.loadCSS" id="waf-interface-css" content="styles/index.css"/><meta name="WAF.config.loadCSS" id="waf-project-css" content="/application.css"/><meta name="WAF.config.datasources" data-type="dataSource" data-source-type="dataClass" data-source="Post" data-lib="WAF" data-id="post" data-dataType="string" data-autoLoad="true" content="post"/><meta name="WAF.config.datasources" data-type="dataSource" data-source-type="dataClass" data-source="Prefecture" data-lib="WAF" data-id="prefecture" data-dataType="string" data-autoLoad="true" content="prefecture"/><meta name="WAF.config.datasources" data-type="dataSource" data-source-type="dataClass" data-source="prefecture.prefecture_City" data-lib="WAF" data-id="cities" data-dataType="string" data-autoLoad="true" content="cities"/><meta name="WAF.config.loadJS" id="waf-script" content="scripts/index.js"/>



Shibuya, Tokyo

<!DOCTYPE html><html> <head> <title>plain</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="WAF.config.modules" content="dataprovider"/> <meta name="WAF.catalog" content="Prefecture,City,Post"/> </head> <body> <h1> lean and mean: catalog and dataprovider only! </h1> <script type="text/javascript" src="/waLib/WAF/Loader.js"></script> </body></html>

loader.js





Shibuya, Tokyo

loader.js





Shibuya, Tokyo

loader.js


waf-optimise.js: 2.68MB




Shibuya, Tokyo

<!DOCTYPE html><html> <head> <title>plain</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="WAF.config.modules" content="dataprovider"/> <meta name="WAF.catalog" content="Prefecture,City,Post"/> </head> <body> <h1> lean and mean: catalog and dataprovider only! </h1> <script type="text/javascript" src="/waLib/WAF/Loader.js"></script> </body></html>

loader.js





Shibuya, Tokyo

loader.js





Shibuya, Tokyo

loader.js


waf-optimise.js: 127KB




Shibuya, Tokyo

loader.js


.../Wakanda-Dynamic-Delivery-WD2.100-1028663.ja.html

http://doc.wakanda.org/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.ja.html


Shibuya, Tokyo

loader.js


.../Wakanda-Dynamic-Delivery-WD2.100-1028663.ja.html

WAK6 - Wakanda Dynamic Delivery (WD2)



Shibuya, Tokyo

Wakanda勉強会 #42013-08-27

presented by

wakanda#4

Business