10 tips and tricks for Phonegap Developers

0
Filed under Android, HTML5, PhoneGap, iPhone/iPod touch, mobile

While working with Phonegap, You might figure out to what use after your first hello World demo, like listing files, loading, effects, transitions and you might consider using some framework to avoid all those boilerplate of DIY the UI. Problem is some of the framework still needs adjustments and if you don’t understand whole framework you might end up messing around until you find out best solution.

But if your project needs a bunch of implementation and you’re with time to do so, and kind of control what you want and doing it in the right time, here’s my tips and tricks to avoid snagging and became lazy on producing some valuable apps.

1 – Never use JQuery library for your Next Phonegap App. It’s a hell of a job make things work, specially for loading content, the side effect is you’re using chuncks of code for IE, Opera, Safari and a bunch of other __prototype__ you don’t need it at all.

My suggestion is use ZeptoJS. Tiny, fast and ultra lightweight lib, and you just load what you need, targeting webkit child-browser. The syntax is very similar to jQuery and works like a charm, supporting even gestures out of the box.

2 – Never use file:/// to load local files in your Phonegap Apps, instead, use $.ajax(), better transverse XMLHttpRequest then loading files directly into DOM without pitfalls of loading.
And when doing so, disable async, otherwise browser will pimp or flicker specially if you’re in iOS.
Other thing to mention is the access Origin, if you’re just like me, use * for all website to request.

3 – Use as much as possible @media queries, there’s a bunch of tutorials and materials out there who can teach you exactly your needs. This is a very good point for multi-device density. And never forget to use images by screen dpi as well, otherwise your App is floated with dpis not used.

4 – For Android Developers, always clear the content of your App first then delete the App from the device, before you generate another version to your device, PhoneGap always cache the content of loaded files and you will be failing if you’re trying to fix some bugs on meantime.

5 – Use only the device capabilities you need it, Specially if you’re in Android and by default the ./create methods enables everything by default, you might be scary your user if all available capabilities are in use.

6 – Test your code in Chrome, Since uses the lastest webkit approach, you will need it to emulate your content and test media queries.

7 – Continuing with the testing code approach, Forget about Emulators when you’re designing the UI, you don’t need them for creating UI and workflow. You just need to fire up a Emulator when you need to test device capabilities like Camera, Mic. Even if you need GPS you Chrome serves very well those things.

8 – DRY (Don’t Repeat Yourself), Use AngularJS for the databinding, very usefull for Mobile developers. But if you’re a good MVC fan, BackboneJS is there for it.

9 – For Blackberry developers, use their own API for Media, PhoneGap API for Media is slow on BB6 devices, works awesome on BB7, specially playing local files.

10 – For iOS developers, Keep in mind for big density, so do a very well elaborate images for those devices, otherwise the Apple’s team will reject your app if graphics are poor. “Trust me, they will”.

SublimeText 2 Open in Browser plugin

2
Filed under SublimeText

Sublimetext is a great lightweight tool for developers, is written by python and has a lot of developers out there that support with plugins and an entire ecosystem. It’s cheap and anyone can afford to pay.
But on every brought to life IDE doesn’t not complete much all developers need, but if there’s a way you can customize yourself has a lot of potential for better usage.
My blog post is related to that, SublimeText has a way to customize your IDE and you can make your own stuff. If you know a little of Python or googling you will find out that it’s pretty easy to write your own custom plugin to SublimeText.

In Tools menu you will see a menu option New Plugin

import sublime, sublime_plugin
 
class ExampleCommand(sublime_plugin.TextCommand):
	def run(self, edit):
		self.view.insert(edit, 0, "Hello, World!")

Pre-defined function and you half way of your new plugin, which in common words commands, since sublimeText has inside python compiler you can write direct commands to it over Console Command ( Cmd + `) or (ctrl+`).

Anyway, you figure out how it’s work, but my problem was a simple task, how to open a file that I’m editing directly in browser by shortcut like we do in Dreamweaver, Eclipse on any other IDE out there.

