Vaadin Framework 8 Java Web UI Framework Dengan Fitur Yang Di Sempurnakan

Fitur & Perangkat Tambahan Baru di Vaadin Framework 8

Vaadin Framework adalah Framework Java Web UI untuk Aplikasi Bisnis yang produktif dan juga perpustakaan UI yang mudah digunakan untuk mengembangkan aplikasi web dalam bahasa Java & JVM. Ini menyediakan komponen UI tingkat tinggi untuk menyelamatkan Anda dari pemrograman HTML, CSS, dan JavaScript yang memakan waktu. Kerangka Vaadin abstrak hampir semua teknologi web yang memberi komponen berbasis UI untuk membangun aplikasi desktop tradisional.

Vaadin Framework juga merupakan abstrak server & browser, Menggunakan pendekatan berorientasi objek untuk berimprovisasi komponen dan layout kecil UI Anda ke UI audiens. Ini membuat dan meningkatkan pengembangan UI & backend mudah bagi pengembang web. Kerangka Vaadin adalah salah satu framework web UI open-source terbaik untuk aplikasi Internet, ini fitur arsitektur sisi server dengan menjalankan sebagian besar logika pengembangan di server seperti solusi plugin & plugin browser Javascript.

Ini juga menawarkan teknologi Ajax yang berjalan di sisi browser dan memastikan pengalaman pengguna interaktif, dari sisi klien ini diperluas dengan toolkit web google yang merupakan seperangkat alat open source yang memungkinkan pengembang untuk memelihara dan membuat aplikasi Java kompleks yang lengkap serta aplikasi front end java script.

1. Bootstrapping:
Vaadin Framework Membuat aplikasi Vaadin dengan menggunakan pola dasar Maven. Start.spring.io menawarkan pilihan bagus untuk ketergantungan Vaadin pada proyek musim semi. Netbeans & Eclipse IDE juga berisi plugin dukungan penuh untuk membuat aplikasi Vaadin. Kita bisa mengakses VaadinSession saat ini, VaadinService, dan VaadinServlet serta referensi objek UI. Ini membantu untuk membuat aplikasi sederhana menggunakan perintah berikut dengan groupId dan archetypeId yang sama di IDE.

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=Latest

Class UI adalah jalur masuk untuk aplikasi vaadin yang memperluas "com, vaadin.UI". Pertama tama kita memperluas class UI dan juga membangun UI awal dari komponen Vaadin & menentukan audions untuk mengimplementasikan UI ke proyek. Sebagai pilihan lain, kita bisa mengatur UI tema kustom untuk mengikat semua komponen Vaadin ke data serta sumber daya.

2. Vaadin Components

Komponen Vaadin menentukan bidang dan tata letak serta kelas komponen lainnya dengan struktur pewarisan mereka. Properti komponen Vaadin menentukan antarmuka dan juga kelas dasar untuk semua proyek Vaadin.

Vaadin Component Properties

Visible Property: Ini mendefinisikan visibilitas komponen dengan pengaturan default true.

Locale Property: Ini mendefinisikan negara saat ini dan juga bahasa untuk komponennya.

Enabled Property: Ini mendefinisikan komponen abu-abu dalam set palsu & tidak memungkinkan interaksi pengguna.

Caption Property: Menawarkan label di dalam komponen tergantung pada tata letak

Description Property: Ini mendefinisikan deskripsi yang ditampilkan pada komponen sambil mengarahkan kursor ke atasnya.

Vaadin Field Properties

Ini mendefinisikan nilai aktual lapangan dengan menerapkan field dan kemungkinan konfigurasi. Nilai nilainya berubah dengan menggunakan ValueChangeListener.

ReadOnly: Pengguna tidak dapat mengubah nilainya saat mendefinisikan true.

TabIndex: Properti indeks tab menentukan urutan bidang fokus saat pengguna menekan tombol Tab.

Vaadin Size Properties

SetWidth (): Ini menetapkan ukuran komponen pada unit tetap atau sebagai persentase relatif (%) dari area yang tersedia yang berisi tata letak.

SetHeight (): Ini mendefinisikan komponen menyusut agar sesuai dengan konten di komponen Vaadin.

