diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 171 |
1 files changed, 0 insertions, 171 deletions
diff --git a/README.md b/README.md deleted file mode 100644 index 42f61de0..00000000 --- a/README.md +++ /dev/null @@ -1,171 +0,0 @@ -# KVision - -Object oriented Web UI framework for Kotlin/JS. - -KVision allows you to build user interface of modern web applications with the [Kotlin](https://kotlinlang.org) language. -It's designed to be object oriented in the "most classical" sense - it gives you a hierarchy of many different components, -which are used to build application UI. - -Unlike most of the popular web UI frameworks (AngularJS, React, Vue.js and others), -KVision is not declarative - it is not designed to mix HTML code (or pseudo code) with a typical -programming language like JavaScript. In KVision everything is just written in Kotlin, and your code can be reused not by creating any templates, -but by using well known OOP design patterns - composition and inheritance. - -This design is quite similar to many non-web UI programming libraries including Swing (Java), QT (C++) and WinForms (C#). - -**KVision is a new project in a development phase. Please create an issue for any bugs or feature requests.** - -## Features - -- 100% type safe and fully compiled dev environment. -- Type safe DSL builders. -- Based on [Bootstrap](https://getbootstrap.com/) styles, typography and components. -- Utilizes [Snabbdom](https://github.com/snabbdom/snabbdom) fast virtual DOM implementation. -- Integrates with libraries and components from [Font awesome](https://fontawesome.com/), [Bootstrap Select](https://github.com/silviomoreto/bootstrap-select) (with [AJAX](https://github.com/truckingsim/Ajax-Bootstrap-Select) extension), -[Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox), [Trix editor](https://trix-editor.org/), [Bootstrap Datetime picker](https://github.com/AuspeXeu/bootstrap-datetimepicker), -[Bootstrap touchspin](https://github.com/istvan-ujjmeszaros/bootstrap-touchspin) and [Navigo](https://github.com/krasimir/navigo). -- Includes sophisticated layout containers, including CSS flexbox, CSS grid and Bootstrap responsive 12 columns grid. -- Includes convenient forms implementation, with support for many different input components and easy to use validation. -- Data binding support for [observable](https://github.com/rjaros/kotlin-observable-js) data model. -- Easy to use Drag & Drop support. -- Ready to explore [KVision examples](https://github.com/rjaros/kvision-examples) are available, -built with [Gradle](https://gradle.org/) and supporting Webpack's [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/) and -[Kotlin JavaScript DCE (dead code elimination)](https://kotlinlang.org/docs/reference/javascript-dce.html). -- [Karma](https://karma-runner.github.io/) testing framework support. -- IDE support (IntelliJ IDEA Community Edition). - -## Getting started - -#### Development - -1. Download [KVision examples](https://github.com/rjaros/kvision-examples) from GitHub: - - git clone https://github.com/rjaros/kvision-examples.git - -2. Enter one of the examples directory: - - cd kvision-examples/showcase (on Linux) - cd kvision-examples\showcase (on Windows) - -3. Run Gradle incremental build with: - - ./gradlew -t run (on Linux) - gradlew.bat -t run (on Windows) - -4. Open [http://localhost:8088/](http://localhost:8088/) in your browser. - -5. Play with the code and see your changes immediately in the browser. - -#### Production - -To build complete application optimized for production run: - - ./gradlew -Pprod=true distZip (on Linux) - gradlew.bat -Pprod=true distZip (on Windows) - -Application package will be saved as build/distributions/showcase.zip. - -## 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." - }) - } - ) - -##### Using type safe DSL builders - - Root("root") { - hPanel(spacing = 20, alignItems = FlexAlignItems.CENTER) { - val label = label("Not yet clicked.") - var count = 0 - 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() - } - } - - -## API documentation - -Full API documentation is available at [https://rjaros.github.io/kvision/api/](https://rjaros.github.io/kvision/api/). |