Silk.st 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. Smalltalk createPackage: 'Silk'!
  2. Domite subclass: #Silk
  3. slots: {}
  4. package: 'Silk'!
  5. !Silk commentStamp!
  6. I am subclass of `Domite` with more convenient high-level API.
  7. ##Rendering
  8. - `aSilk << anObject` uses double-dispatch via `renderOnSilk:`.
  9. This allows to create widgets
  10. (no formal superclass, anything with `renderOnSilk:` is a widget),
  11. as well as incorporating magic on certain types of objects:
  12. - blocks: `aSilk << aBlock` runs the block, passing aSilk as a parameter.
  13. - associations: `aSilk << (key -> value)` set attribute key to value.
  14. Worthful to note is, rendering a collection has its magic
  15. already built-in (via `putOn:`) -- if you `stream << aCollection`,
  16. its items are `<<`'d in sequence.
  17. So, de facto, arrays are deeply flattened when put on a stream via `<<`.
  18. ##Convenience
  19. - `aCssSelectorString asSilk` returns Silk wrapping an element at a selector.
  20. - `anObject inSilk` returns anObject rendered in a document fragment.
  21. ##Element creation
  22. These messages use DNU to dynamically create
  23. elements with any (letters-and-numbers) tag name,
  24. Next samples show this on an example of `<div>`.
  25. - `Silk DIV` is shortcut for `Silk newElement: 'div'`.
  26. - `aSilk DIV` is shortcut for
  27. `[ |tmp| tmp := Silk DIV. aSilk << tmp. tmp] value`.
  28. IOW, it not just creates the element and returns it,
  29. but also puts in on aSilk.
  30. - `aSilk DIV: anObject` is shortcut for
  31. `aSilk DIV << anObject; yourself`.
  32. IOW, it not just creates and inserts the element,
  33. but puts a content into it.
  34. ##Conclusions
  35. Taken all this together, one can do pretty neat constructs:
  36. ```
  37. aSilk P: { 'id'->'mission'. 'We are the champions.' }
  38. ```
  39. adds `<p id="mission">We are the champions.</p>` into `aSilk`
  40. and returns the Silk-wrapped `<p>` with insertion cursor at the end.!
  41. !Silk methodsFor: 'accessing'!
  42. namespace
  43. "<String>
  44. XML namespace for elements: html.
  45. The default for all virtual Silk tag messages"
  46. ^ self element namespaceURI
  47. ! !
  48. !Silk methodsFor: 'writing'!
  49. doesNotUnderstand: aMessage
  50. "`aSilk DIV` creates a div element and inserts it.
  51. `aSilk DIV: anObject` creates a div element, inserts it
  52. and puts contents in it"
  53. (self class tryMakeDnuElement: aMessage in: self)
  54. ifNil: [ ^ super doesNotUnderstand: aMessage ]
  55. ifNotNil: [ :newElement | self << newElement. ^ newElement ]
  56. !
  57. nextPut: anObject
  58. "Double-dispatches anObject via renderOnSilk: message.
  59. If a message returns nil, this fallbacks to superclass.
  60. Otherwise, it is assumed renderOnSilk: did its job."
  61. (anObject renderOnSilk: self)
  62. ifNil: [ super nextPut: anObject ]
  63. ! !
  64. !Silk class methodsFor: 'accessing'!
  65. htmlNamespace
  66. "<String>
  67. XML namespace for HTML elements.
  68. The default for all virtual Silk tag messages"
  69. ^ 'http://www.w3.org/1999/xhtml'
  70. !
  71. namespace
  72. "<String>
  73. XML namespace for elements: html.
  74. The default for all virtual Silk tag messages"
  75. ^ self htmlNamespace
  76. ! !
  77. !Silk class methodsFor: 'instance creation'!
  78. tryMakeDnuElement: aMessage in: aSilk
  79. "`DIV` creates a div element.
  80. `DIV: anObject` creates a div element and puts contents in it.
  81. When aSilk is an instance and not the class Silk,
  82. and the instance has an xml namespace other than the default #html,
  83. Then that namespace is used for the new element.
  84. You can do:
  85. svg := Silk newElement: 'svg' xmlns: 'http://www.w3.org/2000/svg'.
  86. svg CIRCLE: {'cx' -> 60. 'cy' -> 25. 'r' -> 10}.
  87. This creates a svg circle, not a html circle."
  88. | selector newElement useArg |
  89. selector := aMessage selector.
  90. selector asUppercase = selector
  91. ifFalse: [ ^ nil ].
  92. selector last = ':'
  93. ifTrue: [ useArg := true. selector := selector allButLast ]
  94. ifFalse: [ useArg := false ].
  95. (selector includes: ':')
  96. ifTrue: [ ^ nil ].
  97. newElement := self newElement: selector asLowercase xmlns: aSilk namespace.
  98. useArg ifTrue: [ newElement << aMessage arguments first ].
  99. ^ newElement
  100. ! !
  101. !Silk class methodsFor: 'message handling'!
  102. doesNotUnderstand: aMessage
  103. "`Silk DIV` creates a div element.
  104. `Silk DIV: anObject` creates a div element and puts contents in it"
  105. ^ (self tryMakeDnuElement: aMessage in: self)
  106. ifNil: [ super doesNotUnderstand: aMessage ]
  107. ! !
  108. !Association methodsFor: '*Silk'!
  109. renderOnSilk: aSilk
  110. key attrPut: value on: aSilk
  111. ! !
  112. !BlockClosure methodsFor: '*Silk'!
  113. renderOnSilk: aSilk
  114. self value: aSilk
  115. ! !
  116. !JSObjectProxy methodsFor: '*Silk'!
  117. inSilk
  118. ^ Silk newStream << self; yourself
  119. !
  120. renderOnSilk: aSilk
  121. ^ nil
  122. ! !
  123. !Object methodsFor: '*Silk'!
  124. inSilk
  125. ^ Silk newStream << self; yourself
  126. !
  127. renderOnSilk: aSilk
  128. ^ nil
  129. ! !
  130. !String methodsFor: '*Silk'!
  131. asSilk
  132. ^ Silk at: self asString
  133. !
  134. attrPut: anObject on: aSilk
  135. aSilk attrAt: self put: anObject
  136. ! !