1 Einleitung

23

1.1 Historie des Frameworks

23

1.2 Ausblick

26

2 Grundlagen

27

2.1 Architekturüberblick

28

2.2 BSP-Programmiermodelle

30

2.3 Web Client Framework

34

2.4 Tag-Bibliotheken

37

2.5 Web-Client-Komponenten

40

2.6 Anwendungsrahmen

44

2.7 Switch Framework und Erweiterungspakete

45

3 Unterschiede in der Entwicklung von Web Dynpro (ABAP) und Web Client

47

3.1 Unterschiede im Design

47

3.2 Werkzeuge

50

3.3 Unterstützung durch Code-Generierung

52

3.4 Darstellung der UI-Komponenten

53

3.5 UI-Designer und Konfigurationstool

54

3.6 Kontext und Kontextknoten

58

3.7 Controller und deren Methoden

62

3.8 Komponentennavigation

63

4 Generic Interaction Layer

65

4.1 Architekturübersicht

65

4.2 Objektmodell

67

4.2.1 Allgemeine Definitionen

67

4.2.2 Objekte

67

4.2.3 Relationen

69

4.3 Unterstützte Operationen

70

4.4 Datencontainer

73

4.5 Meldungskonzept

75

4.6 GenIL-Komponenten

77

4.6.1 Komponentendefinition und Komponentensets

78

4.6.2 Anforderungen an das Verhalten einer Komponente

80

4.7 Verwendung des GenILs

81

4.8 Beispielkomponente SAMPLE

82

5 Business Object Layer

85

5.1 BOL-API

86

5.2 BOL-Core

88

5.2.1 Initialisierung

88

5.2.2 Erweitern des Objektmodells

89

5.2.3 Sammelmethoden

90

5.3 Such-Services

91

5.3.1 Einfache Suchen

91

5.3.2 Dynamische Suchen

92

5.4 Traversieren durch Objekthierarchien

93

5.4.1 Lesen von Daten

93

5.4.2 Verfolgen von Relationen

95

5.4.3 Parent- und Root-Beziehung

96

5.5 Objektbearbeitung

97

5.5.1 Anlegen und Löschen von Wurzelobjekten

97

5.5.2 Ändern von Attributen

98

5.5.3 Anlegen und Löschen von Unterobjekten

99

5.5.4 Objektmethoden

100

5.5.5 Dynamische Objekteigenschaften

101

5.5.6 Zustände von BOL-Entitäten

101

5.5.7 Meldungen

102

5.6 Transaktionsverwaltung

104

5.6.1 Transaktionszyklus

104

5.6.2 Transaktionskontexte

106

5.7 Collections

107

5.7.1 Grundfunktionen

107

5.7.2 Einzel- und Mehrfachselektion

108

5.7.3 Iteratoren

109

5.7.4 Sortieren und Filtern

110

5.7.5 Spezielle Collections

112

5.8 BPath

113

5.8.1 Gemeinsamkeiten und Unterschiede zu XPath

114

5.8.2 Integration in die BOL-API

115

5.8.3 Erste Schritte mit BPath

116

5.8.4 Ergebnisdefinition

118

5.8.5 Fortgeschrittene Funktionen

120

5.8.6 Modellprüfung

121

5.9 Integration ins UI-Framework

122

6 Werkzeuge

125

6.1 Komponenten-Workbench

126

6.1.1 Komponentenstruktur-Browser

129

6.1.2 Detailstruktur-Anzeige

131

6.1.3 Runtime-Repository-Details

135

6.1.4 Konfiguration

136

6.1.5 Runtime Repository Editor

146

6.1.6 BOL-Modell-Browser

151

6.1.7 Assistenten

152

6.2 GenIL-Modell-Browser

154

6.3 GenIL-Modellierungseditor

158

6.4 BOL-Browser

159

6.5 Upgrade-Support und Prüfwerkzeuge

164

6.5.1 Zentrales Prüfwerkzeug

165

6.5.2 Abgleich von Runtime Repositorys

169

7 Bausteine der UI-Implementierung

175

7.1 Views und Controller

175

7.1.1 Controller und Kontext

175

7.1.2 Event Handler

177

7.1.3 Plugs

178

7.1.4 Kontext

181

7.1.5 View-Kontext

191

7.1.6 View-Layout

196

7.2 UI-Komponenten

197

7.2.1 Controller-Typen

197

7.2.2 Runtime Repository

200

7.2.3 Kontextknotenbindung

203

7.2.4 Navigation

206

7.3 Zusammengesetzte Anwendungen

214

7.3.1 Komponentenschnittstelle

215

7.3.2 Verwendung von UI-Komponenten

217

7.4 View-Typen

221

7.4.1 Formular-View

221

7.4.2 Tabellen-View

225

7.4.3 Baumstruktur-View

227

7.4.4 Viewset

230

7.5 Seitentypen

232

7.5.1 Suchseiten

