diff options
| -rw-r--r-- | Config.md | 75 | ||||
| -rw-r--r-- | README.md | 87 |
2 files changed, 160 insertions, 2 deletions
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 @@ -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 |