모 던 자바 웹 UI
김대성
바딘 프레임워크
Java Web UI Framework for Business Applications
르
눈 앞에 쓸 수 있는 도구가 망치 밖에
없다면 모든 문제가 못으로 보일 것이다.
심리학자 에이브러햄 매슬러(Abraham Maslow)
what
how
why
roadmap
what
Apache License 2.0
2001 ~
6
Framework
Elements
Designer
Charts
TestBench
SpreadSheet
Vaadin Framework
<html> <head> <!-- CDN --> <script src="https://cdn.vaadin.com/vaadin-core-elements/latest/webcomponentsjs/webcomponents-lite.min.js"></script> <link href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-core-elements/vaadin-core-elements.html" rel="import"> </head> <body> <vaadin-grid selection-mode="multi"> <table> <col name="firstName"> <col name="lastName">
....
Vaadin Elements
Vaadin Designer (IDE Plugin)
Vaadin Charts
Vaadin TestBench
Vaadin SpreadSheet
of Fortune-100 companies
40%
150K
Developer WorldWide
2015
2016
IE / Firefox / Chrome
Look And Feel
Web Content Accessibility
how
3
UI Component
Foundation
Data Binding
1/3
UI Component
Component
Component( )
Component( )
Component( )
Component( )
Style
ValoTheme (Default)
BluePrint
Dark
Light
Button button = ("Click Me");
import com.vaadin.ui.Button;
new Button
button. (ValoTheme.BUTTON_PRIMARY);
import com.vaadin.themes.ValoTheme;
addStyleName
button. (event -> {
button.addStyleName(ValoTheme.BUTTON_DANGER);
button.setCaption("Hello World");
});
addClickListener
{
} (Exception ex) {
}
import com.vaadin.ui.Notification;
button. (event -> {
});
addClickListener
securityService.signin(email, password);
try
catch
Notification.show("ex : Singin failed...");
javascript
WELCOME TO VAADIN SEMINAR
Password
Sign in
Label
TextField
PasswordField
Button
1
2
3
1
2
3
VerticalLayout
HorizontalLayout
WELCOME TO VAADIN SEMINAR
Password
Sign in
VerticalLayout
HorizontalLayout
Starting out with Maven
mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.6.5
cd vaadin-seminar
mvn package jetty:run
public class MyUI extends {
@Override
protected void init(VaadinRequest request) {
return setContent( )
}
}
public void setContent(Component content) { ... }
Root Layout
import com.vaadin.ui.UI;
UI
1. VerticalLayout
2. Label
3. HorizontalLayout
4.TextField
5. Button
6. UI.setContent(Component)
MyUI.class
PasswordField
coding....
Button.java
vButton.java
styles.scss
compile
response
2/3
Foundation
single page appliction
SPA
view1
view2
view3
UI
navigator
3/3
Data Binding
Password
User.class
private string email;
private string password;
....
event
Windows
From Child Window
From Parent Window
event
why
유지보수
안티패턴
디자인패턴
리팩토링
....
PMD, CS
유지보수
wrap
up
UI
Layout
Component
ValoTheme
Listener
compile
http://jiandson.co.kr
vaadin korea 1st
http://basakpie.com
https://www.facebook.com/groups/vaadinkorea
https://github.com/basakpie
The End
Vaadin - Spring Camp 2017
By Basak Pie
Vaadin - Spring Camp 2017
- 6,198