OLD | NEW |
(Empty) | |
| 1 Sky |
| 2 === |
| 3 |
| 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 |
| 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, |
| 8 if we're lucky, some of which might turn out to be useful. |
| 9 |
| 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 |
| 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 |
| 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. |
| 16 |
| 17 Elements |
| 18 -------- |
| 19 |
| 20 The Sky engine contains a handful of primitive elements and the tools with which |
| 21 to create custom elements. The following elements are built into the engine: |
| 22 |
| 23 - ``script``: Executes script |
| 24 - ``style``: Defines style rules |
| 25 - ``import``: Loads a module |
| 26 - ``iframe``: Embeds another Mojo application |
| 27 - ``template``: Captures descendants for use as a template |
| 28 - ``content``: Visually projects descendents of the shadow host |
| 29 - ``shadow``: Visually projects older shadow roots of the shadow host |
| 30 - ``image``: Displays an image |
| 31 - ``a``: Links to another Mojo application |
| 32 - ``title``: Briefly describes the current application state to the user |
| 33 |
| 34 ### Additional Elements ### |
| 35 |
| 36 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 elements, including ``input``, ``button``, ``menu``, ``toolbar``, ``video``, and |
| 39 ``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 features as the frame because the framework does not occupy a privileged |
| 42 position in Sky. |
| 43 |
| 44 ### Custom Layout ### |
| 45 |
| 46 TODO: Describe the approach for customizing layout. |
| 47 |
| 48 ### Custom Painting ### |
| 49 |
| 50 TODO: Describe the approach for customizing painting. |
| 51 |
| 52 Modules |
| 53 ------- |
| 54 |
| 55 Sky applications consist of a collection of modules. Each module can describe |
| 56 its dependencies, register custom elements, and export objects for use in other |
| 57 modules. |
| 58 |
| 59 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-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 For example, the ``AnnualReport`` constructor uses the ``BalanceSheet`` class |
| 64 exported by that module. |
| 65 |
| 66 ```html |
| 67 <import href=”/sky/framework” /> |
| 68 <import href=”/another/module.sky” as=”foo” /> |
| 69 <sky-element name=”my-element”> |
| 70 [ ... custom element definition ... ] |
| 71 </sky-element> |
| 72 <script> |
| 73 class AnnualReport { |
| 74 constructor(bar) { |
| 75 this.sheet = new foo.BalanceSheet(bar); |
| 76 } |
| 77 frobinate() { |
| 78 this.sheet.balance(); |
| 79 } |
| 80 } |
| 81 |
| 82 function mult(x, y) { |
| 83 return x * y; |
| 84 } |
| 85 |
| 86 function multiplyByTwo(x) { |
| 87 return mult(x, 2); |
| 88 } |
| 89 |
| 90 module.exports = { |
| 91 AnnualReport: AnnualReport, |
| 92 multiplyByTwo: multiplyByTwo, |
| 93 }; |
| 94 </script> |
| 95 ``` |
| 96 |
| 97 The script definitions are local to each module and cannot be referenced by |
| 98 other modules unless exported. For example, the ``mult`` function is private to |
| 99 this module whereas the ``multiplyByTwo`` function can be used by other modules |
| 100 because it is exported. Similarly, this module exports the ``AnnualReport`` |
| 101 class. |
| 102 |
| 103 Services |
| 104 -------- |
| 105 |
| 106 Sky applications can access Mojo services and can provide services to other Mojo |
| 107 applications. For example, Sky applications can access the network using Mojo's |
| 108 ``network_service``. Typically, however, Sky applications access services via |
| 109 frameworks that provide idiomatic interfaces to the underlying Mojo services. |
| 110 These idiomatic interfaces are layered on top of the underlying Mojo service, |
| 111 and developers are free to use the underlying service directly. |
| 112 |
| 113 As an example, the following is a sketch of a module that wraps Mojo's |
| 114 ``network_service`` in a simpler functional interface: |
| 115 |
| 116 ```html |
| 117 <import href=”mojo://shell” as=”shell” /> |
| 118 <import href="/mojo/network/network_service.mojom.sky" as="net" /> |
| 119 <import href="/mojo/network/url_loader.mojom.sky" as="loader" /> |
| 120 <script> |
| 121 module.exports = function fetch(url) { |
| 122 return new Promise(function(resolve, reject) { |
| 123 var networkService = shell.connectToService( |
| 124 "mojo://network_service", net.NetworkService); |
| 125 var request = new loader.URLRequest({ |
| 126 url: url, method: "GET", auto_follow_redirects: true}); |
| 127 var urlLoader = networkService.createURLLoader(); |
| 128 urlLoader.start(request).then(function(response) { |
| 129 if (response.status_code == 200) |
| 130 resolve(response.body); |
| 131 else |
| 132 reject(response); |
| 133 }); |
| 134 }; |
| 135 }; |
| 136 </script> |
| 137 ``` |
| 138 |
| 139 Notice that the ``shell`` module is built-in and provides access to the |
| 140 underlying Mojo fabric but the ``net`` and ``loader`` modules run inside Sky and |
| 141 encode and decode messages sent over Mojo pipes. |
| 142 |
| 143 Specifications |
| 144 -------------- |
| 145 |
| 146 TODO: Link to the specs. |
| 147 |
| 148 Contributing |
| 149 ------------ |
| 150 |
| 151 TODO: Link to HACKING.md, which contains the instructions for hacking on Sky. |
| 152 TODO: Link to mailing list and IRC channel. |
OLD | NEW |