VB Magic

2012/02/08

Have the starts of a game running on the FEZ Spider

Just a quick post to show what I’ve been doing with the new toy 😉

Of course I started to write the same game as I have going on the Windows Phone and Azure.

The below picture shows the components used in the project:

Board Layout

The source code is available open source from Tyranntmicro on Code Plex

Also a small video of it running is here:

Jas

2011/08/15

Azure Gotcha’s – Storage Transactions

Filed under: Azure, Learning — Tags: , , , — vbmagic @ 12:13 pm

A quick post about using Azure to test things…

I decided to see if I had gone over any of my allowances with my MSDN Azure Account. (These cost money and it’s always a good idea to check at least once a week)

I noticed that my Storage Transactions was costing me £1.36 so far this month. I’ve never been charged before as I had never gone over my allotted amount.

A quick check shows the problem. You have to get your brain out of the mindset of developing for local systems. In my mind I was thinking that I have a whole compute instance sitting at the back end processing jobs that gets put onto a queue. So I set the re-check rate to every 100ms as I wanted to maximise the usage of the compute instance. Each one of these checks to see if there is a job on the queue counts as a storage transaction. So basically I was getting At least 864,000 transactions per day. That’s $0.01 per 10,000 transactions over my limit (which is 2,000K) which would basically cost around $0.87 per day. I know this is not much but it quickly adds up. Imaging I decided to test ramping up and running 10 instances of the back end servers, that turns into $8.64 per day. I have now modified the code in the worker role to only check every minute. Which is not a problem as this is only a test system.

Cheers,

Jas

2011/08/10

Azure Queues

I’ve been learning about using Queues in Azure and thought the best way to learn was to start writing an application to test this. My example site will probably only run on single instances; but I decided from the start to write something that will be scalable so came up with the following principle

The client/website can only READ from the database. Anything that requires updating the database must be done via the back end. The client/website must be able to cope with the fact that the requested update will not happen immediately.

The upshot of this, I came up with a job system that uses Azure queues to pass work to the back end worker role. For the moment, I decided to have one queue which handled multiple types of jobs. This lead to me creating a job base class which will cover the common things that the different jobs required. I also decided to use an XML format to describe the job. I need to make sure though that the jobs do not grow bigger than the size allowed for an Azure Queue job (8k).

Below is the base class which is inherited in the actual job classes:

Imports Microsoft.WindowsAzure
Imports Microsoft.WindowsAzure.StorageClient
Imports Microsoft.WindowsAzure.ServiceRuntime

Public MustInherit Class tjob

    ' Enable database access
    Protected Friend _db As New TyranntDB
    ' A place holder for the user information
    Protected Friend _usr As tUser
    ' setup variables to allow for access to Azure Queues
    Protected Friend _storageAccount As CloudStorageAccount
    Protected Friend _jobQueue As CloudQueue

    ' A sample of a job entry in the Queue
    Private sample = <job type="email" user="102">
                         <type/>
                     </job>

    ' the user ID which is used to pull the user information
    Private _userID As Int64

    ' Initialise the job from the XML String
    Public Sub New(jobStr As String)
        Dim jobXML As XElement = XElement.Parse(jobStr)
        _JobType = jobXML.@type
        Dim usrstr As String = jobXML.@userid
        UserID = Convert.ToInt64(usrstr)
    End Sub

    ' Create a blank job, this is used for creating a job to
    ' put onto the queue.
    Public Sub New()
        _JobType = ""
        _userID = -1
    End Sub

    ' Job type. Used to create the correct object.
    Public Property JobType As String

    ' The user ID. If this is being set then it
    ' will look up the user from the database
    Public Property UserID As Integer
        Get
            Return _userID
        End Get
        Set(value As Integer)
            _userID = value
            If _userID > 0 Then
                GetUserDetails()
            End If
        End Set
    End Property

    ' This is the code that "Processes" the job. Each job type must
    ' implement this code.
    Public MustOverride Function Process() As Boolean

    ' A general variable for storing any errors that
    ' occur. If it's empty then no errors are assumed.
    Public Property ErrorMessage As String

    ' This will generate an XML element that describes the job.
    Public MustOverride Function ToXML() As XElement

    ' This will generate a string version of the XML
    ' which describes this job.
    Public Overrides Function ToString() As String
        Return ToXML.ToString
    End Function

    ' This routine will pull the user information from the
    ' database and store the user detals in the _usr object.
    Protected Friend Sub GetUserDetails()
        Dim q = From u In _db.users
              Where u.ID = _userID
              Select u
        If q.Count > 0 Then
            _usr = q.Single
        End If
    End Sub

    ' If the job is being created. This function will add the job
    ' to the Azure Queue.
    Public Sub AddJobToQueue()
        ' Get the azure storage account object.
        _storageAccount = CloudStorageAccount.Parse( RoleEnvironment.GetConfigurationSettingValue(TyranntSupport.Constants.STORAGE_CONNECTION))
        ' Now get the queue client.
        Dim client As CloudQueueClient = _storageAccount.CreateCloudQueueClient
        _jobQueue = client.GetQueueReference(Constants.QUEUE_JOBS)
        ' Create the queue if it doesn't exist.
        _jobQueue.CreateIfNotExist()
        Try
            ' Now add the job details to the queue.
            Dim msg As New CloudQueueMessage(Me.ToString)
            _jobQueue.AddMessage(msg)
        Catch ex As Exception
            _ErrorMessage = ex.Message
        End Try
    End Sub
End Class

The TyranntDB class is an Entity Framework code first class that allows access to the SQL Azure database. Any class prefixed with a t (E.g. tUser) is a database table class. You will notice a Sample variable using XML Literals. This is just as an example to show how that job is formed in XML. Each inherited class will have it’s own sample.

