1. Shibuya, Tokyo
Wakanda
presented by
勉強会 #5
2013-10-8

2. Shibuya, Tokyo
Wakanda 6
agenda
http://www.wakanda.org/roadmap

3. Shibuya, Tokyo
design
studio enhancements

4. Shibuya, Tokyo
design
studio enhancements
ページ間のコピー＆ペースト

5. Shibuya, Tokyo
design
studio enhancements
ページ間のコピー＆ペースト
足りない重要ファイルを赤字で強調

6. Shibuya, Tokyo
design
studio enhancements
ページ間のコピー＆ペースト
足りない重要ファイルを赤字で強調

7. Shibuya, Tokyo
design
studio enhancements
ページ間のコピー＆ペースト
足りない重要ファイルを赤字で強調
z-order

8. Shibuya, Tokyo
design
studio enhancements
ページ間のコピー＆ペースト
足りない重要ファイルを赤字で強調
WAK5
WAK6
z-order

9. Shibuya, Tokyo
video
widget
~WAK4
WAK5~

10. v5
YES
YES
Shibuya, Tokyo
video
widget

11. v5 v6
YES YES
YES YES
NO YES
NO YES
Shibuya, Tokyo
video
mp4, webm, ogg: 相対ファイルパスまたはURLで指定
widget

12. Shibuya, Tokyo
video
http://doc.wakanda.org/Widgets-API/Video/playerReady.304-1026828.en.html
On Load Progress
On Start Playing
On End Playing
On Pause
On Duration Change
On Time Update
On Error
widget

13. Shibuya, Tokyo
video
http://doc.wakanda.org/Widgets-API/Video/playerReady.304-1026828.en.html
On Load Progress On Player Ready+ WAK6
On Start Playing
On End Playing
On Pause
On Duration Change
On Time Update
On Error
widget

14. Shibuya, Tokyo
events
calendar text input
canvas menu bar
checkbox navigation view
combo box select
image section
radio button group split view
slide switch
text
widget

15. Shibuya, Tokyo
calendar
On Show On Mouse Move
On Before Show On Mouse Out
On Hide On Mouse Over
On Change On Mouse Up
On Click
On Double Click
On Mouse Down
widget

16. Shibuya, Tokyo
calendar
On Show On Mouse Move
On Before Show On Mouse Out
On Hide On Mouse Over
On Change On Mouse Up
On Click
On Double Click
On Mouse Down
widget

17. Shibuya, Tokyo
canvas
On Click On Touch Cancel
On Double Click On Touch End
On Mouse Down On Touch Start
On Mouse Move
On Mouse Out
On Mouse Over
On Mouse Up
widget

18. Shibuya, Tokyo
canvas
On Click On Touch Cancel
On Double Click On Touch End
On Mouse Down On Touch Start
On Mouse Move On Touch Move + WAK6
On Mouse Out
On Mouse Over
On Mouse Up
widget

19. Shibuya, Tokyo
checkbox
On Blur On Mouse Over
On Change On Mouse Up
On Focus
On Click
On Mouse Down
On Mouse Move
On Mouse Out
widget

20. Shibuya, Tokyo
checkbox
On Blur On Mouse Over
On Change On Mouse Up
On Focus
On Click
On Mouse Down
On Mouse Move
On Mouse Out
widget

21. Shibuya, Tokyo
combo box
On Blur On Mouse Over
On Change On Mouse Up
On Focus
On Click
On Mouse Down
On Mouse Move
On Mouse Out
widget

22. Shibuya, Tokyo
combo box
On Blur On Mouse Over
On Change On Mouse Up
On Focus
On Click
On Mouse Down
On Mouse Move
On Mouse Out
widget

23. Shibuya, Tokyo
image
On Click On Touch Cancel
On Double Click On Touch End
On Mouse Down On Touch Start
On Mouse Move
On Mouse Out
On Mouse Over
On Mouse Up
widget

24. Shibuya, Tokyo
image
On Click On Touch Cancel
On Double Click On Touch End
On Mouse Down On Touch Start
On Mouse Move On Touch Move + WAK6
On Mouse Out
On Mouse Over
On Mouse Up
widget

