Tag Archives: PhoneGap

Launching the Facebook & Twitter Websites From a Web App

25 Mar 2013

Creating a link within your mobile HTML5/web apps is exactly like creating a link that launches in a new window, you simply do the following:

...
<a href="http://somewhere.com" target="_blank"></a>
...

Or via JavaScript:

...
<script language="javascript">
  window.open('http://somewhere.com');
</script>
...

The above does what one would expect in most cases – launching the URL in the device’s mobile browser. However, on iOS if we are trying to go to a Facebook or Twitter site such as in this example:

...
<a href="http://www.facebook.com/pepsi" target="_blank"></a>
...

…and the Facebook App is installed on the iOS device the Facebook App itself will launch instead and present the Facebook login screen – which is not what we want to happen. In this case getting around this iOS quirk is easy – create a proxy page on a server of your choice that will redirect Mobile Safari to the desired location.

For example you might have a link like this one within your web app:

...
<a href="http://myserver.com/redir.html" target="_blank"></a>
...

Given the above your proxy page would contain a single line of JavaScript:

...
document.location.href = 'http://www.facebook.com/pepsi'; // go to the branded pepsi facebook page
...

Pretty simple… but in my specific example I want to have a single proxy page handle multiple Facebook and Twitter cases. Given this information the link within my web app looks similar to this:

...
<a href="http://myserver.com/redir.html?b=abc&sn=fb" target="_blank"></a>
...

The convention that I’ve setup here is that I have a link to a specific brand (“b”) whose branded social network (“sn”) website that I want the user to go to. In my “redir.html” document I have some simple JavaScript to inspect the URL’s name/value pairs and thus branch to the desired brand’s specific social network website based on that information.

...
<script language="javascript">
  var loc = document.location.href.split('?');
  var args = loc[1].split('&');
  var brand = args[0].split('=');
  var sn = args[1].split('=');
  if (brand[1] == 'abc'){
    if (sn[1] == 'fb'){
      // go to the brand's facebook site
      document.location.href = 'http://www.facebook.com/abc';
    } else if (sn[1] == 'tw'){
      // go to the brand's twitter website
      document.location.href = 'http://www.twitter.com/abc';
    }
  } else if (brand[1] == 'xyz'){
    // etc...
  } 
  // etc.....
</script>
...

Solving “The connection to the server was unsuccessful” Error in Android/PhoneGap

10 Apr 2012

At some point in time you will always have to update your dev environment – and inevitably when doing so you will find that you can’t compile your apps any more for any sort of a number of reasons – doesn’t matter if its iOS or Android (though I find its much, much more common on iOS). Well, today I’ve updated my Android SDK since I’d like for the first time ever to be able to use the AVD as Google has improved performance in that area. However, upon compiling one of my apps I have run into this error:

...
04-10 10:46:13.672: I/System.out(4057): onReceivedError: Error code=-6 Description=The connection to the server was unsuccessful. URL=file:///android_asset/www/index.html
...

This can be solved by adding a line to your main activity.java file:

...
super.setIntegerProperty("loadUrlTimeoutValue", 7000);
...

The timeout value itself is arbitrary, here I have it at 7 seconds. Adding this one line above the super.loadUrl resolves the “Connection to the server was unsuccessful” error.

Also, check to make sure that any remote scripts such as those being delivered to the app from a server are accessible. Sometimes I forget to remove the remote debugger from a project and find that this error will appear because the script cannot be downloaded – in that case you see the error message appear while the app loads behind it. So, check your script tags for remotely loading scripts and remove any hooks to remote debuggers/testing servers. You should also download copies of javascript libraries and keep them within your app to remove or at least reduce the chances of this error appearing.

Prevent PhoneGap UIWebView Bounce in iOS

14 Mar 2012

Here’s a quick one – sometimes your html5 app will for whatever reason cause the UIWebView to break out of PhoneGap’s bounce-less restrictions (for lack of a better way to describe it). This will resolve the issue – in Xcode, look for your AppDelegate.m file, located within the Classes directory. Open that up and look for the function called:

...
 (void)webViewDidFinishLoad:(UIWebView *)theWebView
...

Within the curly braces paste the following line:

...
[[theWebView.subviews objectAtIndex:0] setBounces:NO]; 
...

[edit…]

The ability to control bounce has moved to the config.xml file – there may be multiples of this file within your PhoneGap project so if editing one doesn’t seem to do anything you’ve got the wrong file – do a search for the other one.

Within the config.xml add this node:

Changing Target Android Version in Eclipse

12 Mar 2012

This one takes care of the “Attribute minSdkVersion(x) is lower that the project target API level(x)” error that you may encounter if attmpeting to change your app’s Android target version after having setup your Eclipse project for Phonegap. The error manifests itself as a build error with this the following description (which illustrates a target of 8 being below the projects API level of 10):

To change the target Android API level you need to do two things:

  1. Update the Android Manifest
  2. Update the App Target API Level

See this page for more information on Build Targets and
acceptable values: Android API Level Guide.

First go to your project folder in Eclipse. In the root you should find a file called “AndroidManifest.xml“. Double-click this file. Eclipse will either show you the UI view of the XML document, which looks like this:

Or Eclipse may show you the manifest in source view which would look like this:

