Developing Interactive Mobile Web Apps with HTML5,JS, CSS3 using MoSync SDK 3.0 for Android,Windows Phone 7.5 & iOS.

MoSync is a cross-platform  Mobile App development environment where we can build apps for native UI, Web UI as well as hybrid UI for Windows Phone 7.5, Windows Mobile 6.x , Microsoft SmartPhone 2003 library, Pocker PC , Android  & iOS (iPhone & iPad for Mac OS X). MoSync SDK comes with a built -in Eclipse IDE to build up apps in HTML5/js or native C/C++ API.  To start development with MoSync SDK 3.0 , download it here.

• Before installing MoSync Reload SDK 3.0 , you need to install first Node.js 0.6 version in order to run MoSync apps. If you are first time coder in MoSync  SDK 3.0, better to start with MoSync SDK 3.0.
• Create a new MoSync Project in MoSync Eclipse IDE from File-> Project -> MoSync Project -> Select HTML 5 -> Select HTML5/js Web UI App.   

•  Select a name for your project & click on finish to get the default project template.

• Now check the default code template & select the Runtime environments. In MoSync you can run apps either directly to smartphone devices (Android USB /Bluetooth USB) or run in device emulators (Android, Windows Phone 7.5, iPhone for OS X).
• Check out the Android Simulation environment & Click on Active Profile from toolbar of MoSync Eclipse IDE.

• MoSync SDK will generate .apk file for Android Web UI app & deploy the app to Android emulator or device.

• Run the MoSync HTML5,js  Web UI app  on Android 4.0 emulator.

• Click on Change Color Button & check out the color change of the Web UI app.

• Next deploy the  MoSync HTML5/js Web UI app on Windows Phone 7.5 emulator & Click on Active Profile icon to find the available devices on MoSync Eclipse IDE.

• Select Windows Phone 7.5 platform as target device/emulator platform.

• MoSync SDK will deploy the HTML5/js Web UI app as Native .xap file for Windows Phone 7.5 .

• Check out the HTML5 /js Web App in Windows Phone 7.5 as native app .

 

•  In the next tutorial, we will see the support of PhoneGap applications on MoSync SDK HTML5/js Web UI apps.

Developing & Deploying Node.js Web application into Windows Azure with Cloud9 IDE

While it’s common to run Node.js applications  & deploy them into Windows Azure. Lets start by building a simple Demo of building a Node.js app in Cloud9 IDE & deploy it into Windows Azure. Node.js is an open – source toolkit for developing Windows Azure based apps. Cloud9 is a browser based cross-platform development environment supports for Node.js projects which can be directly deployed to Windows Azure.

• Cloud9 IDE is an ideal browser tool for Chrome -OS & works in OS X , Linux & Windows.
• To use Cloud9 IDE, you need to Sign up to Cloud9 portal @ http://c9.io/
• Alternatively you can Sign in using Github Id.
• So, lets first create a Cloud9 Project , click on the icon ‘Create a new project’ .

• Select the name of your cloud project  & click on Create to create the project.
• Start Editor after the project is being created. You would be prompted for dashboard preview but is you need to code directly click on Just the editor, please.
• Start coding by selecting New File from the menu. Paste the following code in the file.

var http = require(‘http’);

var port = process.env.PORT;

http.createServer(function(req,res)

{

res.writeHead(200, {‘Content-Type’: ‘text/plain’});

res.end(‘hello windows azure\n’); }).listen(port);

• Next save the file as ‘server.js’ from the Save As menu.

• Start debugging & preview the output in browser as cloudapp.net app.

• Now, deploy the app by clicking on Deploy button from the button grid options & select Windows Azure as deployment platform.
• Next, you will be prompted to Windows Azure portal  & start migrting your on-premise node.js web app in Cloud9 IDE app into Windows Azure.

 

 

A Sample of Mobile Web 2.0 with HTML5 Boilerplate, CSS3 Media Query, JQuery Mobile,Mobile Ajax/Dojo.

Mobile 2.0 is impossible to think without JQuery Mobile/JQTouch/Sencha/Mobile Ajax with cross-platform tools support like Phonegap, RhoMobile or Titanium  or Monotouch. Since for simply development of Mobile Web as hybrid or native (with Phonegap) keeping business logic perfect as desktop web are quite easy. Lets demonstrate a live Mobile Web 2.0 sample built in JQuery Mobile 1.0 RC, HTML5, CSS media queries, ASP.NET Nuget packages.

