1. CAiSE 2013
Kerstin Klemisch, Ingo Weber, Boualem
Benatallah
In collaboration with SAP
Context-aware UI Component
Reuse

2. Agenda
I. Motivation
II. Proposed Approach
III. Evaluation
IV. Conclusion and Future Work
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 2

3. Agenda
I. Motivation
II. Proposed Approach
III. Evaluation
IV. Conclusion and Future Work
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 3

4. Motivation
Empower UI-intensive application
development
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 4

5. Motivation
The development of user interfaces represents one of the most time
consuming tasks in the overall application development cycle (Yu 2008)
iPhone, iPad
Desktop, Web
BlackberrySymbian
HTC
275000 iPad
apps/March
2012
577692 Android apps/
2012
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 5
Android

6. Challenges for UI developers I
Adaptation to business scenarios
Sales Order Management in SAP CRM 7.0
Standard application screens
have to be adapted to
specific business processes
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 6

7. Business Scenarios
Sales Order
Management
Replenishment
Order
Standard
Order
Material
Management
Inventory
Management
Order
Business
Scenario
Quotation
Web Auction
Quotation
“A business scenario is essentially a complete description
of a business problem”, TOGAF 2006
v UI Template
v Mapping Template
v Number of Services
Internet
Sales
Standard
Quotation
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 7

8. Sales Order Management in SAP CRM 7.0
Adaptation of screens to
various mobile devices,
screen sizes, platform
characteristics needed
SAP on the
Blackberry
SAP Mobile Sales for Handheld 5.0
SAP on the iPad
Challenges for UI developers II
Adaptation to consumption platforms
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 8

9. Consumption Platforms
Mobile
Brand: RIM BlackBerry 9530
Size: 50x66mm
Resolution: 360x480px
Pointing method: touchscreen
Keyboard type: qwerty
Desktop
Handset
Devices
PDA
Symbian
Multitouch
WebOs
Tablet
Blackberry
WIN
Mobile
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 9

10. Agenda
I. Motivation
II. Proposed Approach
III. Evaluation
IV. Conclusion and Future Work
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 10

11. Proposed Approach: Context-aware UI
development
Consumption Platform
Business Scenario
UI Recommendation
UISE Prototype
v UI Widget
v Specific Service and
Mapping linked to it
v Generic Service linked to it
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 11
Other contextual data

12. Proposed Approach: Context-aware UI
development
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 12
Apps Layer
Mobile Apps, Web Apps, Desktop etc.
Capture UI Programming Knowledge, query it, reuse it
Service Layer
Services added to reusable Widgets
UI Knowledge Layer
Entities representing UIs, UI Components, Rules, etc.

13. Positioning of our work
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 13
Other approaches Our approach
Context-awareness
Ø Focus on usability and utility
Ø Current approaches for the adaptation to
platforms do not work properly
• Platforms [Butter (2007), Martinez-
Ruiz (2008)]
Ø We are making use of context to trigger
reuse and to push complex UI development
tasks to the platform
Patterns
Ø Limited number of patterns
• UI [Tidwell (1998), welie.com ]
Ø Number of patterns is incremental
Reuse
Ø Code oriented, expert knowledge required
• Code Search [McMillan (2012), Reiss
(2009)]
Ø Reuse of UIs
Ø Non-expert user can create UIs
UIs and SOA
Ø Goal: Ease the UI creation in SOA
Ø User is not guided, needs to have domain
knowledge
• Parsing web service descriptions +
annotation [ServFace (2010),
Izquierdo (2009)]
Ø Guidance of the UI developer
Ø UI knowledge is gained in an incremental
manner from real-world development

14. How can we create UI recommendations?
1. UI Components
Investigation of 45
variations of sales
order management
screens in the SAP
CRM system. How
could we recreate them
in an efficient way?
= We could identify
variations of 3 coarse-
grained UI
components out of
which all screens can
be combined of
Final UI
UI Element Header
UI Element Date
Section
UI Element Item
Section
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 14

15. How can we create UI recommendations?
2. Composition
Which components belong to a UI?
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 15

