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
New Developer
Posts: 70
Registered: ‎01-13-2011
My Device: Torch 9800 and Playbook
My Carrier: Rogers

UI Toolkit in the Default Calculator, Will it Be Available for Developers

I'm watching the review on Engadget (http://www.engadget.com/2011/04/13/blackberry-playbook-review/) and I though the buttons and generaly UI on the calculator looked really clean. Assuming it's just images and CSS, any plans on making this available to developers?

 

In the past, I've wrote in this forum that existing mobile toolkits are enough, but I'm actually finding my tool (jQuery mobile) not a perfect fit for tablets. It'd be nice to pick and choose features, but buying into the whole toolkit is kind of painful because it's not meant for large devices.

Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

If I were the Director of the WebWorks department at RIM I'd make a BIG effort to create a full HTML5 widget set that looks EXACTLY like the native QNX controls. It can be done. It's not even hard. It's just quite a chunk of work.

 

Palm/HP have done the same. They have a full-blown widget toolkit resulting in all apps on the platform to have the same gorgeous look and feel. 

 

After finishing that widget set I'd create a solid UI guidelines document for developers in which I show how to create a good and consistent user interface with these widgets. It will make apps look good, even the ones made by developers who know very little about good UI design. Why? Because the tools are there and the guidelines are there.

 

Then I'd train the Test House reviewers to give developers feedback on how to apply the UI design principles correctly when they submit apps with an awkward user interface.

 

A consistent look and feel is an extremely important part of the success of an overall tablet experience. Apple nailed this first. HP/Palm followed suit. Android is a bloody mess in this respect and frankly, so is Tablet OS. Look around in AppWorld. There's many REALLY ugly apps out there. The users want pretty, shiny. They really do.

 

 

 

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

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

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

We have been working with the popular toolkits and frameworks (jQuery, Dojo, Sencha) to bring a BlackBerry look and feel option to their frameworks.

 

We really would rather provide this type of styling by working with our partners vs. creating our own toolkit.  That way the styling is simply an option in a popular toolkit used today.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Developer
Posts: 70
Registered: ‎01-13-2011
My Device: Torch 9800 and Playbook
My Carrier: Rogers

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

I like the idea of a jquery mobile style via theme roller, but don't forget there's also layout issues. After building a tablet app with jquery mobile the most painful part was putting multiple controls on on line. I found that particular framework optimized for really narrow screens.
Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

Yes it definitely seems mosty made for narrow screens in portrait mode.

 

tneil while a QNX look for one or more of these frameworks is nice I doubt you'll ever get it behaving completely like the real thing. Problem is, 'look' is one thing but there's also 'feel'. The widgets would need to not only look like QNX but also behave like QNX. And as pnewhook pointed out, a layout framework should also be part of this effort.

 

I do think it would be good to base everything on a common well-known core JS library. Making something based on JQuery itself (the library, not JQuery Mobile) would definitely be a good idea and save a lot of time. It would also make it easier for developers to adopt the toolset because many are already familiar with JQuery.

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

New Developer
Posts: 11
Registered: ‎01-25-2011
My Device: Not Specified

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

I struggled with jquery mobile for a few weeks before abandoning it because of their lack of documentation and tutorials.  It just wasn't ready yet, at least for my limited level of experience.  Someone with more know how could probably hook things up faster, but I was digging into their example page source code to see how things actually worked instead of just reading a bloomin' document.

 

Still watching the field to see if something pops up.

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

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

[ Edited ]

I think it should be up to individual developers to take the time and make certain decisions that affect the look/feel/function and therefore appeal of their application. Cookie cutter buttons? No thank you.

 

Guidance For Creating Buttons that look like Native Calculator App

  • You can easily use gradients, shadows, colors, opacity to achieve the same button effect. CSS3 is fully supported for PlayBook using WebWorks SDK. 
  • There is also the option of using an image sprite. Create one sprite for all your assets.

 

I also believe that RIM released UI Guidelines in Part 4 of the WebWorks SDK Series. Please review.



Re: jQuery Mobile


Use the standard jQuery library http://www.jquery.com !!! vs jQuery Mobile http://www.jquerymobile.com. It will make your life so much easier. :Cool2:

 

