Workshop on how to build Vaadin Add-ons. We introduce two styles of building Vaadin add-on components for Vaadin: integrating an existing GWT widget (DatePicker), and integrating an existing JavaScript library (three.js).
Hackathon - Building vaadin add on componentsJoonas Lehtinen
My presentation at Vaadin Hackathon 19-21.4.2013. The presentation outlines all the step of creating a new Vaadin add-on component from design to deployment and publishing.
10 practices that every developer needs to start right nowCaleb Jenkins
Gathered from over 15 years of development and consulting experience with some of the largest development companies in the world. These are the 10 practices that are the lowest hanging fruit and will also have the greatest impact on the way that you write and deliver software. Enjoy.
Presentation on how to use Vaadin and Scala to build web applications on top of HTML5. Most of the presentation is live coding, so you might to want to check these examples:
http://vj.jole.fi/
https://github.com/jojule/Stocks
How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon
Here’s a comprehensive step-by-step tutorial on how to get started with Vue Typescript. Let’s understand building To-do application combining Vue 3 + Typescript.
Hackathon - Building vaadin add on componentsJoonas Lehtinen
My presentation at Vaadin Hackathon 19-21.4.2013. The presentation outlines all the step of creating a new Vaadin add-on component from design to deployment and publishing.
10 practices that every developer needs to start right nowCaleb Jenkins
Gathered from over 15 years of development and consulting experience with some of the largest development companies in the world. These are the 10 practices that are the lowest hanging fruit and will also have the greatest impact on the way that you write and deliver software. Enjoy.
Presentation on how to use Vaadin and Scala to build web applications on top of HTML5. Most of the presentation is live coding, so you might to want to check these examples:
http://vj.jole.fi/
https://github.com/jojule/Stocks
How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon
Here’s a comprehensive step-by-step tutorial on how to get started with Vue Typescript. Let’s understand building To-do application combining Vue 3 + Typescript.
React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.jsMek Srunyu Stittri
Slide deck for ForwardJS 2017 in San Francisco - March 1st 2017
https://forwardjs.com/schedule#lecture-224
Airware builds hardware, software and cloud for commercial drones. We have transitioned to Node.js for cloud functional test automation in 2015. The purpose of this is to unite Fullstack developers and Automation engineers to speak in the same language which is JavaScript. With a year worth of lessons learnt, we will share the challenges involved with building a full-stack test automation framework with Node.js while using the latest and greatest in JavaScript tools.
Related demo code available: https://github.com/samie/spring-vaadin-demo
Short 15min presentation how to use Vaadin and Spring together. See vaadin.com/spring on how to get started with your own app.
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend technologies. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming real! In this talk, I am going to discuss Universal (a.k.a. Isomorphic) JavaScript and present some practical example regarding the significant patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
(interactive slides at http://slides.com/lucianomammino/universal-js-web-applications-with-react-codemotion-rome-2017 )
Discussion on angular offering, approaches to integrate web worker in angular (5 and 6) application, their pros and cons. A sample example implementation using custom web worker approach and integrating the same with CLI(1 and 6) and the application.
Node.js and Selenium Webdriver, a journey from the Java sideMek Srunyu Stittri
** Update **
There is now an updated version of this implementation with Javascript Async/Await
Recording - https://www.youtube.com/watch?v=BTpMB2-8qMM
Slides - https://www.slideshare.net/MekSrunyuStittri/endtoend-test-automation-with-nodejs-one-year-later
Abstract
With the growing popularity of NodeJS, many companies have embraced its adoption and gone full stack. The next logical move is to have the test framework be on the same stack. Unfortunately, proven ways of implementing a Selenium framework in JavaScript are very limited and very much fragmented.
Airware builds software and hardware for commercial drones; their cloud team ships code to production every week. In this talk, their cloud automation team will talk about: how they have built their Selenium framework with Node.js; the challenges of coming from a synchronous programming language like Java; lessons learned along this journey; and other technologies/tools used to complement testing their cloud and rolling out quality.
Recording by New Relic and SauceLabs - https://www.youtube.com/watch?v=CqeCUyoIEo8
Laravel Forge: Hello World to Hello ProductionJoe Ferguson
With the recent release of Laravel Forge, Envoyer and Homestead, it has never been easier to go from nothing to something with an easy to use PHP Framework. This talk will cover creating a basic Laravel application using the Laravel specific Vagrant box "Homestead", connecting to a server (Linode, Rackspace, Digital Ocean), and deploying the application via Forge. The talk will also cover tips and tricks on customizing Homestead to fit custom needs as well as how to use Forge & Envoyer to deploy new versions of our application.
Developing high performance and responsive web apps using web workerSuresh Patidar
A brief talk on web application performance and responsiveness. Why it is important and how web worker can help achieve it. It also covers a simple example implementing web workers.
Vaadin is quickly popularizing Java framework for developing rich and interactive server-driven web applications. Vaadin is built around core Servlet and Google Web Toolkit (GWT) technologies and it strives to developer productivity by providing large library of components and ready made functionality that hides the hard parts of web development allowing developers to concentrate to the real business problem at hand. During this session we’ll cover the basics of building Vaadin based web applications: layouting, data binding, application deployment and Vaadin Touckit integration for mobile devices. Attending the speech does not require thorough understanding of web technologies in general, session will include demonstration and live coding.
React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.jsMek Srunyu Stittri
Slide deck for ForwardJS 2017 in San Francisco - March 1st 2017
https://forwardjs.com/schedule#lecture-224
Airware builds hardware, software and cloud for commercial drones. We have transitioned to Node.js for cloud functional test automation in 2015. The purpose of this is to unite Fullstack developers and Automation engineers to speak in the same language which is JavaScript. With a year worth of lessons learnt, we will share the challenges involved with building a full-stack test automation framework with Node.js while using the latest and greatest in JavaScript tools.
Related demo code available: https://github.com/samie/spring-vaadin-demo
Short 15min presentation how to use Vaadin and Spring together. See vaadin.com/spring on how to get started with your own app.
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend technologies. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming real! In this talk, I am going to discuss Universal (a.k.a. Isomorphic) JavaScript and present some practical example regarding the significant patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
(interactive slides at http://slides.com/lucianomammino/universal-js-web-applications-with-react-codemotion-rome-2017 )
Discussion on angular offering, approaches to integrate web worker in angular (5 and 6) application, their pros and cons. A sample example implementation using custom web worker approach and integrating the same with CLI(1 and 6) and the application.
Node.js and Selenium Webdriver, a journey from the Java sideMek Srunyu Stittri
** Update **
There is now an updated version of this implementation with Javascript Async/Await
Recording - https://www.youtube.com/watch?v=BTpMB2-8qMM
Slides - https://www.slideshare.net/MekSrunyuStittri/endtoend-test-automation-with-nodejs-one-year-later
Abstract
With the growing popularity of NodeJS, many companies have embraced its adoption and gone full stack. The next logical move is to have the test framework be on the same stack. Unfortunately, proven ways of implementing a Selenium framework in JavaScript are very limited and very much fragmented.
Airware builds software and hardware for commercial drones; their cloud team ships code to production every week. In this talk, their cloud automation team will talk about: how they have built their Selenium framework with Node.js; the challenges of coming from a synchronous programming language like Java; lessons learned along this journey; and other technologies/tools used to complement testing their cloud and rolling out quality.
Recording by New Relic and SauceLabs - https://www.youtube.com/watch?v=CqeCUyoIEo8
Laravel Forge: Hello World to Hello ProductionJoe Ferguson
With the recent release of Laravel Forge, Envoyer and Homestead, it has never been easier to go from nothing to something with an easy to use PHP Framework. This talk will cover creating a basic Laravel application using the Laravel specific Vagrant box "Homestead", connecting to a server (Linode, Rackspace, Digital Ocean), and deploying the application via Forge. The talk will also cover tips and tricks on customizing Homestead to fit custom needs as well as how to use Forge & Envoyer to deploy new versions of our application.
Developing high performance and responsive web apps using web workerSuresh Patidar
A brief talk on web application performance and responsiveness. Why it is important and how web worker can help achieve it. It also covers a simple example implementing web workers.
Vaadin is quickly popularizing Java framework for developing rich and interactive server-driven web applications. Vaadin is built around core Servlet and Google Web Toolkit (GWT) technologies and it strives to developer productivity by providing large library of components and ready made functionality that hides the hard parts of web development allowing developers to concentrate to the real business problem at hand. During this session we’ll cover the basics of building Vaadin based web applications: layouting, data binding, application deployment and Vaadin Touckit integration for mobile devices. Attending the speech does not require thorough understanding of web technologies in general, session will include demonstration and live coding.
A guide to create a simple Java application and upload it to the Google Cloud Platform with Google App Engine. This presentation covers usage of persistence API with both Google Cloud SQL and Google Cloud Datastore.
Google Web Toolkit
Presentation by Assoc.Prof. Dr.Thanachart Numnonda & Asst.Prof. Thanisa Kruawaisayawan, Mini Master of Java Technology KMITL, July 2012
It’s trivial today to start writing and debugging some React code, but it’s not 100% clear how to properly deploy the application, manage versions and what implications that has on the build configurations. Especially if you want to allow different versions for different users in order to perform some A/B testing, testing new features in production environment, come up with some UI experiments, or gradually roll out new features for a subset of users.
In this presentation I hopefully covered all that.
A Progressive Web Application has a lot of advantages compared to a traditional website. A PWA is user-friendly, increases customer loyalty and conversions. Curious how PWA looks like in real-life?. Curious how PWA looks like in real-life? Check out Dutch’s first PWA (Vue Storefront + Magento 2) webshop, a scoop in e-commerce land! Vendic presents Meubelplaats.nl
A webshop in need of renovation, with a back-end that didn’t meet the requirements and demands of Meubelplaats. They trusted Vendic to develop their new webshop as a PWA. And behold! A smarter, faster website with the look & feel of an app, but with a powerful Magento 2 engine.
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...DataLeader.io
PLEASE DOWNLOAD DECK SO THE ANIMATIONS WORK PROPERLY.
David Silverlight & Kim Schmidt presented this to the Phoenix Silverlight User Group prior to the Silverlight 4 release. The first slide has music, click it. It's the Black Eyed Peas singing "Let's Get it Started!"
The "Silverlight User Group Starter Kit" shown in the presentation was created by these rockstar developers: Kim Schmidt, David Silverlight, Victor Gaudioso, Cigdem Patlak, Colin Blair, John O'Keefe, Al Pascual, Jose Luis Latorre Millas, Edu Couchez, Caleb Jenkins, David Kelley, & Ariel Leroux. It's a fully-functional out-of-the-box user group site to customize.
Some functionality:
1. MVVM-based architecture
2. Streaming live presentations
3. Making use of OOB functionality
4. Remote interaction
5. RIA Services
6. Print & Webcam: Webcam takes picture, puts it on an entry badge you can print to be admitted to the meeting & can print the directions to the meeting
7. Login/Registration
8. Live Chat: ask questions of the presenter or selected person
9. Leave feedback
Architecture:
1. Microsoft Silverlight 4
2. Microsoft Expression Blend 4
3. RIA Services
4. Entity Framework
5. MVVM using SimpleMVVM
6. SQL Server Express
7. Membership using standard .NET Membership Provider
Registration Page: User Info, About You, Your Social Networks
Demo 1: Authentication & Social Networking
Demo 2: MVVM, RIA Services, & Print Event Pass
Demo 3: Video & Webcam Support
BLOOPERS AT THE END!
AtlasCamp 2015: Connect everywhere - Cloud and ServerAtlassian
Patrick Streule
You have an idea for an add-on? You want to tap into both the Atlassian Cloud and Server customer base without writing and maintaining it twice? Patrick illustrates some techniques you can use today to share most of your code between the Connect and the P2 add-on implementation.
Given at YAPC::EU 2012
Dancer + WebSocket + AnyEvent + Twiggy
This in *not* a talk about doing a hello world in Dancer, as there are plenty of it. This is a real-life example of using Dancer to address a problem in an elegant and powerful way
At $job, we have cpan mirrors. We want them to stay a bit behind the real CPAN for stability, but we have a tool to update modules from the real CPAN to our mirrors. Cool.
I wanted to have a web interface to trigger it, and monitor the injection. This problem is not a typical one (blog, wiki, CRUD, etc). Here we have a long running operation that shall happen only one at a time, that generates logs to be displayed, with states that need keeping. In this regard, it's interesting to see how Dancer is versatile enough to address these situations with ease.
This talk details how I did that, the technology I used, and the full source code (which is quite short). I used Dancer + WebSocket + AnyEvent + Twiggy + some other stuff.
This talk doesn't require any particular knowledge beyond basic Perl, and very basic web server understanding.
From Web App Model Design to Production with WakandaAlexandre Morgaut
There is many interesting platforms out there to develop Web applications, like .NET, Spring, ruby on rails, Django, LAMP, Meteor, and so on.
In this presentation, you will discover Wakanda a Model driven NoSQL / SSJS platform built on Web standards.
You will see how a project starts, can be designed, tested, developed by a team, debugged, administrated, maintained, and then how to update it in the future.
We will compare to some existing platforms and why Wakanda could make you more efficient.
How Bitbucket Pipelines Loads Connect UI Assets Super-fastAtlassian
Connect add-ons deliver better user experience when they load fast. Between CDN, server-side rendering, service workers, and code splitting, there are loads of techniques you can use to achieve this. In this session, Atlassian Developer Peter Plewa will reveal Bitbucket Pipelines' secret for fast loads, and what they can do in the future to make Pipelines even faster.
Peter Plewa, Development Principal, Atlassian
Selenide is simple and powerful in use wrapper-library over Selenium. But what the point just of shorter lines of code? In this talk we will see how to tame your webui mustang with Selenide and put it into fence of simple BDD stories with Easyb. We also consider pros and cons of the approach and compare to available alternatives.
Serverless Angular, Material, Firebase and Google Cloud applicationsLoiane Groner
Presented at DevFest Florida 2019 - January 19, Orlando, FL.
In this talk we'll learn how to use all the power of Google stack technologies (Angular, Material, Firebase and Google Cloud) to develop a full stack application. We'll learn how we can empower a serverless Angular + Material application with Firebase and reactive programming by using realtime database, Firestore, authentication (with different providers) and Firebase hosting. And we if need any other functionality, we can use Cloud Functions or a NodeJS app. This talk will demonstrate the overview of a real world application (40k users), along with CI configuration and some details of the code (the good parts!).
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
8. What we do here
Eclipse Kepler - eclipse.org
Vaadin plugin for Eclipse - vaadin.com/eclipse
Jetty Server - run-Jetty-run plugin
New Vaadin project - testing and development
DatePicker - simple GWT or JavaScript add-on
... or something else.
13. Client-server UI components
“UI Component”
• Button, Table, Tree, ...
• Server-side data
• Full Java API
HTTP(S)
“Widget”
• Client-side peer for the
component
• Runs on JavaScript
Java
Java
• Compiled with JDK
• Google Web Toolkit
14. This is add-on
HTTP(S)
“UI Component”
• Button, Table, Tree, ...
• Server-side data
• Full Java API
Java
• Compiled with JDK
“Widget”
• Client-side peer for the
component
• Runs on JavaScript
Java
Add-on JAR file
• Google Web Toolkit
19. Webcam
Webcam allows you to capture
images from the web camera.
webcam.addCaptureSucceededListener(new CaptureSucceededListener() {
@Override
public void captureSucceeded(CaptureSucceededEvent event) {
Image img = new Image("Captured image", new FileResource(
targetFile));
img.setWidth("200px");
layout.addComponent(img);
}
});
20. ReCaptcha
A wrapper component for ReCaptcha.
Recaptcha4j used for the server side
validation of the captcha.
ReCaptcha captcha = new ReCaptcha(
MY_PRIVATE_KEY,
MY_PUBLIC_KEY,
new ReCaptchaOptions() {{
theme = "white";
}}
);
layout.addComponent(captcha);
21. GoogleMaps
Enables Google Maps support in Vaadin
7 projects.
GoogleMap googleMap = new GoogleMap(new LatLon(60.440963, 22.25122),
10.0, apiKey);
googleMap.setSizeFull();
googleMap.addMarker("DRAGGABLE: Paavo Nurmi Stadion", new LatLon(
60.442423, 22.26044), true, "VAADIN/1377279006_stadium.png");
kakolaMarker = googleMap.addMarker("DRAGGABLE: Kakolan vankila",
new LatLon(60.44291, 22.242415), true, null);
googleMap.addMarker("NOT DRAGGABLE: Iso-Heikkilä", new LatLon(
60.450403, 22.230399), false, null);
googleMap.setMinZoom(4.0);
googleMap.setMaxZoom(16.0);
22. Spring stuff
This add-on contains classes
that add some missing "glue"
between Vaadin and Spring.
<!-- Activate Spring annotation support -->
<context:annotation-config/>
<!-- Example of an application-specific bean which gets
created and autowired when the
application starts and destroyed when the application stops -->
<bean class="com.example.MyApplicationBean"/>
<!-- This makse the Vaadin application instance itself available in,
and autowired by, this context -->
<bean class="org.dellroad.stuff.vaadin.ContextApplicationFactoryBean"
p:autowire="true"/>
23. OAuth Popup
Authorize the Vaadin application to do things on the
users' behalf on various services such as Facebook,
Twitter, etc.
OAuthPopupButton ob = new TwitterButton(TW_KEY, TW_SECRET);
ob.addOAuthListener(new OAuthListener() {
@Override
public void authSuccessful(String accessToken,
String accessTokenSecret) {
Notification.show("Authorized");
// TODO: do something with the access token
}
@Override
public void authDenied(String reason) {
Notification.show("Authorization denied");
}
});
24. Scaladin
Scaladin makes easier to use Vaadin Framework with
Scala programming language.
class ScaladinExampleApplication extends
Application("Scaladin Example") {
override val main = new VerticalLayout {
add(new Button {
caption = "Click me!"
icon = new ThemeResource("../runo/icons/16/globe.png")
clickListeners += { mainWindow.showNotification("Hello World!")
})
}
}
25. LeapGestures
Basic Leapmotion gestures API for Vaadin.
LeapGestures g = LeapGestures.extend(this);
g.addSwipeDownListener(new SwipeDownListener() {
@Override
public void onSwipeDown(SwipeDownArgs args) {
layout.addComponent(new Label("swipe down"));
}
});
26. Widgets - the most common add-ons
Extensions - invisible functionality
Data - integration to the backend
Tools - additional tools and components
Misc - something else
39. Tools for add-on development
Browser
developer
tools
Java
IDE
Java EE
Server
Google Chrome
Firefox
Safari
NetBeans 7.4 (+ Vaadin plugin)
Eclipse Kepler (+Vaadin and Jetty plugin)
Tomcat 7
Jetty 8
43. DatePicker component
“The goal of this exercise is to practice the usage of
RPC and shared state. In this exercise, we will take
an existing GWT widget and make it compatible
with server-side Vaadin applications.”
com.google.gwt.user.datepicker.client. DatePicker
45. 1. Create a new Vaadin7 project called DatePicker
2. Create a new Vaadin 7 widget using the ”fullfledged”
template, call your widget DatePickerComponent
3. In the server-side component, override getState to
return a DatePickerState
4. Remove the client RPC interface
5. In the server RPC interface, define one method,
dateChanged(Date date)
49. SuperDevMode runtime
SuperDevMode code server for MyAddonProject.launch
Visit http://localhost:9876/
Start
code server
Debug as » Debug on server
Visit http://localhost:8080/MyAddOnProject?debug
Run
application in
SuperDevMode
50. 6. The state object should have a field for the selected date
7. Set a default value for the date
8. Implement the server RPC in the server-side component.The
dateChanged method should update the selected date in state
9. The connector should create a DatePicker widget
10. The connector should register itself as a
ValueChangeHandler<Date> to the widget, in order to listen to
the selected date
11. State changes should be passed to the widget
53. GWT widget theme
to use the
default
GWT theme
Include the following to the .gwt.xml
<inherits name="com.google.gwt.user.theme.standard.Standard" />
54. JSNI classes
Java to JavaScript:
public static native void alert(String msg) /*-{
$wnd.alert(msg);
}-*/;
JavaScript to Java:
// Call instance method instanceFoo() on x
x.@org.vaadin.se.myaddon.MyJSNI::myMethod(Ljava/lang/String;)(s);
61. Server code
@JavaScript({"three.min.js",
"cube_integration.js"})
public class Cube
extends AbstractJavaScriptComponent {
!
!
!
!
!
!
!
!
public Cube() {
! setWidth("200px");
! setHeight("200px");
}
!
!
!
!
!
!
!
!
!
!
!
!
!
!
public CubeState getState() {
! return (CubeState) super.getState();
}
public boolean isAnimating() {
! return getState().animate;
}
! ! public void stop() {
! ! ! getState().animate = false;
! ! }
!
!
!
!
! public void start() {
! ! getState().animate = true;!! !
! }
!
public class CubeState
extends JavaScriptComponentState {
! public boolean animate = false;
}
62. Client integration JavaScript
window.com_example_threejs_Cube = function() {
var element = this.getElement();
// This is Vaadin callback on state changes
this.onStateChange = function() {
! if (this.getState().animate) {
! this.start();
!
! else {
}
! this.stop();
!
!
}
}
// React to resize events
this.addResizeListener(this.getElement(), this.onResize);
// ...
}
63. JavaScript not found
Could not initialize JavaScriptConnector because no
JavaScript init function was found. Make sure one of
these functions are defined:
• com_example_threejsaddon_Cube
• com_vaadin_ui_AbstractJavaScriptComponent
• com_vaadin_ui_AbstractComponent
• com_vaadin_server_AbstractClientConnector
66. Add-on versions follow semver.org
New add-on version (start with 1.0.0)
Major
when you make incompatible API changes
when you add functionality
Minor
Patch
Do not break backward compatibility
when you make backwards-compatible bug fixes
No new features
74. Publish add-ons in Directory
Good
description
Links and
documentation
Demo is
worth
a thousand
words
Be descriptive and think of SEO.
Make screenshots and screencasts.
Example code, issue tracking, discussion
Publish sources (GitHub is good)
Show how it works. Remember code samples.
Works as test and validation for your add-on
76. Add-on ideas
Start from
yourself
There is aready one user for something that you need.
Common patterns and needs.
Combine client and server
Generalize
Reuse existing JavaScript and GWT widgets.
Abstract functionality: Java API is your product
Fix bugs
Maintain
Follow discussion