MonoDevelop Develop Mobile native application with C#

Many developer are aware with mono project i.e. developing .net application for linux.

xamarin has worked on same concept and introduce  Monodevelop a platform which helps .net  developer to develop native application for iPhone, Android and Mac application.

Developer can download the Mono-Develop (IDE) from the internet and start development.

To run application on Mobile device developer has to buy license from xamarin.

Pricing:

MonoTouch for iPhone application

• Enterprise : $999
• Personal   : $399

MonoDroid for android application

• Enterprise : $999
• Personal   : $399

Don't worry you can run mono application on simulator without parching licence.

Mono convert C# code into native code.This is not as simple as it looks Xamarin has written wrapper classes for C# code in native.
         For developing application in mono developer not only require C# knowledge but they should require some basic knowledge of iOS/Android application development.
         In Mono application screen can be designed same as it is develop in iOS/Android. for iOS it screen development developer should aware with xcode designer and for android screen design developer should aware with XML design.
         Even when you are developing application you should aware with native controls, classes, property, methods and events. It is never easy for C#/.net developer to jump in native application development.
        For developing android application you can download monodevelop for windows but for developing iOS application you should require MAC machine.

After reading all this you may think what are the benefit for the individual or  companies get by using mono.

• In current market it is very difficult to find iOS developer or Android developer, but with training it is easy to convert C# developer to mono developer.
• Most of the customer want to develop different application for iOS and Android application. For this type of application business logic remain same(or using same web service), developer can develop this code once and use in both application.

Now let's take a look of drawback :

• Developer should have basic knowledge of iOS/Android application.
• It may happen some new feature introduce by OS are not supported in mono(it is already supporting iOS 6.0 and android 4.0 's feature).
• Individual / Company has to purchase licence.  

Please share you thoughts on this...

Bundling and Minification with MVC 4.0

With MVC 4.0 few new features has been introduced like 

• web APIpport
• Enhanced support for asynchronous methods
• Mobile project support

Bandling and Minification is the most exiting feature

Now a days developer using different JS plagins and and css files to provide rich look to web application. That while loading web page browser require to request more number of resource files

Most of the browser support maximum six connections at a time to the server and  other resources has to wait for download completion

Bundling is combine the multiple files in to single file and decress the no of file and less number of file incress the pgae load performance.

Minification performs a variety of different code optimizations to scripts or css, such as removing unnecessary white space and comments and shortening variable names to one character.

minification example :
actual code
function test(value1, value2)
{
   return value1+value2;
}

minified code
function a(b,c){return a+b;}

Some of open source Javascript code provide minification version to improve the performance like Jquery, Jquery Mobile, modernizr etc.

While .net minification is developing minified version by the it self. Developer can control the which version either to serve minified version or full version of JS

Developer can contorl it using web.config

 debug="true" />

or by specifying following value while registering bundle

BundleTable.EnableOptimizations = true;

I have found some problem and also find some solution on stack overflow :

• .net it self minified the script 
• .net not render the script .min version

Jquery Mobile .net minified version not works on opera desktop browser as well opera mobile browser the Problem and solution are explain in below link

mvc4 bundler not including .min files 


Those features are already in used but .net has integrate this development and make development and deployment easy and save time. 

Reference
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Convert desktop version of website to mobile site

Google has start a new application GOMO for convert your existing desktop web application version to mobile version.

Google has made collaboration with dudaMobile. It is very exiting application for Google.
The application is convert desktop version website in mobile website within few seconds.

• Application not only convert site in to mobile version user can also select the theme for the mobile application.
• User can edit/delete the content from the mobile application.
• User can customize contains for mobile site.
• Not only this Google is also providing free hosting for the site for a year.
• User can also take free help from support team for a year.

Those all facility provide to only attract most of the individual/ organization to once convert their site into mobile application but it also has some drawbacks.

• Your desktop site should be well designed before mobile conversion.
• The application will convert all site in to mobile version it include each and every link which may not require for the mobile site and it may create extra load for the mobile application.
• This application may not work on lower end mobile device or older smart phone.

so in conclusion I can say that this is best opportunity for individuals and organization who has their static site and want to develop mobile site, but for a well organize site or for dynamic site this is not a good choice.

Reference:
 GOMO

HTML5 Geolocation for Mobile

HTML 5 is develop not only to target desktop but also to target every device which can access internet like Mobile, Smart TV, Gaming console etc.

HTML 5 Geolocation  can be use with Mobile to develop various application, before this native application is the only way to develop Geolocation application of course developer can access the native features of Mobile device using Phonegap

With HTML5 it is possible to get as accurate geolocation information as device native application give. actually it is using different algorithms to get geolocation coordinate information. Developer can get accurate coordinate information of end user by using "enableHighAccuracy "  option.   

The navigator.geolocation object offers is quite small but offers the following (at the time of writing):

Methods:

1. void navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
2. long navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
3. void navigator.geolocation.clearWatch(watch_position_id)

position_options is specified as a JSON-style string with up to three parameters:

• enableHighAccuracy – A boolean (true/false) which indicates to the device that you wish to obtain it’s most accurate readings (this parameter may or may not make a difference, depending on your hardware)
• maximumAge – The maximum age (in milliseconds) of the reading (this is appropriate as the device may cache readings to save power and/or bandwidth)
• timeout – The maximum time (in milliseconds) for which you are prepared to allow the device to try to obtain a Geo location

wpid=navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});

The success_callback_function is passed a single parameter, a position object which has the following properties:

• coords.latitude – The current latitude reading
• coords.longitude – The current longitude reading
• coords.accuracy – The accuracy of the current latitude and longitude readings (in metres)
• coords.speed – The current speed reading in metres per second (you can simply multiply by 2.2369 to convert to miles per hour or multiply by 3.6 to convert to kilometres per hour)
• coords.altitude – The current altitude reading (in metres)
• coords.altitudeAccuracy – The accuracy of the current altitude reading (in metres)

here we take a look of simple example


Example of a "one-shot" position request.

    function showMap(position) {
      // Show a map centered at (position.coords.latitude, position.coords.longitude).
    }

    // One-shot position request.
    navigator.geolocation.getCurrentPosition(showMap);

you can use above example when developer want to use geolocation information once in a code


Example of requesting repeated position updates and handling errors.

    function scrollMap(position) {
      // Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude).
    }

    function handleError(error) {
      // Update a div element with error.message.
    }

    // Request repeated updates.
    var watchId = navigator.geolocation.watchPosition(scrollMap, handleError);

    function buttonClickHandler() {
      // Cancel the updates when the user clicks a button.
      navigator.geolocation.clearWatch(watchId);
    }


Example of requesting a potentially cached position.

    // Request a position. We accept positions whose age is not
    // greater than 10 minutes. If the user agent does not have a
    // fresh enough cached position object, it will automatically
    // acquire a new one.
    navigator.geolocation.getCurrentPosition(successCallback,
                                             errorCallback,
                                             {maximumAge:600000});

    function successCallback(position) {
      // By using the 'maximumAge' option above, the position
      // object is guaranteed to be at most 10 minutes old.
    }

    function errorCallback(error) {
      // Update a div element with error.message.
    }


Difference between  getCurrentPosition() and watchPosition()

The getCurrentPosition() method takes one, two or three arguments. When called, it must immediately return and then asynchronously attempt to obtain the current location of the device

The watchPosition() is doing  same but, The watch operation then must continue to monitor the position of the device and invoke the appropriate callback every time this position changes

Reference :
http://dev.w3.org/geo/api/spec-source
http://www.thedotproduct.org/2010/04/example-of-navigator-geolocation-watchposition/

Configure Web Application for iPhone/iPad

To develop rich mobile application there are some guide lines provide by safari developer library. Developer can develop web application like a native application using this guide lines. here are the highlight of some guide line

1) Specify Lunch icon/ web clip:

Developer can specify the lunch icon for web application like native application it is default feature of safari. It is not necessary to specify the lunch icon, safari provide default lunch icon for the web application.

• To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iOS won’t add any effects to the icon.
• To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

  
  

  <link rel="apple-touch-icon" href="/custom_icon.png"/>
• In the above example, replace custom_icon.png with your icon filename. If you don’t want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
• To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

• The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 57 x 57.

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used. If multiple icons are suitable, the icon that has the precomposed keyword is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... or apple-touch-icon-precomposed... prefix. For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

2)Define star up screen for iPhone/iPad

On iOS, similar to native applications, you can specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

3)Hide status bar:

For hiding status bar for iOS device developer can use following meta tag:

 <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Reference:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/configuringwebapplications/configuringwebapplications.html 

CSS 3 Media Queries

If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.

The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. For example:

• width and height (of the browser window)
• device width and height
• orientation – for example is a phone in landscape or portrait mode?
• resolution

If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout.

The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices we can use the following syntax:

@media only screen and (max-device-width: 480px) {

}

above style only apply to devices which width is less than 480 px

We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following:

@media only screen and (max-device-width: 480px) {
 div#wrapper {
  width: 400px;
 }

 div#header {
  background-image: url(media-queries-phone.jpg);
  height: 93px;
  position: relative;
 }

 div#header h1 {
  font-size: 140%;
 }

 #content {
  float: none;
  width: 100%;
 }

 #navigation {
  float:none;
  width: auto;
 }
}

Linking a separate stylesheet using media queries

Adding the specific code for devices inline might be a good way to use media queries if you only need to make a few changes, however if your stylesheet contains a lot of overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.

To add a separate stylesheet after your main stylesheet and use the cascade to overwrite the rules, use the following.

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

some more examples for mobile device and orientation

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

References

1) http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

2)http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

3)http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

