Add Cordova example to use new Cordova plugin
The best practices of building Cordova apps is not commit the platforms/ or plugins/ directories, since those should be able to be blown away and rebuilt by Cordova at any time. The JS has been updated to reflect that the `Realm` constructor is not available until the 'deviceready' event has fired. It is completely expected in Cordova apps that plugins will not have initialized until that time.
This commit is contained in:
Scott Kyle
parent
6f666d834a
commit
319f851c87
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
platforms/
|
||||
plugins/
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<widget id="io.realm.cordova-example" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
|
||||
<name>CordovaExample</name>
|
||||
<description>
|
||||
A sample Cordova application that uses the Realm JS API.
|
||||
</description>
|
||||
<author href="http://realm.io">
|
||||
Realm
|
||||
</author>
|
||||
<content src="index.html" />
|
||||
<access origin="*" />
|
||||
<allow-intent href="http://*/*" />
|
||||
<allow-intent href="https://*/*" />
|
||||
<allow-intent href="tel:*" />
|
||||
<allow-intent href="sms:*" />
|
||||
<allow-intent href="mailto:*" />
|
||||
<allow-intent href="geo:*" />
|
||||
<platform name="android">
|
||||
<allow-intent href="market:*" />
|
||||
</platform>
|
||||
<platform name="ios">
|
||||
<allow-intent href="itms:*" />
|
||||
<allow-intent href="itms-apps:*" />
|
||||
<preference name="deployment-target" value="8.0" />
|
||||
</platform>
|
||||
<plugin name="realm-cordova" spec="../../cordova" />
|
||||
</widget>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
/*
|
||||
* 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 */
|
||||
}
|
||||
|
||||
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' */
|
||||
background-color:#E4E4E4;
|
||||
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
|
||||
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
|
||||
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
|
||||
background-image:-webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0, #A7A7A7),
|
||||
color-stop(0.51, #E4E4E4)
|
||||
);
|
||||
background-attachment:fixed;
|
||||
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
|
||||
font-size:12px;
|
||||
height:100%;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* Portrait layout (default) */
|
||||
.app {
|
||||
height:100%; /* text area height */
|
||||
width:100%; /* text area width */
|
||||
padding:34px 10px 10px 10px;
|
||||
text-align:left;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
.todo-container {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.todo-container:after {
|
||||
content: "";
|
||||
display: table;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
float:right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* Landscape layout (with min-width) */
|
||||
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
|
||||
.app {
|
||||
background-position:left center;
|
||||
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
|
||||
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
|
||||
/* offset horizontal: half of image width and text area width */
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:24px;
|
||||
font-weight:normal;
|
||||
margin:0px;
|
||||
overflow:visible;
|
||||
padding:0px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.event {
|
||||
border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
color:#FFFFFF;
|
||||
font-size:12px;
|
||||
margin:0px 30px;
|
||||
padding:2px 0px;
|
||||
}
|
||||
|
||||
.event.listening {
|
||||
background-color:#333333;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.event.received {
|
||||
background-color:#4B946A;
|
||||
display:none;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from { opacity: 1.0; }
|
||||
50% { opacity: 0.4; }
|
||||
to { opacity: 1.0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
from { opacity: 1.0; }
|
||||
50% { opacity: 0.4; }
|
||||
to { opacity: 1.0; }
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation:fade 3000ms infinite;
|
||||
-webkit-animation:fade 3000ms infinite;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--
|
||||
Customize this policy to fit your own app's needs. For more guidance, see:
|
||||
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
|
||||
Some notes:
|
||||
* realm: is required to use the Realm JS API
|
||||
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
|
||||
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
|
||||
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
|
||||
* Enable inline JS: add 'unsafe-inline' to default-src
|
||||
-->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: realm: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
|
||||
<link rel="stylesheet" type="text/css" href="css/index.css">
|
||||
<title>Realm Cordova Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<div id="todo-items"></div>
|
||||
<input id="todo-input" type="text" />
|
||||
<button id="todo-button" type='button'>add</button>
|
||||
<form>
|
||||
<button>reload</button>
|
||||
</form>
|
||||
</div>
|
||||
<script type="text/javascript" src="cordova.js"></script>
|
||||
<script type="text/javascript" src="js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
/* Copyright 2015 Realm Inc - All Rights Reserved
|
||||
* Proprietary and Confidential
|
||||
*/
|
||||
|
||||
/* global Realm */
|
||||
|
||||
'use strict';
|
||||
|
||||
var app = {
|
||||
initialize: function() {
|
||||
// Bind any events that are required on startup. Common events are:
|
||||
// 'load', 'deviceready', 'offline', and 'online'.
|
||||
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
|
||||
},
|
||||
onDeviceReady: function() {
|
||||
var schema = {
|
||||
name: 'Todo',
|
||||
properties: [
|
||||
{name: 'text', type: Realm.Types.STRING},
|
||||
]
|
||||
};
|
||||
|
||||
this.realm = new Realm({schema: [schema]});
|
||||
|
||||
this.itemsContainer = document.getElementById('todo-items');
|
||||
this.addButton = document.getElementById('todo-button');
|
||||
this.input = document.getElementById('todo-input');
|
||||
|
||||
this.addButton.addEventListener('click', function() {
|
||||
this.addTodo();
|
||||
return false;
|
||||
}.bind(this), false);
|
||||
|
||||
this.input.addEventListener('keypress', function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
this.addTodo();
|
||||
return false;
|
||||
}
|
||||
}.bind(this), false);
|
||||
|
||||
this.updateItems();
|
||||
},
|
||||
updateItems: function() {
|
||||
var todos = this.realm.objects('Todo');
|
||||
var container = this.itemsContainer;
|
||||
container.innerHTML = '';
|
||||
|
||||
for (var i = 0, len = todos.length; i < len; i++) {
|
||||
var todo = todos[i];
|
||||
|
||||
var todoContainer = document.createElement('div');
|
||||
todoContainer.className = 'todo-container';
|
||||
|
||||
var todoItem = todoContainer.appendChild(document.createElement('div'));
|
||||
todoItem.className = 'todo-item';
|
||||
todoItem.textContent = todo.text;
|
||||
|
||||
var deleteButton = todoContainer.appendChild(document.createElement('button'));
|
||||
deleteButton.className = 'delete-button';
|
||||
deleteButton.textContent = 'Complete';
|
||||
deleteButton.addEventListener('click', this.deleteTodo.bind(this, todo), false);
|
||||
|
||||
container.appendChild(todoContainer);
|
||||
}
|
||||
},
|
||||
addTodo: function() {
|
||||
var input = this.input;
|
||||
var text = input.value;
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
|
||||
input.value = '';
|
||||
|
||||
var realm = this.realm;
|
||||
realm.write(function() {
|
||||
realm.create('Todo', {text: text});
|
||||
});
|
||||
|
||||
this.updateItems();
|
||||
},
|
||||
deleteTodo: function(todo) {
|
||||
var realm = this.realm;
|
||||
realm.write(function() {
|
||||
realm.delete(todo);
|
||||
});
|
||||
|
||||
this.updateItems();
|
||||
},
|
||||
};
|
||||
|
||||
app.initialize();
|
||||
Loading…
Reference in New Issue