PRADO - Erstellung wiederverwendbarer Enterprise-Applikationen

PRADO Erstellung wiederverwendbarer Enterprise-Webapplikationen

Carsten Lucke PRADO Sprecher: Carsten Lucke • Sofware-Ingenieur bei der sd&m AG, München • Aktives Mitglied der sd&m Client- Community • PEAR und PECL Entwickler • Schreibt für Fachzeitschriften/-bücher über diverse PHP-Themen 2

Carsten Lucke PRADO Agenda • Architektur von (Web-)Clients • Kurze Einführung in PRADO • Data-Binding in Web-Clients • Event-Binding in Web-Clients • State-Binding in Web-Clients • Wiederverwendung von Komponenten 3

Carsten Lucke PRADO Agenda > Architektur von (Web-)Clients Kurze Einführung in PRADO Data-Binding in Web-Clients Event-Binding in Web-Clients State-Binding in Web-Clients Wiederverwendung von Komponenten 4

Carsten Lucke PRADO Technische Infrastruktur von Web-Clients 5

Carsten Lucke PRADO Technische Infrastruktur von Web-Clients PC Client (Browser-Teil) Webserver Client (Server-Teil) Application- server Anwendungskern Persistenz DB-Server Datenbank 5

Carsten Lucke PRADO Technische Infrastruktur von Web-Clients PC Client (Browser-Teil) Webserver Client (Server-Teil) Synchronisation der Zustände notwendig Application- server Anwendungskern Persistenz DB-Server Datenbank 5

Carsten Lucke PRADO Einblicke in eine Dialogarchitektur 6

Carsten Lucke PRADO Einblicke in eine Dialogarchitektur GUI-Bibliothek (JSF, PRADO, Tapestry, ...) Dialog Präsentation Dialoglogik 6

Carsten Lucke PRADO Einblicke in eine Dialogarchitektur GUI-Bibliothek (JSF, PRADO, Tapestry, ...) Dialog Präsentation Präsentations- daten Dialoglogik Datenhaltung 6

Carsten Lucke PRADO Einblicke in eine Dialogarchitektur GUI-Bibliothek (JSF, PRADO, Tapestry, ...) Dialog Präsentation Präsentations- Präsentations- daten ereignisse Dialoglogik Aktions- Datenhaltung verarbeitung 6

Carsten Lucke PRADO Einblicke in eine Dialogarchitektur GUI-Bibliothek (JSF, PRADO, Tapestry, ...) Dialog Präsentation Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 6

Carsten Lucke PRADO Agenda Architektur von (Web-)Clients > Kurze Einführung in PRADO Data-Binding in Web-Clients Event-Binding in Web-Clients State-Binding in Web-Clients Wiederverwendung von Komponenten 7

Carsten Lucke PRADO Was ist PRADO? • Framework für Web- anwendungen in PHP5 • RAD-Ansatz • Programmierparadigma: • komponenten-basiert • ereignisgesteuert 8

Carsten Lucke PRADO PRADO Grundlagen • Eine PRADO-Seite besteht aus: 9

Carsten Lucke PRADO PRADO Grundlagen • Eine PRADO-Seite besteht aus: <com:TLabel ForControl=quot;uidquot; Text=quot;Username:quot; /> <com:TTextBox ID=quot;uidquot; /> • einem .page File für <com:TLabel ForControl=quot;pwquot; Text=quot;Password:quot; /> die GUI <com:TTextBox ID=quot;pwquot; TextMode=quot;Passwordquot; /> <com:TButton Text=quot;Loginquot; ID=quot;submitquot; OnClick=quot;loginClickedquot; /> 9

Carsten Lucke PRADO PRADO Grundlagen • Eine PRADO-Seite besteht aus: • einem .page File für class LoginPage extends TPage { die GUI .... } • einem .php File für die fachliche Logik 9

Carsten Lucke PRADO Agenda Architektur von (Web-)Clients Kurze Einführung in PRADO > Data-Binding in Web-Clients Event-Binding in Web-Clients State-Binding in Web-Clients Wiederverwendung von Komponenten 10

