This is a hefty example that may include some modules you are not familiar with, such as `Y.Model`, `Y.View`, and `Y.JSONP`. These modules are covered in detail on their respective pages.

Setting Up the Interface

First we need to construct the HTML for the table and controls.

``` {{>search-html-markup}} ```

JavaScript

Our Flickr Search application will have four main parts:

A form to submit and request new images
Our paginator with navigation controls and direct page number options
Our pages that display the images
A `Y.View` that will maintain our application state

Our form is included in the markup, so we will just bind to the submit event in our application (more on this later).

Setting Up the YUI Instance

Now we need to create our YUI instance and tell it to load the modules we need.

``` {{>search-js-startup}} ```

There are a number of modules we use:

paginator-core: Gives us the core part of paginator to mix into a model.
model: Gives us a model structure to use with our paginator views
view: Let's us abstract our view logic into a more focused component
transition: Gives us the ability to fade pages in and out when swapping pages
jsonp: Let's us make a JSONP request to the Flickr API
querystring-stringify-simple: Gives us the ability to convert a simple object to a URL to pass to the Flickr API
cssbutton: Dresses up our search form's submit button

Paginator

The paginator we will create will consist of four control buttons (First, Previous, Next, Last) and a collection of buttons representing each page.

Our paginator will consist of one `Y.Model` and two `Y.View`s.

Paginator Model

First we'll set up the model.

``` {{>search-js-paginator-model}} ```

Since `paginator-core` contains our logic, and is built to be mixed into a `Base`-based component, we do not need to add any new logic. Just mix in and our model is complete!

Paginator Pages View

The first view we will create is the view for the page numbers between the left and right controls.

``` {{>search-js-paginator-pages}} ```

Paginator View

Our Paginator View consists of four local controls: first, previous, next and last. In the middle of these four controls, we display a truncated list of pages (our Pages View previously discussed) from which the user can select.

``` {{>search-js-paginator}} ```

That's all it takes for our Paginator. As such it's fairly flexible and extremely customizable if we need it to be.

Next we need to look at our actual pages that hold the images.

Page View

Our page view need only display the images we pass to it. We do this by sustituying placeholders with the data from the Flickr API.

``` {{>search-js-page}} ```

Search App View

Our application view is a bit more envolved. It needs to request images when the form is submitted and start a new series of pages. As well as fetch new images when a new page is requested.

``` {{>search-js-app}} ```

Run with it!

Now we need to create an instance and render it

``` {{>search-js-begin}} ```

Finishing touches

Whew, that was a lot to digest! One last element is our CSS.

``` {{>search-css-styles}} ```

The Whole Example

Now let's see it all together!

``` {{>search-full}} ```