mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Samuel Degueldre
109 lines
3.8 KiB
HTML
109 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OWL Framework</title>
|
|
<link rel="icon" href="data:,">
|
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
|
|
<link rel="stylesheet" href="assets/normalize.css">
|
|
<link rel="stylesheet" href="assets/milligram.css">
|
|
<link rel="stylesheet" href="assets/highlight.tomorrow.css">
|
|
<link rel="stylesheet" href="assets/main.css">
|
|
<script src="./owl.js"></script>
|
|
</head>
|
|
<body>
|
|
<header class="container">
|
|
<img class="homepage-logo" src="assets/owl_1f989.png" alt="OWL Logo">
|
|
<hgroup>
|
|
<h1>OWL Framework</h1>
|
|
<p>Mysterious OWL: A web framework for structured, dynamic and maintainable applications</p>
|
|
</hgroup>
|
|
</header>
|
|
<nav class="container">
|
|
<p>
|
|
<a href="https://github.com/odoo/owl" title="https://github.com/odoo/owl">Github</a>
|
|
•
|
|
<a href="https://github.com/odoo/owl/blob/master/doc/readme.md">Documentation</a>
|
|
•
|
|
<a href="playground/">Playground</a>
|
|
</p>
|
|
</nav>
|
|
<main>
|
|
<article class="design">
|
|
<div class="container">
|
|
<h2>Why OWL?</h2>
|
|
<div class="row">
|
|
<section class="column">
|
|
<h3>XML based</h3>
|
|
<p>Templates are based on the XML format, which allows interesting applications. For example, they could be stored in a database and modified dynamically with <tt>xpaths</tt>.</p>
|
|
</section>
|
|
<section class="column">
|
|
<h3>Templates compiled in the browser</h3>
|
|
<p>This may not be a good fit for all applications, but if you need to generate dynamically user interfaces in the browser, this is very powerful. For example, a generic form view component could generate a specific form user interface for each various models, from a XML view.</p>
|
|
</section>
|
|
<section class="column">
|
|
<h3>No toolchain required</h3>
|
|
<p>This is extremely useful for some applications, if, for various reasons (security/deployment/dynamic modules/specific assets tools), it is not ok to use standard web tools based on <tt>npm</tt>.</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="example">
|
|
<div class="container">
|
|
<h2>Example</h2>
|
|
<div class="row">
|
|
<section class="column">
|
|
<pre><code class="javascript">import { mount, Component, useState } from "owl";
|
|
|
|
class Counter extends Component {
|
|
setup() {
|
|
this.state = useState({ value: 0 });
|
|
}
|
|
|
|
increment() {
|
|
this.state.value++;
|
|
}
|
|
}
|
|
|
|
mount(Counter, document.body);</code></pre>
|
|
</section>
|
|
<section class="column">
|
|
<pre><code class="xml"><templates>
|
|
<t t-name="Counter">
|
|
<button t-on-click="increment">
|
|
Click Me! [<t t-esc="state.value"/>]
|
|
</button>
|
|
</t>
|
|
</templates></code></pre>
|
|
<div id="app-container"></div>
|
|
<script>
|
|
const { mount, Component, useState, xml } = owl;
|
|
|
|
class Counter extends Component {
|
|
setup() {
|
|
this.state = useState({ value: 0 });
|
|
}
|
|
|
|
increment() {
|
|
this.state.value++;
|
|
}
|
|
}
|
|
Counter.template = xml`<button t-on-click="increment">
|
|
Click Me! [<t t-esc="state.value"/>]
|
|
</button>`;
|
|
|
|
mount(Counter, document.getElementById("app-container"));
|
|
</script>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
<footer>
|
|
<p><a href=".">OWL</a> is licensed under LGPLv3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
|
|
</footer>
|
|
<script src="assets/highlight.pack.js"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
</body>
|
|
</html> |