Uploading and Referencing Assets in Your App
Your app is built on view HTML files, configuration files, inspiration, icon and thumbnail .pngs, and, possibly, other files such as javascript, CSS, more images, and static data. Assets are these 'other files'.
While you may host them on your own server during development, you must eventually serve them from the Yahoo! Mail Application content distribution network (CDN).
Uploading Assets
When you create an app
with ymdt, the source
directory includes a subdirectory called assets. You may put
javascript, css, image files, or other media in there for use by your app and
upload them using ymdt put. Typically, you would reference these
in one of your view .html files or with another asset.
You may organize your app's assets directory hiearchically with
subdirectories--it doesn't have to be flat.
Allowed Content-types
Files may be uploaded with the any of these content-types.- application/javascript
- application/x-shockwave-flash
- image/*
- text/*
Asset URLs
Let's say that you've added some assets to your app's working directory so that it looks something like this:
To embed foo.gif as an image in one of your views, you'd use this markup:
<img src="/yahoo/mail/assets/foo.gif" />To load baz.css in the
of one of your views, you'd use this line in your view .html:
<link type="text/css" rel="stylesheet" href="/yahoo/mail/assets/css/baz.css" />
From this you can see that the URLs for referencing assets
is /yahoo/mail/assets/ followed by the path relative to your assets
directory.
Programatic URL Construction
Before one of your views or text-type assets is served by Yahoo!, they are
rewritten so that any /yahoo/mail/assets/ URL prefixes are replaced
by app-specific URLs in our CDN. This is to save developers the trouble of
updating these URLs when they change. (We change the URLs at the beginning of
every development cycle.)
If your javascript code is dynamically-constructing asset URLs, be sure to
preserve the /yahoo/mail/assets/ string unbroken in your code
(including the trailing forward-slash) so that we replace it correctly.
Raw URLs
If you must have the raw URLs instead of using the templates, they're
available from ymdt ls -z, but it is almost always a bad idea to
use them since they change whenever we publish a release of your app. If you
use them, you have to be sure to keep them up-to-date!
One situation where it's necessary to use the raw URLs is if you must compile them into a non-text asset (i.e. a Silverlight app.).
Overriding content-type
For .js and .css files, our CDN will correctly guess and serve the right
content-type HTTP header based on the file extension. For certain other types,
it will try to guess, but might be wrong. You can force it a particular
content-type by appending an &type=major/minor string to your URL.
For example, to force assets/images/bizmark.5 to be served with
content-type of image/png, you could make your asset
URL /yahoo/mail/assets/images/bizmark.4&type=image/png.
You may only override the content-type to be one of these supported types.
Combo-loading and Compressing Assets for Speed
If you have several javascript or css assets, you may want to combo-load them
(use one <script> tag instead of several) to improve your
load time. To combo load the two javascript assets from the
above example, do this:
<script src="/yahoo/mail/combo?js/joe.js&rocks/rocks.js"></script>You might also consider compressing your asset files using the new ymdt 'compress' feature. But do remember that only css and js files can be compressed. Let's say you want to compress all the javascript asset files under assets/js folder. You can do that with following command
ymdt compress <Your app path>/assets/js All subsequent ymdt puts would automatically compress the files under assets/js. If you want to stop auto-compression just use
ymdt uncompress <Your app path>/assets/js