If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

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
anzorb
Posts: 30
Registered: ‎02-04-2011
My Device: BB9900 & PlayBook16GB
My Carrier: Rogers

BB10-Pages HTML5 All-in-one Framework for BB10/QNX

Hello :smileyhappy:

 

I am working on a HTML5 framework, targeting BB10/QNX applications. The framework provides a foundation for any size of application and includes a UI library, and an easy to follow folder structure that allows for modular loading of dependencies using Require.js and separates code into MVC logic using Backbone.js.

 

People have put in a lot of time and effort into creating libraries for any type of project. Many find it difficult to combine all the libraries into one place, provide a way to load them as necessary, and to find a customizable UI, which is indistinguishable from a Native Application. This is why I decided it is time to put this together.

 

Finding a UI library for mobile/tablet is a difficult task. Many UI libraries/frameworks claim to be 'mobile', but show signs of low performance (sluggishness, lag) on mobile hardware. This is due to a number of reasons including:

 

  • Some or all animations performed by the CPU, rather than GPU. 
  • Extra repaints and reflows. A repaint occurs when a layer needs to be re-calculated and bitmap re-sent to the GPU. Minimizing such operations contributes to a smooth user experience.
  • Position and grouping of layers. Moving a single layer which is 5 screens wide is much more expensive than moving individual 1 screen wide slices to 'imitate' this behavior.

I then came accross App-UI.js, which is one of a few libraries that with a few minor tweaks has given me the performance I look for in a mobile/tablet Application.

 

For more information on repaints/reflows and compositing layers I strongly recommend the following video for all future HTML5 Gurus:

 

http://www.youtube.com/watch?v=xuMWhto62Eo

 

This framework is built from the ground up with the above points in mind. HTML5 is still in its infancy, and if we set the take the right approach from the start, HTML5 applications will be indistinguishable from apps written in C/C++/Qt on any recent mobile hardware. The folder structure allows for easy loading of necessary libraries, as well as MVC modules to properly organize an application.

 

 

This framework allows any developer (with some Backbone.js or other MVC knowledge) to create scalable applications with stunning smooth transitions and animations in HTML5. It scales to any screen size and orientation, but I will primary be focusing on BB10 + QNX.

 

The demos are using a simple page by page view/navigation, where new content slides in from the right. Other variations are also possible thanks to App-UI.js. I will be posting more demos soon.

 

Demo: http://anzorb.com/BB10-Pages/ (Portrait)

Demo: http://anzorb.com/BB10-Pages/landscape.html (Landscape)

Demo: http://anzorb.com/BB10-Pages/app.html (Full Screen)

 

For example use and source code, visit GitHub: https://github.com/anzorb/BB10-Pages

 

Note: I am not focusing on giving this a BB10 feel and look. There are other libraries for that. Maybe in the future these can be integrated, but for now, the task is to have a framework capable of handling heavy applications in a very neat, modular fashion, while providing a hardware accelerated UI.

 

Note: BB7 and below will not be supported.

 

Note: Browser back button is currently not working as expected. Please use the UI back button instead.

 

Feedback is always welcome.

Please use plain text.
New Developer
herriyanto
Posts: 11
Registered: ‎07-29-2012
My Device: BB 9000
My Carrier: Indosat

Re: BB10-Pages HTML5 All-in-one Framework for BB10/QNX

Wow, this is very nice, from what I see, those aren't specificly target for BB10, but also available for cross platform Mobile development.

 

And App-UI.js are a nice find, I'm also searching for a replacement for Jquery Mobile or Sencha Touch.

Please use plain text.
New Developer
arachide
Posts: 40
Registered: ‎07-22-2012
My Device: bb10
My Carrier: china mobile

Re: BB10-Pages HTML5 All-in-one Framework for BB10/QNX

[ Edited ]

I like this framework

 

but does it support the table/listbox likes the UITableView of ios?

it can move 2 rows every easy

I have developed 100 ios apps using objective-c, and plan to migrate some of them to bb10 using html/javascript

