sample solution and database posted on GitHub: https://github.com/miyako/4d-training-wakanda-4

1. Shibuya, Tokyo
Wakanda
presented by
勉強会 #4
2013-08-27

2. Shibuya, Tokyo
datasource
agenda
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

3. Shibuya, Tokyo
browsers server
NoSQL object datastore
+
web server
+
Server Side JavaScript
Client Side JavaScript
+
WAF: datasource (widgets)
+
WAF: dataprovider (REST)
datasource
agenda
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

4. Shibuya, Tokyo
browsers server
NoSQL object datastore
+
web server
+
Server Side JavaScript
Client Side JavaScript
+
WAF: datasource (widgets)
+
WAF: dataprovider (REST)
datasource
agenda
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

5. Shibuya, Tokyo
browsers server
NoSQL object datastore
+
web server
+
Server Side JavaScript
Client Side JavaScript
+
WAF: datasource (widgets)
+
WAF: dataprovider (REST)
datasource
agenda
async
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

6. Shibuya, Tokyo
browsers server
NoSQL object datastore
+
web server
+
Server Side JavaScript
Client Side JavaScript
+
WAF: datasource (widgets)
+
WAF: dataprovider (REST)
datasource
agenda
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

7. Shibuya, Tokyo
datasource
agenda
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

8. Shibuya, Tokyo
agenda
.../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html
widgetとサーバーのコミュニケーションをサポートするオブジェクト
datasource

9. Shibuya, Tokyo
agenda
.../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html
widgetとサーバーのコミュニケーションをサポートするオブジェクト
datasource
widgetwidget
server
datasource

10. Shibuya, Tokyo
agenda
.../Wakanda-Studio-Reference-Guide/GUI-Designer-Datasources.200-987691.ja.html
widgetとサーバーのコミュニケーションをサポートするオブジェクト
datasource
widgetwidget
server
datasource
event dispatch

11. Shibuya, Tokyo
GUI designer
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

12. Shibuya, Tokyo
GUI designer
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

13. Shibuya, Tokyo
GUI designer
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

14. Shibuya, Tokyo
GUI designer
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html

15. 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" />
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
page

16. Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
common
data-id- unique data-source
data-lib- 'WAF'
name- 'WAF.config.datasources'
data-type- {JavaScript}
data-source-type- 'dataClass', 'scalar', 'array', 'object'

17. Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
ds class
data-id- unique data-source
data-lib- 'WAF' data-initialQueryString
name- 'WAF.config.datasources' data-initialOrderBy
data-type- {MyClass} data-scope- 'global', 'local'
data-source-type- 'dataClass'
data-autoload- 'true', 'false'

18. Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
relation
data-id- unique data-source
data-lib- 'WAF' data-initialQueryString
name- 'WAF.config.datasources' data-initialOrderBy
data-type- {myClass.myRelation} data-scope- 'global', 'local'
data-source-type- 'dataClass'
data-autoload- 'true', 'false'

19. Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
variable
data-id- unique data-source
data-lib- 'WAF' data-initialQueryString
name- 'WAF.config.datasources' data-initialOrderBy
data-type- {myVariable} data-scope- 'global', 'local'
data-source-type- 'scalar'
data-dataType- string, boolean, date, number
data-autoload- 'true', 'false'

20. Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
array
data-id- unique data-source
data-lib- 'WAF' data-initialQueryString
name- 'WAF.config.datasources' data-initialOrderBy
data-type- {myArray} data-scope- 'global', 'local'
data-source-type- 'array' data-attributes
data-dataType- string, boolean, date, number
data-autoload- 'true', 'false'

21. Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
array
data-id- unique data-source
data-lib- 'WAF' data-initialQueryString
name- 'WAF.config.datasources' data-initialOrderBy
data-type- {myArray} data-scope- 'global', 'local'
data-source-type- 'array' data-attributes
data-dataType- string, boolean, date, number
data-autoload- 'true', 'false'
WAK6 - query(), filterQuery(), primary key サポート

22. Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
object
data-id- unique data-source
data-lib- 'WAF' data-initialQueryString
name- 'WAF.config.datasources' data-initialOrderBy
data-type- {myObject} data-scope- 'global', 'local'
data-source-type- 'object' data-attributes
data-dataType- string, boolean, date, number
data-autoload- 'true', 'false'

23. Shibuya, Tokyo
relational database
relation

24. Shibuya, Tokyo
object datastore
relation attribute

25. 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");

26. 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");

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

28. 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();

29. Shibuya, Tokyo
.../Datastore/Entity/Working-with-Entities.300-598913.en.html
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

30. Shibuya, Tokyo
.../Datastore/Entity/Working-with-Entities.300-598913.en.html
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

31. Shibuya, Tokyo
.../Datastore/Entity/Working-with-Entities.300-598913.en.html
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

32. 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();
}

33. Shibuya, Tokyo
.../Datastore-Model-Designer/Model.300-735558.ja.html
create entity

34. Shibuya, Tokyo
.../Datastore-Model-Designer/Model.300-735558.ja.html
create entity

35. Shibuya, Tokyo
.../Datastore-Model-Designer/Model.300-735558.ja.html
create entity

36. Shibuya, Tokyo
.../Datastore-Model-Designer/Model.300-735558.ja.html
create entity

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

38. Shibuya, Tokyo
http://doc.wakanda.org/Model/Working-with-the-Model-API-v5.200-995188.ja.html
GUI designer

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

40. 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}AppDataRoamingWakanda Studio
designer preferences

41. Shibuya, Tokyo
GUI designer
.../GUI-Designer-Datasources/Datastore-Class-Datasources.300-661466.ja.html

42. Shibuya, Tokyo
GUI designer
.../GUI-Designer-Datasources/Datastore-Class-Datasources.300-661466.ja.html

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

44. Shibuya, Tokyo
GUI designer
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

45. Shibuya, Tokyo
GUI designer
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

46. Shibuya, Tokyo
GUI designer
datasource = datastore class: クラスをドラッグ＆ドロップ
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

47. Shibuya, Tokyo
GUI designer
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

48. Shibuya, Tokyo
GUI designer
datasource = relation attribute: 属性をドラッグ＆ドロップ
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

49. Shibuya, Tokyo
GUI designer
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

50. Shibuya, Tokyo
GUI designer
other: データソースをドラッグ＆ドロップ（必要に応じて作成）
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

51. Shibuya, Tokyo
event dispatch
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

52. Shibuya, Tokyo
event dispatch
ウィジェットをクリック: ウィジェットのイベント
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html

53. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch

54. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
データソースをクリック: データソースのイベント

55. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
widgetとサーバーのコミュニケーションをサポートするオブジェクト
datasource
widgetwidget
server
datasource

56. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
widgetとサーバーのコミュニケーションをサポートするオブジェクト
datasource
widgetwidget
server
datasource
addListener()
datasource

57. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
widgetとサーバーのコミュニケーションをサポートするオブジェクト
datasource
widgetwidget
server
datasource
addListener()
datasource
widget

58. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
widgetとサーバーのコミュニケーションをサポートするオブジェクト
datasource
widgetwidget
server
datasource
addListener()
datasource
widget
dispatch()

59. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
datasource
citiesEvent.onCurrentElementChange = function
citiesEvent_onCurrentElementChange (event)
{
//console.log(this.id);
sources.post.query("cityId == :1", this.id);
};

60. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
datasource
citiesEvent.onCurrentElementChange = function
citiesEvent_onCurrentElementChange (event)
{
console.log(this.id);
sources.post.query("cityId == :1", this.id);
};
datasource: datasourceの内部ではthis

61. Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
datasource
dataGrid3.onRowClick = function dataGrid3_onRowClick (event)
{
console.log(this.source.id);
};
datasource: widgetの内部ではthis.source

62. Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
loader.js

63. Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
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"/>

64. Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
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"/>

65. Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
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"/>

66. Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
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"/>

67. Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
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"/>

68. 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
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Hands-On-Example.200-875684.ja.html

69. Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Hands-On-Example.200-875684.ja.html

70. Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
waf-optimise.js: 2.68MB
.../Hands-On-Example.200-875684.ja.html

71. 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
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Hands-On-Example.200-875684.ja.html

72. Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Hands-On-Example.200-875684.ja.html

73. Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
waf-optimise.js: 127KB
.../Hands-On-Example.200-875684.ja.html

74. Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Wakanda-Dynamic-Delivery-WD2.100-1028663.ja.html

75. Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Wakanda-Dynamic-Delivery-WD2.100-1028663.ja.html
WAK6 - Wakanda Dynamic Delivery (WD2)

76. Shibuya, Tokyo
Wakanda
勉強会 #4
2013-08-27
presented by