Shibuya, Tokyo
Wakanda
presented by
勉強会 #4
2013-08-27
Shibuya, Tokyo
datasource
agenda
.../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: ...
Shibuya, Tokyo
browsers server
NoSQL object datastore
+
web server
+
Server Side JavaScript
Client Side JavaScript
+
WAF: ...
Shibuya, Tokyo
browsers server
NoSQL object datastore
+
web server
+
Server Side JavaScript
Client Side JavaScript
+
WAF: ...
Shibuya, Tokyo
browsers server
NoSQL object datastore
+
web server
+
Server Side JavaScript
Client Side JavaScript
+
WAF: ...
Shibuya, Tokyo
datasource
agenda
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
Shibuya, Tokyo
agenda
.../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html
widgetとサーバーのコミュニケーションをサポートするオ...
Shibuya, Tokyo
agenda
.../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html
widgetとサーバーのコミュニケーションをサポートするオ...
Shibuya, Tokyo
agenda
.../Wakanda-Studio-Reference-Guide/GUI-Designer-Datasources.200-987691.ja.html
widgetとサーバーのコミュニケーション...
Shibuya, Tokyo
GUI designer
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
Shibuya, Tokyo
GUI designer
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
Shibuya, Tokyo
GUI designer
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
Shibuya, Tokyo
GUI designer
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
Shibuya, Tokyo
<meta data-lib="WAF" name="WAF.config.datasources"
data-type="dataSource" data-source-type="dataClass"
data...
Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
common
data-id- unique da...
Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
ds class
data-id- unique ...
Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
relation
data-id- unique ...
Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
variable
data-id- unique ...
Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
array
data-id- unique dat...
Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
array
data-id- unique dat...
Shibuya, Tokyo
.../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
data source
object
data-id- unique da...
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"...
Shibuya, Tokyo
object datastore
model API (v4)
model = new DataStoreCatalog();
var city = model.addClass = ("CityCollectio...
Shibuya, Tokyo
http://doc.wakanda.org/Model/Working-with-the-Model-API-v5.200-995188.ja.html
v3 v4 v5
モデルエディターに表示 NO YES Y...
Shibuya, Tokyo
.../Datastore/Entity/Working-with-Entities.300-598913.en.html
new + object
create entity
var prefecture = n...
Shibuya, Tokyo
.../Datastore/Entity/Working-with-Entities.300-598913.en.html
new + assignment
var city = new ds.City();
ci...
Shibuya, Tokyo
.../Datastore/Entity/Working-with-Entities.300-598913.en.html
constructor
var post = ds.Post.createEntity()...
Shibuya, Tokyo
.../Datastore/Entity/Working-with-Entities.300-598913.en.html
constructor
var post = ds.Post.createEntity()...
Shibuya, Tokyo
.../Datastore-Model-Designer/Model.300-735558.ja.html
allow global access
create entity
modelまたはdataClassレベ...
Shibuya, Tokyo
.../Datastore-Model-Designer/Model.300-735558.ja.html
create entity
Shibuya, Tokyo
.../Datastore-Model-Designer/Model.300-735558.ja.html
create entity
Shibuya, Tokyo
.../Datastore-Model-Designer/Model.300-735558.ja.html
create entity
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 = WA...
Shibuya, Tokyo
http://doc.wakanda.org/Model/Working-with-the-Model-API-v5.200-995188.ja.html
GUI designer
Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html
preferences.json
desktop smartp...
Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html
{
"gui":{
themes : {
desktop: "...
Shibuya, Tokyo
GUI designer
.../GUI-Designer-Datasources/Datastore-Class-Datasources.300-661466.ja.html
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','ヒラギ...
Shibuya, Tokyo
GUI designer
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
Shibuya, Tokyo
GUI designer
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
Shibuya, Tokyo
GUI designer
datasource = datastore class: クラスをドラッグ&ドロップ
.../Datasource/Introduction/What-is-a-Datasource.3...
Shibuya, Tokyo
GUI designer
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
Shibuya, Tokyo
GUI designer
datasource = relation attribute: 属性をドラッグ&ドロップ
.../Datasource/Introduction/What-is-a-Datasource...
Shibuya, Tokyo
GUI designer
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
Shibuya, Tokyo
GUI designer
other: データソースをドラッグ&ドロップ(必要に応じて作成)
.../Datasource/Introduction/What-is-a-Datasource.300-607007....
Shibuya, Tokyo
event dispatch
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
Shibuya, Tokyo
event dispatch
ウィジェットをクリック: ウィジェットのイベント
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
データソースをクリック: データソースのイベント
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
widgetとサーバーのコミュニケーションをサポ...
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
widgetとサーバーのコミュニケーションをサポ...
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
widgetとサーバーのコミュニケーションをサポ...
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
widgetとサーバーのコミュニケーションをサポ...
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
datasource
citiesEvent.o...
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
datasource
citiesEvent.o...
Shibuya, Tokyo
.../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
event dispatch
datasource
dataGrid3.onR...
Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
loader.js
Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
loader.js
<meta ...
Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
loader.js
<meta ...
Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
loader.js
<meta ...
Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
loader.js
<meta ...
Shibuya, Tokyo
.../Hands-On-Example.200-875684.ja.html
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
loader.js
<meta ...
Shibuya, Tokyo
<!DOCTYPE html>
<html>
<head>
<title>plain</title>
<meta http-equiv="Content-Type" content="text/html;chars...
Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Hands-On-Example.200-875684.ja.html
Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
waf-optimise.js: 2.68MB
.../Hands-On-Example.2...
Shibuya, Tokyo
<!DOCTYPE html>
<html>
<head>
<title>plain</title>
<meta http-equiv="Content-Type" content="text/html;chars...
Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Hands-On-Example.200-875684.ja.html
Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
waf-optimise.js: 127KB
.../Hands-On-Example.20...
Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Wakanda-Dynamic-Delivery-WD2.100-1028663.j...
Shibuya, Tokyo
loader.js
metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css
.../Wakanda-Dynamic-Delivery-WD2.100-1028663.j...
Shibuya, Tokyo
Wakanda
勉強会 #4
2013-08-27
presented by
Upcoming SlideShare
Loading in …5
×

Wakanda#4

351
-1

Published on

sample solution and database posted on GitHub:

https://github.com/miyako/4d-training-wakanda-4

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
351
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wakanda#4

  1. 1. Shibuya, Tokyo Wakanda presented by 勉強会 #4 2013-08-27
  2. 2. Shibuya, Tokyo datasource agenda .../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
  3. 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. 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. 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. 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. 7. Shibuya, Tokyo datasource agenda .../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
  8. 8. Shibuya, Tokyo agenda .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widgetとサーバーのコミュニケーションをサポートするオブジェクト datasource
  9. 9. Shibuya, Tokyo agenda .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widgetとサーバーのコミュニケーションをサポートするオブジェクト datasource widgetwidget server datasource
  10. 10. Shibuya, Tokyo agenda .../Wakanda-Studio-Reference-Guide/GUI-Designer-Datasources.200-987691.ja.html widgetとサーバーのコミュニケーションをサポートするオブジェクト datasource widgetwidget server datasource event dispatch
  11. 11. Shibuya, Tokyo GUI designer .../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
  12. 12. Shibuya, Tokyo GUI designer .../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
  13. 13. Shibuya, Tokyo GUI designer .../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
  14. 14. Shibuya, Tokyo GUI designer .../Architecture-of-a-Wakanda-Solution/Datasources.200-990969.ja.html
  15. 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. 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. 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. 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. 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. 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. 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. 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. 23. Shibuya, Tokyo relational database relation
  24. 24. Shibuya, Tokyo object datastore relation attribute
  25. 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. 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. 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. 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. 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. 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. 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. 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. 33. Shibuya, Tokyo .../Datastore-Model-Designer/Model.300-735558.ja.html create entity
  34. 34. Shibuya, Tokyo .../Datastore-Model-Designer/Model.300-735558.ja.html create entity
  35. 35. Shibuya, Tokyo .../Datastore-Model-Designer/Model.300-735558.ja.html create entity
  36. 36. Shibuya, Tokyo .../Datastore-Model-Designer/Model.300-735558.ja.html create entity
  37. 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. 38. Shibuya, Tokyo http://doc.wakanda.org/Model/Working-with-the-Model-API-v5.200-995188.ja.html GUI designer
  39. 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. 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. 41. Shibuya, Tokyo GUI designer .../GUI-Designer-Datasources/Datastore-Class-Datasources.300-661466.ja.html
  42. 42. Shibuya, Tokyo GUI designer .../GUI-Designer-Datasources/Datastore-Class-Datasources.300-661466.ja.html
  43. 43. Shibuya, Tokyo application.css .waf-theme.lilac .waf-button.waf-role-Japanese-Button {ゴ ! font-family: 'メイリオ,'Meiryo','ヒラギノ角ゴro W3','Hiragino Kaku Gothic Pro','MSPゴシック,'MS PGothic',Osaka,sans-serif; } theme毎/widget-type毎のクラス GUI designer .../GUI-Designer-Widgets/Widget-Overview.300-306931.ja.html
  44. 44. Shibuya, Tokyo GUI designer .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  45. 45. Shibuya, Tokyo GUI designer .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  46. 46. Shibuya, Tokyo GUI designer datasource = datastore class: クラスをドラッグ&ドロップ .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  47. 47. Shibuya, Tokyo GUI designer .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  48. 48. Shibuya, Tokyo GUI designer datasource = relation attribute: 属性をドラッグ&ドロップ .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  49. 49. Shibuya, Tokyo GUI designer .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  50. 50. Shibuya, Tokyo GUI designer other: データソースをドラッグ&ドロップ(必要に応じて作成) .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  51. 51. Shibuya, Tokyo event dispatch .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  52. 52. Shibuya, Tokyo event dispatch ウィジェットをクリック: ウィジェットのイベント .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html
  53. 53. Shibuya, Tokyo .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html event dispatch
  54. 54. Shibuya, Tokyo .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html event dispatch データソースをクリック: データソースのイベント
  55. 55. Shibuya, Tokyo .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html event dispatch widgetとサーバーのコミュニケーションをサポートするオブジェクト datasource widgetwidget server datasource
  56. 56. Shibuya, Tokyo .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html event dispatch widgetとサーバーのコミュニケーションをサポートするオブジェクト datasource widgetwidget server datasource addListener() datasource
  57. 57. Shibuya, Tokyo .../Datasource/Introduction/What-is-a-Datasource.300-607007.ja.html event dispatch widgetとサーバーのコミュニケーションをサポートするオブジェクト datasource widgetwidget server datasource addListener() datasource widget
  58. 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. 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. 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. 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. 62. Shibuya, Tokyo .../Hands-On-Example.200-875684.ja.html metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css loader.js
  63. 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. 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. 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. 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. 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. 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. 69. Shibuya, Tokyo loader.js metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css .../Hands-On-Example.200-875684.ja.html
  70. 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. 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. 72. Shibuya, Tokyo loader.js metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css .../Hands-On-Example.200-875684.ja.html
  73. 73. Shibuya, Tokyo loader.js metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css waf-optimise.js: 127KB .../Hands-On-Example.200-875684.ja.html
  74. 74. Shibuya, Tokyo loader.js metaでモジュール群を指定 ▶ waf-optimise.js, waf-optimise.css .../Wakanda-Dynamic-Delivery-WD2.100-1028663.ja.html
  75. 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. 76. Shibuya, Tokyo Wakanda 勉強会 #4 2013-08-27 presented by

×