모 던 자바 웹 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

Email

Password

Sign in

Label

TextField

PasswordField

Button

1

2

3

1

2

3

VerticalLayout

HorizontalLayout

WELCOME TO VAADIN SEMINAR

Email

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

Email

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