These are good questions. 1. Layouts are used to ...

# doodle

[Nick]

These are good questions.

1. Layouts are used to position Views within their parent (whether that's another View or the Display). The are not required, since you can directly move Views around by setting their bounds etc. But they allow you to set up a strategy for how a View's children are positioned as they change size/visibility/etc.
2. Views are the basic building block of your the app. Think of them as components that can be displayed to the user and are capable of taking input from the user. All apps will have at least 1 top-level View. Top-level Views are shown by placing them in the Display. The Display for Web is either the body or an element for cases where your app is run embedded into a regular page.
3. The Photo Stream app is an example of a pure JS app. You can find the code here.
Happy to answer any more questions you have.

[ayodele]

Thank you for the detailed explanation. I'm able to run it now.

One more question, are UI components ready to use widgets?
Because at first glance I thought they'll be an out of box vertical layout where I can add widgets.
I tried to add 2 PushButton widget to a vertical layout but I struggled
If you can give a code snippet that demonstrates that it'll help.
Sorry for my beginners questions.

[Nick]

No worries at all. These questions mean the docs etc. still need work. So they are actually very helpful.

Doodle prioritizes bundle size and customization as much as possible. Bundle size reduction means a lot of options are not defaulted. Many Views use a Behavior to dramatically change their behavior and look for example. These Behaviors are not "installed" by default to avoid bloating the bundle. So you'll need to apply them to many Views to have rendering happen. Buttons are an example of this. They handle all the "model"/"state" stuff for you; but let you style them in any way you like.

That said, Doodle ships with a lot of default Behaviors for things. In fact, it has a Basic and Native theme that will style a lot of the controls. Take a look at this to see how to use Themes. A Theme lets you define the look-feel of an entire app by letting you provide `Behavior`s for all the Views in the display hierarchy.

But Themes aren't the only way to provide Behaviors. You can assign them directly (to Views that support them) w/o using a theme at all. You can even mix approaches. That is, install a Theme, but specify that some Views will ignore theming and provide them Behaviors manually. Here's an example of a Label being configured with an explicit Behavior and using acceptsThemes = false to ignore any installed Theme.

The next thing to know is that almost all Views default to having no size when they are created. This will result in the render engine "ignoring" them and they won't be displayed or show up in the DOM (for Web). So be sure to give them a size directly, or via a Layout.

Please don't hesitate to share any code or a repo if you think that will help in answering more questions as well.

[ayodele]

Thanks @Nick what about routing.

[Nick]

There's no built-in support for routing, but it is simple to create some basic support as you can see in the Todo and Contacts tutorials. The Contacts app has a slightly more sophisticated router, which you can see in use here.