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
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

I have a developed a Live TV app for BlackBerry and want to publish. but Iam struck with How to give the screen area , application specifications like padding and distance etc.

I have a developed a Live TV app for BlackBerry and want to publish. but Iam struck with How to give the screen area , application specifications like padding and distance etc.

 

 

 

Please guide me where will I  get the specifiactions   of BlackBerry 7.0 OS mobiles     from ?

 

 

My present .js       code i s  as below

 

 

generateHTMLMarkup: function(i, channel){

var str ="";
str += "<div class='ui-category-list-item-title-for-Global-Takeof'\">";
str += "<img class='img-for-Global-Takeof' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\">" + channel['name'] + "</a>" + "</div>";
str += "<div class='ui-list-item'>"+ "link: " + "<a href=\""+ channel['link']+"\">Start video</a> </div>";

return str;

},

 

 

 

 

and index.html is as below

 

 

 

 

 

</script>
</head>
<body onload="xmlDataSource.init();">
<div class="ui-page">
<!-- header -->
<div class="ui-header" id='test'>
<table class="header_table" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header_table_td_height"><div class='ui-title'><h2>MyTV</h2></div></td>
</tr>
</table>
</div>
<div class="ui-content">

<div class="ui-category-list" id="accordian">

</div>
</div>
</div>
</body>
</html>

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: I have a developed a Live TV app for BlackBerry and want to publish. but Iam struck with How to give the screen area , application specifications like padding and distance etc.

If, as suggested, you're using this for your viewport...

 

    <script>
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(meta);
   </script>

Then screen pixels are the same as the resolution of the device

 

This means...

 

    var wh = window.innerHeight;
    var ww = window.innerWidth;

... are going to be 1280 + 768 on a Z10 / DA - if you fix landscape mode then the numbers will swap over (which is probably what you want)

 

Now - create a holding are for your app

 

<div id="myApp">

    <!-- Main HTML lives here -->

</div>

 

Assuming landscape - it makes sense your your app we can now set ...

 

$('#myApp').width(ww);

$('#myApp').height(wh);

 

You need to know how big space the stuff you're displaying is - I take it you have those numbers - lets call them aw + ah (app width + height)

 

$('#myApp').css('box-sizing', 'border-box');

$('#myApp').css('margin-left', ((ww - aw) / 2) );

$('#myApp').css('margin-top', ((wh - ah) / 2) );

 
This should stick your app in the middle of the display - put a background-image on #myApp to make it look nicer...

 

 




Click the like button if you find my posts useful!
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I have a developed a Live TV app for BlackBerry and want to publish

 

Actually Iam working presently BlackBerry 7.0 OS mobiles  and in future for Z10 ,Q10 etc.

  

Can u give a example where all these codes are implemnted. Where can I get them.

 

I want to put a Back ground image too

 

 

You are right I want to keep sticking my app in  the middle of the display.

  

 

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: I have a developed a Live TV app for BlackBerry and want to publish

[ Edited ]

Had an example already it took 5 mins to tidy.

 

I've added a better meta tag injector I wrote this morning as well

 

This will stick a red box in the middle of a green box - if you open it in a browser it'll stay put in the middle (scroll occurs if browser < 512 x 288)

 

 

<!DOCTYPE>
<head>

<script type="text/javascript">
	var isbb=navigator.userAgent.match(/BB10|PlayBook/i);
	var isdesktop=navigator.platform.match(/MacIntel|Win32|Win64/i);
	var dpr = false;
	
	if(typeof window.devicePixelRatio != 'undefined')
		{
		dpr = window.devicePixelRatio;
		}
	
	if(!isdesktop)
		{
		var meta = document.createElement("meta");
		meta.setAttribute('name','viewport');
		if(dpr)
			{
			meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
			}
		else
			{
			meta.setAttribute('content','user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-height,width=device-height');
			}
		document.getElementsByTagName('head')[0].appendChild(meta);
		}
</script>

<style>
html,body {
	margin:0;
	padding:0;
	height:100%;
	font-family:arial,sans-serif;
	background-color: #EEEEEE;
	}
</style>

<script type="text/javascript" src="script/jquery.js"></script>

<script type="text/javascript">

function resize()
	{
	var wh = window.innerHeight;
    var ww = window.innerWidth;

	var aw = 512; // Dummy size for the app
	var ah = 266; // This is a 16:9 area 512px wide
	
	$('#myApp').width(ww);
	$('#myApp').height(wh);

	$('#theRealApp').width(aw);
	$('#theRealApp').height(ah);

	$('#myApp').css('box-sizing', 'border-box');
	$('#myApp').css('padding-left', ((ww - aw) / 2) );
	$('#myApp').css('padding-top', ((wh - ah) / 2) );
	}
	
window.onresize = resize;
	
$(document).ready(function() {
	resize();
	});

</script>

</head>
<body>
<div id="myApp" style="background-color: green;">

  <div id="theRealApp" style="background-color: red;">
    <!-- the actual app -->
  </div>

</div>
<body>

 




Click the like button if you find my posts useful!
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I have a developed a Live TV app for BlackBerry and want to publish

But will it work for mobiles like Bb 9810 , 9860 i.e 7.0 OS mobiles 

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: I have a developed a Live TV app for BlackBerry and want to publish

Compile the test and see what happens

 

BB7 have pretty good browsers do it's likely

 

Not sure if they support box-sizing

 

It'll either work or it'll need tweaking

 

I last did stuff like this on BB7 a year + half ago

 




Click the like button if you find my posts useful!
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I have a developed a Live TV app for BlackBerry and want to publish

Ok can you give me the screen area specifiactions   etc for the BB 7.0 OS mobiles.

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: I have a developed a Live TV app for BlackBerry and want to publish

Do what I did - look it up

 

Wikipaedia has a load of basic specs




Click the like button if you find my posts useful!
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I have a developed a Live TV app for BlackBerry and want to publish

Ok tried ur code but     my code is like    

 

<script type="text/javascript">

function toBrowser(){
var args = new blackberry.invoke.BrowserArguments(URL');
blackberry.invoke.invoke(blackberry.invoke.APP_BROWSER, args);
}
</script>
</head>
<body onload="xmlDataSource.init();">
<div class="ui-page">
<!-- header -->
<div class="ui-header" id='test'>
<table class="header_table" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header_table_td_height"><div class='ui-title'><h2>YTV</h2></div></td>
</tr>
</table>
</div>
<div class="ui-content">

<div class="ui-category-list" id="accordian">

</div>
</div>
</div>
</body>
</html>

 

 

screenshot eroor.png

 

If I insert ur code and   eecute I am getting the following output as in the attachment i.e screenshot

 

Please     guide where I have to input ur code       given exactly

Highlighted
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I have a developed a Live TV app for BlackBerry and want to publish

Ok your code is working now


But I want my Total App to use the display or screen area totaly and in balanced way.


My App displays the languages list at the clik of the app icon at the start.

Note: But the languages list is not occupying the complete screen area.See that uses total display area in balanced way


In the second screen


Note: I want the channel name or title to be shown beside or adjacent to the channel image

 

my code is in .js is

 

generateHTMLMarkup: function(i, channel){

var str ="";
str += "<div class='ui-category-list-item-title-for-Globe\">";
str += "<img class='img-for-globef' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\">" + channel['name'] + "</a>" + "</div>";
str += "<div class='ui-list-item'>"+ "link: " + "<a href=\""+ channel['link']+"\">Start video</a> </div>";

return str;
},

 

Please seemy screenshots clearly

 

 

1st screen     and 2nd screen.

 

 

 

1st screen1st screen.jpg2ns screen.jpg

2nd screen