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. 

 

Advertisements

PhoneGap for Windows Phone,iPhone & Android apps with JavaScript,HTML 5 & CSS 3


  • What is PhoneGap? [http://phonegap.com]
  • PhoneGap is an open – source Mobile Development framework originated by Nitobi Software in iPhoneDevCamp at San Francisco, 2008.
  • Bridges the gap between the SDKs & native apps & Mobile Web apps.

 

  • How Does PhoneGap Work?
  • UIWebView object for iPhone
  • WebView object with Android
  • TemplateView with Windows Phone
  • Interpreted Language: JavaScript
  • Deployment: AppStore , Android Market, Windows Phone Marketplace.
  • Write your first application with PhoneGap for iPhone,Android & Windows Phone :
  • Webkit
  • BlackBerry 6+, Palm WebOS
  • HTML 5 with Canvas, Databases and Geolocation
  • CSS3 with Transitions, Gradients and Rounded Corners.
  • Cross-Domain security policy does not apply:
  • $.getJSON(‘http://search.twitter.com/trends/current.json&#8217;)

 

  • JQTouch:(http://jqtouch.com)
  • A JQuery plugin for Mobile Web development.
  • For iOS, Android & BlackBerry supports Page Transitions(CSS 3)
  • Page History
  • Toolbar
  • Forms
  • Home screen Icons

JQTouch Sample  Code:

<title>JQuery for i-Phone</title>

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

<meta name=”viewport”content=”width=device-width; initial-scale=1.0″/>

<link type=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<link type=”text/css”rel=”Stylesheet”media=”screen”href=”default/theme.css”/>

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

<script type=”text/javascript”src=”jqtouch.js”></script>

<script type=”text/javascript”>

var jQT = $.jQTouch({

icon:‘kilo.png’,

statusBar:‘black’

});

</script>

 

  • IScroll: Provides a scroll content inside a fixed width/height element
  • Android >= 1.5, iPad >= 3.2 , iPhone >=2.0
  • Uses touch JavaScript events:
  • touchstart
  • touchmove
  • touchend
  • Persistence.js:
  • Asynchronus Javascript object-relational mapper library
  • Can be used in web browser:
  • HTML 5 WebSQL database(WebKit)
  • Google Gears(Firefox/IE)
  • Also on the server using node.js:
  • Node-mysql

 

  • Processing.js
  • Port of the processing language to JavaScript
  • Uses canvas element
  • Good replacement for flash
  • Can also used directly as a JavaScript library 

 

  • Meta Tags:
  • Viewport- Changes the window size used when displaying on iOS/Android
  • <meta name=”viewport” content=”width=320,user-scalable=0″ />
  • Full Screen mode:
  • <meta name=”apple-mobile-web-app-capable” content=”yes”>
  • Style of the status bar:
  • <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

 

  • Link Tags:
  • Add icon to bookmark
  • <link rel=”apple-touch-icon” href=”/custom_icon.png” />
  • Icon with no gloss : <link rel=”apple-touch-icon-precomposed” href=”/icon.png” />
  • Startup Screen: <link rel=”apple-touch-startup-image” href=”/startup.png”>

 

  • Install PhoneGap:
  • iPhone:
  • Install XCode plus iOS SDK
  • Use installer PhoneGap provides
  • Select PhoneGap when making a new project with Xcode

 

  • Android:
  • Install android SDK and add to $PATH
  • Run “android” to grab latest version
  • Setup Eclipse with Android plugin
  • Add PhoneGap.jar to project

 

  • Basic PhoneGap API:
  • Accelerometer
  • Camera
  • Contacts
  • Device
  • Events
  • Geolocation
  • Network
  • Notification
  • Android Menu/Back Buttons
  • Read through Phonegap.js

 

  • Writing iPhone plugins:
  • Create new header file(“Test.h”)
  • Extend new ObjC class(“Test.m”)
  • Import new header file
  • Call ObjC from JavaScript
  • PhoneGap.exec(“Text.test”);
  • Update JS from ObjC
  • [webView stringByEvaluatingJavaScriptFromString:@”alert(‘test’)”]

 

  • Writing Android plugins:
  • WebView features:
  • addJavascriptInterface(JavaObject,”NameInJs”)
  • Allows Java method to be called directly by JavaScript
  • PhoneGap 0.9.2 features JavaScript controlled plugin manager
  • PluginManager.addService(
  • “HelloWorld”,
  • “com.phonegap.HelloWorldPlugin.HelloWorld );”
  • PhoneGap.execAsync(win,fail,”HelloWorld”,”sayHello”,[]);

Building a i-Phone/i-Pad specific Website in ASP.Net with Oracle using JQTouch


In last article, I have described about exploring JQTouch & its themes in building websites for i-Phone,i-Pad & i-Pod(Touch) devices. Lets start with developing mobile ASP.Net 4.0 with Oracle using JQuery & JQTouch plugins for building lucrative Websites for i-Phone, i-Pad, i-Pod(Touch) devices.

Development as usual in Visual Studio 2010 with JQTouch & JQuery plugins to be installed & it’s looked like as:

<%@PageLanguage=”C#”AutoEventWireup=”true”CodeFile=”Default.aspx.cs”Inherits=”Mobile_i_Phone_Default” %

<! doctypehtml>

<htmllang=”en”>

<headrunat=”server”>

<title>JQuery for i-Phone</title>

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

<metaname=”viewport”content=”width=device-width; initial-scale=1.0″/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”theme.css”/>

<scripttype=”text/javascript”src=”jquery.js”></script>

<scripttype=”text/javascript”src=”jqtouch.js”></script>

<scripttype=”text/javascript”>

var jQT = $.jQTouch({

icon:’kilo.png’,

statusBar:’black’

});
</script>

</head>

<body>

<divid=”home”>

<divclass=”toolbar”>

<h3>Sri Aurobindo Seva Kendra</h3>

<%— <a href=”#”>Back</a>–%>
</div>

<imgsrc=”../Images/aboutus.jpg”height=”73″alt=”logo”/>

<ul  class=”edgetoedge”>

<liclass=”arrow”><aid=”0″href=”Default.aspx”rel=”external”>Home Page</a></li>

<liclass=”arrow”><aid=”1″href=”#date”>About Us</a></li>

<liclass=”arrow”><aid=”2″href=”Solution.aspx”rel=”external”>Solution</a></li>

<liclass=”arrow”><aid=”3″href=”#date”>Contact Us</a></li>

</ul>

</div>

</body>

</html>

Next, Building code for next external link:

<% @PageLanguage=”C#”AutoEventWireup=”true”CodeFile=”Solution.aspx.cs”Inherits=”Mobile_i_Phone_Solution” %>

<!doctypehtml>

<htmllang=”en”>

<headid=”Head1″runat=”server”>

<title>JQuery for i-Phone</title>

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

<metaname=”viewport”content=”width=device-width; initial-scale=1.0″/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”theme.css”/>

<scripttype=”text/javascript”src=”jquery.js”></script>

<scripttype=”text/javascript”src=”jqtouch.js”></script>

<scripttype=”text/javascript”>

var jQT = $.jQTouch({

icon:‘kilo.png’,

statusBar:‘black’

});

</script>

</head>

<body>

<divid=”departments”>

<divclass=”toolbar”>

<h1>Departments</h1>

<aclass=”button back”href=”Default.aspx”rel=”external”>Back</a>

</div>

<asp:RepeaterID=”Repeater1″runat=”server”DataSourceID=”SqlDataSource1″EnableViewState=”false”>

<HeaderTemplate>

<ulclass=”edgetoedge”>

</HeaderTemplate>

<ItemTemplate>

<liclass=”arrow”>  <ahref=’Doctors.aspx?DepartmentId=<%# Eval(“SGRM000_SGRCD”)%>rel=”external”>

<%# Eval(“SGRM000_LONGDESC”)%>

</a>

</li></ItemTemplate>

<FooterTemplate>

</ul>

</FooterTemplate>

</asp:Repeater>

<asp:SqlDataSourceID=”SqlDataSource1″runat=”server”

ConnectionString=”<%$ ConnectionStrings:ConnectionString %>

ProviderName=”<%$ ConnectionStrings:ConnectionString.ProviderName %>

SelectCommand=”SELECT SGRM000_SGRCD, SGRM000_LONGDESC FROM HMS_000SGRM ORDER BY SGRM000_SGRCD”>

</asp:SqlDataSource>

</div>

</body>

</html>

Next , Put second Navigtion for each department according to their DepartmentId as QueryString.

%@PageLanguage=”VB”AutoEventWireup=”false”CodeFile=”Doctors.aspx.vb”Inherits=”Mobile_i_Phone_Doctors” %

<!doctypehtml>

<htmllang=”en”>

<headid=”Head1″runat=”server”>

<title>JQuery for i-Phone</title>

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

<metaname=”viewport”content=”width=device-width; initial-scale=1.0″/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”theme.css”/>

<scripttype=”text/javascript”src=”jquery.js”></script>

<scripttype=”text/javascript”src=”jqtouch.js”></script>

<scripttype=”text/javascript”>

var jQT = $.jQTouch({

icon:‘kilo.png’,

statusBar:‘black’

});

</script>

</head>

<body>

<divid=”doctors”>

<divclass=”toolbar”>

<h1>Doctors</h1>

<aclass=”button back”href=”Solution.aspx”rel=”external”>Back</a>

</div>

<asp:RepeaterID=”gv_doc”runat=”server”EnableViewState=”false”>

<HeaderTemplate>

<ulclass=”edgetoedge”>

</HeaderTemplate>

<ItemTemplate>

<liclass=”arrow”>  

<%# Eval(“item000_longdesc”)%>

</a>

</li></ItemTemplate>

<FooterTemplate>

</ul>

</FooterTemplate>

</asp:Repeater>

</div>

</body>

</html>

That’s it!! Lets View the Website in i-Phone.

Code-Behind in Visual Basic for Oracle Database:

Imports Oracle.DataAccess.Client

Imports System.Data

Partial ClassMobile_i_Phone_Doctors Inherits System.Web.UI.Page

ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load

Dim spreviousparam, sdept, ssql AsString

Dim objds AsNewDataSet

Dim x AsNewconnection

spreviousparam = Request.QueryString(“DepartmentId”)

‘Dim sparameter() As String = Split(spreviousparam, “!”)

‘sdept = sparameter(0)

ssql = “select item000_longdesc from hms_000item where item000_grcd=1 and item000_sgrcd='” & spreviousparam & “‘”

objds = x.GetResultsetds(ssql)

If (objds.Tables(0).Rows.Count > 0) Then

gv_doc.DataSource = objds.Tables(0)

gv_doc.DataBind()

End If

     End Sub

End class

The same application is to be viewed in BlackBerry 9800 .

  • View changes for ASP.Net 4.0 Details View controls in BlackBerry 9800 browser with custom JQTouch theme.

Similarly for default .mobi template view for BlackBerry Browser

  • ASP.Net JQuery Mobile Web in iPad 2 View :

 

 

 

This slideshow requires JavaScript.

 

%d bloggers like this: