Towards cross-platfrom application development
description
Transcript of Towards cross-platfrom application development
![Page 1: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/1.jpg)
![Page 2: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/2.jpg)
2
![Page 3: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/3.jpg)
3
![Page 4: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/4.jpg)
4
![Page 5: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/5.jpg)
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
![Page 6: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/6.jpg)
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
![Page 7: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/7.jpg)
7
A cross-platform framework
![Page 8: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/8.jpg)
8
![Page 9: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/9.jpg)
9
Run an application
DAEnvironment newplatform: DATestPlateform desktop800x600 ;requirements: DATestRequirements mobileAndDesktop;adaptation: DAMorphAdaptation new;
withinDo: [ MyContactsApplication new open
]
DAEnvironment newplatform: DATestPlateform desktop800x600 ;requirements: DATestRequirements mobileAndDesktop;adaptation: DAMorphAdaptation new;
withinDo: [ MyContactsApplication new open
]
![Page 10: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/10.jpg)
10
![Page 11: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/11.jpg)
11
![Page 12: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/12.jpg)
12
What is an object in Dali
● Made of entities– Properties
– Behaviors
– GUI
![Page 13: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/13.jpg)
13
![Page 14: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/14.jpg)
14
Modeling objects
<dali:#mobile>
ContactItemWidget>>declareDetailsButton
^ DAButton newrid: #detailsButton;backgroundColor: Color lightGray;yourself
![Page 15: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/15.jpg)
15
DATestPlateform desktop800x600
![Page 16: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/16.jpg)
16
Declaring properties
ContactItemWidget>>declareContactModel<dali>^ DAProperty new
rid: #contactModel;kind: #ContactModel;yourself
![Page 17: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/17.jpg)
17
Declaring behaviours
ContactItemWidget>>declareClickReaction<dali:#mobile>^ DAReaction new
event: DAClickEvent;senderAccessor: #detailsButton asDaliAccessor;opReference: #openDetails;yourself
![Page 18: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/18.jpg)
18
What is an object in Dali
● Made of entities– Properties
– Behaviors
– GUI
● According to the platform– An entity may be used or not
![Page 19: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/19.jpg)
19
![Page 20: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/20.jpg)
20
![Page 21: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/21.jpg)
21
![Page 22: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/22.jpg)
22
http://www.w3.org/TR/CSS2/box.html#margin-properties
![Page 23: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/23.jpg)
23
Styles API
DATWithMargin >> declareMarginTopDATWithMargin >> declareMarginBottomDATWithMargin >> marginTopDATWithMargin >> marginTop:DATWithMargin >> marginBottomDATWithMargin >> marginBottom:...
DATWithMargin >> declareMarginTopDATWithMargin >> declareMarginBottomDATWithMargin >> marginTopDATWithMargin >> marginTop:DATWithMargin >> marginBottomDATWithMargin >> marginBottom:...
● According to the W3C CSS standard● Implemented using Traits
![Page 24: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/24.jpg)
24
Events API
● According to the W3C DOM Events standard
http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click
![Page 25: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/25.jpg)
25
Events API
● According to the W3C CSS standard● Implemented using class hierarchy and Traits
DATWithOnClickEvent >> dispatchClickEventDATWithOnClickEvent >> onClick:...
DATWithOnClickEvent >> dispatchClickEventDATWithOnClickEvent >> onClick:...
![Page 26: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/26.jpg)
26
Example
DAWidget subclass: #MyWidgetuses: DATWithOnClickEvent + DATWithMargininstanceVariableNames: ''classVariableNames: ''category: 'Dali-Widget-Example'
DAWidget subclass: #MyWidgetuses: DATWithOnClickEvent + DATWithMargininstanceVariableNames: ''classVariableNames: ''category: 'Dali-Widget-Example'
![Page 27: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/27.jpg)
27
In a nutshell
● Single development environment● Single application model● Agile approach● Widget APIs according to well known standards
![Page 28: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/28.jpg)
28
Future Work
● Whole application generation
● Aspect oriented mechanism in addition to the use of pragmas
● Slot perspectives
![Page 29: Towards cross-platfrom application development](https://reader034.fdocuments.net/reader034/viewer/2022052619/555bdf00d8b42a33078b48a6/html5/thumbnails/29.jpg)
29
Thank you !