Hydrating a web app into a local phonegap build environment.

Quick one here.

We’ve been discussing the best way to store a phonegap application and how to get people up and running quickly from our codebase. With the release of phonegap 3.0.0 the dev environment has gotten a lot better, but the issue we came across seemed like a bit of an oversight.

Anyway. I’ve raised an issue here https://github.com/mwbrooks/phonegap-cli/issues/113. Here’s a snippet for anyone looking to do the same.

You can create a phonegap environment by running the following. This assumes you have already setup your www folder for phonegap however.

mkdir .cordova
mkdir platforms
mkdir plugins
phonegap run ios

KnockoutJS Starter: Reviewed

KnockoutJS is a javascript framework which enables you to build html5/javascript applications following the MVVM (Model, View, ViewModel) pattern. This was one of the frameworks we looked at when deciding on a framework for StoreHR a while ago. We considered using it because of it’s binding capabilities and the way the framework helps structure your application code. For various reasons we didn’t use this technology but I was still keen to learn more about it. So when KnockoutJS Starter by Eric Barnard was released I figured it was the perfect time to give it a try.

The guide starts by giving a brief overview of the framework and what it is designed to provide you with. It then details how to setup your first application using KnockoutJS with a boilerplate HTML5 project. This section is great for beginners to html/javascript app development as is explains everything you need to do to get up and running along with how to use chromes development tools to understand what is going on.

The guide then moves on to building your first application. A simple inventory management system. What Eric does well here is explain some key concepts about keeping out of trouble when building javascript applications, such as namespacing your application and variable scope. There are two things I would have like to have seen is here. First, is a best practise on how to organise your files. In the example they are all placed in one folder which would get messy if people reading this continue to follow when building larger applications. Second, because it is a starter guide, some more screenshots to keep the reader assured that they are on the right track with the code they are following.

The application shows you how to make use of the key features of the framework and gives the reader a great insight into how these components can be used and what they should be used for.

Next up Eric dives straight into the frameworks inner workings to explain how these key features operate. He does a great job of explaining how these simple yet powerful features can be used to help build event driven applications by showing a basic version of how they are implemented. This really helps drive home the concept of MVVM development and how KnockoutJS can perform a lot of your work for you once you have set up the binding between components. On top of this, he also explains about some pitfalls where new users can get it wrong and not get their expected outcome.

This is a great, short, guideto help you get into building KnockoutJS applications quickly. The KnockoutJS website itself has a great tutorial page, but it doesn’t dive as deep and warn you of potential pitfalls. I would recommend this to anyone who wants to embrace this development style and wants to maximise their time spent learning the framework.

Check it out here!



Twitter Bootstrap Theme for ExtJS 4

twitter bootstrap theme extjs 4

I thought I’d fire a quick post up here to let people know that we open sourced a theme for ExtJS 4 based on the Twitter Bootstrap CSS framework. It integrates the two frameworks giving you the best of both worlds. A simple clean design across your ExtJS components mixed with the helpful CSS classes of bootstrap when building out your data templates and what have you.


Check it out here!

ExtJS 4 Examples migrating to Newbridge Greens new blog

Hello everybody! I’m going to start writing my posts on ExtJS on our company site from now on. I’ll be slowly migrating and updating the current posts I’ve have on ExtJS 4 over to http://blog.newbridgegreen.com. I’ve just put up the first post there on how to build a splash screen for your application which you can checkout here. http://blog.newbridgegreen.com/extjs-4-splash-screen/

ExtJS 4 First Look: Reviewed

I was given the opportunity to review ExtJS 4 First Look by Loiane Groner last month. I’ve now finally finished reading the book and am ready to share my opinion on it.


This book is an excellent introduction into the majority of what ExtJS 4 offers. If you are new to ExtJS 4, like I am, don’t be put off by the constant references to ExtJS 3. It does a great job of explaining the core high level components of the framework including the new MVC system, and should help you get up and running building powerful applications in ExtJS 4 in no time. I would recommend this book to any newcomers to the framework.

Buy it now here. ExtJS 4 First Look

Read more »

Newbridge Green. All systems go!

Newbridge Green, the company I started with @mullac42 and @a_b_williams, has just put up its new website. Newbridge Green is a company that specialises in online web applications. The first of which is StoreHR. We are currently taking on custom ExtJS work and have just recently finished development on a new theme for ExtJS 4 called Clifton. Check it out and let me know what you think!

Doctrine2 ODM Migrate ReferenceOne to ReferenceMany

I realised I’d made a cockup with one of my references recently and having a One-to-One relationship was too restrictive. So I decided to change the reference type and dive into writing some migration code to convert all the data from a ReferenceOne to a ReferenceMany when the object was access. It will also save the references back when the object is next flushed.

Lets see the initial code.

Read more »

ExtJS 4 Breadcrumbs Plugin for Tab Panel

One of the components which I struggled to find much information about that I thought would be quite common was a breadcrumb setup in ExtJS. So I went about working on my own version to be used in our online employee and document management application, StoreHR. The first iteration was horrible (I was new to ExtJS back then) so I had another think about what I actually needed. Basically a view stack, like card layout provides, with a more restricted set of navigation rules than the tab panel provides. The second time around however, I’d learnt about plugins. So I created a Breadcrumbs plugin for the tab bar component that restricts the navigation so you can only work backwards through the views and all cards above it will be popped off the stack.

Look at the breadcrumbs.. Shiny

Read on for the code and usage.
Read more »

ExtJS 4 Wizard Panel

ExtJS 4 Wizard Panel

I’m in the process of polishing the first beta release of our new product StoreHR. During this process I was cleaning up the wizard code that we built using the card layout. So I thought I’d share some code so people can get some use out of it.
Read more »

ExtJS 4 Tree/Grid dragText

Another quick one whilst it’s in my head. I was dragging between other components and the tree the other day and I wasn’t happy with the text used when dragging. So here’s a few overrides for ExtJS 4.0.7 that will let you set a dragField with your gridviewdragdrop plugin that will use the field in the model you are dragging with the dragText you provide.
Read more »