カテゴリー:
PhoneGap
閲覧数:327 配信日:2018-07-06 10:30
このデフォルトアプリ「Hello World」に固有のもの
独自のアプリでは不要
コード
▼www/index.html
<script type="text/javascript" src="js/index.js"></script>
▼www/js/index.js
/*
* 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.
*/
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
index.js ／ devicereadyイベント
Cordova固有の機能
・このイベントは、CordovaデバイスAPIがロードされ、アクセスできる状態になったことを通知する
・アプリは、HTMLドキュメントのDOMがロードされると、以下のようにdocument.addEventListenerでイベントリスナーに登録される
document.addEventListener('deviceready', this.onDeviceReady, false);
・platforms\browser\js\index.js(29)
document.addEventListener('deviceready', this.onDeviceReady, false);
・platforms\browser\www\js\index.js(29)
document.addEventListener('deviceready', this.onDeviceReady, false);
・www\js\index.js
document.addEventListener('deviceready', this.onDeviceReady, false);
index.js ／ onDeviceReady関数
デバイスが準備できたことを視覚的に表示するreceivedEvent関数を呼び出す
・表示された初期の<p>要素でCSS display属性をnoneに設定する
・代わりに、display属性をblockに設定してindex.htmlのDevice is Ready要素を表示する
▼index.html
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
▼index.js
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}・「Hello World」の説明
・Hello World Explained
・PhoneGapデスクトップアプリの.bithoundrcについて