Wednesday, January 30, 2013

PhoneGap with Roboto Font

Want to use Google Web Fonts? Check out this post.

Fonts are one of the more subtle things in application design. Choosing the right font for the application can make an amazing difference that users like but don't quite know why. Adding custom fonts like Google's Roboto, to a PhoneGap application isn't difficult, but there are a few gotchas to avoid.

Use TrueType Fonts
With PhoneGap, I normally assume if it will work with the web, it will work in PhoneGap. Usually this is true, however not with fonts. PhoneGap is limited to the browser implementation of the device, most of which still don't support web fonts. But despair not, nearly all support regular old TrueType fonts. So I downloaded the TrueType version of the Roboto font from the Android Design website.

Use Relative Paths
The great debate between relative and absolute paths rages on even in PhoneGap. And PhoneGap adds its own twist to things, absolute paths use its "file:///" format. This is particularly painful since it incorporates the name of the device, which blows cross-platform support away. It is much easier to get things to work right by using relative paths.

Beware the Emulator
For a reason I still don't understand, my emulator would not display the custom font. For a very frustrating hour or so, I kept trying everything I could to get it to work, but it would not. Finally, I put the app on a device and it displayed the custom font without issue.

Only Download What You Need
The final thing to be aware is that fonts can get quite big. The complete set for the Roboto TrueType font is over 2.6 MB in size. Most of your users will download your app over the air and then keep it on the ever shrink space of their sd-card. Discard the fonts parts which are not used in your application. If you don't use 'Condensed', don't include it in your build.

If you need some code to get you started, I have push a sample program which simply displays some text in the Roboto font to my GitHub repo at PGRobotFont.

Monday, January 21, 2013

Slide Panel - A jQuery (Mobile) Plugin

Now updated to jQuery Mobile version 1.3.1 and jQuery version 2.0.3.

One the tougher things to deal with in mobile development is the lack of screen real estate. Every mobile device, even those with the biggest screens could use some more screen space.

The Slide Panel
The Slide Panel's paradigm is simple. A small bit of the UI, twenty pixels hangs out on either the left or right edge of the screen. Tap it and the panel slides out the rest of the way to expose a palette of icons, text, or whatever. Tap an edge of the panel again and it slides in and out of the way. Or simply go crazy tapping icons to your hearts content. 

To begin building the slide panel, I started with the jQuery Boilerplate. This is an excellent framework for beginning any plugin. I stripped away all of the comments and began customizing it to my needs.

Calculating Dimensions
One of the first things I needed to determine was the dimensions of the panel. Width is needed so I can determine the distance for it to slide in or out, note that I use the outerWidth() method here since I want to include border's dimensions. Height I calculated for another purpose, which got obsoleted as I kept revising the code. 

Defaults and Options
The panel can slide from either the right or left of the screen by setting the option, side. If no side is specified, left is the default. The speed of the slide animation can also be changed by passing the option, speed. The default here is 500 milliseconds or half of a second. 

The meat of the plugin is in the init method. In this method the initial position is set and the click event is hooked. Every time the panel is tapped, it is either slide in or out. Also I do some checking to prevent an event meant for an icon or other element on the palette from bubbling up to the panel. I do this by comparing the id of the original target of the event to the panel's id.


So far, I have only spent a couple hours working on this plugin and it could still use some more work. The plugin is intended for jQuery Mobile, but nothing stops it from being used on a desktop, jQuery enhanced website. Not sure when I will have time to clean it up and improve it. The complete source code is on my GitHub account at: RNC Slide Panel.

Fake GPS - Simulating Android Location

The Problem
Location is one of the things that give mobile apps an edge over their desktop bound counterparts. Working with location can be challenging, mainly because of the need to simulate different locations in order to test your app thoroughly. Android has always had a way to simulate GPS coordinates via the DDMS, but quite frankly it sucks. You have to do the grunt work of finding co-ordinates and then manually entering them. Plus it requires that you keep your device chained to your dev box.

The Solution: Fake GPS
Fake GPS is an app available at the Google Play Store, both for free or for just $1.49 you can get the Donate version and show your thanks, trust me you will want too. 

What makes Fake GPS so cool is its simple and easy UI. The main screen is simply Google Maps with a marker in the center of the display. Move the map to a location and tap the Set location button and now your device thinks it is at that location.

It has a bunch of other features as well. You can input a lat/long, save favorite locations, view a history of previous locations. All in all this is an excellent little app which will save you loads of time if you are creating mobile apps with location capabilities. 

Sunday, January 20, 2013

From Mobile Website to Mobile App Talk

I will be giving a talk titled: From Mobile Website to Mobile App, on February 20th at 7 PM for the group jQuery LA. at: 

418 bamboo lane, suite A, Los Angeles, CA (map)

If you would like to use your web skills to make apps for iOS, Android and even Windows 8, this is the talk for you. 
We will begin with the most famous cross-platform framework, PhoneGap. We will talk about what it is and isn't, how to set it up, and explore the challenges it presents. Next, we will look at the recently released Icenium. Like PhoneGap, it is based on the Apache Cordova project, but it offers a radically simplified setup process, allows development for iOS on a non-Mac machine, and when combined with KendoUI, offers the ability to automatically change UI based on the o/s. If time permits, we will also explore Windows 8 which offers an HTML/CSS/JavaScript development environment which is very similar to web development, but creates apps which can be sold at the Windows App Store.
Don't miss out, be sure to RSVP early.

Big thanks to everyone who came to see me talk at the super hip, Kleverdog Co-working last night. I always get a lot of love from jQuery LA folks. 

PhoneGap Class Info

Some PhoneGap posts in this blog:

Displaying Unicode Symbols in Android

Eventually in Android, you will need to display a non-ASCII character. You know, characters like the cents or plus minus symbols. They exist in Unicode, but not normally on American keyboards.  And surprisingly there isn't much information on how to do it.

Since I also do web development, I know that HTML has support for the full gallery of Unicode symbols. In order to display the cents symbol, the HTML is: &cents; and for the plus minus symbol it is: ±

Android has a class, Html, which has static methods for converting strings to and from HTML. For us, the method of interest is: fromHtml. This method: returns displayable styled text from the provided HTML string. Here is how we use it:

static String plusMinusSymbol = Html.fromHtml("±").toString();

Now, plusMinusSymbol, holds the string for the symbol, it can be used any where a String is expected. You can use the HTML for any Unicode symbol.

Friday, January 18, 2013

Setting Up Eclipse for JavaScript Development

Without the JSDT Installed JavaScript looks like one of the following photos:

If you are like me and you started working with PhoneGap after you had already setup Eclipse for regular Android development, you may have notice that Eclipse doesn't seem to like JavaScript. If you installed the Java EE version of Eclipse you should be OK, that version recognizes JavaScript from the start. For those who didn't install Java EE, here's how to install the JavaScript Developer Tool (JSDT).

To begin go: Help -> Install New Software... -> click. This will bring up the Install window. 

In the Work with: drop down, choose -- All Available Sites --. Then type: JavaScript Development Tools in the Search box.The JSDT is both under Programming Languages and under Web, XML, and Java EE Development. Which version doesn't really matter since they will usually both have the same version id. Select it. Then click Next.

Accept the licensing agreement. Then click Next again.

Click Next again. Once the installation is complete you will need to restart Eclipse in order for the changes to be applied.

Once you are back in Eclipse, you may not see a change in you already opened a JavaScript file using the text editor. This is because you taught Eclipse to use its text editor to open the file. Simply close the file. Then right click -> Open With -> JavaScript Editor.

Then you should see the file open complete with syntax highlighting. For seasoned Eclipse users I realize this may seem like a trivial issue which is easy to resolve. But for those of us who aren't Eclipse whizzes, it helps to be pointed in the right direction. 

Tuesday, January 8, 2013

An Introduction to ASP.NET SignalR

Your ASP.NET website needs SignalR, whether you know it or not. Users are no longer tolerant of stale data and guess what? As soon as a page leaves your server the data on it is stale. That where SignalR comes. It is an incredibly easy to use library for ASP.NET which gives your site real-time web functionality. Whether you use it for business or entertainment apps, you will be amazed how easy it is to work with SignalR.

SignalR allows you to make DIRTy apps with the tooling you already love. What's  DIRTy? Data Intensive Real-Time(y). Image the kinds of apps you can create.

We will begin with a quick overview of why SignalR is needed and why it isn't just syntactic sugar for WebSocket. Next, we will cover how to install it. Finally, we will dive into some code, beginning with a very simple example, move on to a more complicated examples.

I will give this talk on April 25th at 6PM to:

dot Net Group
 127 E. Warm Springs Road
Las Vegas, NV

Saturday, January 5, 2013

Titanium Second Look and Finished Calculator

In the first part of this series I started working on the calculator. Now that I have had a taste of Titanium, it was time to dig in and make the calculator functional.

The KeyPad
I began by looking at the KeyPad. Currently it only returns a view. What I really need is too pass an object back since I have no way to communicate to the keypad. While looking into that problem, I also realized that I had some replication of code going on. Each version of ApplicationWindow.js had its own copy of the KeyPad. So I moved keypad from there to app.js.

Next up, is the implementation of the calculator's logic function. I have decided to use events to communicate between different components. I like events since they promote loose coupling. The high level diagram is like this: the KeyPad communicates key presses to any one listening and listens for display updates from any one sending them. The logic function contained within the calc.js module has no UI. It simply performs the work and sends display events to anyone listening. In theory, it can be tested, but I haven't looked into unit testing in Titanium yet.

Things I Didn't Like
Overall I enjoyed developing this small project in Titanium. The environment is more solid than working in the browser, with no global space to muck things up. It almost seemed magical when I pushed the code to both Android and iPhone. This was a lot more pleasant than my experience using PhoneGap. There you work from different environments. But it isn't perfect. There are two things I didn't like, one minor, one major.

Titanium doesn't seem to have any way to refactor code. In other major development environments, like Visual Studio, Eclipse, and Intellij-IDEA, being able to refactor has now become a mandatory feature. It makes it easier to improve your design, make your code clearer, and play well with others. Not having this is irritating.

Internet Required
The more major pain is that Titanium requires Internet access in order to function. No Internet, no Titanium and that sucks. I have Internet access at home, work and most other places I go, but occasionally I am some where where it ain't. It may be an airport, a hotel room, or some other boring place where the best way to get through it is by writing code.

The calculator is now functional. I have posted it to my GitHub account. I am looking for to continuing my exploration into Titanium. Next up one of Titanium's newest features: Alloy.

Here is the link to the first part of this post: Titanium First Look.

Calculator on GitHub

Thursday, January 3, 2013

jQuery Mobile Video Course

My jQuery Mobile Video Course is available now from AppDev's LearnNowPlus. Here is the description directly from their site:

Course Description: jQuery Mobile is a framework for building mobile web applications. Unlike other frameworks it builds upon the web skills that you already have making it easier to learn and use. jQuery Mobile adheres to web standards which allows your site to be compatible with nearly every mobile device. In this course you will learn how to use jQuery Mobile to create your own mobile websites, how to give your site a unique appearance using the ThemeRoller, and we will show you debugging techniques to ensure that your site is deployed problem free. 

If you want to get up and running with jQuery Mobile quickly, I don't think there is an easier way.