From 4f1a7d4331ec802789009937cda5a1e0e2213cb4 Mon Sep 17 00:00:00 2001
From: Robert Jaros <rjaros@finn.pl>
Date: Sun, 11 Feb 2018 02:14:48 +0100
Subject: Documentation update.

---
 Config.md | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 README.md | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 160 insertions(+), 2 deletions(-)
 create mode 100644 Config.md

diff --git a/Config.md b/Config.md
new file mode 100644
index 00000000..3bb2198c
--- /dev/null
+++ b/Config.md
@@ -0,0 +1,75 @@
+### Project configuration
+
+KVision applications are built with [Gradle](https://gradle.org/).
+The necessary artifacts are published on [Bintray](https://bintray.com/) so you have to add some repositories in your build.gradle:
+
+    repositories {
+        jcenter()
+        maven { url = 'https://dl.bintray.com/gbaldeck/kotlin' }
+        maven { url = 'https://dl.bintray.com/rjaros/kotlin' }
+    }
+
+Next add dependencies on Kotlin and KVision:
+
+    dependencies {
+        compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
+        compile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
+        compile "pl.treksoft:kvision:$kvision_version"
+    }
+
+KVision applications are using [Kotlin frontend plugin](https://github.com/Kotlin/kotlin-frontend-plugin) 
+to download and integrate a number of NPM dependencies. To make upgrades easier, all of them are listed in 
+the single **npm.dependencies** file, located in the root directory of the project. 
+Currently this file contains:
+
+    css-loader *
+    style-loader *
+    less *
+    less-loader *
+    imports-loader *
+    uglifyjs-webpack-plugin *
+    file-loader *
+    url-loader *
+    jquery 3.3.1
+    bootstrap 3.3.7
+    bootstrap-webpack 0.0.6
+    font-awesome 4.7.0
+    font-awesome-webpack 0.0.5-beta.2
+    awesome-bootstrap-checkbox 0.3.7
+    bootstrap-select 1.12.4
+    ajax-bootstrap-select 1.4.3
+    trix 0.11.1
+    fecha 2.3.2
+    bootstrap-datetime-picker 2.4.4
+    bootstrap-touchspin 3.1.1
+    snabbdom 0.6.9
+    snabbdom-virtualize 0.7.0
+    navigo 7.0.0
+    jquery-resizable-dom 0.26.0
+
+In case of an upgrade you should synchronize above content with the same [file](https://raw.githubusercontent.com/rjaros/kvision/master/npm.dependencies) 
+located in the KVision source tree on GitHub.
+
+NPM dependencies are used in your build.gradle with the following configuration:
+
+    buildscript {
+        ...
+        ext.npmdeps = new File("npm.dependencies").getText()
+        ...
+    }
+    ...
+    kotlinFrontend {
+        npm {
+            npmdeps.eachLine { line ->
+                def (name, version) = line.tokenize(" ")
+                dependency(name, version)
+            }
+            devDependency("karma")
+        }
+        webpackBundle {
+            bundleName = "main"
+            contentPath = file('src/main/web')
+        }
+    }
+
+See [KVision examples](https://github.com/rjaros/kvision-examples) for more details.
\ No newline at end of file
diff --git a/README.md b/README.md
index 00f9b37d..4eb0ec33 100644
--- a/README.md
+++ b/README.md
@@ -49,9 +49,92 @@ built with [Gradle](https://gradle.org/) and supporting Webpack's [Hot Module Re
         
 4. Open [http://localhost:8088/](http://localhost:8088/) in your browser.
 
-## Tutorial
+## Usage samples
+
+### Hello world
+
+        val root = Root("root")
+        val label = Label("Hello world!")
+        root.add(label)
+
+### Basic components interactions
+
+##### Simple, explicit way
+
+        val root = Root("root")
+        val panel = HPanel(spacing = 20, alignItems = FLEXALIGNITEMS.CENTER)
+        val label = Label("Not yet clicked.")
+        panel.add(label)
+        var count = 0
+        val button = Button("Click me")
+        button.onClick {
+            count++
+            label.text = "You clicked the button $count times."
+        }
+        panel.add(button)
+        root.add(panel)
+
+##### Using Kotlin language features
+
+        Root("root").add(
+            HPanel(spacing = 20, alignItems = FLEXALIGNITEMS.CENTER).apply {
+                val label = Label("Not yet clicked.").also { add(it) }
+                var count = 0
+                add(Button("Click me").onClick {
+                    label.text = "You clicked the button ${++count} times."
+                })
+            }
+        )
+
+### Tab panel with JavaScript routing
+
+        val firstPanel = Tag(TAG.DIV, "First")
+        val secondPanel = Tag(TAG.DIV, "Second")
+        val thirdPanel = Tag(TAG.DIV, "Third")
+
+        Root("root").add(TabPanel().apply {
+            addTab("First", firstPanel, route = "/first")
+            addTab("Second", secondPanel, route = "/second")
+            addTab("Third", thirdPanel, route = "/third")
+        })
+
+### Type safe forms
+
+        data class Model(val username: String?, val password: String?)
+
+        Root("root").add(FormPanel {
+            Model(it.string("username"), it.string("password"))
+        }.apply {
+            add("username", Text(label = "Username"), required = true)
+            add("password", Password(label = "Password"), required = true)
+            add(Button("OK").onClick {
+                val data: Data = this@apply.getData()
+                println("Username: ${data.username}")
+                println("Password: ${data.password}")
+            })
+        })
+        
+### Data binding with observable data model
+
+        class Data(text: String) : BaseDataComponent() {
+            var text: String by obs(text)
+        }
+        val model = observableListOf(
+            Data("One"),
+            Data("Two"),
+            Data("Three")
+        )
+        Root("root").add(DataContainer(model, { index ->
+            Label(model[index].text)
+        }, child = HPanel(spacing = 10, wrap = FLEXWRAP.WRAP)))
+
+        launch { // Kotlin coroutines
+            while (true) {
+                delay(1000)
+                model.reverse()
+            }
+        }
 
-{{TBD}}
 
 ## API documentation
 
-- 
cgit