All job classes need to be able to add themselves to the Azure Queue. They also need to be able to access the SQL Azure database. These features were written into the base class. All job classes must also have a way of being “Processed” which meant adding a MustOverride function called Process. They must also be able to export themselves as an XML document which is why the MustOverride function called ToXML is added.

The website uses Forms Authentication to enable it to validate users. But I also have a site specific user table to add extra information too. As this involves updating the database, this is the first “Job” that needs creating:

Public Class tjNewUser
    Inherits tjob

    ' an example of a new user job
    Private sample = <job type="newuser" user="-1">
                         <user name="{username}" email="{user)@{domain}">Full Name</user>
                     </job>

    ' Extra data required by this class
    Public Property userName As String
    Public Property email As String
    Public Property fullName As String

    Public Sub New(jobStr As String)
        ' initialise basic information
        MyBase.New(jobStr)
        Dim jobXML As XElement = XElement.Parse(jobStr)
        ' now initialise new user information
        _userName = jobXML...<user>.@name
        _email = jobXML...<user>.@email
        _fullName = jobXML...<user>.Value
    End Sub

    Public Sub New()
        ' initialise the base information
        MyBase.New()
        JobType = "newuser"
        _userName = ""
        _email = ""
        _fullName = ""
    End Sub

    ' Create the new user in the database
    Public Overrides Function Process() As Boolean
        ' first check to see if the user already exists

        Dim r = From u In _db.users
              Where u.username = _userName
              Select u

        If r.Count > 0 Then
            ' User already exists so do not continue
            ' return true in this case as request
            ' has been processed more than one.
            Return True
        End If
        ' create a new user
        Dim usr As New tUser
        ' populate the generic information
        usr.username = _userName
        usr.email = _email
        usr.fullname = _fullName
        ' now set the user group to be member
        Try
            Dim grp As tUserGroup = _db.GetUserGroup("member")

            If IsNothing(grp) Then
                _db.CreateBaseGroups()
                usr.usergroup = _db.GetUserGroup("member")
            Else
                usr.usergroup = grp
            End If
        Catch ex As Exception
            ErrorMessage = ex.Message
            Return False
        End Try

        ' now save the user
        Try
            _db.users.Add(usr)
            _db.SaveChanges()
        Catch ex As Exception
            ErrorMessage = ex.Message
            Return False
        End Try

        ' Now that the user was sucessfully created,
        ' generate a new user email job
        Dim jb As New tjEmail
        jb.EmailType = "newuser"
        jb.From = "mail@me.uk"
        jb.UserID = usr.ID
        ' Add the job to the Azure job queue
        jb.AddJobToQueue()
        If jb.ErrorMessage = "" Then
            Return True
        Else
            ErrorMessage = jb.ErrorMessage
            Return False
        End If
    End Function

    Public Overrides Function ToXML() As XElement
        Return <job type="newuser" userid=<%= UserID %>>
                   <user name=<%= _userName %> email=<%= _email %>><%= _fullName %></user>
               </job>
    End Function

End Class

