Using bbUI’s onscreenready and ondomready to Dynamically Change Your HTML

I started playing a bit with BlackBerry development these days and since I’m not the best at Java (also hate how it’s difficult to do simple things with it) I choose their awesome framework for HTML5 native web development called WebWorks. I really loved it because it’s like PhoneGap, but a lot easier to build plugins (extensions on WebWorks) for it to make your native WebApp feel a lot more native.

Another great thing that RIM did to make the life of WebWorks developers easier and create apps that are exactly like native ones is a Javascript framework called bbUI.js, which is like jQuery Mobile, but seriously, it’s a lot more than just a UI framework. It makes it a lot easier to interact with the OS, override the back button for example, and makes your development cycle look a lot with native development by using screens. On this post I’ll teach you how to dynamically manipulate the screen’s HTML before it’s processed by the bbUI library.

One of the first things that you’ll notice after you start working with bbUI is that it’s not just a collection Javascript functions and CSS stylings, it actually reformat and customize your screen’s HTML before it’s shown to the user. As an example, this simple image-list item declaration in your screen HTML source looks like this:

After it’s processed by the library and shown to the user it will look like this:

Hopefully we can easily manipulate our screen elements and other things before and after it’s processed by bbUI. This is done with the bb.init() function (you can always read more at their documentation). This will be called when the application starts and can be used to listen to events like when a screen is loaded. The main ones are onscreenready and ondomready.

onscreenready: This event will be fired before the sources get processed by the library, so here is where you should manipulate, add or remove things from your HTML source using Javascript, so after it’s done the code will be passed to bbUI to be processed.

ondomready: This event will be fired when the screen finished loading and it has been already processed by bbUI and shown to the user. Here you can put things like alerts and other things that will be used to interact with the user, also some little editing to the screen’s source like renaming a field grabbing some information from a field and etc.

Here is a example of a bb.init() call:

The code is almost self-explanatory. The id is the name, second argument, you gave to a screen when you call it to be processed, for example bb.pushScreen(“screen/main.html”, “main”). And element is the screen source code, which is used to be manipulated before the screen is loaded.

A little problem that some developers might come across while using bbUI for the first time is that when you want to append or change the HTML of the screen before it’s processed by bbUI you might write your code like if the HTML was already loaded onto the screen, but it’s not. Here is an example of a code that won’t work, used to populate a image-list and then show a button that was hidden (using jQuery):

The main problem here is that it’s using document as the source to be manipulated. Since bbUI still hasn’t appended the screen into the document it will give you an error. In order to correct this you should replace document with element, that is passed by the onscreenready event. If you have any jQuery code, just add element as a context argument as shown below in the corrected code:

That’s it! Now you know how to use the onscreenready and ondomready events to dynamically insert or modify your bbUI screen’s. Any questions or suggestions just leave a comment and I’ll reply as soon as possible.

(Reblogged from instapaper)

Stephen King and eBooks

"I love crime, I love mysteries, and I love ghosts, I also loved the paperbacks I grew up with as a kid, and for that reason, we’re going to hold off on e-publishing this one for the time being. Joyland will be coming out in paperback, and folks who want to read it will have to buy the actual book."

After Stephen King made that announced all the news sites when crazy to report it. I got the news pretty fast since my Twitter feed got flooded with the news coming from the most varied sources. When I started reading the articles about it I got shocked, how someone can do such thing in the middle of the eBook revolution? A lot of people, like me, prefer to read on eReaders than on the actual book, also there are a lot of people that prefer because it’s easier and more convenient to buy and digest the content of the eBooks.

I know that Mr. King (and Mrs. Rowling in the past too) is extremely famous and has the power to decide such thing, but letting a entire segment of the market, which was already used to your eBooks, without your new piece is just unfair. Many authors make this move because of disagreements with online stores, but those usually don’t affect well-known authors, usually just the small ones that really need to generate some revenue from their eBook sales.

eBooks seriously revolutionized the 600 years old industry. For the first time in the history we can buy books on affordable prices and with extreme comfort, this made the reading habits of many grow, which contributes to this generation to have more access to culture. Denying or delaying too much the release of an eBook is an act of denying knowledge and culture. The eBook revolution is future and in the future there is no place for paper.

