orientationchange does not work in Mobile Firefox for Androids… WTF !

Yes, orientation change does not work in mobile Firefox. Strange!, but it is. So, when you rotate your mobile device from portrait to landscape mode and back to portrait mode, the orientationchange event is not fired in Firefox browsers for Android devices.

Normally for mobile browsers we detect the orientation change happening by registering to the orientationchange event.

window.addEventListener('orientationchange', function() {
  alert('orientation: ' + orientation);
}, true);

where the orientation property of the global object gives the current orientation that the device has been tilted to. For eg. 0 for portrait and 90/-90 for landscape.

However, when you run this code in firefox browsers for Android, the event is not fired (I tested it on Firefox 20/Galaxy S3). And this happens to be a bug. I mean how can you miss such a common thing in a big big browser!!

But there is an alternative way to detect the orientation changes in firefox browsers and that is by using Media Query detection technique. Also to let you know, I used the window.resize event to detect the orientation but it did not give correct results. The Media Query method worked perfectly. Here it is,

var test = window.matchMedia("(orientation: portrait)");
test.addListener(function(m) {
  if(m.matches) {
    // Changed to portrait
    alert('portrait');
  }else {
    // Changed to landscape
    alert('landscape');
  }
});

Still the window.orientation property is undefined for firefox browsers. So, you can use that to detect if it actually supports orientation change event. Who knows later they might start supporting. This is how you can do that,

if(typeof window.orientation === 'undefined') {
  //use media query technique
} else {
  //use orientationchange event handler
}
Advertisements

How to install Phonegap Facebook plugin for iOS

This post has come out of my recent struggle to integrate the Facebook Connect plugin by Dave Johnson and make it work with my Phonegap iOS app. I had a hard time figuring things out as I was new to Phonegap iOS development. I was already doing Android apps with Phonegap, but iOS has given me some tough time. Nevertheless, around 2 days of gloomy and sad face was finally rewarded with a big smile. So, better I document it somewhere so that I do not struggle again and that’s where the inspiration for this post lies. And I must say, the official documentation is pathetic for newbies.
Alright, let’s get started. I will go step by step into the process with all details and screenshots so that it is very easy for you. In this post however, I will not be talking on how to create a Phonegap iOS app, or how to create Phonegap iOS plugins. For that you still need to look at the official documentation. I will only discuss on how we can install the Facebook plugin with a Phonegap iOS app and get started using it.
Before moving further I would like to inform you that I am using Phonegap 2.2.0 for my demo. There are new versions available – 2.5.0 being the latest at the time of writing. So you might want to check the official pages if you are using the latest version of Phonegap. But the steps mentioned below should work with the new versions of Phonegap as well. OK, time to start now.

Note: Phonegap and Cordova are the same (well, at least for me..). I prefer calling Phonegap.

1) Do I need a Mac? Simple answer – Yes, you need a Mac. I have heard and read thousand times about  people asking if iOS apps can be developed in a Windows machine. Simply, I just did not research, instead I have a Mac and I started on it. But the answer is you need a Mac definitely, since you will use XCode and the iOS SDK for development.

2) Create a Phonegap iOS App – I am using Phonegap 2.2.0. I am not going to show how to create a Phonegap iOS app. For that look at this pdf documentation here. If you cannot open it, check out this link which is the pdf source. This should get you started. However I have some screenshots below which should also help you out.
a) I have created a basic Phonegap app – FacebookPluginTest inside Cordova22FacebookTest folder under Documents. See the screenshot below. I have used the Terminal to create the app. You can find details about the command in the document above. So make sure you go through it once.
Create a basic Phonegap app with Terminal Read More »

Authoring “Adobe Edge Inspect Starter”…

My book “Instant Adobe Edge Inspect Starter” on mobile web debugging and testing has been published and it is now available online. For more details and to purchase you can visit here.

My book on mobile web debugging and testing.

