Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added a hack example on how to add UI elements on the fly

  • Loading branch information...
commit e5100c604287104e98101a22bab26a1eb3ae57d5 1 parent 0b9b62b
Tim Neil authored
View
38 samples/dataOnTheFly.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
+<!--
+* Copyright 2010-2011 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.
+-->
+<div data-bb-type="screen" data-bb-effect="fade">
+ <div data-bb-type="title" data-bb-caption="[hack] Data on the Fly [/hack]" data-bb-back-caption="Menu" ></div>
+ <script id="dataOnTheFlyJS" src="js/dataOnTheFly.js"></script>
+ <style type="text/css">
+ body, html {
+ background-color: White;
+ }
+ </style>
+
+ <p align="center" style="color:orange;">This example shows you how to &quot;hack&quot; your way to adding UI elements on the fly. You can use as is, but it will be subject to change once a
+ permanent solution is in place</p>
+
+ <div id="buttonpanel" data-bb-type="round-panel">
+ <div data-bb-type="button" data-bb-style="stretch" onclick="dataOnTheFly_addListItem();" id="plain">Add List Item</div>
+ <div data-bb-type="button" data-bb-style="stretch" onclick="dataOnTheFly_addDropDown();" id="plain">Add DropDown</div>
+ </div>
+
+ <div id="dataList" data-bb-type="image-list">
+
+ </div>
+
+</div>
View
15 samples/js/dataOnLoad.js
@@ -1,3 +1,18 @@
+/*
+* Copyright 2010-2011 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 dataOnLoad_initialLoad(element) {
var listItem, dataList = element.getElementById('dataList');
View
59 samples/js/dataOnTheFly.js
@@ -0,0 +1,59 @@
+/*
+* Copyright 2010-2011 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 dataOnTheFly_addListItem() {
+ var listItem, container, dataList = document.getElementById('dataList');
+ // Create our list item
+ listItem = document.createElement('div');
+ listItem.setAttribute('data-bb-type', 'item');
+ listItem.setAttribute('data-bb-img', 'images/icons/icon11.png');
+ listItem.setAttribute('data-bb-title', 'Title ');
+ listItem.innerHTML = 'My description';
+ // Create a dummy container
+ container = document.createElement('div');
+ container.appendChild(listItem);
+ // Apply the styling
+ bb.imageList.apply([container]);
+ // Append the item
+ dataList.appendChild(container.firstChild);
+}
+
+function dataOnTheFly_addDropDown() {
+ var dropdown, option, buttonPanel = document.getElementById('buttonpanel');
+ // Create our list item
+ dropdown = document.createElement('select');
+ dropdown.setAttribute('data-bb-style', 'stretch');
+ option = document.createElement('option');
+ option.setAttribute('value','bbalphasans');
+ option.setAttribute('selected','true');
+ option.innerHTML = 'BBAlpha Sans';
+ dropdown.appendChild(option);
+ option = document.createElement('option');
+ option.setAttribute('value','arial');
+ option.innerHTML = 'Arial';
+ dropdown.appendChild(option);
+ option = document.createElement('option');
+ option.setAttribute('value','andalemono');
+ option.innerHTML = 'Andale Mono';
+ dropdown.appendChild(option);
+ // Create a dummy container
+ container = document.createElement('div');
+ container.appendChild(dropdown);
+ // Apply the styling
+ bb.dropdown.apply([dropdown]);
+ // Append the item
+ buttonPanel.appendChild(container);
+}
View
1  samples/menu.htm
@@ -34,6 +34,7 @@
<!--<div id="10" data-bb-type="item" onclick="bb.pushScreen('tabs.htm', 'tabs');" data-bb-img="images/icons/icon10.png" data-bb-title="Tab Controls">Use tabs to organize your data</div> -->
<div id="11" data-bb-type="item" onclick="bb.pushScreen('arrowList.htm', 'arrowList');" data-bb-img="images/icons/icon11.png" data-bb-title="Arrow List">Create a navigation list with arrows</div>
<div id="11" data-bb-type="item" onclick="bb.pushScreen('dataOnLoad.htm', 'dataOnLoad');" data-bb-img="images/icons/icon10.png" data-bb-title="Load Data">Dynamically load data when the screen opens</div>
+ <div id="11" data-bb-type="item" onclick="bb.pushScreen('dataOnTheFly.htm', 'dataOnTheFly');" data-bb-img="images/icons/icon3.png" data-bb-title="[hack] Data on the Fly [/hack]">Dynamically load data/UI after the screen loads</div>
</div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.