Sources (to read more about the news): The Verge, BBC, LitReactor, Revolução eBook

BlackBerry application install logic reminds me of another very old OS called Windows…

Made with Paper

How To Setup And Use NativeControls In PhoneGap

NativeControls

As many might know the most used plugins in PhoneGap for iOS are NativeControls and ChildBrowser, but installing plugins is a bit tricky and you can’t easily find this kind of help around the internet, for example in my case I’ve learned by reading about plugins installation in PhoneGap and doing tests, so on this post I’ll cover the entire setup and usage of NativeControls (but you can use this for any other plugin in the iOS repo) in a very simple and informative way that even a PhoneGap beginner can understand. I’ll assume that you’ve already had installed and configured the Xcode environment on your Mac and is familiarized with the latest version of it. The first thing you must do is download the phonegap-plugins repo archive and extract it anywhere you like. Now go to the extracted folder and go to iPhone/NativeControls and copy the NativeControls.h and NativeControls.m to the //Plugins folder on Xcode, then move the NativeControls.js to your desired place in the www folder. After all this copying and pasting you must open your PhoneGap.plist under //Supporting Files and add a new item to the Plugins array with the Key and Value NativeControls and the Type String, at the end your project should look something like this:

Xcode

Now you’re ready to start diving into the code. The first thing you should do is include the required Javascript files into your index HTML source in this order:

The next thing to do is go to your main Javascript file, which contains the onDeviceReady event set and put the NativeControls initialization code there. On this example we are going to use the TabBar component to output something like this:

TabBar

As you might have noticed I’m using the Glyphish Pro icon pack there, which you can get for $25, but it’s worth every cent, since it’s such a complete icon pack for your TabBars and more. First of all you should initialize a NativeControls variable and create a assign a TabBar to it using this code:

Then you can start creating a icon/button for a tab using this JSON structure:

The first item is the name variable, the second is the icon label, the third is the icon path and the last one is a function that should be called every time icon is clicked. Be aware that you should insert the icon path relative to the project folder! About retina icons I really encourage you to check out this explanation on how to organize them. After you added all the icons you want to the TabBar you should show it in the screen. Then start to place the icons (the order you declare on this function they will get placed) and finally assign a TabBar to be active as the app is fired, just like this:

If you want you can choose from the pre-defined TabBar icons that Apple include by default on their SDK by using these keywords as the icon item:

  • tabButton:More
  • tabButton:Favorites
  • tabButton:Featured
  • tabButton:TopRated
  • tabButton:Recents
  • tabButton:Contacts
  • tabButton:History
  • tabButton:Bookmarks
  • tabButton:Search
  • tabButton:Downloads
  • tabButton:MostRecent
  • tabButton:MostViewed

Remember that the label will be unusable since these will overwrite it, but you should put something on the label item or it won’t work. I’ve uploaded the full source code to my Gist and you can check it out at Example of NativeControls in PhoneGap. After all this hard work you’re ready to compile your application and test it. If you followed the instructions correctly everything should work. If anything goes wrong please drop us a comment and will be my pleasure to help you. Also leave a comment with your thoughts on this article or suggestions.

Do We Really Need Choices?

My daily use gadgets + my iPhone that was used to take this photo

Disclaimer: If you’re a Android fan boy close this window right now.

I’ve been a truly Android fan boy for 2 years and a Apple hater for 5 years, but this year I did the impossible: Bought an iPad, a Macbook Pro and an iPhone. This acquisitions really changed the way that I saw Android and all the other platforms that I loved. On this article I’ll be talking a bit about the most used argument by Android users to say that their platform is better: Choice. They say that you there are a variety of devices on the market that runs their OS so you can choose the one you like most, also that you can customize Android, flash new ROMs and tweak everything you want of it. While Apple… Yeah, you know how closed they are.

I want to start this sentence by making you deeply think “Do we really need choices?”, I’m sure that if you think really deep on this you will end up in the same point I had. We don’t really need to have choices, all we need is a smartphone that has apps, games, email, phone, etc. (the same principles as the first generation smartphones like my old Nokia E61).