Carsten Lucke PRADO Datenzustände „php-only“ <form action=quot;<?php echo $_SERVER['PHP_SELF']; ?>quot; method=quot;postquot; > <input type=quot;textquot; name=quot;demoValuequot; /> <input type=quot;submitquot; value=quot;Continue →quot; /> </form> <pre> <?php print_r($_REQUEST); ?> </pre> 11

Carsten Lucke PRADO Datenzustände „php-only“ • Ausgangszustand der Maske 12

Carsten Lucke PRADO Datenzustände „php-only“ • Ausgangszustand der Maske • Eingabe eines Wertes und nachfolgend Klick auf „Continue“ 12

Carsten Lucke PRADO Datenzustände „php-only“ • Ausgangszustand der Maske • Eingabe eines Wertes und nachfolgend Klick auf „Continue“ • „POST-back“ Zustand 12

Carsten Lucke PRADO Datenzustände bei PRADO <com:TForm> <com:TTextBox ID=quot;demoValuequot; /> <com:TButton Text=quot;Continue →quot; /> </com:TForm> <pre> <com:TExpression Expression=quot;print_r($_REQUEST, true)quot; /> </pre> 13

Carsten Lucke PRADO Datenzustände bei PRADO • Ausgangszustand der Maske 14

Carsten Lucke PRADO Datenzustände bei PRADO • Ausgangszustand der Maske • Eingabe eines Wertes und nachfolgend Klick auf „Continue“ 14

Carsten Lucke PRADO Datenzustände bei PRADO • Ausgangszustand der Maske • Eingabe eines Wertes und nachfolgend Klick auf „Continue“ • „POST-back“ Zustand 14

Carsten Lucke PRADO Data-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) Dialog Präsentation Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 15

Carsten Lucke PRADO Data-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) • Synchronisation zwischen Präsen- Dialog Präsentation tationsdaten und Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialogdatenhaltung Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 15

Carsten Lucke PRADO Data-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) • Synchronisation zwischen Präsen- Dialog Präsentation tationsdaten und Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialogdatenhaltung • Konvertierung Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 15

Carsten Lucke PRADO Data-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) • Synchronisation zwischen Präsen- Dialog Präsentation tationsdaten und Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialogdatenhaltung • Konvertierung Dialoglogik • Formatierung Aktions- Dialog- Datenhaltung verarbeitung zustände 15

Carsten Lucke PRADO Data-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) • Synchronisation zwischen Präsen- Dialog Präsentation tationsdaten und Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialogdatenhaltung • Konvertierung Dialoglogik • Formatierung Aktions- Dialog- Datenhaltung verarbeitung zustände • Validierung 15

Carsten Lucke PRADO Data-Binding „php-only“ 16

Carsten Lucke PRADO Data-Binding „php-only“ <form action=quot;<?php echo $_SERVER['PHP_SELF']; ?>quot; method=quot;postquot;> <div> <label for=quot;usernamequot;>Username:</label> <input type=quot;textquot; name=quot;usernamequot; value=quot;<?php if(isset($_POST['username'])){ echo $_POST['username'];}?>quot; /> </div> <div> <label for=quot;passwordquot;>Password:</label> <input type=quot;passwordquot; name=quot;passwordquot; /> </div> <input type=quot;submitquot; name=quot;submitquot; id=quot;submitquot; value=quot;Login →quot; /> </form> <?php if (isset($_POST['submit'])) { ?> <div id=quot;resultquot;> <?php if ($_POST['username'] === 'luckec' && $_POST['password'] === 'test') { echo 'Access granted for ' . $_POST['username']; } else { echo 'Access denied for ' . $_POST['username']; } ?> </div> <?php } ?> 16

Carsten Lucke PRADO Data-Binding bei PRADO 17

Carsten Lucke PRADO Data-Binding bei PRADO <com:TForm> <div> <com:TLabel ForControl=quot;usernamequot; Text=quot;Username:quot; /> <com:TTextBox ID=quot;usernamequot; /> </div> <div> <com:TLabel ForControl=quot;passwordquot; Text=quot;Password:quot; /> <com:TTextBox ID=quot;passwordquot; TextMode=quot;Passwordquot; /> </div> <com:TButton Text=quot;Login →quot; ID=quot;submitquot; OnClick=quot;loginClickedquot; /> </com:TForm> <com:TPanel ID=quot;loginResultPanelquot;> <com:TLabel ID=quot;loginResultLabelquot; /> </com:TPanel> 17

