Building ASP.NET MVC 4 application with JQuery Mobile, HTML5 , CSS3 Media Queries in Visual Studio 2011 Developers Preview


Developing MVC 4 applications with Visual Studio 2011 Developers Preview is quite jump-start for developers as it has inbuilt support for JQuery Mobile css & javascripts, nice intellisense for HTML 5 , CSS 3 media queries. MVC 4 developers preview was built keeping in mind the Mobile Web Developers who wants keen support of rich MVC in Mobile Web.

  • Lets jump start to develop MVC 4 mobile application with JQuery Mobile, HTML5, CSS3 in VS 2011 developers preview.

  • Select your MVC 4 application domain either Internet/Intranet/Mobile Web application  with default Razor or ASPX syntaxes. For my demo , selected Mobile Web application in VS 2011 Developer Preview.

  • Next, write some JQuery Mobile application code to check th UI view in SmartPhones while Model & Controller logic remains same & could change according to business requirements.
  • Database -> Entity Framework (EF) -> Model in MVC 4(Entities) (DAL)-> Controllers (Business Logic Layer)(BLL) -> View(s) -> Master(_Layout.cshtml) is the default development path in MVC 4 Web & mobile application.
  • Sample code for JQuery Mobile with HTML5 for MVC 4 in VS 2011:

