mvc 1 - jug-h.de · @dskgry #wissenteilen zeitgemäße webanwendungen in javaee mvc 1.0...
TRANSCRIPT
![Page 1: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/1.jpg)
@dskgry #WISSENTEILEN
Zeitgemäße Webanwendungen in JavaEE
MVC 1.0
@_openknowledge
Sven Kölpin – open knowledge GmbH
![Page 2: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/2.jpg)
Entwicklung des Webs
• Simple Web-Applications
• Rich Internet Applications
• Ajax
• Single Page Web-Applications
• „WebApps“
2000
Heute
![Page 3: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/3.jpg)
Entwicklung des Webs
• Simple Web-Applications
• Rich Internet Applications
• Ajax
• Single Page Web-Applications
• „WebApps“
2000
Heute
MVC
![Page 4: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/4.jpg)
ClientServer
MVC im Web
ControllerModel View
HTML /
JSON
Business-Logik
JSON / XML
JavaScript
AJAXREST
DispatcherDB
HTML
![Page 5: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/5.jpg)
What do you guys use? (1/2)
JSF Spring MVC Other(Struts, Grails…)
Wicket GWT / Vaddin Play No Framework
DZONE.com 2015
![Page 6: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/6.jpg)
What do you guys use? (2/2)
Spring MVC Spring boot Other JSF GWT/Vaadin Nothing Struts Play
zeroturnaround 2016
![Page 7: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/7.jpg)
Boiling it down…
![Page 8: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/8.jpg)
• JSF
• Wicket
• Vaadin
• …
Component-based
• Spring MVC
• MVC 1.0
• Struts
• …
Action-based
Web MVC Frameworks
Abstraction Web oriented
![Page 9: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/9.jpg)
Component-based MVC Frameworks
![Page 10: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/10.jpg)
Eigenschaften
• UI aus Komponenten „zusammenstecken“
• Stateful
• Komponenten == serverseitig
• Sessions & Viewstate
• Abstraktion
• != HTTP
• != JavaScript, CSS, HTML
![Page 11: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/11.jpg)
Architektur
ControllerModel View
HTML /
JSON
Business-LogikHTML
JSON / XML
JavaScript
AJAXFramework
Convert / Validate
GUI-Components
Dispatch
![Page 12: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/12.jpg)
Grenzen
• Abstraktion
• Skalierbarkeit
• Komplexität
• Lernkurve
• Sonderfälle
![Page 13: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/13.jpg)
Wann nehmen?
• Abstraktion v. Webtechnologien erforderlich
• Viele Formulare
• Prototyping
![Page 14: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/14.jpg)
Wann lassen?
• Komplexe UI-Logik
• Skalierbarkeit
• Technologietrends
![Page 15: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/15.jpg)
JSF Abstraktion
@Model
public class SomeBean {
private String someValue;
public void create() {/*...*/}
/*getter + setter */
}
<h:body>
<h:form>
<h:inputText id="someValue" value="#{someBean.someValue}"/>
<h:commandButton actionListener="#{someBean.create}">
<f:ajax execute="@form" render="@form"/>
</h:commandButton>
</h:form>
</h:body>
![Page 16: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/16.jpg)
Beispiel Vaadin
• Noch mehr Abstraktion
• Java to JavaScript-Compiler
• != HTML, JS, CSS
![Page 17: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/17.jpg)
Forms / Events
FormLayout form = new FormLayout();
TextField title = new TextField("Title:");
title.setRequired(true);
title.addValidator(new NullValidator("*", false));
form.addComponent(title);
Button save = new Button("Save");
save.addClickListener((Button.ClickListener) clickEvent -> {
...
});
![Page 18: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/18.jpg)
Action-based MVC Frameworks
![Page 19: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/19.jpg)
Eigenschaften
• Klassische Web-Programmierung
• Weniger Abstraktion
• Request / Response basiert
• Viel leichtgewichtiger
![Page 20: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/20.jpg)
Architektur
ControllerModel View
HTML /
JSON
Request
Business-
Logik
JSON
JavaScript
AJAXFramework
Dispatch
REST
Response
HTML
![Page 21: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/21.jpg)
Vorteile
• Stateless / Stateful
• Clientseitiges Rendering / Serverseitiges Rendering
• HTML & JSON
• Technologietrends
![Page 22: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/22.jpg)
Grenzen
• Aufwändiger
• Technologiewissen
• Wiederwendbare Komponenten
• Nicht ohne Weiteres
![Page 23: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/23.jpg)
MVC 1.0
![Page 24: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/24.jpg)
Grundlagen
• JSR(371)
• Java EE 8: First Half 2017
• Schlanke Spec
• Integration vorhandener Specs
• Alternative zu JSF
• Kein Ersatz
MVC 1.0
![Page 25: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/25.jpg)
MVC und JAX-RS
• Basis: JAX-RS
• HTTP-Methods
• @GET, @POST, @PUT, @DELETE…
• Annotations
• @QueryParam, @PathParam, @BeanParam…
![Page 26: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/26.jpg)
MVC vs. JAX-RS
• CDI fester Bestandteil
• Controller können stateful sein!
• Unterstützt beliebige Templating Engines
• Facelets & JSP per default
![Page 27: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/27.jpg)
ControllerModel View
![Page 28: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/28.jpg)
Controller
• Annotation @Controller
• An Klasse oder Methoden
• Vermischung JAX-RS und @Controller
• Flexible HTTP-Responses (HTML vs. Data)
• @Controller-Methods return View
![Page 29: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/29.jpg)
@Controller
@Path("myController")
public class MyController {
@GET
@Path("void")
@View("hello.jsp")
public void helloVoid() {
}
@GET
@Path("string")
public String helloString() {
return "hello.jsp";
}
@GET
@Path("viewable")
public Viewable helloViewable() {
return new Viewable("hello.jsp");
}
@GET
@Path("response")
public Response helloResponse() {
return Response.status(Response.Status.OK).entity("hello.jsp").build();
}
@GET
@Path("myview")
public MyView helloMyView() {
return new MyView("hello.jsp"); // toString() -> "hello.jsp"
}
}
![Page 30: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/30.jpg)
ControllerModel View
![Page 31: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/31.jpg)
Models (1/2)
• CDI Beans
@Inject
private SettingsBean settingsBean;
@POST
@Controller
public Viewable changeLanguage(@QueryParam("lang") String lang) {
settingsBean.setCurrentLocale(lang);
return new Viewable("main.jsp");
}
@Named
@SessionScoped
public class SettingsBean …{
}
![Page 32: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/32.jpg)
Models (2/2)
• Models-Interface
• Map<String, Object>
• Nur @RequestScoped
@Inject
private Models models;
@GET
@Controller
public Viewable index() {
models.put("locale","en");
return new Viewable("index.jsp");
}
${locale} available in EL
![Page 33: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/33.jpg)
ControllerModel View
![Page 34: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/34.jpg)
@Named
@SessionScoped
public class SettingsBean …{
}
Views (1/2)
• Zugriff auf Named-Beans
<ul>
<c:forEach items="${settingsBean.myList}" var="item">
<li>
${item}
</li>
</c:forEach>
</ul>
![Page 35: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/35.jpg)
Views (2/2)
• Modelinterface via EL
<h1>
${locale}
</h1>
public Viewable index() {
models.put("locale","en");
…
}
![Page 36: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/36.jpg)
ControllerModel View
CUD
![Page 37: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/37.jpg)
<form method="post">
<input type="text" name="title"/>
<input type="date" name="dueDate"/>
<input type="submit"/>
</form>
![Page 38: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/38.jpg)
![Page 39: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/39.jpg)
Form Data: FormParam
@POST
@Controller
public Response createTodo(@FormParam("title") @NotNull String title,
@FormParam("dueDate") @Future Date dueDate) {
}
![Page 40: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/40.jpg)
Form Data: BeanParam
public class TodoItemModel{
@NotNull
@FormParam("title")
@Size(min = 1, max = 20)
private String title;
@NotNull
@Future
@FormParam("dueDate")
private Date dueDate;
}
public Response createTodo(@Valid
@BeanParam TodoItemModel todoItemModel) {
}
![Page 41: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/41.jpg)
Validation: BindingResult
@Inject
private BindingResult bindingResult;
@POST
@Controller
public Response saveTodo(@Valid @BeanParam TodoItemModel model) {
if (bindingResult.isFailed()) {
return Response.ok().entity("err.jsp").build();
}
return Response.ok().entity("success.jsp").build();
}
![Page 42: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/42.jpg)
Form Data…
![Page 43: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/43.jpg)
JSON Data
@POST
@Controller
@Consumes(MediaType.APPLICATION_JSON)
public Response createTodo(@Valid TodoItem todoItem) {
}
@XmlRootElement
public class TodoItem {
@NotNull
@Size(min = 3, max = 50)
private String title;
}
![Page 44: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/44.jpg)
Modern Web?
![Page 45: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/45.jpg)
MVC 1.0: Keine Grenzen
![Page 46: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/46.jpg)
Clientseitige Komponenten
![Page 47: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/47.jpg)
MVC 1.0
• Serverseitiges Rendering
• „Rich internet applications“
• Rolle von JavaScript: DOM-Manipulation
![Page 48: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/48.jpg)
DOM Manipulation
• Ziel: Desktopfeeling
• DOM-API
• Selektoren & Events
• APIs: Geocoding, LocalStorage, Audio + Video,…
• Widgets
• Dialoge, Datepicker,…
• Ajax
![Page 49: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/49.jpg)
jQuery
• JavaScript DOM-Library
• Fokus auf DOM-APIs
• Fokus auf Cross-Browser
• Komponenten-Library
• Widgets
• Effekte
• Interaktionen
![Page 50: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/50.jpg)
jQuery UI
• HTML
• JavaScript
<input type="text"
data-datepicker="true"
name="dueDate"/>
$("input[data-datepicker='true']").datepicker();
![Page 51: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/51.jpg)
Web Components
![Page 52: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/52.jpg)
Web Components
• Custom elements
• Eigene HTML-Tags (mit Logik)
• Templates
• Vorlagen (für Komponenten)
• HTML-imports
• Shadow DOM
![Page 53: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/53.jpg)
Web Components
• HTML
• JavaScript
var datePicker = Object.create(HTMLElement.prototype); //inherit HTMLELement
document.registerElement("ok-datePicker", {
prototype: datePicker
});
<ok-datePicker name="dueDate"/>
![Page 54: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/54.jpg)
Zukunftsmusik…?
• Schon heute nativ nutzbar
• Polyfill: webcomponents.js
![Page 55: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/55.jpg)
Polymer
• Framework + Komponentensammlung
Polymer({
is: "proto-element",
ready: function() { this.textContent = "Hello Summit!"}
});
<link rel="import" href="components/google-map/google-map.html">
<google-map latitude="37.790" longitude="-122.390"></google-map>
![Page 56: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/56.jpg)
MVC 1.0
• Clientseitiges Rendering
• „Single Page Web-Applications“
• Rolle von JavaScript: Application Logic + Rendering
![Page 57: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/57.jpg)
MVC & SPA
• HTML
• Serverside Rendering
• Nashorn
<!DOCTYPE html>
<html>
<body>
<input type="hidden" value="${userSettingsJson}"/>
<div id="app"></div>
<script src="${mvc.contextPath}/myApp.bundle.js"></script>
</body>
</html>
![Page 58: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/58.jpg)
Bsp.: ReactJS
• JavaScript
import React, {Component} from "react";
class MyView extends Component {
render() {
return (
<div className="container">
<button onClick={this.showMessage.bind(this)}>
<span>Click me!</span>
</button>
</div>
);
}
}
![Page 59: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/59.jpg)
Fazit
• Action based vs. Component based
• Erst dann kommt das Framework…
• MVC 1.0 === Maximale Flexibilität
• Bestehende Standards
• Mehr Verantwortung im Client
MVC 1.0
![Page 60: MVC 1 - jug-h.de · @dskgry #WISSENTEILEN Zeitgemäße Webanwendungen in JavaEE MVC 1.0 @_openknowledge Sven Kölpin –open knowledge GmbH](https://reader034.vdocuments.site/reader034/viewer/2022042310/5ed7925c67b53e06555d27d2/html5/thumbnails/60.jpg)
All images taken from pixabay.com