Carsten Lucke PRADO Data-Binding bei PRADO <com:TForm> <div> <com:TLabel ForControl=quot;usernamequot; Text=quot;Username:quot; /> <com:TTextBox ID=quot;usernamequot; /> </div> <div> <com:TLabel ForControl=quot;passwordquot; Text=quot;Password:quot; /> <com:TTextBox ID=quot;passwordquot; TextMode=quot;Passwordquot; /> </div> <com:TButton Text=quot;Login →quot; ID=quot;submitquot; OnClick=quot;loginClickedquot; /> </com:TForm> <com:TPanel ID=quot;loginResultPanelquot;> <com:TLabel ID=quot;loginResultLabelquot; /> </com:TPanel> class DataBinding extends TPage { public function loginClicked($sender, $param) { $this->loginResultPanel->setVisible(true); if ($this->username->Text === 'luckec' && $this->password->Text === 'test') { $this->loginResultLabel->Text = 'Access granted for ' . $username; } else { $this->loginResultLabel->Text = 'Access denied for ' . $username; } } 17 }

Carsten Lucke PRADO Agenda Architektur von (Web-)Clients Kurze Einführung in PRADO Data-Binding in Web-Clients > Event-Binding in Web-Clients State-Binding in Web-Clients Wiederverwendung von Komponenten 18

Carsten Lucke PRADO Event-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) Dialog Präsentation Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 19

Carsten Lucke PRADO Event-Binding • Wertschöpfungskette GUI-Bibliothek (JSF, PRADO, Tapestry, ...) von Ereignissen Dialog Präsentation Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 19

Carsten Lucke PRADO Event-Binding • Wertschöpfungskette GUI-Bibliothek (JSF, PRADO, Tapestry, ...) von Ereignissen Dialog Präsentation • Präsentation- Präsentations- Präsentations- Präsentations- sereignisse ziehen daten ereignisse zustände i.d.R. Dialogereig- nisse nach sich Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 19

Carsten Lucke PRADO Event-Binding Quicksearch: <enter searchterm> Search • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + 20

Carsten Lucke PRADO Event-Binding Suchergebnis einschränken Quicksearch: <enter searchterm> Search • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + 20

Carsten Lucke PRADO Event-Binding Suchergebnis einschränken Editieren von Quicksearch: <enter searchterm> Search Einträgen • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + 20

Carsten Lucke PRADO Event-Binding Suchergebnis einschränken Editieren von Quicksearch: <enter searchterm> Search Einträgen • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + Hinzufügen/Löschen von Einträgen 20

Carsten Lucke PRADO Event-Binding „php-only“ Quicksearch: <enter searchterm> Search • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + 21

Carsten Lucke PRADO Event-Binding „php-only“ <form name=quot;tablequot; action=quot;<?php ... ?>quot; method=quot;postquot;> Quicksearch: <enter searchterm> Search • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + 21 </form>

Carsten Lucke PRADO Event-Binding „php-only“ <form name=quot;tablequot; action=quot;<?php ... ?>quot; method=quot;postquot;> Quicksearch: <enter searchterm> Search Quicksearch: <enter searchterm> Search <input type=quot;textquot; name=quot;inpQuickSearchquot; value=quot;<?php ...?>quot; /> <input type=quot;submitquot; name=quot;quicksearchquot; value=quot;Searchquot; /> • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + 21 </form>

Carsten Lucke PRADO Event-Binding „php-only“ <form name=quot;tablequot; action=quot;<?php ... ?>quot; method=quot;postquot;> Quicksearch: <enter searchterm> Search Quicksearch: <enter searchterm> Search <input type=quot;textquot; name=quot;inpQuickSearchquot; value=quot;<?php ...?>quot; /> <input type=quot;submitquot; name=quot;quicksearchquot; value=quot;Searchquot; /> <table> • Lastname Firstname <?php foreach($persons as $line) { <tr> Blankerts Arne <td><input type=quot;checkboxquot; value=quot;<?php ...?>quot; name=quot;...quot; /></td> <td> Kleine Frank <a Lucke href=quot;edit.php?userId=<?php ... ?>quot;> Carsten <img src=quot;edit.pngquot; /> Mordziol Sebastian </a> </td> Schaufelberger Gerd <td><?php echo $line['lastname']; ?></td> Schmidt Stephan <td><?php echo $line['ﬁrstname']; ?></td> </tr> } ?> </table> - + 21 </form>