After thinking about this I realized that this got dramatically stronger with tablets. People are buying tablets and don’t even know what they will do with them. When someone asks me which is the best tablet from them I ask “What are you going to use it for?” and everyone is like “Really… I don’t know”. This happens on phones too, people just buy a new phone for no reason. And all this non-sense arrives at choices. No one really want a “different phone”, people just buy the phone that looks cool, don’t matter if it has a 5″ or a 3.5″ screen, if it runs Android, Symbian, Blackberry OS or iOS, they will buy it anyway. Do you really think that “normal persons” (which means people that aren’t tech savvy) will customize their Android phones? Of course not, they won’t install a new launcher, they will only change the wallpaper and add some widgets to the home screen and that’s all!

Apple is doing it right by restricting the users to the same screen size/ratio and keeping the design of their hardware and software almost the same since the first generations of their devices (this includes iPods, iPhones and Macs) is the best way to go. A great example of this on Android is the Nexus lineup, the “pure Google experience”. Those devices get the updates first and have the interface that Google originally made (which means no skins on top of it, just pure vanilla), just because they “locked” the user options into one line of (geeky) products that they can easily manage, which leads to the biggest problem that Android has today: Fragmentation.

All these “choices” are leading to awful experience on the software side and on the developer side. An example of the user experience side is that Dead Space works on the Verizon Galaxy Nexus, but it won’t on the GSM version, don’t forget that we are talking about a Nexus phone, which should be the less-fragmented experience possible. On the developer side it’s very very awful because you must design your app to work on all the different screen sizes/ratios, hardware and also skins that companies love to put on their devices.

If you’re a gadget freak, like me, that buys a lot of devices, you might have already felt the same as I’ve described on this article. We don’t need more choices, we need more standards.

This is an old article from my old blog that I moved to here

The Raspberry Pi Will Bring Fun To Computers Again

I was browsing the Raspberry Pi forums these days and I came across a very interesting thread titled PC’s Are Boring. I read all the posts until that moment and started reflecting about that statement. The thread starter was completely right about this, PC’s (which I understand for computers that run Windows or Linux, excluding Macs) are really boring, that’s why the mobile industry is so amazing these days, because people stopped changing their computers every 1/2 years and started changing their mobiles.

A lot of the users on the forum were talking about “the old times” of the Commodore and Atari when you felt like you had power over the machine and today you’re just part of a mainstream movement. Also they were talking about how “normal people” are discouraged to program because are afraid they can break the computer (which isn’t true of course, but that’s what the average user thinks) and how the price of the Raspberry Pi could help people to get into Linux or programming. They are completely right, as soon as the Pi comes out a lot of programmers are going to rush to get their hands on one (I am very excited to get my hands on one too) and possibly a lot of people that want to start programming will get it too.

The RPi will make the feeling of having power over the machine come back again. The best example I can give is my own. I’ve never been so excited for a “computer” since the first dual cores came out, I’m thinking about the awesome things that I could do with it like: Making my own Linux-powered tablet (which is completely possible), porting new Linux distros to it, porting other OSes to it and even making my own distro only for the Raspberry Pi.

I’m sure all the geeks are very excited waiting for the release and wondering all they could do as soon as they get their hands on it. Leave a comment below with your opinion or ideas. If you want to keep in touch to the latest news about the board just visit their blog and don’t forget to contribute on the forums.

This is an old article from my old blog that I moved to here

My Dream Reading Device

My dream device

Today I was reading some of the 109 articles saved on my Pocket account and I thought about something that I would love: A tablet running a fully customized (for stability and lightness) version of Android sporting a awesome e-ink display. As soon as possible I posted it on Google+, since I really wanted to philosophize more on this idea I’ve wrote this article.

Why e-ink?

First of all, if you’re going to read for long periods of time the LCD screen is just going to burn your eyes, that’s why e-ink is the best alternative. Second, if you ever owned a Kindle (I own the DX, and the new non touch screen version), or any other e-ink device, you know that the experience is incredibly great. I know the refresh rate is a con, but seriously there are a lot more pros and also this technology is still evolving.

What about a touch screen?

Maybe, but I would buy the non-touch screen version because on a reading device I prefer to navigate and switch pages using physical buttons, also be able to holding it anyway I want without worrying about touching the screen by accident.

Why not just root a Nook Simple Touch?