232

7.5.2 Übersichtsseiten

237

7.5.3 Bereichsstartseiten

241

7.5.4 Geführte Aktivitäten

242

8 Generische Anwendungsdienste

247

8.1 Komponentenübergreifende Navigation

247

8.2 Konzept: Führende Entität

252

8.3 Meldungsausgabe

253

8.3.1 Einstellungen zur Meldungsleiste

255

8.3.2 Ausgabe einer Meldung in der Meldungsleiste

257

8.3.3 Meldungsfilter

260

8.3.4 Meldungsersetzung

262

8.3.5 Meldungen mit Feldbezug

263

8.4 Viewgruppen-Kontext

265

8.5 Breadcrumbs

272

8.5.1 Funktionsweise der Navigationshistorie

272

8.5.2 Arten der Aufzeichnung

276

8.5.3 Historientypen

277

8.5.4 Systemeinstellungen

279

8.6 Generische Mussfeld-Prüfung

279

8.7 Pop-up-Dialogfenster

281

8.7.1 Pop-up für Abfragen

282

8.7.2 Pop-up zur View-Darstellung

284

8.8 Data-Loss-Popup

286

8.9 Schaltflächen

290

8.9.1 Schaltflächen in der Arbeitsbereichsfunktionsleiste

290

8.9.2 Schaltflächen in Zuordnungsblöcken

293

8.9.3 Tag »THTMLB:Button«

295

8.10 Internationalisierung

295

8.10.1 Online Text Repository

296

8.10.2 Setzen von Arbeitstiteln

297

9 Design Layer

299

9.1 Architekturübersicht

300

9.1.1 Designzeit

301

9.1.2 Laufzeit

302

9.2 Definitionen

302

9.2.1 UI-Objekttypen

302

9.2.2 Designobjekte

303

9.2.3 Designs

304

9.2.4 Generische Objekttypen

306

9.2.5 Referenz-Designobjekte

306

9.3 Zuordnung von Design-Layer-Definitionen

307

9.4 Laufzeitverhalten

310

9.5 Anwendung des Design Layers zur UI-Anpassung

313

9.5.1 Zentrale Änderung von Feldbezeichnern oder Ausblenden von Feldern

313

9.5.2 Einsatz des Design Layers bei Objekterweiterungen

314

9.6 Weiterführende Themen

314

9.6.1 Speicheroptimierung beim Einsatz des Design Layers

315

9.6.2 Hilfe bei der Fehleranalyse

315

9.7 Neuerungen mit SAP CRM 7.0 EHP1

316

10 Anpassung von Benutzeroberflächen

317

10.1 Tags

318

10.2 Verwendung von Tags auf BSP-Views

320

10.3 Datenbindung

325

10.4 THTMLB-Tag-Bibliothek

328

10.4.1 inputField

329

10.4.2 textView

331

10.4.3 textArea

333

10.4.4 label

334

10.4.5 image

335

10.4.6 checkbox

336

10.4.7 dropdownListBox

337

10.4.8 button

338

10.4.9 link

339

10.4.10 cellerator

340

10.4.11 tableview

346

10.4.12 tree

347

10.5 Wichtige CHTMLB-Tags

349

10.5.1 config

352

10.5.2 configCellerator

353

10.5.3 configTable

355

10.5.4 configTree

355

10.6 Einbindung von HTML und JavaScript

355

10.7 Browserbesonderheiten

357

10.8 JavaScript-Funktionen des Web Clients

361

10.9 Cascading Style Sheets und Motive

363

10.9.1 Struktur der Motiv-CSS-Dateien

366

10.9.2 Kopieren und Anpassen von CSS-Dateien

372

10.9.3 Motivanpassungen in EHP1

374

10.9.4 Beispiele für CSS-Anpassungen

379

11 Delta-Handling und fortgeschrittene Anpassungen der Benutzeroberfläche

383

11.1 HTTP-Kommunikation und Seitenanpassung in Webapplikationen

383

11.2 Automatisches Delta-Handling

386

11.3 Techniken zum Einsatz der AJAX-Methodik im Web Client

392

11.4 Zugriff auf Objekte des Web Client UIs mittels JavaScript

396

11.5 Effiziente Einbindung von JavaScript

400

11.6 Entwicklung neuer Tag-Bibliotheken

406

11.6.1 Anlegen einer Testkomponente für das neue Tag

408

11.6.2 Anlegen einer neuen BSP-Extension

409

11.6.3 Anlegen eines neuen BSP-Elements

410

11.6.4 Element-Handler-Klasse

412

11.6.5 Elementare Programmierung der Element-Handler-Klasse

416

11.6.6 Tag-Programmierung mit Datenbindung

418

11.6.7 Zusammengesetzte BSP-Elemente (Composite Tags)

422

11.6.8 Komplexe Tags

426

11.6.9 Tipps zur Tag-Entwicklung

439

12 Flash Islands und andere aktive Inhalte

443

12.1 Flash Islands

446

12.2 THTMLB:flashIsland

449

12.3 THTMLB:flashIslandDatasource

451

12.4 THTMLBX:flashIslandProperty

452

12.5 Ereignisse mit dem Tag »THTMLB:flashIslandEvent«

453

12.6 Erstellen einer Flash-Islands-Komponente

456

12.7 Tipps zum Einbinden aktiver Inhalte

461

14 Session-Verwaltung und Proxy-Server

479

14.1 Start der Session

481

14.2 Ende der Session

484

14.3 Neustart von Sessions

486

14.4 Verwendung von Proxys

487

14.5 URL-Generierung in einer AS-ABAP-/Web-Dispatcher-Konfiguration

492

14.6 Konfiguration der Systemanmeldung

496

15 Web-2.0-Features im Web Client

501

15.1 Mash-ups

501

15.2 Feeds

509

16 Erweiterungskonzepte

519

16.1 Application Enhancement Tool

519

16.1.1 Architekturübersicht

520

16.1.2 Umfang der Erweiterung

522

16.1.3 Systemeinstellungen vor dem Einsatz des AET

523

16.1.4 Hinzufügen neuer Felder

525

16.1.5 Berechnete Felder und Anwendungsreferenzen

529

16.1.6 Hinzufügen neuer Tabellen

531

16.1.7 Application Enhancement Tool und Easy Enhancement Workbench

534

16.2 Rapid Applications

537

16.2.1 Datenbanktabellen-basierte Rapid Applications

538

16.2.2 Webservice-basierte Rapid Applications

543

16.2.3 Einbettung in Übersichtsseiten

545

16.3 UI-Komponenten

548

16.3.1 Erweiterungsset

550

16.3.2 Erweiterung von UI-Komponenten

552

16.3.3 Erweiterung von Controllern und Views

554

16.3.4 Erweiterung von Controller-Kontexten

557

16.3.5 Löschen von Erweiterungen

559

17 Tipps und Hinweise für die Entwicklung

563

17.1 Häufige Fehlersituationen

563

17.1.1 Probleme beim Laden von Runtime Repositorys

563

17.1.2 Exception-Anzeige

566

17.1.3 Exception-Meldung im Plug-in-Modus

568

17.2 Hilfe bei der Programmanalyse

570

17.2.1 Pop-up »System Information«

571

17.2.2 Pop-ups »View-Lokation« und »View-Hierarchie«

572

17.2.3 Conditional Breakpoints

573

17.2.4 Wichtige Checkpoint-Gruppen

576

17.2.5 Anzeige »not bound«

577

17.3 Systemoptimierung

578

17.3.1 Vorgenerieren von Laufzeit-Objekten

578

17.3.2 GenIL-Modelldaten im Shared-Objects-Speicher

580

17.4 Verschiedenes

583

18 Hinweise zur Performanceoptimierung

585

18.1 Performance Tracker

585

18.2 Schnelle Erzeugung neuer Tabellenzeilen

587

18.3 Zeilenselektion ohne Serverereignis

592

19 Kochrezepte für die Praxis

597

19.1 Erstellen eines GenIL-Wurzelobjekts

597

19.1.1 Data Dictionary

598

19.1.2 Komponentenklasse

599

19.1.3 Wurzel-Behandlerklasse

606

19.1.4 Wurzelobjektklasse

606

19.1.5 Wurzelobjekt-API

613

19.1.6 Abschlussarbeiten

618

19.2 Anlegen einer neuen Entität mit dem BOL

619

19.3 Ausführen einer BOL-Suchanfrage

620

19.4 Anlegen einer neuen Komponente mithilfe eines Assistenten

621

19.5 Arbeit mit Wertknoten

626

19.6 Arbeit mit Mixed Nodes

633

19.7 Erstellen einer Wertehilfe

634

19.8 Erstellen einer Auswahlliste

639

19.9 Erstellen eines Event Handlers

643

19.10 Dynamische Navigation

645

19.11 Navigation zwischen zwei Views einer UI-Komponente

647

19.12 Erstellen eines Viewsets

654

19.13 Erstellen eines Baumstruktur-Views

657

19.14 Erstellen einer neuen Tabellen-Action

665

19.15 Erstellen einer One-Click Action

668

19.16 Erstellen von Tabellen mit Iterator-Objekt

670

19.16.1 Komponente mit konfigurierbarer Tabelle und Iterator erzeugen

672

19.16.2 Komponente mit nicht konfigurierbarer Tabelle und Iterator erzeugen

685

19.17 Erstellen von Formularen mit Iterator-Objekt

689

19.18 Zuordnung eines Views zu einem Window

694

19.19 Erweiterung einer Standard-UI-Komponente

696

19.20 Erweiterung einer UI-Komponente entfernen

698

19.21 Einbinden einer UI-Komponente in die Navigationsleiste

700