Mobile web testing is currently a really time consuming and cumbersome process as there are no direct debugging tools available with mobile web browsers. Since mobile devices vary so much it is important to ensure that your web page looks as intended across the multiple mobile devices that you are targeting for your audience. Edge Inspect is a perfect tool for web developers and designers who are developing for mobile devices, allowing them to simultaneously test on numerous devices in real time as they develop without learning anything new.

“Instant Adobe Edge Inspect Starter” is a practical, hands-on guide that provides you with a number of detailed steps, which will help you to get started on testing and previewing all your mobile web projects on multiple mobile devices. This book will also show you how to use all the other available features of Edge Inspect and make the entire testing process on mobile devices very simple, effortless, and faster.

This book starts with an introduction to Edge Inspect and will take you through a number of clear and detailed steps needed to set up a working installation, and get up and running with testing your web pages on mobile devices.

You will also learn why traditional ways of testing mobile web applications are not very helpful and how Adobe Edge Inspect overcomes it. You will have a look at connecting single and multiple mobile devices with your computer and how to browse in sync.You will learn about remotely inspecting and previewing mobile web pages on a targeted device and directly see the changes taking place on the device itself. The book discusses in detail about creating your very own simple mobile web application, running it from a local server and testing it across mobile devices. You will also take a look at how to use the Edge Inspect web inspector window and do some basic HTML, CSS, and JavaScript debugging. And then finally you will have a look at using your own local Weinre debug server with Edge Inspect and some other very important features. If you want to take advantage of Adobe Edge Inspect and make mobile web testing a lot easier, then this is the book is for you.

“Instant Adobe Edge Inspect Starter” will guide you in getting started with Edge Inspect and will make testing on mobile devices a lot simpler and faster. The book is packed with a lot of examples and diagrams that will help you to test all your mobile web projects without any hassle.

Who this book is for?
This book is for frontend web developers and designers who are developing and testing web applications targeted for mobile browsers. It’s assumed that you have a basic understanding of creating web applications using HTML, CSS, and JavaScript, as well as being familiar with running web pages from local HTTP servers. Readers are also expected to have a basic knowledge of debugging web applications using developer tools such as the Chrome web inspector. And of course you need some mobile devices for running the example in this book and testing it.

Reviews

Ben Forta (Adobe Systems Inc‘s Director of Developer Relations): http://forta.com/blog/index.cfm/2013/4/12/Instant-Adobe-Edge-Inspect-Starter

Creative and Codehttp://creativeandcode.com/review-adobe-edge-inspect-starter-ebook/


Handy eBook to have available – by Chris.M
Overall, the book does a great job of getting you up and running with Edge Inspect. The first couple of chapters focus on getting the application installed on your computer, and then getting it set up on your mobile devices. Though the installation is fairly straightforward, the instructions they provide are detailed with plenty of screenshots, so you should have no issues getting set up.
They also give an overview of the best features of Edge Inspect. I’ve been using Edge Inspect for a while now and even I learned a few new things. The application really does make mobile testing incredibly easy with remote inspection and console log.
The eBook wraps up with some great resources for using Edge Inspect. If you are thinking of working on Responsive Web Design, Adobe Edge Inspect is an invaluable tool. I think the eBook is super handy to have as a reference, and for 5 bucks, why not?

worth having it as a reference – by Siddarth Kalyankar
“Instant Adobe Edge Inspect Starter” indeed is a starter for developers who wish to explore the possibilites of using Adobe Edge Inspector tool during their day to day development activity. It talks about Step-by-step, hands-on recipes to debug, test, and preview web applications on multiple mobile devices with Adobe Edge Inspect (Previously known as “Adobe Shadow” ).
This book assumes that the person who reads this is already into mobile web development and address some of his/her problems which are faced during the development cycle. This book is not intended to help you start doing mobile web development, but if you are web developer and willing to do mobile web development, this could come in handy for you as well.
The books briefs you about what is Adobe Edge Inspect, What are the reasons to use it and What you can do with with it. The main focus is on installation of the required components on your computer, the Edge inspect client on mobile device , how to pair mobile device with your computer and how to debug and preview. I found this information quiet useful as the entire installation process has been very well illustrated with screen shots focusing on Mac/ Windows operating systems, and Android/IOS for mobile device. The author has also provided with the code which can be used by first time developers to get started on their mobile web development venture.
If you are looking at speeding up your mobile web development, Adobe Edge Inspect is the tool and this book is worth having it as a reference.

