Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 Sky | 1 Sky |
| 2 === | 2 === |
| 3 | 3 |
| 4 Sky is an experimental, high-performance UI framework for mobile apps. Sky helps | 4 Sky is an experimental, high-performance UI framework for mobile apps. Sky helps |
| 5 you create apps with beautiful user interfaces and high-quality interactive | 5 you create apps with beautiful user interfaces and high-quality interactive |
| 6 design that run smoothly at 120 Hz. | 6 design that run smoothly at 120 Hz. |
| 7 | 7 |
| 8 Sky consists of two components: | 8 Sky consists of two components: |
| 9 | 9 |
| 10 1. *The Sky engine.* The engine is the core of the system. Written in C++, the | 10 1. *The Sky engine.* The engine is the core of the system. Written in C++, the |
| 11 engine provides the muscle of the Sky system. The engine provides | 11 engine provides the muscle of the Sky system. The engine provides |
| 12 several primitives, including a soft real-time scheduler and a hierarchial, | 12 several primitives, including a soft real-time scheduler and a hierarchial, |
| 13 retained-mode graphics system, that let you build high-quality apps. | 13 retained-mode graphics system, that let you build high-quality apps. |
| 14 | 14 |
| 15 2. *The Sky framework.* The [framework](packages/sky/lib/framework) makes it | 15 2. *The Sky framework.* The [framework](packages/sky/lib/framework) makes it |
| 16 easy to build apps using Sky by providing familiar user interface widgets, | 16 easy to build apps using Sky by providing familiar user interface widgets, |
| 17 such as buttons, infinite lists, and animations, on top of the engine using | 17 such as buttons, infinite lists, and animations, on top of the engine using |
| 18 Dart. These extensible components follow a functional programming style | 18 Dart. These extensible components follow a functional programming style |
| 19 inspired by [React](http://facebook.github.io/react/). | 19 inspired by [React](http://facebook.github.io/react/). |
| 20 | 20 |
| 21 We're still iterating on Sky heavily, which means the framework and underlying | 21 We're still iterating on Sky heavily, which means the framework and underlying |
| 22 engine are both likely to change in incompatible ways several times, but if | 22 engine are both likely to change in incompatible ways several times, but if |
| 23 you're interested in trying out the system, this document can help you get | 23 you're interested in trying out the system, this document can help you get |
| 24 started. | 24 started. |
| 25 | 25 |
| 26 Examples | 26 Examples |
| 27 -------- | 27 -------- |
| 28 | 28 |
| 29 The simplest Sky app is, appropriately, HelloWorldApp: | 29 Sky uses Dart and Sky applications are |
| 30 [Dart Packages](https://www.dartlang.org/docs/tutorials/shared-pkgs/). | |
| 31 Application creation starts by creating a new directory and | |
| 32 adding a [pubspec.yaml](https://www.dartlang.org/tools/pub/pubspec.html): | |
| 33 | |
| 34 pubspec.yaml for your app: | |
| 35 ```yaml | |
| 36 name: your_app_name | |
| 37 dependencies: | |
| 38 sky: any | |
| 39 ``` | |
| 40 | |
| 41 Once the pubspec is in place, create a `lib` directory (where your dart code | |
| 42 will go) and run `pub get` to download all necessary dependencies and create | |
| 43 the symlinks necessary for 'package:your_app_names/main.dart' includes to work. | |
| 44 | |
| 45 Currently the Sky Engine assumes the entry point for your application is a | |
| 46 `main` function is located inside a `main.sky` file at the root of the package. | |
| 47 `.sky` is an html-like format: | |
| 48 ``` | |
| 49 <sky> | |
| 50 <script> | |
| 51 import 'package:your_app_name/main.dart' | |
| 52 | |
| 53 void main() { | |
| 54 new HelloWorldApp(); | |
| 55 } | |
| 56 </script> | |
| 57 </sky> | |
| 58 ``` | |
| 59 | |
| 60 The rest of the application then goes inside the `lib` directory of the package | |
| 61 thus `lib/main.dart` would be: | |
| 30 | 62 |
| 31 ```dart | 63 ```dart |
| 32 import 'package:sky/framework/fn.dart'; | 64 import 'package:sky/framework/fn.dart'; |
| 33 | 65 |
| 34 class HelloWorldApp extends App { | 66 class HelloWorldApp extends App { |
| 35 UINode build() { | 67 UINode build() { |
| 36 return new Text('Hello, world!'); | 68 return new Text('Hello, world!'); |
| 37 } | 69 } |
| 38 } | 70 } |
| 39 | |
| 40 void main() { | |
| 41 new HelloWorldApp(); | |
| 42 } | |
| 43 ``` | 71 ``` |
| 44 | 72 |
| 45 Execution starts in `main`, which creates the `HelloWorldApp`. The framework | 73 Execution starts in `main`, which creates the `HelloWorldApp`. The framework |
| 46 then marks `HelloWorldApp` as dirty, which schedules it to build during the next | 74 then marks `HelloWorldApp` as dirty, which schedules it to build during the next |
| 47 animation frame. Each animation frame, the framework calls `build` on all the | 75 animation frame. Each animation frame, the framework calls `build` on all the |
| 48 dirty components and diffs the virtual `UINode` hierarchy returned this frame wi th | 76 dirty components and diffs the virtual `UINode` hierarchy returned this frame |
| 49 the hierarchy returned last frame. Any differences are then applied as mutations | 77 with the hierarchy returned last frame. Any differences are then applied as |
| 50 to the physical hierarchy retained by the engine. | 78 mutations to the physical hierarchy retained by the engine. |
| 51 | 79 |
| 52 For more examples, please see the [examples directory](examples/). | 80 For examples, please see the [examples directory](examples/). |
| 53 | 81 |
| 54 Services | 82 Services |
| 55 -------- | 83 -------- |
| 56 | 84 |
| 57 Sky apps can access services from the host operating system using Mojo. For | 85 Sky apps can access services from the host operating system using Mojo IPC. For |
| 58 example, you can access the network using the `network_service.mojom` interface. | 86 example, you can access the network using the `network_service.mojom` interface. |
| 59 Although you can use these low-level interfaces directly, you might prefer to | 87 Although you can use these low-level interfaces directly, you might prefer to |
| 60 access these services via libraries in the framework. For example, the | 88 access these services via libraries in the framework. For example, the |
| 61 `fetch.dart` library wraps the underlying `network_service.mojom` in an | 89 `fetch.dart` library wraps the underlying `network_service.mojom` in an |
| 62 ergonomic interface: | 90 ergonomic interface: |
| 63 | 91 |
| 64 ```dart | 92 ```dart |
| 65 import 'package:sky/framework/net/fetch.dart'; | 93 import 'package:sky/framework/net/fetch.dart'; |
| 66 | 94 |
| 67 main() async { | 95 main() async { |
| 68 var response = await fetch('example.txt'); | 96 Response response = await fetch('example.txt'); |
| 69 print(response.bodyAsString()); | 97 print(response.bodyAsString()); |
| 70 } | 98 } |
| 71 ``` | 99 ``` |
| 72 | 100 |
| 73 Set up your computer | 101 Set up your computer |
| 74 -------------------- | 102 -------------------- |
| 75 | 103 |
| 76 1. Install the Dart SDK: | 104 1. Install the Dart SDK: |
| 77 - https://www.dartlang.org/tools/download.html | 105 - https://www.dartlang.org/tools/download.html |
| 78 | 106 |
| (...skipping 16 matching lines...) Expand all Loading... | |
| 95 and tapping the ``Build number`` field five times. | 123 and tapping the ``Build number`` field five times. |
| 96 | 124 |
| 97 2. Enable ``USB debugging`` in ``Settings > Developer options``. | 125 2. Enable ``USB debugging`` in ``Settings > Developer options``. |
| 98 | 126 |
| 99 3. Using a USB cable, plug your phone into your computer. If prompted on your | 127 3. Using a USB cable, plug your phone into your computer. If prompted on your |
| 100 device, authorize your computer to access your device. | 128 device, authorize your computer to access your device. |
| 101 | 129 |
| 102 Running a Sky application | 130 Running a Sky application |
| 103 ------------------------- | 131 ------------------------- |
| 104 | 132 |
| 133 The `sky` pub package includes a `sky_tool` script to assist in running | |
| 134 Sky applications inside the `SkyDemo.apk` harness. | |
| 135 | |
| 105 1. ``packages/sky/lib/sky_tool --install examples/stocks/main.sky`` | 136 1. ``packages/sky/lib/sky_tool --install examples/stocks/main.sky`` |
|
Matt Perry
2015/04/27 21:32:27
This didn't work for me. I get this error:
| |
| 106 The --install flag is only necessary the first time to install SkyDemo.apk. | 137 The --install flag is only necessary to install SkyDemo.apk if not already |
| 138 installed from the Google Play store. | |
| 107 | 139 |
| 108 2. Use ``adb logcat`` to view any errors or Dart print() output from the app. | 140 2. Use ``adb logcat`` to view any errors or Dart print() output from the app. |
| 141 | |
| 142 Building a standalone MyApp | |
| 143 --------------------------- | |
| 144 | |
| 145 Although it is possible to bundle the Sky Engine in your own app (instead of | |
| 146 running your code inside SkyDemo.apk), right now doing so is difficult. | |
| 147 | |
| 148 There is one example of doing so if you're feeling brave: | |
| 149 https://github.com/domokit/mojo/tree/master/sky/apk/stocks | |
| 150 | |
| 151 Eventually we plan to make this much easier and support platforms other than | |
| 152 Android, but that work is yet in progress. | |
| OLD | NEW |