01d27eab5fca2dcb8e883011f8be77ae6b78a11cTed Gould<div class="intro">
01d27eab5fca2dcb8e883011f8be77ae6b78a11cTed Gould<p>This example shows a weather widget that loads information from YQL, and implements a constrained resize-plugin. The end result is a widget that's draggable and resizable between mini and detail view.</p>
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen<div class="example">
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti {{>constrained-resize-plugin-source}}
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen<h3>Setting up the HTML</h3>
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti<p>First we create the HTML for the page. This consists of a weatherWidget div with header and body wrappers, along with some other content on the page.</p>
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti{{>constrained-resize-plugin-html}}
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti<p>Next, we add CSS, including CSS3 gradients to spruce up the widget.</p>
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti{{>constrained-resize-plugin-css}}
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti<h3>The Use Statement</h3>
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti<p>The use statement consists of various modules that we'll need to construct this widget.</p>
6e16a663ee96cd1329e48518138efb415046d9f6mcecchettiYUI().use('overlay', 'resize-plugin', 'resize-constrain', 'dd-plugin', 'yql', function(Y) {
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti<p>`resize-plugin` allows our overlay to be resizable. We also need to pull down the `resize-constrain` submodule to allow for constraining. The `dd-plugin` enables draggability on a widget, while the `yql` module allows us to send requests to YQL</p>
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti<h3>Enabling Constrained Resizing on the Widget</h3>
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti<p>Constrained resizing can be done by plugging in `Y.Plugin.Resize` and then plugging in `Y.Plugin.ResizeConstrained` under the `resize` namespace.</p>
6e16a663ee96cd1329e48518138efb415046d9f6mcecchettiweatherWidget = new Y.Overlay({
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti width: "250px",
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti height:"300px",
76addc201c409e81eaaa73fe27cc0f79c4db097cKrzysztof Kosiński srcNode: "#weatherWidget",
76addc201c409e81eaaa73fe27cc0f79c4db097cKrzysztof Kosiński visible: false,
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti align: {node:"#example", points:["tc", "bc"]}
8001ba81cb851b38d86650a2fef5817facffb763johanengelen//allow resizability and draggability
d37634d73670180f99a3e0ea583621373d90ec4fJohan EngelenweatherWidget.plug([Y.Plugin.Resize, Y.Plugin.Drag]);
00f9ca0b3aa57e09f3c3f3632c5427fc03499df5Krzysztof Kosiński//we can plug in the resizeConstrained plugin on the 'resize' namespace
8001ba81cb851b38d86650a2fef5817facffb763johanengelenweatherWidget.resize.plug(Y.Plugin.ResizeConstrained, {
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen minWidth: 250,
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti minHeight: 170,
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti maxWidth: 250,
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti maxHeight: 300,
6e16a663ee96cd1329e48518138efb415046d9f6mcecchetti preserveRatio: false