sarpay
2/5/2014 - 1:29 PM

[azure] sample app

[azure] sample app

styles.css
content_copyfile_download
/* Reset and define common styles */
* { box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica; background-color: #e0e0e0; }
button { border: 1px solid #999; color: #555; background-color: #F4F4FA; padding: 0 10px; }
button:hover { background-color: white; }
input[type=text], input:not([type]) { padding: 0 10px; text-overflow: ellipsis; }

/* Main page structure and masthead style */
#wrapper { max-width: 800px; margin: auto; padding: 20px; }
article { background-color: white; box-shadow: 0 0 12px rgba(0, 0, 0, 0.75); border-radius: 10px; }
header { background-color: #71BCFA; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
header h1 { text-transform: uppercase; font-weight: normal; color: #545353; font-size: 28px; }
header h2 { text-transform: uppercase; font-weight: normal; color: white; font-size: 20px; }
#summary { text-align: center; padding: 8px 0; }

/* "Add new" form */
#add-item { height: 40px; margin: 17px 0 5px 0; font-size: 1.1em }
#add-item div { overflow: hidden; }
#add-item button { float: right; margin-left: 10px; padding: 0 10px; height: 100%; border-radius: 4px; }
#new-item-text { width: 100%; height: 40px; border: 1px solid #999; font-size: 1em; border-radius: 4px; }

/* List of items */
#todo-items li { list-style-type: none; height: 36px; padding: 0px 5px; border-bottom: 1px solid #dadada;  }
.item-complete { float: left; margin: 0 8px 0 15px; height: 100%; }
.item-delete { float: right; margin: 5px; margin-right: 15px; height: 26px; }

/* Textboxes in list of items */
#todo-items li div { overflow: hidden; padding: 5px 2px; }
.item-text { width: 100%; height: 26px; line-height: 24px; border: 1px solid transparent; background-color: transparent; }
.item-text:focus, .item-text:hover { border-color: #aaa; background-color: #FFC; }

/* Footer */
footer { text-align: center; font-size: 0.8em; margin-top: 20px; }
footer a { color: #666; }
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <head>
        <title>Todo list: HoldRite</title>
        <link rel='stylesheet' href='styles.css' />
        <!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
    </head>
    <body>
        <div id='wrapper'>
            <article>
                <header>
                    <h2>Windows Azure</h2>
                    <h1>Mobile Services</h1>

                    <form id='add-item'>
                        <button type='submit'>Add</button>
                        <div><input type='text' id='new-item-text' placeholder='Enter new task' /></div>
                    </form>
                </header>

                <ul id='todo-items'></ul>
                <p id='summary'>Loading...</p>
            </article>

            <footer>
                <a href='http://www.windowsazure.com/en-us/develop/mobile/'>
                    Learn more about Windows Azure Mobile Services
                </a>
            </footer>
        </div>

        <script src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
        <script src='https://holdrite.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js'></script>
        <script src='app.js'></script>
    </body>
</html>
Sample Azure App.js
content_copyfile_download
$(function() {
    var client = new WindowsAzure.MobileServiceClient('https://holdrite.azure-mobile.net/', 'API TOKEN GOES HERE'),
        todoItemTable = client.getTable('todoitem');

    // Read current data and rebuild UI.
    // If you plan to generate complex UIs like this, consider using a JavaScript templating library.
    function refreshTodoItems() {
        var query = todoItemTable.where({ complete: false });

        query.read().then(function(todoItems) {
            var listItems = $.map(todoItems, function(item) {
                return $('<li>')
                    .attr('data-todoitem-id', item.id)
                    .append($('<button class="item-delete">Delete</button>'))
                    .append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
                    .append($('<div>').append($('<input class="item-text">').val(item.text)));
            });

            $('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
            $('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
        });
    }

    function getTodoItemId(formElement) {
        return Number($(formElement).closest('li').attr('data-todoitem-id'));
    }

    // Handle insert
    $('#add-item').submit(function(evt) {
        var textbox = $('#new-item-text'),
            itemText = textbox.val();
        if (itemText !== '') {
            todoItemTable.insert({ text: itemText, complete: false }).then(refreshTodoItems);
        }
        textbox.val('').focus();
        evt.preventDefault();
    });

    // Handle update
    $(document.body).on('change', '.item-text', function() {
        var newText = $(this).val();
        todoItemTable.update({ id: getTodoItemId(this), text: newText });
    });

    $(document.body).on('change', '.item-complete', function() {
        var isComplete = $(this).prop('checked');
        todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }).then(refreshTodoItems);
    });

    // Handle delete
    $(document.body).on('click', '.item-delete', function () {
        todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems);
    });

    // On initial load, start by fetching the current data
    refreshTodoItems();
});