Author complete Mobile Applications for Android and I Phone in Java Script!

Did you know that you can author complete Mobile Applications for Android, IPhone and other mobile platforms in Java Script?

There are two major Application Development frameworks available today that let you author mobile applications in Java Script:

1. PhoneGap
2. appcelerator

PhoneGap is an HTML5 app platform that allows you to author native mobile applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.

appcelerator.com has released a Java Script SDK and a small IDE in which you write code in pure HTML/CSS/JS and it compiles mobile apps for you out of it.

The compiled code is nothing but native mobile code that you could write in Java (for Android) or Objective C (for I phone/I pad)

The Same code can also be compiled in to a Desktop Application.

The extend JS library of this supports full File System access and other all sorts of features that’s available in a standard desktop app.

If you are expert in JS libraries like JQuery, DOJO, YUI etc. you are with an advantage!!

I gave it a trial and results are quite exciting, although the IDE is in its infancy.

Give it a try!!

Spectrum of Modern Web Applications

I am more fascinated these days with the new approaches developers are discovering to author modern web aps. Java Script and JQuery is the center of the attraction in all the approaches. Sharing here, the summary of what I read in the documentation of a Microsoft initiative called Project Silk  to author modern web aps..

Spectrum of Web Applications

There is a spectrum of web applications being built today that can be grouped into four application types. These types of web applications are categorized by their full-page reload behavior and the amount of client-side interactivity they provide. Each application type provides a richer experience than the one listed before it.

• Static sites. These consist of static HTML pages, CSS, and images. They are static in that as each page is navigated to, the browser performs a full-page reload and there is no interaction with portions of the page. In addition, the page does not change no matter who requests it or when.
• Server rendered. In this model, the server dynamically assembles the pages from one or more source files and can incorporate data from another source during the rendering. The client-side script in these applications might perform some data validation, simple hover effects, or Ajax calls. As each page is navigated to, the browser performs a full-page reload. ASP.NET applications that don't make heavy use of client-side JavaScript are examples of server-rendered web applications.
• Hybrid design. This model is similar to the server-rendered web application, except that it relies heavily on client-side JavaScript to deliver an engaging experience. This type of application has islands of interactivity within the site that do not require full-page reloads to change the UI as well as some pages that do require a full-page reload. Mileage Stats is an example of a hybrid design.
• Single-page interface. In this model, a full-page load happens only once. From that point on, all page changes and data loading is performed without a full-page reload. Hotmail, Office Live, and Twitter are examples of single-page-interface web applications.

Characteristics of Modern Web Applications

While there are many types of modern web applications, addressing many different needs, they all have some characteristics in common.

• They are standards-focused. To have the broadest reach across multiple platforms and devices, applications attempt to implement the current and evolving standards and adopt future standards once ratified.
• They are interactive. Modern web applications keep the user engaged by providing constant feedback on their actions. This feedback can come in the form of messages, animations to hide or show elements, mouse-over effects, drag and drop feedback, the automatic refreshing of screen data, animation of various elements, or the implementation of fade-in or fade-out effects. Interactive applications leverage the fast JavaScript engines in modern browsers to perform their client-side tasks.
• They limit full-page reloads. Modern web applications seek to limit the number of full-page reloads. Reloads are much slower than a localized Ajax call to update a portion of the UI. Full-page reloads also limit the ability to animate state or page changes. By not performing a full-page reload, users can be kept in context, providing a fluid experience as they navigate from one task to another.
• They are asynchronous. Modern web applications use Ajax to dynamically load data, page fragments, or other assets instead of performing a full-page reload to acquire data or HTML content. Because the loading of data is asynchronous, the UI is able to stay responsive and keep the user informed while the data request is being fulfilled. This asynchronous on-demand loading also reduces application response time because requests can be tuned to return only the data and other content that needs to change.
• They manage data. When applicable, modern web applications provide client-side data caching and prefetching to boost client-side performance. This enables the UI to immediately respond to user input gestures because it does not have to make a call to the server for data. Data caching also serves to minimize the impact on server resources, increasing application scalability because fewer calls to the server are required.

How to handle missing Images in HTML

Try this simple code. Handle OnError event of Image-

<img src="http://www.satya-weblog.com/image.png" height="100px" width="100px" onerror="this.src = '/image/item-no-image.png'" />

Or-

<img src="http://www.satya-weblog.com/image.png" height="100px" width="100px" onerror="handleMissingImg(this);" />

1. function handleMissingImg(ele) 
2. { 
3.      ele.src = '/image/item-no-image.png'; 
4. } 

Or, you can also use this-

1. function IsImageOk(img) { 
2.  // During the onload event, IE correctly identifies any images that 
3.  // weren't downloaded as not complete. Others should too. Gecko-based 
4.  // browsers act like NS4 in that they report this incorrectly. 
5.     if (!img.complete) { 
6.         return false; 
7.     } 
8.  
9.  // However, they do have two very useful properties: naturalWidth and 
10.  // naturalHeight. These give the true size of the image. If it failed 
11.  // to load, either of these should be zero. 
12.    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
13.        return false; 
14.    } 
15.     // No other way of checking: assume it's ok. 
16.     return true; 
17. }

Creating a HTML editor in ASP.net

Creating a HTML editor in ASP.net has been a herculean task in web applications
here is a working and tested solution at Code Project.