Used  simply databinding features from ASP.NET & bind the JQuery Mobile plugins. Check the following Code:

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<meta name=”apple-mobile-web-app-capable”content=”yes”/>

<meta name=”viewport”content=”width=device-width”/>

<link rel=”Stylesheet”media=”screen”href=”JQuery Mobile/jquery.mobile-1.0.1.min.css”/>

<link rel=”stylesheet”media=”screen”href=”styles/style.css”/>

<link rel=”stylesheet”media=”screen”href=”styles/jquery.datepick.css”/>

<script type=”text/javascript”src=”JQuery Mobile/jquery.js”></script>

<script type=”text/javascript”src=”JQuery Mobile/jquery.mobile-1.0.1.min.js”></script>

<script type=”text/javascript”src=”scripts/jquery.datepick.js”></script>

<script type=”text/javascript”>

$(

function () {

$(

‘#DateID’).datepick({ dateFormat: ‘yyyy/mm/dd’ });

});

</script>

</head>

<body>

<formid=”form1″runat=”server”>

<headerdata-role=”header”><h1>The Institute of Neuro Sciences</h1></header>

<divclass=”content”data-role=”content”>

<navdata-role=”navbar”>

<ul>

<li><ahref=”Default.aspx”data-role=”button”data-icon=”home”data-iconpos=”left”>Home</a></li>

<li><ahref=”IPD.aspx”data-role=”button”data-icon=”plus”data-iconpos=”left”>IPD Section</a></li>

<li><ahref=”contact.aspx”data-role=”button”data-icon=”search”data-iconpos=”left”>Contact</a></li>

</ul>

</nav>

<h3>The Outdoor Patients’ Department</h3>

</div>

Select the Department :

<asp:DropDownListID=”ddlDepartments”runat=”server”AutoPostBack=”true”

OnSelectedIndexChanged=”ddlDepartments_SelectionChanged”>

</asp:DropDownList>

Select Your Name:

<asp:DropDownListID=”ddlName”runat=”server”></asp:DropDownList>

Enter The Date :

<asp:TextBoxID=”DateID”runat=”server”/>

<asp:ButtonID=”DisplayDoctorsVisit”  runat=”server”Text=”Display Patients’ Details”OnClick=”cmdbutton_Click”/>

<div>

<center>

<asp:GridViewID=”GridView2″runat=”server”AutoGenerateColumns=”False”

CellPadding=”4″

ForeColor=”Black”GridLines=”None”>

<AlternatingRowStyleBackColor=”White”ForeColor=”#284775″/>

<Columns>

<asp:BoundFieldDataField=”docname”HeaderText=”Doctor Name”ReadOnly=”true”SortExpression=”docname”/>

<asp:BoundFieldDataField=”pname”HeaderText=”Patient Name”ReadOnly=”true”SortExpression=”pname”/>

<asp:BoundFieldDataField=”ONLINE100_QUEUE”HeaderText=”Queue”ReadOnly=”true”SortExpression=”ONLINE100_QUEUE”/>

<asp:BoundFieldDataField=”online100_shift”HeaderText=”shift”ReadOnly=”true”SortExpression=”online100_shift”/>

</Columns>

<EditRowStyleBackColor=”#999999″/>

<FooterStyleBackColor=”#5D7B9D”Font-Bold=”True”ForeColor=”White”/>

<HeaderStyleBackColor=”#000000″Font-Bold=”True”ForeColor=”White”/>

<PagerStyleBackColor=”#284775″ForeColor=”White”HorizontalAlign=”Center”/>

<RowStyleBackColor=”#F7F6F3″ForeColor=”#333333″/>

<SelectedRowStyleBackColor=”#E2DED6″Font-Bold=”True”ForeColor=”#333333″/>

<SortedAscendingCellStyleBackColor=”#E9E7E2″/>

<SortedAscendingHeaderStyleBackColor=”#506C8C”/>

<SortedDescendingCellStyleBackColor=”#FFFDF8″/>

<SortedDescendingHeaderStyleBackColor=”#6F8DAE”/>

</asp:GridView>

</center>

</div>

</form>

<footerdata-role=”footer”data-position=”fixed”><h3>All Rights Reserved</h3></footer>

</body>

</html>

• JQuery Mobile DatePicker running in Windows Phone 7.5 Mango emulator.

Native UI controls support in Smartphones for Mobile Web.

Simply tested in iPad 2 .

• JQuery Mobile , Sencha Touch , JQTouch, Dojo,Mobile Ajax CDN helps to update rich Mobile View with cross-browser & cross-platform support. 

 

A Lap around ASP.NET MVC 4 Beta(Web API) for Mobile in VS 11 Beta Ultimate on Windows 8 Consumer Preview

While releaseing the concept of Windows 8 Developer Preview, the architecture & features of .NET framework 4.5 & ASP.NET 4.5 has already focused. With VS 11 Beta ultimate , the concept of asynchronus programming in ASP.NET 4.5 has started with its Asynchronus HTTP Request/Response paradigm. Now to start programming in MVC 4 beta for Mobile , you will have immense & inbuilt support of JQuery Mobile(JQuery.mobile.js , jquery.css files), HTML5 adaptive markups & CSS 3 media queries. To enable Mobile MVC 4 Web programming for fancy, VS 11 Beta includes inbuilt Page inspector support to examine the markup details, JScript rendering, CSS 3 style queries.

• Next, to build up a MVC 4 Beta web project for ASP.NET 4.5 , create a new project from templates in VS 11 beta ultimate.

• Select the Mobile Web from the selected templates & choose Razor /ASPX View according to  your selection.

• Create the default project & examine the new file created called Packages.Config  which a inbuilt VS file containing all the .dll settings details along with their original version information installed in GAC of .NET 4.5.

• Next , check the MVC 4 Web in IE10 with advanced JQuery , HTML 5 & CSS 3 media queries support.

• Open the .cshtml pages in Page Inspector which is inbuilt with VS 11 beta Ultimate to examine the HTML5, CSS 3 styles  , javascript debugging features.

• Enable the Page Inspector settings & check the live preview of your Web in Visual Studio 11 Beta  .

• Now, the publish the Web in IIS 7.5 Express. Note though Windows 8 Consumer Preview has IIS 8 support but VS 11 Beta still works with IIS 7.5 express as local IIS. So deploy MVC 4 beta website in IIS 7.5 express via web deploy.

• Now , check the MVC 4 Web URL in iOS 5 devices & check ASP.NET MVC 4 Web API Mobile web appearence.

 

Bing Maps SDK for Windows 8 Metro Style Apps is now Available !!..

After a long await.. Bing Maps SDK for Windows 8 Metro Style Apps is now available after the release of Windows 8 Consumer Preview. The Bing Maps SDK has now full feature of PushPin, controlling maps configuration, calculating routes etc.

Download the Bing Maps SDK for Metro Style Apps here.

• Create a new Bing Maps integration with Metro Style Apps Project in Visual Studio 11 Express beta for Windows 8  .

• Integrate your Bing Maps API Key in the app & check the app in Windows 8 Simulator.

• The default Metro Style app developed with Bing Maps SDK in Windows 8 Consumer Preview.

 

Installation of Windows 8 Consumer Preview in VMWare Workstation

Installation of Windows 8 Consumer Preview in VMWare Workstation is quite simple as same like installing Windows 8 Developer Preview in VMWare. So in this case , prepare & customize the hardware settings. For my x86 system , I recommend to use HDD – 100 GB & RAM- 1536 MB.

Lets start by creating a new VHD for Windows 8 Consumer Preview.

• Next , keep the name of Guest OS as Windows 7 as still VMWare does not been upgraded for Windows 8 naming.

• After configuring Hardware customization , lets start by booting the Windows 8 Consumer Preview.

• Next, Start Windows Installation by selecting choosen drive.  The Default driver is selected  by default.

Choose your settings & start initializing for installation of Windows 8 Consumer Preview.

• Put the product key from Windows Preview   Website & Click on Next.

 

• Next, provide your Windows Store ID or Windows Live ID to setup a LogIn account in Windows .

• Provide a suitable name for your PC & add with the Account settings.

• Start launching Windows 8 Consumer Preview .    Sign in with your Windows Live ID & password.

• Lets start by preparing Windows 8 Consumer Preview.  

• Start experience with Windows 8 Consumer Preview .
• 

A Welcome to Windows 8 Consumer Preview

Windows 8 Consumer Preview has released on February 29th , 2012 at barcelona conference by Windows User Experience Team which reveals the new future for Tablets, Laptops, Slates with great experience of Metro Style Apps. Several new features has been flourished compared to developer preview of Windows 8 & hosting features for Touch centric devices as well as for laptop PCs.

Here is a quick preview of Windows 8 Consumer Preview.

Explore more articles on Windows 8 Consumer Preview on next series.