Vaadin

Vaadin היא פלטפורמת קוד פתוח לפיתוח יישומי אינטרנט. פלטפורמת Vaadin כוללת מערך רכיבי אינטרנט, ספריה אינטרנטית של Java ומערכת כלים ומתחילים. מוצר הדגל של Vaadin (בעבר Vaadin Framework) מאפשר חילול ממשקי משתמש אינטרנט HTML5 באמצעות שפת התכנות Java.

== היסטוריה ==
הפלטפורמה החלה את דרכה בשנת 2001 כחלק מפיתוח של חברה פינית בשם IT Mill שבאותה תקופה ייצרה אפליקציות ללקוחות. על מנת לפתח את היישומים באופן יעיל יותר, IT Mill פיתחה החברה פלטפורמה שתסייע בבניית האפליקציות. בשלב הראשון בנתה החברה את המוצר לשימושה הפנימי.

בשנת 2002 החליטה IT Mill על שחרור הגרסה הראשונית של הפלטפורמה ברישיון קוד פתוח בשם "Millstone 3".
עד שנת 2005 המשיכה IT Mill לשחרר גרסאות של "Millstone 3", בשלב זה פיתוח הפלטפורמה התקדם ונוספה עליו שכבה של טכנולוגיית AJAX. בעקבות כך הוחלט על שכתוב צד לקוח וצד שרת. שינוי זה סייע בכך שהשינויים בגרסאות הבאות היו שוליים.

שנת 2006 הביאה שינוי גדול נוסף בצד לקוח על מנת להתאימו לתכונות חדשות של AJAX והגרסה שוחררה בשם "IT Mill Toolkit 4". השינוי כלל הוספה של JavaScript ובעקבות כך היה קשה להמשיך לתחזק ולהרחיב את הגרסה הזו. מסיבה זו בשנת 2007 הוחלט להוריד את ה-JavaScript ולהחליף אותו ב-GWT. שינוי זה הוביל לכתיבתו מחדש של צד לקוח וגרסה חדשה יצאה בשם "IT Mill Toolkit 5".

בשנת 2009 IT Mill שחררה גרסה "Toolkit 6" ושמה שונה ל- Vaadin.

בשנת 2010 המותג Vaddin היה מוכר בציבור יותר משם החברה (IT Mill) מסיבה זו החליטה החברה לשנות את שמה ולאמץ את שם החברה.

בשנת 2013 יצאה גרסה 7. בגרסה זו הכניסו את GWT כחלק מהמערכת. בנוסף, הוסיפו תכונות חדשות ושיפרו את המערכת בהתאם למשובים מהקהילה של Vaadin.

בשנת 2017 שוחררה מגרסה 8. השינויים העיקריים נבעו בעיקר משיפורים של JAVA גרסה 8. הגרסה עברה התאמה מלאה ל-JAVA 8 ושיפור של ה-API.

בשנת 2018 שוחררה גרסה 10 (גרסה 9 לא הייתה קיימת). היה זה השינוי המשמעותי ביותר בהיסטוריה של Vaadin. השינוי כלל שכתוב של הרכיבים ושכבת התקשורת.

בשנת 2019 שוחררה גרסה 13 (בתא) הכוללת שיפורים קטנים ותיקון תקלות.

== רכיבי Vaadin ==
הרכיבים של Vaadin הם קבוצה מקיפה של רכיבי אינטרנט המיועדים למפתחי אתרי אינטרנט. בעזרת הרכיבים אלו ניתן לבנות בקלות יחסית אתר אינטרנט.

=== שימוש בסיסי ===
רכיבי Vaadin מותקנים בדרך כלל עם npm או bower. לדוגמה, הפקודה הבאה מתקינה את <code>vaadin-button</code> : <syntaxhighlight lang="console">
bower install vaadin/vaadin-button
</syntaxhighlight> לאחר ההתקנה, הרכיב יכול לשמש בדף אינטרנט כדלקמן: <syntaxhighlight lang="html">
<html>
<head>
 <link rel="import" href="bower_components/vaadin-button/vaadin-button.html" />
</head>
<body>
 <vaadin-button onclick='alert("Hello, World")'>Click me</vaadin-button>
</body>
</html>
</syntaxhighlight> להלן צילום מסך של הדף הקודם:
600x600 פיקסלים

=== רכיבים זמינים ===
הטבלה הבאה מציגה רשימה של רכיבי האינטרנט של קוד פתוח ללא תשלום הכלולים ב- Vaadin:
{| class="wikitable sortable mw-collapsible"
|+ רכיבי Vaadin
! רכיב
! שם אלמנט
! תיאור
|-
| כפתור
| vaadin-button
| אלמנט לחצנים מותאמים אישית
|-
| תיבת סימון
| vaadin-checkbox
| אלמנט עבור תיבות סימון מותאמות אישית
|-
| תיבה משולבת
| vaadin-combo-box
| מציג רשימה של פריטים עם סינון
|-
| תפריט הקשר
| vaadin-context-menu
| מציג פריטים תלויי הקשר עבור כל רכיב בדף
|-
| בורר התאריכים
| vaadin-date-picker
| שדה בחירת תאריך עם יומן חודש לגלילה
|-
| דיאלוג
| vaadin-dialog
| מציג דיאלוגים מודאליים
|-
| תפריט נפתח
| vaadin-dropdown-menu
| רכיב אינטרנט להתאמה אישית עבור תפריטים נפתחים
|-
| פריסת טופס
| vaadin-form-layout
| פריסת תגובה ניתנת להגדרה עבור רכיבי טופס
|-
| רשת
| vaadin-grid
| נתונים טבלה / נתונים רכיב אלמנט
|-
| סמל ממשק המשתמש מוגדר
| vaadin-icons
| אוסף של 600 + סמלים
|- resource="File:Vaadin-flow-hello-world-screenshot.png"
| פריט
| vaadin-item
| מיכל עבור רכיבי פריט
|-
| תיבת רשימות
| vaadin-list-box
|תיבה המכילה רשימת פריטים
|-
| הודעה
| vaadin-notification
| התראות מותאמות אישית
|-
| פריסה מסודרת
| vaadin-ordered-layout
| יישר אלמנטים אופקית או אנכית ב-HTML
|-
| רכיבים מתקדמים
|
|
|-
| סרגל התקדמות
| vaadin-progress-bar
| פסי התקדמות מותאמים אישית
|-
| כפתור רדיו
| vaadin-radio-button
| לחצני בחירה מותאמים אישית
|-
| פיצול הפריסה
| vaadin-split-layout
| חלוקת פריסה לאזורים הכולל שינוי גודל דינאמי
|-
| כרטיסיות ניווט
| vaadin-tabs
| כרטיסיות מותאמות אישית
|-
| העלה
| vaadin-upload
| טען קבצים מרובים עם סימן התקדמות
|}
 Vaadin Flow (בעבר Vaadin Framework) היא תשתית לבניית יישומי אינטרנט ואתרי אינטרנט. מודל התכנות של Vadadin Flow דומה Vaadin Framework's - היא משתמשת בשפת JAVA כשפת התכנות ליצירת תוכן אינטרנט. ארכיטקטורת Vaadin Flow היא של צד שרת כלומר רוב הלוגיקה פועלת בצד שרת. בצד לקוח, Vaadin Flow בנויה על גבי תקני Web Component.

Vaadin Flow כוללת תמיכה ברכיבי אינטרנט עבור מפתחי JAVA ומאפשרת שימוש בתבניות HTML (המבוססות על פולימרים) עם תקשורת אוטומטית של שרת-לקוח. הוא כולל גם את ממשק ה- API של ניתוב (חיבור רכיבי ממשק משתמש לכתובות אתר), חיבור נתונים (סנכרון שדות קלט עם מודלים לנתונים בצד השרת) ומניפולציה של ה-DOM בצד השרת.

=== שימוש בסיסי ===
להלן דוגמה בסיסית של שימוש ב- Vaadin Flow: <syntaxhighlight lang="java">
@Route("hello-world")
public class MainView extends VerticalLayout {

 public MainView() {
 TextField textField = new TextField("Enter your name");

 Button button = new Button("Click me", event ->
 add(new Span("Hello, " + textField.getValue())));

 add(textField, button);
 }
}
</syntaxhighlight> להלן צילום מסך של היישום הקודם:
600x600 פיקסלים

=== מאפיינים ===
==== מימוש ממשק המשתמש רק עם JAVA ====
Vaadin Flow מאפשרת שימוש במרכיבי ממשק קיימים וביצוע רכיבים חדשים באמצעות קוד JAVA הפועל בצד שרת. ניתן ליצור ולשנות את DOM מהצד שרת. הבנאי של קטע הקוד הבא מראה כיצד ליצור אלמנט <code>div</code> חדש, להגדיר <code>id</code>, ולהוסיף מאזין לאירוע קליק: <syntaxhighlight lang="java">
@Route("")
public class MainView extends Div {
 public MainView() {
 Div div = new Div();
 div.setText("Click me");
 div.getElement().setAttribute("id", "main");
 div.getElement().addEventListener("click", (DomEventListener) event ->
 add(new Span("Hello, World")));
 add(div);
 }
}
</syntaxhighlight>

==== שילוב רכיבי אינטרנט ====
שילוב רכיבי אינטרנט מסופק באמצעות ההערות <code>@Import</code> ו- <code>@Tag</code> <code>@Import</code>. קטע הקוד הבא מראה כיצד לעטוף רכיב אינטרנט קיים ברכיב Java בצד השרת: <syntaxhighlight lang="java">
@Tag("juicy-ace-editor")
@HtmlImport("bower_components/juicy-ace-editor/juicy-ace-editor.html")
public class JuicyAceEditor extends Div {

