© VERBUND AG, www.verbund.com
React in ApexMit React zu noch besseren Apex Apps
Martin Schumacher, Apex Connect 2018
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Demo 1: React Komponente in IG Report Column
Intro
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Demo 1: React Komponente in IG Report Column
Intro
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Demo 2: Eine komplette Apex Seite als React Komponente
Intro
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Demo 2: Eine komplette Apex Seite als React Komponente
Intro
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Demo 2: Eine komplette Apex Seite als React Komponente
Intro
Die Apex Felder dienen hier zur zwei Wege Kommunikation mit der React Komponente
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
React
https://reactjs.org/
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
React
Komponenten JSX Shadow DOM
State <component>
</component>
render()
Props className="..."
componentDidMount() { javascript }
Programmierer kümmert sich um die Inhalte,
React um das rendern
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Aufsetzen der Arbeitsumgebung
Arbeitsumgebung
Node.js VSCode
https://github.com/facebook/create-react-app
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Installation create-react-app und Erstellung erstes Projekt
Arbeitsumgebung
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Debugging
VSCode
VSCodePer Wizard Chrome als
Debugger eintragen
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
VSCode
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
VSCode
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
Einbau der React Komponente in Apex
Einmal auf Seite per DIV ID
Mehrmals per DIV class
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
Einbau der React Komponente in Apex
Einmal auf Seite per DIV ID
Mehrmals per DIV class
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
Kommunikation zwischen Apex und React
Apex übergibt an React:
Über Attribute der DIV beim Rendern
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
Kommunikation zwischen Apex und React
React liest und schreibt aus Apex:
Über die $v und $s Funktionen von Apex
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
Kommunikation zwischen Apex und React
Apex ruft eine Funktion von React auf:
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
Kommunikation zwischen Apex und React
Apex ruft eine Funktion von React auf:
Direkt
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
Kommunikation zwischen Apex und React
Apex ruft eine Funktion von React auf:
Über Events und Eventhandler
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Einbau React in Apex
Kommunikation zwischen Apex und React
Apex ruft eine Funktion von React auf:
Direkt oder über Events und Eventhandler
Direkter Aufruf schnell gemacht,
Events sind die bessere Lösung,
wenn sie für mehrere Komponenten
verwendet werden können
© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex
Apex Komponenten in React nachbauen
Apex Komponenten in React nachbauen
1. Apex Seite als Mockup erstellen
2. Apex Html analysieren
3. React Komponenten erstellen,
die das HTML von Apex nachbauen
4. Komponenten mit Properties (Label, …) versehen
5. State liegt in der obersten App-Komponente
© VERBUND AG, www.verbund.com Seite
6. Change Events rufen mittels Props übergebene
Funktionen der obersten Komponente auf
7. State wird über diese Funktionen geändert
8. React holt sich Detaildaten über REST Calls
9. Apex übernimmt die Daten von React in Hidden Fields
24.4.2018 [email protected], Twitter: @mschuApex
Apex Komponenten in React nachbauen
Apex Komponenten in React nachbauen
© VERBUND AG, www.verbund.com Seite
Blick in den CodeApex React Komponenten
24.4.2018 [email protected], Twitter: @mschuApex
© VERBUND AG, www.verbund.com Seite
CodebeispielApexButton.js
24.4.2018 [email protected], Twitter: @mschuApex