Kerrstin klemishc c-aise2013_

CAiSE 2013 Kerstin Klemisch, Ingo Weber, Boualem

Benatallah

In collaboration with SAP

Context-aware UI Component Reuse

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

Agenda



Motivation

Empower UI-intensive application development


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

Blackberry Symbian

HTC

275000 iPad apps/March 2012

577692 Android apps/2012


Android

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


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


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 ��


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


Agenda



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


Other contextual data

Proposed Approach: Context-aware UI development


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.

Positioning of our work


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

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



2. Composition

Which components belong to a UI?


Horizontal


3. Layout

How are UI components positioned on a screen?

Vertical



4. Theme

Which style sheets do we apply to our UI?

Online Banking– CW Bank Online Banking - Westpac



5. Binding

To which web services is our UI bound to?

SalesOrderERPCreateRequestConfirmation_In_V2

SalesOrderERPUpdateRequestConfirmation_In

Create SO Change SO


Data Model for representing UI Recommendations

Rule

Component contains

1..n 1

Is combined with

1

1

1

1

1..n

Layout

Binding

Theme

Composition

Is part of

1

1

1

1

Is p

art o

f

Business Scenario

Device 1

1

Cse 2011/ Context-aware GUI development / Kerstin Klemisch / 19

Is combined with

Is combined with

1..n

Context

Forms the condition

1..n Recommen

dation

Forms the conclusion


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


Agenda



Evaluation of the Approach

To be investigated: What is the impact of rules on the productivity?

Number of rules

Productivity of UI development

?


Evaluation Results I


0

20

40

60

80

100

120

140

1 11 21 31 41 51 61 71 81 91 101 111

# ru

les/

com

posi

tion

s

# user interfaces

UI Rules and Compositions

without UISE

# Rules

# Compositons

Evaluation Results II


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

% C

ases

# Changes

Service Orders

Sales Orders

Contracts

Service orders: 5.6

Sales orders: 2.6 Contracts: 3.6

average # changes

Agenda



Conclusion


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)

Technology

Kerrstin klemishc c-aise2013_