Towards cross-platfrom application development IWST 2014 at ESUG, Cambridge

2. 2

3. 3

4. 4

5. 5
In short
●Native development context =
–An application model (data and behavior)
–A GUI
●Cross-platform development context =
–An application model (data and behavior)
–A GUI
– + A platform

6. 6
Our goals
●Whatever the platform
–A single development environment
–A single application model
–Be allowed to run an application without code generation
–Be allowed to use code generation but late in the development process

7. 7
A cross-platform framework

8. 8

9. 9
Run an application
DAEnvironment new
platform: DATestPlateform desktop800x600 ;
requirements: DATestRequirements mobileAndDesktop;
adaptation: DAMorphAdaptation new;
withinDo: [
MyContactsApplication new open
]
DAEnvironment new
platform: DATestPlateform desktop800x600 ;
requirements: DATestRequirements mobileAndDesktop;
adaptation: DAMorphAdaptation new;
withinDo: [
MyContactsApplication new open
]

10. 10

11. 11

12. 12
What is an object in Dali
● Made of entities
– Properties
– Behaviors
– GUI

13. 13

14. 14
Modeling objects
<dali:#mobile>
ContactItemWidget>>declareDetailsButton
^ DAButton new
rid: #detailsButton;
backgroundColor: Color lightGray;
yourself

15. 15
DATestPlateform desktop800x600

16. 16
Declaring properties
ContactItemWidget>>declareContactModel
<dali>
^ DAProperty new
rid: #contactModel;
kind: #ContactModel;
yourself

17. 17
Declaring behaviours
ContactItemWidget>>declareClickReaction
<dali:#mobile>
^ DAReaction new
event: DAClickEvent;
senderAccessor: #detailsButton asDaliAccessor;
opReference: #openDetails;
yourself

18. 18
What is an object in Dali
● Made of entities
– Properties
– Behaviors
– GUI
● According to the platform
– An entity may be used or not

19. 19

20. 20

21. 21

22. 22
http://www.w3.org/TR/CSS2/box.html#margin-properties

23. 23
Styles API
DATWithMargin >> declareMarginTop
DATWithMargin >> declareMarginBottom
DATWithMargin >> marginTop
DATWithMargin >> marginTop:
DATWithMargin >> marginBottom
DATWithMargin >> marginBottom:
...
DATWithMargin >> declareMarginTop
DATWithMargin >> declareMarginBottom
DATWithMargin >> marginTop
DATWithMargin >> marginTop:
DATWithMargin >> marginBottom
DATWithMargin >> marginBottom:
...
● According to the W3C CSS standard
● Implemented using Traits

24. 24
Events API
● According to the W3C DOM Events standard
http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click

25. 25
Events API
● According to the W3C CSS standard
● Implemented using class hierarchy and Traits
DATWithOnClickEvent >> dispatchClickEvent
DATWithOnClickEvent >> onClick:
...
DATWithOnClickEvent >> dispatchClickEvent
DATWithOnClickEvent >> onClick:
...

26. 26
Example
DAWidget subclass: #MyWidget
uses: DATWithOnClickEvent + DATWithMargin
instanceVariableNames: ''
classVariableNames: ''
category: 'Dali-Widget-Example'
DAWidget subclass: #MyWidget
uses: DATWithOnClickEvent + DATWithMargin
instanceVariableNames: ''
classVariableNames: ''
category: 'Dali-Widget-Example'

27. 27
In a nutshell
● Single development environment
● Single application model
● Agile approach
● Widget APIs according to well known standards

28. 28
Future Work
● Whole application generation
● Aspect oriented mechanism in addition to the
use of pragmas
● Slot perspectives

29. 29
Thank you !