@{

ViewBag.Title = “Navigation”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

<h2>Navigation</h2>

<section id=”page1″data-role=”page”>

<header data-role=”header”>

<h1>JQuery Mobile with ASP.NET MVC 4</h1>

<nav data-role=”navbar”>

<ul>

<li><a href=”#”class=”ui-btn-active”>First</a></li>

<li><a href=”#”>Second</a></li>

<li><a href=”#”>Third</a></li>

<li><a href=”#”>Fourth</a></li>

<li><a href=”#”>Fifth</a></li>

</ul>

</nav>

</header>

<div class=”content”data-role=”content”>

<h3>Sample MVC 4 HTML 5 JQuery Mobile</h3>

</div>

<footer data-role=”footer”>

<h3>Footer</h3>

</footer>

</section>

  • Next , Check the nice intellisense support for HTML5 , JQuery Mobile in Visual Studio 2011 Developer Preview.

  • Check out the MVC 4 Mobile Web applications with JQuery Mobile , HTML5 , CSS 3 media queries in Smart Devices.
  •  iPhone & iPad:

 

  • iPhone:

  • JQuery Mobile View in iPhone of MVC 4 Mobile application:

  • View in Windows Phone 7.1 Mango:

  • BlackBerry 9800:

Desktop Utilities from SysInternals to get Virtual Desktops


One of coolest Sysinternals Tool is the Desktop Utilities which helps to get four virtual desktops in your own running desktop. It helps the multitasking way  to work with multiple applications/ softwares  for developers. Lets see , to download the desktop utility which’s developed by Mark Russinovich & Bryce Cogswell.

Download it from here: http://technet.microsoft.com/en-us/sysinternals/cc817881

Current Version is : Desktops v1.02

  • Install the Desktops & check the utility to work with multiple desktops at sametime.

  • You can create 4 additional desktops at a time & switch back & forth to virtual desktops & your main desktop. Click ‘Press to Create Desktop 1/2/3/4’ to start additional virtual desktops.

  • You can select keys from keyboard according to switch from desktops like Alt, Control, Shift, Windows.

  • Supported Operating Systems: Windows XP (X86 & X64 ) & Onwards.
  • Windows Server 2003(X86 & X64) & Onwards.

Consuming OData WCF REST Service from Android Client Device


As in my previous blog , already mentioned to create about OData Service feed in ATOM format which can be consumed in Windows Phone 7, Android, iPhone/iPAD , Silverlight,PHP, Windows Azure Table Storage clients.

  • Lets check , how to consume the OData WCF REST service in Android client. To work with OData Android client lets download Odata4j Android client library from RESTlet: http://www.restlet.org/downloads/ & select the OData4j-Bundle.jar in Java Build Path of your Android project.
  • Next, to consume OData service from android device, we need to host the service in IIS. In my demo, i have hosted it in IIS 7.5.
  • Now, Start develop an android client application which can consume OData feed.
  • Modify AndroidManifest.xml as it can consume feed from internet from native application:

<uses-permissionandroid:name=“android.permission.INTERNET”>

</uses-permission>

   Write code for  Activity.java :

package com.example.android.OData;

import java.util.ArrayList;

import java.util.List;

import org.odata4j.consumer.ODataConsumer;

import org.odata4j.core.OEntity;

import android.app.ListActivity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

public class JsonGrabbingConsumerExampleActivity  extends  ListActivity {

/** Called when the activity is first created. */

@Override

public void  onCreate(Bundle savedInstanceState) {

 super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String>(this,   android.R.layout.simple_list_item_1, GetExpenseReports()));

        getListView().setTextFilterEnabled(true);

    }

// read expenses odata feed

    ArrayList<String> GetExpenseReports()

    {

// build a simple array list of strings to test things out

        ArrayList<String> listUI = new ArrayList<String>();

// use odata4j consumer

        ODataConsumer c = ODataConsumer.create(http://10.12.1.223/ODataSample1/Service.svc);

// run a query just for Pending states

        List<OEntity> listExpenses = c.getEntities(“SampleCustomerData”).execute().toList();

for(OEntity expense : listExpenses) {

    listUI.add(expense.getProperty(

“CustomerID”).getValue().toString()

    +

“; “ + expense.getProperty(“CustomerName”).getValue().toString()

    +

“; “ + expense.getProperty(“CustomerNotes”).getValue().toString()

    );

        }

return  listUI;   

    }

}

  • Checkout the output in Android 2.3:

Consuming OData WCF REST service from Windows Phone 7 Panorama Application


Consuming an OData (Open Data Protocol) in Client devices , Client services are quite easy. Open Data protocol , is a web protocol for querying and updating data and it was born of the need to break down data silos and increase their shared value. This allows data silos to interoperate between producers such as SQL Server, SharePoint servers, Cloud Storage Services, and consumers, for example Java, PHP, Silverlight, IIS, ASP.NET, AJAX.

OData incorporates with JSON, AtomPub, RSS to provide access to the  information from a range of applications, services, relational databases, file systems, content management systems (CMS), traditional websites.

Supported Platforms for OData Services:

  1. Microsoft Visual Studio 2008 SP1
  2. Microsoft Visual Studio 2010
  3. Microsoft SQL Server 2008 R2
  4. Microsoft Sharepoint 2010
  5. Microsoft Windows Azure Storage(Blobs, Tables, Queues)
  6. Microsoft SQL Azure
  7. Microsoft Office Excel 2010 PowerPivot
  • Lets create an OData WCF REST Service that for this purpose lets create an empty web application from Visual Studio

  • Lets add a new WCF Service in the application & named it as Service.SVC

  • Next , add the following Code to the service & check the resulting feed in browser.

using System;

using System.Collections.Generic;

using System.Data.Services;

using System.Data.Services.Common;

using System.Linq;

using System.ServiceModel.Web;

using System.Web;


namespace ODataSample1

{

public class Service : DataService<SampleDataSource>

{

// This method is called only once to initialize service-wide policies.

public static void InitializeService(DataServiceConfiguration config)

{

// TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.

// Examples:

// config.SetEntitySetAccessRule(“MyEntityset”, EntitySetRights.AllRead);

// config.SetServiceOperationAccessRule(“MyServiceOperation”, ServiceOperationRights.All);

config.SetEntitySetAccessRule(“*”, EntitySetRights.All);

config.SetServiceOperationAccessRule(“*”, ServiceOperationRights.All);

config.MaxResultsPerCollection = 100;

config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;

}

}

EntityPropertyMappingAttribute(“CustomerName”, SyndicationItemProperty.Title, SyndicationTextContentKind.Plaintext, true)]

[DataServiceKey(“CustomerID”)]

public class CustomerRecord

{

public int CustomerID { get; set; }

public string CustomerName { get; set; }

public string CustomerEmail { get; set; }

public string CustomerNotes { get; set; }

public DateTime CustomerLastContact { get; set; }

}

public class SampleDataSource

{

private readonly List<CustomerRecord> _sampleCustomerRecordList;

public SampleDataSource()

{

_sampleCustomerRecordList = newList<CustomerRecord>();

for (int i = 0; i < 100; i++)

{

CustomerRecord CR = newCustomerRecord();

CR.CustomerID = i;

CR.CustomerName =string.Format(“FirstName{0} LastName{1}”, i.ToString(), i.ToString());

CR.CustomerEmail =string.Format(“Email{0}@{1}.com”, i.ToString(), i.ToString());

CR.CustomerNotes =string.Format(“Notes{0}.Notes{1}”, i.ToString(), i.ToString());

CR.CustomerLastContact =DateTime.Now.AddDays(-10000).AddHours(i);

_sampleCustomerRecordList.Add(CR);

}

}

public IQueryable<CustomerRecord> SampleCustomerData

{

get

{

return _sampleCustomerRecordList.AsQueryable();

}

}

}

}

  • Now check the Service status in Linqpad (http://www.linqpad.com) by adding the WCF service endpoint to the database/service endpoint connection.

  • Lets check the status of the feed by entering query (<atom:title>)(e.g : SampleCustomerData  for this demo)in the browser

  •  Check after entering query in the URL of the feed

  • Service endpoint shows successful OData feed , next add a Windows Phone Panorama Application with the solution to implement a smartClient to the OData REST application.

datasvcutil /uri:http://localhost:8554/Service.svc/ /out:.\ServiceModel.cs /Version:2.0 /DataServiceCollection

<!–Panorama item one–>

<controls:PanoramaItem Header=”first item”>

<ListBox x:Name=”lst” Margin=”0,0,-12,0″ ItemsSource=”{Binding}”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”0,0,0,17″ Width=”432″>

<TextBlock Text=”{Binding CustomerID}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerName}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerEmail}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerNotes}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</controls:PanoramaItem>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using ODataWP7Panorama.CustomersModel;

