summaryrefslogtreecommitdiffstats
path: root/docs/integrations
diff options
context:
space:
mode:
Diffstat (limited to 'docs/integrations')
-rw-r--r--docs/integrations/img/react-integration.pngbin225915 -> 0 bytes
-rw-r--r--docs/integrations/integrations-react.adoc121
-rw-r--r--docs/integrations/integrations-vuejs.adoc107
3 files changed, 0 insertions, 228 deletions
diff --git a/docs/integrations/img/react-integration.png b/docs/integrations/img/react-integration.png
deleted file mode 100644
index 7490bd2..0000000
--- a/docs/integrations/img/react-integration.png
+++ /dev/null
Binary files differ
diff --git a/docs/integrations/integrations-react.adoc b/docs/integrations/integrations-react.adoc
deleted file mode 100644
index d312296..0000000
--- a/docs/integrations/integrations-react.adoc
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: React Integration
-order: 1
-layout: page
----
-
-# React Integration
-
-The link:https://facebook.github.io/react/[React] library from Facebook easily integrates with web components.
-As long as you import required polyfills and add HTML imports for the elements you are using, you can simply start adding these custom elements to your JSX markup.
-
-ifdef::web[]
-====
-See also the link:https://facebook.github.io/react/docs/webcomponents.html[Web Components page] in React documentation.
-====
-endif::web[]
-
-
-## Grid Example
-
-[[figure.vaadin-grid.react]]
-.React integration example using [vaadinelement]#vaadin-grid#
-image::img/react-integration.png[]
-
-The example consists of two React components: [classname]#UserApp# and [classname]#UserGrid#.
-The [classname]#UserGrid# component wraps the [vaadinelement]#vaadin-grid# element and does all necessary initialization to display a list of random users.
-As React does not support link:https://facebook.github.io/react/docs/jsx-gotchas.html#custom-html-attributes[custom attributes] on standard elements, [vaadinelement]#vaadin-grid# DOM API cannot be fully utilized in the initialization.
-Fortunately, [vaadinelement]#vaadin-grid# also provides corresponding JavaScript APIs.
-
-Selecting an item in the [classname]#UserGrid# is handled by the [classname]#UserApp# component.
-The selection is handled by displaying the photo of the selected user below the [vaadinelement]#vaadin-grid#.
-
-The code below can be run and forked as a JSFiddle at https://jsfiddle.net/pw1nLaL8/2/.
-
-[source, javascript]
-----
-// Create the UserGrid class
-var UserGrid = React.createClass({
- render: function(){
- return (
- '<vaadin-grid></vaadin-grid>';
- )
- },
-
- componentDidMount: function() {
- var _this = this;
- var vGrid = ReactDOM.findDOMNode(this);
-
- // Let the mounted <vaadin-grid> upgrade
- (function wait() {
- if (vGrid.selection) {
- // Assign the data source
- vGrid.items = _this.items;
- vGrid.size = 1000;
-
- // Bind selection listener
- vGrid.addEventListener("selected-items-changed", _this.onRowSelect);
-
- var pictureRenderer = function(cell) {
- cell.element.innerHTML = "<img style='width: 30px' src='" + cell.data + "'></img>";
- };
-
- // Define columns
- vGrid.columns = [
- {name: "user.picture.thumbnail", width: 100, renderer: pictureRenderer},
- {name: "user.name.first"},
- {name: "user.name.last"},
- {name: "user.email"},
- ];
-
- } else {
- setTimeout(wait, 50);
- }
- })();
- },
-
- items: function(params, callback) {
- var url = 'https://randomuser.me/api?index=' + params.index + '&results=' + params.count;
- getJSON(url, function(data) {
- callback(data.results);
- });
- },
-
- onRowSelect: function(e) {
- var onUserSelect = this.props.onUserSelect;
- var index = e.target.selection.selected()[0];
- e.target.getItem(index, function(err, data) {
- onUserSelect(err ? undefined : data.user);
- });
- }
-});
-
-var UserApp = React.createClass({
-
- render: function() {
- var userImage;
- if (this.state.selected) {
- userImage = <img className="user-image" src={this.state.selected.picture.large} ></img>;
- }
-
- return (
- <div>
- <UserGrid onUserSelect={this.userSelect}></UserGrid>
- {userImage}
- </div>
- );
- },
-
- getInitialState: function() {
- return {};
- },
-
- userSelect: function(user) {
- this.setState({selected: user});
- }
-});
-
-HTMLImports.whenReady(function(){
- ReactDOM.render('<UserApp></UserApp>', document.getElementById('container'));
-});
-----
diff --git a/docs/integrations/integrations-vuejs.adoc b/docs/integrations/integrations-vuejs.adoc
deleted file mode 100644
index edaef94..0000000
--- a/docs/integrations/integrations-vuejs.adoc
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Vue.js Integration
-order: 2
-layout: page
----
-
-# Vue.js Integration
-
-link:https://vuejs.org/[Vue.js] is a library for building interactive web interfaces with JavaScript.
-Vue's components can be link:https://vuejs.org/v2/guide/comparison.html#Polymer[loosely compared] to Vaadin Elements and both provide a very similar development style.
-
-
-== Quick Start
-
-. Before installing Vaadin Elements, you first have to install and initialize your application with Bower.
-Vaadin Elements uses link:http://bower.io/[Bower] for package management.
-+
-[source,subs="normal"]
-----
-[prompt]#$# [command]#npm# install bower -g
-[prompt]#$# [command]#bower# init
-----
-
-. By default, Bower installs dependencies to the [filename]#bower_components# directory.
-But if you are using Webpack or Vue CLI, it expects static files to be in the [filename]#static# directory.
-Thus, create the [filename]#.bowerrc# file in the root directory, with the following content:
-+
-[source,json]
-.&#46;bowerrc
-----
-{
- "directory" : "static/bower_components"
-}
-----
-
-. Now, you can install all the Vaadin elements that you need in your application.
-For instance, to install [elementname]#https://vaadin.com/elements/-/element/vaadin-date-picker[vaadin-date-picker]# element, run the following:
-+
-[source,subs="normal"]
-----
-[prompt]#$# [command]#bower# install --save [replaceable]#vaadin-date-picker#
-----
-
-. For better browser support, you need to add the Web Components polyfill to the [elementname]#head# section of your [filename]#index.html#.
-This will allow the use of Vaadin Elements in all evergreen browsers.
-+
-[NOTE]
-Web Components are natively supported in Chrome and Opera and the polyfill is not required.
-+
-[source, html]
-.index.html
-----
-<script src="static/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-----
-
-. Now you can import and use Vaadin Elements in your Vue Component.
-+
-[source,html,subs="normal"]
-.src/components/DateSelect.vue
-----
-<template>
- <div class="date-select">
- <link rel="import" href="static/bower_components/vaadin-date-picker/vaadin-date-picker.html">
- <vaadin-date-picker
- class="custom-theme"
- :label="label"
- :value="date"
- v-on:value-changed="onDateChange">
- </vaadin-date-picker>
- </div>
-</template>
-
-<script>
-export default {
- data () {
- return {
- label: 'Select a date',
- date: '2016-12-31'
- }
- },
- methods: {
- onDateChange: function (e) {
- console.log('date changed: ' + e.detail.value)
- }
- }
-}
-</script>
-----
-+
-[NOTE]
-Importing elements directly in the component facilities a lazy loading of elements, and they are imported only when they are actually used.
-Otherwise, you might import the element in your [filename]#index.html#.
-
-. Custom styling does not work inside a Vue component.
-To style an element, create custom style tags in your [filename]#index.html#.
-+
-[source, html]
-.index.html
-----
-<style is="custom-style">
- vaadin-date-picker {
- --primary-color: red;
- --primary-text-color: green;
- --secondary-text-color: yellow;
- }
-</style>
-----