From ee80eb2bf5ac4b3644d0a5d852d2fbc010be3b90 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Thu, 14 Apr 2016 17:19:23 +0300 Subject: [PATCH] Convert to asciidoc MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Rename “doc” folder to “docs” to align with individual elements. Remove redundant “index.asciidoc” file. --- apidoc/index.html | 59 ------- doc/elements-getting-started.md | 145 ---------------- doc/index.asciidoc | 1 - docs/elements-getting-started.adoc | 155 ++++++++++++++++++ .../elements-introduction.adoc | 66 ++++---- 5 files changed, 189 insertions(+), 237 deletions(-) delete mode 100644 apidoc/index.html delete mode 100644 doc/elements-getting-started.md delete mode 100644 doc/index.asciidoc create mode 100644 docs/elements-getting-started.adoc rename doc/elements-introduction.md => docs/elements-introduction.adoc (56%) diff --git a/apidoc/index.html b/apidoc/index.html deleted file mode 100644 index 00a6234..0000000 --- a/apidoc/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - vaadin-core-elements - - - - -
-

API documentation for vaadin-core-elements

- -
- - diff --git a/doc/elements-getting-started.md b/doc/elements-getting-started.md deleted file mode 100644 index 58eaf5e..0000000 --- a/doc/elements-getting-started.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Getting Started -order: 2 -layout: page ---- - -# Getting Started - -This page will guide you through the installation of Vaadin Core Elements bundle and help you get started with your first project using these elements. - -## Installation - -There are three ways to use Vaadin Core Elements in your project: Bower, CDN and a ZIP archive. The only difference between these options is the URL you will use to import the necessary files into your HTML page. - -### 1. Create a new folder - -Start by creating a new folder for your project and change into the newly created folder. - - $ mkdir my-project - $ cd my-project - -### 2. Install Vaadin Core Elements - -#### Bower - -Recommended way to manage your front-end dependencies is using [Bower](http://bower.io). Follow the [Bower installation instructions](http://bower.io/#install-bower), then run the following command inside your project folder to install the most recent stable release. - - - $ bower install --save vaadin-core-elements - - -This will download Vaadin Core Elements bundle and its dependencies into the `bower_components` folder inside your project's folder. - ----- ->If you wish to use a development snapshot version of some element, you can install/update that separately. For example: - - - $ bower install --save vaadin-grid#master - ----- - -#### CDN - -You can use Vaadin Core Elements from CDN (see example below). This is especially convenient for services like JSFiddle, Codepen.io, etc. - -For example, to import vaadin-grid, use the following URL: - - https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html - -To import all Vaadin Core Elements, use the following URL: - - https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-core-elements/vaadin-core-elements.html - ----- -> You can also use the nightly snapshot versions of any component, e.g. `https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/vaadin-grid.html` - ----- - -#### Download ZIP - -1. Download the latest ZIP archive from [vaadin.com/download](https://vaadin.com/download#elements). -2. Extract the archive under your project folder, for example `deps`. - -### 3. Create a HTML file - -Create a new HTML file (for example `index.html`) inside your project folder and copy the following code into it. - -Pay attention to the following details: - - - HTML5 doctype (``) is required for everything to work smoothly. - - You need to adjust how the `webcomponents-lite.min.js` polyfill and `vaadin-core-elements.html` are imported according to the installation option you selected. - - Notice how the JavaScript logic waits for `WebComponentsReady` event before accessing the elements. - ----- -> **Serving the files during development**, when using Bower or the ZIP archive: -> Due to browser security restrictions, serving HTML imports from a `file:///` URL does not work. You need a web server to view pages where you use custom elements. One simple option is to use the [`serve`](https://www.npmjs.com/package/serve) NPM package. - ----- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
First NameLast NameEmail
- - - - - - - - -After you have created the file and you have a local server serving the files, you should be able to open up the application in your browser at [http://localhost:3000/index.html](http://localhost:3000/index.html) (notice, that the port 3000 may vary depending on the server you use). - - - - Vaadin Grid
- Continue to Vaadin Grid documentation - diff --git a/doc/index.asciidoc b/doc/index.asciidoc deleted file mode 100644 index 2dff096..0000000 --- a/doc/index.asciidoc +++ /dev/null @@ -1 +0,0 @@ -== Index \ No newline at end of file diff --git a/docs/elements-getting-started.adoc b/docs/elements-getting-started.adoc new file mode 100644 index 0000000..5e810c8 --- /dev/null +++ b/docs/elements-getting-started.adoc @@ -0,0 +1,155 @@ +--- +title: Getting Started +order: 2 +layout: page +--- + +# Getting Started with Vaadin Core Elements + +This page will guide you through the installation of Vaadin Core Elements bundle and help you get started with your first project using these elements. + +## Installation + +There are three ways to use Vaadin Core Elements in your project: Bower, CDN and a ZIP archive. The only difference between these options is the URL you will use to import the necessary files into your HTML page. + +### Create a new folder + +Start by creating a new folder for your project and change into the newly created folder. + +---- +$ mkdir my-project +$ cd my-project +---- + +### Install Vaadin Core Elements + +#### Bower + +Recommended way to manage your front-end dependencies is using link:http://bower.io[Bower]. Follow the link:http://bower.io/#install-bower[Bower installation instructions], then run the following command inside your project folder to install the most recent stable release. + +[source] +---- +$ bower install --save vaadin-core-elements +---- + +This will download Vaadin Core Elements bundle and its dependencies into the `bower_components` folder inside your project's folder. + +If you wish to use a development snapshot version of some element, you can install/update that separately. For example: + +---- +$ bower install --save vaadin-grid#master +---- + +#### CDN + +You can use Vaadin Core Elements from CDN (see example below). This is especially convenient for services like JSFiddle, Codepen.io, etc. + +For example, to import vaadin-grid, use the following URL: + +---- +https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html +---- + +To import all Vaadin Core Elements, use the following URL: + +---- +https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-core-elements/vaadin-core-elements.html +---- + +You can also use the nightly snapshot versions of any component, e.g. + +---- +https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/vaadin-grid.html +---- + +#### Download ZIP + +1. Download the latest release ZIP archive from the link:https://github.com/vaadin/vaadin-core-elements/releases[GitHub releases page] +2. Extract the archive under your project folder, for example `deps`. + +### Create a HTML file + +Create a new HTML file (for example `index.html`) inside your project folder and copy the following code into it. + +Pay attention to the following details: + + - HTML5 doctype (``) is required for everything to work smoothly. + - You need to adjust how the `webcomponents-lite.min.js` polyfill and `vaadin-core-elements.html` are imported according to the installation option you selected. + - Notice how the JavaScript logic waits for `WebComponentsReady` event before accessing the elements. + + +**Serving the files during development**, when using Bower or the ZIP archive: + +Due to browser security restrictions, serving HTML imports from a `file:///` URL does not work. You need a web server to view pages where you use custom elements. One simple option is to use the link:https://www.npmjs.com/package/serve["serve" npm package]. + +[source,html] +---- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NameEmail
+ + + + + + +---- + +After you have created the file and you have a local server serving the files, you should be able to open up the application in your browser at http://localhost:3000/index.html (notice, that the port 3000 may vary depending on the server you use). + ++++ + + + Vaadin Grid
+ Continue to Vaadin Grid documentation + ++++ diff --git a/doc/elements-introduction.md b/docs/elements-introduction.adoc similarity index 56% rename from doc/elements-introduction.md rename to docs/elements-introduction.adoc index 34cf380..1f61324 100644 --- a/doc/elements-introduction.md +++ b/docs/elements-introduction.adoc @@ -4,62 +4,61 @@ order: 1 layout: page --- -# Introduction +# Vaadin Core Elements -## Vaadin Core Elements +## Introduction -Vaadin Core Elements is a free and open source set of high quality [Web Components](http://webcomponents.org) for building mobile and desktop web applications in modern browsers. It builds on top of Google’s [Polymer](http://www.polymer-project.org) library, and augments the [Iron, Paper and other element sets of Polymer](https://elements.polymer-project.org) with elements that are needed in building business applications. +Vaadin Core Elements is a free and open source set of high quality link:http://webcomponents.org[Web Components] for building mobile and desktop web applications in modern browsers. It builds on top of Google’s link:http://www.polymer-project.org[Polymer] library, and augments the link:https://elements.polymer-project.org[Iron, Paper and other element sets of Polymer] with elements that are needed in building business applications. -Although based on Polymer, Vaadin elements can be used together with any other web framework which has support for Web Components. See the "Integrations" section for examples how to use the elements together with different JavaScript frameworks and libraries. +Although based on Polymer, Vaadin Elements can be used together with any other web framework which has support for Web Components. See the "Integrations" section for examples how to use the elements together with different JavaScript frameworks and libraries, such as Angular 2 and React. -If you wish to use Vaadin elements with [GWT](http://gwtproject.org), you can use [GWT Polymer Elements](https://vaadin.com/gwt) +If you wish to use Vaadin elements with link:http://gwtproject.org[GWT], you can use link:https://vaadin.com/gwt[GWT Polymer Elements] Vaadin Core Elements includes the following elements: - - [Combo Box](https://vaadin.com/docs/-/part/elements/vaadin-combo-box/vaadin-combo-box-overview.html) - - [Date Picker](https://vaadin.com/docs/-/part/elements/vaadin-date-picker/vaadin-date-picker-overview.html) - - [Grid](https://vaadin.com/docs/-/part/elements/vaadin-grid/overview.html) - - [Upload](https://vaadin.com/docs/-/part/elements/vaadin-upload/vaadin-upload-overview.html) + - link:/docs/-/part/elements/vaadin-combo-box/vaadin-combo-box-overview.html[Combo Box] + - link:/docs/-/part/elements/vaadin-date-picker/vaadin-date-picker-overview.html[Date Picker] + - link:/docs/-/part/elements/vaadin-grid/overview.html[Grid] + - link:/docs/-/part/elements/vaadin-upload/vaadin-upload-overview.html[Upload] -Learn more about the benefits of using Vaadin elements from the [Vaadin elements page »](https://vaadin.com/elements) +Learn more about the benefits of using Vaadin elements from the link:https://vaadin.com/elements[Vaadin Elements page »] ## Background ### Web Components -Web Components is a collection of HTML standards (under development, Dec 2015), which together provide web developers the tools to extend the native web platform with similar tools as the browser vendors have been using for creating the built-in standard elements, such as `