SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Vaadin 7
coding UI components
August 2013
Benjamin Schupp
mp technology consulting GmbH
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 2
Mission:
Create Vaadin component for a jquery plugin ‚qrcode‘
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 3
Understanding Vaadin
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 4
Application Architecture
• UI Model stored as component
tree on server
• Rendering in browser via
GWT Widgets
• Communication through json
(UIDL)
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 5
UI Component Architecture
Java
• Compiled with JDK
HTTP(S)
Client UI Component
• Rendering
• Event handling
• Runs on JavaScript
Server UI Component
• State
• Button, Table…
• Java API to program
Java
• Google Web Toolkit
• Compiled to JavaScript
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 6
Vaadin Architecture
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 7
Extending Vaadin
Understand the options
1. Use existing add-ons from the directory
- 3rd party or own
- No implementation necessary
- Example:
- Vaadin Charts
- Calendar
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 8
Extending Vaadin
Understand the options
2. Create CustomComponent
- Composition of existing built-in components
- Server-side implementation only
- Example: Reoccuring dialog
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 9
Extending Vaadin
Understand the options
3. Component Extensions
- Add features to existing components without
inheritance
- Server-side component and client-side connector
implementation
- Example: Add a caps-lock warning to fields
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 10
Extending Vaadin
Understand the options
4. Integrate JavaScript libraries/code
- Server-side component and client-side connector
implementation
- Automatic delivery of JavaScript libraries by framework
- Example: In a minute
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 11
Extending Vaadin
Understand the options
5. Client side widget implementation
- Use/extend existing widgets
- Compose existing GWT widgets
- Create own widget implementation
(create DOM manually)
- GWT programming model!
(Recompile widgetset)
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 12
Packaging a custom Widget
• For a Vaadin add-on create proper MANIFEST file
(see dev.vaadin.com/wiki/VaadinAddon)
• Don‘t forget to include the sources
• Upload to VAADIN directory
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 13
Client – Server
Integration
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 14
Sample code…
© mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 15
• Individual-Software für Intranet und Internet und Mobile seit 2003
• Beratung, Analyse, Konzepte, Architektur, Implementierung
• Zertifizierter Vaadin Solution Partner
• http://www.mptechnology.ch
Offizielle Vaadin Schulungen in Zürich
• 11. – 12. November 2013: Vaadin 7 Fundamentals
• 13. – 14. November 2013: Advanced Vaadin 7
• Anmeldung über https://vaadin.com/services#vaadintraining
mp technology, Zürich

Weitere ähnliche Inhalte

Was ist angesagt?

Zero-Copy Compositing in WebKitGTK+ for GUADEC 2015 (GUADEC 2015)
Zero-Copy Compositing in WebKitGTK+ for GUADEC 2015 (GUADEC 2015)Zero-Copy Compositing in WebKitGTK+ for GUADEC 2015 (GUADEC 2015)
Zero-Copy Compositing in WebKitGTK+ for GUADEC 2015 (GUADEC 2015)
Igalia
 
