Codename One vs PhoneGap

 

Here I am at the moment of decision. I’ve just come out from a one week hack for a mobile SMS app here using blackberry webworks.

Learnt a whole lot within one week of developing that app. Memory issues, device view <> simulator view, and a very good number of phone reboots not just from updating the app after each test but device crashing due to out of memory operations.

So today, I was passing by a friend and noticed he was getting LWUIT configured on computer. Now, I’ve been looking to do something more fun than just a Blackberry app, so I asked why he was going with LWUIT instead of the more recent Codename One. His answer was quite uncertain and I would keep from saying the real reason he whispered.

But then I said to myself, I’m going to try out Codename One and see how this goes. Remember I leave in the most populous African country and the mobile device market is dominated by devices with support for Java, as opposed to just blackberry, iOS, or Android (these guys are still picking up and have a long road to walk).

 

This Could be Better Than Jquery Mobile For Blackberry Webworks App Development

So after my memory and performance woes with Jquery mobile on BB5 phones, I humbly decided to find a lightweight alternative CSS framework.

It happens that most of these frameworks come integrated with Javascript and the performance issues stem from the transitions and CSS 3 selectors.

Recently, I stumbled on iUI which was built for the iOS devices. Eager to test it out on the BB5 device, I loaded one of the sample pages on my device and then I realised it wasn’t even loading.

Back to Google, I found this thread about how to support BB5 using iUI. If there was a similar thread for Jquery Mobile I just might never have realised there was iUI.

We do support Blackberry OS6, 7 & Playbook (aka coming BB X), since they have a webkit based browser. Since OS6 doesn’ have hardware acceleration, it is a bit slow to perform transitions btw…

We might have to clarify that.

if you want to support OS5, you have to:

– replace the querySelector part

– forget about all css3 definitions / styles

– use JS transitions (aka slide1, you’ll understand when you’ll get to this point)

– test on the device

– submit your working solution to a clone on Git so we can integrate that to iUI 🙂

i honnestly wish you good luck! if you have some JS skills, then it might not be too long/complicated. if not, contact any JS freelancer, shouldn’t be more than 2 days’ job.

in Google Groups.

Don’t Go crazy Trying to Resize Twitter’s Bootstrap CSS Modal Windows

I was in the middle of a project where I needed to implement modal windows.
After playing around with colorbox, I suddenly realised that the CSS framework (Twitter Bootstrap) which I was using at that time, had options to display modal windows.

So after a quick lookup on the documentation, and then trying out a few demonstrations, I decided it was time to replace colorbox with the Bootstrap modal windows.

After hours of tweaking here and there, I ended up almost completely exhausted from trying to figure out why the modal window size just wouldn’t change and remain in the center. The SPAN tags sizes were suddenly behaving as though they weren’t based on the framework.

After trying all the things I thought were logical solution and failing over and over, I decided to finally consult the G-oracle.
Finally, I found this solution / hack to fix this little problem which requires that I specify the width in CSS to give a non-fluid layout. Another option was to use Javascript to compute the width and position of the modal window.
You can find the complete load down on GitHub with sample code included./issues/675

 

More Horrors With Blackberry Webworks Development

I just came out of a near 9 hour marathon of trying to figure out what exactly in the world was making my Phonegap ant build for Blackberry to throw a compile error with this message.

[exec] javac: invalid flag: Files\Java\jdk...
[exec] [ERROR] RAPC exception occurred

I wish there was a documentation that had stated you needed to run the scripts with an administrator account, else Java will not work with the Blackberry Webworks Packager.

This would have saved me these wasted hours that could have been used for more productive work.

In any case, I always do my best to take advantage of any situation and see the light in every explosion. So I learnt a few things during the whole torturing experience and I’m glad at least that is over.

The blackberry app now compiles successfully. 🙂

Mobile browser detection and optimization in CakePHP Made Simple

Here is a helpful guide I found while learning to work with JQuery mobile and CakePHP together to create a mobile version of one of my websites.

Hope the line below make sense to you, if not feel free to ask questions in your comments. Here we go …

I needed to do two things:

Detect webkit-based mobile browsers

Automatically serve those browsers a mobile optimized page if one was available for the requested action.

Here’s how I did it, and how you might, too.

Step 1: Update Cake’s browser detection to include Android devices

Cake’s RequestHandler component includes a nifty method for detecting mobile browsers — $this->RequestHandler->isMobile() — but the default list of devices detected by Cake 1.2 is a bit dated.

Fortunately, it’s easy to update. The default list of device names is found in the RequestHandler component’s core file, cake/libs/controller/components/request_handler.php:

if (!defined(‘REQUEST_MOBILE_UA’)) {

define(‘REQUEST_MOBILE_UA’, ‘(iPhone|MIDP|AvantGo|BlackBerry|J2ME|Opera Mini|DoCoMo|NetFront|Nokia|PalmOS|PalmSource|portalmmm|Plucker|ReqwirelessWeb|SonyEricsson|Symbian|UP\.Browser|Windows CE|Xiino)’);

}

Update this by copying it to your core configuration file — /app/config/core.php — and adding the device names of your choice. I simply added Android to snag all those new Google-happy devices using webkit browsers. To wit:

