Web UI framework for BlackBerry - blackberry

Is there a "BlackBerry UI" CSS/JS framework available for Blackberry - Similar to IUI for the iPhone?
Hosted over on Google Code http://code.google.com/p/iui/ there is a great open source library for providing a "standard" iPhone UI for web applications.
i.e. a JavaScript and CSS library to provide:
BlackBerry look and feel
Data Binding
Curved corners etc.
DOM utilities
Handle idiosyncrasies between browser versions

Considering the fact UI changes across blackberry hardware, I guess it's difficult to create the equivalent of what is found on iOS.
I'm referring you to this forum thread you already saw for sure: Is there a "BlackBerry UI" CSS/JS framework for BB's - Similar to IUI for the iPhone
In term of compatibility and usability, I guess slightly altering a jQuery Mobile's theme would be your best option if you want to find one that is open source (unlike Sencha for example).

BB OS 6 contains a modern Webkit browser so it's easier to use standard toolkits such as Sencha.

Besides using Jquery Mobile or Sencha, you could give a try to this (official it seems) library https://github.com/blackberry/bbUI.js

I would recommend against using jQuery Mobile on a BlackBerry app.
It's slow (especially on older/less powerful devices), bloated (lots of stuff you probably won't ever need), the UI doesn't align with BlackBerry guidelines whatsoever and it doesn't play well with focus-based navigation (which is important as some current devices still don't have a touch screen and some users prefer to navigate with the trackpad).
bbUI.js (https://github.com/tneil/bbUI.js) as mentioned by Max is an official library originally developed by someone at RIM and, while it's not without its flaws and limitations, after months of working on a large WebWorks project it is still the best choice I've found to get up and running quickly.

Alas, the OS 6 browser crashes at the mere hint of javascript load (most usually the case), slightly less from having too many tabs open (by "too many", the amouny ranges between two on the lower spec models like 9300 to 4 or 5 on the 9780). This is from my experiences. Perhaps my settings are wrong - I tend to like smaller text, Arial and set the encoding to UTF-8.
However, I have never had Opera crash on the same phones - despite having at least 5 to 10 tabs open and in the background.

Related

IBM Worklight - Is there an embedded rendering engine? Can we change it?

I'm working on a software that includes 3D graphics. Those are massive enough, so I decided to use OpenGL to keep a quite fluent animation. I selected THREE.js graphic library (WebGL).
Reading the html through a Web browser works very well : WebGL functions are recognized. I did it on my desktop (Win32/Firefox17, please do not judge me on my configuration !) and on a Nexus 10 (Android 4.3, FF24 and FF25Beta, tried with Chrome30Beta but no joy...). But I need to access native data, like the file system, to get informations for my program. So I wrapped my code with WL, and deployed it as an app on my Nexus 10... And so disappeared the WebGL capability... :(
So I looked for a reason to that :
I found on the IBM site two different ideas : in one way, I understand that a JS engine is embedded, in another that WL uses the engine of the default Web browser of the tablet (what I understood the first time)...
Let's be precise with the different engines : On the Nexus, FFs have obviously Gecko engines, Chrome30 is a Blink (webkit-like, version 537.36). Those are the ones detected by window.navigator.useragent as I read directly in the browser, no surprise. In the Eclipse/WL preview, I got different interpreters, depending the browser I selected, FF or IE (not Safari, I don't have it installed), but not the one from my desktop (the ones used are even older than my own FF...). But, when I detect the one used in the app (after wrapping in an apk), it returns an AppleWebkit 534.30/Worklight/6.0...
Maybe I'm wrong (tell me), but if 'Worklight' is in the version of the engine, and if webkit is used even when I suppress Chrome from my tablet (the version is different, but who knows..), I wonder that, for this app, as it's configured, the engine is embedded by Cordova or WL.
If it is so, I agree it allows to read a code with a fully-compatible interpreter, regardless the browser installed on the hardware. But when a webkit engine does not please you for the functions it supports (like WebGL, very partially supported), it looks a problem for me.
Does anybody have a confirmation of how it works ? If the engine is wrapped with the app, do you know if we can choose the one to be included, or configure it (like enabling WebGL ;) ) ? Another idea ?
Thanks,
Vincent.
Worklight applications do not bundle an interpreter. The application will use what that is bundled in the OS.
In other words, the default WebView in Worklight is the one that the OS provides, in the case of Android it uses the bundled WebKit.
This is not something Worklight controls what-so-ever.
You could, maybe, somehow, bundle in your app the Firefox engine libraries and hook it all up together, but the task to do so is incredibly large and complex in size... and not supported by IBM Worklight. Also, I do not know whether Cordova supports this as well ( it is used in Worklight to interface with native functionality).
As for the useragent, the string "Worklight" is attached to it as part of support for IBM WebSphere Portal.

What is Fast&Easy way to migrate Flex 3.5/4 Web App to Flash Builder 4.6 for Mobile iOS?

I currently have a fully working web app built in Flex 3.5/4 using java back end with Spring Framework using TomCat.
I need to migrate or convert this project into Flash Builder 4.6 to create a mobile iOS application and use the same SpringFramework with TomCat. How can i do this?
Do i just copy code over and adjust?
Do I export from flex 3.5/4 and import into flash builder 4.6 and adjust for mobile?
Is there a certain export feature that exports to mobile?
Do I have to change the code to mobile components by hand? Is there anything automated?
I have spent about 3 days trying to search and figure out specific detailed information on what to do, but oddly enough, I have not found anything that is helpful. I say it is ODD because Adobe claims that with Flash Builder 4.6 and 4.7, migrating to different platforms, will remove about 70% of the work with the latest Flash Builder. However, I have found no tutorials or steps on exactly what to do. I don't even know if the spring framework would work with TomCat for an iOS app.
Here's what I have found out through my research:
1. Migrating to mobile, I will have to change various code to use the mobile optimized components for performance.
What do I need to do?
EDIT: I even tried adding mx.swc to my library path just for testing purposes to make things easier for the migration/conversion and it still doesn't fix my error in Flash Builder 4.6 mobile project with mx:Application:
http://i.stack.imgur.com/dFdIk.jpg
Lots of things to cover; and I'm not sure where to start. First, I want to clarify that the browser based app you developed for a 72-ish dpi 15+ inch computer screen may not easily migrate to 3.5/4 inch iPhone or 9.7 inch iPad screen. Keeping that in mind
Do i just copy code over and adjust?
I would start there, yes. Even better if you move the 'shared' code into a library project so you can use it for your web app and your mobile project. Flex 3.5 does not formally have mobile support; so I would not expect great performance on a mobile device. You'll also have to add some "non-mobile optimized" libraries to the library path manually in a Flash Builder Mobile project. The MX.swc is probably the big one, as you already mentioned.
Do I export from flex 3.5/4 and import into flash builder 4.6 and adjust for mobile?
In Flash Builder 4.6 mobile projects are different than web projects. Most likely you'll want to move as much shared code as possible into a library project and then create a web project--for maintenance of your current application--and a mobile project for deployment to iOS and other mobile devices.
Is there a certain export feature that exports to mobile?
If you have created a Flash Builder Mobile project; then yes you can export to iOS, Android, or Blackberry.
Do I have to change the code to mobile components by hand? Is there anything automated?
Yes, you'll have to change code to mobile components by hand. That is if you are replacing a non-mobile optimized component with a mobile optimized one. However, if you are using a Spark Component [introduced in Flex 4], such as a List, then you can use the spark list with the default theme in the web project and a spark list with the mobile theme in your mobile project without any changes.
...Adobe claims that with Flash Builder 4.6 and 4.7, migrating to
different platforms, will remove about 70% of the work with the latest
Flash Builder.
I am not aware of such claims. But, I do believe that you can reuse a lot of code between mobile projects and non-mobile projects. It took me 3-4 months to build a mobile game using AIR/Flex. It took me less than a day to port the code to work in a web browser.
I don't even know if the spring framework would work with TomCat for
an iOS app.
If you want you're iOS app to make calls to a server, then yes it will work without issues.
If you want to deploy Tomcat and Spring onto an iOS device I would not expect that to work.
This question is a bit non-specific; but I tried to help. If that doesn't point you in a direction, then I may ask what have you tried and what problems have you run into?

PhoneGap (Cordova), with Sencha Touch 2 or jQuery Mobile?

In the past i've used PhoneGap (1.x) with Sencha Touch 1.x, because that was back then the best combination. Although i'm a much bigger fan of jQuery than any ExtJS library. But jQuery Mobile was really buggy back then. Page transitions caused white flashes on Android devices. Responsiveness wasn't as good as it was with Sencha Touch 1 (ST1). Eventhough ST1 also had its quirks, it was definitely the best choice.
But currently PhoneGap is at version 2 and Sencha Touch aswell. But like i said, i like jQuery more. So i'm actually wondering if jQuery Mobile is any good these days. Does it still show alot of flickering when sliding from one page to another? Or any other buggy things?
Or should i still go for Sencha Touch (version 2 in this case)?
I hope i can cut some time in testing out both of these products by the answers in this post. That's the reason i'm asking.
This really depends on what platform you are going to create the application.
If suppose you want to build an iOS app then you should go for Phonegap + sencha because sencha makes it looks like a real native app. It will work very good for iPhone. But if you want to port the same app in Android. Then its a mistake. It is very slow in android due to low hardware specs. Although it is some what better in HTC one x and S3 because of there good specs.
I would recommend for Jquery Mobile because it is improved in these years. Although its look and feel is not that much good as Sencha but it works very well in almost all the platforms i Tested(Android 2.x and later, Iphone, BB 5.x and later).
One advantage that JQM has over Sencha is that
Jquery mobile scripts can be customized and then imported in your application. It can be minified as per your needs. For furthur info look here http://jquerymobile.com/download-builder/
So JQM will be more lightweight than sencha.
This is all my personal experiences which i have. Hope it helps you
That flickering issue has been resolved in the latest version of Jquery Mobile.
http://jquerymobile.com/blog/
https://github.com/jquery/jquery-mobile/issues/4024 resolved.
#Coder_sLaY: Sencha has SDKTools and a Visual IDE that can not only create an app build, and after that they can create native android/ios builds. Sencha can be as lean as jQuery mobile.
So Sencha mobile scripts can be customised, external scripts included, and then the code is minified ready for production, removing all unused classes from Sencha touch.
If you're going to look at the Sencha route, then go to the API docs and check out the guides and videos, as there is a lot that's changed to make coding easier including the new data package which is simply amazing!
There are some discussions about this subject on Quora too.
You might want to check out this thread We're deciding between jQuery Mobile, Sencha Touch & Dojo Mobile. What are the pros and cons for each?.

Win8 Metro IE10 Drag-N-Drop / Slider Issue

I was trying some slider / drag-n-drop demos of JQuery Mobile, Kendo UI and other javascript frameworks, but none seem to work in the Metro version of IE10 on my tablet (running Windows 8 Consumer Preview).
I remember there was a similar issue on IOS, but using most frameworks it's now working on my iPad.
Does anyone know how to solve this problem?
Is there any JS framework that has addressed this issue?
Could this be something that is still to be fixed by Microsoft before final release of Win8?
Cheers,
Ray
Internet Explorer 10 has a more abstact event model when it comes to touch, mouse, or pen events. Rather than having events like touchstart or mousedown, Internet Explorer 10 has an arguably superior model consisting of a much simpler MSPointerDown which is fired for all types of inputs, including fingers, mice, or pens.
Unfortunately, as you've noticed, there isn't a great deal of support in popular libraries and frameworks, though I suspect there are a few good reasons why this is the case:
IE10 is still technically incomplete.
IE10 is currently not available on Windows 7 (though it will be released on Windows 7 eventually)
IE10 currently requires the installation of unfinalized versions of Windows 8
These reasons, among more I'm sure, have likely caused the developers behind major frameworks and libraries to hold off on any serious investment of their time to target the new browser from Microsoft. That being said, I do know personally of some very key players from the jQuery project who have been keeping a close eye on Microsoft's new pointer model. I suspect the same can be said for other teams.
The reason is that IE10 introduces MSPointerEvents, which are probably not well supported by most frameworks, at least yet.
Update: Kendo UI supports MSPointerEvents since Q3 2012. As of Q1 2013 all framework widgets also work properly in IE10 when content is pinch-zoomed.

Is sencha touch / jquery mobile mature enough for production?

Last week i've been busy with mobile html5 frameworks like sencha touch and jquery mobile.
I bumped into a few bugs and strange things when testing on real android phones. (from slow to missing components to even not displaying anything)
Is it correct to say that html5 frameworks for mobile platforms aren't ready for production when one of the requirements is that it must function on most android/iphones?
If you plan to support most android phones, you should be aware of that performance will not be satisfying on middle to low-end devices. This is because that both libraries depend heavily on javascript( especially sencha ), and javascript and the whole webkit performance are not great on these phones. The situation is a bit better on the iphones.
I don't know about jquery, but sencha touch sure is.
See if the android bugs you found are mention here because they will or already are solved in the next release.
http://www.sencha.com/forum/showthread.php?135798-List-of-Known-Android-Issues-Fixed-in-Upcoming-Release
The sencha touch 2 is going to have all other improvements especially, bugs and performance related to android OS. Read it here:
http://www.sencha.com/blog/sencha-touch-2-what-to-expect
In the end test and see it yourself some of the apps that are built with sencha touch:
http://www.sencha.com/apps/

Resources