Getting Started

Following steps helps you getting started with your own Yested based project.
You can see the source code for this project on Yested GitHub:
https://github.com/jean79/yested/tree/master/samples/TestYestedProject

1. Get the Intellij Idea

If you haven’t done so already, install Intellij IDEA by JetBrains.

2. Enable Kotlin plugin

Install Kotlin plugin into IDEA: File -> Settings -> Plugins -> Browse Repositories -> Kotlin (Custom Languages)

3. Create Kotlin Javascript Project

Create new Kotlin – Javascript project.

For Kotlin JS library click on Create and select Use library from plugin.

4. Add Yested library as a dependency

Get the latest binaries of Yested library (single jar file) and put it as a dependency to your project:

IDEA -> Project Structure -> Project Settings -> Modules -> [YOUR_PROJECT] -> Dependencies -> (plus on the right) JARs or directories.

5. Create HTML wrapper for your application

Now create a HTML page which will host your Kotlin/Yested application. Call file index.html and put into the root of your project.

File should have following content: Don’t worry you do not see the generated js files, we create them in next steps.

<html>
<head>
    <!-- Yested uses jQuery library a bit -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- This is a JS implementation of Kotlin libraries - extracted by Intellij IDEA -->
    <script src="out/production/TestYestedProject/lib/kotlin.js"></script>

    <!-- This is Yested library - extracted by Intellij IDEA -->
    <script src="out/production/TestYestedProject/lib/Yested.js"></script>
</head>
<body>
    <!-- This DIV will host your whole Yested application -->
    <div id="app"></div>

    <!-- Finally import our compiled application -->
    <script src="out/production/TestYestedProject/TestYestedProject.js"></script>
</body>
</html>

6. Create a minimalistic Yested application

Create a file src/main/kotlin/main.kt with following content:

import net.yested.el
import net.yested.Div
import net.yested.with

fun main(args: Array) {

    //here we create some div with a header and a list
    val div = Div() with {
        h1 {
            +"Hello World" //plus add given text as textContent to HTML element (h1)
        }
        ul {
            li {
                strong {
                    +"Bolded text"
                }
            }
            li {
                a(href = "http://www.yested.net") {
                    +"Link to Framework"
                }
            }
        }
    }

    //when we have constructed a DOM, we can take a parent element (via div.element)
    //and append it as a child to "app" div in HTML page
    el("app").appendChild(div.element)

}

7. Build the project

Now build it via IDEA -> Build -> Make Project.
You should see following files in a Project View:

Project Structure

Project Structure

8. Run it

Let’s create a Run/Debug Configuration. IDEA -> Edit Configurations.
Add JavaScript Debug and set URL to index.html file. It is also handy to add Make to be executed Before launch.
run_configuration

Then you should see this:
web_sample