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
BlackBerry Development Advisor
anzor_b
Posts: 164
Registered: ‎09-24-2012
My Device: White BlackBerry 10
My Carrier: Bell

KB: How to set up the viewport for BB10 WebWorks Applications.

Good read on how to set up the viewport when developing applications for high density displays such as the one on  the BB10 Dev Alpha.

 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...

 

Let me know if you have any questions.

Please use plain text.
Developer
urbanglowcam
Posts: 148
Registered: ‎10-30-2010
My Device: Bold 9930
My Carrier: Verizon

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

It's a great link that did help with the script that was placed in my test app. There are a few issues I'm seeing though.

 

1. Looking at the ui guidelines relating to typography (https://developer.blackberry.com/devzone/design/typography.html), I've tried keeping my app consistent with that. The issue is that using the pt unit shows the text to be extremely small on the dev alpha. When I use the comparable px units (i.e. 54px vs 11pt), the text looks just right. That's fine and all but it's bothering me that I can't get the pt units to work as I'd imagine it should.

 

2. When linking to two different stylesheets, the Dev Alpha always seems to link to the playBook.css. I could be missing something, but shouldn't it link to the devAlpha.css?

 

 

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1)" href="css/playbook.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.2437500953674316)" href="css/devAlpha.css" />

 

Thanks

Please use plain text.
BlackBerry Development Advisor
anzor_b
Posts: 164
Registered: ‎09-24-2012
My Device: White BlackBerry 10
My Carrier: Bell

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

[ Edited ]

Hi urbanglowcam,

 

1. Points are more tailored for print rather than screen and results will  vary depending on resolution and screen density. For best results, I suggest using pixel measurements described in UI guidelines. More on different measurements here: http://css-tricks.com/css-font-size/. I am looking into getting this updated from the documentation perspective.

 

2. If you are looking under Web Inspector (network tab), both files will be fetched, but only the styles from the matched pixel-ratio (devAlpha.css) should be applied. This will only work along with the meta script I described because that allows the device to return the native pixel ratio rather than CSS pixel-ratio. You can also check which style (and file) is applied by highlighting an item under the "Elements" tab in Web Inspector.

Please use plain text.
Developer
urbanglowcam
Posts: 148
Registered: ‎10-30-2010
My Device: Bold 9930
My Carrier: Verizon

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

Thanks Anzor.

 

1. Yeah, I'm familiar with the different type units and usually use pixels, but with the bb10 typography guidelines mentioning standard font sizes in points, I assumed that we could work with them (i.e. 11pt, 8pt, 6pt, etc.). Otherwise, shouldn't they just list them in pixels?

 

"BlackBerry 10 uses four font weights (medium, regular, light, and light italic) and five font sizes (point size 5, 6, 8, 11, and 14). The leading is set to 20% greater than the font size."

 

I guess with pixels working just fine for me, I will stick with that. I was just a little confused, that's all.

 

2. I realized what the issue is here for me. I was wrong before and the dev alpha actually displays correctly with the stylesheet devAlpha.css. But the Ripple plug-in (using the dev alpha mode) emulates the app with the Playbook.css stylesheet attached. Once the .bar is packaged and launched though (on the actual dev alpha), it points to the devAlpha.css. Is this a bug with Ripple?

Please use plain text.
BlackBerry Development Advisor
anzor_b
Posts: 164
Registered: ‎09-24-2012
My Device: White BlackBerry 10
My Carrier: Bell

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

1. Our apologies for the confusion; the UI guidelines were designed with Cascades (primarily) in mind and I am currently working on getting them aligned with WebWorks.

 

2. It seems that Ripple UI returns a devicePixelRatio of 1, which is why the work-around does not function. I have logged a new issue regarding this here: https://github.com/blackberry/Ripple-UI/issues/606

Please use plain text.
Developer
urbanglowcam
Posts: 148
Registered: ‎10-30-2010
My Device: Bold 9930
My Carrier: Verizon

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

Okay. Just making sure I wasn't doing something incorrectly there since I'm a little new with app development and coming from a web/graphic design background.

Thanks so much for the help. I'm really enjoying developing for BB10. :smileyhappy:
Please use plain text.
New Contributor
ahrepost
Posts: 4
Registered: ‎07-17-2012
My Device: BB10 DA
My Carrier: XL AXIATA

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

[ Edited ]

hi..

i have question regarding viewport.

i want to be able to zoom in-out on an <iframe> but how can i prevent the action bar from zooming?

my code:

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

<div>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />

<iframe width="768" height="1280" src="http://blackberry.com" scrolling="yes" ></iframe>
</meta>
</div>

<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>

 

 

thanks

Please use plain text.
BlackBerry Development Advisor
anzor_b
Posts: 164
Registered: ‎09-24-2012
My Device: White BlackBerry 10
My Carrier: Bell

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

hi ahrepost,

 

My apologies for the delay.

 

iframe will definitely work, you just have to include the meta tag in the <head> of the html document (not in the body like you have it).

 

Note: make sure you give the iframe style="border:0", because I noticed there's a border of 2 px automatically applied to iframes and this causes scrolling of the whole app.

 

Here's the code:

 

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style>
		body,html{
			margin:0;
			padding:0;
		}
		iframe {
			border: 0;
		}
		footer{
			position:fixed;
			bottom:0px;
			height:100px;
			width:100%;
			background:white;
			z-index:4;
		}
		</style>
  </head>
  <body>
  	<iframe width="100%" height="100%" src="http://blackberry.com" scrolling="yes" ></iframe>
	<footer></footer>
  </body>
</html>

 

 

Please use plain text.
New Contributor
ahrepost
Posts: 4
Registered: ‎07-17-2012
My Device: BB10 DA
My Carrier: XL AXIATA

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

@anzor, thank you for the reply

 

I think you misunderstood my question :smileyhappy:

 

i want to set user-scalable=yes, so i can zoom in / out but i need the action-bar with fixed size & position

 

so far the action-bar also got zoomed whenever i zoom in/out on the screen

 

screen:

 

 

on zoom:

 

is there a way to prevent this?

 

thanks

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: KB: How to set up the viewport for BB10 WebWorks Applications.

This is a situation where you can't really have your cake and eat it too. The viewport setting just don't allow for it.

 

You'll likely want to use a JS toolkit something like hammer.js that gives you pinch to zoom gestures.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.