Hope that helps.

Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

Standard JQuery and JQuery mobile are two entirely different beasts.

 

JQuery is a core JS library. JQuery Mobile is a suite of UI components built on top of what you call 'Standard JQuery'.

I don't agree at all with your negative advice against JQuery Mobile. I use it in two of my apps and it's all working like a charm. And good looking too!

 

I'll take a look at the TAT calculator and try to reproduce the buttons in CSS. It's indeed very well possible.

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

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

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

@TheMarco. Your applications look AWESOME. Didn't know you were using jQuery Mobile. +1
jQuery Mobile & jQuery Standard have their advantages and disadvantages. 

When I first started developing UI components for one of my apps, I also had a difficult time with figuring out how something would look like. I like to hammer out function first. Then think about end-user experience, and finally create assets to style the UI.

Why not....

Just make it simple.

Maximize utility.

Enhance the end-user experience with touchEvents.

Incorporate platform APIs

Do you really need 30 features and 1000 menu options?

Think about it....

Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: UI Toolkit in the Default Calculator, Will it Be Available for Developers

Here's my quick 10 minute take at TAT-calculator style buttons.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Marco van Hylckama Vlieg">
	<!-- Date: 2011-04-15 -->
	<style>
	
	body {
		background-color: #414141;
	}
	
	.tatbutton {
		font-family: "DejaVu Sans" Helvetica, Arial, sans-serif;
		font-weight: bold;
		font-size: 20px;
		border: 2px #1f1e1c solid;
		-webkit-border-radius: 4px;
		width:45px;
		height:40px;
		-webkit-box-shadow: 0px 1px 1px #999;
		margin: 10px;
	}
	.tatbutton span {
		display: table-cell;
		text-align: center;
		align: center;
		vertical-align: middle;
		width:43px;
		height:38px;
		-webkit-border-radius: 3px;
	}
	.tatbutton.grey {
		text-shadow: 0px 1px 1px #fff;
		color: #363636;
	}
	.tatbutton.grey span {
		background-image: -webkit-gradient(
		    linear,
		    left bottom,
		    left top,
		    color-stop(1, rgb(217,217,217)),
		    color-stop(0.37, rgb(166,166,166))
		);
		border: 1px #b2b2b2 solid;
	}
	.tatbutton.darkgrey {
		text-shadow: 0px 1px 1px #fff;
		color: #363636;
	}
	.tatbutton.darkgrey span {
		background-image: -webkit-gradient(
		    linear,
		    left bottom,
		    left top,
		    color-stop(1, rgb(164,164,164)),
		    color-stop(0.37, rgb(125,125,125))
		);
		border: 1px #a1a1a1 solid;
	}
	.tatbutton.blue {
		text-shadow: 0px 0px 2px #05252e;
		color: #c0ebed;
	}
	.tatbutton.blue span {
		font-weight: normal;
		font-size: 16px;
		background-image: -webkit-gradient(
		    linear,
		    left bottom,
		    left top,
		    color-stop(1, rgb(65,142,163)),
		    color-stop(0.37, rgb(11,100,132))
		);
		border: 1px #5f95a5 solid;
	}
	.tatbutton.red {
		text-shadow: 0px 0px 2px #05252e;
		color: #c0ebed;
	}
	.tatbutton.red span {
		font-weight: normal;
		font-size: 16px;
		background-image: -webkit-gradient(
		    linear,
		    left bottom,
		    left top,
		    color-stop(1, rgb(210,107,68)),
		    color-stop(0.37, rgb(184,50,20))
		);
		border: 1px #bf7d64 solid;
	}
	</style>
</head>
<body>

<div class="tatbutton grey"><span>1</span></div>
<div class="tatbutton darkgrey"><span>2</span></div>
<div class="tatbutton blue"><span>3</span></div>
<div class="tatbutton red"><span>4</span></div>

</body>
</html>

 

 

Looks like this:

 

Screen shot 2011-04-16 at 12.20.49 AM.png

 

For added coolness they should have some state change when tapped (make them lighter, darker, whatever) but I'll leave that up to your imagination.

 

Enjoy.

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App