 public void setMode(String mode) {
 getElement().setAttribute("mode", mode);
 }
}
</syntaxhighlight>

==== Router ====
Router הוא מושג ליבה ב-Vaadin Flow המאפשר ניווט באמצעות כתובות אתרים. ה-Router מאפשר חיבור של כתובות אתרים לרכיבי ממשק משתמש. הוא מבוסס על ממשק API HTML5 History המאפשר למשתמשי הקצה לנווט בין הדפים תוך שמירה על מצב הדף. קטע הקוד הבא מראה כיצד להשתמש בהערות <code>@Route</code> כדי להציג את הרכיב <code>@Route</code> כאשר משתמש הקצה מבקש כתובת אתר כגון <code>http://yourdomain.com /hello/world</code> : <syntaxhighlight lang="java">
@Route("hello/world")
public class HelloWorldComponent extends Div {
 public HelloWorldComponent() {
 setText("Hello, World!");
 }
}
</syntaxhighlight>

==== מיזוג נתונים ====
מיזוג הנתונים נעשה דרך מחלקת <code>Binder</code>. זה מאפשר לסנכרן את הערכים בשדות קלט עם מודלים נתונים בצד השרת. קטע הקוד הבא מראה כיצד לקשר את <code>name</code> שדה Java מסוג <code>Person</code> לערך ברכיב <code>TextField</code> : <syntaxhighlight lang="java">
TextField nameField = new TextField();

Binder<Person> binder = new Binder<>();
binder.bind(nameField, Person::getName, Person::setName);
</syntaxhighlight>

==== תבניות HTML ====
Vaadin Flow מאפשרת הגדרה של תבניות HTML עם תקשורת אוטומטית של שרת לקוח וחיבור נתונים (בעת שימוש בתבניות מבוססות פולימר ). להלן דוגמה לתבנית מבוססת פולימרים: <syntaxhighlight lang="html">
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/vaadin-text-field/vaadin-text-field.html">

<dom-module id="hello-world">
 <template>
 <vaadin-text-field label="Your name" value=""></vaadin-text-field>
 <button on-click="greet">Click me</button>
 <div id="greeting">greeting</div>
 </template>
 <script>
 class HelloWorld extends Polymer.Element {
 static get is() {
 return 'hello-world'
 }
 }
 customElements.define(HelloWorld.is, HelloWorld);
 </script>
</dom-module>
</syntaxhighlight> קטע הקוד הבא מראה כיצד לחבר את התבנית הקודמת למרכיב Java בצד השרת: <syntaxhighlight lang="java">
@Tag("hello-world")
@HtmlImport("src/hello-world.html")
public class HelloWorld extends PolymerTemplate<HelloWorld.HelloWorldModel> {

 public interface HelloWorldModel extends TemplateModel {
 String getName();
 void setGreeting(String greeting);
 }

 @EventHandler
 private void greet() {
 getModel().setGreeting("Hello, " + getModel().getName());
 }
}
</syntaxhighlight>

==== התאמה אישית של מראה ותחושת המשתמש ====
התאמה אישית של המראה ותחושת המשתמש ניתן לעשות עם CSS, סגנונות מותאמים אישית של HTML, או על ידי תצורות ערכות נושא מוכנות.

==== שילוב עבודה עם Spring Framework ====
Vaadin Flow כולל אינטגרציה עם Spring Framework 5 ו-Spring Boot 2.

== לקריאה נוספת ==
* Duarte, A. (2018) [https://www.packtpub.com/application-development/data-centric-applications-vaadin-8 יישומים מבוססי נתונים עם Vaadin 8]. הוצאה לאור.
* פרנקל, נ. (2013) [https://isbnsearch.org/isbn/9781782169772 לימוד Vaadin 7, מהדורה שנייה]. הוצאה לאור.
* Duarte, A. (2013) [https://isbnsearch.org/isbn/9781782162261 Vaadin 7 UI עיצוב על ידי דוגמה: מדריך למתחילים]. הוצאה לאור.
* הולן, J., & Kvasnovsky, O. (2013) [https://isbnsearch.org/isbn/9781849518802 Vaadin 7 Cookbook]. הוצאה לאור.
* טיילור ג (2012) [https://isbnsearch.org/isbn/9781478375104 מתכונים של Vaadin]. הוצאה לאור.
* פרנקל, נ. (2011) [https://isbnsearch.org/isbn/9781849515221 לימוד Vaadin]. הוצאה לאור.
* Grönroos, M. (2010) [https://isbnsearch.org/isbn/9789529267538 ספר Vaadin]. Vaadin בע"מ

== קישורים חיצוניים ==

* 

קטגוריה:Java
קטגוריה:דפים עם תרגומים שלא נסקרו