Since I’m using XAMPP for local PHP development I wrote my own plugin and you can take advantage of it at your own. Assuming you have theses conditions no matter what is your OS.

Creating the plugin

1. Choose Tools > New Plugin.
2. Copy and paste the current source code inside the new plugin template that Sublimetext created.

import sublime, sublime_plugin
import webbrowser
import os.path
 
# Author - Igor Costa  www.igorcosta.org
 
class OpenBrowserCommand(sublime_plugin.TextCommand):
   def run(self,edit):
      url = self.view.file_name()
      self.openwebfile(url)
 
 
 
   def openwebfile(self,content):
	      if self.view.file_name().endswith(('.php','.html','.aspx','.asp','.js','.css','.xhtml','.cfm','.jsp')):
	      	# I have c:/xampp/htdocs which counts 16 characters, replace with yours path length 
	      	webbrowser.open_new('http://localhost/'+self.view.file_name()[16:len(self.view.file_name())])
	      else:
	      	sublime.message_dialog('Available only for web files')

Again, since I have XAMPP installed at c:/xampp/htdocs I have 16 characters to substring from file_name, which is limited in the current openwebfile function.
If you have other path, please make your count on that.

3. Save the file with name open_web_files.py NOTE: SublimeText will save automatically in the right path for plugins.

4. Now it’s time to bind that command to a shortcut. Go to menu and select Preferences > Key Bindings User

5. Once you hit that file you will see [] braces. Inside this braces you paste this code.

[
	{ "keys": ["ctrl+enter"], "command": "open_web_files" }
]

5. Save and try with shortcut, on mine I put CTRL+ENTER to execute the open_web_files command which translates to open_web_files.py file we created.

Hope it’s helps your productivity.

We need tools, not frameworks for HTML5

5
Filed under HTML5, mobile

I don’t know you, but since HTML 5 hit the internet with strong impact, many companies and small group of people are in battle to stabilize themselves as reference in this area with their competitive frameworks, toolkits and bootstraps.

But on my point of view that they’re missing is a competitive IDE, tool, UI design, to make that happen in real world scenario. I’ve always believe that no developer should write a single line of code in js/css/html,WebGL, because each browser policy and standards, but writing in their comprehensive language like Ruby, PHP, Java,Scala, etc. Those language that manipulates docs written in html/css/js.

But to get rid of this, lets keep focus on Tools, that really help developers to make things smooth and awesome.

There are right now few, very few IDE that help to make competitive apps, but those IDE are far from complete to support the dynamic way as js/css/html does.

Let’s see if any Inc. or individual reads this post, we don’t need framework, we need tools to make HTML5 even more productivity.

And you may argue; Don’t we need frameworks too? Yes, but not too many, a progressive adoption isn’t bound by only one point of growing, but several points.

Update 01/20/2012 : Suggestion to read after here, a post that Grant Skinner did http://goo.gl/NL8Ov

Midnight Coders set on fire , let’s begin 2012 with right foot.

0
Filed under Android, Flex, WebOrb

Here’s the last message from Midnight Coders guys, they have awesome news to 2012.

Here’s our New Year’s present from Midnight Coders: We just released version 4.5 of WebORB for Java and WebORB for .NET with a bunch of enterprise class features. We have worked long and hard to make it happen and it feels great to make the releases available for you right before the New Years! Here’s what we put into 4.5:

- WebSocket support for JavaScript-based messaging applications relying on publish/subscribe messaging model. We also provide a JS library for making it ultra simple to build JavaScript pub/sub apps.
- Our Data Management framework has been updates to support multi-schema databases. The data management code generator can produce server-side code in Java/C#/Vb and client-side code in JavaScript or ActionScript.
- Conditional message delivery in Publish/Subscribe messaging support by WebORB. All supported messaging clients (JavaScript with polling, JavaScript with Web Sockets, native Android, Flex/AIR, Flash, Silverlight, native Java and .NET) can create messaging Consumer with selectors expressed as SQL-92 queries. This applies to internal WebORB messaging as well as integration with MSMQ, NMS and JMS.
- We added Heroku to the list of cloud-based deployments supported by WebORB for Java. The complete list now includes Heroku, EC2 and Google App Engine.
- Data Management offline mode support for Flex/AIR clients. This applies to both desktop and mobile clients.
- Updated Flash Builder plugin to support the latest release of Adobe Flash Builder (4.5 or above).
- Bug fixes. You can see a complete list of all addressed bugs at:
WebORB for .NET: http://dev.themidnightcoders.com:8080/secure/IssueNavigator.jspa?mode=hide&requestId=10210
WebORB for Java: http://dev.themidnightcoders.com:8080/secure/IssueNavigator.jspa?mode=hide&requestId=10211

