Wakanda#2

670 views
563 views

Published on

sample solution and database posted on GitHub:

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
670
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wakanda#2

  1. 1. Shibuya, Tokyo Wakanda 勉強会 #2 2013-08-13 presented by
  2. 2. 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
  3. 3. 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
  4. 4. Shibuya, Tokyo agenda client-side development .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widget: datasourceにバインドされたHTMLコントロール
  5. 5. Shibuya, Tokyo agenda client-side development .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widget: datasourceにバインドされたHTMLコントロール
  6. 6. Shibuya, Tokyo agenda client-side development .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widget: datasourceにバインドされたHTMLコントロール <button> <input> <label> <div> <span>
  7. 7. Shibuya, Tokyo agenda client-side development .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widget: datasourceにバインドされたHTMLコントロール
  8. 8. Shibuya, Tokyo agenda client-side development .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widget: datasourceにバインドされたHTMLコントロール
  9. 9. Shibuya, Tokyo agenda client-side development .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widget: datasourceにバインドされたHTMLコントロール datasource: コミュニケーションレイヤーを提供するオブジェクト
  10. 10. Shibuya, Tokyo agenda client-side development .../Introduction-to-Wakanda-Client-Side-Development.100-875591.ja.html widget: datasourceにバインドされたHTMLコントロール datasource: コミュニケーションレイヤーを提供するオブジェクト datasource widgetwidget server
  11. 11. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page architecture WAK1 WAK2 WAK3 page.htmlpage.html page.waPagepage.csspage.css page.waPage page.jspage.js page.waPage
  12. 12. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page architecture page.waPagepage.waPagepage.waPage index.htmlindex.html index-smartphone.htmlindex-smartphone.html index-tablet.htmlindex-tablet.html stylesstyles index.css index-smartphone.css index-tablet.css scriptsscripts index.js index-smartphone.js index-tablet.js
  13. 13. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page desktop page.waPagepage.waPagepage.waPage index.htmlindex.html index-smartphone.htmlindex-smartphone.html index-tablet.htmlindex-tablet.html stylesstyles index.css index-smartphone.css index-tablet.css scriptsscripts index.js index-smartphone.js index-tablet.js
  14. 14. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page smartphone page.waPagepage.waPagepage.waPage index.htmlindex.html index-smartphone.htmlindex-smartphone.html index-tablet.htmlindex-tablet.html stylesstyles index.css index-smartphone.css index-tablet.css scriptsscripts index.js index-smartphone.js index-tablet.js
  15. 15. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page tablet page.waPagepage.waPagepage.waPage index.htmlindex.html index-smartphone.htmlindex-smartphone.html index-tablet.htmlindex-tablet.html stylesstyles index.css index-smartphone.css index-tablet.css scriptsscripts index.js index-smartphone.js index-tablet.js
  16. 16. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page view page.waPagepage.waPagepage.waPagepage.waPage index.htmlindex.html GUI Designerと連動index-smartphone.htmlindex-smartphone.html GUI Designerと連動 index-tablet.htmlindex-tablet.html GUI Designerと連動 stylesstylesstyles index.css GUI Designerと連動index-smartphone.css GUI Designerと連動 index-tablet.css GUI Designerと連動 scriptsscriptsscripts index.js GUI Designerと連動index-smartphone.js GUI Designerと連動 index-tablet.js GUI Designerと連動
  17. 17. Shibuya, Tokyo Architecture-of-a-Wakanda-Solution/Page.200-1022685.ja.html page view page.waPagepage.waPagepage.waPage index.html GUI Designerと連動index-smartphone.html GUI Designerと連動 index-tablet.html GUI Designerと連動 <meta name="generator" content="Wakanda GUIDesigner"/> <meta name="wakanda-version" content="5 build 5.137191"/> <meta name="wakanda-build" content="5.137191"/>
  18. 18. Shibuya, Tokyo Architecture-of-a-Wakanda-Solution/Page.200-1022685.ja.html page view page.waPagepage.waPagepage.waPage index.html GUI Designerと連動index-smartphone.html GUI Designerと連動 index-tablet.html GUI Designerと連動 XHTML5: 空要素のタグも閉じる <img src="car.jpg" alt="vehicle" height="128" width="128" /> OK <img src="car.jpg" alt="vehicle" height="128" width="128"> NG
  19. 19. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer.200-306826.ja.html page view page.waPagepage.waPagepage.waPage index.html GUI Designerと連動index-smartphone.html GUI Designerと連動 index-tablet.html GUI Designerと連動 <input type="checkbox" name="vehicle" value="Car" checked="checked" /> OK <input type="checkbox" name="vehicle" value="Car" checked /> NG XHTML5: 属性の省略書式は使用しない
  20. 20. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer.200-306826.ja.html page view page.waPagepage.waPagepage.waPage index.html GUI Designerと連動index-smartphone.html GUI Designerと連動 index-tablet.html GUI Designerと連動 <a href="/myscript?name=miyako&amp;value=keisuke" /> OK <a href="/myscript?name=miyako&value=keisuke" /> NG XHTML5: アンパーサンドは&amp;と記述する
  21. 21. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page styles page.waPagepage.waPagepage.waPagepage.waPage stylesstylesstyles index.css GUI Designerと連動index-smartphone.css GUI Designerと連動 index-tablet.css GUI Designerと連動 index*.css: 編集してはいけない(GUI Designerが上書き)
  22. 22. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page
  23. 23. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page
  24. 24. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page styles page.waPagepage.waPagepage.waPagepage.waPage stylesstylesstyles index.css GUI Designerと連動index-smartphone.css GUI Designerと連動 index-tablet.css GUI Designerと連動
  25. 25. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page styles page.waPagepage.waPagepage.waPagepage.waPage stylesstylesstyles index.css GUI Designerと連動index-smartphone.css GUI Designerと連動 index-tablet.css GUI Designerと連動 page.css 自由
  26. 26. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page styles page.waPagepage.waPagepage.waPagepage.waPage stylesstylesstyles index.css GUI Designerと連動index-smartphone.css GUI Designerと連動 index-tablet.css GUI Designerと連動 page.css 自由 application.css theme/role管理(後述)
  27. 27. Shibuya, Tokyo page page.waPagepage.waPagepage.waPagepage.waPage scriptsscriptsscripts index.js GUI Designerと連動index-smartphone.js GUI Designerと連動 index-tablet.js GUI Designerと連動 scripts index*.js: 既定のイベントでコールされるJavaScript Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html
  28. 28. Shibuya, Tokyo page Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html
  29. 29. Shibuya, Tokyo page Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html
  30. 30. Shibuya, Tokyo page Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html scripts desktop smartphone tablet On LoadOn LoadOn Load On Orientation ChangeOn Orientation Change index*.js: 既定のイベント
  31. 31. Shibuya, Tokyo page Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html
  32. 32. Shibuya, Tokyo page Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html
  33. 33. Shibuya, Tokyo page page.waPagepage.waPagepage.waPagepage.waPage scriptsscriptsscripts index.js GUI Designerと連動index-smartphone.js GUI Designerと連動 index-tablet.js GUI Designerと連動 scripts Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html
  34. 34. Shibuya, Tokyo page page.waPagepage.waPagepage.waPagepage.waPage scriptsscriptsscripts index.js GUI Designerと連動index-smartphone.js GUI Designerと連動 index-tablet.js GUI Designerと連動 scripts Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page.js 自由
  35. 35. Shibuya, Tokyo page page.waPagepage.waPagepage.waPagepage.waPage scriptsscriptsscripts index.js GUI Designerと連動index-smartphone.js GUI Designerと連動 index-tablet.js GUI Designerと連動 scripts Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html page.js 自由 WAF.onAfterInit = function() {     WAF.addListener("button1", "click", function(event) {       //put code here for your event     }); }; エントリーポイント: onAfterInit
  36. 36. Shibuya, Tokyo Architecture-of-a-Wakanda-Solution/Routing-Pages.300-972295.ja.html view 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"} ] } ]
  37. 37. Shibuya, Tokyo Architecture-of-a-Wakanda-Solution/Routing-Pages.300-972295.ja.html view
  38. 38. Shibuya, Tokyo Architecture-of-a-Wakanda-Solution/Routing-Pages.300-972295.ja.html view
  39. 39. Shibuya, Tokyo Architecture-of-a-Wakanda-Solution/Routing-Pages.300-972295.ja.html view targets.json waPlatform: キャッシュされたCookie (User-Agent) desktop smartphone tablet iPhone, Android, Mobile phone, Samsung Galaxy Note Galaxy Nexus, Nexus One DROID2, DROID, DROIDX HTC Desire, ADR6300 myTouch, Desire, SonyEricssonX10i, E10i SGH iPad, Android (ex.Mobile) GT SCH Xoom Streak
  40. 40. 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}AppDataRoamingWakanda Studio { "gui":{ snapping : { grid : { activeByDefault : true, showByDefault : true, color : "black" } } } }
  41. 41. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html Snap to grid Show grid designer preferences
  42. 42. 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
  43. 43. 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
  44. 44. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html command/control+drag designer preferences
  45. 45. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html { "gui":{ snapping : { magneticGrid : { automaticallyActive : true, onlySnapToSiblings : true, color : "red" } } } } preferences.json Library/Application Support/Wakanda Studio/ C:Users{userName}AppDataRoamingWakanda Studio designer preferences
  46. 46. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Page.300-966038.ja.html Google Fonts
  47. 47. Shibuya, Tokyo Google Fonts
  48. 48. Shibuya, Tokyo Google Fonts
  49. 49. Shibuya, Tokyo Google Fonts
  50. 50. Shibuya, Tokyo Google Fonts
  51. 51. Shibuya, Tokyo Google Fonts
  52. 52. Shibuya, Tokyo Google Fonts
  53. 53. Shibuya, Tokyo Google Fonts
  54. 54. Shibuya, Tokyo Google Fonts
  55. 55. Shibuya, Tokyo Google Fonts
  56. 56. Shibuya, Tokyo Google Fonts
  57. 57. Shibuya, Tokyo Google Fonts
  58. 58. Shibuya, Tokyo Google Fonts
  59. 59. Shibuya, Tokyo Google Fonts
  60. 60. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  61. 61. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  62. 62. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  63. 63. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  64. 64. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  65. 65. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html 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毎のクラス widget roles
  66. 66. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  67. 67. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  68. 68. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  69. 69. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widget roles
  70. 70. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html 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
  71. 71. 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
  72. 72. Shibuya, Tokyo widget roles application.css | index.css Wakanda-Studio-Reference-Guide/.../Widget-Overview.300-306931.ja.html widgetを配置 (index.css) styleを設定 (index.css) roleを作成 (application.css) スタイルを削除 (index.css) styleを変更 (index.css) roleを更新 (application.css) スタイルを削除 (index.css) roleを設定した後にスタイルをいじることは避けたほうが良い
  73. 73. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Button.300-307059.ja.html button
  74. 74. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Button.300-307059.ja.html button properties/general link datasource ID HTML unique idHTML unique id Hide widget on load Button title Source Action URL http, ftp, mailto... Target _blank, _self Tabindex
  75. 75. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Button.300-307059.ja.html button properties/general link datasource ID HTML unique idHTML unique id Hide widget on load Button title Source datasource Action simple, auto URL Target Tabindex
  76. 76. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Button.300-307059.ja.html 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 自動処理
  77. 77. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Button.300-307059.ja.html button
  78. 78. 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
  79. 79. Shibuya, Tokyo Widgets-API/Button.201-867857.ja.html widgets syntax var myValue = this.getValue(); var myLabel = this.label; this
  80. 80. Shibuya, Tokyo Wakanda-Studio-Reference-Guide/GUI-Designer-Widgets/Button.300-307059.ja.html 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
  81. 81. Shibuya, Tokyo Wakanda 勉強会 #2 2013-08-13 presented by

×