Successfully reported this slideshow.

Separation of Concerns in Web User Interfaces

817 views

Published on

Final thesis presentation

Published in: Technology, Spiritual
  • Be the first to comment

  • Be the first to like this

Separation of Concerns in Web User Interfaces

  1. 1. Separation of Concerns in Web User Interfaces 26 september 2008 Jippe Holwerda
  2. 2. Overview
  3. 3. Overview Separation of Concerns
  4. 4. Overview Separation of Concerns Web User Interface
  5. 5. Overview Separation of Concerns Web User Interface Concerns Presentation Layout Style
  6. 6. Overview Separation of Concerns Web User Interface Concerns Presentation Layout Style Languages
  7. 7. Overview Separation of Concerns Web User Interface Concerns Presentation Layout Style Languages UI description
  8. 8. Overview Separation of Concerns Web User Interface Concerns Presentation Layout Style Languages UI description Web application
  9. 9. Goal
  10. 10. Goal Development efforts of Web User Interfaces and
  11. 11. Goal Development efforts of Web User Interfaces and Maintainability Reusability Quality
  12. 12. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  13. 13. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  14. 14. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  15. 15. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  16. 16. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  17. 17. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  18. 18. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  19. 19. Problems in Web Development
  20. 20. Problems in Web Development - Many different languages
  21. 21. Problems in Web Development - Many different languages - Not integrated well
  22. 22. Problems in Web Development - Many different languages - Not integrated well - No compile-time error checking
  23. 23. Problems in Web Development - Many different languages - Not integrated well - No compile-time error checking - A lot of boilerplate code
  24. 24. WebDSL Domain-specific Language for the description of Web Applications WebWorkflow WebDSL Data Model UI Access Control Core WebDSL Data Model UI Web Application
  25. 25. WebDSL Data Models User Interface Logic Access Control Workflow
  26. 26. WebDSL Data Models
  27. 27. Data Models
  28. 28. Data Models
  29. 29. entity Person { Data Models name :: String address <> Address } entity Address { street :: String number :: Int city :: String }
  30. 30. Data Models
  31. 31. Data Models
  32. 32. WebDSL Data Models User Interface Logic Access Control Workflow
  33. 33. Data Models User Interface Logic Access Control Workflow
  34. 34. User Interface
  35. 35. User Interface
  36. 36. User Interface
  37. 37. define page home() { title { “Home page” } form { group(quot;Edit Personquot;) { groupitem { label(quot;Namequot;) {input(p.name)} } groupitem { label(quot;Addressquot;) {input(p.address)} } groupitem { label(quot;Employerquot;) {input(p.employer)} } } User Interface group() { action(quot;Savequot;, save()) } } }
  38. 38. define page home() { title { “Home page” } form { group(quot;Edit Personquot;) { groupitem { label(quot;Namequot;) {input(p.name)} } groupitem { label(quot;Addressquot;) {input(p.address)} } groupitem { label(quot;Employerquot;) {input(p.employer)} } } User Interface group() { action(quot;Savequot;, save()) } } }
  39. 39. User Interface
  40. 40. define main() { define top() { top() image(“images/logo.png”) body() } footer() } define body() { text(“Standard body”) } User Interface define footer() { navigate(disclaimer()) { “Disclaimer” } }
  41. 41. define main() { define top() { top() image(“images/logo.png”) body() } footer() } define body() { text(“Standard body”) } User Interface define footer() { navigate(disclaimer()) { “Disclaimer” } }
  42. 42. User Interface
  43. 43. Data Models User Interface Logic Access Control Workflow
  44. 44. WebDSL Data Models User Interface Logic Access Control Workflow
  45. 45. WebDSL Logic
  46. 46. Logic
  47. 47. Logic
  48. 48. Logic
  49. 49. Logic define page home() { title { “Home page” } var p : Person; form { group(quot;Edit Personquot;) { groupitem { label(quot;Namequot;) {input(p.name)} } groupitem { label(quot;Addressquot;) {input(p.address)} } groupitem { label(quot;Employerquot;) {input(p.employer)} } } group() { action(quot;Savequot;, save()) } action save() { p.save(); return person(p); } } }
  50. 50. Logic
  51. 51. Logic
  52. 52. Data Models User Interface Logic Access Control Workflow
  53. 53. WebDSL Data Models User Interface Logic Access Control Workflow
  54. 54. WebDSL Data Models User Interface Logic Access Control Workflow
  55. 55. WebDSL Data Models User Interface Logic
  56. 56. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  57. 57. Why should we care about Web User Interfaces
  58. 58. Why should we care about Web User Interfaces A user’s entry point to an application
  59. 59. Why should we care about Web User Interfaces A user’s entry point to an application Users will leave when not satisfied
  60. 60. Why should we care about Web User Interfaces A user’s entry point to an application Users will leave when not satisfied
  61. 61. Relevance of User Interface Development* User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design effort of web applications
  62. 62. Relevance of User Interface Development* Amount of source code 48% 52% User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design effort of web applications
  63. 63. Relevance of User Interface Development* Amount of source code Average time spent in design phase 45% 48% 52% 55% User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design effort of web applications
  64. 64. Relevance of User Interface Development* Amount of source code Average time spent in design phase 45% 48% 52% 55% Average time spent in implementation phase 50% 50% User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design effort of web applications
  65. 65. Relevance of User Interface Development* Amount of source code Average time spent in design phase 45% 48% 52% 55% Average time spent in implementation phase Average time spent in maintenance phase 37% 50% 50% 63% User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design effort of web applications
  66. 66. Problems with Web User Interface Development
  67. 67. Problems with Web User Interface Development Complex
  68. 68. Problems with Web User Interface Development Complex Time consuming
  69. 69. Problems with Web User Interface Development Complex Time consuming
  70. 70. Problems with Web User Interface Development Complex Expensive Time consuming
  71. 71. Problems with Web User Interface Development
  72. 72. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  73. 73. Research Questions #1
  74. 74. Research Questions #1 Level of abstraction
  75. 75. Research Questions #1 Level of abstraction Development efforts
  76. 76. Research Questions #1 Level of abstraction Development efforts Maintainability
  77. 77. Research Questions #1 Level of abstraction Development efforts Maintainability Reusability
  78. 78. Research Questions #1 Level of abstraction Development efforts Maintainability Reusability Quality
  79. 79. Research Questions #2
  80. 80. Research Questions #2 Using WebDSL,
  81. 81. Research Questions #2 Using WebDSL, what are good web user interface abstractions?
  82. 82. Research Questions #2 Using WebDSL, what are good web user interface abstractions? Also applicable to other environments?
  83. 83. Research Questions #3
  84. 84. Research Questions #3 Using WebDSL,
  85. 85. Research Questions #3 Using WebDSL, how much of the user interface can be generated? 0% 100%
  86. 86. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  87. 87. Approach
  88. 88. Approach Separate web user interface concerns
  89. 89. Approach Separate web user interface concerns by
  90. 90. Approach Separate web user interface concerns by developing language extensions
  91. 91. Approach Separate web user interface concerns by developing language extensions as plugins to WebDSL
  92. 92. Approach WebWorkflow WebDSL WebDSL Data Model UI Access Control Styling and Layout Core WebDSL Core WebDSL Data Model UI Styling and Layout Styling Web Application implementation language
  93. 93. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  94. 94. Why Separation of Concerns? Web Application
  95. 95. Why Separation of Concerns? Web Application
  96. 96. Why Separation of Concerns? Reduces complexity
  97. 97. Why Separation of Concerns?
  98. 98. Why Separation of Concerns?
  99. 99. Why Separation of Concerns? Better reusability
  100. 100. Why Separation of Concerns? Better reusability
  101. 101. Why Separation of Concerns? Better reusability
  102. 102. Why Separation of Concerns? Better reusability
  103. 103. Why Separation of Concerns? Better reusability
  104. 104. Why Separation of Concerns? Better maintainability
  105. 105. Why Separation of Concerns? Better maintainability
  106. 106. What are the concerns in Web User Interfaces Appearance Presentation Behavior Structure
  107. 107. What are the concerns in Web User Interfaces Appearance Presentation Behavior Structure
  108. 108. What are the concerns in Web User Interfaces Appearance Presentation Behavior Structure
  109. 109. What are the concerns in Web User Interfaces Presentation Concrete Presentation Abstract Presentation
  110. 110. What are the concerns in Web User Interfaces Concrete Presentation Abstract Presentation Presentation
  111. 111. What are the concerns in Web User Interfaces Abstract Presentation
  112. 112. What are the concerns in Web User Interfaces Abstract Presentation
  113. 113. What are the concerns in Web User Interfaces Abstract Presentation
  114. 114. What are the concerns in Web User Interfaces Concrete Presentation
  115. 115. What are the concerns in Web User Interfaces Concrete Presentation
  116. 116. What are the concerns in Web User Interfaces Concrete Presentation
  117. 117. What are the concerns in Web User Interfaces Concrete Presentation
  118. 118. What are the concerns in Web User Interfaces Appearance Presentation Behavior Structure
  119. 119. What are the concerns in Web User Interfaces Presentation Behavior Structure Appearance
  120. 120. What are the concerns in Web User Interfaces Appearance Text Layout Style
  121. 121. What are the concerns in Web User Interfaces Layout Style Text Appearance
  122. 122. What are the concerns in Web User Interfaces Layout
  123. 123. What are the concerns in Web User Interfaces Layout
  124. 124. What are the concerns in Web User Interfaces Style
  125. 125. What are the concerns in Web User Interfaces Style
  126. 126. What are the concerns in Web User Interfaces Style
  127. 127. What are the concerns in Web User Interfaces Style
  128. 128. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  129. 129. Separating Presentation
  130. 130. Separating Presentation define page vets() { main() define body() { header { quot;Veterinarians:quot; } table { header { quot;Namequot; quot;Specialtyquot; } for (v : Vet) { row { text(v.name) table { for (s : Specialty in v.specialties) { row { text(s.name) } } } } } } } }
  131. 131. Separating Presentation define page vets() { main() define body() { header { quot;Veterinarians:quot; } table { header { quot;Namequot; quot;Specialtyquot; } for (v : Vet) { row { text(v.name) table { for (s : Specialty in v.specialties) { row { text(s.name) } } } } } } } }
  132. 132. Separating Presentation define page vets() { main() define body() { header { quot;Veterinarians:quot; } table { header { quot;Namequot; quot;Specialtyquot; } for (v : Vet) { row { text(v.name) table { for (s : Specialty in v.specialties) { row { text(s.name) } } } } } } } }
  133. 133. Separating Presentation define page vets() { main() define body() { header { quot;Veterinarians:quot; } table { header { quot;Namequot; quot;Specialtyquot; } for (v : Vet) { row { text(v.name) list { for (s : Specialty in v.specialties) { listitem { text(s.name) } } } } } } } }
  134. 134. Separating Presentation
  135. 135. Separating Presentation define page vets() { main() define body() { header { quot;Veterinarians:quot; } table { header { quot;Namequot; quot;Specialtyquot; } for (v : Vet) { row { text(v.name) output(v.specialties) } } } } }
  136. 136. Separating Presentation define output(coll : List<Specialty>) { define page vets() { table() { main() for (s : Specialty in coll) { define body() { row { output(s.name) } header { quot;Veterinarians:quot; } } table { } header { quot;Namequot; quot;Specialtyquot; } } for (v : Vet) { row { text(v.name) output(v.specialties) } } } } }
  137. 137. Separating Presentation define output(coll : List<Specialty>) { define page vets() { table() { main() for (s : Specialty in coll) { define body() { row { output(s.name) } header { quot;Veterinarians:quot; } } table { } header { quot;Namequot; quot;Specialtyquot; } } for (v : Vet) { row { text(v.name) define output(coll : List<Specialty>) { output(v.specialties) list() { } for (s : Specialty in coll) { } listitem { output(s.name) } } } } } } }
  138. 138. Approach WebWorkflow WebDSL WebDSL Data Model UI Access Control Styling and Layout Core WebDSL Core WebDSL Data Model UI Styling and Layout Styling Web Application implementation language
  139. 139. Separating Presentation
  140. 140. Separating Presentation - Pages only defined in terms of input and output
  141. 141. Separating Presentation - Pages only defined in terms of input and output - Input and output behavior defined separately
  142. 142. Separating Presentation - Pages only defined in terms of input and output - Input and output behavior defined separately - Results in separation of structure and presentation
  143. 143. Separating Appearance Layout Style Text Appearance
  144. 144. Styling and WebDSL
  145. 145. Styling and WebDSL - styling on generated code
  146. 146. Styling and WebDSL - styling on generated code - low-level
  147. 147. Styling and WebDSL - styling on generated code - low-level - labour intensive
  148. 148. Styling and WebDSL - styling on generated code - low-level - labour intensive - error-prone
  149. 149. Related Styling Languages eXtensible Style Language (XSL) Constraint Cascading Style Sheets (CCSS) Presentation Specification Language (PSL) Cascading Style Sheets (CSS)
  150. 150. Constraint Cascading Style Sheets (CCSS)
  151. 151. Constraint Cascading Style Sheets (CCSS) @precondition Browser[width] >= 800px
  152. 152. Constraint Cascading Style Sheets (CCSS) @precondition Browser[width] >= 800px @variable table-width; table { constraint: width = table-width }
  153. 153. Constraint Cascading Style Sheets (CCSS) @precondition Browser[width] >= 800px @variable table-width; table { constraint: width = table-width } @constraint #c1[width] = #c2[width]
  154. 154. Presentation Specification Language (PSL)
  155. 155. Presentation Specification Language (PSL) - Property propagation
  156. 156. Presentation Specification Language (PSL) - Property propagation - Tree elaboration
  157. 157. Presentation Specification Language (PSL) - Property propagation - Tree elaboration - Box layout
  158. 158. Presentation Specification Language (PSL) li { if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then VertPos: Top = Parent.Top; HorizPos: Left = LeftSib.Left + LeftSib.Width; else VertPos: Top = LeftSib.Actual.Bottom; HorizPost: Left = LeftSib.Left; endif Width = 200; }
  159. 159. Cascading Style Sheets (CSS) <html> <head> <title>Home Page</title> </head> <body> <p> <span>This is text</span> <a href=”home.html”>Home</a> </p> </body> </html> html > body > p > span { font-size: 40px; } a{ text-decoration: none; color: blue; }
  160. 160. Related Styling Languages eXtensible Style Language (XSL) Constraint Cascading Style Sheets (CCSS) Presentation Specification Language (PSL) Cascading Style Sheets (CSS)
  161. 161. CSS problems
  162. 162. CSS problems Missing functionality
  163. 163. CSS problems Missing functionality - contrast between text color and background
  164. 164. CSS problems Missing functionality - contrast between text color and background - vertical alignment of elements
  165. 165. CSS problems Missing functionality - contrast between text color and background - vertical alignment of elements - native multi-column layouts
  166. 166. CSS problems Missing functionality - contrast between text color and background - vertical alignment of elements - native multi-column layouts - headers and footers
  167. 167. CSS problems Excessive functionality
  168. 168. CSS problems Excessive functionality - box layout with padding, border, margins
  169. 169. CSS problems Excessive functionality - box layout with padding, border, margins - unnecessary properties
  170. 170. CSS problems Excessive functionality - box layout with padding, border, margins - unnecessary properties - text-shadow
  171. 171. CSS problems Excessive functionality - box layout with padding, border, margins - unnecessary properties - text-shadow - first-line
  172. 172. CSS problems Poor design
  173. 173. CSS problems Poor design - properties that describe multiple unrelated concerns
  174. 174. CSS problems Poor design - properties that describe multiple unrelated concerns - white-space
  175. 175. CSS problems Poor design - properties that describe multiple unrelated concerns - white-space - text-decoration
  176. 176. CSS problems Poor design - properties that describe multiple unrelated concerns - white-space - text-decoration - positioning
  177. 177. Layout with CSS Tables
  178. 178. Layout with CSS Tables
  179. 179. Layout with CSS Tables
  180. 180. Layout with CSS Tables Problems
  181. 181. Layout with CSS Tables Problems - layout embedded in structure
  182. 182. Layout with CSS Tables Problems - layout embedded in structure - corrupts page structure
  183. 183. Layout with CSS Floats and positioning
  184. 184. Layout with CSS Floats and positioning Problems
  185. 185. Layout with CSS Floats and positioning Problems - difficult to use
  186. 186. Layout with CSS Floats and positioning Problems - difficult to use - different browser interpretations
  187. 187. Approach WebWorkflow WebDSL WebDSL Data Model UI Access Control Styling and Layout Core WebDSL Core WebDSL Data Model UI Styling and Layout Web Application CSS
  188. 188. Language Development Process
  189. 189. Language Development Process 1. Look at existing code
  190. 190. Language Development Process 1. Look at existing code 2. Find reoccurring patterns
  191. 191. Language Development Process 1. Look at existing code 2. Find reoccurring patterns 3. Capture these patterns in abstractions
  192. 192. Language Development Process 1. Look at existing code 2. Find reoccurring patterns 3. Capture these patterns in abstractions 4. build them into the language
  193. 193. Layout Language Requirements
  194. 194. Layout Language Requirements 1. Specify the natural flow of elements
  195. 195. Layout Language Requirements 1. Specify the natural flow of elements 2. Specify how one element is positioned in relation to other elements
  196. 196. Layout Language Requirements 1. Specify the natural flow of elements 2. Specify how one element is positioned in relation to other elements 3. Try to do better than CSS
  197. 197. Layout Language module appearance layout main() { top(); mainbody: [ sidebar() | body() ]; } customerDetails(c : Customer) { float { group() }; list(); }
  198. 198. Layout Language define main() { define page home() { top() title { quot;Home Pagequot; } topmenu() sidebar() main() body() } footer() }
  199. 199. Layout Language define main() { define page home() { top() title { quot;Home Pagequot; } topmenu() sidebar() main() body() } footer() }
  200. 200. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  201. 201. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  202. 202. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  203. 203. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  204. 204. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  205. 205. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  206. 206. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  207. 207. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  208. 208. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  209. 209. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  210. 210. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  211. 211. Layout Language main() { top(); topmenu(); mainbody: [ sidebar() | body() ]; footer(); }
  212. 212. Layout Language
  213. 213. Layout Language define page allOwner() { for ( o : Owner ) { ouput(o : Owner); } }
  214. 214. Layout Language define page allOwner() { page allOwner() { for ( o : Owner ) { float { output(o : Owner) }; ouput(o : Owner); } } }
  215. 215. Layout Language define page allOwner() { page allOwner() { for ( o : Owner ) { float { output(o : Owner) }; ouput(o : Owner); } } }
  216. 216. Layout Language define page allOwner() { page allOwner() { for ( o : Owner ) { float { output(o : Owner) }; ouput(o : Owner); } } }
  217. 217. Styling Language Requirements
  218. 218. Styling Language Requirements 1. Associate stylistic properties and values with structural elements
  219. 219. Styling Language Requirements 1. Associate stylistic properties and values with structural elements 2. Try to do better than CSS
  220. 220. Styling Language module appearance styling globalStyling const globalFont : Font := Font.Helvetica; const globalFontColor : Color := Color.black; const globalFontSize : Length := 12pt; main() { font := bodyFont; font-size := bodyFontSize; font-color := bodyFontColor; background-color := bgColor; } page allPet() >> list() { orientation := Orientation.vertical; separator := Separator.none; } topmenu() >> menu() > menuheader() > navigate() { padding := 0.3em; font := globalFont; font-color := globalFontColor; font-size := globalFontSize; font-line := Line.none; }
  221. 221. Style Definitions
  222. 222. Style Definitions - Selector selects WebDSL elements page home() >> list() { width := 500px; orientation := Orientation.horizontal; }
  223. 223. Style Definitions - Selector selects WebDSL elements - Collection of style statements page home() >> list() { width := 500px; orientation := Orientation.horizontal; }
  224. 224. Style Definitions - Selector selects WebDSL elements - Collection of style statements - style declaration page home() >> list() { width := 500px; orientation := Orientation.horizontal; }
  225. 225. Style Definitions - Selector selects WebDSL elements - Collection of style statements - style declaration const globalFontSize : Length := 14pt; - constant declaration
  226. 226. Style Definitions - Selector selects WebDSL elements - Collection of style statements - style declaration const globalFontSize : Length := 14pt; - constant declaration page home() >> par() { font-size := globalFontSize; }
  227. 227. Selectors
  228. 228. Selectors page home() { ... } main() { ... } output(p : Person) { ... } output(c : Customer) { ... } page home() >> main() { ... } page home() >> main() >> list() > listitem() { ... }
  229. 229. Style Expressions
  230. 230. Style Expressions Style values font-size := 1em;
  231. 231. Style Expressions Style values font-size := 1em; width := 100%;
  232. 232. Style Expressions Style values font-size := 1em; width := 100%; orientation := Orientation.horizontal;
  233. 233. Style Expressions Style values font-size := 1em; width := 100%; orientation := Orientation.horizontal; separator := Separator.pipe;
  234. 234. Style Expressions Style values font-size := 1em; width := 100%; orientation := Orientation.horizontal; separator := Separator.pipe; font-line := Line.under;
  235. 235. Style Expressions Style values font-size := 1em; width := 100%; orientation := Orientation.horizontal; separator := Separator.pipe; font-line := Line.under; Style constants const globalFontSize : Length := 12pt; font-size := globalFontSize;
  236. 236. Style Expressions Dependent style
  237. 237. Style Expressions Dependent style top() { width := 200px; } footer() { width := top().width; }
  238. 238. Style Expressions Dependent style
  239. 239. Style Expressions Dependent style page home() >> top() { width := 200px; } page home() >> footer() { width := (page home >> top()).width; }
  240. 240. Style Expressions Style addition
  241. 241. Style Expressions Style addition top() { height := 100px; } footer() { height := top().height; } body() { height := top().height + footer().height; }
  242. 242. Style addition example
  243. 243. Style addition example define page createPet() { var p : Pet; header{ quot;Createquot; } form { group(quot;Owner detailsquot;) { groupitem { label(quot;Name:quot;) { input(o.name) } } groupitem { label(quot;Address:quot;) { input(o.address) } } } group(quot;More detailsquot;) { groupitem { label(quot;City:quot;) { input(o.city) } } groupitem { label(quot;Telephone:quot;) { input(o.telephone) } } groupitem { label(quot;Pets:quot;) { input(o.pets) } } } group { action(quot;Savequot;, save()) action(quot;Cancelquot;, cancel()) } } action save() { o.save(); return owner(o); } action cancel() { cancel home(); } }
  244. 244. Style addition example style formStyle form() { width := (form() > group()).padding-left + (form() > group()).padding-right + (form() > group() >> label()).margin-right + (form() > group() >> label()).width + (form() > group() >> input()).width * (form() > group() >> input()).font-size + (form() > group() >> input()).border-right-width + (form() > group() >> input()).border-left-width; }
  245. 245. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  246. 246. Examples - ING Card
  247. 247. Examples - ING Card main() { top(); mainbody: [ sidebar() | body() ]; }
  248. 248. Examples - ING Card
  249. 249. Examples - ING Card
  250. 250. Examples - ING Card
  251. 251. Examples - ING Card
  252. 252. Examples - ING Card define sideMenu() { list { listitem { navigate(home()) { quot;Homequot; } } listitem { navigate(home()) { quot;Create Card Requestquot; } } listitem { navigate(home()) { quot;Work Card Requestquot; } } listitem { navigate(home()) { quot;Scoringquot; } } listitem { navigate(home()) { quot;Maintenancequot; } } listitem { navigate(home()) { quot;Digital Applicationsquot; } } listitem { navigate(home()) { quot;Pending Requestsquot; } } listitem { navigate(home()) { quot;Lettersquot; } } } }
  253. 253. Examples - ING Card define sideMenu() { list { listitem { navigate(home()) { quot;Homequot; } } listitem { navigate(home()) { quot;Create Card Requestquot; } } listitem { navigate(home()) { quot;Work Card Requestquot; } } listitem { navigate(home()) { quot;Scoringquot; } } listitem { navigate(home()) { quot;Maintenancequot; } } listitem { navigate(home()) { quot;Digital Applicationsquot; } } listitem { navigate(home()) { quot;Pending Requestsquot; } } listitem { navigate(home()) { quot;Lettersquot; } } } } sideMenu() > list() { orientation := Orientation.vertical; separator := Separator.none; spacing := 0.2em; } sideMenu() > list() > listitem() { background-color := #f95807; align := Align.center; }
  254. 254. Examples - ING Card
  255. 255. Examples - OSB
  256. 256. Examples - OSB
  257. 257. Examples - OSB
  258. 258. Examples - OSB define topmenu() { mainNavigation() adminNavigation() }
  259. 259. Examples - OSB define topmenu() { define mainNavigation() { mainNavigation() list { adminNavigation() listitem { navigate(home()) { quot;Homequot; } } } listitem { navigate(home()) { quot;UserInfoquot; } } listitem { navigate(home()) { quot;Reportsquot; } } } }
  260. 260. Examples - OSB define topmenu() { define mainNavigation() { mainNavigation() list { adminNavigation() listitem { navigate(home()) { quot;Homequot; } } } listitem { navigate(home()) { quot;UserInfoquot; } } listitem { navigate(home()) { quot;Reportsquot; } } } } define adminNavigation() { list { listitem { navigate(home()) { quot;Administrationquot; } } listitem { navigate(home()) { quot;Statusquot; } } listitem { navigate(home()) { quot;Configurationquot; } } listitem { navigate(home()) { quot;Logoutquot; } } } }
  261. 261. Examples - OSB define topmenu() { define mainNavigation() { mainNavigation() list { adminNavigation() listitem { navigate(home()) { quot;Homequot; } } } listitem { navigate(home()) { quot;UserInfoquot; } } listitem { navigate(home()) { quot;Reportsquot; } } } } layout topmenu() { menu: [ mainNavigation() | adminNavigation() ]; } style mainNavigation() { align := Align.left; } adminNavigation() { align := Align.right; }
  262. 262. Examples - OSB define topmenu() { define mainNavigation() { mainNavigation() list { adminNavigation() listitem { navigate(home()) { quot;Homequot; } } } listitem { navigate(home()) { quot;UserInfoquot; } } listitem { navigate(home()) { quot;Reportsquot; } } } } style mainNavigation() >> list() { orientation := Orientation.horizontal; separator := Separator.none; spacing := 1em; } adminNavigation() >> list() { orientation := (mainNavigation() >> list()).orientation; separator := (mainNavigation() >> list()).separator; spacing := (mainNavigation() >> list()).spacing; }
  263. 263. Examples - PetClinic
  264. 264. Examples - PetClinic
  265. 265. Examples - PetClinic
  266. 266. Examples - PetClinic header { quot;Veterinarians:quot; } table() { header { quot;Namequot; quot;Specialtyquot; } for (v : Vet) { row { text(v.name) output(v.specialtiesList) }}}
  267. 267. Examples - PetClinic header { quot;Veterinarians:quot; } table() { header { quot;Namequot; quot;Specialtyquot; } for (v : Vet) { row { text(v.name) output(v.specialtiesList) }}} define output(coll : List<Specialty>) { list() { for (s : Specialty in coll) { listitem { output(s.name) } }}}
  268. 268. Examples - PetClinic header { quot;Veterinarians:quot; } table() { header { quot;Namequot; quot;Specialtyquot; } for (v : Vet) { row { text(v.name) output(v.specialtiesList) }}} define output(coll : List<Specialty>) { list() { for (s : Specialty in coll) { listitem { output(s.name) } }}} style output(c : List<Specialty>) >> list() { orientation := Orientation.horizontal; separator := Separator.comma; spacing-right := 0.2em; }
  269. 269. Evaluation LOC generated CSS LOC source code 600 450 300 150 0 ING Card OSB PetClinic
  270. 270. Outline - Introduction - WebDSL - Web User Interfaces - Research Questions - Approach - Separation of Concerns : Why and What? - Separating Presentation, Layout and Style - Case Studies - Conclusions and Future work
  271. 271. Contributions
  272. 272. Contributions - defined web user interface concerns
  273. 273. Contributions - defined web user interface concerns - separation of page presentation from structure
  274. 274. Contributions - defined web user interface concerns - separation of page presentation from structure - sublanguages for layout and style
  275. 275. Contributions - defined web user interface concerns - separation of page presentation from structure - sublanguages for layout and style - case studies for evaluation of sublanguages
  276. 276. Conclusions Used concept of Separation of Concerns by developing sublanguages describing those concerns Level of abstraction Development efforts Maintainability Reusability Quality
  277. 277. Conclusions Abstractions over CSS
  278. 278. Conclusions Abstractions over CSS - Layout
  279. 279. Conclusions Abstractions over CSS - Layout - Style constants
  280. 280. Conclusions Abstractions over CSS - Layout - Style constants - Style reuse - Style values referring to other definitions - Style addition/multiplication/etc.
  281. 281. Conclusions Addressed CSS problems
  282. 282. Conclusions Addressed CSS problems - missing functionality added
  283. 283. Conclusions Addressed CSS problems - missing functionality added - shielded excessive functionality
  284. 284. Conclusions Addressed CSS problems - missing functionality added - shielded excessive functionality - resolved poor design
  285. 285. Conclusions Addressed CSS problems - missing functionality added - shielded excessive functionality - resolved poor design - encapsulated implementation problems
  286. 286. Conclusions Case Studies
  287. 287. Conclusions Case Studies - expressivity
  288. 288. Conclusions Case Studies - expressivity - interesting abstraction
  289. 289. Conclusions Case Studies - expressivity - interesting abstraction - slightly reduced development efforts
  290. 290. Conclusions Case Studies - expressivity - interesting abstraction - slightly reduced development efforts - high-level abstractions
  291. 291. Conclusions Case Studies - expressivity - interesting abstraction - slightly reduced development efforts - high-level abstractions - default style
  292. 292. Problem areas - Finding robust transformations to CSS is difficult but rewarding initial effort is still great however, still room for improvement - Still a long development cycle
  293. 293. Future work
  294. 294. Future work - ‘Live’ editing of Style
  295. 295. Future work - ‘Live’ editing of Style - Personalization
  296. 296. Future work - ‘Live’ editing of Style - Personalization - Style and layout constraints
  297. 297. Future work - ‘Live’ editing of Style - Personalization - Style and layout constraints - Style assistant
  298. 298. Future work - ‘Live’ editing of Style - Personalization - Style and layout constraints - Style assistant - Separate remaining web user interface concerns
  299. 299. Future work - ‘Live’ editing of Style - Personalization - Style and layout constraints - Style assistant - Separate remaining web user interface concerns - More eye-candy
  300. 300. Questions?

×