I'm thinking of using Yested in a toy project, so I had a go at upgrading to the latest Kotlin, 1.1.2.

For now I've made the minimum changes needed to get the demo site to work for me. I may make a sub-branch with "tidy-up" changes suggested by IntelliJ, including switching to using JQuery derived with ts2kt from DefinitelyTyped.

This is the idea behind class hierarchy - feel free to comment, we can change it:
Component trait just provide HTMLElement
ParentComponent provides some useful protected methods for manipulating element (add/remove child, attributes setting)
Content of HTML element is created by the Component code, not by the user of the component (TextInput, Grid, ...)
HTMLParentComponent
inner content of the html element can be created by DSL
example: div, span, ...

So If I undestand well, ParentComponents are the components which for we don't want to allow the user to add any kind of child elements explicitly. So for example the Grid: It is a table with many child elements, but these elements are added and controlled by the Grid itself, not the user of Grid, so she can't do like this:

Grid {...
   div {...} // It is prohibited for 'ParentComponents'
}

I think then that the name 'ParentComponent' is misleading. In my opinion, we need only two base classes:

• abstract Component class with the protected helper methods of ParentComponent. The classes that now are inherited from ParentComponent, would be the child of this Component. These child classes can control which elements can a user add to themselves.
• HTMLParentComponent, but with an another name, e.g. "ComponentContainer", which for the user can freely add any elements (div, ul, etc.)

Can you use 4 spaces as indent?

Of course.

Was thinking about adding id and class as optional parameters to all HTML DSL functions, namely HTMLParentComponent.div an .span.
So that instead of 
div {
id = "bla"
ul { }
}
we can write 
div(id="bla") {
ul { }
}

I think it is a good Idead, but the default value should be an empty string.

Allow user to set max height of a whole table and have a scrollbar for tbody only.

It is possible to have div with scrollbar: div { "style".."overflow-y: scroll; max-height: 300px" +grid } but this does not make header fix.

Unfortunately it is not possible to set this value for tbody. When I encapsulate tbody within such div as above, it causes that columns width of tbody are different than widths of header columns.

Anybody have some idea? Should we implement some 3rd party grid javascript library?

Sample code:

div {
  btsButton(label = {+"click me"}) { //this handler is not called if button is clicked}
  +"This line causes that handler doesn't work"
}

somehow it is caused by element.innerHTML += this:

public fun String.plus(): Unit {
        element.innerHTML += this
//but it works with  //element.addText(this) - but this prevents entering html code inside a string 
}

With this change you can achieve the following example from the Bootstrap website with Yested

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

row {
    col(ExtraSmall(12), Medium(8)) {
        + ".col-xs-12 .col-md-8"
    }
    col(ExtraSmall(6), Medium(4)) {
        + ".col-xs-6 .col-md-4"
    }
}

Hi,

Using the 0.0.104 build of Yested and Kotlin 1.0.2. I have a graph on one of the pages in my app. I'm getting an error on line 2113 in Yested.js (return (Kotlin.isType(tmp$0 = this.element, CanvasI) ? tmp$0 : Kotlin.throwCCE()).getContext(id);) that stated CanvasI is not defined. Is the the 104 build not compatible with Kotlin 1.0.2?

Thanks

Should this significantly improve performance? Description of FLUX / React https://www.youtube.com/watch?v=nYkdrAPrdcw&list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v#t=638 http://www.infoq.com/articles/reactjs-codecademy

Make it shorter, to provide better overview of what Yested is. Demonstrate main features of the framework, each in a few lines. Proposal for sections: Kotlin vs Javascript - strongly typed language Components - how to create components and how to compose them together DSL language for quick layout (strongly typed!) Out of box Bootstrap wrappers

There is probably issue with Internet Explorer: When some HTTPElement was already part of the DOM, we can't set him as a child to another part of the DOM. Let's try to first remove the HTTPElement from it's previous parent ELEMENT and only then add it as child to another element. Methods affected: HTMLComponent.plus, appendChild

Remove ParentComponent

• appendChild, appendContent etc moved to HTMLComponent (original HTMLParentComponent)

Component trait should be kept simple:

public trait Component {
    val element : HTMLElement
}

So that if you somebody create non-DSL component like Breadcrumb or Grid, user of the component cannot call some unexpected methods of the component.

All components implementation must provide element value:

public class Tabs : Component {
    public override val element = createElement("div")

if user wants to manipulate with element, he must do it directly: element.appendChild(...) element.setAttribute(..)

Also removing some inconsistencies, some components now extend Component instead of HTMLParentComponent.

method rename: replace -> setContent, setChild

I added a nav list to the right of the Bootstrap example page, with Affix (always on top of the page, cannot scroll out) and scrollspy(menu items are activated automatically while scrolling through their sections) functionality.

I changed the separator character from "/" to "_" in the URL hash, because the scrollspy plugin/JQuery complains about it.

I removed the default ID value for the navbar. My opinion is that it is too valuable information to set it implicitly and hide from the programmer.

Unfortunately I used tab character instead of spaces, which caused some unwanted modifications. I didn't find any coding convetion for the projects, so please choose one of them, and I will use it.

Thanks, Balázs

It looks like Facebook's GraphQL will revolutionize the way in-browser web-apps communicate with the server, replacing REST.

There is an actively developed Java library for server-side GraphQL - however it's schema definition is quite verbose, seems like a great candidate for Kotlin builders.

I'd love to be able to quickly create a project where I can code in Kotlin both client-side and server-side, perhaps using GraphQL to communicate between both parts of the app.

1. Open master/detail example
2. Click add button -> form appears
3. Enter text to name field
4. Click to "Save" button (ensure you haven't clicked anywhere) -> You get validation failed error

to fix validation you have to edit text, click somewhere at free space and after that press save

1. Open Smart Grid example
2. Click filter icon at any column -> a text field appear
3. Click to text field -> focus not getting to the text field
4. Use to get focus at the text field
5. Type something to the text field
6. Try to select text in the text field -> you can't

https://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css example of usage:

<div class="row">
  <div class="col-xs-auto">Left</div>
  <div class="col-xs-auto-right">Right</div>
  <div class="col-middle">Middle</div>
</div>

fiddle: http://jsfiddle.net/9wzqz/