OLD | NEW |
1 Sky | 1 Sky |
2 === | 2 === |
3 | 3 |
4 Sky is an experiment in building a UI framework for Mojo. The approach we're | 4 Sky is an experiment in building a UI framework for Mojo. The approach we're |
5 exploring is to create a layered framework based around a retained hierarchy of | 5 exploring is to create a layered framework based around a retained hierarchy of |
6 semantic elements. We're experimenting with different ideas and exploring | 6 semantic elements. We're experimenting with different ideas and exploring |
7 various approaches, many of which won't work and will need to be discarded, but, | 7 various approaches, many of which won't work and will need to be discarded, but, |
8 if we're lucky, some of which might turn out to be useful. | 8 if we're lucky, some of which might turn out to be useful. |
9 | 9 |
10 Sky has three layers, each of which also adds progressively more opinion. At | 10 Sky has three layers, each of which also adds progressively more opinion. At |
11 the lowest layer, Sky contains a rendering engine that parses markup, executes | 11 the lowest layer, Sky contains a rendering engine that parses markup, executes |
12 script, and applies styling information. Layered above the engine is a | 12 script, and applies styling information. Layered above the engine is a |
13 collection of components that define the interactive behavior of a suite of | 13 collection of components that define the interactive behavior of a suite of |
14 widgets, such as input fields, buttons, and menus. Above the widget layer is a | 14 widgets, such as input fields, buttons, and menus. Above the widget layer is a |
15 theme layer that gives each widget a concrete visual and interactive design. | 15 theme layer that gives each widget a concrete visual and interactive design. |
16 | 16 |
17 Elements | 17 Elements |
18 -------- | 18 -------- |
19 | 19 |
20 The Sky engine contains a handful of primitive elements and the tools with which | 20 The Sky engine contains [a handful of primitive elements](specs/markup.md) and t
he tools with which |
21 to create custom elements. The following elements are built into the engine: | 21 to create custom elements. The following elements are built into the engine: |
22 | 22 |
23 - ``script``: Executes script | 23 - ``script``: Executes script |
24 - ``style``: Defines style rules | 24 - ``style``: Defines style rules |
25 - ``import``: Loads a module | 25 - ``import``: Loads a module |
26 - ``iframe``: Embeds another Mojo application | 26 - ``iframe``: Embeds another Mojo application |
27 - ``template``: Captures descendants for use as a template | 27 - ``template``: Captures descendants for use as a template |
28 - ``content``: Visually projects descendents of the shadow host | 28 - ``content``: Visually projects descendents of the shadow host |
29 - ``shadow``: Visually projects older shadow roots of the shadow host | 29 - ``shadow``: Visually projects older shadow roots of the shadow host |
30 - ``image``: Displays an image | 30 - ``img``: Displays an image |
31 - ``a``: Links to another Mojo application | 31 - ``a``: Links to another Mojo application |
32 - ``title``: Briefly describes the current application state to the user | 32 - ``title``: Briefly describes the current application state to the user |
| 33 - ``t``: Preserve whitespace (by default, whitespace nodes are dropped) |
33 | 34 |
34 ### Additional Elements ### | 35 ### Additional Elements ### |
35 | 36 |
36 In addition to the built-in elements, frameworks and applications can define | 37 In addition to the built-in elements, frameworks and applications can define |
37 custom elements. The Sky framework contains a number of general-purpose | 38 custom elements. The Sky framework contains a number of general-purpose |
38 elements, including ``input``, ``button``, ``menu``, ``toolbar``, ``video``, and | 39 elements, including ``input``, ``button``, ``menu``, ``toolbar``, ``video``, and |
39 ``dialog``. However, developers are free to implement their own input fields, | 40 ``dialog``. However, developers are free to implement their own input fields, |
40 buttons, menus, toolbars, videos, or dialogs with access to all the same engine | 41 buttons, menus, toolbars, videos, or dialogs with access to all the same engine |
41 features as the frame because the framework does not occupy a privileged | 42 features as the frame because the framework does not occupy a privileged |
42 position in Sky. | 43 position in Sky. |
(...skipping 14 matching lines...) Expand all Loading... |
57 modules. | 58 modules. |
58 | 59 |
59 Below is a sketch of a typical module. The first ``import`` element imports the | 60 Below is a sketch of a typical module. The first ``import`` element imports the |
60 Sky framework, which defines the ``sky-element`` element. This module then uses | 61 Sky framework, which defines the ``sky-element`` element. This module then uses |
61 ``sky-element`` to define another element, ``my-element``. The second ``import`` | 62 ``sky-element`` to define another element, ``my-element``. The second ``import`` |
62 element imports another module and gives it the name ``foo`` within this module. | 63 element imports another module and gives it the name ``foo`` within this module. |
63 For example, the ``AnnualReport`` constructor uses the ``BalanceSheet`` class | 64 For example, the ``AnnualReport`` constructor uses the ``BalanceSheet`` class |
64 exported by that module. | 65 exported by that module. |
65 | 66 |
66 ```html | 67 ```html |
67 <import href=”/sky/framework” /> | 68 SKY MODULE |
68 <import href=”/another/module.sky” as=”foo” /> | 69 <import src=”/sky/framework” /> |
| 70 <import src=”/another/module.sky” as=”foo” /> |
69 <sky-element name=”my-element”> | 71 <sky-element name=”my-element”> |
70 [ ... custom element definition ... ] | 72 class extends SkyElement { |
| 73 constructor () { |
| 74 this.addEventListener('click', (event) => this.updateTime()); |
| 75 this.createShadowTree().appendChild('Click to show the time'); |
| 76 } |
| 77 updateTime() { |
| 78 this.shadowTree.firstChild.replaceWith(new Date()); |
| 79 } |
| 80 } |
71 </sky-element> | 81 </sky-element> |
72 <script> | 82 <script> |
73 class AnnualReport { | 83 class AnnualReport { |
74 constructor(bar) { | 84 constructor(bar) { |
75 this.sheet = new foo.BalanceSheet(bar); | 85 this.sheet = new foo.BalanceSheet(bar); |
76 } | 86 } |
77 frobinate() { | 87 frobinate() { |
78 this.sheet.balance(); | 88 this.sheet.balance(); |
79 } | 89 } |
80 } | 90 } |
(...skipping 26 matching lines...) Expand all Loading... |
107 applications. For example, Sky applications can access the network using Mojo's | 117 applications. For example, Sky applications can access the network using Mojo's |
108 ``network_service``. Typically, however, Sky applications access services via | 118 ``network_service``. Typically, however, Sky applications access services via |
109 frameworks that provide idiomatic interfaces to the underlying Mojo services. | 119 frameworks that provide idiomatic interfaces to the underlying Mojo services. |
110 These idiomatic interfaces are layered on top of the underlying Mojo service, | 120 These idiomatic interfaces are layered on top of the underlying Mojo service, |
111 and developers are free to use the underlying service directly. | 121 and developers are free to use the underlying service directly. |
112 | 122 |
113 As an example, the following is a sketch of a module that wraps Mojo's | 123 As an example, the following is a sketch of a module that wraps Mojo's |
114 ``network_service`` in a simpler functional interface: | 124 ``network_service`` in a simpler functional interface: |
115 | 125 |
116 ```html | 126 ```html |
117 <import href=”mojo://shell” as=”shell” /> | 127 SKY MODULE |
118 <import href="/mojo/network/network_service.mojom.sky" as="net" /> | 128 <import src=”mojo://shell” as=”shell” /> |
119 <import href="/mojo/network/url_loader.mojom.sky" as="loader" /> | 129 <import src="/mojo/network/network_service.mojom.sky" as="net" /> |
| 130 <import src="/mojo/network/url_loader.mojom.sky" as="loader" /> |
120 <script> | 131 <script> |
121 module.exports = function fetch(url) { | 132 module.exports = function fetch(url) { |
122 return new Promise(function(resolve, reject) { | 133 return new Promise(function(resolve, reject) { |
123 var networkService = shell.connectToService( | 134 var networkService = shell.connectToService( |
124 "mojo://network_service", net.NetworkService); | 135 "mojo://network_service", net.NetworkService); |
125 var request = new loader.URLRequest({ | 136 var request = new loader.URLRequest({ |
126 url: url, method: "GET", auto_follow_redirects: true}); | 137 url: url, method: "GET", auto_follow_redirects: true}); |
127 var urlLoader = networkService.createURLLoader(); | 138 var urlLoader = networkService.createURLLoader(); |
128 urlLoader.start(request).then(function(response) { | 139 urlLoader.start(request).then(function(response) { |
129 if (response.status_code == 200) | 140 if (response.status_code == 200) |
(...skipping 13 matching lines...) Expand all Loading... |
143 Specifications | 154 Specifications |
144 -------------- | 155 -------------- |
145 | 156 |
146 We're documenting Sky with a [set of technical specifications](specs) that | 157 We're documenting Sky with a [set of technical specifications](specs) that |
147 define precisely the behavior of the engine. Currently both the implementation | 158 define precisely the behavior of the engine. Currently both the implementation |
148 and the specification are in flux, but hopefully they'll converge over time. | 159 and the specification are in flux, but hopefully they'll converge over time. |
149 | 160 |
150 Contributing | 161 Contributing |
151 ------------ | 162 ------------ |
152 | 163 |
153 Instructions for building and testing Sky are contained in [HACKING.md]. For | 164 Instructions for building and testing Sky are contained in [HACKING.md](HACKING.
md). For |
154 coordination, we use the ``#mojo`` IRC channel on | 165 coordination, we use the ``#mojo`` IRC channel on |
155 [Freenode](https://freenode.net/). | 166 [Freenode](https://freenode.net/). |
OLD | NEW |