Download your copy and let us know what you think!

Happy New Year Everyone!

Go get it! Kudos to all Midnight coders team and Mark.

Serendipity on an era

2
Filed under Flex, Personal

This resumes right now the Flex proposal to Apache.

I’m glad to contribute to future of Flex SDK, I hope this make changes in my last post about a technology that struggles others.

Let’s make change otherwise others will do.

The end of an era

4
Filed under Flex

Hello fellows.

I guess you already know about the recent news from Adobe Flex team from past 30 days, among all those announcements made by Adobe itself. I guess this is the right time to say good bye to Flex technology to Desktop/Web.

It’s sad to see a technology that is beyond it’s time of any other current technologies out there today failing in hands of few people at Adobe that doesn’t see the potential of it to keep going.

Yesterday, they’ve announced that Flash Catalyst will discontinued and Flash Builder Design Mode too, the funny fact is that i wrote about Flash Catalyst before “We say NO to Flash Catalyst until…“.

I still have a asked question that remains until now, why they didn’t put Catalyst inside Flash Builder Design mode? I guess in overall ongoing stuffs from Adobe Managers Peeps, they wanted to monetize as much as they could the SDK donated to community as possible, that didn’t work out pretty much.

They are now trying to push Flex SDK truly to community hands, but still pending on AIR runtime and Flash Player runtime which will be still proprietary in their hands due to several third-party and also monopolization platform.

Despite the fact that they said still committed to the Flex ecosystem, isn’t what is happening in real world. We have gracefully 2 only on going projects at house done in flex and had 5 others, but our clients refused any attempt to use Flex in their current projects, because the way Adobe announced the first blog post about Flex.

As Ted Patrick said,

Watching Adobe remove engines, wings, drop fuel, seats while in midair flight with customers aboard is truly fascinating. #flexsummit

This is what real world and enterprise world is seeing the actions from Adobe, even if they try to fix that, companies doesn’t believe no longer to that efforts they want to make.

The only thing left behind for all those glorious 7 years, was the dozens of friends out there inner and outer Flex team, Blog community, a lot of dudes out there. That was one of the best time I had before. I will miss you guys a lot in trench.

With all said, it’s time to say good bye to Flex development. Isn’t because about HTML5 or other stuff, it’s just because Adobe doesn’t know how to run a company even a excellent product.

If things change for positive side, I will considering using it.

The 3 secrets recipes to get a successful Mobile App

2
Filed under Android, iPhone/iPod touch, mobile

I’ve been working lately for the last 2 years on Mobile development for ios, android and now on Playbook. Most of my 19 mobile apps done are rarely download by others because most are enterprise level others are on brands control which contracts can’t blame, but some are really success because brands name.

Anyway, after those year and getting so much fun on mobile development and also by user perspective, it’s quite simple to get success with your app. You just need to follow the great samples out there, take the best characteristics of those examples and start doing yours.

Let’s make it simple, imagine 3 main categories, you will don’t need much more than that to get success.

1 – The dumbest as possible

In real world we are Simpsons, no matter how much you want to argue with me, we all are dumb, it’s kind part of human race.

Take this example of app http://t.co/uj1IGQW1 How 50k ~ 100k download a success app like that?

Plucking hair? Awesome idea, I mean as thinking as dev I’m proud of developer’s who did that and you know many people download because they want
to spend time between a flight or waiting for coffee on Starbucks.

