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

Side by Side Diff: src/site/docs/tutorials/shared-pkgs/index.markdown

Issue 26542002: edit pass on T3,4,5, updated images (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: merging with master Created 7 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 | « src/site/docs/tutorials/shared-pkgs/images/victor-files.png ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 --- 1 ---
2 layout: default 2 layout: default
3 title: "Install Shared Packages" 3 title: "Install Shared Packages"
4 description: "Packages are bundles of source code, tools, and resources that hel p you to organize and share code" 4 description: "Packages are bundles of source code, tools, and resources that hel p you to organize and share code"
5 has-permalinks: true 5 has-permalinks: true
6 tutorial: 6 tutorial:
7 id: packages 7 id: packages
8 next: polymer-intro/ 8 next: polymer-intro/
9 next-title: "Define a Custom Element" 9 next-title: "Define a Custom Element"
10 prev: remove-elements/ 10 prev: remove-elements/
(...skipping 30 matching lines...) Expand all
41 </div> 41 </div>
42 42
43 Now that you're able to create and run a Dart application 43 Now that you're able to create and run a Dart application
44 and have a basic understanding of DOM programming, 44 and have a basic understanding of DOM programming,
45 you are ready to leverage code written by other programmers. 45 you are ready to leverage code written by other programmers.
46 Many interesting and useful packages of reusable Dart code 46 Many interesting and useful packages of reusable Dart code
47 are available at the 47 are available at the
48 <a href="https://pub.dartlang.org/">pub.dartlang.org</a> 48 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>
49 repository. 49 repository.
50 50
51 This target shows you how to use `pub`&mdash;a package manager 51 This tutorial shows you how to use `pub`&mdash;a package manager
52 that comes with Dart&mdash;to 52 that comes with Dart&mdash;to
53 install one of the packages in the repository, 53 install one of the packages in the repository,
54 the vector_math package. 54 the vector_math package.
55 You can follow these same steps to install any package hosted at 55 You can follow these same steps to install any package hosted at
56 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>; 56 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>;
57 just change the package name when you get to that step. 57 just change the package name when you get to that step.
58 This target also describes some of the resources you can expect to find 58 This tutorial also describes some of the resources you can expect to find
59 in a well-built package. 59 in a well-built package.
60 60
61 * [About the pubspec.yaml file](#about-pubspec) 61 * [About the pubspec.yaml file](#about-pubspec)
62 * [Name the package dependencies](#name-dependencies) 62 * [Name the package dependencies](#name-dependencies)
63 * [Install the package dependencies](#install-dependencies) 63 * [Install the package dependencies](#install-dependencies)
64 * [What did you get (and not get)?](#about-packages) 64 * [What did you get (and not get)?](#about-packages)
65 * [Import libraries from a package](#use-package) 65 * [Import libraries from a package](#use-package)
66 * [Other resources](#other-resources) 66 * [Other resources](#other-resources)
67 * [What next?](#what-next)
67 68
68 ##About the pubspec.yaml file {#about-pubspec} 69 ##About the pubspec.yaml file {#about-pubspec}
69 70
70 To use an external package, 71 To use an external package,
71 your application must itself be a package. 72 your application must itself be a package.
72 Any application with a valid pubspec.yaml file in its top-level directory 73 Any application with a valid pubspec.yaml file in its top-level directory
73 is a package and can therefore use external packages. 74 is a package and can therefore use external packages.
74 When you create an application using Dart Editor, 75 When you create an application using Dart Editor,
75 Dart Editor automatically creates a `pubspec.yaml` file. 76 Dart Editor automatically creates a `pubspec.yaml` file.
76 77
77 Start Dart Editor and create a new application with the name `vector_victor`. 78 Start Dart Editor and create a new application with the name `vector_victor`.
78 Double click pubspec.yaml to view its contents. 79 Double click pubspec.yaml to view its contents.
79 80
80 ![Dart Editor with pubspec.yaml file](images/victor-files.png) 81 ![Dart Editor with pubspec.yaml file](images/victor-files.png)
81 82
82 The pubspec.yaml file contains the package specification written in YAML 83 The pubspec.yaml file contains the package specification written in YAML
83 (visit <a href="https://pub.dartlang.org/doc/pubspec.html">Pubspec Format</a> 84 (visit <a href="https://pub.dartlang.org/doc/pubspec.html">Pubspec Format</a>
84 for in-depth coverage). 85 for in-depth coverage).
85 Dart Editor provides a user interface for editing the pubspec.yaml file 86 Dart Editor provides a user interface for editing the pubspec.yaml file
86 so that you don't have to worry about the YAML format. 87 so that you don't have to worry about the YAML format.
87 Or you can click the **Source** tab at the bottom of the Editor pane 88 Or you can click the **Source** tab at the bottom of the Editor pane
88 to edit the YAML code directly. 89 to edit the YAML code directly.
89 Below is the pubspec.yaml file that was 90 Below is the pubspec.yaml file that was
90 created for the vector_victor application. 91 created for the vector_victor application.
91 92
92 ![The default pubspec.yaml file specifies name and description](images/pubspec.p ng) 93 ![The default pubspec.yaml file specifies name and description](images/pubspec.p ng)
93 94
94 The package name is required. 95 The package name is required.
95 All web applications are dependent on the browser package 96 You'll note that the pubspec.yaml file already
96 provided at pub.dartlang.org. 97 lists a dependency on the browser package.
98 Web applications that don't use Polymer
99 need the browser package.
97 100
98 {% comment %} 101 {% comment %}
99 ##...Or put an existing application into a package {#old-app-in-pkg} 102 ##...Or put an existing application into a package {#old-app-in-pkg}
100 103
101 If you already have an application 104 If you already have an application
102 and want it to use an external package, 105 and want it to use an external package,
103 simply create a pubspec.yaml file in the application's top-level directory. 106 simply create a pubspec.yaml file in the application's top-level directory.
104 Your pubspec.yaml file must at least specify the package name. 107 Your pubspec.yaml file must at least specify the package name.
105 108
106 ![The smallest possible pubspec.yaml](images/minimalpubspec.png) 109 ![The smallest possible pubspec.yaml](images/minimalpubspec.png)
(...skipping 18 matching lines...) Expand all
125 you need to add the package to your 128 you need to add the package to your
126 application's list of _dependencies_ 129 application's list of _dependencies_
127 in the pubspec.yaml file. 130 in the pubspec.yaml file.
128 Each item in the dependencies list 131 Each item in the dependencies list
129 specifies the name, and sometimes the version, 132 specifies the name, and sometimes the version,
130 of a package that your application uses. 133 of a package that your application uses.
131 134
132 Let's make the vector_victor application have a dependency 135 Let's make the vector_victor application have a dependency
133 on the vector_math package, 136 on the vector_math package,
134 which is available at pub.dartlang.org. 137 which is available at pub.dartlang.org.
135 Click the **Add** button in Dart Editor. 138
139 * Click the **Add** button in Dart Editor.
136 140
137 ![Click the add button to add a package dependency](images/dependencies-ui.png) 141 ![Click the add button to add a package dependency](images/dependencies-ui.png)
138 142
139 Enter the name of the package in the popup window. 143 * Enter the name of the package in the popup window.
140 144
141 ![Enter the package name](images/add-dependency-window.png) 145 ![Enter the package name](images/add-dependency-window.png)
142 146
143 Dart Editor adds the package name to the list. 147 Dart Editor adds the package name to the list.
144 148
145 ![The application is now dependent on vector_math](images/after-add.png) 149 ![The application is now dependent on vector_math](images/after-add.png)
146 150
147 Notice the **Version** field. 151 Notice the **Version** field.
148 `any` means that this application can use 152 `any` means that this application can use
149 any version of the vector_math package. 153 any version of the vector_math package.
(...skipping 108 matching lines...) Expand 10 before | Expand all | Expand 10 after
258 </div> 262 </div>
259 <hr> 263 <hr>
260 </div> 264 </div>
261 265
262 ##Import libraries from a package {#use-package} 266 ##Import libraries from a package {#use-package}
263 267
264 Open the vector_math directory by clicking the little arrow. 268 Open the vector_math directory by clicking the little arrow.
265 269
266 ![Finally, the vector_math library files](images/the-vectormath-library.png) 270 ![Finally, the vector_math library files](images/the-vectormath-library.png)
267 271
268 The directory contains a Dart file, 272 The directory contains a Dart file called vector_math.dart,
269 which you import into your Dart application, 273 which you import into your Dart application,
270 and a `src` directory, 274 and a `src` directory,
271 which contains all of the source code for the library. 275 which contains the source code for the library.
272 As with the SDK libraries, 276 As with the SDK libraries,
273 use the import directive to use code from an installed library. 277 use the import directive to use code from an installed library.
274 The Dart SDK libraries are built-in and 278 The Dart SDK libraries are built-in and
275 are identified with the special dart: prefix. 279 are identified with the special dart: prefix.
276 For external libraries installed by pub, 280 For external libraries installed by pub,
277 use the `package:` prefix. 281 use the `package:` prefix.
278 282
279 {% prettify dart %} 283 {% prettify dart %}
280 import 'package:vector_math/vector_math.dart'; 284 import 'package:vector_math/vector_math.dart';
281 {% endprettify %} 285 {% endprettify %}
282 286
283 Note that you specify the filename, not the library name. 287 Note that you specify the filename, not the library name.
284 288
285 ##Other resources 289 ##Other resources
286 290
287 <ul> 291 <ul>
288 <li> 292 <li>
289 Dart developers share packages at 293 Dart developers share packages at
290 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>. 294 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>.
291 Look there for packages that might be useful to you, 295 Look there for packages that might be useful to you,
292 or share your own Dart packages. 296 or share your own Dart packages.
293 See the <a href="https://pub.dartlang.org/doc/">pub documentation</a> 297 See the <a href="https://pub.dartlang.org/doc/">pub documentation</a>
294 to get started using and sharing packages. 298 to get started using and sharing packages.
295 </li> 299 </li>
296 <li>
297 One important package that you will find there
298 is
299 <a href="https://pub.dartlang.org/packages/web_ui">web_ui</a>&mdash;a packag e
300 created by the Dart team that lets you use Web components and templating.
301 The
302 <a href="/docs/tutorials/web-ui/">next target</a> covers Web UI.
303 </li>
304 </ul> 300 </ul>
305 301
302 ##What next? {#what-next}
303
304 One package at pub.dartlang.org is Polymer.dart,
305 which makes writing web applications easier
306 with data binding, templates, and declarative event handlers.
307 Check out the next tutorial,
308 [Define a Custom Element](/docs/tutorials/polymer-intro),
309 for an introduction to Polymer.
310
311
306 {% endcapture %} 312 {% endcapture %}
307 313
308 {% include tutorial.html %} 314 {% include tutorial.html %}
OLDNEW
« no previous file with comments | « src/site/docs/tutorials/shared-pkgs/images/victor-files.png ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698