Typescript Visual Studio Plugin - getting started

So the Christmas break is here and i'm full of turkey and rather than watch some sort of BBC shrek creation or watch who dies this year in eastenders, i'd rather exercise the brain.  Been looking at a couple of bits of "newer" tech this period (take a look at the meteor framework with node.js, looks really promising) but i've also decided to use typescript in my latest project as i like the idea of simulating class typing in a dynamic language.. I also thought the breville maker was a great invention....

For those unfamiliar with typescript, it provides a bit of structure to javascript with the ability to create classes, define types etc.  It's the brain child of Anders, the man who brought you Delphi and our beloved C#

Anyways, there is a Visual Studio plugin available that allows us to write in typescript and handles calling the typescript compiler and giving us our javascript out the other end.

The plugin can be downloaded from the Typescript site

http://www.typescriptlang.org/Tutorial/

and once done, you can create a typescript file (i couldn't find it under the web templates, i found it under the Visual c# option instead)

So if you select typescript and add you file you will get a .ts file with its .js compiled equivilent underneath.  If you have downloaded the web essentials for visual studio, you can set some options to compile the typescript on build and show hide the preview pane etc:

I tried setting these whilst working on an existing project and could'nt get them to compile the typescript for me, so a bit of project file editing is necessary.  Unload your web project by right clicking the web project in the solution explorer and select "unload project".  Once done, right click the web project again and select edit project file

Down the bottom are examples of ms build targets.  We add the before build target and call the typescript compiler:


  <Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.1.1\tsc&quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  </Target>


You then can go ahead and start using Typescript !

A.

Windows 8 - Halloween on a desktop

I am an apple fanboy, or at least the guys at work say I am, I own 2 ipads, a 27 inch mac, a macbook pro, apple T.V. and the accompanying duvet and pillow set.

What they don't know is that I also wanted the new Windows 8 to succeed and it is for the reason that I think Apple are too damn cocky with their "new" IPad mini (its like an IPad but smaller), IOS6 with its "cloud based" mapping (that's right, all you can see is clouds) which is rubbish and some of their software which just annoys the hell out of me with its "Leatherbound retro" look and don't get me started on ITunes which i'm sure will be responsible for the inception of skynet.

I thought Microsoft were making a really bold move with Windows 8 and its metro design which I love, it looks simple and beautiful and goes back to how things should be.  And whilst I'm making good bets that windows 8 looks great and works well on a touch device, I am looking at it as a developer on a laptop device to see how cool its is, sadly, it ain't.

Why? Consistency is key we are told at work and its right, I want a system that's the same throughout, predictable, easy to use ;its anything but,  its just a mess.

For starters, we have windows 7 with an invisible start menu and its bloody awkward to get too situated in the bottom left and I often find myself clicking on or hovering on other items on the menu bar at the bottom of the screen.

If you get the crappy little icon visible, you can expect more crappy icons coming down from the top left which feature other areas you can access, good luck in recognising any of em.

Answers on a postcard to WTF is this, P.O.Box 23, redmond, USA.

Then we have the charm bar on the right (aptly named as you are charmed if you can get it to work), which appears if you manage to point to the 2x2 pixel grid in the top right hand side of the screen to make it appear.

So once we have got to the start bar, then the fun really happens as it really is just a start bar, it shows a bunch of apps to start with

that's not all your apps of course, you can right click and get all your apps :

Then I get this (an implementation of the launch pad found on IMac and just as bad I might add - hated it on mac and I do on this) Its a scrollable menu of a thousand icons which makes my eyes bleed.

So what if I want to see the reduced set of app's again? I right click of course and click... erm... All apps again???

yep, familiar territory here.  You may be asking where shu tdown is?  oh yeah its under the charm bar which you can't get too under settings... self explanatory really.

So lets go to the store, Microsoft's app store and this has a distinctly XBox feel about it except half finished. Scroll left and right and get categories of apps to buy which is nice and does actually work ok (again would work really well on a touch device) so I select the Games category :

Once i'm in there, I can use another way of selecting stuff by right clicking in the top.... sigh....

Most of the time you'll be working in the desktop that looks exactly like windows 7 so it's not all bad.

To conclude, if you have windows 7, I wouldn't bother if you are only using this on a desktop unless you really want to like I did.  Touch devices I think would be quite nice, I stand to be corrected on all of this.

A

  

Overriding an importer class for a part Remember the id attribute !

So we are overriding the importer in orchard in our driver and its not getting called.  Remember the id attribute in your xml.  We have organisations and our xml looked like :


<Orchard>
  <Data>
    <Organisation>
      <OrganisationPart Code="XXX" Name="YYY" ProviderId="1" Enabled="1" />
    </Organisation>
  </Data>
