Poodle Tutorial

Sample code for fetching JSON API data & static images. Dempnstrates the evented nature of Poodle.

by Dan Stocker

HTML

<script src="https://dl.dropboxusercontent.com/u/9258903/JavaScript/dessert-0.3.2.js"></script>
<script src="https://dl.dropboxusercontent.com/u/9258903/JavaScript/troop-0.7.2.js"></script>
<script src="https://dl.dropboxusercontent.com/u/9258903/JavaScript/sntls-0.17.0.js"></script>
<script src="https://dl.dropboxusercontent.com/u/9258903/JavaScript/evan-0.4.1.js"></script>
<script src="https://dl.dropboxusercontent.com/u/9258903/JavaScript/poodle-0.1.2.js"></script>

CSS

img {
    width: 100%;
}

JavaScript

// subscribes to all service events
[].toEndpoint()
    .subscribeTo(p$.Service.EVENT_SERVICE_SUCCESS, function (event) {
        $('body').append(
            event.request.endpoint + '<br />' + 
            JSON.stringify(event.responseNode) + '<br />');
    });

// subscribes to all image load success events
[].toImageUrl()
    .subscribeTo(p$.Image.EVENT_IMAGE_LOAD_SUCCESS, function (event) {
        $('body').append(event.imageElement);
    });

// fetch JSON
'http://jsonip.com'.toEndpoint()
    .toRequest()
    .setHttpMethod('GET') // is GET by default
    .addParams({
        // this is where you would add query params
    })
    .toService()
    .callService();

'http://api.automeme.net/text.json'.toEndpoint()
    .toRequest()
    .toService()
    .callService();

// load image
'http://httpcats.herokuapp.com/418'.toImageUrl().loadImage();