Yeah, the Nook Simple Touch can be rooted and turn into a “fully functional” e-ink Android tablet, the problem is fairly simple: The lack of Android e-ink optimized apps. That’s why if a startup start this trend and it gets some attraction of reading addicts I’m sure developers of big reading apps for Android will optimize their applications for this new category. Also the interface isn’t actually optimized, it’s just a lighter version of ADW Launcher with some tweaks, nothing drastically changed from stock Android, and for this kind of screen a UI with more contrast and less mid-tones is a must.

What’s your proposed interface for this device?

This is my sketch of the perfect UI for it, made with Paper (sorry for my terrible drawing skills):

UI Sketch

The interface is pretty clean and extremely usable (also it looks a bit with the Kindle interface). The status bar will only show the name of the user and a clock. Below the status bar is the app drawer, I thought about it as just a simple collection of the application names (scrollable if you have more applications than it can fit on the screen). The last piece is the actual running application itself.

There is market for such product?

That’s a difficult question to answer, but as far as everyone can see the eReader/eBook market is growing exponentially and I think a lot of customers would give it a try if it was presented to them.

What you might end up doing?

As I wait until this dream reading device becomes true I’ll buy a Nook Simple Touch, root it, customize the OS to make everything with high contrast, and start developing that launcher from scratch.

What are your thoughts about this dream device? Any suggestions about it? Leave a comment.

We Don’t Need Another SIM Standard

Three days ago I received my first BlackBerry development device, a Torch. As I said, it will be just a development device, so I have to use it for a while to learn how the apps look like and how they feel, so I can start to develop/port applications to the OS. Why I told all this story? Simple, I use a microSIM on my iPhone, so I had to purchase a converter to use it on my BlackBerry, because it’s the SIM my carrier automatically activated the BlackBerry Internet Services. The day I had to buy the converter I remembered the new nanoSIM project and thought: “The problem isn’t SIM design, it’s the SIM itself”.

We don’t need another SIM design, we need to get rid of the SIM. It’s a 1998 that just got little updates over time. We are moving everything to the cloud (I know a lot of people hate this term, but I don’t care, I like it), our contacts, files, photos, our entire lives, why not all the informations the carrier needs to authenticate our plan?

The idea is fairly simple: Just as I have to register a username and password to have BIS (BlackBerry Internet Services) with my carrier, just make this for everyone on the carrier, as soon as you get your first phone/plan you register a username/password and all your information gets stored on the carrier. When you turn your phone ON, it connects to the carrier and ask you for the credentials, if they are valid it will download all the information and get your plan up and running.

What’s your opinion about this idea? Any thoughts about this topic? Leave a comment, I love to read and respond to them.

Why is it so Difficult to Think in The Connected Era?

This week I woke up with a awesome idea: Almost an entire first chapter of a sci-fi book, so I decided that I should wrote this book. Also I always had this desire of writing an entire book that would include all my theories about the society.

A week passed and all my progress at the time is 2 pages (A4). What happened? It’s difficult to have more ideas. On the era that we are connected 24/7 and work, studies and all our “offline” activities consume our time, minds and ideas, it’s difficult to think since our minds and thoughts are occupied with other “more important” activities. That’s why most of my great ideas and thoughts come to my mind while I’m not connected or doing any other activity (not that I haven’t mentioned “worried” about the activities), they usually come when I’m going to sleep, taking a bath or on the car. A great example is this article itself, I thought and wrote it on the car.

So here is a tip to end this story: If you want to have more/better ideas all you have to do is go “offline” and try to distract yourself from any other activity that might keep you away of thinking. Listening to a so g you love is also a good idea to have ideas.

Do you have the same problem of having ideas because of all the activities and distractions of the connected era? I would love to hear your opinion.

Microsoft Finally Saw Where The Developers are Going

Today I revived my hope on Microsoft as I received the news that they released their brand new “product” for their fellow developers. The release I am talking about is the official Metro theme for jQuery Mobile. The awesome mobile framework finally got some Microsoft love.

In December of last year I got a new device to develop for, a HTC Titan, running the latest Windows Phone 7.5 Mango build. I loved the OS UI and how the applications were information-centric and not just eye-candy, but there was one problem, the same way C# is a incredible language for a lot of things, it’s parsing functions, for JSON specifically, are very difficult to learn and the articles about it were made for senior C# developers, which makes it difficult for beginners like me to understand them, at least I now can develop using the technology I love most for mobile development: Cordova (aka PhoneGap).