16. Horizontal
How can we create UI recommendations?
3. Layout
How are UI components positioned on
a screen?
Vertical
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 16

17. How can we create UI recommendations?
4. Theme
Which style sheets do we apply to our UI?
Online Banking– CW Bank Online Banking - Westpac
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 17

18. How can we create UI recommendations?
5. Binding
To which web services is our UI bound to?
SalesOrderERPCreateRequestConfirmati
on_In_V2
SalesOrderERPUpdateRequestConfi
rmation_In
Create SO Change SO
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 18

19. Data Model for representing UI Recommendations
Rule
Component
contains
1..n 1
Is combined
with
1
1
1
1
Layout
Binding
Theme
Composition
Ispartof
1
1
1
1
Ispartof
Business
Scenario
Device
1
1
Is combined
with
Is combined
with
1..n
Context
Forms the condition
1..n
Recommen
dation
Forms the conclusion
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 19

20. RDR-based Representation of UI Advice Rules
Rule 1:
IF Business Scenario = Sales Order
Management AND Device = Mobile,
THEN Layout = 2 (Vertical), Binding = 45
(SalesOrderCreate), Composition = 67, Theme
= 455 (GeneralMobile)
except
If not
Rule 0:
IF Business Scenario = “not defined “AND
Device= “not defined”,
THEN Layout = 2 (Vertical),Binding= 0 (“”)
Composition = 1, Theme = 455
(GeneralMobile)
Rule 3:
IFBusiness Scenario = Sales Order
Management , Telesales AND
Device = Mobile, PDA AND Pointing
Method= Touch screen,
THEN Layout = 2 (Vertical), Binding = 45
(SalesOrderCreate), Composition = 68, Theme
= 457 (MobilePDA)
except
Rule 2:
IF Business Scenario = Sales Order
Management AND Device = Desktop,
THEN Layout = 1 (Horizontal), Binding = 45
(SalesOrderCreate), Composition = 67, Theme
= 434 (GeneralDesktop)
Rule 5:
IFBusiness Scenario = Sales Order
Management , Telesales AND
Device = Desktop, Mac AND
Resolution=1440x900,
THEN Layout = 1 (Horizontal), Binding = 45
(SalesOrderCreate), Composition = 67, Theme
= 434 (DesktopMac)
Rule 4:
IF Business Scenario = Quotation
Management AND Device = Desktop,
THEN Layout = 1 (Horizontal), Binding = 45
(QuotationCreate), Composition = 67, Theme
= 434 (GeneralDesktop)
If not
Single Classification
Ripple-Down Rules
(SCRDR) Approach
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 20

21. Agenda
I. Motivation
II. Proposed Approach
III. Evaluation
IV. Conclusion and Future Work
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 21

22. Evaluation of the Approach
To be investigated:
What is the impact of rules on the productivity?
Number of
rules
Productivity of UI development
?
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 22

23. Evaluation Results I
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 23
0
20
40
60
80
100
120
140
1 11 21 31 41 51 61 71 81 91 101 111
#rules/compositions
# user interfaces
UI Rules and Compositions
without UISE
# Rules
# Compositons

24. Evaluation Results II
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 24
0.0
5.0
10.0
15.0
20.0
25.0
30.0
35.0
40.0
45.0
0 1 2 3 4 5 6 7 8 10 12
%Cases
# Changes
Service Orders
Sales Orders
Contracts
Service orders: 5.6
Sales orders: 2.6
Contracts:
3.6
average #
changes

25. Agenda
I. Motivation
II. Proposed Approach
III. Evaluation
IV. Conclusion and Future Work
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 25

26. Conclusion
CAiSE 2013/ Context-aware UI Component Reuse / K. Klemisch, I. Weber, B. Benatallah / 26
Future Work
• Productivity increase from UI reuse is
possible where
• at least some of the UI components
required are available
• consistency of UIs is given or desired
• Evaluate our approach for
• Suggestion of multiple UIs
• mobile applications
• for the variation of multiple dimensions of
context (business scenarios and platforms)