define(‘REQUEST_MOBILE_UA’, ‘(Android|iPhone|MIDP|AvantGo|BlackBerry|J2ME|Opera Mini|DoCoMo|NetFront|Nokia|PalmOS|PalmSource|portalmmm|Plucker|ReqwirelessWeb|SonyEricsson|Symbian|UP\.Browser|Windows CE|Xiino)’);

Step 2. Decide where to put your mobile views

There are several places you could put mobile view files — app/views/elements or app/views/themed come to mind — but I decided on something slightly different. Cake automatically looks for an action’s view files inside a view folder named after the action’s controller. For instance, a page request for users/login expects to find a view file at /app/views/users/login.ctp. Given that, I extended the convention by creating a subfolder named mobile inside each controller’s existing view folder. So, my mobile view for users/login is located at /app/views/users/mobile/login.ctp.

Step 3. Create a mobile layout file

Mobile-optimized pages will need a different layout than standard pages. Create a file named mobile.ctp and save it inside /app/views/layouts.

Step 4. Create the logic for detection and view setting

Here’s where Cake really shines. All we need to do in order to send all mobile devices to any mobile-optimized pages is create the following logic inside the beforeFilter() of /app/app_controller.php.

// check for mobile devices

if ($this->RequestHandler->isMobile()) {

// if device is mobile, change layout to mobile

$this->layout = ‘mobile’;

// and if a mobile view file has been created for the action, serve it instead of the default view file

$mobileViewFile = VIEWS . strtolower($this->params[‘controller’]) . ‘/mobile/’ . $this->params[‘action’] . ‘.ctp’;

if (file_exists($mobileViewFile)) {

$mobileView = strtolower($this->params[‘controller’]) . ‘/mobile/’;

$this->viewPath = $mobileView;

}

}

This code does the following:

Detects mobile browsers using our updated device list

Changes the layout to our new mobile layout

Checks to see if a mobile view file exists inside the mobile subfolder described above.

If the file exists, the logic changes to the mobile view before displaying the page.

One thing to keep in mind about this approach is that it doesn’t allow mobile viewers to switch back to the standard browser view, assuming instead that you’ll take care to retain all essential functions in your mobile views. It does, however, preserve your original URLs across all platforms, with none of that ganky mobile redirection that lesser sites use.

via Mobile browser detection and optimization in CakePHP 1.2 • Made Thing.

Javascript JQuery var $varname is not a PHP variable!

JQuery

JQuery (Photo credit: Wikipedia)

Recently, I came across some JQuery code with a variable declaration having a $ sign before the variable name.

Below is an excerpt of the code.

var markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
$header = $page.children( ":jqmData(role=header)" ),
markup += "</ul>";

After doing a brief search I found the following explanation very useful and this might take out the confusion that may have you screaming to yourself “Is JQuery now running PHP?”

“ It just seems to be common practice by a lot of jQuery people smarter than us to signify it’s a jQuery object stored in that variable, it has zero to do with jQuery itself per se”.

via [jQuery] var $varname – jQuery Forum.

What Exactly is this JQuery Mobile that they use for Mobile Application Development?

I have been doing normal html, and interactive websites/ web apps using PHP/MySql for quite some time now, and now I was getting curious as to the new trend of mobile application development.

In my earlier post I talked about how I went in search of the best tools for mobile development.

I finally found my way to JQuery Mobile (JQM). And after all the talk and buzz around the tech space about developing mobile sites with JQuery mobile, I discovered that it isn’t as dreadful and uphill as people make you think.

The first thing you need to know is that JQuery mobile or JQM as it is often referred to as, is only just JQuery with an added css file for mobile rendering and a juery mobile javascript file.

So all you need to set up a mobile friendly page is add these 3 files to your header.

jquery.mobile-1.1.0.min.css,

jquery-1.7.1.min.js,

jquery.mobile-1.1.0.min.js

You will have to forget about XHTML validation in this case. Below is the typical structure of the head of a mobile page. You don’t have to start by creating a theme in themeroller as the default JQM theme is just good enough for you to start practicing with right away.

<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

<link rel=”stylesheet” href=”css/jquery.mobile-1.1.0.min.css” />

<script type=”text/javascript” src=”js/jquery-1.7.1.min.js”></script>

<script type=”text/javascript” src=”js/jquery.mobile-1.1.0.min.js”></script>

</head>

<body>


Once you have these files in your header you are ready to start using JQM to perform all the mobile magic wonders that you see the so-called “mobile-experts” performing.

You can create lists that look like a phone’s native application navigation list and those fancy rounded buttons that slide into different pages when you click them, all simply using very basic html tag properties called the data-role.

For a detailed guide on the different features and properties in JQM, you may visit the JQuery mobile introduction page here.

After you are done with learning the HTML tag structures and properties in JQM, you can then add PHP into the mix to generate valid JQM tags that will render perfectly in mobile browsers.

The built-in Ajax functionality in JQM means you don’t have to worry about how to communicate with your scripts on the server, just return the results in a suitable format.

Finally, if you need to convert your mobile site into a native phone application, there are several tools that will take your pages and compile them into any platform of your choice.

A good example is PhoneGap.

&lt;