hhyyg/index.css

## index.css
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    box-sizing: border-box;
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    font-family: Arial, Helvetica;
    background-color: #e0e0e0;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
}

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: 30px 10px 10px 10px; }
article { background-color: white; box-shadow: 0 0 12px rgba(0, 0, 0, 0.75); border-radius: 10px; }
header { background-color: #71BCFA; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
header h1 { text-transform: uppercase; font-weight: normal; color: #545353; font-size: 20px; margin: 4px }
header h2 { text-transform: uppercase; font-weight: normal; color: white; font-size: 14px; margin: 4px }
#summary { text-align: center; padding: 8px 0; }

/* "Add new" form */
#add-item { height: 26px; margin: 8px 0 5px 0; font-size: 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: 26px; border: 1px solid #999; font-size: 1em; border-radius: 4px; }

/* List of items */
#todo-items { padding: 8px; margin: 0px;}
#todo-items li { list-style-type: none; height: 36px; padding: 0px; border-bottom: 1px solid #dadada;  }
.item-complete { float: left; margin: 0px; height: 100%; }
.item-delete { float: right; margin: 5px; 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; display: block; }
#errorlog { color: red; font-weight: bold; padding: 8px; display: inline-block; text-align: left; }


## index.html
<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://mmll.azurewebsites.net; style-src 'self'; media-src *">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Todo list: mmll</title>
</head>
<body>
    <div id='wrapper'>
        <article>
            <header>
                <h2>Azure</h2>
                <h1>Mobile Apps</h1>

                <form id='add-item'>
                    <button type='submit' id='refresh'>Refresh</button>
                    <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'>Initializing...</p>
        </article>

        <footer>
            <ul id='errorlog'></ul>
        </footer>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/appBundle.js"></script>
    <script type="text/javascript" src="scripts/jquery-2.2.3.min.js"></script>
</body>
</html>

## index.ts
/// <reference path="typings/azure-mobile-services-client/azuremobileservicesclient.d.ts" />

// 空白のテンプレートの概要については、次のドキュメントを参照してください:
// http://go.microsoft.com/fwlink/?LinkID=397705
// ページ上のコードをデバッグするには、Ripple で読み込むか、Android デバイス/エミュレーターで読み込みます。アプリを起動し、ブレークポイントを設定します。
// 次に、JavaScript コンソールで "window.location.reload()" を実行します。

module Miso.CordovaMobileApp {
    "use strict";

    var client;
    var todoItemTable;

    export module Application {
        export function initialize() {
            document.addEventListener('deviceready', onDeviceReady, false);
        }

        function onDeviceReady() {
            // Cordova の一時停止を処理し、イベントを再開します
            document.addEventListener('pause', onPause, false);
            document.addEventListener('resume', onResume, false);

            // Create a connection reference to our Azure Mobile Apps backend
            client = new WindowsAzure.MobileServiceClient("https://***置き換えてください***.azurewebsites.net", "");

            // Create a table reference
            todoItemTable = client.getTable('todoitem');

            // Refresh the todoItems
            refreshDisplay();

            // Wire up the UI Event Handler for the Add Item
            $('#add-item').submit(addItemHandler);
            $('#refresh').on('click', refreshDisplay);
        }

        function onPause() {
            // TODO: このアプリケーションは中断されました。ここで、アプリケーションの状態を保存します。
        }

        function onResume() {
            // TODO: このアプリケーションが再アクティブ化されました。ここで、アプリケーションの状態を復元します。
        }

        function refreshDisplay() {
            updateSummaryMessage('Loading Data from Azure');

            // Execute a query for uncompleted items and process
            todoItemTable
                .where({ complete: false })     // Set up the query
                .read()                         // Read the results
                .then(createTodoItemList, handleError);
        }

        /**
         * Updates the Summary Message
         * @param {string} msg the message to use
         * @returns {void}
         */
        function updateSummaryMessage(msg) {
            $('#summary').html(msg);
        }

        /**
        * Create the DOM for a single todo item
        * @param {Object} item the Todo Item
        * @param {string} item.id the ID of the item
        * @param {bool} item.complete true if the item is completed
        * @param {string} item.text the text value
        * @returns {jQuery} jQuery DOM object
        */
        function createTodoItem(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)));
        }

        /**
        * Create a list of Todo Items
        * @param {TodoItem[]} items an array of todoitem objects
        * @returns {void}
        */
        function createTodoItemList(items) {
            // Cycle through each item received from Azure and add items to the item list
            var listItems = $.map(items, createTodoItem);
            $('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
            $('#summary').html('<strong>' + items.length + '</strong> item(s)');

            // Wire up the event handlers for each item in the list
            $('.item-delete').on('click', deleteItemHandler);
            $('.item-text').on('change', updateItemTextHandler);
            $('.item-complete').on('change', updateItemCompleteHandler);
        }

        /**
         * Handle error conditions
         * @param {Error} error the error that needs handling
         * @returns {void}
         */
        function handleError(error) {
            var text = error + (error.request ? ' - ' + error.request.status : '');
            console.error(text);
            $('#errorlog').append($('<li>').text(text));
        }

        /**
         * Given a sub-element of an LI, find the TodoItem ID associated with the list member
         *
         * @param {DOMElement} el the form element
         * @returns {string} the ID of the TodoItem
         */
        function getTodoItemId(el) {
            return $(el).closest('li').attr('data-todoitem-id');
        }

        /**
         * Event handler for when the user enters some text and clicks on Add
         * @param {Event} event the event that caused the request
         * @returns {void}
         */
        function addItemHandler(event) {
            var textbox = $('#new-item-text'),
                itemText = textbox.val();

            updateSummaryMessage('Adding New Item');
            if (itemText !== '') {
                todoItemTable.insert({
                    text: itemText,
                    complete: false
                }).then(refreshDisplay, handleError);
            }

            textbox.val('').focus();
            event.preventDefault();
        }

        /**
         * Event handler for when the user clicks on Delete next to a todo item
         * @param {Event} event the event that caused the request
         * @returns {void}
         */
        function deleteItemHandler(event) {
            var itemId = getTodoItemId(event.currentTarget);

            updateSummaryMessage('Deleting Item in Azure');
            todoItemTable
                .del({ id: itemId })   // Async send the deletion to backend
                .then(refreshDisplay, handleError); // Update the UI
            event.preventDefault();
        }

        /**
         * Event handler for when the user updates the text of a todo item
         * @param {Event} event the event that caused the request
         * @returns {void}
         */
        function updateItemTextHandler(event) {
            var itemId = getTodoItemId(event.currentTarget),
                newText = $(event.currentTarget).val();

            updateSummaryMessage('Updating Item in Azure');
            todoItemTable
                .update({ id: itemId, text: newText })  // Async send the update to backend
                .then(refreshDisplay, handleError); // Update the UI
            event.preventDefault();
        }

        /**
         * Event handler for when the user updates the completed checkbox of a todo item
         * @param {Event} event the event that caused the request
         * @returns {void}
         */
        function updateItemCompleteHandler(event) {
            var itemId = getTodoItemId(event.currentTarget),
                isComplete = $(event.currentTarget).prop('checked');

            updateSummaryMessage('Updating Item in Azure');
            todoItemTable
                .update({ id: itemId, complete: isComplete })  // Async send the update to backend
                .then(refreshDisplay, handleError);        // Update the UI
        }
    }

    window.onload = function () {
        Application.initialize();
    }
}
	/*
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* to you under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing,
	* software distributed under the License is distributed on an
	* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	* KIND, either express or implied. See the License for the
	* specific language governing permissions and limitations
	* under the License.
	*/
	* {
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
	box-sizing: border-box;
	}

	body {
	-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
	-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
	-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
	font-family: Arial, Helvetica;
	background-color: #e0e0e0;
	height:100%;
	margin:0px;
	padding:0px;
	width:100%;
	}

	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: 30px 10px 10px 10px; }
	article { background-color: white; box-shadow: 0 0 12px rgba(0, 0, 0, 0.75); border-radius: 10px; }
	header { background-color: #71BCFA; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
	header h1 { text-transform: uppercase; font-weight: normal; color: #545353; font-size: 20px; margin: 4px }
	header h2 { text-transform: uppercase; font-weight: normal; color: white; font-size: 14px; margin: 4px }
	#summary { text-align: center; padding: 8px 0; }

	/* "Add new" form */
	#add-item { height: 26px; margin: 8px 0 5px 0; font-size: 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: 26px; border: 1px solid #999; font-size: 1em; border-radius: 4px; }

	/* List of items */
	#todo-items { padding: 8px; margin: 0px;}
	#todo-items li { list-style-type: none; height: 36px; padding: 0px; border-bottom: 1px solid #dadada; }
	.item-complete { float: left; margin: 0px; height: 100%; }
	.item-delete { float: right; margin: 5px; 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; display: block; }
	#errorlog { color: red; font-weight: bold; padding: 8px; display: inline-block; text-align: left; }
	<!DOCTYPE html>
	<!--
	Licensed to the Apache Software Foundation (ASF) under one
	or more contributor license agreements. See the NOTICE file
	distributed with this work for additional information
	regarding copyright ownership. The ASF licenses this file
	to you under the Apache License, Version 2.0 (the
	"License"); you may not use this file except in compliance
	with the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing,
	software distributed under the License is distributed on an
	"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	KIND, either express or implied. See the License for the
	specific language governing permissions and limitations
	under the License.
	-->
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://mmll.azurewebsites.net; style-src 'self'; media-src *">
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<title>Todo list: mmll</title>
	</head>
	<body>
	<div id='wrapper'>
	<article>
	<header>
	<h2>Azure</h2>
	<h1>Mobile Apps</h1>

	<form id='add-item'>
	<button type='submit' id='refresh'>Refresh</button>
	<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'>Initializing...</p>
	</article>

	<footer>
	<ul id='errorlog'></ul>
	</footer>
	</div>
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="scripts/appBundle.js"></script>
	<script type="text/javascript" src="scripts/jquery-2.2.3.min.js"></script>
	</body>
	</html>
	/// <reference path="typings/azure-mobile-services-client/azuremobileservicesclient.d.ts" />

	// 空白のテンプレートの概要については、次のドキュメントを参照してください:
	// http://go.microsoft.com/fwlink/?LinkID=397705
	// ページ上のコードをデバッグするには、Ripple で読み込むか、Android デバイス/エミュレーターで読み込みます。アプリを起動し、ブレークポイントを設定します。
	// 次に、JavaScript コンソールで "window.location.reload()" を実行します。

	module Miso.CordovaMobileApp {
	"use strict";

	var client;
	var todoItemTable;

	export module Application {
	export function initialize() {
	document.addEventListener('deviceready', onDeviceReady, false);
	}

	function onDeviceReady() {
	// Cordova の一時停止を処理し、イベントを再開します
	document.addEventListener('pause', onPause, false);
	document.addEventListener('resume', onResume, false);

	// Create a connection reference to our Azure Mobile Apps backend
	client = new WindowsAzure.MobileServiceClient("https://*置き換えてください*.azurewebsites.net", "");

	// Create a table reference
	todoItemTable = client.getTable('todoitem');

	// Refresh the todoItems
	refreshDisplay();

	// Wire up the UI Event Handler for the Add Item
	$('#add-item').submit(addItemHandler);
	$('#refresh').on('click', refreshDisplay);
	}

	function onPause() {
	// TODO: このアプリケーションは中断されました。ここで、アプリケーションの状態を保存します。
	}

	function onResume() {
	// TODO: このアプリケーションが再アクティブ化されました。ここで、アプリケーションの状態を復元します。
	}

	function refreshDisplay() {
	updateSummaryMessage('Loading Data from Azure');

	// Execute a query for uncompleted items and process
	todoItemTable
	.where({ complete: false }) // Set up the query
	.read() // Read the results
	.then(createTodoItemList, handleError);
	}

	/**
	* Updates the Summary Message
	* @param {string} msg the message to use
	* @returns {void}
	*/
	function updateSummaryMessage(msg) {
	$('#summary').html(msg);
	}

	/**
	* Create the DOM for a single todo item
	* @param {Object} item the Todo Item
	* @param {string} item.id the ID of the item
	* @param {bool} item.complete true if the item is completed
	* @param {string} item.text the text value
	* @returns {jQuery} jQuery DOM object
	*/
	function createTodoItem(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)));
	}

	/**
	* Create a list of Todo Items
	* @param {TodoItem[]} items an array of todoitem objects
	* @returns {void}
	*/
	function createTodoItemList(items) {
	// Cycle through each item received from Azure and add items to the item list
	var listItems = $.map(items, createTodoItem);
	$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
	$('#summary').html('<strong>' + items.length + '</strong> item(s)');

	// Wire up the event handlers for each item in the list
	$('.item-delete').on('click', deleteItemHandler);
	$('.item-text').on('change', updateItemTextHandler);
	$('.item-complete').on('change', updateItemCompleteHandler);
	}

	/**
	* Handle error conditions
	* @param {Error} error the error that needs handling
	* @returns {void}
	*/
	function handleError(error) {
	var text = error + (error.request ? ' - ' + error.request.status : '');
	console.error(text);
	$('#errorlog').append($('<li>').text(text));
	}

	/**
	* Given a sub-element of an LI, find the TodoItem ID associated with the list member
	*
	* @param {DOMElement} el the form element
	* @returns {string} the ID of the TodoItem
	*/
	function getTodoItemId(el) {
	return $(el).closest('li').attr('data-todoitem-id');
	}

	/**
	* Event handler for when the user enters some text and clicks on Add
	* @param {Event} event the event that caused the request
	* @returns {void}
	*/
	function addItemHandler(event) {
	var textbox = $('#new-item-text'),
	itemText = textbox.val();

	updateSummaryMessage('Adding New Item');
	if (itemText !== '') {
	todoItemTable.insert({
	text: itemText,
	complete: false
	}).then(refreshDisplay, handleError);
	}

	textbox.val('').focus();
	event.preventDefault();
	}

	/**
	* Event handler for when the user clicks on Delete next to a todo item
	* @param {Event} event the event that caused the request
	* @returns {void}
	*/
	function deleteItemHandler(event) {
	var itemId = getTodoItemId(event.currentTarget);

	updateSummaryMessage('Deleting Item in Azure');
	todoItemTable
	.del({ id: itemId }) // Async send the deletion to backend
	.then(refreshDisplay, handleError); // Update the UI
	event.preventDefault();
	}

	/**
	* Event handler for when the user updates the text of a todo item
	* @param {Event} event the event that caused the request
	* @returns {void}
	*/
	function updateItemTextHandler(event) {
	var itemId = getTodoItemId(event.currentTarget),
	newText = $(event.currentTarget).val();

	updateSummaryMessage('Updating Item in Azure');
	todoItemTable
	.update({ id: itemId, text: newText }) // Async send the update to backend
	.then(refreshDisplay, handleError); // Update the UI
	event.preventDefault();
	}

	/**
	* Event handler for when the user updates the completed checkbox of a todo item
	* @param {Event} event the event that caused the request
	* @returns {void}
	*/
	function updateItemCompleteHandler(event) {
	var itemId = getTodoItemId(event.currentTarget),
	isComplete = $(event.currentTarget).prop('checked');

	updateSummaryMessage('Updating Item in Azure');
	todoItemTable
	.update({ id: itemId, complete: isComplete }) // Async send the update to backend
	.then(refreshDisplay, handleError); // Update the UI
	}
	}

	window.onload = function () {
	Application.initialize();
	}
	}