(reason of development cost, Windows RT also supports html/javscript framework,  Google also  takes over the all members who developed the Enyo(html/js) framework of WebOS, so I guess Google will release html/js framwork not soon.

Except ios,

windows rt, android,blackberry 10, firefoxos <will release device next year>, Tizen will use html/js framework)

 

I think there are 2 most important UI controls in ios

one is UINavigationBar(you have realized it), another is UITableview which is very useful for mobile app operation

 

On BlabkBerry Jam, I have told the experts from Rim, they promised to add this feature to bbui.js

( I am not sure if this concerns Apple's UI patent)

 

but in my case, almost every app needs to use tableview/listbox

and its convenient operation is essential 

 

As I known, Windows Phone, android does not support this feature

you have to write yourself's codes, 

if you can integrate this type table/listbox to app-ui.js in framework with edit function(delete a row, move a row), it will be great!

 

 

Please use plain text.
Contributor
anzorb
Posts: 30
Registered: ‎02-04-2011
My Device: BB9900 & PlayBook16GB
My Carrier: Rogers

Re: BB10-Pages HTML5 All-in-one Framework for BB10/QNX

Hey arachide, table/listbox view is definitely a good idea. I will see what I can do. The idea is to have a good foundation so that we can create specific modules (such as table/listbox) and plug and play them when necessary. :Yes:

 

@herriyanto the framework will work on any WebKit device, but there are and will be BlackBerry Specific features, such as Swipe Down menu (which I integrated recently). 

 

Cheers!

Please use plain text.
New Developer
arachide
Posts: 40
Registered: ‎07-22-2012
My Device: bb10
My Carrier: china mobile

Re: BB10-Pages HTML5 All-in-one Framework for BB10/QNX

[ Edited ]

I also develop app for windows phone WP used listbox with context menu

 

 

 

 

I guess Microsoft does not want to use the style like UITableView of IOS. Because they do not want to offend Apple UI patent rathern than they can not.. but as an user and a developer, the openration of UITableView on ios is really bettter than listbox with context menu on windows phone.

Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: BB10-Pages HTML5 All-in-one Framework for BB10/QNX

Nice work on this project anzorb.  It's exciting to see the community working on initiatives like this.

 

I like how one of your guiding principles is performance; a highly important but often overrated quality!

 

Is your intent to provide a BlackBerry 10 UI template as well?  If so, how will it be different from bbUI.js?

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
BlackBerry Development Advisor (Retired)
epelegrillopart
Posts: 99
Registered: ‎10-03-2009
My Device: Not Specified

Re: BB10-Pages HTML5 All-in-one Framework for BB10/QNX

Nice, Anzor!  Very nice!

 

What license are you intending the code to be under?  I did a quick pass and I didn't see the license information.

 

Separate... want to ping me (epelegrillopart at rim dot com) and we can create a page for the framework in the community wiki?

 

 - eduard/o (pelegri-llopart), Open Source at RIM

Please use plain text.
Contributor
anzorb
Posts: 30
Registered: ‎02-04-2011
My Device: BB9900 & PlayBook16GB
My Carrier: Rogers

Re: BB10-Pages HTML5 All-in-one Framework for BB10/QNX

Thank you for your feedback Adam and Eduardo!

 

It is not my intent to reinvent the wheel in any way. I find bbUI.js does a fantastic job at providing a consistent User Experience with other core applications on BB10. I will be attempting to integrate some of these controls from BBUI.

 

I would like to keep this framework as modular as possible, to ensure that it does not get cluttered and is easy to debug/update. :smileyvery-happy:

 

@Eduardo, this framework is released under the MIT license. I have contacted you off thread. Cheers!

 

 

Please use plain text.
BlackBerry Development Advisor (Retired)
epelegrillopart
Posts: 99
Registered: ‎10-03-2009
My Device: Not Specified

Re: BB10-Pages HTML5 All-in-one Framework for BB10/QNX


anzorb wrote: 

 

@Eduardo, this framework is released under the MIT license. I have contacted you off thread. Cheers!

 

 



Great.  I don't see it in my inbox yet - do let me know if you have already sent it.  I'm also frequently on twitter, as @pelegri.  Are you "the" @anzorb ?

Please use plain text.