</Orchard>

So add the id attribute in the organisation wrapper like so :


<Orchard>
  <Data>
    <Organisation Id="">
      <OrganisationPart Code="XXX" Name="YYY" ProviderId="1" Enabled="1" />
    </Organisation>
  </Data>
</Orchard>

and the driver.importing gets called and i'm happy !

Comma seperated values for sql in statement with notepad ++

We've all done it,

we need a select statement of strings from a select in a sql table.  I recently did this wanting a list of codes so a quick select statement gave us this :

code1
code2
....
code2000

and i needed an in statement in sql so needed to have it :

'code1','code2',...'code2000'

quick tip, open notepad ++

Notice i selected extended, and do a replace for \r\n replace with ',' and shazam ! we have a comma seperated list, just add the first quote and the last one.

great quick tip.

Orchard CMS - A Responsive Site From Start To Finish Part 2 - Starting with Responsive Headers

Introduction 

Welcome to the second part of this set and I'm impressed you got to part 2 as that's more than I anticipated....

You may remember from part 1 we set the scene and also got code gen working and the correct zones are all on and we are ready to go.  But before I go into the next part, I wanted to explain my set up as that maybe pretty important to people out there.

At present, Orchard seems to be on a bit of a switch over so while this wont apply when we get to version 1.6 which is due pretty soon, I wanted to keep upto date on the tip so I can start using VS2012 which the current tip is now built in.

So I downloaded from mercurial, the orchard source code from

https://hg.codeplex.com/orchard

if you now try to update to the tip of the source code, there is an issue with some repos that have been modified so you will need to remove them manually and update.  at present, I am at revision 6536, If i try to update, the following repos need to be removed under the modules directory:

Orchard.Alias
Orchard.Antispam
Orchard.AutoRoute
Orchard.ContentPermissions
Orchard.CustomForms
Orchard.ContentPicker
Orchard.Fields
Orchard.Forms
Orchard.Projections
Orchard.Rules
Orchard.TaskLease
Orchard.Tokens

Then do an update at 6536 again and we are good to go.

I have also edited the orchard.web project so it points at the src/orchard.web directory and set up a comenius.local in the hosts file, the only bind is that as we update, the setting will be overriden, but its not such a big issue.

Back to our project, its looking less than sterling, so lets get to work !.

OK we need to start our mods, the layout file is where we need to start, so under the existing theme machine themes directory (Orchard.Web\Themes\TheThemeMachine\Views) copy the Layout.cshtml into the same views directory except for the theme you are working on (I have it under Themes/Comenius/Views)

Give that a blast and.... OOPS

Reason being, the ThemeMachine has a "BadgeOfHonour" and A "Branding" section which we don't need, A quick look into the layout file and we discover this :

Please excuse the diabolical colouring of VS2012 the IDE is as monotone as Tom Hanks's acting.  Anyways, lets remove those lines and try again and we get a basic site with no style that actually is more responsive.

The Layout.cshtml file is pretty much the key to all of this as our starting point for the site.  Due to the way in which Orchard does its finding of templates (parts, pages etc) we can create part of a template and name it a specific way and it will apply that template.  As Mr Mayne would say "Convention over Configuration" and although it pains me to admit it, he's right.

So lets get to work on the first part of this which is the header which you will remember had a logo and a drop down selection with the list of countries we wish to show landing pages for.  Quick reminder will show this :

