You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by st...@apache.org on 2016/08/26 00:10:26 UTC
[2/6] cordova-template-reference git commit: Made a reference for
template creation
Made a reference for template creation
Project: http://git-wip-us.apache.org/repos/asf/cordova-template-reference/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-template-reference/commit/c06ce270
Tree: http://git-wip-us.apache.org/repos/asf/cordova-template-reference/tree/c06ce270
Diff: http://git-wip-us.apache.org/repos/asf/cordova-template-reference/diff/c06ce270
Branch: refs/heads/master
Commit: c06ce2708f9e5a3a1ce1933203dd0256598b3c66
Parents: 7dc751c
Author: carynbear <ca...@berkeley.edu>
Authored: Thu Jun 16 14:28:18 2016 -0700
Committer: carynbear <ca...@berkeley.edu>
Committed: Thu Jun 16 15:15:03 2016 -0700
----------------------------------------------------------------------
README.md | 39 ++++++++++++
index.js | 5 ++
package.json | 20 +++++++
template_docs.md | 41 +++++++++++++
template_src/config.xml | 26 ++++++++
template_src/hooks/README.md | 23 ++++++++
template_src/package.json | 13 ++++
template_src/www/css/index.css | 115 ++++++++++++++++++++++++++++++++++++
template_src/www/img/logo.png | Bin 0 -> 21814 bytes
template_src/www/index.html | 49 +++++++++++++++
template_src/www/js/index.js | 51 ++++++++++++++++
11 files changed, 382 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/README.md
----------------------------------------------------------------------
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a860b68
--- /dev/null
+++ b/README.md
@@ -0,0 +1,39 @@
+# Cordova Template Reference
+This is a reference for building and publishing Cordova Templates.
+
+## Structure of your template
+```
+template_package
+\u251c\u2500\u2500 package.json (for your template package to be published on npm)
+\u251c\u2500\u2500 index.js
+\u2514\u2500\u2500 template_src (contains template files)
+ \u251c\u2500\u2500 package.json
+ \u251c\u2500\u2500 config.xml
+ \u2514\u2500\u2500 (files and folders that make up the template)
+```
+### Outside of `template_src`
+All files outside of `template_src` are used to define parameters about the template. These files are not copied over at creation, so feel free to add a README or any other files outside of template_src.
+
+`index.js` points to where the template exists. You'll see that index.js usually looks like:
+```javascript
+var path = require('path');
+
+module.export = {
+ dirname = path.join(__dirname, 'template_src')
+};
+```
+
+`package.json` tells you about the template. It is necessary state that `"main": "index.js"` so that the reference to the template source in `index.js` is propagated. All templates should contain the keyword `"cordova:template"` so that the template is searchable on npm.
+```javascript
+...
+"main": "index.js",
+...
+"keywords": [
+"cordova:template"
+...
+```
+
+### Inside of `template_src`
+All files inside of `template_src` compose the template from which a user would desire in order to create their project. Everything in this folder is copied over to the created project.
+
+(The package.json in `template_src` should be filled with information that describes the project that would be created from the template.)
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/index.js
----------------------------------------------------------------------
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..8464292
--- /dev/null
+++ b/index.js
@@ -0,0 +1,5 @@
+var path = require('path');
+
+module.export = {
+ dirname = path.join(__dirname, 'template_src')
+};
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..990a95c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "cordova_template",
+ "version": "1.0.0",
+ "description": "A reference for creating cordova app templates.",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/carynbear/cordova-template.git"
+ },
+ "homepage": "https://github.com/carynbear/cordova-template",
+ "keywords": [
+ "ecosystem:cordova",
+ "cordova:template"
+ ],
+ "author": "Caryn Tran",
+ "license": "Apache-2.0"
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/template_docs.md
----------------------------------------------------------------------
diff --git a/template_docs.md b/template_docs.md
new file mode 100644
index 0000000..ba5cde2
--- /dev/null
+++ b/template_docs.md
@@ -0,0 +1,41 @@
+#Use a Template
+
+Templates allow you to use preexisting code to jumpstart your project.
+
+Find a template to create your app from by seaching for the keyword `cordova:template` on [npm](https://www.npmjs.com/search?q=cordova%3Atemplate). You can also use local templates on your computer, or a Git repository.
+
+After locating a template you wish to use. Create your project using that template, by specifying the `--template` flag during the `create` command, followed by your template source.
+
+Creating a cordova project from a template
+```
+$ cordova create hello com.example.hello HelloWorld --template <npm-package-name | <git-remote-url | local-path>
+```
+
+After succesfully using a template to create your project, you'll want to indicate the platforms that you intend to target with your app. Go into your project folder and [add platforms](http://cordova.apache.org/docs/en/latest/guide/cli/index.html#add-platforms).
+
+#Create a Template
+
+Begin by creating a cordova app that will become the basis for your template. Then you'll take the contents of your app and put them into the following structure. When your template is used, all of the contents within `template_src` will be used to create the new project, so be sure to include any necessary files in that folder. Reference [this example](https://github.com/carynbear/cordova-template) for details.
+
+```
+template_package/
+\u251c\u2500\u2500 package.json (optional; needed to publish template on npm)
+\u251c\u2500\u2500 index.js (required)
+\u2514\u2500\u2500 template_src/ (required)
+ \u2514\u2500\u2500 CONTENTS OF APP TEMPLATE
+```
+Note that `index.js` should export a reference to `template_src` and `package.json` should reference `index.js`. See [the example](https://github.com/carynbear/cordova-template) for details on how that is done.
+
+To finish off your template, edit `package.json` to contain the keyword `"cordova:template"`.
+```javascript
+{
+ ...
+ "keywords": [
+ "ecosystem:cordova",
+ "cordova:template"
+ ]
+ ...
+}
+```
+
+Congrats! You've made a template for creating a Cordova project. Share your template on npm so that everyone can benefit from your hard work.
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/template_src/config.xml
----------------------------------------------------------------------
diff --git a/template_src/config.xml b/template_src/config.xml
new file mode 100644
index 0000000..ad359a2
--- /dev/null
+++ b/template_src/config.xml
@@ -0,0 +1,26 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="com.example.template" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+ <name>Template</name>
+ <description>
+ This is the project created from the template: cordova_template.
+ </description>
+ <author email="dev@cordova.apache.org" href="http://cordova.io">
+ Apache Cordova Team
+ </author>
+ <content src="index.html" />
+ <plugin name="cordova-plugin-whitelist" spec="1" />
+ <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:*" />
+ </platform>
+</widget>
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/template_src/hooks/README.md
----------------------------------------------------------------------
diff --git a/template_src/hooks/README.md b/template_src/hooks/README.md
new file mode 100644
index 0000000..574ad4c
--- /dev/null
+++ b/template_src/hooks/README.md
@@ -0,0 +1,23 @@
+<!--
+#
+# 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.
+#
+-->
+# Cordova Hooks
+
+Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. See Hooks Guide for more details: http://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guide.
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/template_src/package.json
----------------------------------------------------------------------
diff --git a/template_src/package.json b/template_src/package.json
new file mode 100644
index 0000000..ec9ce79
--- /dev/null
+++ b/template_src/package.json
@@ -0,0 +1,13 @@
+{
+ "name": "template_project",
+ "version": "1.0.0",
+ "description": "This is the project created from the template: cordova_template",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [
+ "ecosystem:cordova"
+ ],
+ "author": "",
+ "license": "ISC"
+}
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/template_src/www/css/index.css
----------------------------------------------------------------------
diff --git a/template_src/www/css/index.css b/template_src/www/css/index.css
new file mode 100644
index 0000000..51daa79
--- /dev/null
+++ b/template_src/www/css/index.css
@@ -0,0 +1,115 @@
+/*
+ * 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;
+ text-transform:uppercase;
+ width:100%;
+}
+
+/* Portrait layout (default) */
+.app {
+ background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
+ position:absolute; /* position in the center of the screen */
+ left:50%;
+ top:50%;
+ height:50px; /* text area height */
+ width:225px; /* text area width */
+ text-align:center;
+ padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
+ margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
+ /* offset horizontal: half of text area width */
+}
+
+/* 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;
+}
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/template_src/www/img/logo.png
----------------------------------------------------------------------
diff --git a/template_src/www/img/logo.png b/template_src/www/img/logo.png
new file mode 100644
index 0000000..9519e7d
Binary files /dev/null and b/template_src/www/img/logo.png differ
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/template_src/www/index.html
----------------------------------------------------------------------
diff --git a/template_src/www/index.html b/template_src/www/index.html
new file mode 100644
index 0000000..24be165
--- /dev/null
+++ b/template_src/www/index.html
@@ -0,0 +1,49 @@
+<!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>
+ <!--
+ 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:
+ * 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: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
+ <meta name="format-detection" content="telephone=no">
+ <meta name="msapplication-tap-highlight" content="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>A Template</title>
+ </head>
+ <body>
+ <div class="app">
+ <h1>Apache Cordova</h1>
+ <div id="deviceready" class="blink">
+ <p class="event listening">Connecting to Device</p>
+ <p class="event received">Device is Ready</p>
+ </div>
+ </div>
+ <script type="text/javascript" src="cordova.js"></script>
+ <script type="text/javascript" src="js/index.js"></script>
+ </body>
+</html>
http://git-wip-us.apache.org/repos/asf/cordova-template-reference/blob/c06ce270/template_src/www/js/index.js
----------------------------------------------------------------------
diff --git a/template_src/www/js/index.js b/template_src/www/js/index.js
new file mode 100644
index 0000000..c31cd83
--- /dev/null
+++ b/template_src/www/js/index.js
@@ -0,0 +1,51 @@
+/*
+ * 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);
+ }
+};
+
+app.initialize();
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org