25. Shibuya, Tokyo
radio button group
On Blur On Mouse Over
On Change On Mouse Up
On Focus
On Click
On Mouse Down
On Mouse Move
On Mouse Out
widget

26. Shibuya, Tokyo
On Blur On Mouse Over
On Change On Mouse Up
On Focus
On Click
On Mouse Down
On Mouse Move
On Mouse Out
widget
radio button group

27. Shibuya, Tokyo
slide
On Touch Cancel On Change
On Touch End On Stop
On Touch Move
On Touch Start
On Create
On Start
On Slide
widget

28. Shibuya, Tokyo
slide
On Touch Cancel On Change
On Touch End On Stop
On Touch Move
On Touch Start
On Create
On Start
On Slide
widget

29. Shibuya, Tokyo
text
On Blur On Mouse Out On Touch End
On Change On Mouse Over On Touch Start
On Focus On Mouse Up
On Click On Key Up
On Double Click On Key Down
On Mouse Down On Select
On Mouse Move On Touch Cancel
widget

30. Shibuya, Tokyo
text
On Blur On Mouse Out On Touch End
On Change On Mouse Over On Touch Start
On Focus On Mouse Up
On Click On Key Up
On Double Click On Key Down
On Mouse Down On Select
On Mouse Move On Touch Cancel
widget

31. Shibuya, Tokyo
text input
On Blur On Mouse Out On Touch End
On Change On Mouse Over On Touch Start
On Focus On Mouse Up
On Click On Key Up
On Double Click On Key Down
On Mouse Down On Select
On Mouse Move On Touch Cancel
widget

32. Shibuya, Tokyo
text input
On Blur On Mouse Out On Touch End
On Change On Mouse Over On Touch Start
On Focus On Mouse Up
On Click On Key Up
On Double Click On Key Down
On Mouse Down On Select
On Mouse Move On Touch Cancel
widget

33. Shibuya, Tokyo
menu bar
On Click
On Mouse Down
On Mouse Move
On Mouse Out
On Mouse Over
On Mouse Up
widget

34. Shibuya, Tokyo
menu bar
On Click On Touch End + WAK6
On Mouse Down On Touch Start + WAK6
On Mouse Move
On Mouse Out
On Mouse Over
On Mouse Up
On Touch Cancel + WAK6
widget

35. Shibuya, Tokyo
navigation view
On Click
On Double Click
On Mouse Down
On Mouse Move
On Mouse Out
On Mouse Over
On Mouse Up
widget

36. Shibuya, Tokyo
navigation view
On Click On Touch Cancel + WAK6
On Double Click On Touch End + WAK6
On Mouse Down On Touch Move + WAK6
On Mouse Move On Touch Start + WAK6
On Mouse Out
On Mouse Over
On Mouse Up
widget

37. Shibuya, Tokyo
split view
On Click
On Double Click
On Mouse Down
On Mouse Move
On Mouse Out
On Mouse Over
On Mouse Up
widget

38. Shibuya, Tokyo
split view
On Click
On Double Click
On Mouse Down
On Mouse Move
On Mouse Out
On Mouse Over
On Mouse Up
widget

39. Shibuya, Tokyo
select
On Blur On Mouse Over
On Change On Mouse Up
On Focus
On Click
On Mouse Down
On Mouse Move
On Mouse Out
widget

40. Shibuya, Tokyo
select
On Blur On Mouse Over
On Change On Mouse Up
On Focus On Touch Cancel + WAK6
On Click On Touch End + WAK6
On Mouse Down On Touch Start + WAK6
On Mouse Move
On Mouse Out
widget

41. Shibuya, Tokyo
section
On Click
On Double Click
On Mouse Down
On Mouse Move
On Mouse Out
On Mouse Over
On Mouse Up
widget

42. Shibuya, Tokyo
section
On Click On Touch Cancel + WAK6
On Double Click On Touch End + WAK6
On Mouse Down On Touch Move + WAK6
On Mouse Move On Touch Start + WAK6
On Mouse Out
On Mouse Over
On Mouse Up
widget

43. Shibuya, Tokyo
switch
On Click On Touch End
On Mouse Down On Touch Start
On Mouse Move On Touch Move
On Mouse Out
On Mouse Over
On Mouse Up
On Touch Cancel
widget

