Hi there,
Based on the information, I created this sample application.
config.xml
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.0">
<name>Focus Navigation</name>
<content src="index.html"/>
<rim:navigation mode="focus" />
<feature id="blackberry.ui.dialog" />
</widget>
index.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
width: 100%;
}
.focus {
font-weight: bold;
}
</style>
</head>
<body>
<div class="title" x-blackberry-focusable="true">Div One</div>
<div class="title" x-blackberry-focusable="true">Div Two</div>
<div class="title" x-blackberry-focusable="true">Div Three</div>
<div class="title" x-blackberry-focusable="true">Div Four</div>
<div class="title" x-blackberry-focusable="true">Div Five</div>
<div class="title" x-blackberry-focusable="true">Div Six</div>
<div class="title" x-blackberry-focusable="true">Div Seven</div>
<div class="title" x-blackberry-focusable="true">Div Eight</div>
<div class="title" x-blackberry-focusable="true">Div Nine</div>
<div class="title" x-blackberry-focusable="true">Div Ten</div>
<div class="title" x-blackberry-focusable="true">Div Eleven</div>
<div class="title" x-blackberry-focusable="true">Div Twelve</div>
<div class="title" x-blackberry-focusable="true">Div Thirteen</div>
<div class="title" x-blackberry-focusable="true">Div Fourteen</div>
<div class="title" x-blackberry-focusable="true">Div Fifteen</div>
<script type="text/javascript">
/*global window, document, console */
/**
* The following section is from:
* http://www.avoid.org/?p=78
*
* Re-formatted to appease JSLint.
*/
function hasClass(el, name) {
"use strict";
return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
}
function addClass(el, name) {
"use strict";
if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') + name; }
}
function removeClass(el, name) {
"use strict";
if (hasClass(el, name)) {
el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
}
}
/** ********** */
function ready() {
"use strict";
var divs, index;
try {
window.removeEventListener("DOMContentLoaded", ready, false);
divs = document.querySelectorAll(".title");
console.log("Items: " + divs.length);
for (index = 0; index < divs.length; ++index) {
divs[index].onmouseover = function () {
addClass(this, "focus");
};
divs[index].onmouseout = function () {
removeClass(this, "focus");
};
}
} catch (err) {
console.log("ready: " + err);
}
}
window.addEventListener("DOMContentLoaded", ready, false);
</script>
</body>
</html>
I loaded this onto my test device; there was a slight delay ~3 seconds at the start while everything was loading, but once the app got going I did not see performance issues myself. Is there anything specific that I am missing in this sample?
Please note that I will be unavailable between May 19th and June 4th. Sincere apologies for any delays during this time. I will do my best to follow-up as soon as I am able.
Erik Oros
BlackBerry Development Advisor
@WaterlooErik