I’ve added the extra properties required for adding a new user and the extraction of these properties from the XML. The process function is also created which will create the user row in the users table. Hopefully the comments in the code should explain the process to do this. This routine also makes use of XML Literals which is a VB only thing at time of writing. (For example used in the ToXML and New functions.

As you can see at the end of the processing, we need to send a confirmation email to the user who has created the account. This kind of thing is also ideal for the back end to deal with hence being handled by the job queue system:

Imports System.Net.Mail

Public Class tjEmail
    Inherits tjob

    ' a sample email job
    Private sample = <job type="email" user="102">
                         <email from="mail@me.uk" type="newuser"/>
                     </job>

    ' setup extra information required by this job
    Private _from As String
    Private _emailType As String

    ' The is the from email address
    Public WriteOnly Property From As String
        Set(value As String)
            _from = value
        End Set
    End Property

    ' This will be the email type e.g. newuser
    Public WriteOnly Property EmailType As String
        Set(value As String)
            _emailType = value
        End Set
    End Property

    ' If the job XML already exists this will set up
    ' the information automatically
    Public Sub New(jobStr As String)
        MyBase.new(jobStr)
        Dim jobXML As XElement = XElement.Parse(jobStr)
        _from = jobXML...<email>.@from
        _emailType = jobXML...<email>.@type
    End Sub

    ' Create an empty email job if creating a new job
    Public Sub New()
        MyBase.New()
        JobType = "email"
        _from = ""
        _emailType = ""
    End Sub

    ' Send the email
    Public Overrides Function Process() As Boolean
        Dim email As MailMessage
        ' Generate the correct body of the email
        Select Case _emailType
            Case "newuser"
                email = GenerateNewUserEmail()
            Case Else
                ErrorMessage = String.Format("Email Type [{0}] not recognised", _emailType)
                Return False
        End Select

        ' Now set up the SMTP server client to send the email.
        Dim smtp As New SmtpClient(My.Resources.smtpServer, Integer.Parse(My.Resources.smtpPort))
        ' Pull the smtp login details.
        smtp.Credentials = New Net.NetworkCredential(My.Resources.smtpUser, My.Resources.smtpPass)
        Try
            smtp.Send(email)
        Catch ex As Exception
            ErrorMessage = ex.Message
            Return False
        End Try
        Return True
    End Function

    ' This will generate the subject and body of the newuser email
    Private Function GenerateNewUserEmail() As MailMessage
        Dim email As New MailMessage(_from, _usr.email)
        email.Subject = My.Resources.Resources.TyranntAccountCreated
        email.BodyEncoding = System.Text.Encoding.Unicode
        email.IsBodyHtml = False
        email.Body = String.Format(My.Resources.newUserEmail, _usr.username)
        Return email
    End Function

    Public Overrides Function ToXML() As XElement
        Return <job type="email" userid=<%= UserID %>>
                   <email from=<%= _from %> type=<%= _emailType %>/>
               </job>
    End Function

End Class

The process function in this job will generate an email and pull the smtp server details out of a resource file and depending on the type of email, will take the email body from resources too.

Now these job classes are created, they can be added to the job queue by using {job}.AddJobToQueue() method as shown in the tjNewUser class. But how will they be processed. This is where the WorkerRole comes into play. As all the work is done by the job classes themselves, only a very simple piece of code is required to process the queues:

    Public Overrides Sub Run()

        Trace.WriteLine("TyranntDogsbody entry point called.", "Information")

        ' Loop forever
        While (True)
            ' Get the next message from the queue
            Dim msg As CloudQueueMessage = Nothing
            msg = _jobQueue.GetMessage(TimeSpan.FromSeconds(30))

            If IsNothing(msg) Then
                ' If message doesn't exist then seep for 1 minute
                Thread.Sleep(60000)
            Else
                ' Message exists so process the message
                ProcessMessage(msg)
            End If
        End While
    End Sub

    Private Sub ProcessMessage(msg As CloudQueueMessage)

        Try
            ' Turn the message into an XML element
            Dim xmlMsg As XElement = XElement.Parse(msg.AsString)
            ' Extract the message type from the element
            Dim type As String = xmlMsg.@type

            ' Now we create a job
            Dim job As tjob
            Select Case type
                ' Use the message type to see what kind of job is required
                Case "newuser"
                    job = New tjNewUser(msg.AsString)
                Case "email"
                    job = New tjEmail(msg.AsString)
                Case Else
                    Exit Sub
            End Select
            ' Process the job.
            If job.Process() = True Then
                ' The job succeeded so write a trace message to say this and
                ' delete the message from the queue.
                Trace.WriteLine(String.Format("{0} succeeded", type), "Information")
                _jobQueue.DeleteMessage(msg)
            Else
                ' The job failed so write a trace error message saying why the job failed.
                ' This will leave the job on the queue to be processed again.
                Trace.WriteLine(String.Format("{0} failed: {1} ", type, job.ErrorMessage), "Error")
            End If
        Catch ex As Exception
            ' something big has gone wrong so write this out as an error trace message.
            Trace.WriteLine(String.Format("Failed to parse xml message: [{0}]", msg.AsString), "Error")
            Exit Sub
        End Try
    End Sub

As you can see from the above code. There very little extra code required to process the job as all the work is done inside the job class.

This may be refined in the future but I hope it’s helpful for some people.

Jas

2011/07/25

Getting an ASP.NET MVC Razor site into the cloud

Filed under: ASP.NET MVC, Azure, Learning — Tags: , , , , , — vbmagic @ 12:53 pm

I started to work on a web role to test out experiments with ADO.net code first and ASP.NET MVC 3 with Razor. Out of the box, VS 2010 does not support ASP.net MVC 3 so I created the Azure project, then added a ASP.NET MVC 3 project separately. I then added that MVC project to the Azure project as a web role. Clicked run and all seemed to work fine.

But as with all things Azure, if it works in the developer environment, don’t expect it to automatically work in the cloud.

It didn’t. But I was expecting that. It was a bit hard to track down what the problems were as it only manifested as a web role that never seemed to get started.

Once I had worked out that meant it was missing core components for the web site, I was pleasantly surprised was how easy it was to fix this.

On your MVC 3 project right click the project solution and then select “Add Deployable Dependencies”

Then click the “ASP.NET MVC” and the “ASP.NET Web Pages with Razor syntax” check boxes and click ok.

You will then find a directory added to your project called _bin_deployableAssemblies.

All I did after this was “Deploy” the Azure Project and after waiting for the project to deploy into the cloud, it all started ok and worked.

I wish all problems were as easy to solve as this 🙂

Jas

2011/06/27

Trying to get Entity Framework Code First working : The Solution

Filed under: ASP.NET MVC, Azure, Learning — Tags: , , — vbmagic @ 11:39 am

Hi,

In the light of day the problem is solved. It seems that if the database you are connecting to already exists, then it will not create any new tables that you may try to access.

I basically dropped my local database and re-ran the webserver and it created the tables and the database with no issues.

On with the MVC3 course…

Jas

2011/06/26

Trying to get Entity Framework Code First working : The Problem

Filed under: ASP.NET MVC, Azure, Learning — Tags: , , , , — vbmagic @ 10:44 pm

I’ve added reference to EntityFramework (Downloaded by NuGet) to my MVC 3 project.

I then created the following two classes to represent my tables:

Imports System.ComponentModel.DataAnnotations

Public Class tImage
    <Key()>
    Public Property ID As Int64

    <MaxLength(50)>
    Public Property name As String

    <MaxLength(255)>
    Public Property URL As String

    Public Property type As tImageType

    <MaxLength(50)>
    Public Property tag As String
End Class
Imports System.ComponentModel.DataAnnotations

Public Class tImageType
    <Key()>
    Public Property ID As Integer

    <MaxLength(50)>
    Public Property name As String

    <MaxLength(255)>
    Public Property description As String

End Class

And then created the following class as my data context:

Imports System.Data.Entity

Public Class TyranntDB
    Inherits DbContext

    Public Property images As DbSet(Of tImage)
    Public Property imageTypes As DbSet(Of tImageType)

End Class

I then added the following connection string to my web.config file:

  <connectionStrings>
             .....
    <add name="TyranntDB"
         connectionString="Data Source=.\SQL08;Initial Catalog=jsundb;Integrated Security=True;Pooling=False"
         providerName="System.Data.SqlClient" />
  </connectionStrings>

Everything from this point compiled ok. After this I created an Image Controller

Namespace TyranntServices
    Public Class ImageController
        Inherits System.Web.Mvc.Controller


        Dim _db As New TyranntDB
        '
        ' GET: /Image

        Function Index() As ActionResult

            Dim model = _db.images

            Return View(model)
        End Function
...

And the following View to list Images (Well it was mostly auto generated by using the Add View option with list template):

@ModelType IEnumerable(Of TyranntServices.tImage)

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p> 
<table>
    <tr>
        <th></th>
        <th>
            name
        </th>
        <th>
            URL
        </th>
        <th>
            tag
        </th>
    </tr>

@For Each item In Model
    @<tr>
        <td>
            @Html.ActionLink("Edit", "Edit", New With {.id = item.ID}) |
            @Html.ActionLink("Details", "Details", New With {.id = item.ID}) |
            @Html.ActionLink("Delete", "Delete", New With {.id = item.ID})
        </td>
        <td>
            @item.name
        </td>
        <td>
            @item.URL
        </td>
        <td>
            @item.tag
        </td>
    </tr>
Next
</table>

This all seems to compile well. When I run though, the tables do not get generated and I get an error stating that the dbo.tImages does not exist.

It’s late now so will post this and hope I can soon update it with what is wrong.

Jas

2011/04/04

Dynamically creating pivot items and populating with data

Filed under: Learning — Tags: , , , , , , , — vbmagic @ 5:01 pm

I’ve spent the weekend trying to work out how to create the pages you see on a Pivot Page dynamically through code. It took a lot of web searching and trial and errors but I seem to have managed to get the basics of this worked out. I’m posting this to help other people who are trying to do the same thing. In this case it works, but if anyone else has a better/more efficient way of doing this I would be interested in looking at it.

The database/Web server has a directory full of images which the web service will pass back to the client using XML. Each image can belong to a image type. Each of these types will be a Pivot Item in the Pivot page. The list of images for each of these types will be displayed on each of these Pivot items.

I started by creating a pivot page and deleted any pivot items that where in the XAML. I then created the following Page Load event code:

    Private _client As New adminServiceReference.AdminServiceClient

    Private Sub PhoneApplicationPage_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        ' setup the event handlers for retrieving image types and image lists
        AddHandler _client.GetImageTypesCompleted, AddressOf client_GetImageTypesCompleted
        AddHandler _client.GetImagesCompleted, AddressOf client_GetImagesCompleted

        ' request the image types
        Dim str As New StrType
        str.TokenGUID = GetToken()
        _client.GetImageTypesAsync(str)
    End Sub

    Private Function GetToken() As Guid
        Dim result As Guid
        If _phoneAppService.State.TryGetValue("token", result) Then
            Return result
        Else
            MessageBox.Show("Failed to retrieve token")
            Return Nothing
        End If
    End Function

This will call the GetImageTypes web service on the server (I will document these in another post)
Once the request has been completed, all the image types will be sent back to the client in XML format.

    ' Routine to handle the Get Image Types completed event.
    Private Sub client_GetImageTypesCompleted(ByVal sender As Object, ByVal e As adminServiceReference.GetImageTypesCompletedEventArgs)
        If e.Error Is Nothing Then
            Dim types = e.Result
            ' did the server side report an error?
            If types.ErrorMessage = "" Then
                ' no so loop through each Image type in the xml result
                For Each ele In types.xml...<type>
                    ' We need to create a new Pivot item for each image type
                    Dim p As New PivotItem
                    ' set the header name to the lowercase version of the type name
                    ' this is to fit in with the standard way of showing pivot items
                    p.Header = ele.Value.ToLower
                    ' add the pivot item to the pivot page
                    imagePivotControl.Items.Add(p)
                    ' now request all the images under of that type
                    Dim str As New StrType
                    str.text = ele.Value
                    _client.GetImagesAsync(str)
                Next
            Else
                ' The server side got an error so display the error
                ' to aid in debugging.
                MessageBox.Show(types.ErrorMessage)
            End If
        Else
            ' the request to the webservice caused an error so
            ' display this error to try and help debug the problem.
            MessageBox.Show(e.Error.Message)
        End If
    End Sub

The comments in the above code should lead you through the creation and titling of the PivotItem and used XML Literals a very handy feature in VB to make code more readable when interacting with XML. (This should be implemented in C#)

For each image type pivot item created it will also request all the images for that image type which the following code will handle.

    ' a routine to handle the Get Images completed event.
    Private Sub client_GetImagesCompleted(ByVal sender As Object, ByVal e As adminServiceReference.GetImagesCompletedEventArgs)
        ' Did the request cause an error
        If e.Error Is Nothing Then
            Dim imgs = e.Result
            ' Did the web server get an error while processing the request.
            If imgs.ErrorMessage = "" Then
                ' no error so start searching the PivotItems to find the one matching
                ' the type that we requested the images for.
                For Each pg As PivotItem In imagePivotControl.Items
                    If pg.Header.ToString = imgs.type.ToLower Then
                        ' We have a match so create a listbox item to hold the details
                        Dim lb As New ListBox
                        ' we need a counter to display next to the image
                        ' this is only temorary until we have an image there
                        Dim cnt As Integer = 0
                        ' Loop through all the image elements in the returned XML
                        For Each ele In imgs.xml...<image>
                            ' We need to create a grid to store the information in the
                            ' list box item this is the equivilent to the following XAML
                            '
                            '   <grid>
                            '       <Grid.RowDefinitions>
                            '           <RowDefinition Height="Auto"/>
                            '       </Grid.RowDefinitions>
                            '       <Grid.ColDefinitions>
                            '           <ColDefinition Width="100"/>
                            '           <ColDefinition Width="Auto"/>
                            '       </Grid.RowDefinitions>
                            '    </grid>

                            ' Create the grid object
                            Dim grd As New Grid
                            ' Create the row definition objec
                            Dim rowdef As New RowDefinition
                            ' the row definition object uses a object called gridlength
                            ' we create one of these and set it to Auto
                            Dim glen As New GridLength
                            glen = GridLength.Auto
                            ' we add the height information to the row definition
                            rowdef.Height = glen
                            ' now we add the row definition to the list of row definitions
                            ' in the grid object
                            grd.RowDefinitions.Add(rowdef)
                            ' Now we need to create a column definition
                            Dim coldef As New ColumnDefinition
                            ' the first column has a width of 100 pixels for now, it will
                            ' contain an image eventually and we can leave it set to auto.
                            coldef.Width = New GridLength(100)
                            ' add the column definition to the list of column definitions in
                            ' the grid object.
                            grd.ColumnDefinitions.Add(coldef)
                            ' we now create the second column definition to auto which is the
                            ' same as we used with the row definiton so lets just re-use
                            ' this object.
                            coldef = New ColumnDefinition
                            coldef.Width = glen
                            ' add the final column definition to the collection of column
                            ' definitions in the grid object.
                            grd.ColumnDefinitions.Add(coldef)

                            ' Now we start to add the data, first we create a textblock that
                            ' will be used to hold the count.
                            ' This is the equivilent to the following XAML.
                            '
                            '   <TextBox Grid.Column="0" Grid.Row="0" Text="{cnt.string}"/>
                            '
                            Dim tb = New TextBlock
                            ' we set the row and column of the textblock to make it appear in
                            ' the correct loctation
                            Grid.SetColumn(tb, 0)
                            Grid.SetRow(tb, 0)
                            ' set the text property of the text block to the current count
                            tb.Text = cnt.ToString
                            ' add the textblock to the children objects of the grid.
                            grd.Children.Add(tb)
                            ' Now we add a new text block which will display the name of the
                            ' image file on the server.
                            ' This is the equivilent to the following XAML
                            '
                            '   <TextBox Grid.Column="1" Grid.Row="0" Text="{ele.value}"/>
                            '
                            tb = New TextBlock
                            ' set the row and column information of the text block.
                            Grid.SetColumn(tb, 1)
                            Grid.SetRow(tb, 0)
                            ' pull the content of the image item ( <image>value</image> ) and
                            ' put this into the text property of the text block
                            tb.Text = ele.Value
                            ' add the text block to the child objects of the grid.
                            grd.Children.Add(tb)

                            ' Now we create the list box item to add to the list box in
                            ' the pivot item.
                            Dim lbi As New ListBoxItem
                            ' add the grid to the listbox item
                            lbi.Content = grd
                            ' and add the list box item to the list box
                            lb.Items.Add(lbi)
                            ' increment the counter
                            cnt += 1
                        Next
                        ' add the list box to the pivot item.
                        pg.Content = lb
                    End If
                Next
            Else
                ' the server produced and error so display to aid in debugging
                MessageBox.Show(imgs.ErrorMessage)
            End If
        Else
            ' the request caused and error so display this to aid in debugging
            MessageBox.Show(e.Error.Message)
        End If
    End Sub

Again I have commented the code to lead you through how the listbox and listbox items are created from the XML results and used to populate the pivot item for each image type.

Jas

2011/04/01

Client/Server experiment with MVC3 and Windows Phone 7 (Part 2.2 – Login Page)

Filed under: Learning — Tags: , , , , , , — vbmagic @ 3:59 pm

After getting over the “Add Service Reference” problem mentioned in the previous post, the Login page was created:

login page graphic

Login Page

XAML file below:

https://vbmagic.wordpress.com/wp-admin/edit.php
<phone:PhoneApplicationPage 
    x:Class="TyranntPhone.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="TYRANNT" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="login" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid x:Name="LoginGrid" Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="usernameTextBlock" Grid.Row="0" Grid.Column="0" Text="Username" VerticalAlignment="Center" />
                <TextBox x:Name="usernameTextBox" Grid.Row="0" Grid.Column="1" Text="" VerticalAlignment="Center" />
                <TextBlock x:Name="passwordTextBlock" Grid.Row="1" Grid.Column="0" Text="Password" VerticalAlignment="Center" />
                <PasswordBox x:Name="passwordPasswordBox" Grid.Row="1" Grid.Column="1" Password="" VerticalAlignment="Center" IsEnabled="False" />
                <CheckBox x:Name="rememberMeCheckBox" Grid.Row="2" Grid.Column="1" Content="Remember Me" IsEnabled="False" />
                <Button x:Name="loginButton" Grid.Row="3" Grid.ColumnSpan="2" Content="Login" IsEnabled="False" />
                <Button x:Name="logoutButton" Grid.Row="4" Grid.ColumnSpan="2" Content="Logout" Visibility="Collapsed" />
            </Grid>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

Then helper methods were created to adjust the page layout and to help with passing information between pages. Also, to help with the application tomb-stoning, the following routines were created in the App.xaml.vb page to store and retrieve information:

    Private Sub StoreDetails()
		' The PhoneApplicationService stores information while the application is "Active"
        Dim phoneAppService As PhoneApplicationService = PhoneApplicationService.Current
		' The IsolatedStorageSettings will store informaiton on the phones flash memory to be
		' retrieved after the app has shut down and re-started.
        Dim settings As IsolatedStorageSettings = IsolatedStorageSettings.ApplicationSettings

		' Pull the token GUID from temp storage in the phones memory and write into the 
		' permanante storage on the phone's flash disk. Only if it exists
        Dim token As Guid
        If phoneAppService.State.TryGetValue("token", token) = True Then
            settings("token") = token
        End If
		' The same for the remembered username, this will allow the name to be recalled
		' after the app has been shut down in any way.
        Dim rname As String = ""
        If phoneAppService.State.TryGetValue("rememberedUsername", rname) = True Then
            settings("rememberedUsername") = rname
        End If
		' This stores the user group, for the moment, this should only really be done
		' if the app is paused to allow another app to run. If the app is exited the
		' user will have to log on again anyway.
        Dim group As String = ""
        If phoneAppService.State.TryGetValue("group", group) = True Then
            settings("group") = group
        End If
    End Sub

    Private Sub GetDetails()
		' The PhoneApplicationService stores information while the application is "Active"
        Dim phoneAppService As PhoneApplicationService = PhoneApplicationService.Current
		' The IsolatedStorageSettings will store informaiton on the phones flash memory to be
		' retrieved after the app has shut down and re-started.
        Dim settings As IsolatedStorageSettings = IsolatedStorageSettings.ApplicationSettings

		' The token us used to identify the user without the need for a username and password.
        Dim token As Guid
        If settings.TryGetValue("token", token) = True Then
            phoneAppService.State("token") = token
        End If
		' if the user has ticked the remember me box, this is the name they used to log on.
        Dim rname As String = ""
        If settings.TryGetValue("rememberedUsername", rname) = True Then
            phoneAppService.State("rememberedUsername") = rname
        End If
		' this will show if the user is a member of any special user group such as administrator
        Dim group As String = ""
        If settings.TryGetValue("group", group) = True Then
            phoneAppService.State("group") = group
        End If
    End Sub

I got the idea for this from the WP7 course at http://learnvisualstudio.net a good resource for learning most things .net.

Here is the code to handle the enabling and disabling of sections of the login page:

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    Private _phoneAppService As PhoneApplicationService = PhoneApplicationService.Current

    ' Constructor
    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub EnableLogin(ByVal state As Boolean)
        usernameTextBox.IsEnabled = state
        passwordPasswordBox.IsEnabled = state
        loginButton.IsEnabled = state
    End Sub

    Private Sub usernameTextBox_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles usernameTextBox.TextChanged
        If usernameTextBlock.Text.Length > 3 And passwordPasswordBox.IsEnabled = False Then
            passwordPasswordBox.IsEnabled = True
            rememberMeCheckBox.IsEnabled = True
        ElseIf usernameTextBox.Text.Length <= 3 And passwordPasswordBox.IsEnabled = True Then
            passwordPasswordBox.IsEnabled = False
        End If
    End Sub

    Private Sub passwordPasswordBox_PasswordChanged(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles passwordPasswordBox.PasswordChanged
        If passwordPasswordBox.Password.Length > 3 And loginButton.IsEnabled = False Then
            loginButton.IsEnabled = True
        ElseIf passwordPasswordBox.Password.Length <= 3 And loginButton.IsEnabled = True Then
            loginButton.IsEnabled = False
        End If
    End Sub

    Private Sub PhoneApplicationPage_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        If RetrieveDetails() = True Then
            passwordPasswordBox.Focus()
            rememberMeCheckBox.IsChecked = True
        Else
            usernameTextBox.Focus()
        End If

    End Sub

    Private Sub PhoneApplicationPage_BackKeyPress(ByVal sender As System.Object, ByVal e As System.ComponentModel.CancelEventArgs) Handles MyBase.BackKeyPress
        Dim res As MessageBoxResult = MessageBox.Show("Are you sure you wish to exit", "Exit", MessageBoxButton.OKCancel)
        If res = MessageBoxResult.Cancel Then
            e.Cancel = True
        End If
    End Sub

    Private Sub StoreDetails()
        _phoneAppService.State("rememberedUsername") = usernameTextBox.Text
    End Sub

    Private Function RetrieveDetails() As Boolean
        Dim tmp As String = ""
        If _phoneAppService.State.TryGetValue("rememberedUsername", tmp) = False Then
            Return False
        Else
            usernameTextBox.Text = tmp
            Return True
        End If
    End Function

    Private Sub rememberMeCheckBox_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rememberMeCheckBox.Checked
            StoreDetails()
    End Sub

    Private Sub DeleteDetails()
        _phoneAppService.State.Remove("rememberedUsername")
    End Sub

    Private Sub rememberMeCheckBox_Unchecked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rememberMeCheckBox.Unchecked
        DeleteDetails()
    End Sub

End Class

Now that this infrastructure is in place we get to the good bit, consuming the login service. The following routines were created to handle the login button click event and code to handle the call back for the login service.

    Private Sub loginButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles loginButton.Click
        Dim client As New userServiceReference.UserServiceClient
        AddHandler client.LoginCompleted, AddressOf client_LoginCompleted
        Dim login As New userServiceReference.LoginType
        login.Username = usernameTextBox.Text
        login.Password = passwordPasswordBox.Password
        client.LoginAsync(login)
        EnableLogin(False)
        If rememberMeCheckBox.IsChecked = True Then
            StoreDetails()
        End If
    End Sub

    Private Sub client_LoginCompleted(ByVal sender As Object, ByVal e As userServiceReference.LoginCompletedEventArgs)
        If e.Error Is Nothing Then
            Dim res As userServiceReference.TokenType = e.Result
            If res.errorMessage <> "" And res.errorMessage <> "fail" Then
                MessageBox.Show(res.errorMessage)
                EnableLogin(True)
            ElseIf res.errorMessage = "fail" Then
                MessageBox.Show("Username/Password incorrect")
                EnableLogin(True)
            Else
                _phoneAppService.State("token") = res.TokenGUID
                _phoneAppService.State("group") = res.UserGroup
                NavigationService.Navigate(New Uri("/pages/MemberPivotPage.xaml", UriKind.Relative))
                loginButton.Visibility = Windows.Visibility.Collapsed
                logoutButton.Visibility = Windows.Visibility.Visible
            End If
        Else
            MessageBox.Show(e.Error.Message)
            EnableLogin(True)
        End If
    End Sub

The contents of the username and password from the boxes on the page are used to generate a login type which is defined in the web service but I’ll re-show here:

<DataContract()>
Public Class LoginType

    <DataMember()>
    Public Property Username() As String

    <DataMember()>
    Public Property Password() As String
 
End Class

Then the callback routine to handle the completed login web service call was created and an event handler put into place. Then the ASYNC version of the service (Which is the only one available on Silverlight for Windows Phone) is called and the UI is changed to stop the user from trying to log in twice.
At the server end, the Membership service will attempt to validate the credentials. (A side note: To add a new user, you need to register on the website. Which is all handled automatically if you create an MVC3 website rather than a blank project.)

When the service returns the result of the login, firstly the app checks to see if the e.Error object has been set, this will indicate something went wrong with the service call and for now, it will just display the error message in a message box on the phone (Example of this is a timeout). Next the app will have a look at the returned object which is a TokenType which again is defined in the web service and I’ve shown again below:

<DataContract()>
Public Class TokenType

    <DataMember()>
    Public Property UserGroup() As String

    <DataMember()>
    Public Property TokenGUID() As Guid

    <DataMember()>
    Public Property errorMessage() As String

End Class

The errorMessage property of the TokenType class is used to pass back in the login failed for a username/password error. Basically if errorMessage is “” then everything went OK. If it contains the text “fail” then the username/password combination isn’t valid so the phone app will display that in a message box and reset the display to allow the user to attempt to log on again. If an exception occurred during the login process this is captured by the service and put into the errorMessage property. The phone app will check this and for now display that error message to aid in debugging.

If everything went well, then there should be a GUID in the TokenGUID property which will be used from that point onwards to identify that user. Later I will make every attempt to access the services change this GUID and pass the new one back. I will also add a time out so that the app can get the user to re-login after a period of inactivity has occurred.

If the login was successful we then enable a Logout button and collapse the login button and navigate to the “Member” section of the app using the following command:

NavigationService.Navigate(New Uri("/pages/MemberPivotPage.xaml", UriKind.Relative))

Next post on this experiment will be about what happens on this page.

2011/03/28

Client/Server experiment with MVC3 and Windows Phone 7 (Part 2.1 – A few problems)

The back end code was very basic and really only like it is to allow me to start attempting to write a client which will consume services.

Switching over to the Windows Phone 7 development, I hit my first problem. I created a VB.Net Windows Phone application and tried to add a Service Reference to the project. I gave the URL of the service that I created in the previous entry and it came back with the correct information. I then named the service and clicked the Ok button. A few seconds later I started to get errors and warnings. The main error is shown here:

Custom tool error: Failed to generate code for the service reference

One of the things that seemed to cause issues is the service definition using wsHttpBinding, but after double checking, I had used basicHttpBinding which is currently the only supported binding for Windows Phone 7

Initially, I thought this was a VB.Net problem, but after some searching there were a few C# users out there with the same issue. Most of them had one thing in common. They had Visual Studio 2010 Ultimate edition installed. I then found someone who mentioned that the Visual Studio Express edition does not have this issue. So I un-installed Ultimate from my laptop (Which took me a whole weekend due to the amount of things that got installed, think before clicking complete in future 😉 ) and then went to download Visual Studio 2010 Express edition. Once this was installed I then re-installed the Windows Phone 7 SDK and the VB extension to the SDK and hit my second problem.

This first release of Visual Basic support for the Windows Phone Developer Tools requires that you have Visual Studio 2010 Professional or higher, and does not yet support Visual Studio 2010 Express for Windows Phone

So stopped there as well. At this point I was starting to get annoyed at the lack of VB.net support in general after the promise of joint evolution of the two languages. So I went back to web searching to try to see if there was any other solutions apart from the manual approach. I found that one person mentioned that it didn’t work in Visual Studio 2010 Ultimate bit DID work in Visual Studio 2010 Professional. So back to installing software, This time Visual Studio 2010 Professional.

That done, I re-loaded the Windows Phone 7 project and right clicked the service and selected Update Service Definition. I waited with bated breath to see if it would work and it did. A huge sigh of relief I went on to start coding a client side of the learning project.

Note to self: “Just because you have an MSDN subscription which includes the Ultimate version of visual studio, it doesn’t mean that you should install it!”

…To be continued

Jas

2011/03/24

Client/Server experiment with MVC3 and Windows Phone 7 (Part 1 – The back end)

Filed under: Learning — Tags: , , , , — vbmagic @ 4:27 pm

I thought I might as well start with what I’m currently working on outside of work. It’s mainly a learning exercise to (re)teach myself WCF/MVC and learn to develop using windows phone 7.

I decided to start with the back end so created a new VB MVC3 project using Razor. (I’ve not used Razor yet so this is something else new to learn)

The reason I used MVC rather than just hosting a WCF service was to make use of the Membership system that automatically gets created with a new MVC site.

On this new site, I created a services directory and created a service called UserService which will make use of the ASP.net membership provider. I have also created a few Data Contracts that make the passing of data around a lot easier:

Imports System.ServiceModel
Imports System.Runtime.Serialization

<DataContract()>
Public Class LoginType

    <DataMember()>
    Public Property Username() As String

    <DataMember()>
    Public Property Password() As String

End Class

<DataContract()>
Public Class IntegerType

    <DataMember()>
    Public Property IntegerValue() As Integer

    <DataMember()>
    Public Property ErrorMessage() As String

End Class

<DataContract()>
Public Class TokenType

    <DataMember()>
    Public Property UserGroup() As IntegerType

    <DataMember()>
    Public Property TokenGUID() As Guid

    <DataMember()>
    Public Property errorMessage() As String

End Class

<DataContract()> _
Public Class UserDetailsType

    <DataMember()>
    Public Property name As String

    <DataMember()>
    Public Property email As String

    <DataMember()>
    Public Property lastLogin As Date

    <DataMember()>
    Public Property errorMessage As String

End Class

These are much smaller since VB10 where you do not need to put in the setter and getter part of properties.

I have also created a table call Players which will contain information about the user which is not already stored in the membership databases and then added a Linq to SQL class so that the service can make use of it:

Linq to SQL Class

Linq to SQL Class

Behind this class is the code to interrogate and update the database:

Partial Class TyranntDataContext
#Region "Player"

    Public Function GeneratePlayer(ByVal username As String) As Guid
        ' We first need to access the user ID from the Users table
        Dim usr = From user In aspnet_Users
                  Where user.UserName = username
                  Select user
        ' now check to see if the user record exists in the Player Table
        If usr.Count <> 1 Then
            Return Nothing
        End If
        Dim q = From player In Players
                Where player.userID = usr.Single().UserId
                Select player
        ' if player exists then exit
        If q.Count > 0 Then
            Return q.Single.guid
        End If
        ' Create the player entry
        Dim aPlayer As New Player
        aPlayer.userID = usr.Single.UserId
        aPlayer.creationDate = DateTime.Now
        aPlayer.displayName = usr.Single.UserName
        aPlayer.lastLogin = aPlayer.creationDate
        ' Create a false guid for now, this is only used by the client
        aPlayer.guid = System.Guid.NewGuid
        Players.InsertOnSubmit(aPlayer)
        SubmitChanges()
        Return aPlayer.guid
    End Function

    Public Function GeneratePlayerGuid(ByVal username As String) As Guid
        ' generate new guid
        Dim g As Guid = System.Guid.NewGuid

        ' find the player record
        Dim p = From player In Players
                Where player.aspnet_User.UserName = username
                Select player
        ' Update player record with new GUID
        p.Single.guid = g
        SubmitChanges()
        Return g
    End Function

    Public Function GetPlayerDetails(token As Guid) As UserDetailsType
        Dim p = From player In Players
                Where player.guid = token
                Select player

        Dim details As New UserDetailsType
        details.name = p.Single.displayName
        details.email = p.Single.aspnet_User.aspnet_Membership.Email
        details.lastLogin = p.Single.aspnet_User.LastActivityDate

        Return details
    End Function

    Public Sub UpdatePlayerDetails(token As Guid, details As UserDetailsType)
        Dim p As Player = GetPlayer(token)
        p.displayName = details.name
        p.aspnet_User.aspnet_Membership.Email = details.email
        SubmitChanges()
    End Sub

    Private Function GetPlayer(token As Guid) As Player
        Dim p = From player In Players
                Where player.guid = token
                Select player

        Return p.Single
    End Function
#End Region

End Class

And now the Service contract which allows users to log in, get their details and update part of the details. The Service Contract code is:

Imports System.ServiceModel

' NOTE: You can use the "Rename" command on the context menu to change the interface name "IUserService" in both code and config file together.
<ServiceContract()>
Public Interface IUserService

    ' User management routines

    ' Log in to website created user
    <OperationContract()>
    Function Login(ByVal loginData As LoginType) As TokenType

    ' Get user details
    <OperationContract()>
    Function GetUserDetails(token As String) As UserDetailsType

    ' Update user details
    <OperationContract()>
    Function UpdateUserDetails(token As String, details As UserDetailsType) As String

End Interface

And now the Bit the does all the work:

' NOTE: You can use the "Rename" command on the context menu to change the class name "UserService" in code, svc and config file together.
Public Class UserService
    Implements IUserService

    Public Function Login(loginData As LoginType) As TokenType Implements IUserService.Login
        Dim token As New TokenType
        Try
            If Membership.ValidateUser(loginData.Username, loginData.Password) = True Then
                ' User is valid so now update the player record with GUID
                Using db As New TyranntDataContext
                    ' Make sure that the user has a player record
                    Dim playerGUID As Guid = db.GeneratePlayer(loginData.Username)
                    If IsNothing(playerGUID) Then
                        ' something went wrong
                    End If
                    token.TokenGUID = playerGUID
                    token.errorMessage = ""
                End Using
            Else
                token.errorMessage = "fail"
            End If
        Catch ex As Exception
            token.errorMessage = ErrorMessage(ex)
        End Try

        Return token
    End Function

    Public Function GetUserDetails(token As String) As UserDetailsType Implements IUserService.GetUserDetails
        Dim details As New UserDetailsType
        Dim playerGUID As Guid = New Guid(token)
        Try
            Using db As New TyranntDataContext
                details = db.GetPlayerDetails(playerGUID)
            End Using
        Catch ex As Exception
            details.errorMessage = ErrorMessage(ex)
        End Try
        Return details
    End Function

    Public Function UpdateUserDetails(token As String, details As UserDetailsType) As String Implements IUserService.UpdateUserDetails
        Dim playerGUID As Guid = New Guid(token)
        Try
            Using db As New TyranntDataContext
                db.UpdatePlayerDetails(playerGUID, details)
            End Using
        Catch ex As Exception
            Return ErrorMessage(ex)
        End Try
        Return ""
    End Function

    Private Function ErrorMessage(ex As Exception) As String
        Dim err = ex.Message
        If Not IsNothing(ex.InnerException) Then
            err += +vbCr + ex.InnerException.Message
        End If
        Return err
    End Function
End Class

For now the idea is if an exception occurs, it displays on the phone to try to help debug the code.

I did not have to code a membership system as this is already handled by asp.net so all I needed the service to do was to call this function:

'...
If Membership.ValidateUser(loginData.Username, loginData.Password) = True Then
'...

I have used a token based system so that once the user is logged in, and has received a GUID token, that will be used to identify them from that point onwards. I plan to put an expiry date and time on the token which will make the user have to re-login after a period of inactivity.

I’ve not really gone into using MVC3 yet as I’m mainly working on learning to code on the Windows Phone 7, but I needed something for the phone to connect to.

The code above is in early stages and will most likely change but setting up basic web services is a very easy thing to do in .net

Next entry will show the code for the Windows Phone 7 project.

You may have noticed Tyrannt mentioned above. For anyone interested, it’s a link to this project I’ve been toying with for years 🙂

http://www.tyranntrpg.org/

« Newer Posts

Blog at WordPress.com.