44. Shibuya, Tokyo
switch
On Click On Touch End
On Mouse Down On Touch Start
On Mouse Move On Touch Move
On Mouse Out
On Mouse Over
On Mouse Up
On Touch Cancel
widget

45. Shibuya, Tokyo
wakanda dynamic delivery
WD2
page配信の新しい仕組み
WAF optimiserモデルに代わるもの
http://forum.wakanda.org/forumdisplay.php?37-Wakanda-Dynamic-Delivery
pageを実行するために必要な最少限のコンテンツを配信
ネットワーク・トラフィック量を抑制（モバイル対策）
ライブラリに追加されたウィジェット・テーマの総数に影響されない
page毎のマニフェストファイル (package.json)
ダイナミック・ローダー: minify版のライブラリを都度ビルド
ダイナミック・キャッシュ: minify版のライブラリを再利用（デフォルト）
/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

46. Shibuya, Tokyo
wakanda dynamic delivery
WD2
http://forum.wakanda.org/forumdisplay.php?37-Wakanda-Dynamic-Delivery
WAF optimiser 100
ダイナミック・ローダー 50
ダイナミック・キャッシュ 25
page配信の新しい仕組み
WAF optimiserモデルに代わるもの
page読み込み時間
/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

47. Shibuya, Tokyo
wakanda dynamic delivery
WD2
http://forum.wakanda.org/forumdisplay.php?37-Wakanda-Dynamic-Delivery
page配信の新しい仕組み
WAF optimiserモデルに代わるもの
後方互換性
WAF optimiserモデルの使用を継続（既存・新ページ）
WD2に移行（既存ページを変換）
既存ページはWAF optimiserモデル，新ページはWD2（デフォルト）
/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

48. Shibuya, Tokyo
preferences.json
{
"gui":{
"wd2": {
"migrate": false,
"create": false
}
}
}
Library/Application Support/Wakanda Studio/
C:Users{userName}AppDataRoamingWakanda Studio
WAF optimiserモデルの使用を継続（既存・新ページ）
WD2に移行（既存ページを変換）
既存ページはWAF optimiserモデル，新ページはWD2（デフォルト）
WD2
/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

49. Shibuya, Tokyo
preferences.json
{
"gui":{
"wd2": {
"migrate": true,
"create": true
}
}
}
Library/Application Support/Wakanda Studio/
C:Users{userName}AppDataRoamingWakanda Studio
WAF optimiserモデルの使用を継続（既存・新ページ）
WD2に移行（既存ページを変換）
既存ページはWAF optimiserモデル，新ページはWD2（デフォルト）
WD2
/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

50. Shibuya, Tokyo
preferences.json
{
"gui":{
"wd2": {
"migrate": false,
"create": true
}
}
}
Library/Application Support/Wakanda Studio/
C:Users{userName}AppDataRoamingWakanda Studio
WAF optimiserモデルの使用を継続（既存・新ページ）
WD2に移行（既存ページを変換）
既存ページはWAF optimiserモデル，新ページはWD2（デフォルト）
WD2
/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

51. Shibuya, Tokyo
/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html
migrate: true
WD2
<meta name="WAF.packageJson"/>
{page}.waPage/index.package.json
既存のpageをWakanda 6で開けば自動的にタグが追加される
タグの追加されたpageを保存すれば自動的にファイルが作成される

52. Shibuya, Tokyo
/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html
package.json
WD2
{
"name": "Untitled1/Untitled1.waPage/index.html",
"version": "1.0.0",
"loadDependencies": [{
"id": "lilac",
"type": "theme"
}, {
"id": "Untitled1.waPage/styles/index.css",
"path": "WEBFOLDER",
"type": "style"
}, {
"id": "application.css",
"path": "WEBFOLDER",
"type": "style"
}]
}

53. Shibuya, Tokyo
/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html
package.json
WD2
{
"name": "Untitled1/Untitled1.waPage/index.html",
"version": "1.0.0",
"loadDependencies": [{
"id": "lilac",
"type": "theme"
}, {
"id": "Untitled1.waPage/styles/index.css",
"path": "WEBFOLDER",
"type": "style"
}, {
"id": "application.css",
"path": "WEBFOLDER",
"type": "style"
}]
}
WEBFOLDER
WIDGETS_CUSTOM
THEMES_CUSTOM
バーチャル・ファイルシステム

54. Shibuya, Tokyo
/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html
package.json
WD2
{
"name": "Untitled1/Untitled1.waPage/index.html",
"version": "1.0.0",
"loadDependencies": [{
"id": "lilac",
"type": "theme"
}, {
"id": "Untitled1.waPage/styles/index.css",
"path": "WEBFOLDER",
"type": "style"
}, {
"id": "application.css",
"path": "WEBFOLDER",
"type": "style"
}]
}
path省略: WAFパッケージ

55. Shibuya, Tokyo
/Configuration-and-Settings-Files/Project-Settings-File.300-684392.en.html
builder handler service
WD2
<?xml version="1.0" encoding="UTF-8"?><settings>
" <project />
" <http />
" <service name="webApp" />
" <service name="rpc" />
" <service name="dataStore" />
" <service name="upload" ... />
" <service name="Git HTTP Service" />
" <service
" " name="Builder handler"
" " modulePath="services/builder-service"
" " enabled="true"
" " max-age="0"
" " hardCache="false" />
" <virtualFolder location="/WIDGETS_CUSTOM/" name="widgets-custom" />
" <virtualFolder location="/THEMES_CUSTOM/" name="themes-custom" />
" <resources />
" <javaScript />
</settings>
{project}/Settings.waSettings

56. Shibuya, Tokyo
/Configuration-and-Settings-Files/Project-Settings-File.300-684392.en.html
builder handler service
WD2
<?xml version="1.0" encoding="UTF-8"?><settings>
" <project />
" <http />
" <service name="webApp" />
" <service name="rpc" />
" <service name="dataStore" />
" <service name="upload" ... />
" <service name="Git HTTP Service" />
" <service
" " name="Builder handler"
" " modulePath="services/builder-service"
" " enabled="true"
" " max-age="0"
" " hardCache="false" />
" <virtualFolder location="/WIDGETS_CUSTOM/" name="widgets-custom" />
" <virtualFolder location="/THEMES_CUSTOM/" name="themes-custom" />
" <resources />
" <javaScript />
</settings>
{project}/Settings.waSettings

57. Shibuya, Tokyo
/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html
WD2

58. Shibuya, Tokyo
/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html
WD2

59. Shibuya, Tokyo
/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html
WD2
wakanda dynamic delivery
セットアップ
meta name="WAF.packageJson"
index.package.json
service name="Builder handler"{ }
-desktop~waf-build.js?useReferer=1
-desktop~waf-build.css?useReferer=1/waf-optimize.js
waf-optimize.css

60. Shibuya, Tokyo
/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html
WD2
wakanda dynamic delivery
http://127.0.0.1:8081/index.waPage/index.html?debug=1
minifyしないで個別にファイルを送信
http://127.0.0.1:8081/waf-reset-build-cache
cacheをクリア
http://127.0.0.1:8081/waf-reset-build-cache?minifyCores=1
cacheをクリア+次に備えてコア・ライブラリをminify

61. Shibuya, Tokyo
send files
XHR
var res;
var file = File(ds.getModelFolder().path + "/Resources/sample.png");
xhr = new XMLHttpRequest();
xhr.open('PUT', "http://httpbin.org/put");
xhr.setRequestHeader('Content-Type', "image/png");
xhr.onreadystatechange = function() {
" var state = this.readyState;
if (state == 4) {
res = 'response: ' + this.responseText;
}
}
xhr.send(file);
res;
WAK5: send(String data)
WAK6: send(String| File data)
/XMLHttpRequest/XMLHttpRequest-Instances-Requests/send.301-867462.en.html

62. Shibuya, Tokyo
send files
XHR
var res;
var file = File(ds.getModelFolder().path + "/Resources/sample.png");
xhr = new XMLHttpRequest();
xhr.open('PUT', "http://httpbin.org/put");
xhr.setRequestHeader('Content-Type', "image/png");
xhr.onreadystatechange = function() {
" var state = this.readyState;
if (state == 4) {
res = 'response: ' + this.responseText;
}
}
xhr.send(file);
res;
/XMLHttpRequest/XMLHttpRequest-Instances-Requests/send.301-867462.en.html
ds.getDataFolder(); // data folder
ds.getModelFolder(); // waModel folder
getFolder(); // waProject folder
getWalibFolder(); // Wakanda Server.app/Contents/walib/

63. Shibuya, Tokyo
send files
XHR
var res;
var file = File(ds.getModelFolder().path + "/Resources/sample.png");
xhr = new XMLHttpRequest();
xhr.open('PUT', "http://httpbin.org/put");
xhr.setRequestHeader('Content-Type', "image/png");
xhr.onreadystatechange = function() {
" var state = this.readyState;
if (state == 4) {
res = 'response: ' + this.responseText;
}
}
xhr.send(file);
res;
/XMLHttpRequest/XMLHttpRequest-Constructor.201-867268.en.html
send() : サーバーサイドは同期通信のみ
Content-Type : バイナリデータは指定

64. Shibuya, Tokyo
send files
XHR
var res;
var file = File(ds.getModelFolder().path + "/Resources/sample.png");
xhr = new XMLHttpRequest();
xhr.open('PUT', "http://httpbin.org/put");
xhr.setRequestHeader('Content-Type', "image/png");
xhr.onreadystatechange = function() {
" var state = this.readyState;
if (state == 4) {
res = 'response: ' + this.responseText;
}
}
xhr.send(file);
res;
/XMLHttpRequest/XMLHttpRequest-Constructor.201-867268.en.html
httpbin : クライアントのテストに便利

65. Shibuya, Tokyo
send files
XHR
var res;
var file = File(ds.getModelFolder().path + "/Resources/sample.png");
xhr = new XMLHttpRequest();
xhr.open('PUT', "http://httpbin.org/put");
xhr.setRequestHeader('Content-Type', "image/png");
xhr.onreadystatechange = function() {
" var state = this.readyState;
if (state == 4) {
res = 'response: ' + this.responseText;
}
}
xhr.send(file);
res;
/XMLHttpRequest/XMLHttpRequest-Constructor.201-867268.en.html
0 // UNSET
1 // OPENED
2 // HEADERS_RECEIVED
3 // LOADING
4 // DONE

66. Shibuya, Tokyo
push event
/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html
https://github.com/AMorgaut/wakanda-eventsource
event source
http://caniuse.com/#search=eventsource
（絶え間なく要求する代わりに）サーバーからデータを連続的に送信する仕組み
Internet Explorer < 10 : pollyfillで対応
https://github.com/Yaffle/EventSource
http://www.w3.org/TR/eventsource/
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html

67. Shibuya, Tokyo
push event
/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html
event source
（絶え間なく要求する代わりに）サーバーからデータを連続的に送信する仕組み
pro con
polling basic ajax HTTP overhead
long polling infinite iframe hack
WebSocket API full duplex special protocol
EventSource no special protocol not full duplex

68. Shibuya, Tokyo
push event
/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html
event source
require('wakanda-eventsource').start();
require('wakanda-eventsource').push('message');

69. Shibuya, Tokyo
push event
/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html
event source
require('wakanda-eventsource').start();
require('wakanda-eventsource').pushEvent({
'customEventName',
'message'
});

70. Shibuya, Tokyo
push event
/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html
event source
require('wakanda-eventsource').start();
require('wakanda-eventsource').pushEvent(
'customEventName',
messageObject,
true // encode in JSON
);

71. Shibuya, Tokyo
push event
/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html
event source
var sse = new EventSource('/eventsource');
sse.onmessage = function onservermessage(event) {
console.log(event)
};

72. Shibuya, Tokyo
evaluate JS
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [script_path]

73. Shibuya, Tokyo
evaluate JS
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [script_path]
serverを起動

74. Shibuya, Tokyo
evaluate JS
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [script_path]
serverを起動
scriptを評価: solution, projectに依存しないAPI

75. Shibuya, Tokyo
evaluate JS
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [script_path]
serverを起動
scriptを評価: solution, projectに依存しないAPI
consoleにメッセージを出力

76. Shibuya, Tokyo
evaluate JS
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [script_path]
serverを起動
scriptを評価: solution, projectに依存しないAPI
consoleにメッセージを出力
console.info("info");
console.log("log");
console.error("error");
console.warn("warn");

