Downloaden Sie, um offline zu lesen
![jQuery UI
• HTML
• JavaScript
<input type="text"
data-datepicker="true"
name="dueDate"/>
$("input[data-datepicker='true']").datepicker();](https://image.slidesharecdn.com/mvcmodernwebappssko-160309133021/85/MVC-1-0-Zeitgemasse-Webanwendungen-in-JavaEE-11-320.jpg)
Hochgeladen vonOPEN KNOWLEDGE GmbH
MVC 1.0: Zeitgemäße Webanwendungen in JavaEE
Das Dokument erläutert moderne Webanwendungen unter Verwendung von Java EE MVC 1.0 und thematisiert den Unterschied zwischen klassischer und clientseitiger Programmierung. Es behandelt die Rolle von JavaScript und webbasierten Komponenten, einschließlich der Verwendung von Frameworks wie ReactJS, um interaktive Anwendungen zu erstellen. Außerdem wird die Flexibilität und Verantwortung des Clients in MVC 1.0 betont.
MVC 1.0: Zeitgemäße Webanwendungen in JavaEE
- 1. @dskgry #WISSENTEILEN Zeitgemäße Webanwendungenin JavaEE MVC 1.0 @_openknowledge Sven Kölpin – open knowledge GmbH
- 2.
- 3.
- 4. Action-based MVC • KlassischeWeb-Programmierung • Weniger Abstraktion • Request / Response basiert • Viel leichtgewichtiger
- 6.
- 7. Und MVC 1.0… KeineKomponenten?
- 8. Und MVC 1.0… KeineKomponenten? • Clientseitige Komponenten!
- 9. MVC 1.0 • ServerseitigesRendering • „Rich internet applications“ • Rolle von JavaScript: DOM-Manipulation
- 10. jQuery • Die JavaScriptDOM-Library • Komponenten-Library
- 11. jQuery UI • HTML •JavaScript <input type="text" data-datepicker="true" name="dueDate"/> $("input[data-datepicker='true']").datepicker();
- 12. Web Components • W3CDraft • Custom elements • Eigene HTML-Tags (mit Logik) • Templates • HTML-imports • Shadow DOM
- 13. Web Components: Customelements • HTML • JavaScript • Polymer <javaland-datePicker name="dueDate"/> var datePicker = Object.create(HTMLElement.prototype); document.registerElement("javaland-datePicker", {prototype: datePicker});
- 14. MVC 1.0 • ClientseitigesRendering • „Single-page web applications“ • Rolle von JavaScript: Rendering + Business Logik
- 15. Bsp.: ReactJS • HTML <!DOCTYPEhtml> <html> <body> <div id="app"></div> <script src="${mvc.contextPath}/resources/dist/javaland.bundle.js"></script> </body> </html>
- 16. Bsp.: ReactJS • JavaScript importReact, {Component} from "react"; import ReactDOM from "react-dom"; class MyView extends Component { action(){…} render() { return ( <button onClick={this.action.bind(this)} /> ); } }
- 17. • MVC 1.0=== Maximale Flexibilität • Mehr Verantwortung im Client • Clientside Components • Rolle von Webtechnologien (JavaScript) MVC 1.0