More reviews from – Amazon

Adobe Shadow is now Adobe Edge Inspect

In a major move on the 24th of September, Adobe has renamed Shadow to Adobe Edge Inspect and now it has become a part of the Adobe Edge Tools and Services : http://html.adobe.com/edge/
Shadow had been a great success for mobile web developers and designers to remotely debug applications on the mobile device in real time. I had been using the preview version of Shadow for quite a time and has found it really useful, the last one being the Shadow Labs Release 4. So now the preview period of Shadow is ending on the 31st of October and after that Shadow will be invalid. Instead you have to download Edge Inspect and start using it.
You can get Edge Inspect by signing up for a free Creative Cloud membership subscription or a paid subscription. Get a account for yourself at: https://creative.adobe.com/join/starter. The free version allows only one device to be paired with your computer while the paid full version allows multiple devices to be paired simultaneously with your computer. Here’s a video demonstration on the new Edge Inspect release

Read More »

WEINRE – Web Inspector Remote Video by Patrick Mueller

Patrick Mueller is the man behind the Weinre tool – remotely inspect and debug mobile web applications. Here is a video of him talking about Weinre at PhoneGap Day US 2012.

If you would like to know more about Weinre and how to debug mobile web applications I have a few post on it. You can start from here.

And if you do not like setting up Weinre and working with servers you can have a look at Adobe Shadow which is a tool developed by Adobe on top of Weinre, functions similarly but you do not have to set up the dirty part. You can start from here.

Use your own Weinre server with Adobe Shadow – Step by step

Now that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using your own Weinre debug server with Shadow. What it does is that it fastens up the connection time and reduces the wait time when you are using the default Weinre debug server that Adobe has hosted on their servers. So if you have a local instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadow instead of using the remote debug server hosted by Adobe at http://debug.shadow.adobe.com:8080/. So let’s see how to do it.

First of all you will need to have the Weinre server set up in your computer. For that you will need the weinre jar file and Java installed in your computer. I have a full detailed tutorial on setting up and using Weinre in one of my earlier post. So please have a look at it and set up the server. You can check out the “Configuring and running the Weinre debug server” section in the postAssuming that you have the server set it up on your computer, then you need to start it. You can check my previous post for that too. Its all there.

Then you can verify if the server has started. Open your browser and navigate to http://<yourip&gt;:port where <yourip> is your machine’s ip address and port is the port number where the Weinre debug server listens to. You can find out the port and the details from the command prompt after you have run the server. The screenshot below shows my instance,


Read More »

CSS3 Coverflow animation for iOS – Adding Touch gestures

Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones, iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D transformations so it runs very smooth. In Androids < 4.0  it gives a horrible  look n feel.

Here’s the link to the demo. Check in an iOS device (open up in mobile safari),

Link: http://rialab.jbk404.site50.net/coverflowtouch/

and if you are looking for a desktop version of the Coverflow, you can check my previous post.

This is how it looks on an iPod touch

Read More »

JavaScript Touch event or Mouse event – detect and handle according to device

You might have faced this issue before or even might have wondered – How to write a single piece of code that establishes correct event in the device i.e touch events for mobile web browsers and mouse events for desktop browsers. You need not hard code the events for your app code. Once you detect and handle those events, you can run your app everywhere – mobiles and computer browsers. Normally when we develop an app for mobile browsers we test it in a desktop browser, so if you have touch events hard-coded into your script then it is a pain to change the script and make it work for computer browsers(replacing touch events with mouse events) and then change it back again to touch for mobiles. So, here is a small script/trick to universally handle the event and need not worry about devices,

var isTouchSupported = 'ontouchstart' in window;
var startEvent = isTouchSupported ? 'touchstart' : 'mousedown';
var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove';
var endEvent = isTouchSupported ? 'touchend' : 'mouseup';

If you see the first line of the script, it detects if ontouchstart property is available in the global window object. It it is available or it is a part of the window object, then it returns true else it returns false. Note that ontouchstart is a standard javascript touch event attribute. Now, if you are making this check in a computer browser (for e.g FF, Chrome or IE) then ontouchstart is not a property of the window object. So isTouchSupported will be set to false. Had it been a mobile browser (e.g iOS, Android) then ontouchstart would have been automatically a part of the window object and correspondingly isTouchSupported variable will set to true. This is all we need to detect. The next three lines establish a common platform for the touch vs mouse events i.e I am mapping the touch events to its corresponding mouse events.

Now, all you need is to register the event listener to your element so that some action is performed when the event is triggered on the element. Here is an example, (where myButton is the ID of my imaginary button)

document.getElementById("myButton").addEventListener(startEvent,function(){},false);

The startEvent variable acts as a placeholder. It will be replaced by mousedown for computer browsers and touchstart for mobile browsers. Similarly the other two events can be used. This way a single app can run everywhere.

Here is a good example with the usage (make sure you look at the javascript script code) – https://jbkflex.wordpress.com/2012/07/21/replicating-the-iphone-swipe-gesture-common-code-for-mobiles-and-desktop-browsers/

Here is another one – https://jbkflex.wordpress.com/2012/07/25/360-degree-car-rotation-common-code-for-mobiles-and-computer-browsers/

Please do suggest me if there are any better methods of mapping touch v/s mouse events.

A look at iScroll – native way of scrolling content in mobile webkit

Mobile web kit browsers do not allow you to scroll content inside a fixed size container or a div element. If you are a mobile web developer developing apps for iPhone and Android, you must have faced this problem before. If you use overflow:auto or overflow:scroll and expect to scroll the overflown content then you would rather see your entire web page being scrolled vertically. This happens because it is the default behavior of DOM touch events to scroll the page.

Just to overcome this problem I recently came across a javascript library iScroll which allows native way of scrolling content inside a fixed width/height element for mobile web kit browsers. So using iScroll you can have a fixed header/footer with position:absolute and a scrolling central content area.

iScroll uses hardware accelerated CSS3 transitions and transformations to scroll the content and it behaves exactly like the native way of scrolling in iPhone apps. iScroll is very easy to use – download the iscroll javascript library (which is available for download in the home page) and call it in your html page. Then set up your HTML and CSS and you are good to go. Latest version of iScroll at the time of writing this post was iScroll4, so you can download the library and use that. iScroll4 also supports a whole lot of other features like pinch-to-zoom, pull-to-refresh e.t.c to make mobile web development easier. I will not go into the details of iScroll as the site has all the necessary information and is very well documented. I believe you will find everything there to get you started in 5 mins.

Read More »

Save your mobile web app with an icon to the Home Screen – iPhone/iPod

Sometimes you may want to save your mobile web app to the home screen of your iPhone/iPod with an icon. Normally for every app that you install iOS creates an icon with a glossy effect and rounded corners in the home screen, and then when you tap on the icon the app starts. Also each icon has a text below it that says the name of the app. For mobile web apps that run in the mobile browser we can do the same. We can save the app to the home screen and also add custom icon to it. In this post I will talk on how to do that.

For the demo I have chosen one of my apps (web application) and I will show you how to save it to the home screen. First launch the app in the mobile browser, I am talking of iPhone/iPod here so open your app in mobile safari. Then tap on the icon as shown in the image below,

Tap on the icon to open the action sheet

It will open up an action sheet with all the buttons as shown below. Tap on Add to Home Screen button,

Read More »