77. Shibuya, Tokyo
evaluate JS
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [script_path]
serverを起動
scriptを評価: solution, projectに依存しないAPI
返り値: null
consoleにメッセージを出力
console.info("info");
console.log("log");
console.error("error");
console.warn("warn");

78. Shibuya, Tokyo
evaluate JS
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [script_path]
serverを起動
scriptを評価: solution, projectに依存しないAPI
返り値: null
serverを終了
consoleにメッセージを出力
console.info("info");
console.log("log");
console.error("error");
console.warn("warn");

79. Shibuya, Tokyo
launch solution
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [solution_path]
--admin-port=http_port_number [default=8080]
--admin-ssl-port=http_port_number [default=4433]
--admin-password=password

80. Shibuya, Tokyo
launch solution
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [solution_path]
--admin-port=http_port_number [default=8080]
--admin-ssl-port=http_port_number [default=4433]
--admin-password=password
--debug-off
WAK4~

81. Shibuya, Tokyo
launch solution
command line
/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
Wakanda Server.exe
wakanda_server_name [solution_path]
--admin-port=http_port_number [default=8080]
--admin-ssl-port=http_port_number [default=4433]
--admin-password=password
--debug-off
--debugger=remote
--debugger=wakanda
--debugger=none [default=none]
--syslog
WAK5~

82. Shibuya, Tokyo
launch solution
command line
/Launching-Wakanda-Server-using-a-Command-Line.300-583228.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
wakanda_server_name [solution_path]
--admin-port=http_port_number [default=8080]
--admin-ssl-port=http_port_number [default=4433]
--admin-password=password
--debug-off
--debugger=remote
--debugger=wakanda
--debugger=none [default=none]
--syslog
WAK5~
{solutionPath}/Logs/Untitled_log_1.txt: と同じ内容をシステムログに記録

83. Shibuya, Tokyo
launch solution
command line
/Launching-Wakanda-Server-using-a-Command-Line.300-583228.en.html
Wakanda Server.app/Contents/MacOS/Wakanda Server
wakanda_server_name [solution_path]
--admin-port=http_port_number [default=8080]
--admin-ssl-port=http_port_number [default=4433]
--admin-password=password
--debug-off
--debugger=remote
--debugger=wakanda
--debugger=none [default=none]
--syslog
WAK5~
sudo nano /etc/syslog.conf
user.* /var/log/user.log
{solutionPath}/Logs/Untitled_log_1.txt: と同じ内容をシステムログに記録

84. Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html
designer
preferences.json
{
"gui":{
"dataGrid": {
"maxColumnDisplay": 10,
"maxColumnCreate": 10
},
"autoForm": {
"maxAttributeDisplay": 10,
"maxAttributeCreate": 10
}
"formGenerator": {
"maxAttribute": 10
}
}
}
Library/Application Support/Wakanda Studio/
C:Users{userName}AppDataRoamingWakanda Studio

85. Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html
designer
preferences.json
{
"gui":{
snapping : {
magneticGrid : {
automaticallyActive : true,
onlySnapToSiblings : true,
color : "red"
}
}
}
}
Library/Application Support/Wakanda Studio/
C:Users{userName}AppDataRoamingWakanda Studio
WAK5~

86. Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html
designer
preferences.json
{
"gui":{
themes : {
desktop: "lilac",
smartphone: "cupertino",
tablet: "cupertinoIpad"
}
}
}
Library/Application Support/Wakanda Studio/
C:Users{userName}AppDataRoamingWakanda Studio
WAK5~

87. Shibuya, Tokyo
Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html
desktop smartphone tablet
default cupertino cupertino
metal cupertinoIpad cupertinoIpad
lilac
light
softGray
designer preferences
predefined themes

88. Shibuya, Tokyo
custom themes
themes
/Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Theme.300-1024435.en.html
Users/{userName}/Documents/Wakanda/Themes/{themeName}/
C:Users{userName}DocumentsWakandaThemes{themeName}
既存theme複製
新規theme作成
or
or
コミュニティthemeインストール
http://doc.wakanda.org/Wakanda0.v6/help/Title/en/page3906.html

89. Shibuya, Tokyo
custom themes
themes
/Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Theme.300-1024435.en.html

