바딘
Vaadin | |
 Vaadin Flow를 사용하여 구현된 웹 애플리케이션 | |
| 개발자 | Vaadin Ltd. |
|---|---|
| 안정된 릴리스 | 22.0.20 (2022년 8월 , 전([1] [±] 23.1.3 (상록색) (2022년 6월 28일; 전 ([2] [±] |
| 저장소 | Vaadin 저장소 |
| 기입처 | 자바, 자바스크립트 |
| 플랫폼 | 크로스 플랫폼 |
| 유형 | 웹 프레임워크 |
| 면허증. | Apache 라이센스 2.0 |
| 웹 사이트 | vaadin.com |
Vaadin(핀란드어 발음: [ˈɑ]]]]]]]]]]]]]]]])은 Java용 오픈 소스 웹 애플리케이션 개발 플랫폼입니다.Vaadin에는 웹 컴포넌트 세트, Java 웹 프레임워크 및 개발자가 HTML 및 JavaScript 대신 Java 프로그래밍 언어만 사용하여 최신 웹 그래픽 사용자 인터페이스(GUI)를 구현할 수 있는 도구 세트가 포함되어 있습니다.
역사
개발은 2002년에 출시된 Millstone 3 오픈 소스 웹 프레임워크 위에 어댑터로 처음 시작되었습니다.Ajax 기반의 클라이언트 통신 및 렌더링 엔진을 도입했습니다.2006년에 이 컨셉은 상업용 제품으로 별도로 개발되었습니다.그 결과, Vaadin의 서버측 API의 대부분은 Millstone의 Swing과 같은 API와 여전히 호환됩니다.
2007년 초에 제품명이 IT Mill Toolkit으로 변경되어 버전 4가 출시되었습니다.클라이언트 측 렌더링을 위해 독점적인 JavaScript Ajax 구현을 사용했기 때문에 새로운 위젯을 구현하는 것이 다소 복잡했습니다.2007년 말까지 독자 사양의 클라이언트 측 실장은 폐지되고 GWT는 서버 측 컴포넌트 위에 통합되었습니다.동시에 제품 라이선스가 오픈소스 Apache License 2.0으로 변경되었습니다.IT Mill Toolkit 5의 첫 번째 실전 가동 가능한 릴리스는 1년 이상의 베타 기간을 거쳐 2009년 3월 4일에 만들어졌습니다.
2008년 9월 11일 MySQL 오리지널 버전의 주요 저자인 Michael Widenius가 Vaadin의 개발자인 IT Mill에 투자했다는 사실이 공개되었습니다[5][6].투자 규모는 공개되지 않았다.
2009년 5월 20일 IT Mill Toolkit은 Vaadin Framework로 이름을 변경했습니다.그 이름은 핀란드어로 doe, 더 정확히 말하면 암컷 순록이라는 뜻에서 유래했다.핀란드어로도 번역할 수 있다.명칭 변경과 더불어 커뮤니티 웹사이트와 함께 버전 6의 프리 릴리즈가 시작되었습니다.그 후, 오픈 소스 Vaadin Framework의 배후에 있는 IT Mill Ltd가 Vaadin Ltd로 사명을 변경했습니다.
2010년 3월 30일에 Vaadin Directory가 오픈되었습니다.핵심 Vaadin Framework에 무료 또는 상업적으로 애드온 컴포넌트를 배포하기 위한 채널을 추가했습니다.출시일 현재 95개의 애드온을 다운로드 [7]할 수 있습니다.
| LTS 버전 | 발매일 | 이전 LTS 버전 출시 이후의 주의사항 및 신기능 |
|---|---|---|
| 6 | 2009년 5월 20일 | 초기 릴리즈 |
| 7 | 2013년 2월 3일 | |
| 8 | 2017년 2월 21일 | 개량점으로는 타입 파라미터 및 람다식 등의 최신 Java 기능을 사용하는 데이터 바인딩 API를 다시 작성하고 메모리와 CPU를 [8]보다 효율적으로 사용하는 것이 있습니다. |
| 10 | 2018년 6월 25일 | 웹 컴포넌트와 호환되는 모든 테크놀로지의 Vaadin UI 컴포넌트를 사용할 수 있습니다.Vaadin Directory는 웹 구성 요소 배포를 추가합니다.차세대 Vaadin Framework인 Vaadin Flow는 Vaadin의 UI [9]컴포넌트 위에 서버 측 Java 웹 프레임워크로 제공되었습니다. |
| 14 | 2019년 8월 14일 | 새로운 UI 컴포넌트, CDI 및 OSGi 지원, Gradle 통합, 루트 동적 등록, 키보드 숏컷 API, npm 및 Bower [10]지원. |
Vaadin 흐름(Java API)
Vaadin Flow(이전의 Vaadin Framework)는 웹 애플리케이션 및 웹 사이트를 구축하기 위한 Java 웹 프레임워크입니다.Vaadin Flow의 프로그래밍 모델은 개발자가 HTML이나 JavaScript를 직접 사용하지 않고도 사용자 인터페이스(UI)를 구현하기 위한 프로그래밍 언어로 Java를 사용할 수 있도록 합니다.Vaadin Flow는 서버 측 아키텍처를 특징으로 하며, 이는 대부분의 UI 로직이 서버에서 안전하게 실행되므로 공격자에 대한 노출을 줄일 수 있습니다.클라이언트 측에서는 Vaadin Flow가 웹 컴포넌트 표준을 기반으로 구축됩니다.클라이언트/서버 통신은 브라우저의 UI와 서버의 UI 상태를 모두 업데이트하는 가벼운 JSON 메시지와 함께 WebSocket 또는 HTTP를 통해 자동으로 처리됩니다.
Vaadin Flow의 Java API는 다음과 같은 클래스를 포함합니다.TextField,Button,ComboBox,Grid설정, 스타일링, 클래스 레이아웃 오브젝트인스턴스 추가가 가능한 기타 많은 것.VerticalLayout,HorizontalLayout,SplitLayout, 기타.동작은 클릭, 입력값 변경 등의 이벤트에 청취자를 추가하여 구현됩니다.보기는 다른 UI 구성 요소(커스텀 또는 프레임워크에서 제공)를 구현하는 사용자 정의 Java 클래스에 의해 생성됩니다.이 뷰 클래스에는 다음과 같은 주석이 붙습니다.@Route특정 URL을 사용하여 브라우저에 노출합니다.다음 예시는 이러한 개념을 나타내고 있습니다.
@루트("헬로월드') // http://localhost:8080/hello-world를 통해 뷰를 표시합니다. 일반의 학급 메인뷰 확장 Vertical Layout(수직 배치) { // 기존 UI 컴포넌트 확장 일반의 메인뷰() { // 텍스트 필드를 만듭니다. 텍스트 필드 텍스트 필드 = 신규 텍스트 필드("이름 입력"); // 버튼을 만듭니다. 단추 단추 = 신규 단추("보내다"); // 클릭 이벤트를 사용하여 버튼에 동작을 추가합니다. 단추.add Click Listener(이벤트 -> 더하다(신규 단락("안녕하세요" + 텍스트 필드.가치의 취득())) ); // UI 컴포넌트를 뷰에 추가합니다(VerticalLayout). 더하다(텍스트 필드, 단추); } } 다음은 이전 예의 스크린샷입니다.
Hilla(TypeScript API)
Hilla(이전의 Vaadin Fusion)는 Spring Boot Java 백엔드와 TypeScript에 구현된 반응형 프런트 엔드를 통합하는 웹 프레임워크입니다.이 조합은 서버측 비즈니스 로직(Java)과 클라이언트측 타입세이프티(TypeScript)를 조합하여 TypeScript 프로그래밍 언어를 사용함으로써 완전한 타입세이프 개발 플랫폼을 제공합니다.보기는 웹 구성요소를 작성하기 위한 경량 라이브러리인 Lit을 사용하여 구현됩니다.다음은 Hilla를 사용하여 구현된 기본 뷰의 예입니다.
@custom Element(커스텀 요소)('hello-world-view') 수출. 학급 Hello World View(Hello World View) 확장 LitElement (LitElement { 표현하다() { 돌아가다 html` <div> <vaadin-text-field label="이름"> </vaadin-text-field> <vaadin 버튼 @click="${이것..안부 전해주세요.}">안녕하세요 </vaadin-button> </div> `; } 안부 전해주세요.() { show Notification(알림)("여보세요!"); } } Vaadin의 UI 컴포넌트
Vaadin에는 웹 컴포넌트로 구현된 사용자 인터페이스(UI) 컴포넌트 세트가 포함되어 있습니다.이러한 컴포넌트는 서버측 Java API(Vaadin Flow)를 포함하지만 HTML 문서에서도 직접 사용할 수 있습니다.Vaadin의 UI 컴포넌트는 마우스 및 터치 이벤트, CSS와 함께 커스터마이즈할 수 있으며 WAI-ARIA와 호환되며 키보드 및 화면 리더 지원 및 오른쪽에서 왼쪽으로의 언어를 지원합니다.
다음 표에는 Vaadin에 포함된 UI 구성 요소 목록이 나와 있습니다.
| 자바 클래스 | HTML 요소 이름 | 묘사 | 면허증. |
|---|---|---|---|
Accordion | vaadin-accordion | 수직으로 스택된 확장 가능한 패널 세트 | 아파치 2.0 |
Anchor | a | 지정된 URL로의 네비게이션을 허용합니다. | 아파치 2.0 |
AppLayout | vaadin-app-layout | 공통 애플리케이션 레이아웃 구조 | 아파치 2.0 |
Avatar | vaadin-avatar | 인물의 그래픽 표현 | 아파치 2.0 |
| (사용 불가) | vaadin-badge | 내용 라벨 표시를 위한 컬러 텍스트 요소 | 아파치 2.0 |
Board | vaadin-board-row | 응답형 뷰를 구축하기 위한 레이아웃 구성요소 | 상업의 |
Button | vaadin-button | 사용자가 작업을 수행할 수 있습니다. | 아파치 2.0 |
Crud | vaadin-crud | 생성, 읽기, 업데이트 및 삭제 작업을 관리하는 구성 요소 | 상업의 |
Chart | vaadin-chart | 막대, 파이, 꺽은선형 등 다른 유형의 대화형 차트 | 상업의 |
Checkbox | vaadin-checkbox | 이진 선택을 나타내는 입력 필드 | 아파치 2.0 |
Combo box | vaadin-combo-box | 필터링할 수 있는 항목 목록을 표시합니다. | 아파치 2.0 |
ConfirmDialog | vaadin-confirm-dialog | 사용자 작업을 확인하는 데 사용되는 모달 대화 상자 | 상업의 |
ContextMenu | vaadin-context-menu | 마우스 오른쪽 버튼 또는 길게 누르면 나타나는 메뉴 | 아파치 2.0 |
CookieConsent | vaadin-cookie-consent | GPR 및 CCPA 등의 프라이버시법에 준거하는 배너 | 상업의 |
CustomField | vaadin-custom-field | 여러 컴포넌트를 하나의 필드로 정리하는 컴포넌트 | 아파치 2.0 |
DatePicker | vaadin-date-picker | 날짜를 입력하거나 달력 오버레이에서 선택하여 입력할 수 있습니다. | 아파치 2.0 |
DateTimePicker | vaadin-date-time-picker | 날짜와 시간을 모두 선택하기 위한 입력 | 아파치 2.0 |
Details | vaadin-details | 내용 표시 및 숨기기를 위한 확장 가능한 패널 | 아파치 2.0 |
Dialog | vaadin-dialog | 오버레이에 다른 구성요소를 표시하는 팝업 창 | 아파치 2.0 |
EmailField | vaadin-email-field | 전자 메일 주소만 입력으로 받아들이는 텍스트 필드 | 아파치 2.0 |
Form layout | vaadin-form-layout | 여러 개의 열이 있는 응답 양식을 작성하기 위한 레이아웃 | 아파치 2.0 |
Grid | vaadin-grid | 표 형식의 데이터를 위한 데이터 그리드 또는 데이터 테이블 구성 요소 | 아파치 2.0 |
GridPro | vaadin-grid-pro | 풀 키보드 네비게이션으로 인라인 편집 가능 | 상업의 |
HorizontalLayout | vaadin-horizontal-layout | 구성 요소를 한 줄로 나란히 배치합니다. | 아파치 2.0 |
Icon | iron-icon | 커스텀 아이콘을 표시하거나 600개 이상의 아이콘을 표시합니다(VaadinIcons열거형) | 아파치 2.0 |
Image | img | 리소스 파일 또는 런타임에 생성된 이진 데이터에서 이미지를 표시합니다. | 아파치 2.0 |
ListBox | vaadin-list-box | 스크롤 가능한 항목 목록에서 하나 이상의 값을 선택할 수 있습니다. | 아파치 2.0 |
LoginForm | vaadin-login-form | 로그인 양식을 포함하는 구성 요소 | 아파치 2.0 |
LoginOverlay | vaadin-login-overlay | 모달 또는 전체 화면 로그인 양식 | 아파치 2.0 |
MenuBar | vaadin-menu-bar | 계층 드롭다운 메뉴가 있는 수평 단추 표시줄 | 아파치 2.0 |
MessageList | vaadin-message-list | 메시지를 표시하고 채팅 및 주석 섹션을 작성하는 구성요소 | 아파치 2.0 |
Notification | vaadin-notification | 사용자에게 피드백을 제공하는 데 사용되는 오버레이 구성 요소 | 아파치 2.0 |
NumberField | vaadin-number-field | 숫자 입력(10진수, 적분 또는 빅 10진수)만 받아들이는 텍스트) | 아파치 2.0 |
PasswordField | vaadin-password-field | 기본적으로 마스킹된 비밀번호를 입력하기 위한 입력 필드 | 아파치 2.0 |
ProgressBar | vaadin-progress-bar | 태스크 또는 프로세스의 완료 상태를 표시합니다. | 아파치 2.0 |
Radio button | vaadin-radio-button | 관련이 있지만 상호 배타적인 옵션 목록에서 정확히 하나의 값을 선택할 수 있습니다. | 아파치 2.0 |
RichTextEditor | vaadin-rich-text-editor | 리치 텍스트를 입력하기 위한 입력 필드 | 상업의 |
Scroller | vaadin-scroller | UI에서 스크롤 가능한 영역을 만들기 위한 구성 요소 컨테이너 | 아파치 2.0 |
Select | vaadin-select | 옵션 집합에서 단일 값을 선택하기 위한 입력 필드 구성 요소 | 아파치 2.0 |
SplitLayout | vaadin-split-layout | 두 개의 콘텐츠 영역과 그 사이에 끌 수 있는 분할 핸들이 있는 구성 요소 | 아파치 2.0 |
Tabs | vaadin-tabs | 콘텐츠를 섹션으로 정리 및 그룹화 | 아파치 2.0 |
TextArea | vaadin-text-area | 여러 줄 텍스트 입력을 위한 입력 필드 구성 요소 | 아파치 2.0 |
TextField | vaadin-text-field | 텍스트를 소개하고 편집하기 위한 구성 요소 | 아파치 2.0 |
TimePicker | vaadin-time-picker | 특정 시간을 입력하거나 선택하기 위한 입력 필드 | 아파치 2.0 |
TreeGrid | vaadin-grid | 확장 가능한 노드와 축소 가능한 노드로 그룹화된 계층형 표 형식의 데이터를 표시하는 구성 요소 | 아파치 2.0 |
Upload | vaadin-upload | 업로드 진행률 및 상태가 있는 하나 이상의 파일을 업로드하기 위한 구성 요소 | 아파치 2.0 |
VerticalLayout | vaadin-vertical-layout | 열에서 위에서 아래로 구성요소를 배치합니다. | 아파치 2.0 |
인증
Vaadin은 개발자가 Vaadin [11]Flow에 능숙하다는 것을 증명하기 위해 두 가지 인증 트랙을 제공합니다.
- 인정받은 Vaadin 14 개발자
- 인정 Vaadin 14 Professional
인정에 합격하려면 , 개발자는 메뉴얼을 참조해, 트레이닝 비디오를 참조해, 온라인 테스트를 실시할 필요가 있습니다.
이전(현재 사용할 수 없음) 인증은 다음과 같습니다.
- Vaadin 7 인정 개발자용 Vaadin 온라인 시험
- Vaadin 8 인정 개발자용 Vaadin 온라인 시험
「 」를 참조해 주세요.
레퍼런스
- ^ "Release Vaadin 22.0.20 · vaadin/platform · GitHub". GitHub. Retrieved 2022-08-09.
- ^ "Release Vaadin 23.1.3 · vaadin/platform · GitHub". GitHub. Retrieved 2022-06-28.
- ^ "Release Vaadin 14.8.15 · vaadin/platform · GitHub". GitHub. Retrieved 2022-08-09.
- ^ "Release Vaadin 8.14.1 · vaadin/framework · GitHub". GitHub. Retrieved 2021-10-06.
- ^ "Michael "Monty" Widenius investing in Finnish IT Mill". Invest in Finland. Archived from the original on 2011-07-20. Retrieved 2009-01-31.
- ^ Asay, Matt. "Monty Widenius invests in Act II: IT Mill". CNET News. Archived from the original on 2016-03-11. Retrieved 2009-01-31.
- ^ "Vaadin Directory Opens its Doors". vaadin.com. Retrieved 2021-09-07.
- ^ Vaadin. "Vaadin releases Vaadin Framework 8". www.prnewswire.com.
- ^ Vaadin. "Vaadin modernizes Java development with its biggest release to date: Vaadin 10". www.businessinsider.com.
- ^ "Vaadin 14.0.0 release on GitHub". GitHub.
- ^ "Training". Vaadin. Retrieved 2021-09-08.
추가 정보
- Duarte, A. (2021) 실용적인 바딘: Java에서 웹 응용 프로그램을 개발하고 있습니다.아프레스
- Duarte, A. (2018) Vaadin 8을 사용한 데이터 중심 애플리케이션.Packt Publishing(팩트 퍼블리싱).
- Frankel, N. (2013) Learning Vaadin 7, 제2판Packt Publishing(팩트 퍼블리싱).
- Duarte, A. (2013) Vaadin 7 UI 설계 예: 초보자 가이드.Packt Publishing(팩트 퍼블리싱).
- Holan, J. & Kvasnovsky, O. (2013) Vaadin 7 요리책.Packt Publishing(팩트 퍼블리싱).
- Taylor C. (2012) 바딘 레시피.Packt Publishing(팩트 퍼블리싱).
- Frankel, N. (2011) Learning Vaadin.Packt Publishing(팩트 퍼블리싱).
- Grönroos, M. (2010) 바딘의 책.Vaadin Ltd.
