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
Posts: 43
Registered: ‎09-26-2011
My Device: Bold 9700
My Carrier: Generic

Ask - Creating layout in Blackberry Webwork

Hi all, 

 

when i'm design the first layout on web, im usually design in photoshop in certain sizw like 800px x 600px, or using css liquid to make my web layout support any kind of browser type, 

 

I wanna ask, in webwork, what should i do first to make layout that adjust any screen size of blackberry type, and make it full screen?

 

So much thanks, i need you all help please, :-)

Developer
Posts: 580
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: Ask - Creating layout in Blackberry Webwork

You can definetely take your existing web development/design skills and port them for use with the WebWorks API.

 

Set all these values to match the tablet specifications.
 

Screen Size

 

  • x - Change 800px by 600px 
  • o - to 1024px by 600px
    1024px by 600px is the standard size of the Playbook screen
     


Image Assets Resolution

Take advantage of the tablet's powerful rendering engine.  

 

  • Set your resolution to 169.3 PPI (Pixels Per Inch)

 

 

Center the layout or don't center the layout? I found that you don't center the layout. A tip would be to create a wrapper (see sample code snippet) with 1024 by 600px width/height.

<!-- styles-->
<script type="text/css">
#app{width:1024px; height:600px;}
</script>
</head>
....
<body>
<div id="app">
.... your app code, styles, layout etc
</div>
</body>
</html>

 

Default the styles, reset margins and padding. 

Set Viewport Meta Tag In Your Pages 

Set the standard viewport for the Playbook to ensure your app goes full screen.
 

<meta name="viewport"
      content="width=device-width,
      initial-scale=1.0,
      maximum-scale=1.0,
      user-scalable=no">

 

 Here are some additional resources to help you in your design

UI Guidelines - BlackBerry Playbook Tablet - 1.0 http://docs.blackberry.com/en/developers/deliverables/27299/Designing_applications_for_BlackBerry_ta...

WebWorks for Tablet API Reference

http://www.blackberry.com/developers/docs/webworks/api/?pb1.0

Develop Using the BlackBerry WebWorks SDK - Webcast Series (4)
These are extremely helpful to get you started.
http://webcast.streamlogics.com/audience/index.asp?eventid=49950807
 


Best of luck, and happy coding. :Clap:

Contributor
Posts: 43
Registered: ‎09-26-2011
My Device: Bold 9700
My Carrier: Generic

Re: Ask - Creating layout in Blackberry Webwork

my target device is for blackberry 9700 bold and torch 9800 sir, not the tablet, what should i to to setting up the layout that otomaticly suit that both blackberry screen size? thanks :smileyhappy: