Skip to content
This repository has been archived by the owner on Sep 4, 2019. It is now read-only.

DojoAppDetails sample for BB10 #9

Merged
merged 2 commits into from Sep 18, 2012
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
63 changes: 63 additions & 0 deletions DojoAppDetails/README.md
@@ -0,0 +1,63 @@
# Dojo Sample Application

This application shows the markup for creating a simple Dojo application to view app details based on the app's WebWorks config.xml file

The sample code for this application is Open Source under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0.html).


**Applies To**

* [BlackBerry WebWorks SDK for BB10](https://developer.blackberry.com/html5/)


**Author(s)**

* Michelle Mendoza


**Dependencies**

* When running the application on a device, to access Dojo toolkit resources, the device must have an internet connection

**Known Issues**

* When using the Ripple Emulator, a Chrome Console log error is shown: "Uncaught Error: undefinedModule". This is due to Dojo trying to load Ripple's "ripple/bootstrap" since it follows the same Dojo syntax for loading legacy modules e.g. require("ripple/bootstrap")

**Tested On**
* BlackBerry 10 Dev Alpha 10.0.6.671

**To contribute code to this repository you must be [signed up as an official contributor](http://blackberry.github.com/howToContribute.html).**

## How to Build

To build the DojoAppDetails sample application:

1. Click on the **Downloads** tab above.
2. Select **Download as zip** (Windows) or **Download as tar.gz** (Mac) and save the downloaded file to your local machine.
3. Create a new folder on your local machine named **DojoAppDetails** e.g. **C:\Documents and Settings\User\WebWorks\DojoAppDetails** (Windows) or **~/WebWorks/DojoAppDetails** (Mac).
4. Open the downloaded ZIP file from step 2 and extract the contents **from inside the zipped DojoAppDetails folder** to your local **DojoAppDetails** folder from step 3. This ensures that the necessary application assets, such as **config.xml**, are correctly located at the top level of the local **DojoAppDetails** folder (e.g. **~/WebWorks/DojoAppDetails/config.xml**).
5. Copy the webworks-<version>.js client file from **C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK <version>\Framework\clientFiles** (Windows) or **~/SDKs/BlackBerry 10 WebWorks SDK <version>/Framework/clientFiles** (Mac) into the top level of the local **DojoAppDetails** folder (e.g. **~/WebWorks/DojoAppDetails/webworks-<version>.js**).
6. Optional: Edit the script reference to the webworks-<version>.js file within any *.html files to ensure the version number is correct.
7. Using the **[Ripple Mobile Emulator](http://developer.blackberry.com/html5/download)** and the **[BlackBerry WebWorks SDK for BB10](http://developer.blackberry.com/html5/download)**, package the contents of your local **DojoAppDetails** folder into a BlackBerry application. Enter the project root settings field as the local folder created in step 3, and the archive name settings field as **DojoAppDetails**.


## More Info

* [BlackBerry HTML5 WebWorks](https://bdsc.webapps.blackberry.com/html5/) - Downloads, Getting Started guides, samples, code signing keys.
* [BlackBerry WebWorks Development Guides](https://bdsc.webapps.blackberry.com/html5/documentation)
* [BlackBerry WebWorks Community Forums](http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/bd-p/browser_dev)
* [BlackBerry Open Source WebWorks Contributions Forums](http://supportforums.blackberry.com/t5/BlackBerry-WebWorks/bd-p/ww_con)

## Contributing Changes

Please see the [README](https://github.com/blackberry/WebWorks-Samples) of the WebWorks-Samples repository for instructions on how to add new Samples or make modifications to existing Samples.


## Bug Reporting and Feature Requests

If you find a bug in a Sample, or have an enhancement request, simply file an [Issue](https://github.com/blackberry/WebWorks-Samples/issues) for the Sample and send a message (via github messages) to the Sample Author(s) to let them know that you have filed an [Issue](https://github.com/blackberry/WebWorks-Samples/issues).


## Disclaimer

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
29 changes: 29 additions & 0 deletions DojoAppDetails/config.xml
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
* Copyright 2012 Research In Motion Limited.
*
* Licensed 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.
-->
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.0" id="DojoAppDetails" xml:lang="en">
<author href="http://www.blackberry.com/"
rim:copyright="Copyright 2012 RIM">RIM</author>
<name>Dojo App Details</name>
<description>Sample Dojo app showing app details</description>

<access uri="http://ajax.googleapis.com" subdomains="true"/>
<content src="index.html"/>
<feature id="blackberry.app"/>

</widget>
60 changes: 60 additions & 0 deletions DojoAppDetails/index.html
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<!--
* Copyright 2012 Research In Motion Limited.
*
* Licensed 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>
<title>Dojo App Details</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Webworks JS must be loaded before any Dojo -->
<!--
Include BlackBerry 10 WebWorks JavaScript framework file.
When doing an SDK upgrade, always make sure you grab the latest from the SDK/Framework/clientFiles folder.
-->
<script src="webworks-1.0.1.5.js"></script>

<!-- async mode must be included BEFORE the dojo loader (dojo.js) -->
<script data-dojo-config="async:true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" ></script>

<!-- Any other scripts needed -->
<script src="js/dojoAppDetails.js"></script>

</head>
<body>

<!-- Main Page -->
<div id="general" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading">General</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo:'aboutView', transition:'fade'">
About
</li>
</ul>
</div>

<!-- About the app -->
<div id="aboutView" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'General', moveTo:'general'">About</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">App Details</h2>
<div id="appDetailsDiv" data-dojo-type="dojox.mobile.RoundRect">
</div>
</div>

<!-- Loading screen to ensure the page is formatted and all resources have been loaded -->
<div id="loadingScreen" style="position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:#FFFFFF;z-index:999;display:block;text-align:center;">Loading...</div>

</body>
</html>
79 changes: 79 additions & 0 deletions DojoAppDetails/js/dojoAppDetails.js
@@ -0,0 +1,79 @@
/* Copyright 2012 Research In Motion Limited.
*
* Licensed 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.
*/

function startDojo(){

require([
"dojox/mobile/parser", // lightweight parser for mobile apps
"dojox/mobile", // mobile application
"dojox/mobile/deviceTheme", // using user-agent, loads appropriate theme
"dojox/mobile/View" // use the View widget to represent the device screen
],
function(parser) {
// Parse the page for widgets and get them instantiated
parser.parse();
});

/*
dojo/ready registers a function to run when the DOM is ready and
all outstanding require() calls have been resolved
when working with widgets, dojo/ready should be used instead of domReady!

http://dojotoolkit.org/reference-guide/1.8/dojo/ready.html#dojo-ready
http://dojotoolkit.org/reference-guide/1.8/dojo/domReady.html#dojo-domready
*/

require(["dojo/ready", "dojo/dom", "dojo/dom-style"],
function(ready, dom, domStyle){
ready(function(){
// use a timeout just to ensure the page is loaded and themed before showing it
setTimeout(function() {
var loadingScreen = dom.byId("loadingScreen");
domStyle.set(loadingScreen, "display", "none");
}, 2000);
});
});

} //end function startDojo()

function getAppDetails() {
// Create a table with the app details and change the contents of the containing element

if (window.blackberry !== undefined) {
try {
var output = "<table>";
output += "<tr><td><b>Author</td><td>" + blackberry.app.author + "</td></tr>";
output += "<tr><td><b>Name</b></td><td>" + blackberry.app.name + "</td></tr>";
output += "<tr><td><b>Version</b></td><td>" + blackberry.app.version + "</td></tr>";
output += "<tr><td><b>Copyright</b></td><td>" + blackberry.app.copyright + "</td></tr>";
output += "<tr><td><b>Description</b></td><td>" + blackberry.app.description + "</td></tr>";
output += "</table>";

require(["dojo/dom"], function (dom){
dom.byId("appDetailsDiv").innerHTML = output;
});

} catch(e) {
console.error("Exception in getAppDetails: " + e);
} // end try-catch
} // end if
} // end function getAppDetails()

function pageLoad(){
startDojo();
document.addEventListener("webworksready", getAppDetails, false);
}

window.addEventListener("load", pageLoad, false);