What we obviously need for this little baby is for it to float left and right as the width greatens (until it gets silly and then we will need to maybe set a max width when we get to 27 inch mac displays.  The following shows what we expect from different resolutions:

It is worth pointing out the defacto starting book by Ethan Marcotte at this point for responsive web design.  A great place to start with designing for all resolution types.

For the dropdown, I am using "Chosen" which is a JQuery plugin which looks really good and behaves really well.

We are going to use media queries to determine max resolutions at which the css changes, we don't want to get silly and add media queries for each different resolution, so looking at the following, we need a couple of different ones, one for the wrap round and the other for the wider view.

Testing our responsive site

Ok, we need something to test what our site looks like in different screen widths, there are a couple of good tools out there.  A few of these rely on you having a site visible to the outside world.  Unfortunately, I dont right now so i'm looking for something that I can use locally.  I have given in to my college Phil Peace here who insists Firefox is the tool of choice (I am a dedicated Chrome fan) but the new Firefox (V15 at the time of writing comes with a Responsive mode which is the dogs nuts to be honest..Phil Peace 1, Mr Deakins 0

Anyways, if you havent seen this, just check it out :

I can then view my site in resolutions I wish and even rotate:

OK, so we wont get the real picture, we will need some proper devices for that, but as a quick guide as to how we are doing, its just awesome.  So lets carry on.

We'll start work on the logo first.  Now we are into a hotbed of contest here already, the discussion of the best way to make images responsive have caused more arguments than the best way to drain spaghetti.  

If we look at Mr Marcotte's book he uses a max-width property in order to resize the image on the browser. The issue being is that on mobile, we are essentially downloading a hoofing great image for a mobile device with could be on a crappy network.  So we will use a combination of media queries at steps to download smaller images and leave the world arguing on the best way to do it.

So I have photoshop and have set up a few custom page sizes with resolutions so i can see the way the images look as they would on their respective devices.  our logo isn't looking to clever on the iphone 3 display so some resizing needed :

Media Queries

Over abuse of these babies, means you are targetting specific devices which is a definite no no as you will never cover all of your bases, there are so many out there, you'll have a never ending list of css.  We therefore try to target a smaller resolution i.e. typically iphone in size, a medium sized resource e.g. 1024 upwards, and then deal with any silly sizes you would see on devices such as the 27inch IMac etc

I'm now going to add a site.css into the styles directory of our theme and start writing this to accomodate the target sizes we previously mentioned.

The css for orchard sites.css is not too bad at all, so i've nicked the css reset:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, button, submit {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

After this, I have added the section to style the header with media queries : 

/* Home Page Header */
.widget-HomePageHeader {
     width: 90%;
     background-repeat: no-repeat;
    margin: 5px auto;
}
@media screen and (max-width: 400px) {
    .widget-HomePageHeader {
        height: 95px;
        background-image: url('../Content/ComeniusLogos/comenius-logo_153x95.jpg');
        background-position: top center;
    }
}
@media screen and (min-width: 401px)
{
    .widget-HomePageHeader {
        height: 119px;
        background-image: url('../Content/ComeniusLogos/comenius-logo_191x119.jpg');
        background-position: top left;
    }
}

At present, we use 2 queries, one for 400px and lower and the other over 400 pixels.  Checking this out on our firefox browser we get the following 2 :

 Nice..

We'll move onto the dropdown in the next tutorial.  Thx for stopping by !

Orchard CMS - A Responsive Site From Start To Finish Part 1 - The Introduction

Introduction

So Mr Mayne has been peddling his wares at work again and this time its Orchard.  Thought I would take a look at this one as its got a lot more going for it than the Git source control he recommended.  still trying to figure out why I went from svn integrated into windows and moved to a command line linux box.... maybe next week were gonna move to vi instead of Visual Studio as that's got a load of features that are basically useless and command driven....

Anyways, I have been asked by my bro in law to write his comenius site which is a bunch of connected schools that show of their childrens work.  The requirement is we have a home page which has a bunch of landing pages for different countries who then show off their work for the kids. Sounds great, lets see if we can knock that up in orchard so admins of particular countries can only edit their content and i'm gonna throw a spanner in the works as I also want this to look nice on a mobile device as well as the desktop, so responsive design and mobile first are the order of the day.  I have always been a bit of a sadist as I use windows every day of the week...

As most people will tell you, the movement of mobile first is an ever growing one by the day.  The reason why myself and a lot of others believe in this, is working with a mobile device first makes you concentrate on the important parts of a site first rather than someone doing a hoofing great Photoshop design for a desktop and loading it up with adverts for shoes, PPI insuarance firms and tips on how to get a flat belly (a personal favourite of mine)

Requirements of the Site We are building

To put stuff into perspective, lets talk a little bit about the site we are going to build. Comenius is a site where a school from a selected country shares its children's work with other schools from other countries.  This is pics and a little text about the work that was done.  There is also an events calendar per school and a landing page for each school so they can show a couple of pics, introduce the school etc.

On the administration side, we only want an admin for each country that will be able to edit their content for each country and a general admin that can control the home page.  We have identified the following pages:

• Contacts (all contacts for all schools)
• Logo Competition page (Schools all submit a logo and vote on each others)
• Events Page (all events for all schools)
• Home Page

For each School (each country) we have

• School Landing Page
• Schools Events
• Children's Work in the school

As this is mobile first, lets get down to the nitty gritty and work out the most important parts of the site:

1. Being able to select a countries page and go to that page quickly.
2. getting to parts of the site quickly.
3. getting to events page quickly.

So, we have come up with the following design that will cover 940 and less (by use of media queries, we will do maybe another smaller resolution later)

What's important here is that mobile users can select a country quickly with the dropdown at the top.  Then get to the rest of the site quickly with the links and then see some of the latest work by the children (the piccy is going to be a slider) and finally a list of events coming up in the next month(s).

Setting up a Theme to base our design on

To get started, we are going to use the ThemeMachine theme.  This seems to be the defacto standard theme for starting to build a new theme.  What I want to build here is a responsive design from the ground up, you could take a look at the twitter bootstrap theme as this has a responsive layout already built in and looks pretty tasty.

So the idea is to override the parts of the theme you want to override rather than start from scratch which is one of the aspects I really like about Orchard.  The facility to override the parts, layouts and styles is just marvellous, like all app frameworks, it has some flaws but its the ability to extend Orchard with custom modules is nice n easy.

We'll start by loading up the Code Generation Tools, these tools create the scaffolding for modules, themes etc so you don't have to write all that boiler plate stuff yourself.  So I clicked on the modules tab and then the gallery and search for code generation:

So hit install on this baby and enable the features:

What this gives you is a command line set of tools, so lets generate our theme, spark up a command line and navigate to the bin directory of your website and type 

Orchard

After a brief wait, you can type 

Orchard help commands 

This shows the help for all the code generation tool commands and gives a list of tools as long as the wait at the post office on pension day.  The one we are interested in is :

codegen theme ThemeName /CreateProject:true

So I type in:

codegen theme Comenius /CreateProject:true

Then add an existing project to my visual studio solution and we are good to go... well almost.  Like I said, Orchard is all about overriding so it is worth looking at the ThemeMachine structure to get a good idea about  what views, styles etc.

Under the Theme's directory, we see the views, styles and scripts directory which are pretty self explanatory.  We will get to adding to those later on.  For now, I am going to turn off the "Zones" that we don't need for the Comenius site.  In Orchard, we have Layers, Zones and Widgets;  Zones are portions of the page, e.g. the header, footer, content (Theme machine has 19 predefined ones), widgets sit in zones and layers are the rules to determine the visibility of widgets in the zones e.g. if the user is authenticated, then show widget X.

Out of the 19 zones available to us, we only need the following:

Header, navigation, featured,  content and footer.

Under the themes root part of the project is a file called themes.txt which is a description of the theme and the zones the theme uses.

So my themes.txt file looks like

Name: Comenius

Author: The Orchard Team

Website: http://www.orchardproject.net

Description: Description for the theme

Version: 1.0

Zones: Header, Navigation, Featured, Content, Footer

If you navigate to Orchards admin section and select the widgets page, you will see the zones we don't want disabled.

As you can see, you can select the layers and the widgets that appear in each layer.  Its worth having a play with this turning on and off the widgets in each zone and seeing how it affects the page.  

The Theme Machine, Responsiveness

In the next few tuts we will take each piece of the design i.e. the menu etc and work on the responsiveness of the site.  But just how responsive is the ThemeMachine? before responsive design was starting to get a bit of a lift off, the recommended approach for desktop was to target the most popular browser resolutions and at the time this would of been the 1024 width res which I believe Orchard has been based on as we see a typical 960 minimum pixel width wrapping div :

See we have a hardcoded width of 960px and the same goes for header and navigation.  I understand the ThemeMachine was never intended for mobile so this is perfectly acceptable but we will need to modify this if we are to make this look nice on a smaller device.  We can also confirm this by a simple resizing of the browser and how it behaves:

See the text cutoff? Its a sign we need to do some work.

So in the next tut, I will be starting with a layout and css files then taking parts of the site and working on their responsiveness.  Until next time.....

Quick tip for templates in models.

So were using orchard at work here, reason for the choice:

Mr Mayne works next door to me and hes a contributor and he says its good.
He whines if he doesn't get his way and i'm for an easy life :O)

anyways, quick tip.  We are writing a custom module here, and the driver is not calling a method to get my view model with the edit template is connected to.  REMEMBER THE PLACEMENT INFO FILE.

Otherwise, empty editor screen my friends.

just one to look out for.

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 !

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>
          <!-- include all your css here -->
     </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 !

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>

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 !

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 !

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

1. OK, start with downloading and installing XCode 4 this means going to: https://developer.apple.com/xcode/ to get the latest
2. Next download and install phone gap from  http://phonegap.com/
3. Create your projects directory (mine is aptly called 'projects')
4. Next download sencha touch 2  http://www.sencha.com/products/touch/  and pop that in the projects directory
5. 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

    <script type="text/javascript" charset="utf-8" src="sdk/sencha-touch-all.js"></script>

    <link rel="stylesheet" href="resources/css/app.css">

    <script type="text/javascript" charset="utf-8" src="app.js"></script>

    <script type="text/javascript" charset="utf-8" src="app/view/main.js"></script>

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 !