HelloAmber.st 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. EnyoFriend subclass: #HelloAmber
  2. instanceVariableNames: 'count popup'
  3. category: 'HelloAmber'!
  4. !HelloAmber methodsFor: 'accessing'!
  5. count
  6. ^count
  7. ! !
  8. !HelloAmber methodsFor: 'actions'!
  9. buttonClicked
  10. count := count + 1.
  11. self dollar input setValue: (self dollar input getValue, 'You clicked the button ', count asString, ' times so far').
  12. "Okidoki, why not throw up a popup?"
  13. popup openAtCenter
  14. !
  15. popupSelected: value
  16. "The user picked a value in the popup."
  17. self dollar input setValue: (self dollar input getValue, ' ', value)
  18. ! !
  19. !HelloAmber methodsFor: 'initialization'!
  20. initialize
  21. "Create Enyo stuff and hook in callback blocks calling our action methods,
  22. very similar to how Seaside does it.
  23. Creating the templates for component construction
  24. is clearly simpler to do in js. Yes, we can use
  25. method temps inside the js code and ivars are accessed
  26. using this syntax:
  27. this['@ivarname']
  28. We can not easily mix in arbitrary Amber expressions in the js code, thus
  29. we use method temps for holding the blocks instead of embedding the blocks
  30. directly. Blocks are js functions which is really neat. And we can use:
  31. this._amberMessage()
  32. to send messages to self for embedding the result."
  33. | props block block2 |
  34. super initialize.
  35. count := 0.
  36. "Create a callback block to embed below."
  37. block := [self buttonClicked].
  38. "We need to go through a method temp (props) for doing js, just inlining it
  39. after 'enyo create:' does not work so js escaping is on the statement level
  40. and not on the expression level."
  41. <props = {
  42. kind: 'VFlexBox',
  43. components: [
  44. {kind: 'PageHeader', content: 'Amber Live'},
  45. {kind: "RowGroup", caption: "Rock on", components: [
  46. {kind: 'Input', components: [
  47. {kind: 'Button', caption: 'Click me', onclick: 'ablock'}]
  48. }]
  49. }],
  50. ablock: block}>.
  51. self ui: (enyo create: props).
  52. "If we like we can create a kind for the UI (then the props need a name EnyoHelloAmber),
  53. but we do not have to in this case so this is commented out."
  54. "self kind: (enyo kind: props).
  55. <this['@ui'] = new EnyoHelloAmber()>"
  56. "This Enyo popup instance is created and held in an ivar for later use."
  57. block2 := [:sender :value :old | self popupSelected: value].
  58. <props = {kind: "Popup", components: [
  59. {content: "Pick something you like a lot"},
  60. {kind: "ListSelector", onChange: "popupSelected", value: "Foo", items: ["Foo", "Bar", "Bot"]
  61. }],
  62. popupSelected: block2}>.
  63. popup := enyo create: props
  64. ! !
  65. !HelloAmber class methodsFor: 'initialization'!
  66. initialize
  67. enyo log: 'Class initialized'
  68. ! !