using System.Data.Services.Client;

namespace ODataWP7Panorama

{

public partial classMainPage : PhoneApplicationPage

{

public  SampleDataSource ctx = new SampleDataSource(new Uri(http://localhost:8554/Service.svc/&#8221;, UriKind.Absolute));

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += newRoutedEventHandler(MainPage_Loaded);

// Set the data context of the listbox control to the sample data

}

// Load data for the ViewModel Items

private void MainPage_Loaded(object sender, RoutedEventArgs e)

{

var ctx = newSampleDataSource(newUri(http://localhost:8554/Service.svc/));

var coll = new  DataServiceCollection<CustomerRecord>(ctx);

lst.ItemsSource = coll;

coll.LoadCompleted +=newEventHandler<LoadCompletedEventArgs>(coll_LoadCompleted);

var qry = “/SampleCustomerData”;

coll.LoadAsync(newUri(qry, UriKind.Relative));

}

void coll_LoadCompleted(object sender, LoadCompletedEventArgs e)

{

if (e.Error != null)

{

MessageBox.Show(e.Error.Message);

}

}

}

}

  • Now , lets the OData REST Service in Windows Phone 7.1 Client :

Accessing REST based service from Windows Phone 7.1 using SAML Token


Accessing REST based services from Windows Phone 7 client devices include two approaches: Active Federation implementation means how the client application uses OAuth protocol and contacts all the issuers in the trust chain in turn to acquire a valid SWT token to access a online enterprise application where as in passive federation mode device ‘s embedded browser requests the identity provider list from Access Control Service(ACS 2.0)  which in turn requests for token from trusted issuer & issuer sends back the SAML 2.0 token which is received by the device then it send a call to the enterprise REST service as Relying Party (RP) with Simple Web Token (SWT) Token.

  • Comparison of the Federation Difference:
  • The passive federation solution that leverages an embedded browser control offers a simpler approach to obtain an SWT token because the embedded web browser control in combination with the WS-Federation protocol handles most of the logic to visit the issuers and obtain the SWT token that the enterprise application needs.
  • In the active federation solution, the Windows Phone Application must include code to control the interactions with the issuers explicitly. Also, the active solution must include code to handle the requests for SAML tokens from the Relying Party(Issuer).
  • An advantage of passive federation approach is that it enables the Windows Phone Application to dynamically build the list of identity providers to your ACS configuration.
  • You must explicitly add any SWT token caching behavior to the Windows Phone application for both the active or passive federation solutions.
  • Download 9WindowsPhoneClientFederation from http://claimsid.codeplex.com to get Visual Studio development system  solution for Claims identity based REST services for Windows Phone .

Building RhoMobile MVC application with HTML 5 , JQuery for iPhone,iPad, Windows Phone, Android,BlackBerry


RhoMobile is an alternative native application environment for smartphones other than PhoneGap. To build applications with RhoMobile , you need to download RhStudio from http://rhomobile.com/products/rhostudio/ & choose your appropriate version for Windows or Mac.

  • Next to create smartphone applications with Rhomobile, you need to install Rhodes , RhoSync, RhoConnect , Gits. The four Rhomobile products – Rhodes, Rhosync, RhoHub, and Rhogallery – provide a complete toolkit for creating a mobile application. Rhomobile is cross-platform and so allows you to build your application for many different types of smartphone – including iPhone and Blackberry – just with a single codebase. This makes it the most preferred and quickest way of developing mobile apps. As you create a native Rhomobile application, you can use the built-in device features such as GPS, Push, and Camera, all with offline capabilities.
  • Select File-> New Project-> Rhodes Application-> Select your Project name.

  •  Set out the Rhodes Model of the application by right clicking on the project of the Project Explorer & Select Rhodes Model. Provide Name & Controllers.

  • Next , you will find three types files inside the app folder of your project & after setting the Models , a seperate folder named as your Model name will be created.
  • The files created as default are basically of  three types :
  • product.erb -> This is the Model file, which contains the Model Definition.
  • product_controller.rb -> This file contains the business logic relates to our Model.
  • *.erb-> The .erb files are the html view template files.
  • Lets the controller view of Rhodes Views for smartphones:

  • Lets  edit the Views as ‘Index.erb’ in HTML 5 for Rhodes application for smartdevices.

<div data-role=“page” data-url=“<%=Rho::RhoConfig.start_path%>/”>

  <div data-role=“header” data-position=“inline”>

    <h1>Storemanager</h1>

    <%if SyncEngine::logged_in > 0 %>

    <a href=“<%=url_for:controller=>:Settings,:action=>:do_sync%>”class=“ui-btn-left” data-icon=“refresh”>

      Sync

    </a>

    <a href=“<%=url_for:controller=>:Settings,:action=>:logout%>”class=“ui-btn-right” data-icon=“star”>

    Logout

  </a>

    <%else %>

        <a href=“<%=url_for:controller=>:Settings,:action=>:login%>”class=“ui-btn-right” data-icon=“star”>Login</a>

    <%end%>

</div>

  <div data-role=“content”>

    <ul data-role=“listview”>

      <li><a href=“Product”>

      <span class=“title”>Products </span>

      </a></li>

    </ul>

  </div>

</div>

    • Run the Project by right clicking project -> Run Configuration -> Right Click on RhodesMobile-> Select New -> Select your simulator Environment.

  • Select your RhoMobile Simulator as iPhone & check the application output native iPhone platform.

  • Web – Inspector View for HTML 5 , JQuery Mobile Codes.

  • Products Sample Entry Screen with MVC HTML 5 , JQuery Mobile in iPhone.

    • Check the Project View in Android Platform:

  • Product Samples Screen in Android:

    • Windows Mobile View for RhoMobile :

Windows Azure Service Bus EDI & EAI & On-Premise Service Bus Connect Tools Available – December 2011 Release


The Windows Azure Service Bus Enterprise Application(Artifacts) Infrastructure & Enterprise Distributed Infrastructure provides integration capabilities for the Windows Azure apps to extend On-Premise application to the cloud, provide Rich Messaging Endpoints to process and transform messages, caching & provides rich support for enterprise integrate disparate application on -premise as well in Windows Azure.

Download the toolkits from here: http://www.microsoft.com/download/en/details.aspx?id=17691

  • Features: Windows Azure Appfabric Service Bus Connect Project Template in Visual Studio.
  • Connectivity between on-premise with cloud apps supporting service bus internal endpoints & on – premise LOB applications.
  • PowerShell cmdlets to manage Service Bus Connect RunTime components.
  • Stable integration with Windows Identity Foundation(4.0) runtime with SAML token, SWT token, STS tokens, Relay services & WRAP 2.0 Protocols.

  • The  installation  of Windows Azure Appfabric Service Bus Connect SDK installation which requires Windows Server Appfabric SDK , IIS 6 metabase & PowerShell cmdlets.
  • It also installs itself Microsoft Bizspark integration components as a integration of Microsoft Biztalk servers with Appfabric Service Bus Queues.

  • Integrating WCF LOB adapters & Biztalk spark components with Service Bus Connect.

%d bloggers like this: