Community based Dialog framework?

I moved away from SKUI - because it became apparent that it quickly got very complex to support anything other than the most basic controls.

There was also the challenge of how to bundle and package it easily.

As of late I’ve moved to rely more on existing frameworks from the dev-dev world. UI frameworks for the layout and data binding frameworks for the data handling.

At DevCamp 2017 I demoed how to create dialogs with Semantic UI and Vue: GitHub - SketchUp/htmldialog-examples: Examples of using SketchUp Ruby API's UI::HtmlDialog class

The exact framework isn’t that important - they all have similar concepts.

UI frameworks like Semantic UI, Foundation and Bootstrap all provide tried and tested boilerplate layout and widgets. Usually you just need to add some classes to your HTML. (Bootstrap even have an online tool to customize the default theme)

Data binding frameworks like Vue, React and Angular let you very efficiently bind data to the view. As you can see in the examples, the data is stored in a central place in the JS vue app instance. Vue is then taking care of all the dirty work of manipulating the DOM.

I find this to be a more flexible solution, as it uses the tools that the web industry is already using. And you should be able to get up and running rather quickly.

We (the Extensibility Team) have been talking about working with our UX/UI team in making available a boilerplate version of one or two of the most popular UI framework customized to fit SketchUp’s own styleguide (which is currently being worked on). This, along with examples, would allow extension developers to quickly scaffold complex UIs in relative short time that have a consistent feel to SU itself.

In addition to the DevCamp examples we released a couple of weeks ago another example of how one could use UI::HtmlDialog to replace UI.inputbox: GitHub - SketchUp/htmldialog-inputbox: UI::HtmlDialog example recreating UI.inputbox functionality in the SketchUp Ruby API

It uses Vue and Bootstrap and demonstrate how to move data to and from the dialog.

4 Likes