[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part
Nuxeo
 

Was ist angesagt? (20)

Zero-Copy Compositing in WebKitGTK+ for GUADEC 2015 (GUADEC 2015)
Zero-Copy Compositing in WebKitGTK+ for GUADEC 2015 (GUADEC 2015)Zero-Copy Compositing in WebKitGTK+ for GUADEC 2015 (GUADEC 2015)
Zero-Copy Compositing in WebKitGTK+ for GUADEC 2015 (GUADEC 2015)
 
JAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stackJAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stack
 
JAMstack WTJ
JAMstack WTJJAMstack WTJ
JAMstack WTJ
 
Extending and Integrating QlikView
Extending and Integrating QlikViewExtending and Integrating QlikView
Extending and Integrating QlikView
 
Magento Multi-Source Inventory (MSI)
Magento Multi-Source Inventory (MSI)Magento Multi-Source Inventory (MSI)
Magento Multi-Source Inventory (MSI)
 
WebKit-powered HTML overlays in your pipeline with GstWPE (GStreamer Conferen...
WebKit-powered HTML overlays in your pipeline with GstWPE (GStreamer Conferen...WebKit-powered HTML overlays in your pipeline with GstWPE (GStreamer Conferen...
WebKit-powered HTML overlays in your pipeline with GstWPE (GStreamer Conferen...
 
[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
 
Jayway Web Tech Radar 2015
Jayway Web Tech Radar 2015Jayway Web Tech Radar 2015
Jayway Web Tech Radar 2015
 
Web tech portal
Web tech portalWeb tech portal
Web tech portal
 
Drupal jam 2017 services
Drupal jam 2017 servicesDrupal jam 2017 services
Drupal jam 2017 services
 
Magento Cloud - Introduction
Magento Cloud - IntroductionMagento Cloud - Introduction
Magento Cloud - Introduction
 
Vue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrareVue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrare
 
Speed up Development by Turning Web Blocks Into First-Class Citizens
Speed up Development by Turning Web Blocks Into First-Class CitizensSpeed up Development by Turning Web Blocks Into First-Class Citizens
Speed up Development by Turning Web Blocks Into First-Class Citizens
 
Building SPAs with AngularJS
Building SPAs with AngularJSBuilding SPAs with AngularJS
Building SPAs with AngularJS
 
Building RIA - Comparison between Adobe Flex and GWT - Hu Shunjie
Building RIA - Comparison between Adobe Flex and GWT - Hu ShunjieBuilding RIA - Comparison between Adobe Flex and GWT - Hu Shunjie
Building RIA - Comparison between Adobe Flex and GWT - Hu Shunjie
 
Rails-like Asp.Net Development Shared
Rails-like Asp.Net Development SharedRails-like Asp.Net Development Shared
Rails-like Asp.Net Development Shared
 
#CodefreshLive Event
#CodefreshLive Event#CodefreshLive Event
#CodefreshLive Event
 
Android App Architecture
Android App ArchitectureAndroid App Architecture
Android App Architecture
 
HTML5 Charting in ASP.NET using RadHtmlChart
HTML5 Charting in ASP.NET using RadHtmlChartHTML5 Charting in ASP.NET using RadHtmlChart
HTML5 Charting in ASP.NET using RadHtmlChart
 

Andere mochten auch

Passbook - das Wallet im iPhone - Internet Briefing Payment Conference 2013, ...
Passbook - das Wallet im iPhone - Internet Briefing Payment Conference 2013, ...Passbook - das Wallet im iPhone - Internet Briefing Payment Conference 2013, ...
Passbook - das Wallet im iPhone - Internet Briefing Payment Conference 2013, ...
mp technology
 

Andere mochten auch (7)

iBeacons - Chance oder Hype am POS?
iBeacons - Chance oder Hype am POS?iBeacons - Chance oder Hype am POS?
iBeacons - Chance oder Hype am POS?
 
Passbook - das Wallet im iPhone - Internet Briefing Payment Conference 2013, ...
Passbook - das Wallet im iPhone - Internet Briefing Payment Conference 2013, ...Passbook - das Wallet im iPhone - Internet Briefing Payment Conference 2013, ...
Passbook - das Wallet im iPhone - Internet Briefing Payment Conference 2013, ...
 
From Second Screen Social App to Continuous Multi-Screen Experience
From Second Screen Social App to Continuous Multi-Screen ExperienceFrom Second Screen Social App to Continuous Multi-Screen Experience
From Second Screen Social App to Continuous Multi-Screen Experience
 
Play framework 2 : Peter Hilton
Play framework 2 : Peter HiltonPlay framework 2 : Peter Hilton
Play framework 2 : Peter Hilton
 
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and Vaadin
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and VaadinSimple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and Vaadin
Simple Open Source Java Cloud App Stack with Guice, Hibernate, Jersey and Vaadin
 
Play Framework workshop: full stack java web app
Play Framework workshop: full stack java web appPlay Framework workshop: full stack java web app
Play Framework workshop: full stack java web app
 
Osgi based cloud system architecture - Open Cloud Engine
Osgi based cloud system architecture - Open Cloud EngineOsgi based cloud system architecture - Open Cloud Engine
Osgi based cloud system architecture - Open Cloud Engine
 

Ähnlich wie Vaadin7 coding ui components

Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
connectwebex
 

Ähnlich wie Vaadin7 coding ui components (20)

Vaadin Jump Start
Vaadin Jump StartVaadin Jump Start
Vaadin Jump Start
 
SAP Web IDE
SAP Web IDESAP Web IDE
SAP Web IDE
 
Best Practices - By Lofi Dewanto
Best Practices - By Lofi DewantoBest Practices - By Lofi Dewanto
Best Practices - By Lofi Dewanto
 
Experience in Magento Community Projects
Experience in Magento Community ProjectsExperience in Magento Community Projects
Experience in Magento Community Projects
 
Building your own calendly using amazon app sync
Building your own calendly using amazon app syncBuilding your own calendly using amazon app sync
Building your own calendly using amazon app sync
 
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
 
WireCloud hands-on. FI-PPP-Liaison
WireCloud hands-on. FI-PPP-LiaisonWireCloud hands-on. FI-PPP-Liaison
WireCloud hands-on. FI-PPP-Liaison
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
User-Customizable Web Components for Building One-Page Sites
User-Customizable Web Components for Building One-Page SitesUser-Customizable Web Components for Building One-Page Sites
User-Customizable Web Components for Building One-Page Sites
 
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDESAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 
NetWeaver Gateway- Gateway Service Consumption
NetWeaver Gateway- Gateway Service ConsumptionNetWeaver Gateway- Gateway Service Consumption
NetWeaver Gateway- Gateway Service Consumption
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
 
CodeCharge Studio RAD tool
CodeCharge Studio RAD toolCodeCharge Studio RAD tool
CodeCharge Studio RAD tool
 
JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!
 
Liquid Day - Retos modernos del desarrollo de aplicaciones de negocio
Liquid Day - Retos modernos del desarrollo de aplicaciones de negocioLiquid Day - Retos modernos del desarrollo de aplicaciones de negocio
Liquid Day - Retos modernos del desarrollo de aplicaciones de negocio
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
GWT widget development
GWT widget developmentGWT widget development
GWT widget development
 

Kürzlich hochgeladen

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Kürzlich hochgeladen (20)

HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 

Vaadin7 coding ui components

  • 1. Vaadin 7 coding UI components August 2013 Benjamin Schupp mp technology consulting GmbH
  • 2. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 2 Mission: Create Vaadin component for a jquery plugin ‚qrcode‘
  • 3. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 3 Understanding Vaadin
  • 4. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 4 Application Architecture • UI Model stored as component tree on server • Rendering in browser via GWT Widgets • Communication through json (UIDL)
  • 5. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 5 UI Component Architecture Java • Compiled with JDK HTTP(S) Client UI Component • Rendering • Event handling • Runs on JavaScript Server UI Component • State • Button, Table… • Java API to program Java • Google Web Toolkit • Compiled to JavaScript
  • 6. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 6 Vaadin Architecture
  • 7. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 7 Extending Vaadin Understand the options 1. Use existing add-ons from the directory - 3rd party or own - No implementation necessary - Example: - Vaadin Charts - Calendar
  • 8. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 8 Extending Vaadin Understand the options 2. Create CustomComponent - Composition of existing built-in components - Server-side implementation only - Example: Reoccuring dialog
  • 9. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 9 Extending Vaadin Understand the options 3. Component Extensions - Add features to existing components without inheritance - Server-side component and client-side connector implementation - Example: Add a caps-lock warning to fields
  • 10. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 10 Extending Vaadin Understand the options 4. Integrate JavaScript libraries/code - Server-side component and client-side connector implementation - Automatic delivery of JavaScript libraries by framework - Example: In a minute
  • 11. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 11 Extending Vaadin Understand the options 5. Client side widget implementation - Use/extend existing widgets - Compose existing GWT widgets - Create own widget implementation (create DOM manually) - GWT programming model! (Recompile widgetset)
  • 12. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 12 Packaging a custom Widget • For a Vaadin add-on create proper MANIFEST file (see dev.vaadin.com/wiki/VaadinAddon) • Don‘t forget to include the sources • Upload to VAADIN directory
  • 13. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 13 Client – Server Integration
  • 14. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 14 Sample code…
  • 15. © mp technology consulting GmbH & Vaadin Ltd | August 2013 | Page 15 • Individual-Software für Intranet und Internet und Mobile seit 2003 • Beratung, Analyse, Konzepte, Architektur, Implementierung • Zertifizierter Vaadin Solution Partner • http://www.mptechnology.ch Offizielle Vaadin Schulungen in Zürich • 11. – 12. November 2013: Vaadin 7 Fundamentals • 13. – 14. November 2013: Advanced Vaadin 7 • Anmeldung über https://vaadin.com/services#vaadintraining mp technology, Zürich