Carsten Lucke PRADO Event-Binding „php-only“ <form name=quot;tablequot; action=quot;<?php ... ?>quot; method=quot;postquot;> Quicksearch: <enter searchterm> Search Quicksearch: <enter searchterm> Search <input type=quot;textquot; name=quot;inpQuickSearchquot; value=quot;<?php ...?>quot; /> <input type=quot;submitquot; name=quot;quicksearchquot; value=quot;Searchquot; /> <table> • Lastname Firstname <?php foreach($persons as $line) { <tr> Blankerts Arne <td><input type=quot;checkboxquot; value=quot;<?php ...?>quot; name=quot;...quot; /></td> <td> Kleine Frank <a Lucke href=quot;edit.php?userId=<?php ... ?>quot;> Carsten <img src=quot;edit.pngquot; /> Mordziol Sebastian </a> </td> Schaufelberger Gerd <td><?php echo $line['lastname']; ?></td> Schmidt Stephan <td><?php echo $line['ﬁrstname']; ?></td> </tr> } ?> </table> <input type=quot;submitquot; name=quot;removequot; value=quot;-quot; /> - + - + <input type=quot;submitquot; name=quot;addquot; value=quot;+quot; /> 21 </form>

Carsten Lucke PRADO Event-Binding mit PRADO Quicksearch: <enter searchterm> Search • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + 22

Carsten Lucke PRADO Event-Binding mit PRADO <com:TForm> Quicksearch: <enter searchterm> Search • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + </com:TForm> 22

Carsten Lucke PRADO Event-Binding mit PRADO <com:TForm> Quicksearch: <enter searchterm> Search Search <com:TTextBox ID=quot;inpQuickSearchquot; /> <com:TButton Text=quot;Searchquot; OnClick=quot;btnQuickSearchClickedquot; /> • Lastname Firstname Blankerts Arne Kleine Frank Lucke Carsten Mordziol Sebastian Schaufelberger Gerd Schmidt Stephan - + </com:TForm> 22

Carsten Lucke PRADO Event-Binding mit PRADO <com:TForm> Quicksearch: <enter searchterm> Search Search <com:TTextBox ID=quot;inpQuickSearchquot; /> <com:TButton Text=quot;Searchquot; OnClick=quot;btnQuickSearchClickedquot; /> <com:TDataGrid ID=quot;DataGridquot; OnItemCreated=quot;itemCreatedquot; • Lastname Firstname OnEditCommand=quot;editItemquot; Blankerts Arne ... > Kleine Frank <com:TCheckBoxColumn DataField=quot;checkedquot; ... /> Lucke Carsten <com:TEditCommandColumn ... /> Mordziol Sebastian <com:TBoundColumn Schaufelberger Gerd HeaderText=quot;Nachnamequot; DataField=quot;lastnamequot; /> Schmidt Stephan <com:TBoundColumn HeaderText=quot;Vornamequot; DataField=quot;ﬁrstnamequot; /> </com:TDataGrid> - + </com:TForm> 22

Carsten Lucke PRADO Event-Binding mit PRADO <com:TForm> Quicksearch: <enter searchterm> Search Search <com:TTextBox ID=quot;inpQuickSearchquot; /> <com:TButton Text=quot;Searchquot; OnClick=quot;btnQuickSearchClickedquot; /> <com:TDataGrid ID=quot;DataGridquot; OnItemCreated=quot;itemCreatedquot; • Lastname Firstname OnEditCommand=quot;editItemquot; Blankerts Arne ... > Kleine Frank <com:TCheckBoxColumn DataField=quot;checkedquot; ... /> Lucke Carsten <com:TEditCommandColumn ... /> Mordziol Sebastian <com:TBoundColumn Schaufelberger Gerd HeaderText=quot;Nachnamequot; DataField=quot;lastnamequot; /> Schmidt Stephan <com:TBoundColumn HeaderText=quot;Vornamequot; DataField=quot;ﬁrstnamequot; /> </com:TDataGrid> <com:TButton Text=quot;-quot; OnClick=quot;btnPersonDelClickedquot; /> - + <com:TButton Text=quot;+quot; OnClick=quot;btnPersonAddClickedquot; /> </com:TForm> 22

