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
Contributor
Drentz
Posts: 13
Registered: ‎05-10-2011
My Device: Blackberry 9550

Requesting Help w/ Grid List

HI. I am a blackberry enuthusiast and am in the process of self teaching, well, everything. Maybe it is a pipe dream but I have a BB10 App in mind that seems to be very straight forward. Using WebWorks and BBUI.js samples codes from github I am trying to create a grid list. When packaged and ran in the dev alpha simulator, when launched in the simulator I get a white screen, any suggestions on where i went wrong?

 

(sorry about the poor alignment on my code the cosy and past threw everything off)

 

 

<div data-bb-type="screen" data-bb-effect="fade">


		<div style="height:175px; width:550px; margin: 0px auto 0px auto;">
			<h1 style="height:12%; text-align:center; padding-top:3%;"> Assignment Assistant</h1>
		</div>
		
			<h2>Please choose a class below</h2>
			
			 <div data-bb-type="grid-layout" data-bb-header-justify="left" data-bb-header-style="solid">
      <div data-bb-type="group" data-bb-title="My Title">
          <div data-bb-type="row">
              <div data-bb-type="item" data-bb-img="nametag.png" data-bb-title="Splash">Please choose a class below</div>
          </div>
		  <div data-bb-type="group" data-bb-title="Your Core Four">
          <div data-bb-type="row">
              <div data-bb-type="item" data-bb-img="ela.png" data-bb-title="ela" onclick="bb.pushScreen('english.htm', 'english'););">Writing and literature</div> 
              <div data-bb-type="item" data-bb-img="math.png" data-bb-title="math" onclick="bb.pushScreen('math.htm', 'math');">Solving equations</div>
			  <div data-bb-type="item" data-bb-img="sci.png" data-bb-title="science" onclick="bb.pushScreen('science.htm', 'science');">Inquiry based studies</div>
			  <div data-bb-type="item" data-bb-img="history.png" data-bb-title="history" onclick="bb.pushScreen('history.htm', 'history');">Civilizations past to present</div>
          </div>
      </div>
	  <div data-bb-type="group" data-bb-title="Personal Endevores">
          <div data-bb-type="row">
              <div data-bb-type="item" data-bb-img="foreign.png" data-bb-title="foreign" onclick="bb.pushScreen ('foreign.htm', 'foreign');">Spoken around the world</div>		
              <div data-bb-type="item" data-bb-img="elective1.png" data-bb-title="elective1" onclick="bb.pushScreen ('elective1.htm', 'elective1');">Special interests</div> 
              <div data-bb-type="item" data-bb-img="elective2.png" data-bb-title="elective2" onclick="bb.pushScreen ('elective2.htm', 'elective2');">Special interests</div>
          </div>
      </div>
  </div>

 

Developer
colforbin13
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800

Re: Requesting Help w/ Grid List

You have an index.htm page that's initializing bbui and pushing the below screen onto it, right? 

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.
Contributor
Drentz
Posts: 13
Registered: ‎05-10-2011
My Device: Blackberry 9550

Re: Requesting Help w/ Grid List

Yes i do. this is what i have as my index file. The grid list is home.html. Did i do something wrong here?

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html> 
	<head>
		<meta name="x-blackberry-defaultHoverEffect" content="false" />
		<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
		<link  rel="stylesheet" type="text/css" href="bbui-0.9.2.css"><link />
		<script type="text/javascript" src="bbui-0.9.2.js"></script>
		<script type="text/javascript">
			bb.init();
		</script>
	</head>
	<body onload="bb.pushScreen('home.htm', 'home');">	
	</body>
</html>

 

Developer
colforbin13
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800

Re: Requesting Help w/ Grid List

Well, I didn't compile it to run in a simulator (can do it tomorrow if necessary), but your code looks like it's working for me in Ripple for the Dev Alpha.  I did find a few mismatched <div> elements, maybe the code below wil work in the simulator?  Do you have the config.xml set up properly according to this? https://github.com/blackberry/bbUI.js/wiki/Config.xml-Requirements

 

I also used bbui 0.9.3 which was just released a few hours ago - https://github.com/blackberry/bbUI.js

 

<div data-bb-type="screen" data-bb-effect="fade">
	<div style="height:175px; width:550px; margin: 0px auto 0px auto;">
  	<h1 style="height:12%; text-align:center; padding-top:3%;"> Assignment Assistant</h1>
	</div>
		<h2>Please choose a class below</h2>
	<div data-bb-type="grid-layout" data-bb-header-justify="left" data-bb-header-style="solid">
    <div data-bb-type="group" data-bb-title="My Title">
      <div data-bb-type="row">
        <div data-bb-type="item" data-bb-img="nametag.png" data-bb-title="Splash">Please choose a class below</div>
      </div>
    </div>
		<div data-bb-type="group" data-bb-title="Your Core Four">
      <div data-bb-type="row">
        <div data-bb-type="item" data-bb-img="ela.png" data-bb-title="ela" onclick="bb.pushScreen('english.htm', 'english'););">Writing and literature</div> 
        <div data-bb-type="item" data-bb-img="math.png" data-bb-title="math" onclick="bb.pushScreen('math.htm', 'math');">Solving equations</div>
        <div data-bb-type="item" data-bb-img="sci.png" data-bb-title="science" onclick="bb.pushScreen('science.htm', 'science');">Inquiry based studies</div>
        <div data-bb-type="item" data-bb-img="history.png" data-bb-title="history" onclick="bb.pushScreen('history.htm', 'history');">Civilizations past to present</div>
      </div>
    </div>
	  <div data-bb-type="group" data-bb-title="Personal Endevores">
      <div data-bb-type="row">
        <div data-bb-type="item" data-bb-img="foreign.png" data-bb-title="foreign" onclick="bb.pushScreen ('foreign.htm', 'foreign');">Spoken around the world</div>		
        <div data-bb-type="item" data-bb-img="elective1.png" data-bb-title="elective1" onclick="bb.pushScreen ('elective1.htm', 'elective1');">Special interests</div> 
        <div data-bb-type="item" data-bb-img="elective2.png" data-bb-title="elective2" onclick="bb.pushScreen ('elective2.htm', 'elective2');">Special interests</div>
      </div>
    </div>
  </div>
</div>

 

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.
Contributor
Drentz
Posts: 13
Registered: ‎05-10-2011
My Device: Blackberry 9550

Re: Requesting Help w/ Grid List

I tried to run it again on the simulator and got another white screen upon launch. I updated to the latest simulator and webworks sdk. I made the changes to the < div > tags, i also changed all of the bbui.js 0.9.2 to 0.9.3 in both the index and home.htm files. here is my config.xml code.  Once again if anyone can help it would greatly appreciated.

 

<?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" id="AssignmentApp">  
    <name>Assignment Assistant</name>
    <author>D. Rentz</author>
    <description>quick copy and retrive Homework Assignments</description>
    <icon src="images/nametag.png"/>
    <content src="index.html"/>
  
</widget>

 

Contributor
Drentz
Posts: 13
Registered: ‎05-10-2011
My Device: Blackberry 9550

Re: Requesting Help w/ Grid List

Anyone have any advice to correct this?