├── .bowerrc ├── .gitignore ├── .gitmodules ├── .jshintignore ├── .jshintrc ├── .travis.yml ├── Gruntfile.js ├── README-CORDOVA-WEBOS.md ├── README.md ├── assets └── favicon.ico ├── debug.html ├── deploy.json ├── deploy.md ├── icon.png ├── index.html ├── package.js ├── package.json ├── source ├── app.js ├── data │ ├── data.js │ └── package.js ├── package.js ├── style │ ├── Theme.less │ ├── main.less │ └── package.js └── views │ ├── package.js │ └── views.js ├── tasks └── deploy.js └── tools ├── deploy.bat └── deploy.sh /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "lib" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | /build 3 | /deploy 4 | /node_modules 5 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "enyo"] 2 | path = enyo 3 | url = ../../enyojs/enyo.git 4 | [submodule "lib/onyx"] 5 | path = lib/onyx 6 | url = ../../enyojs/onyx.git 7 | [submodule "lib/layout"] 8 | path = lib/layout 9 | url = ../../enyojs/layout.git 10 | -------------------------------------------------------------------------------- /.jshintignore: -------------------------------------------------------------------------------- 1 | deploy 2 | build 3 | assets 4 | enyo 5 | lib 6 | api 7 | node_modules 8 | Gruntfile.js 9 | tasks 10 | tools 11 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "enyo": false, 4 | "$L": false, 5 | "onyx": false, 6 | "myapp": false 7 | }, 8 | "es3": true, 9 | "evil": false, 10 | "regexdash": true, 11 | "browser": true, 12 | "wsh": false, 13 | "trailing": false, 14 | "sub": true, 15 | "eqnull": true, 16 | "laxbreak": true, 17 | "curly": true, 18 | "indent": 4, 19 | "newcap": true, 20 | "undef": true, 21 | "unused": "vars" 22 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | install: "npm -g install jshint" 5 | script: "jshint ." -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Licensed to the Apache Software Foundation (ASF) under one 3 | * or more contributor license agreements. See the NOTICE file 4 | * distributed with this work for additional information 5 | * regarding copyright ownership. The ASF licenses this file 6 | * to you under the Apache License, Version 2.0 (the 7 | * 'License'); you may not use this file except in compliance 8 | * with the License. You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, 13 | * software distributed under the License is distributed on an 14 | * 'AS IS' BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 15 | * KIND, either express or implied. See the License for the 16 | * specific language governing permissions and limitations 17 | * under the License. 18 | */ 19 | module.exports = function(grunt) { 20 | grunt.initConfig({ 21 | pkg: grunt.file.readJSON('package.json'), 22 | clean: ['build', 'deploy'], 23 | 'http-server': { 24 | 'dev': { 25 | // the server root directory 26 | root: process.cwd(), 27 | port: 8282, 28 | host: '127.0.0.1', 29 | cache: 0, 30 | showDir : true, 31 | autoIndex: true, 32 | // server default file extension 33 | ext: 'html', 34 | // run in parallel with other tasks 35 | runInBackground:false 36 | } 37 | }, 38 | jshint: { 39 | options: { 40 | jshintrc: '.jshintrc', 41 | }, 42 | files:["."] 43 | } 44 | }); 45 | 46 | // external tasks 47 | grunt.loadNpmTasks('grunt-contrib-jshint'); 48 | grunt.loadNpmTasks('grunt-contrib-clean'); 49 | grunt.loadNpmTasks('grunt-http-server'); 50 | 51 | // custom tasks 52 | grunt.loadTasks('tasks'); 53 | 54 | // defaults 55 | grunt.registerTask('default', ['deploy']); 56 | grunt.registerTask('build', ['deploy']); 57 | grunt.registerTask('serve', ['http-server']); 58 | }; 59 | -------------------------------------------------------------------------------- /README-CORDOVA-WEBOS.md: -------------------------------------------------------------------------------- 1 | Cordova webOS Instructions: 2 | --------------------------- 3 | 4 | - Set up your project the same way you would set up any other bootplate project. 5 | - Modify your index.html and JavaScript files as outlined in this blog post: [JavaScript Apps for Open webOS With Enyo and Cordova](http://blog.openwebosproject.org/post/39278618299/javascript-apps-for-open-webos-with-enyo-and-cordova) 6 | - Copy appinfo.json from the PhoneGap 'lib/webos/framework' directory and a cordova JavaScript file from the PhoneGap 'lib/webos/lib' directory 7 | - Modify appinfo.json for your project and add an icon 8 | - run tools\deploy.bat --cordova-webos or tools/deploy.sh --cordova-webos to deploy your app. 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## About 2 | 3 | bootplate is a template for a minimal Enyo and Onyx web application. 4 | You would normally use this to setup your local environment then go and modify the 5 | files to build your own application. By itself, it does almost nothing. 6 | 7 | ## Downloading 8 | 9 | To download a version of bootplate with all of the submodules populated 10 | for quick use, visit http://enyojs.com/get-enyo/. The download link in GitHub will 11 | give you just the bootplate repo without any of the supporting libraries. 12 | 13 | As an alternative, you can use a Git client to clone this repo and then initialize 14 | submodules. This is good if you want to work with the latest version of the code from 15 | GitHub that we may not have packaged into an official release. 16 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enyojs/bootplate/4bd7ee17bebbd7788fc6f58255c2cf879b78e56b/assets/favicon.ico -------------------------------------------------------------------------------- /debug.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Enyo Bootplate App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /deploy.json: -------------------------------------------------------------------------------- 1 | { 2 | "enyo": "./enyo", 3 | "packagejs": "./package.js", 4 | "assets": ["./icon.png", "./index.html", "./assets"], 5 | "libs": ["./lib/onyx", "./lib/layout"] 6 | } 7 | -------------------------------------------------------------------------------- /deploy.md: -------------------------------------------------------------------------------- 1 | # Minification and Deployment 2 | ## Understanding and Using Minification 3 | 4 | Enyo comes with a minification tool based on UglifyJS, run by Node.js. 5 | 6 | This tool can be used to compress the framework, other libraries, and applications, and will keep load order intact as well as correct url paths in css. 7 | 8 | ### Why compress? 9 | 10 | Compressing enyo apps greatly reduces load times of applications, as well as reducing overall code size. 11 | 12 | This way, you can be very verbose in the documentation of your source code, without that impacting the performance of your application in production. 13 | 14 | ### What is compressed 15 | 16 | For enyo, the libraries, and your code: **external assets such as images will not be copied or moved**. 17 | 18 | Instead, the CSS url paths are fixed up to reference the new path from the build location. 19 | 20 | ### How to compress 21 | 22 | To compress your application, you must run the script named `deploy.js` that comes with Enyo, as `node enyo/tools/deploy.js`. Bootplate provides 2 wrappers scripts to shorten the minification learning curve. You can just run: 23 | 24 | C:\path\to\bootplate\> cd tools 25 | C:\path\to\bootplate\tools> deploy.bat 26 | 27 | or (on Mac & Linux): 28 | 29 | $ cd /path/to/bootplate/tools 30 | $ bash ./deploy.sh 31 | 32 | This script will run the minification tool located in `enyo/tools/minifier/deploy.js`, and make a build of enyo, then a build of your app. 33 | 34 | Any libraries referenced in your `package.js` manifest will be built into your app's built code. 35 | 36 | **NOTE:** `deploy.js` expects to find a `deploy.json` manifest in the root-folder of your application. This manifest then defines where are (1) the top-level `package.js`, (2) the location of the Enyo framework within the applicatio source & what are the various libraries & assets. A typical default `package.json` contains: 37 | 38 | ```json 39 | { 40 | "enyo": "./enyo", 41 | "packagejs": "./package.js", 42 | "assets": ["./icon.png", "./index.html", "./assets"], 43 | "libs": ["./lib/onyx", "./lib/layout"] 44 | } 45 | ``` 46 | 47 | ### What comes out? 48 | 49 | After running the `deploy.bat|sh` script, two new folders (`build` and `deploy`) will be located next to your `source` directory. 50 | 51 | #### Minification test folder - build 52 | 53 | ``` 54 | build 55 | ├── app.css 56 | ├── app.js 57 | ├── enyo.css 58 | └── enyo.js 59 | ``` 60 | 61 | These generated files will be loaded in the given order by `index.html`. 62 | 63 | #### Deployment folder - deploy 64 | 65 | The `deploy` folder contains a ready-to-be-shipped minified version of your application, including its declared assets & libraries in addition to the content of the `build folder`. 66 | 67 | If the libraries have a compatible `deploy.json` (use to be `deploy.sh` or `deploy.bat` scripts), they will be used, and a minimal copy will be placed in the deployment's `./lib` folder. 68 | 69 | If no `deploy.(json|sh|bat)` script is found for the libraries, all of each library is copied into the `deploy/lib` folder to provide maximum safety. 70 | 71 | If you are adding a library, please add a `deploy.json` file similar to the ones in `lib/onyx` or `lib/layout`. 72 | 73 | If no images or files are needed from the library, just include the following (the same as `lib/layout`): 74 | 75 | ```json 76 | { 77 | "packagejs": "./package.js", 78 | "assets": [], 79 | "libs": [] 80 | } 81 | ``` 82 | 83 | **NOTE:** In case you want full control of the minification process (target folders... etc), get familiar with the underlying Node.js script using: 84 | 85 | $ node enyo/tools/deploy.js -h 86 | 87 | **NOTE:** For reference, the minification of an un-modified `bootplate` results in the following `deploy/` tree: 88 | 89 | ``` 90 | deploy 91 | ├── assets 92 | │   └── favicon.ico 93 | ├── build 94 | │   ├── app.css 95 | │   ├── app.js 96 | │   ├── enyo.css 97 | │   └── enyo.js 98 | ├── icon.png 99 | ├── index.html 100 | └── lib 101 | └── onyx 102 | ├── LICENSE-2.0.txt 103 | └── images 104 | ├── checkbox.png 105 | ├── close-active.png 106 | ├── close-inactive.png 107 | ├── grabbutton.png 108 | ├── gradient-invert.png 109 | ├── gradient.png 110 | ├── more.png 111 | ├── progress-button-cancel.png 112 | ├── search-input-cancel.png 113 | ├── search-input-search.png 114 | ├── slider-handle.png 115 | ├── spinner-dark.gif 116 | └── spinner-light.gif 117 | ``` 118 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enyojs/bootplate/4bd7ee17bebbd7788fc6f58255c2cf879b78e56b/icon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Enyo Bootplate App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | /* 2 | == DO NOT EDIT THIS FILE! == 3 | This is necessary to keep paths correct for the minification process 4 | */ 5 | enyo.depends("source"); 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "enyo-bootplate", 3 | "description": "An Enyo-based self contained template to build web applications using HTML, CSS and JavaScript.", 4 | "version": "2.5.3-pre.1", 5 | "homepage": "http://enyojs.com/", 6 | "bugs": "http://jira.enyojs.com/", 7 | "engines": { 8 | "node": ">=0.10.0" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/enyojs/bootplate.git" 13 | }, 14 | "maintainers": [ 15 | { 16 | "name": "Enyo JS Framework Team", 17 | "web": "http://enyojs.com/" 18 | } 19 | ], 20 | "licenses": [ 21 | { 22 | "type": "Apache-2.0", 23 | "url": "http://www.apache.org/licenses/LICENSE-2.0" 24 | } 25 | ], 26 | "devDependencies": { 27 | "grunt": "~0.4.5", 28 | "grunt-http-server": "~1.1.0", 29 | "grunt-contrib-clean": "~0.6.0", 30 | "grunt-contrib-jshint": "~0.10.0" 31 | }, 32 | "dependencies": {} 33 | } 34 | -------------------------------------------------------------------------------- /source/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | Define and instantiate your enyo.Application kind in this file. Note, 3 | application rendering should be deferred until DOM is ready by wrapping 4 | it in a call to enyo.ready(). 5 | */ 6 | 7 | enyo.kind({ 8 | name: "myapp.Application", 9 | kind: "enyo.Application", 10 | view: "myapp.MainView" 11 | }); 12 | 13 | enyo.ready(function () { 14 | new myapp.Application({name: "app"}); 15 | }); 16 | -------------------------------------------------------------------------------- /source/data/data.js: -------------------------------------------------------------------------------- 1 | /** 2 | For simple applications, you might define all of your models, collections, 3 | and sources in this file. For more complex applications, you might choose to separate 4 | these kind definitions into multiple files under this folder. 5 | */ -------------------------------------------------------------------------------- /source/data/package.js: -------------------------------------------------------------------------------- 1 | enyo.depends( 2 | "data.js" 3 | ); 4 | -------------------------------------------------------------------------------- /source/package.js: -------------------------------------------------------------------------------- 1 | enyo.depends( 2 | // Layout library 3 | "$lib/layout", 4 | // Onyx UI library 5 | "$lib/onyx", // To theme Onyx using Theme.less, change this line to $lib/onyx/source, 6 | // CSS/LESS style files 7 | "style", 8 | // Model and data definitions 9 | "data", 10 | // View kind definitions 11 | "views", 12 | // Include our default entry point 13 | "app.js" 14 | ); 15 | -------------------------------------------------------------------------------- /source/style/Theme.less: -------------------------------------------------------------------------------- 1 | /* 2 | You can modify the Onyx theme by adding variable and rule overrides to this 3 | file. To enable theming, follow these steps: 4 | 5 | 1. In source/package.js, change "$lib/onyx" to "$lib/onyx/source". 6 | 2. In source/style/package.js, add "Theme.less" (this file). 7 | 3. Add variable and rule overrides below. 8 | 9 | See [https://github.com/enyojs/enyo/wiki/UI-Theming] for more information. 10 | */ 11 | 12 | 13 | /* Onyx default variable definitions: */ 14 | @import "../../lib/onyx/css/onyx-variables.less"; 15 | 16 | /* Place your Onyx variable overrides here --------------- */ 17 | 18 | /* ------------------------------------- end variable overrides */ 19 | 20 | /* Onyx rule definitions: */ 21 | @import "../../lib/onyx/css/onyx-rules.less"; 22 | 23 | /* Place your Onyx rule overrides here ------------------- */ 24 | 25 | /* ----------------------------------------- end rule overrides */ 26 | -------------------------------------------------------------------------------- /source/style/main.less: -------------------------------------------------------------------------------- 1 | /* 2 | + App-specific LESS/CSS would go here, but to make your 3 | + application easier to maintain, you should try to 4 | + minimize the use of custom CSS. 5 | +*/ 6 | 7 | .main-view { 8 | } -------------------------------------------------------------------------------- /source/style/package.js: -------------------------------------------------------------------------------- 1 | enyo.depends( 2 | //"Theme.less", // To theme Onyx, uncomment this line, and follow the steps described in Theme.less 3 | "main.less" 4 | ); 5 | -------------------------------------------------------------------------------- /source/views/package.js: -------------------------------------------------------------------------------- 1 | enyo.depends( 2 | "views.js" 3 | ); 4 | -------------------------------------------------------------------------------- /source/views/views.js: -------------------------------------------------------------------------------- 1 | /** 2 | For simple applications, you might define all of your views in this file. 3 | For more complex applications, you might choose to separate these kind definitions 4 | into multiple files under this folder. 5 | */ 6 | 7 | enyo.kind({ 8 | name: "myapp.MainView", 9 | kind: "FittableRows", 10 | fit: true, 11 | components:[ 12 | {kind: "onyx.Toolbar", content: "Hello World"}, 13 | {kind: "enyo.Scroller", fit: true, components: [ 14 | {name: "main", classes: "nice-padding", allowHtml: true} 15 | ]}, 16 | {kind: "onyx.Toolbar", components: [ 17 | {kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"} 18 | ]} 19 | ], 20 | helloWorldTap: function(inSender, inEvent) { 21 | this.$.main.addContent("The button was tapped.
"); 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /tasks/deploy.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Licensed to the Apache Software Foundation (ASF) under one 3 | * or more contributor license agreements. See the NOTICE file 4 | * distributed with this work for additional information 5 | * regarding copyright ownership. The ASF licenses this file 6 | * to you under the Apache License, Version 2.0 (the 7 | * "License"); you may not use this file except in compliance 8 | * with the License. You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, 13 | * software distributed under the License is distributed on an 14 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 15 | * KIND, either express or implied. See the License for the 16 | * specific language governing permissions and limitations 17 | * under the License. 18 | */ 19 | 20 | var SCRIPT_BAT = "tools/deploy.bat", 21 | SCRIPT_SH = "tools/deploy.sh"; 22 | 23 | var path = require("path"); 24 | var spawn = require("child_process").spawn; 25 | 26 | module.exports = function(grunt) { 27 | grunt.registerTask("deploy", "Builds and deploys the bootplate", function() { 28 | var done = this.async(); 29 | var cwd = process.cwd(); 30 | var child; 31 | if(process.platform.indexOf("win")===0) { 32 | child = spawn(process.env.COMSPEC || "cmd.exe", ["/c", path.join(cwd, SCRIPT_BAT)], {stdio: "inherit", cwd:cwd}); 33 | } else { 34 | child = spawn(process.env.SHELL || "sh", [path.join(cwd, SCRIPT_SH)], {stdio: "inherit", cwd:cwd}); 35 | } 36 | child.on("close", function(code) { 37 | if(code===0) { 38 | done(); 39 | } else { 40 | done(false); 41 | } 42 | }); 43 | }); 44 | } 45 | -------------------------------------------------------------------------------- /tools/deploy.bat: -------------------------------------------------------------------------------- 1 | @REM don't watch the sausage being made 2 | @ECHO OFF 3 | 4 | REM the folder this script is in (*/bootplate/tools) 5 | SET TOOLS=%~DP0 6 | 7 | REM application source location 8 | SET SRC=%TOOLS%.. 9 | 10 | REM enyo location 11 | SET ENYO=%SRC%\enyo 12 | 13 | REM deploy script location 14 | SET DEPLOY=%ENYO%\tools\deploy.js 15 | 16 | REM node location 17 | SET NODE=node.exe 18 | 19 | REM use node to invoke deploy.js with imported parameters 20 | ECHO %NODE% "%DEPLOY%" -T -s "%SRC%" -o "%SRC%\deploy" %* 21 | %NODE% "%DEPLOY%" -T -s "%SRC%" -o "%SRC%\deploy" %* 22 | IF ERRORLEVEL 1 GOTO err 23 | 24 | REM copy files and package if deploying to cordova webos 25 | :again 26 | if not "%1" == "" ( 27 | 28 | if "%1" == "--cordova-webos" ( 29 | REM copy appinfo.json and cordova*.js files 30 | for %%A in ("%~dp0./..") do SET DEST=%TOOLS%..\deploy\%%~nA 31 | copy %SRC%\appinfo.json %DEST% 32 | IF ERRORLEVEL 1 GOTO err 33 | copy %SRC%\cordova*.js %DEST% 34 | IF ERRORLEVEL 1 GOTO err 35 | 36 | REM package it up 37 | if not exist %SRC%\bin mkdir %SRC%\bin 38 | palm-package.bat %DEST% --outdir=%SRC%\bin 39 | ) 40 | 41 | shift 42 | goto again 43 | ) 44 | 45 | goto done 46 | 47 | :err 48 | ECHO Deploy encountered errors. 49 | EXIT /B 1 50 | 51 | :done 52 | -------------------------------------------------------------------------------- /tools/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Alert the user of a failed build 4 | errored () { 5 | errcode=$? 6 | echo "Deploy encountered errors." 7 | exit $errcode 8 | } 9 | 10 | trap errored ERR 11 | 12 | # the folder this script is in (*/bootplate/tools) 13 | TOOLS=$(cd `dirname $0` && pwd) 14 | 15 | # application root 16 | SRC="$TOOLS/.." 17 | 18 | # enyo location 19 | ENYO="$SRC/enyo" 20 | 21 | # deploy script location 22 | DEPLOY="$ENYO/tools/deploy.js" 23 | 24 | # check for node, but quietly 25 | if command -v node >/dev/null 2>&1; then 26 | # use node to invoke deploy with imported parameters 27 | echo "node $DEPLOY -T -s $SRC -o $SRC/deploy $@" 28 | node "$DEPLOY" -T -s "$SRC" -o "$SRC/deploy" $@ 29 | else 30 | echo "No node found in path" 31 | exit 1 32 | fi 33 | 34 | # copy files and package if deploying to cordova webos 35 | while [ "$1" != "" ]; do 36 | case $1 in 37 | -w | --cordova-webos ) 38 | # copy appinfo.json and cordova*.js files 39 | DEST="$TOOLS/../deploy/"${PWD##*/} 40 | 41 | cp "$SRC"/appinfo.json "$DEST" -v 42 | cp "$SRC"/cordova*.js "$DEST" -v 43 | 44 | # package it up 45 | mkdir -p "$DEST/bin" 46 | palm-package "$DEST/bin" 47 | ;; 48 | esac 49 | shift 50 | done 51 | --------------------------------------------------------------------------------