| 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 |