status-im/pluto
1
0
Fork 0
mirror of https://github.com/status-im/pluto.git synced 2026-08-31 20:41:12 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
eaae032ba80fe2ee56ce99a76ec90c243f8e4a13
pluto/docs/concepts/View.html
T
Julien Eluard 537d92af4d Deploy website 
Deploy website version based on 229393d91e
2018-10-04 13:50:25 +02:00

91 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>View · Pluto</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Views are defined by using [Hiccup syntax](https://github.com/weavejester/hiccup/wiki/Syntax), itself a subset of EDN. This syntax is closely related to JSON, is based on pure data, and offers an expressive way of defining declarative interfaces."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="View · Pluto"/><meta property="og:type" content="website"/><meta property="og:url" content="https://status-im.github.io/pluto/index.html"/><meta property="og:description" content="Views are defined by using [Hiccup syntax](https://github.com/weavejester/hiccup/wiki/Syntax), itself a subset of EDN. This syntax is closely related to JSON, is based on pure data, and offers an expressive way of defining declarative interfaces."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/pluto/img/favicon.png"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/pluto/js/pluto.js"></script><link rel="stylesheet" href="/pluto/css/prism.css"/><link rel="stylesheet" href="/pluto/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/pluto/"><img class="logo" src="/pluto/img/logo_white.png" alt="Pluto"/><h2 class="headerTitleWithLogo">Pluto</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/pluto/docs/Manifesto.html" target="_self">Docs</a></li><li class=""><a href="/pluto/examples.html" target="_self">Examples</a></li><li class=""><a href="/pluto/try.html" target="_self">Try</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Concepts</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/pluto/docs/Manifesto.html">Manifesto</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/Principles.html">Principles</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Concepts</h3><ul><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Anatomy.html">Anatomy of an extension</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Hook.html">Hook</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/pluto/docs/concepts/View.html">View</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Query.html">Query</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Event.html">Event</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Registry.html">Registry</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Build</h3><ul><li class="navListItem"><a class="navItem" href="/pluto/docs/build/Packaging.html">Packaging</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/build/Deployment.html">Deployment</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/build/FirstExtension.html">My first extension</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/pluto/docs/Development.html">Development</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/Roadmap.html">Roadmap</a></li></ul></div></div></section></div><script>
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
const headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
document.body.classList.remove('tocActive');
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer docMainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle">View</h1></header><article><div><span><p>Views are defined by using <a href="https://github.com/weavejester/hiccup/wiki/Syntax">Hiccup syntax</a>, itself a subset of EDN. This syntax is closely related to JSON, is based on pure data, and offers an expressive way of defining declarative interfaces.</p>
<p>The general format of a UI is [component properties &amp; children], where :</p>
<ul>
<li>component is a symbol, one of Status components</li>
<li>properties is an optional map (keyword-to-value) of component properties</li>
<li>children is an optional sequence of the component definitions</li>
</ul>
<p>Because components are built recursively, on top of other components, they are inherently composable and reusable.</p>
<h1><a class="anchor" aria-hidden="true" id="blocks"></a><a href="#blocks" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Blocks</h1>
<p>While powerful the Hiccup syntax is about describing static UIs. Blocks enhance it by providing dynamicity based on data content.</p>
<h2><a class="anchor" aria-hidden="true" id="let-block"></a><a href="#let-block" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Let block</h2>
<p>Let blocks are general blocks allowing views to access data (via lexical scoping).</p>
<h3><a class="anchor" aria-hidden="true" id="query"></a><a href="#query" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Query</h3>
<p>Let blocks enable access to data via <a href="Query">Queries</a>.</p>
<pre><code class="hljs css language-clojure"><span class="token punctuation">(</span><span class="token keyword">let</span> <span class="token punctuation">[</span>value @queries/some-query<span class="token punctuation">]</span>
<span class="token comment">;; value is available there</span>
<span class="token punctuation">)</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="destructuring"></a><a href="#destructuring" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Destructuring</h3>
<p>Let blocks also allow to destructure data (sequences and maps) to access nested information.</p>
<pre><code class="hljs">(<span class="hljs-name"><span class="hljs-builtin-name">let</span></span> [{key <span class="hljs-symbol">:key</span>} {<span class="hljs-symbol">:key</span> <span class="hljs-string">"value"</span>}]
<span class="hljs-comment">;; key is available there with the value "value"</span>
)
</code></pre>
<h4><a class="anchor" aria-hidden="true" id="sequential-data-structure"></a><a href="#sequential-data-structure" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sequential data structure</h4>
<p>Extract seq elements by index
Elements can be ignored with <code>_</code>
<code>:as symbol</code> denotes the whole sequence</p>
<h5><a class="anchor" aria-hidden="true" id="examples"></a><a href="#examples" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Examples</h5>
<pre><code class="hljs css language-clojure"><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">a</span> _ <span class="token number">c</span> <span class="token operator">:as</span> all<span class="token punctuation">]</span> <span class="token punctuation">[</span><span class="token number">1</span> <span class="token number">2</span> <span class="token number">3</span> <span class="token number">4</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
<span class="token comment">;; a = 1</span>
<span class="token comment">;; c = 3</span>
<span class="token comment">;; all = [1 2 3 4 5]</span>
</code></pre>
<h4><a class="anchor" aria-hidden="true" id="associative-data-structure"></a><a href="#associative-data-structure" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Associative data structure</h4>
<p>Extract map values by keys <code>{a :a}</code>
Optional values via <code>[a 5]</code>
No namespaced keyword support, no short syntax</p>
<h5><a class="anchor" aria-hidden="true" id="examples-1"></a><a href="#examples-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Examples</h5>
<pre><code class="hljs css language-clojure"><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token number">a</span> <span class="token operator">:a</span> <span class="token number">a</span> <span class="token operator">:b</span> <span class="token punctuation">[</span><span class="token number">c</span> <span class="token number">4</span><span class="token punctuation">]</span> <span class="token operator">:c</span> <span class="token operator">:all</span> all<span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token operator">:a</span> <span class="token number">1</span> <span class="token operator">:b</span> <span class="token number">2</span> <span class="token operator">:d</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token comment">;; a = 1</span>
<span class="token comment">;; b = 2</span>
<span class="token comment">;; c = 4</span>
<span class="token comment">;; all = {:a 1 :b 2 :d 3}</span>
</code></pre>
<h5><a class="anchor" aria-hidden="true" id="nesting"></a><a href="#nesting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Nesting</h5>
<p>Both structure type destrucuring can be combined</p>
<pre><code class="hljs css language-clojure"><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token number">a1</span> _ <span class="token number">a3</span><span class="token punctuation">]</span> <span class="token operator">:a</span> <span class="token punctuation">{</span><span class="token number">d</span> <span class="token operator">:d</span> #<span class="token punctuation">{</span><span class="token number">f</span> <span class="token number">7</span><span class="token punctuation">}</span> <span class="token operator">:f</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>_ g2<span class="token punctuation">]</span> <span class="token number">8</span><span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">:b</span> <span class="token punctuation">[</span>_ <span class="token number">e2</span><span class="token punctuation">]</span> <span class="token operator">:e</span> <span class="token operator">:all</span> all<span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token operator">:a</span> <span class="token punctuation">[</span><span class="token number">1</span> <span class="token number">2</span> <span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">:b</span> <span class="token punctuation">{</span><span class="token operator">:d</span> <span class="token number">4</span> <span class="token operator">:e</span> <span class="token punctuation">[</span><span class="token number">5</span> <span class="token number">6</span><span class="token punctuation">]</span> <span class="token operator">:g</span> <span class="token punctuation">[</span><span class="token number">9</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token comment">;; a1 = 1</span>
<span class="token comment">;; a3 = 3</span>
<span class="token comment">;; d = 4</span>
<span class="token comment">;; e2 = 5</span>
<span class="token comment">;; f = 7</span>
<span class="token comment">;; g2 = 10</span>
<span class="token comment">;; all = {:a [1 2 3] :b {:d 4 :e [5 6] :g [9 10]}}</span>
</code></pre>
<h1><a class="anchor" aria-hidden="true" id="if-when-blocks"></a><a href="#if-when-blocks" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>If/when blocks</h1>
<p>If and when blocks will make their content available only if associated condition holds true.</p>
<pre><code class="hljs css language-clojure"><span class="token punctuation">(</span><span class="token keyword">when</span> condition?
<span class="token punctuation">[</span>text <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token string">""</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/pluto/docs/concepts/Hook.html"><span class="arrow-prev">← </span><span>Previous</span></a><a class="docs-next button" href="/pluto/docs/concepts/Query.html"><span>Next</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav docOnPageNav"><ul class="toc-headings"><li><a href="#let-block">Let block</a><ul class="toc-headings"><li><a href="#query">Query</a></li><li><a href="#destructuring">Destructuring</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/pluto/" class="nav-home"><img src="/pluto/img/logo_white.png" alt="Pluto" width="66" height="58"/></a><div><h5>Docs</h5><a href="docs/Tutorial">Getting Started</a><a href="docs/API">API Reference</a></div><div><h5>Community</h5><a href="https://chat.status.im">Project Chat</a><a href="https://twitter.com/ethstatus" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://blog.status.im/">Blog</a><a href="https://github.com/status-im/pluto/">GitHub</a></div></section><section class="copyright">Copyright © 2018 Status.im</section></footer></div></body></html>
Reference in New Issue View Git Blame Copy Permalink