Musings from Rob Richard

jQueryMobile 1.1.0 and the listview

DoctorRob — Mon, 23 Apr 2012 16:07:07 GMT

Introduction

So jQueryMobile 1.1.0 has finally been released; that’s the good news. The bad news is that some of the issues I complained about in my last post are still present in this version. So let’s just call 1.1.0 a work-in-progress. That being said, let’s investigate jQueryMobile a little further. Let’s begin with one of the most basic elements that you will most undoubtedly use in most – if not all – of your mobile apps: the listview (http://jquerymobile.com/demos/1.1.0/docs/lists/index.html).

The listview

The listview is perhaps the most common element that is used in mobile apps. It allows us as developers to create a straight forward, intuitive navigational interface. jQueryMobile’s implementation of the listview is pretty good, and offers a lot of different options, and themes very well.

Basic listview

Let’s say you simply want to present a list of items nicely on a view: easily done using just the basic listview. The code below shows a straight-forward list which displays countries.

<ul data-role="listview">
  <li>France</li>
  <li>Germany</li>
  <li>Great Britain</li>
  <li>Finland</li>
  <li>Norway</li>
  <li>United States</li>
</ul>

Let’s get a little fancier and add the county’s flag to the list. Easily done, by simply adding the flag image and now giving the element a class of "ui-li-icon"…

<ul data-role="listview">
  <li><img src="images/gf.png" alt="France" class="ui-li-icon">France</li>
  <li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany</li>
  <li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</li>
  <li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland</li>
  <li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway</li>
  <li><img src="images/us.png" alt="United States" class="ui-li-icon">United States</li>
</ul>

So now that we have an aesthetically pleasing list, let’s make it a navigation-type list, where for example tapping or clicking on a country takes us to another page / view.

<ul data-role="listview">
  <li><a href="http://localhost:30155/country/details/FR"><img src="images/gf.png" alt="France" class="ui-li-icon">France</a></li>
  <li><a href="http://localhost:30155/country/details/DE"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany</a></li>
  <li><a href="http://localhost:30155/country/details/GB"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
  <li><a href="http://localhost:30155/country/details/FI"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland</a></li>
  <li><a href="http://localhost:30155/country/details/NO"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway</a></li>
  <li><a href="http://localhost:30155/country/details/US"><img src="images/us.png" alt="United States" class="ui-li-icon">United States</a></li>
</ul>

So now we have a navigational list to take us to detail pages based on the country selected. There’s one more basic feature to add which jQueryMobile implements very nicely: the Search/Filter bar. So in our example, let’s say we have all the countries of the world listed here, all 180+. Instead of scroll down through the items, we simply want to start typing the first few letters of the country name and let the list show only those matching items. Amazingly enough, this in only a property setting on our listview - data-filter="true"

<ul data-role="listview" data-filter="true">
  <li><a href="http://localhost:30155/country/details/FR"><img src="images/gf.png" alt="France" class="ui-li-icon">France</a></li>
  <li><a href="http://localhost:30155/country/details/DE"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany</a></li>
  <li><a href="http://localhost:30155/country/details/GB"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
  <li><a href="http://localhost:30155/country/details/FI"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland</a></li>
  <li><a href="http://localhost:30155/country/details/NO"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway</a></li>
  <li><a href="http://localhost:30155/country/details/US"><img src="images/us.png" alt="United States" class="ui-li-icon">United States</a></li>
</ul>

Nicely done, jQueryMobile! Next time we’ll start on some of the basic form elements such as buttons, textboxes, and the like. Until then, happy coding…

jQueryMobile 1.1.0 and MVC4

DoctorRob — Fri, 09 Mar 2012 20:31:31 GMT

Introduction

I’ve been working on a project recently targeting mobile devices and have been using the latest version of jQueryMobile, 1.1.0 (Release Candidate 1 as of Feb 28, 2012 - http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/). This new version offers a number of enhancements on the jQueryMobile front (and introduces a few new issues, which will hopefully be worked out before being released as production). The great thing about advances in jQueryMobile is that it ties directly in to Microsoft’s plans for MVC 4 (also currently in Beta as of September, 2011) and their new mobile project template (see http://www.asp.net/whitepapers/mvc4-release-notes#_Toc317096197). My next few blog posts will examine jQueryMobile 1.1.0 and how we can leverage some of the tools in our own MVC-based, mobile-targeted applications.

Getting Started

In getting started with jQueryMobile (“JQM”) 1.1.0, the first thing to note is that it now supports jQuery version 1.7.1 (the previous version of JQM ONLY supports jQuery 1.6.4). Some significant enhancements include improved slider (including a “step” attribute to make sliding easier) and flip switches (fixed the awkwardness of the 1.0 version), the inclusion of a “mini” version of form elements, two new transitions, a navigation search (filter) capability, and a nice AJAX loader design and options, in addition to bug fixes and other enhancements. There is even an enhancement that will allow JQM to play nicely with 3^rd party controls (which obviously is of interest to us using Infragistics’ jQuery tools (http://www.infragistics.com/dotnet/netadvantage/jquery-controls.aspx#Overview)!).

This version of JQM solved a host of issues I had previously (ie, the checkbox control!) and lays the foundation for additional items to be included in the future, both from the JQM team, plugin developers, and other 3^rd party control suppliers. Still lurking in the shadows is Android sluggishness, so I’m hoping that the brain trust collaborates on ways to quicken it on Android.

The Plan

Over the next few blog posts, I will introduce and evaluate the various elements in JQM that are more popular to us as mobile device developers using a development platform. For instance, pages for us are in theory irrelevant since we will be using views. However, touch and form elements are indeed of interest. If popular demand dictates, however, that specific items be addressed, we can certainly spend a blog post or two on those things.

What’s Next?

Well, let’s start individually by downloading the aforementioned pre-release versions of jQueryMobile and MVC4, install them, and start exploring in preparation of our short series. Until then, happy coding…

Using VB.NET Razor markup with the Infragistics jquery grid.

DoctorRob — Fri, 13 Jan 2012 15:42:37 GMT

Introduction

Recently I had occasion to work with a customer developing an MVC application using VB.NET and the Infragistics JQuery tools – more specifically, the JQGrid. The challenge came when the customer wanted to use the Razor syntax on their views, and implementing the lambda expressions that we use in C# (I almost exclusively use C#) isn’t available in shorthand in VB.NET. This blog posting walks you through building a VB.NET version of this (http://blogs.infragistics.com/blogs/taz_abdeali/archive/2011/05/09/using-netadvantage-jquery-grid-in-asp-net-mvc.aspx) C# application.

Project setup

For the sake of brevity, you can use the same procedure for setting up the project that is found in the previous posting (http://blogs.infragistics.com/blogs/taz_abdeali/archive/2011/05/09/using-netadvantage-jquery-grid-in-asp-net-mvc.aspx) entitled “Setting up the project”.

Implementing the Model

Just as in the original posting, let’s begin with the model. We’ve translated the C# code for the model to VB.NET, as seen below.

Public Class BankAccount
    Public Property AccountNumber As Integer
    Public Property AccountName As String
    Public Property AccountDate As DateTime
    Public Property AccountType As String
    Public Property AccountBalance As Decimal
End Class
Public Class AccountModel
    Public Shared Function GetAccountList() As List(Of BankAccount)
        Dim aList As List(Of BankAccount) = New List(Of BankAccount)
        For i As Integer = 1 To 1000
            Dim a As BankAccount = New BankAccount()
 
            With a
                .AccountNumber = i
                .AccountName = "Test" + i.ToString()
                .AccountDate = Today
                .AccountType = "Checking"
                .AccountBalance = 12345678.9
            End With
            aList.Add(a)
        Next
 
        Return aList
    End Function
End Class

So we have the same AccountModel with the BankAccount class built into it. The AccoundModel class provides us with the GetAccountList function which generates some “test” BankAccount data.

The controller

Let’s depart from the previous blog here by going next to the controller class instead. The controller is pretty straight forward. We want to place code that when called by the view, will go and get the account list from the model and then return it. To do that, we will use the following code, making sure to import theInfragistics.Web.Mvc:

Imports Infragistics.Web.Mvc
Public Class HomeController
    Inherits System.Web.Mvc.Controller
 
    '
    ' GET: /Index
 
    Function Index() As ActionResult
        Return View()
    End Function
 
    <GridDataSourceAction()>
    <ActionName("GetAccountList")>
    Function GetAccountList() As ActionResult
        Return View(Mvc3WebAppVB.AccountModel.GetAccountList().AsQueryable())
    End Function
End Class

The view

Now for the view – the focus of this posting. As you can see in the previous posting, we use the Razor syntax. For certain collections (features, columns, etc.) in the JQGrid, we can use lambda expressions in C# to configure the grid. However, VB.NET doesn’t support the shorthand lambda expression. Fortunately, we can emulate the C# equivalent by using Function() (http://msdn.microsoft.com/en-us/library/bb531253.aspx). Therefore, something in C# that looks like this:

.Columns(column =>
{
    column.For(x => x.AccountNumber).DataType("int").HeaderText("Account Number");
    column.For(x => x.AccountName).DataType("string").HeaderText("Account Name");
    column.For(x => x.AccountDate).DataType("date").HeaderText("Account Date");
    column.For(x => x.AccountType).DataType("string").HeaderText("Account Type");
    column.For(x => x.AccountBalance).DataType("number").HeaderText("Account Balance");
})

In VB.NET will look like this:
.Columns(Function(columns)
	columns.For(Function(c) c.AccountNumber).HeaderText("Account Number").DataType("int")
	columns.For(Function(c) c.AccountName).HeaderText("Account Name").DataType("string")
	columns.For(Function(c) c.AccountDate).HeaderText("Account Date").DataType("date")
	columns.For(Function(c) c.AccountType).HeaderText("Account Type").DataType("string")
	columns.For(Function(c) c.AccountBalance).HeaderText("Account Balance").DataType("number")
	End Function) _

Note the simple replacement of => with Function, where the left hand variable is now the function argument. That’s all we have to do. So then our complete view code looks like the following:

@(
            Layout = "~/Views/Shared/_Layout.vbhtml"
)
@Imports Infragistics.Web.Mvc
@ModelType IQueryable(Of Mvc3WebAppVB.BankAccount)
<br />
<br />
@(Html.Infragistics().Grid(Model) _
        .ID("grid2") _
        .AutoGenerateColumns(False) _
        .Columns(Function(columns)
                         columns.For(Function(c) c.AccountNumber).HeaderText("Account Number").DataType("int")
                         columns.For(Function(c) c.AccountName).HeaderText("Account Name").DataType("string")
                         columns.For(Function(c) c.AccountDate).HeaderText("Account Date").DataType("date")
                         columns.For(Function(c) c.AccountType).HeaderText("Account Type").DataType("string")
                         columns.For(Function(c) c.AccountBalance).HeaderText("Account Balance").DataType("number")
                 End Function) _
        .Features(Function(features)
                          features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("Next")
                          features.Sorting().Mode(SortingMode.Single)
                          features.Selection().Mode(SelectionMode.Row).MultipleSelection(True)
                  End Function) _
    .ClientDataSourceType(ClientDataSourceType.JSON) _
    .DataSourceUrl(Url.Action("GetAccountList")) _
    .DataBind() _
    .Width("100%") _
    .Height("350") _
    .LocalSchemaTransform(True) _
    .Render())

Conclusion

So following the project setup in the original posting (http://blogs.infragistics.com/blogs/taz_abdeali/archive/2011/05/09/using-netadvantage-jquery-grid-in-asp-net-mvc.aspx), then adding in our VB.NET specific code that you’ve seen here in this posting, we have a VB.NET MVC application using the JQGrid and Razor syntax.