I always wanted to use Cordova for my WP7 projects but the Metro interface was way too complex to build from scratch and since the WP7 build of Cordova was on it’s early stages there were some features still to be implemented, for example there was no way to prevent the app from scrolling and some other things. Now there are plenty of plugins to make the app as native as possible and with the latest help from Microsoft, the Cordova development community has another great platform with almost full support of the native web app framework.

It’s great to see that Microsoft finally realized that the future of development has Javascript, HTML and CSS as the main languages. That’s why I have hopes that Boot to Gecko gets some market attraction and becomes a popular platform.

Follow my blog with Bloglovin

We Are Living The $0.99 Application Era

I can still remember like it was yesterday, a time where paid applications never would cost less than $10. Today I can get on the App Store or the Play Store and download an fairly powerful app for no more than $3.99, but even at this prices I think twice before buying it. The App Store effect, as I like to call it, made the app consumer not want to pay more than $0.99 for a decent app, even if it’s just $1.99 it might hesitate buying it.

I would comfortably pay more than $3.99 for a extremely well done, powerful and useful app. The problem is that those kind of applications aren’t very common, but they are an expressive number, but I’m not here to talk about the apps that deserve this price tag, this article is about apps that aren’t deserving their price tag.

In my opinion the best way to actually charge for an app is by using the freemium model, that’s why Paper was such a success, you get the app for free and test it, if you like/need more features, in this case tools, you pay for them using in-app purchases, and if you want to unlock all the potential of the app you pay a discounted price for all the tools. This way the user can feel the app before buying it, which makes me hesitate when I need to buy the app without a way of testing it first.

On this model I’ll start with an Android app called Flick Notes, if you’re a heavily SimpleNote user like me you might know this app. It’s an awesome clean and simple app, the problem is that in order to unlock all the (missing) features of the app: Note and notes list widgets, To-Do list style notes, and remove ads, you must pay a extremely expensive CA$4.99 fee. I think this is to much expensive just to get rid of ads, enable to-do lists, and have the widget of the app. I would comfortably pay $1.99 for those features, and I’m sure the developer would earn a lot more money since a lot more people would buy the full version.

Another example of this, now on the desktop side, is a awesome new app for SimpleNote users that have a Mac OS computer, called MetaNota. It’s a free, ad-supported app, but it’s possible to remove it by paying a $9.99 fee, yeah that’s just to remove the ad.

These are just some small examples of what I’m talking about. If you’re a developer that is planing to monetize your app in some way I suggest you to do the freemium way, but don’t forget: We are living the $0.99 era!

Why You Should Start Dart’ing Right Now

With this article I hope you understand more about the Dart idea and how you can become more productive and happier as a developer of web applications by using it as your main language.

First of all here are some words, from the official site, for you to understand what Dart is:

With the Dart platform, you can write code that runs on servers and in modern web browsers. Dart compiles to JavaScript, so your Dart web apps will work in multiple browsers (not just ours).

The Dart platform includes a language, libraries, an editor, a virtual machine (VM) for both servers and browsers, and a compiler to JavaScript.

The Community is Awesome
One of the biggest advantages of Dart is the vibrating community. Since it’s still under development the developer base is very helpful and shareful too. If you’re on Google+ you’ll know almost every new project that is done using Dart, this way you have more attention on your project.

Libraries are Needed
Because it’s on it’s early stages Dart needs libraries to fulfill developers, this way you have a lot of libraries you can create, from scratch or porting from Javascript. This way you’ll be learning more, helping the community and earning respect from the community.

It’s Incredibly Easy to Create Web Applications
Since it was built by Google for web applications from scratch, it’s the perfect language for web application development. You’re not having to adapt a old language for the web revolution, you’re using a language that was built for the web revolution.

Weekly Updates
The language is under active development. Almost every single week a new build of the language, or the tools (Dart Editor and Dartium), is released. This way you can feel something that any other language can provide you today, the feel that it’s mutable and is evolving. It’s awesome when I open my Google Reader application and there is a new update on the Dart feed. I quickly download and test what’s new.