In the UI view of the manifest you are looking for the “Min SDK version” filed – set that to the desired SDK version that you want to target. Save the change and then close the manifest. If you cannot locate the Min SDK Version then look under “Manifest Extras” and click on “Uses SDK” – the desired field will appear to the right under the “Attributes for Uses SDK” heading.

If you see the source-code view for the manifest then look for this line:

...

...

… and simply change the number (“8” in the above example) to whichever target API Level that you’re going for.

Next, you need to change the Project Build Target. To do so you will locate the root of your project within the Project Explorer (this appears as a directory tree structure), right click the app project root and select “Properties“. You will see the properties panel which looks like this:

At this point simply select the proper build target, apply and close.

Eclipse Tips for New Users

28 Feb 2012

I don’t know if this is true, but I imagine that the Eclipse user-base is exploding due to the advent of PhoneGap and Mobile Application frameworks like Sencha Touch and JQuery. I’ll go a step further and assume that a significant portion of HTML 5 Mobile App Developers are coming over from the front-end web development world since these new technologies have dropped the entry curve considerably to mobile app development.

So, a lot of new Eclipse users in a new IDE means… (drumroll)… a lot of questions. So in my short time in using Eclipse I’ve come across a handlful of things that I find myself using/doing all of the time that saves time. I thought I’d share these “tips” as you might find them useful as well.

TODO

This is a very handy feature. I find myself starting Sencha Touch projects by first building out the “skeleton” – all the panels, nested panels (the parents of which I personally call “card decks”, as most child panels have the “card” layout), setting up listeners, creating empty functions knowing that I will need to flesh them out at a later date, etc. And so while doing this I need a handy way of indicating that there is something to do in that particular location in my code. Eclipse has a nice visual que for this called “TODO’s” that when used appear in a thin vertical strip next to the vertical scrollbar. This strip is called the “Overview Ruler”. To add a TODO to your project simply create a comment and put the “TODO” text after it (i.e., “/* TODO */” and Eclipse will display a blue marker in the Overview Ruler. Feel free to expound on what needs to be done within your comment as well.

Eclipse also does something that I think is annoying and that interferes with the “TODO” feature – it displays a yellow marker in the same vertical area as it does the blue “TODO” markers for things like variables that it thinks arent used or for lines that might be missing a semi-colon (which often are not). All this clutter will hide your “TODO” markers. To turn off the yellow markers do the following:

Right click the Overview Ruler and choose “Preferences”:

Next click “Annotations”, then scroll down to the “Warnings” Annotation Type. Click “Warnings” and then deselect “Overview ruler”. Click Apply/Ok and your done.

Wildcard Searches with CTRL+F

Find/Replace is not so much of a tip as we’re all familiar with it. But, if you are like me and have a long history using Dreamweaver you may have learned how to take advantage of regular expressions in your search/replace activities. No worries, this little tip is simple – you can do wild card searches in your projects by using an asterisk (*) – as long as you check the “Regular Expressions” check box. This is especially useful if you employ naming conventions for variable and function names.

For example, if you know that you are looking for an ID but don’t recall the entire string, but know that due to your naming conventions that it starts with “txn” and its a “sheet” (a Sencha Touch-specific feature) you would search for all occurances of it by entering “txn*sheet” and then hit the Find button until you find what you’re looking for.

Jump to Last Edit with CTRL+Q

I use this more than anything else – simply jump back to your last edit point from anywhere in your code by pressing CTRL+Q.

Go to line using CTRL+L

Not much to say here – when I debug using Chrome with the developer tools turned on I can see where errors and my console.log statements appear within my code. Just look at Chrome’s console, note the line number, then zip straight to the line in Eclipse.

Filter LogCat

LogCat is where all your console.log statements appear within Eclipse – as well as a million other things happening on your phone or tablet. So much stuff shows up that the one thing that you’re interested in often just scrolls out of view. You can filter the LogCat window by typing in an expression where Eclipse indicates as much:

The easiest thing to do is to simply follow Eclipse’s direction and type the Prefix of what you are looking for and enough characters to get what you want. In our case, what we want is the Web Console. But thats two words with a space in between which won’t work (as you will discover). We can do something as simple as just “tag:web” which narrows down the list greatly:

Thats better – but not perfect. We see everything with the word “web” in its Tag, but all we want is the “Web Console”. To get there we need to write a Java regular expression – the entire string would be: “tag:^web\sconsole$”, as shown below:

And, if you are lazy, you can save your regular expression for later use by toggeling the Saved Filters View button illustrated to open the Saved Filters pane:

At this point, click the “Plus” icon and fill in the desired fields. Whenever you want to filter the log you can just click the Saved Filter View button to reveal your saved filters and select the filter that you want to apply.

Memory Allocation

Eclipse runs better with more memory, and what doesn’t? Thing is you might have 8 or 16GB or more in your dev machine but that doesn’t mean Eclipse is using it. The memory it uses is defined in the eclipse.ini file. If you get out-of-memory errors and the like you need to allocate more RAM to Eclipse.

On a standard Windows install, you will need to edit the ini file which is located in the root of your Eclipse install directory. This is a topic that others have expounded on better than I ever could so I’ll leave you with a link to a particularly good post on the topic:

Read more here: http://blog.xam.dk/?p=58.

Logo

All content © 2012-2017.