17+ years experience in software development. Worked extenseively on Java, JEE, Spring, open source, SOA, Webservices and such java related technologies. Currently working as Technical Architect at Mastek Ltd., India Ganesh has posted 4 posts at DZone. You can read more from them at their website. View Full User Profile

Android based UI for an existing web application

11.14.2011
| 5223 views |
  • submit to reddit

Androidify Your Web App

So your manager wants you to androidify your existing web app...

Ever since android and the mobile app market has started becoming popular, managers have started demanding, android based user interfaces onto existing web applications. As developers it is necessry to understand the various choices and pros and cons of each one clearly.
Lets say you have an existing web application which is developed with one of more traditional web frameworks, then for making this web app available as an android app, following are the various choices you have:

  1. Existing web app most likely runs in a javascript compliant modern browser. Most modern smart phones already have mature javascript enabled web browsers. Validate the browser version of your intended device and check the browsers compliance with respect to standards like ECMA (javascript), HTML5 support etc. You should be able to display the entire web app, as-it-is onto the smart phones browser, but, but but...the UI will not at all be optimized to the mobile screen, for one, the UI was built with desktop browsers in mind and the mobile app is a completely different ball game. So though most of the traditional web app UI might display, you will have issues like UI widgets will not render correctly, users will have to strain their eyes to see the text, the default zoom levels will be horrible, horizontal and vertical scrolling to see entire app, will make it a very painful user experience to say the least.
  2. You can change (switchable) css in your existing web app, so that it is a lot more optimized for mobile viewing, this means most of the presentation logic stays as is but only the css will need to be modified. Also you can resort to html metadata elements like the view port tag to adjust the default zoom levels for the mobile browser display. Inspite of these optimizations, the amount of data on screen for a mobile device can degrade the user experience.
  3. The next option comes at a bit more cost but really provides ideal mobile user experience. The choice is of developing a native android UI and having that communicate using REST (json or xml over http), with REST controllers on the server side. The REST controllers will need to developed in addition to any existing controllers and can be thin wrappers/delegators over existing controllers or services. REST controllers will return back json / xml, which will be gotten by the android UI and displayed suitably. In android if you think writing a http client(REST client) is a might tedious you can use a third-party library like Spring-Android, which will ease REST client development and provide auto-binding to android/java objects from json or xml.


    Typical for issuing a REST-client call is given below to give you idea of how clean and simple it is to write REST client from native android using spring-android.

    	private Parties getParties(){
    	RestTemplate restTemplate = new RestTemplate();     
    
    	HttpHeaders requestHeaders = new HttpHeaders();
    	requestHeaders.setAccept(Collections.singletonList(new MediaType("application","json")));
    	HttpEntity<?> requestEntity = new HttpEntity<Object>(requestHeaders);
    	String url = "http://x.y.z.w:8081/jqueryrest/restful/party/listallEx";
    
    	//invoke the url
    	ResponseEntity<Parties> responseEntity = restTemplate.exchange(url, HttpMethod.GET, requestEntity, Parties.class);
    	Parties retList = (Parties)responseEntity.getBody();
    	return retList;
    }
    
    

    The url, refers to a REST controller endpoint which returns a list of party object.

    Sample jersey REST controller

    	@GET
    	@Path("/listallEx")
    	@Produces("application/json")
    	public Parties getAllEx(){
    		return new Parties(service.getAll());
    	}

 

Android based UI options for web app

0
Published at DZone with permission of its author, Ganesh Ghag.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: