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 »

Advertisements

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 »

Adobe Shadow – another way of remote debugging mobile web apps in iOS and Android

Logo used from Adobe Labs site

Adobe has come out with the preview version of their new tool Adobe Shadow that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices. With shadow you can remotely preview your mobile web projects and also debug them. In fact Shadow uses the WEINRE debug/web inspector client to allow developers to remotely inspect HTML , view console logs and also make changes to the DOM. In the last post I have talked about WEINRE in details. You can refer it if you are new to WEINRE.

Shadow allows multiple devices (mobile devices) to connect wirelessly to your computer and as you browse in your computer all the target mobile devices will be in sync. So when you make changes to the HTML DOM in the computer you can see the changes instantly on all the target devices.

You need three things to configure Shadow and get started,

1) Shadow helper application. Install this in your computer. Shadow is not available for Windows XP so you need a Windows 7 machine or a Mac (OS X 10.6 and 10.7) machine. This helper application must keep running at the time of a debug session that you will carry.

2) Google Chrome browser extension for shadow. You need to install the extension. You will get the link to this in the downloads page below.

3) Shadow client app for iOS or Android. Whichever mobile device you have, go to the app market and search for Adobe Shadow, find it and then install it. For example go to Apple App Store and get the Shadow app and install it.

You can find all the downloads in the Adobe Labs site : http://labs.adobe.com/downloads/shadow.html

You can also find a very nice video demonstration to get started : http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow.

Personally, after trying both Adobe Shadow and Weinre, I found Shadow easier to configure and get started with debugging mobile web applications remotely. For Weinre you have to install Java separately, use command line instructions and also inject javascript into the client code. This at times is a hassle and confusing for first timers.

This post was just a kind of teaser for you and in case you have not heard about Adobe Shadow you can give it a try. I also look forward to come out with a detailed tutorial on how to use Shadow with screenshots of my instance. Till then I am continuing to explore Shadow and similar tools.

Below are some of my previous tutorials that should help you.

  1. Debugging mobile web applications remotely with Weinrehttps://jbkflex.wordpress.com/2012/04/12/debug-mobile-web-applications-remotely-with-weinre/
  2. Use your own Weinre server with Adobe Shadow – Step by stephttps://jbkflex.wordpress.com/2012/08/28/use-your-own-weinre-server-with-adobe-shadow-step-by-step/
  3. WEINRE – Web Inspector Remote Video by Patrick Muellerhttps://jbkflex.wordpress.com/2012/09/18/weinre-web-inspector-remote-video-by-patrick-mueller/

Update
1) 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, performance and keeps the remote traffic local. 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/. Read how to do it here.

2) Adobe Shadow is now Adobe Edge Inspect: Read the post and find out what changes has been made : https://jbkflex.wordpress.com/2012/09/27/adobe-shadow-is-now-adobe-edge-inspect/

Debugging mobile web applications remotely with WEINRE

I started mobile web development around eight months back and at times found it very difficult to debug my apps. Normally everybody would start off with a desktop browser, look up the app in a desktop web inspector and then try to debug it and finally make it ready for the mobile browser. Even I used to do the same. I used to check my mobile app in Chrome’s/Safari’s developer tools. There I used to inspect HTML elements, change DOM style properties and check the result out and also see the java script console log messages in the console tab. This would normally serve my purpose but I had to adjust a lot due to resolution differences. Still there was a frustration and a feeling of had there been a tool to directly debug the app in the mobile device itself. And after a little head scratching and Googling I discovered an open source package called Weinre – Web Inspector Remote. With Weinre I could debug my mobile web app remotely – the app would run on the mobile browser and I could modify the DOM remotely, see log messages of it on the Weinre inspector that runs on my computer. And I must tell you, it has helped me immensely. It’s a wonderful tool to have and in this tutorial I will share my experiences of debugging with Weinre. First I will start off with How to configure Weinre and then talk on debugging a mobile web app, but before that let’s see some basics – Weinre and its components.

The Basics
Weinre is a remote debugger for web pages and if you are familiar with Firefox’s Firebug or Google Chrome’s Web Inspector, then you will find Weinre very similar. What it means is that you can debug a web app that is running on your mobile device remotely i.e on your computer. So, in your computer you can select any DOM node, make changes to style properties of the mobile web app and it will reflect in the mobile device on the fly. You will get more familiar with the things once I talk in details later in the article. First let’s see what Weinre is composed of.
Weinre consists of three basic components/programs – Debug Server, Debug Client and Debug Target interacting with each other. Let’s see what each of them means,

1. Debug Server: This is the HTTP server that you run from the weinre.jar file. It’s the HTTP server that’s used by the Debug Client and Debug Target. I configured the server on a Windows machine so all the steps I will talk about are in reference to Windows. For Mac users details of configuration can be found in the Weinre site.

2. Debug Client: This is the Web Inspector user interface; the web page which displays the Elements and Console panels, for instance.

3. Debug Target: This is your web page that you want to debug running on the mobile device – iPhone, Android phone or iPads.

Both the Debug Client and the Debug Target communicate to the Debug Server via HTTP using XMLHttpRequest (XHR). Typically, you run both the Debug Client and the Debug Server on your desktop/laptop, and the Debug Target on your mobile device. The image below should help you.

Click for larger size
Weinre components

Read More »