Issue #1: Cumbersome layouts


Prev		Next

Let's first talk about the layout. We have a side navigation bar, a top bar, and the page content. Both of the sidebar and the top bar are common UI elements that are widely used, as well as the general layout.

This layout can be easily achieved with css:

<head>
  <style>
    #app {
      display: flex;
      gap: 4px;
      flex-direction: row;
      height: 100vh;
    }
    #body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    #sidebar {
      width: 200px;
    }
    #topbar {
      height: 60px;
    }
    #content {
      flex: 1;
    }
    #sidebar, #topbar, #content {
      font-size: 32px;
      border: 1px solid black;
      padding: 10px;
      line-height: 60px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="sidebar">
      <div>Sidebar</div>
    </div>
    <div id="body">
      <div id="topbar">
        <div>Topbar</div>
      </div>
      <div id="content">
        <div>Content</div>
      </div>
    </div>
  </div>
</body>

Then, depending on our use case we may need to add some XForms code to control some aspects of the layout, i.e. the sidebar's width:

<div id="sidebar" style="width:{if (instance('app')/sidebar-collapsed = 'true', 40, 200)}px">

This will work, but wouldn't be better if we could write something like:

<body>
  <app-layout>
    <sidebar collapsed="instance('app')/sidebar-collapsed = 'true'">
      <div>Sidebar</div>
    </sidebar>
    <topbar height="60">
      <div>Topbar</div>
    </topbar>
    <main>
      <div>Content</div>
    </main>
  </app-layout>
</body>

This does not introduce anything that we don't already have; its only appeal is that it is much simpler than the original XHTML/XForms code.