SetSizeFull (): Ini menetapkan kedua dimensi dengan ukuran relatif 100%.

SetSizeUndefined (): Ini menetapkan kedua dimensi yang tidak terdefinisi sehingga komponennya mengecil menjadi ukuran minimum.

3. Layout Components

Tata letak Vaadin UI dibangun dari komponen tata letak serta kontainer komponen. Ini menawarkan komponen yang berinteraksi sebagai simpul daun. Kita bisa membuat layout root dengan mengatur konten UI dengan setContent (). Sementara, menambahkan komponen untuk menambahkanComponent (), wadah komponen tunggal, seperti Panel dan Jendela menampung satu komponen konten UI.

Ukuran komponen tata letak sangat penting untuk ukuran standar dan dapat diubah dengan menggunakan metode sizing. Bila komponen memiliki ukuran layout relatif dalam arah tertentu maka tata letaknya mungkin tidak memiliki ukuran yang tidak terdefinisi dalam arah tertentu. Oleh karena itu kita juga bisa menggunakan format HTML deklaratif serta desainer Vaadin di dalam Eclipse untuk meningkatkan tata letak tampilan.

Margins Layout Components
Komponen tata letak margin mendukung margin sekaligus mengatur fungsi setMargin (true) yang memungkinkan semua margin untuk tata letak Vaadin. Menggunakan parameter MarginInfo memungkinkan setiap margin secara individual. Semua ukuran margin dapat disesuaikan dengan sifat padding seperti alas atas, bawah, kiri, dan kanan.

.mymargins.v-margin-left {padding-left: 10px;}
.mymargins.v-margin-right {padding-right: 20px;}
.mymargins.v-margin-top {padding-top: 30px;}
.mymargins.v-margin-bottom {padding-bottom: 40px;}

Spacing Layout Components
Komponen tata letak Vaadin juga mendukung fungsi set Spacing (true) yang mengendalikan spasi di antara slot tata letak. Jarak dapat disesuaikan dengan CSS yang mencakup lebar atau tinggi elemen dengan menggunakan gaya v-spacing

.v-vertical > .v-spacing {height: 50px;}

Alignment Layout Components
Bila komponen yang terkandung lebih kecil dari area yang disediakan untuk komponen tata letak maka komponennya selaras dalam sel dengan menggunakan metode setComponentAlignment ().

VerticalLayout layout = new VerticalLayout();
Button button = new Button(“My Button”);
layout.addComponent(button);
layout.setComponentAlignment(button, Alignment.MIDDLE_CENTER);

Custom Layout Components
Komponen CustomLayout mendukung tag lokasi HTML untuk komponen Vaadin. Komponen tata letak diisi elemen lokasi menggunakan metode addComponent ().

CustomLayout layout = new CustomLayout(
getClass().getResourceAsStream("mylayout.html"));
layout.addComponent(new Button("Hello"), "hello");

4. Vaadin Themes
Vaadin Framework memungkinkan kustomisasi sekaligus tampilan UI dengan tema. Tema Vaadin meliputi Sass atau CSS style sheets & Graphics dengan template HTML layout khusus. Tema yang dapat disesuaikan Vaadin ditempatkan di bawah / VAADIN / themes / folder aplikasi web. Peta aplikasi web Vaadin menentukan sumber daya statis dengan aplikasi Vaadin spesifik.

Semua tema dalam Vaadin Framework memiliki folder tersendiri dengan nama tema yang mengandung styles.scss untuk plain & Sass CSS. Tema yang dapat disesuaikan mewarisi tema dasar Valo dengan menggunakan variabel Sass. Sementara proyek bootstrap, tema semacam itu dibuat secara otomatis dalam aplikasi Vaadin.

Sass Themes
Sass adalah bahasa Gaya Sintaks yang Disederhanakan berdasarkan CSS3 yang memiliki beberapa fitur tambahan seperti variabel, mixin, nesting & selector inheritance. Vaadin memiliki kompiler Sass untuk mengkompilasi stylesheet selama proses pembuatan aplikasi. Oleh karena itu tema Sass dikompilasi ke CSS selama pengembangan.