Carsten Lucke PRADO Agenda Architektur von (Web-)Clients Kurze Einführung in PRADO Data-Binding in Web-Clients Event-Binding in Web-Clients > State-Binding in Web-Clients Wiederverwendung von Komponenten 23

Carsten Lucke PRADO State-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) Dialog Präsentation Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 24

Carsten Lucke PRADO State-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) • Visualisierung des Dialog Dialogzustands Präsentation Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 24

Carsten Lucke PRADO State-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) • Visualisierung des Dialog Dialogzustands Präsentation • Edit/Display Modus Präsentations- Präsentations- Präsentations- daten ereignisse zustände Dialoglogik Aktions- Dialog- Datenhaltung verarbeitung zustände 24

Carsten Lucke PRADO State-Binding GUI-Bibliothek (JSF, PRADO, Tapestry, ...) • Visualisierung des Dialog Dialogzustands Präsentation • Edit/Display Modus Präsentations- Präsentations- Präsentations- daten ereignisse zustände • Dialogkontext- abhängige Darstel- Dialoglogik lung von Elementen Aktions- Dialog- Datenhaltung verarbeitung zustände 24

Carsten Lucke PRADO State-Binding „php-only“ 25

Carsten Lucke PRADO State-Binding „php-only“ • Aktive/inaktive GUI- 123,34 123,34 Elemente <input type=quot;textquot; <?php echo quot;disabledquot;; ?> /> 25

Carsten Lucke PRADO State-Binding „php-only“ • Aktive/inaktive GUI- 123,34 123,34 Elemente <input type=quot;textquot; <?php echo quot;disabledquot;; ?> /> • Dynamische Auswahl von 123,34 123,34 GUI-Elementen 324,422 23223 <?php if ($short_text) { ?> <input type=quot;textquot; ... /> <?php } else { ?> <textarea name=quot;fooquot; rows=quot;8quot; cols=quot;40quot;> </textarea> <?php } ?> 25

Carsten Lucke PRADO State-Binding bei PRADO 26

Carsten Lucke PRADO State-Binding bei PRADO • Aktive/inaktive GUI- 123,34 123,34 Elemente $this->myTextbox->Enabled = false; 26

Carsten Lucke PRADO State-Binding bei PRADO • Aktive/inaktive GUI- 123,34 123,34 Elemente $this->myTextbox->Enabled = false; • Dynamische Auswahl von 123,34 123,34 GUI-Elementen 324,422 23223 if ($short_text) { $this->myTextbox->TextMode = TTextBoxMode::SingleLine; } else { $this->myTextbox->TextMode = TTextBoxMode::MultiLine; } 26

Carsten Lucke PRADO Agenda Architektur von (Web-)Clients Kurze Einführung in PRADO Data-Binding in Web-Clients Event-Binding in Web-Clients State-Binding in Web-Clients > Wiederverwendung von Komponenten 27

Carsten Lucke PRADO PRADO und Wiederverwendbarkeit • Jede PRADO-Komponente (TComponent) ist an sich wiederverwendbar Im Speziellen: • Controls (TControl) • Modules (TModule) Außerdem: Wahrscheinlichkeit zur Wiederverwendung von fachlichem Code deutlich höher durch saubere Trennung von Präsentation und Geschäftslogik 28

Carsten Lucke PRADO Vielen Dank für Ihre Aufmerksamkeit! Haben Sie Fragen? http://lucke.info 29

http://blog.lucke.info	35
http://www.lucke.info	5
http://lucke.info	5
http://www.slideshare.net	3
http://66.102.9.104	1

PRADO - Erstellung wiederverwendbarer Enterprise-Applikationen

by luckec on May 26, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 49

Statistics

PRADO - Erstellung wiederverwendbarer Enterprise-Applikationen — Presentation Transcript