The Magic of ASP.Net MVC Model Binding

          For the ASP.net developer MVC not less then a magic. In asp.net developer develop the page and hit the page and request for the page for that page and server send response for that page (I am not going in to detail for ASP.net handler as we are talking about MVC magic).
     
       It look like a magic because of the
1)The way we are accessing the MVC page (View)
2)The way data pass to the controller

         most of Developer aware with all the asp.net page life cycle. Let 's take look of MVC life Cycle

There are two MVC component perform the magic

1)MVCRouteHandler

2)MVCModelBinder

1)MVCRouteHandler

       The ASP.NET Routing module is responsible for mapping incoming browser requests to particular MVC controller actions. By the end of this tutorial, you will understand how the standard route table maps requests to controller actions.

      The default route handler is already define in Globle.aspx as bellow

  public class MvcApplication : System.Web.HttpApplication

  {

        public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(

                "Default",                                              // Route name

                "{controller}/{action}/{id}",                           // URL with parameters

                new { controller = "Home", action = "Index", id = "" }  // Parameter defaults

            );

        }

        protected void Application_Start()

        {

            RegisterRoutes(RouteTable.Routes);

        }

    }

     When an MVC application first starts, the Application_Start() method is called. This method, in turn, calls the RegisterRoutes() method. The RegisterRoutes() method creates the route table.

      The default route table contains a single route (named Default). The Default route maps the first segment of a URL to a controller name, the second segment of a URL to a controller action, and the third segment to a parameter named id.

Imagine that you enter the following URL into your web browser's address bar:

/Home/Index/3

The Default route maps this URL to the following parameters:

controller = Home

action = Index

id = 3

When you request the URL /Home/Index/3, the following code is executed:

HomeController.Index(3)

     The Default route includes defaults for all three parameters. If you don't supply a controller, then the controller parameter defaults to the value Home. If you don't supply an action, the action parameter defaults to the value Index. Finally, if you don't supply an id, the id parameter defaults to an empty string.

      Let's look at a few examples of how the Default route maps URLs to controller actions. Imagine that you enter the following URL into your browser address bar:

/Home

    Because of the Default route parameter defaults, entering this URL will cause the Index() method of the HomeController class in Listing 2 to be called.

   In this way MVC identify which controller action to be invoke and which view to be rander

2)MVCModelBinder

         The model binder takes a set of value providers, model metadata providers and validator providers and creates the objects in the parameters of your action methods, performs validation, and the resulting objects are passed in as parameters when the action method on the controller is invoked. That is how a form post can become a fully hydrated and validated object before you do anything explicitly in your controller. If you did not know it did all of that, well, pay attention because there is some interesting stuff ahead.   

    

    Will start with an example action method on a controller.

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult AFormPost(string aSimpleType,

ACoolModel aComplexType)

{

//Do whatever...

}

      Let us say that this action method would be found on your site at http://foo.com/home/aformpost and you are posting to that url. The class in the framework that is responsible for calling the method above is called the ControllerActionInvoker (which you do not need to be too concerned about remembering as you do not use it directly). When the route is parsed by the runtime, that is the class that is responsible for calling an appropriate method on a controller. The ControllerActionInvoker sees that the action method has two parameters that it has to supply. To do that it uses the DefaultModelBinder to attempt to interpret the values available and force them into one of the two parameters specified. And where does it get its values? What are the available sources? Well, it looks in this order:

The form values.

The route data.

The query string.

The http file collection.

     These are called the "value providers". If it finds a value in the first provider, it will pull it from the first. If not, the second, and so on. It will look by name, so if you had a parameter named "foo" and a text input field also named "foo", it would match based on that. And it is not case sensitive.

      In the case of the first parameter in the example above, it will see that it is a simple model (like string, int, et al., as opposed to a complex model, which would be one defined by a separate class such as ACoolModel above) and will convert it to that type and assign it to the parameter.

    In the case of the second parameter, it will see that it is not a simple model and will instantiate an instance, figure out the properties, and for each one look in the value providers to find a value to assign to the property.

    In either case, if the assignment fails because of type conversion errors or the like, an error is added to the ModelState (the thing responsible for keeping track of the validation state of the model). The DefaultModelBinder will then look for any validators on the property and check those. If validation fails, an error will be added to the ModelState. More on validation and model state in the next tutorial.

    So that is the basics of the model binder. By creating your own model binder you can take complete control of the process. However, I have found that the default model binder works almost all of the time, but we will discuss how to create your own model binders at a later time.

     In summary, the model binder takes a set of value providers and creates the objects in theparameters of your action methods, performs validation, and the resulting objects are passed in as parameters when the action method on the controller is invoked. That is how a form post can become a fully hydrated and validated object before you do anything explicitly in your controller.

reference:

http://www.howmvcworks.net/OnModelsAndViewModels/TheBeautyThatIsTheModelBinder

http://www.patelsanjay.net/