90. Shibuya, Tokyo
custom widget
widget
/Users/{userName}/Documents/Wakanda/Widgets/
C:Users{userName}DocumentsWakandaWidgets
/Architecture-of-Wakanda-Applications/Custom-Widget.200-1024545.en.html
css- folder スタイルシート
designer.js プロパティリスト，デザインスクリプト
icons- folder アイコン
package.json ファイル構成
widget.js ランタイムスクリプト

91. Shibuya, Tokyo
custom widget
widget
/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html
メリット:

92. Shibuya, Tokyo
custom widget
widget
/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html
studioでドラッグ＆ドロップ
studioでプレビュー
studioでプロパティ設定
studioでイベント設定
studioでスタイル設定
他ajaxフレームワークをdataSourceにバインド
メリット:

93. Shibuya, Tokyo
custom widget
widget
/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html
メリット:

94. Shibuya, Tokyo
custom widget
widget
/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html
studioでドラッグ＆ドロップ
studioでプレビュー
studioでプロパティ設定
studioでイベント設定
studioでスタイル設定
他ajaxフレームワークをdataSourceにバインド
メリット:

95. Shibuya, Tokyo
custom widget
widget
/Installing-Wakanda/Libraries-and-Plug-ins-Loaded-by-WAF.200-734790.en.html
メリット:
included in WAF included in WAF

96. Shibuya, Tokyo
custom widget
widget
/Installing-Wakanda/Libraries-and-Plug-ins-Loaded-by-WAF.200-734790.en.html
studioでドラッグ＆ドロップ
studioでプレビュー
studioでプロパティ設定
studioでイベント設定
studioでスタイル設定
他ajaxフレームワークをdataSourceにバインド
メリット:
included in WAF included in WAF

97. Shibuya, Tokyo
widget
/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html

98. Shibuya, Tokyo
widget
/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html

99. Shibuya, Tokyo
widget
/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html
名前の先頭は大文字 widget = JavaScriptクラス

100. Shibuya, Tokyo
widget
/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html
名前の先頭は大文字 widget = JavaScriptクラス

101. Shibuya, Tokyo
designer web inspector
widget
{Wakanda Studio}/Contents/Resources/default.waPreferences
{Wakanda Studio}/../Resources/default.waPreferences
<preferences>
<com.wakanda>
<debugging web_inspector="false"/>
<MDIColor alpha="255" blue="171" green="171" red="171"/>
<general serverPath =""/>
<outline sorting="byName"/>
<outline lightMode="true"/>
...
</com.wakanda>
</preferences>

102. Shibuya, Tokyo
designer web inspector
widget
{Wakanda Studio}/Contents/Resources/default.waPreferences
{Wakanda Studio}/../Resources/default.waPreferences
default.waPreferences
<preferences>
<com.wakanda>
<debugging web_inspector="false"/>
<general defaultSolutionFolder="Macintosh HD:Users:miyako:Desktop:"
createGIT="false" createBlankProject="true"/>
<solutionExplorer defaultPage="1"/>
<method_editor></method_editor>
</com.wakanda>
</preferences>

103. Shibuya, Tokyo
designer web inspector
widget
<preferences>
<com.wakanda>
<debugging web_inspector="true"/>
<general defaultSolutionFolder="Macintosh HD:Users:miyako:Desktop:"
createGIT="false" createBlankProject="true"/>
<solutionExplorer defaultPage="1"/>
<method_editor></method_editor>
</com.wakanda>
</preferences>
/Users/{userName}/Library/Application Support/Wakanda Studio/
C:Users{User Name}AppDataRoamingWakanda Studio
Wakanda Studio.waPreferences

104. Shibuya, Tokyo
icons
widget
/Creating-a-Custom-Widget-v6/packagejson.200-1026497.en.html
size 16 x 16
type image/png
name widget.png- setIcon()

105. Shibuya, Tokyo
icons
widget
sips -z 16 16 icon.png widget.png
/Creating-a-Custom-Widget-v6/packagejson.200-1026497.en.html
size 16 x 16
type image/png
name widget.png- setIcon()

106. Shibuya, Tokyo
widget
/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html

107. Shibuya, Tokyo
Wakanda
presented by
勉強会 #5
2013-10-8