Organized Syntax
As a node.js developer I know that as you dive deeply into a complex part of your web application the code becomes a hell to understand. With the Dart syntax this is a bit more difficult, your code becomes more readable and a lot more maintainable. Also the Dart team published an awesome style guide to make your code even better for your eyes and brain.

Easy to Learn
Dart is incredibly easy to learn. There are three ways of learning Dart. If you’re already a Javascript you can learn by reading the awesome Translations from Javascript table which will show everything you must know about Dart comparing to Javascript. The second way of learning is by reading their lengthy Language Tour which will give you an in-depth look at every single aspect of the language. The third way is to learn by practicing and looking at the previous links when you don’t know how to do something or the compiler is giving you a strange error.

Those, in my opinion, are some of the key features of the awesome Dart language. I hope you give it a try and have lots of fun with it. Don’t forget to comment about your experience with Dart and your opinion about it.

There is Still a Market for Resistive Displays

Since the first iPhone came out, in 2007, the world of touch screens went to capacitive because they were a lot more finger-friendly. Because of this people started to think of resistive screens almost as 90’s technology and forgot that they were good at one key thing: Handwriting and pen recognition.

We, humans, are used to write and draw with pens, not with our fingers. This makes the experience with drawing, sketching, and note taking apps terrible. Some will say that anyone can buy a capacitive stylus that will work on all the modern mobile devices, the problem with those stylus is that they are not precise enough, they help a lot, but humans are precise when they want to draw or take some handwritten notes.Very often I take my HTC Touch Pro2 so I can take notes digitally.

At least this idea, of having a stylus on mobile devices, is still not dead yet. The Samsung Galaxy Note is the proof of this, also I want to mention that their stylus (S-Pen) implementation is very good, they managed to put a fairly precise stylus to work on their capacitive display. If other companies start to see this market and come out with great new ideas to merge the new technologies with the old ones I’m sure they will increase their profit significantly and will make their customers a lot happier.

Apps I Can’t Live a Day Without (Android Edition)

This is the first article of a series I’ll be doing. Here I’m going to list the apps I can’t live a day without, in the various platforms I use on a daily basis.

I decided to start with iOS, which is the one I like most in the phone category, that’s why I always carry my iPhone with me: Apps. But then I choose to start with Android because in my opnion it’s a more productivity OS, also I’m  writing this article on my Eee Pad Slider using Google Docs.

Let me begin by listing the Android devices I own and use every day:

  • ASUS Eee Pad Slider
  • Samsung Galaxy Tab (the original 7” version)
  • Samsung Galaxy S

I also have a Motorola Milestone (aka OG Droid) which I only use to test the apps I develop for Android. So I think it doesn’t count as one of my daily drivers. Now let’s begin with the app list:

Google Music
The best way to listen to my library whenever I go. It syncs my iTunes library with all my devices using the awesome Google cloud and albums that I like most and want to enjoy don’t matter if I have a internet connection, with a single tap and they get downloaded to my device so can be played offline. With a stuning UI and great features it’s by far the best music player for Android in my opinion. If you don’t want the cloud features you can check out DoubleTwist which a great alternative for people that just want their music on the device.

Gaug.es
In my opinion the best analytics service available. It’s simpler than Google Analytics and everything happens in real-time. The app shows all the information you can have on the desktop version and also lets you have the awesome AirTraffic Live feature that shows you in real-time, on a map, the detailed traffic on your site. Since I love to check out every second how my sites are performing I can’t live without it for a day.

Wunderlist
This is just the best task manager app ever invented. With a set of apps for every platform you can imagine from desktops to mobile devices. I use it to manage all the tasks I have to finish regarding my projects and keep them all synced across my devices. Definetly a must-have app for people that must be productive.

Google Docs
The most important app on my Eee Pad Slider. Everyone knows this app, if doesn’t know at least the service you should know. I use it on a daily basis to write my articles and long texts for work or school. I stoped using any office suite, this includes iWork and Microsoft Office, after switching to Docs last year. Don’t matter where I go I can view and edit any document I want.

Read it Later
I choose it instead of Instapaper because of the official support for Android and iOS. I love this app because I can keep all the articles I want to read offline and synced. Really a must-have for people that like to read a lot of articles on a day.


That’s it, if you have any other app you think is awesome please share on the comments.