We've had our eye on you for sometime...

Friday, 20 July 2012

Unit test your modelbinders in MVC 3

Having an issue with this at work as the blokes at microsoft decided to depricate the modeltype in mvc 3 and make it settable via metadata. fortunately, a solution exists that allows unit testing:

NameValueCollection nvc = new NameValueCollection();
nvc.Add("formvariable", "formvalue");
NameValueCollectionValueProvider collection = new NameValueCollectionValueProvider(nvc, null);

var modelBindingContext = new ModelBindingContext
{
ModelName = "",
ValueProvider = collection,
ModelMetadata = ModelMetadataProviders.Current.GetMetadataForType(null, typeof(typeofmodelhere))
};

typeofmodel mymodel = typeofmodel.create(modelbindingcontext);
Assert.AreEqual(value, model.x);

Where the model takes in a modelbindingcontext and pulls out all of the values:

public class typeofmodel
{ ...
public string x {get;set;}

public static create(ModelBindingContext context)
{
x = context.ValueProvider("");

Easy when you know how !

Tuesday, 26 June 2012

JQuery Mobile and Cordova (phonegap) with multiple Html files

I was caught out with this one myself the other night and monitoring the phonegap google groups, its seems to be a source of confusion for a lot of people. Hopefully this will clear it up, tell your friends, developers, your pet dog and anyone else that may be interested.....

I didn't notice (even though it was emblazened in bold and flashed) that jquery mobile loads its subsequent pages via ajax which was the light bulb moment for myself on why the other pages wont work. Ok, so i'm a bit slower than your average human.

What this means, is we have all our gubbins in the index html file and then subsequent pages only need the page div and markup in order to render. Lets have an example (I assuming you have the standard cordova setup here with a www directory and all the pages underneath it)

here's our index.html file

<html>
<head>

</head>

<body>
<div datarole="page" id="page1">
<a href="page2.html">page2</a>
</div>
</body>

//include cordova
//include jquery
//do your mobile init here in script if reqd.
//include jquery mobile

<script type="text/javascript">

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//cordova is ready here !
}

//jquery mobile
//bind to the page 2's pageinit function to do stuff on page 2.
$( '#page2' ).bind( 'pageinit',function(event){
//do stuff for page 2 (you could put this in an include file)
});
</script>

</html>

page2.html

<div data-role="page" id="page2">
my page 2 markup.
</div>

As we said previously, JQuery mobile will load the next page into the place where the page role is for index.html so, page1 in index.html is replaced with the contents of page2. All the script code for page 2 goes in where we bind up. I would eventually move this out into its own js file and include it in index.html.

hope that helps anyone with this issue out there !

Thursday, 21 June 2012

DONT PUT . in your service name in wcf (if webhttp)

Talk about utter failure, we had a webhttp wcf service set up the other day and we all scratched our heads trying to figure out why the wsdl validated but no endpoints were being shown. Thanks to a sharp eye from Nick Mayne here at work he just so happened to notice the service name had periods in it. Removed those and it worked... sigh.

@model does not exist in current context

quick tip, check you have the razor page specification in the web.config, otherwise you receive the error in the title. Reason being, you've turned it into webforms !

<configSections>
<sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
<section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
</sectionGroup>
</configSections>
<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="MyPageBaseType or razor page">
<namespaces>
<clear/>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="System.Web.WebPages" />
<add namespace="System.Linq"/>
<add namespace="System.Collections.Generic"/>
<add namespace="DrFoster.Rtm.Ui.Resources" />
<add namespace="DrFoster.Common.Extensions" />
<add namespace="DrFoster.Common.Web.MVC" />
</namespaces>
</pages>
</system.web.webPages.razor>

Thursday, 14 June 2012

Resource not found 404 in MVC 3 at root level with IIS

Really annoying one this, IIS the other day was giving me the all too familiar 404 rescource not found at the root level when requesting my default path on an MVC 3 site. If you haven't checked:

See if you can server any page from that address (any html page). If this throws the same error, check the permissions settings for your site as I did this and it works. Hope this helps somebody out there !

Tuesday, 15 May 2012

Installing Weinre and getting it going on a mac

Introduction

Hi following on from a recent blog post regarding getting phonegap/cordova and sencha 2 working nicely together, I thought it may be prudent to do another blog regarding the debugging of these using weinre which is just awesome. So here goes....

for this we are using Mac os.

Downloading Weinre

Start by downloading the weinre application from :

http://people.apache.org/~pmuellr/weinre/builds/

(thanks to Kerri Shotts on the phonegap forum for this link, much appreciated !)

I went to the 1.x directory and got the latest 1.6 zip file

so unzip the files to the directory of your choice.

Server.Properties

OK i'm a bit of a muppet when it comes to MAC OS as I have been a windows developer all my life (sorry guys but Visual studio really is a lot easier to use but thats my humble opinion) but one thing that had me puzelled and it was down to my lack of understanding of MAC OS. We need to create a server.properties file under root/.weinre. before we do this, do yourself a favour and open a terminal and show all hidden files like so:

defaults write com.apple.Finder AppleShowAllFiles TRUE

Then kill all finder apps:

killall Finder

And when you open finder again, under yourmacname/users you will find the .weinre directory.

The server.properties file contains which ipaddress are used to communicate with the simulator and weinre. If you need to find the ipaddress of your machine, open a terminal type ifconfig which will give you your ipaddress.

ok, create your server.properties file in the .weinre directory, with the following:

boundHost: 192.168.1.3

httpPort: 8080

and save. Start weinre and you should be able to navigate to:

http://youripaddress:8080/target/target-script-min.js

and view the file.

Debugging

Ok, time for a test drive. I have an XCode project which i run in the simulator. So start Weinre and then run your XCode project in the simulator.

I get white list errors. So go to your project directory and find the plist file for your application:

Open this with XCode and you will see a external hosts entry, add your ip address to this list :

After this, start weinre if not started then your simulator. You should now be able to use the debugger and set stuff in weinre and these are reflected in the simulator ! have fun !

Friday, 11 May 2012

Getting Sencha Touch 2 and PhoneGap Cordova to work in XCode

Seems there are a lot of questions regarding this one. Having done it myself and have got it working. Thought I would share the experience. First, what I am using :

IMac with OSX Lion and XCode 4.4
Sencha Touch 2 (obviously)
PhoneGap 1.7 (now cordova)

What to install

OK, start with downloading and installing XCode 4 this means going to: https://developer.apple.com/xcode/ to get the latest
Next download and install phone gap from http://phonegap.com/
Create your projects directory (mine is aptly called 'projects')
Next download sencha touch 2 http://www.sencha.com/products/touch/ and pop that in the projects directory
finally, download and install the sdk tools at http://www.sencha.com/products/sdk-tools

Create the phonegap project

First i am going to create the Phonegap/Cordova project. So start up Xcode, create new xcode project and select 'Cordova' for the project template (MyApp is my project name). Give the project a run on your chosen emulator (I have chosen the IOS Emulator 5.0) you will be greated with the infamous :

OK, When you run the application, the result was a www directory being created. You can see this if you select your project in xcode and right click show in finder:

Here's the project directory:

You need to drag the www folder from the finder window onto the project in XCode and select the 'Create references' radio button if not selected (second in the list) which leaving all the others unselected

Run your app again and you should get :

Hurrah thats the first part.

Adding your Sencha Project

OK. We are now going to add the sencha project. First of all, I am going to rename the Index.html in my current project to phonegapindex.html

I then open a terminal and cd into my sencha 2 sdk folder (this is the SDK folder and NOT the tools directory) and type the command:

sencha generate app app ../MyApp/www

A little confusing perhaps as I have named the sencha app 'app' so the command is sencha generate app

then the app name (in my case 'app') I have then told it to generate this in myApp/www

if all goes well:

and you now have an app directory within your www directory with an mvc sencha 2 app.

Getting it all to work

I am now going to rename the index.html generated by the sencha command to senchaindex.html and the phonegapindex.html back to index.html

What I am going to show you is the basics of getting phonegap calling our ext application. its up to you to go on and experiment.

I've added, the sencha libs, the app css, our app.js file and the main view

so a snapshot of the top part of my code:

I have also commented out the code between the body tags (the hey its cordova) etc....
I have then modified OnDeviceReady to:

function onDeviceReady()

{

loadApp();

// do your thing!

//navigator.notification.alert("Cordova is working")

}

As you can see I have stubbed out the original app creation and replaced with a very simple implementation just to get us started. Dont forget the sencha touch 2 is mvc based so we add our main view to the viewport. you can get the name of the view by looking in the views directory at main.js and the define statement indicates what view needs to be added.

If all goes well, you should get the following when you run the app in the simulator:

haza !

Testing the Theming

Before we going any further with theming, please make sure you have the compass installed and the sass compiler. Open a terminal window and type:

$ sudo gem install haml
$ sudo gem install compass

so as a quick check, lets try changing the base colour. under the resources/sass directory you will find app.sass add the following to the top of the file above all the other import lines

$base_color: #FF0000;

We now need to recompile the sass, I like to remove the app.css from the resources/css directory for the first time just to prove it is working.

open a terminal and navigate to your projects directory/www/resources, if you overwrite, you will see:

then run your app once more and you should be greated with a red version of your sencha app.

Hope that helps you all out there !