Doodle - A pure Kotlin, UI framework for the Web

JavaScript
1

I just released Doodle . A pure Kotlin UI framework for the Web. The difference compared to other frameworks is that it is not a nicer way to write HTML/CSS. Doodle apps actually don’t use browser concepts at all.

Single-language

Doodle is written entirely in Kotlin and so are its apps. Doodle Applications do not use HTML, CSS styles or Javascript libraries. In fact, apps are not aware of the Browser (or Browser concepts) at all, and can be written entirely as common (cross-platform) code in multi-platform setups.

Expressive

Creating expressive, intuitive apps is natural with Doodle. It makes complex rendering easy with powerful, vector-oriented rendering, provides fully customizable layouts and simplifies pointer and keyboard handling.

Simply define your View hierarchy, business logic and go.

Vector Oriented

It is easy to build beautifully detailed UIs with Doodle. All rendering in Doodle is vector-oriented; so ellipses, paths, lines, gradients, affine transforms etc. are as simple to use as images and rectangles.

Precise

Doodle gives you control over all aspects of the UI presentation, including pixel-level positioning, making it easier to precisely control rendering.

Modular

Doodle has several libraries and a collection of modules. This allows selective adoption of various features and helps with bundle size. Apps written with Doodle are also dependency-injected; and there are no global objects or state to make mocking challenging.

class HelloWorld(display: Display): Application {
    init {
        display.children += object: View() {
            init { size = display.size }

            override fun render(canvas: Canvas) {
                canvas.text("Hello, world!",
                    at = Origin, 
                    brush = ColorBrush(Black))
            }
        }
    }

    override fun shutdown() {}
}

fun main() {
    application {
        HelloWorld(display = instance())
    }
}
1 Like
2

Do I understand correctly that this is essentially like Flash, but with SVGs?

1 Like
3

It’s not quite like Flash since it ships pure JS when compiled. It uses SVG, but only for shapes that can’t easily be rendered with regular html elements.

1 Like
4

@joe_bloggs Are you creating any commercial / really used app using this framework?
Or this is just a nice toy? :slight_smile:

5

I don’t currently have a project that could use it. But I’d love to see what others might do with it, and hear feedback on how to continue improving it.

6

it is wonderful

7

Doodle 0.3.0 has been released. Join #doodle to ask questions or share use-cases.

  • Files now supported in drag-drop
  • New elliptical clip path support in Canvas
canvas.clip(ellipse) {
    // render into clipped region using Canvas receiver
}
  • Scheduler is now shutdown when app is
  • New API in Behavior to control content direction mirroring
  • New behavior delegate to centralize common operations
  • Initial work on DSL: new view {} and container {} functions
val panel = view {
    render = {
        // use Canvas receiver
        rect(...)
        text(...)
    }
}

val container = container {
    this += view {}
}
  • Improved ergonomics for adding/removing items to Display and Container
  • Changed Container from interface to concrete View, which replaces Box
1 Like
8

Doodle 0.4.2 released. Join #doodle to ask questions or share use-casses.

val ring   : Path = ring       (center, innerRadius, outerRadius)
val section: Path = ringSection(center, innerRadius, outerRadius, startAngle, endAngle)

object: ProgressIndicator() {
    init {
        size     = Size(200, 100)
        progress = 0.25
        behavior = PathProgressIndicatorBehavior(
            pathMetrics,          // injected
            path                = path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")!!,
            foreground          = LinearGradientPaint(Black, Blue, Origin, Point(width, 0.0)),
            foregroundThickness = 5.0,
            background          = Lightgray.paint,
            backgroundThickness = 5.0
        )
    }
}

canvas.rect(rectangle = bounds.atOrigin.inset(10.0),
radius = 10.0,
stroke = Stroke(fill = LinearGradientPaint(Red, Green, Origin, Point(width, height)), thickness = 20.0))

See the full release notes for more details. (edited)

9

Doodle 0.5.0 released

Join #doodle to ask questions or share use-cases.

Multi-touch Support

Doodle now supports multiple pointers (i.e. touches) by default. So there is no additional work needed to enable this in apps.

  • PointerInputManager now tracks a collection of pointers and dispatches events to Views on a per-pointer basis.
  • PointerEvent now has information about the list of pointers (for the View and overall). This lets handlers support multi-touch.
  • Resizer now works better with multi-touch.
  • Added ability to suppress OS handling of PointerEvent. This is like consume, except it does not affect other app listeners.

Accessibility Support

This release stabilizes accessibility and brings a lot of new support to items in the Controls library.

  • View now supports accessibilityLabel , accessibilityLabelProvider , accessibilityDescriptionProvider , and nextInAccessibleReadOrder .
  • View’s visible and enabled properties are now accessible.
  • The following widgets now have accessibility support
  • ToggleButton
  • Switch
  • CheckBox
  • RadioButton
  • HyperLink
  • ValueSlider (including Slider orientation)
  • ProgressIndicator
  • TextInput
  • List
  • Tree
  • TabbedPanel via BasicTabbedPanelBehavior
  • BasicSpinnerBehavior , BasicMutableSpinnerBehavior now supports up/down arrows.

Kotlin IR compiler Support

Apps can now choose to use either the IR or Legacy artifacts.

See the full release notes for more details.

1 Like
10

Doodle 0.6.0 Supports Desktop

Join #doodle to ask questions or share use-cases.

Highlights include

Desktop Support (Alpha)

Doodle now supports Desktop and leverages Skia for fast, accurate rendering. This means apps can target desktop via the JVM.
Support is still early and not ready for production. There are some missing features–like Accessibility, and others that
are partially implemented (i.e. drag-drop). However, overall support is sufficiently complete to begin testing with. So please
try this out and report bugs.

A key goal for Doodle is to provide as much cross-platform code sharing as possible. That’s why Web and Desktop share the same
rendering model, and therefore widgets. All widgets written in common code can be used on both platforms.

  • Desktop and Web share the same rendering model and widgets
  • Apps written in common code can be fully shared between Web and Desktop

Kotlin 1.5.0 Support

Kotlin support has been moved from 1.4.x to 1.5.30.

APIs