diff options
Diffstat (limited to 'docs/integrations')
-rw-r--r-- | docs/integrations/img/react-integration.png | bin | 225915 -> 0 bytes | |||
-rw-r--r-- | docs/integrations/integrations-react.adoc | 121 | ||||
-rw-r--r-- | docs/integrations/integrations-vuejs.adoc | 107 |
3 files changed, 0 insertions, 228 deletions
diff --git a/docs/integrations/img/react-integration.png b/docs/integrations/img/react-integration.png Binary files differdeleted file mode 100644 index 7490bd2..0000000 --- a/docs/integrations/img/react-integration.png +++ /dev/null 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] -..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> ----- |