The secret for this category is to make the dumbest app as possible, don’t re-invent the wheel, we have many dumb behavior just translate that to an App and you will get a impact on 1mi or 2 mi people. Do you have an iphone? Then you remember iFart don’t you?

2- The Funniest to all ages

If you have a device where you want to interact with it, what you human think firstly? Games! That’s it, no big deal, just that.

That’s the first thinking when you think funny. And an App in this category should be Dumb like this app or Awesome like those on video.

Or even better, genial idea with funniest as possible like this.

When doing apps on this category the secret are: Make them awesome, full of rich graphics, funny sounds, when possible interact with our daily life, that should works on parties, wedding, even playing with the cops or political figures. The funniest as possible the better it will be.

3 – Just simple as that

When you interact with your mobile Apps, how much hands do you use? Regularly 1, isn’t? That’s the point. Ordinary people are must making check-in in places, twitting, chatting, sms, typing and finally talking, those things we use with only one hand, why should your App on smartphone need to use two of ours? Isn’t odd this behavior to apply on your Mobile app? On Tablet is plausible to use it , because we read magazines, e-mail better, play more awesome games but on smartphone doesn’t make any sense to me to use both hands to interact with an app, you just need one and your attention on where you’re. Don’t even challenge me if you never tweet on driving.

If your app just want to use one hand only, make it simple, don’t add all garbage stuff we have on laptops, pc, because there has too much space for it, more processing power, more memory power and better one, more fast internet connection.

Smartphones are new market, why don’t make this market simple, elegant and functional. The future in this category is to look back in 90’s; Where we have simple functions, features on our PC. 3 Features are great one for your web start-up.

If you think to put all features you have in a web version of your app, why did you make the web version anyway? Its has to be done to be smooth integration, PC and Laptops are going to have long life 8 or 10 years. Or do you consider developing code and debuging on a phone ? Tablet? Maybe, but not now.

The secret to this category is to make functional, simple and 3 features only, that’s all we need on mobile App for smartphone, like this one.

Voice, 1 finger type and hold and that’s it, it’s functional and just work. That’s 100k and 500k download the app. Because it’s easy to interact with it.

Almost 60 years ago a crazy one told us “This simple thought made a deep impression on me” Who told that?

Ah! don’t forget all apps should be social, don’t sell expensive more than U$1.99.

Be successful my readers.

What’s new on Flex 4.6

1
Filed under Android, Flex, Flex Mobile

flexmobiles
For sure you’re probably working right now on next killer Flex mobile apps to hit Apple Store, Android Market or Blackberry App world. But you may not knowing or maybe loosing some great news that Flex team is working right now on next Flex 4.6 SDK.

By far or even shorter time it’s a very sustainable build for Flex mobile development with 50% gain performance, and they’re not lie, it really fast, kind of building native sensitive app, or close to that with the very intuitive way of custom interface that only on Flash platform you can have with easy tasks.

Check out this beautiful article wrote by Jacob describing those new features that you will face and apply for a pre-release program to start testing the new SDK and also some other features that I might not be able to talk over here due to NDA.

Google Maps for Flash will be discontinued

0
Filed under Flash, Flex, Flex Mobile, Google

That’s Humble for sure, But Google decide to focus on other areas, such us Google Maps for Javascript instead of continue growing the SDK for Flash Platform.

As google said, only a fraction of usage was made for those apps that take advantages of GMaps Flash version.

Luckly Google made promises to still support critical bugs or security issues, but said NO MORE NEW FEATURES. Current SDK will be available until they decide to keep alive.

But I guess if you have the SDk keep in your hard drive, Maybe will hit out doors next year or so.

I’ve told in a post where I hacked Google Maps for Flex Mobile devices using no that SDK, but Javascript V3 with StageWebView. Check out here.

Detect Connection on Flex or AS3 Mobile Apps

1
Filed under 3.0, AIR, Actionscript, Android, Flex, Flex Mobile

This is a small screen cast where I demo how to develop and how to solve the problem of dealing with connection, if you’re game developer and want save local score or on-line score, or even if you’re enterprise developer who are whiling to save off-line data for sales apps.

Hope you enjoy, and sorry for noise sound!