Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(6)

Side by Side Diff: sky/README.md

Issue 678693003: Docs: fix markdown in various files, update the README mildly (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | sky/specs/README.md » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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
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/).
OLDNEW
« no previous file with comments | « no previous file | sky/specs/README.md » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698