Anda dapat mengaktifkan beberapa tema pada halaman yang sama dengan semua aturan gaya. Tema dapat diawali dengan pemilih dengan nama tema yang cocok. Tema Sass biasanya diatur dengan aturan bersarang di dua file: styles.scss dan mytheme.scss.

styles.scss

@import "mytheme.scss";
@import "addons.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss
.mytheme {
@include addons;
@include mytheme;
}

mytheme.scss

@import "../valo/valo.scss";
@mixin mytheme { @include valo; // Insert your own theme rules here
.mycomponent { color: red; } }

5. Widget Integration Vaadin
Vaadin Framework menawarkan cara termudah untuk membuat komponen baru dengan komposisi efektif menggunakan CustomComponent untuk memperluas komponen tata letak. Kita juga bisa membuat komponen baru dengan membuat widget sisi klien di GWT atau JavaScript. Komponen server-side dan komponen mengikat berbagi panggilan negara bagian dan RPC.

Dalam integrasi Widget, negara bersama membantu dalam berkomunikasi dengan komponen dari server-side ke sisi klien dengan menerapkan pada widget. Objek negara bersama ini diserialkan dengan Vaadin Framework. Ini mengimplementasikan antarmuka RPC untuk mendukung panggilan RPC dari sisi klien ke sisi server untuk mengkomunikasikan kejadian interaksi pengguna. Kita bisa menambahkan widget ke proyek aplikasi sekaligus bisa membuat proyek add-on terpisah untuk widget yang bisa disesuaikan. Ini menambahkan ketergantungan dengan proyek aplikasi sehingga dapat membangun tes yang lebih baik untuk proyek Vaadin lainnya.

6. Data Binding Support

Vaadin Framework mendukung pengikatan data untuk kelas domain Java dengan komponen lanjutan. Ini membantu untuk menghindari penulisan banyak kode. Komponen pengikat data menunjukkan data lengkap dalam format tabel di grid dengan melewatkan data sebagai daftar, stream atau array yang merupakan cara efektif untuk menggunakan aplikasi bisnis.

Dalam pengikatan data, Binder adalah kelas pembantu yang menawarkan untuk mengikat satu properti objek Java untuk menampilkan beberapa komponen Vaadin. Dalam kasus penggunaan formulir, Binder mendukung pengikatan dua arah yang berarti nilai input secara otomatis akan ditulis kembali ke model domain. Binder juga memberikan nilai konversi dan validasi untuk data.

Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(listOfPersons);
// define columns and the order as bean properties (default: show all)
grid.setColumns("firstName", "lastName", "email");

7.  Influencing Features of Vaadin Framework

Multiple Language Support:
Java adalah bahasa pemrograman yang kuat yang banyak digunakan untuk membangun aplikasi berkualitas dan keperluan bisnis. Dengan Vaadin, ia menawarkan kekuatan Java yang sama dengan tool profesional untuk membangun UI web Anda.

UI logic Data:
Kode UI vaadin menggunakan JVM sebagai server web yang menyertakan data dan logika bisnis. Ini mengakses & membuat data dan logika bisnis Anda sederhana dan efisien Jadi tidak perlu mengekspos layanan REST.

Easy Extensible with Java and HTML5
Vaadin Frameworkn menawarkan model pemrograman berbasis komponen dan juga modul Java yang dapat digunakan kembali. Ini juga mendukung widget HTML yang ada dengan teknologi peramban tingkat rendah.

Abstraction Web Development
Abstraksi menyediakan model pemrograman berbasis komponen untuk membangun aplikasi HTML5 halaman tunggal modern. Vaadin mendukung komunikasi client-server, masalah browser, bahasa markup, CSS dan teknologi baru juga.

8. Vaadin Framework 8.1 Improved Updates:
It Support context click events & set height of the Tree
Methods of Composite now delegate to the contained component
Grid ComponentRenderer cells shows style name for customization
Allow null components in ComponentRenderer
Add some modification operations to TreeData
OSGi whiteboard use clean-up and fixes
Current request and response are available from Vaadin(Servlet)Request/Response
Minor opening up of API, documentation fixes and improvements etc.
Fixed to add items on blur in ComboBox
Icon alignment fix for ComboBox
TreeGrid getHierarchyColumn fixed
Grid default header fixes (merging cells, components in header dan lain lain.