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

Native Development

Reply
Developer
billbsb
Posts: 144
Registered: ‎03-25-2011
My Device: Playbook, Z10 L.E.

[Feedback] Default Components Dimensions Specs

Hello BlackBerry Developer Community,

 

I bet many of you are having fun making applications with Cascades. At least I find myself enjoying it more than usual! It's hard to find such cool UI framework to work with. But sometimes, I also have some Cascades nightmares. Nothing is perfect, right?

 

But if we work hard together, we can get closer and closer to perfection until a point that we are so close, sooo close that it's considered perfection. And this is achievable! The more we use the tools, more problems and limitations will be found. The most important part in my opinion is providing a good feedback to BlackBerry regarding those bad experiences.

 

From my experience, after attending to two BlackBerry JAMs in Amsterdam and developing 3 BlackBerry apps, I can confirm that they do really listen to their developer community and even on a individual basis! Off course, not always but most of the time. That's the main reason I believe in BB10: knowing that BlackBerry is my business partner and will do as much as possible for my business to succeed so we can succeed together. 

 

OK, here's my feedback. I hope it's useful:

 

The designers on my team are having a hard time specifying the final UI specs from our app because they don't know the default dimensions of the UI components. This problem is getting even worse now that we started supporting the Q10 and some of the default components have different dimensions than from the Z10's.

 

We found this here on the forums which was already really helpful but it's not complete.

 

The only way we came up with was to create a small sample app with all the default components, UI navigation (NavigationPane, Sheets, TabbedPane, etc), menus (ActionBar, NavigationBar, ContextMenu). Run this app on Dev Alpha and Dev Alpha C, take screen shots on those devices of all the UI components that we need, send the screen shots via the device email account to the designer so she can cut them all on PhotoShop and save as individual assets. But of course we didn't have the time to do this.

 

As you can imagine, this solution is far from good. We need detailed information of the precise height of all default UI components. In both active and inactive state (for instance, when you start interaction with the Slider, the "blue glow" of the handler is very big so margins and paddings have to be optimized). We also need the height values from all navigation bars like the NavigationPane, Sheets with ActionItems and so-forth. 

 

We can do basic mockups but without this information the final UI specification is just impossible to achieve!

When the designers first saw their UI design implemented and running on the device, they almost panicked because it was not pixel perfect and we actually need pixel perfect precision for some parts of our app.

 

Fellow developers, if you have the same issues as we do, if you liked the proposed solution and have more things to add, please speak up your mind and Like this post and share on Twitter. Lets discuss what could be the ideal solution.

 

Internal BlackBerry Developers, I hope you take this feedback in consideration and take action! And please join the solution discussion. Let's solve this!

 

Thanks for reading. Looking forward to our discussion.

Cheers!

Cheers!
Developer
BBSJdev
Posts: 6,118
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: [Feedback] Default Components Dimensions Specs

[ Edited ]

Sorry I won't be able to 'like' your suggestion.

 

For me it goes against 20 years of design improvement, long gone are the days when UI elements were fixed size and rightly so as they were exclusionary to certain users.

 

Take the example of the sight-impaired who with modern day design are able to change font sizes to a larger size and therefore influence the 'default' size of any components with text in.

 

So I doubt any amount of campaigning will give you want you want as there is no 'default' size anymore and rightly so in my opinion.

 

The variety of screen sizes, form factors and resolution also make this pretty unfeasible.

 

"Design for the Majority, test for the Minority"

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
BBSJdev
Posts: 6,118
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: [Feedback] Default Components Dimensions Specs

I also suggest that you get some new designers as the ones you have seem to be working backwards, the designers should design the concept then it's up to the UI guys to approximate the actual design to that as near as possible.

 

And pixel perfection is also just not feasible on modern devices as screens are not always single pixel single point based, what on earth do you need to do this for?

 

I suggest you read up on modern day screen technology, if in your app I have to hit a single pixel accurately with a finger that is roughly half an inch on a display that uses 330 ppi I'm REALLY going to struggle!


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
billbsb
Posts: 144
Registered: ‎03-25-2011
My Device: Playbook, Z10 L.E.

Re: [Feedback] Default Components Dimensions Specs

Hi BBSJdev,

 

thanks for joining the discussion! Bu can you add anything more concrete and constructive to it? Saying "get new designers" is not really helpful. Do you have any link with some material of good practices for Cascades UI development? Our designers are new to it and even after studying the whole UI Guidelines, they find too difficult to create the perfect UI. 

 

For instance, when a new Page is shown on the NavigationPane, what's the height of the bottom toolbar with the "back" button?

For sure there's specification for it somewhere since TAT guys are really perfectionist with their work. This is important because the total usable area of a Page is less than the total screen height thus, all the margins, paddings and heights have to be adjusted.

 

Cheers!

 

Cheers!
Developer
BBSJdev
Posts: 6,118
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: [Feedback] Default Components Dimensions Specs

[ Edited ]

I'm sorry you found none of that constructive, I thought explaining that your design methodology was 20 years old should have been helpful.

 

Have you read this

 

http://developer.blackberry.com/cascades/documentation/ui/resolution/index.html

 

Modern design frowns on placing controls at absolute positions for the reasons given in my posts above and those mentioned in the link.

 

You shouldn't need to know the height of the bar when you can place a scrollview above it and avoid having to fit your controls precisely in to that space.

 

With already three form factors to consider with BB10 (Z10, Q10 and (hopefully soon) PlayBook), your method of designing will quickly become untenable, every new release requiring a reworking of your design.

 

You seem hellbent on going down this route, however, and haven't given the reasons why you need to be so accurate so best of luck.

 

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: [Feedback] Default Components Dimensions Specs

when designing custom controls, knowing the dimensions of system UI elements is very useful especially with flow in mind.  There's nothing wrong with using the static asset selctor and having to change a few lines of code for the 3-4 different screen sizes that the OS supports, that's why it's there.  What the OP is asking for is in the building for BB10 UI guidelines something like this to be shown so that they didnt have to use the current screenshot method

 

(I did this using the screenshot method)

Untitled.png

 

Having them pre-defined would save a few minutes, but figuring them out wasn't very hard either.

 

I tested this against the "Modern Design Theory" & used an increased font size as well, both action bars had the same height of 140 px, a use case for the usefullness of this information: if the developer wanted a menu that didnt cover the action bar they would need to its height in order to build accordingly

Developer
kylefowler
Posts: 526
Registered: ‎05-17-2009
My Device: 9900

Re: [Feedback] Default Components Dimensions Specs

For your designer, there is the Photoshop Plugin, Cascades exporter that has all of the controls built into it that they can drag and drop onto their layers that has appropriate sizes and all that fun stuff.

http://developer.blackberry.com/cascades/documentation/design/cascades_exporter/index.html
Like all of my posts
Developer
BBSJdev
Posts: 6,118
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: [Feedback] Default Components Dimensions Specs

Having come most recently from the Android world I'm familiar with static asset selectors and go out of my way to implement my design so as not to have release new code every time a new form factor comes out, something that seems to happen every week.

 

This is still exponentially better than the align to a pixel world that was windows app design 20 years ago, something the original OP seems to be advocating.

 

What I think I'm trying to avoid here is that new designers coming along look at this article and decide to base their design on 'pixel perfection'.

 

As for menus, I can see your argument but still consider this the last design choice that should be made, there are always alternatives.  AFAIK BB10 menus cannot be controlled to this level so we would be talking about designing your own custom menu opening up even more possibilites of  having to rework not only assets but now your custom code as well every time a new BB device form factor is released.


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
lewellyn
Posts: 110
Registered: ‎10-22-2011
My Device: PlayBook, Bold 9650, Dev Alpha A

Re: [Feedback] Default Components Dimensions Specs

Don't forget that the element sizes differ a bit on the square-screen devices. If you *really* want to see what sizes are good approximations, might I suggest looking in bbUI.js?

 

As for Cascades, you don't need to know more than "your icon should be 81x81 px", since the framework takes care of any further details for us.

 

Perhaps you can give specific examples of what you need to know, and why?



Is there a helpful or useful post in this thread? Click the thumbs up on it so that other people can find it more easily!
Like this post too! :smileyvery-happy:
Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: [Feedback] Default Components Dimensions Specs

[ Edited ]

Despite some views on the matter, Since this topic has been brough up a few times I went ahead and created a ticket so we can see where BlackBerry stands on the issue

 

UI element pixel guidelines

https://www.blackberry.com/jira/browse/BBTEN-1792

 

Please vote iff this is something you're interested in. The more votes the more likely it is that we will get this information.

 

*Note*

It may take a few days for the ticket to be accessible