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
Trusted Contributor
Posts: 202
Registered: ‎11-21-2010
My Device: 9700
My Carrier: Virgin Mobile

WebWorks Lists

how is a list done in html/webworks for playbook? i see a lot of apps that use lists, can tap on an item etc are these just div tags or select?
for example look at the news library list in bb news
Trusted Contributor
Posts: 227
Registered: ‎09-03-2010
My Device: Not Specified

Re: WebWorks Lists

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>

.list li {
	height:30px;
	background-color: #CCC;
	list-style:none;
	margin:5px;
}
.list li:hover{
	background-color:#FC0;
}
</style>
<body>

<ul class="list">
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
<li>Lista 4</li>
<li>Lista 5</li>
</ul>
</body>
</html>

 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: WebWorks Lists

I always just use a set of <div>'s that are styled and have onclick's assigned.

 

The PlayBook also has great scrolling ability on div's.. if you create a container div that has an overflow, the contents inside it will scroll.  So you can just place your "line item" <div>'s nested into the container div that has the overflow.. and voila.. you have a scrolling list of items.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Regular Contributor
Posts: 60
Registered: ‎03-07-2011
My Device: Not Specified

Re: WebWorks Lists

@tneil

Sorry to revive this older post, but it seems quite relevant.  I have searched the forums for help with scrolling of lists and have found consistent references to the great scrolling of the PlayBook.  My Playbook app generates comparatively simple dynamic lists from WebDB databases.  I have these lists generated inside some nested div elements.  The div which directly contains the list (we can call it the Container Div) has overflow set to auto.  The div that "contains" the Container Div also has overflow set to auto.  Yet, I can't seem to get the thing to scroll when I test it on the PB.

 

Any help would be greatly appreciated.

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: WebWorks Lists

Take a look at our bbUI.js project on github.  I just integrated in inertial/elsastic scrolling of screen content on PlayBook

 

https://github.com/blackberry/bbUI.js

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Highlighted
Regular Contributor
Posts: 60
Registered: ‎03-07-2011
My Device: Not Specified

Re: WebWorks Lists

Thanks for the suggestion.   I will check it out.

 

I did manage to get the lists to scroll, but the elastic/inertial scrolling will likely be even better.  Unfortunately, it seems as though Alice.js was the culprit.  I had initially removed it as a test a while back, but it didn't seem to help.  However, now that I have removed it again, the scrolling works.  I won't speak ill of Alice.js as I think it is a fantastic tool and I can't wait for it to mature  a bit more as I will happily incorporate it as soon as I can.

 

Thanks again tneil.