Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Member
Posts: 1
Registered: ‎07-07-2012
My Device: Curve 9220
My Carrier: Vodafone

Navigation not working.

Dear all,

I made an app with a <input> button which when clicked invokes javascript and tells whether the coin was heads or tails.

 

Here is the config.xml file:

 

<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.0">
<name>Toss</name>
<author>Anay Awasthi</author>
<description>
A sample application that let's you decide who's gonna pay the bill this time.
</description>
<feature id="blackberry.system" required="true" version="1.0.0.0" />
<feature id="blackberry.app" required="true" version="1.0.0.0" />
<feature id="blackberry.ui.dialog" />
<access subdomains="true" uri="*" />
<icon rim:hover="false" src="icon.png" />
<icon rim:hover="true" src="icon.png" />
<rim:navigation mode="focus"/>
<content src="index.html" />
</widget>

 

Here is the index.html file:

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css" />
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<b>This is the first<br />
app I have made for BlackBerry.<br/>
Thank you for checking it out Smiley Happy <br />
Press the trackpad/trackball button to flip the coin.<br /></b><br /><br />
<input class="a" type="button" value="Hit the button!" onclick="return toss()" />
</body>
</html>

 

Here is the action.js file:

 

function toss(){
var a=Math.floor((Math.random()*2)+1);
if(a==1)
alert("Heads");
else
alert("Tails");
}

 

Here is the layout.css file:

 

body {
background-color: white;
color: green;
font-weight: normal;
font-family: Courier,sans-serif;
text-align:center;
}
input.a{
text-decoration:none;
color:green;
}
input.a:hover{
text-decoration:underline;
color:white;
background-color:blue;
}

 

However, when I tried this in Ripple, the hover thing worked but on my BB Curve 9220(OS 7.1), it didn't work. Please help. I want to use trackpad to navigate in app instead of mouse.

 

Thanks,

Anay.

Developer
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900
My Carrier: Rogers

Re: Navigation not working.

You need to add:  x-blackberry-focusable="true"

 

<input class="a" type="button" value="Hit the button!" onclick="return toss()" x-blackberry-focusable="true" /> 

 

(Source: https://developer.blackberry.com/html5/apis/blackberry.focus.html)

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Developer
Posts: 314
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: Navigation not working.

[ Edited ]

Hi Anayawasthi,

 

Although I'm not 100% sure, I'm afraid it is not that simple.

Check this document on how to use focus-based navigation: https://developer.blackberry.com/html5/documentation/ww_developing/using_the_navigation_mode_1866978...

It seems you have to bind the onmouseover events to functions that will (un)highlight the items. There is example code in there too.

 

Suggestion: check the bbUI.js project, which takes care of all this for you and even allows you to create cool native-looking interfaces quickly and easily.

Nuno