Chariot Training Classes

Training Courses

I run Chariot's training and mentoring services. We provide training in AngularJS, HTML5, Spring, Hibernate, Maven, Scala, and more.

Chariot Education Services

Technology

Chariot Emerging Tech

Learn about upcoming technologies and trends from my colleagues at Chariot Solutions.

Resources

Chariot Conferences

Podcasts

Thursday
Jul112013

Accessing and writing client-created cookies in AngularJS

AngularJS provides a $cookieStore object that reads and writes cookies. Here is a sample JSFiddle (my new favorite toy) that demonstrates setting a cookie value and bumping it by one each time the button is clicked.

Note - you won't see the number bump in the iFrame-embedded JSFiddle... Only if you jump to the JSFiddle site to test with it! This is Cross-Site Scripting protection in action...

Original discussion source was this Stack Overflow article.

Monday
Jun172013

Spring Roo 1.2.4.RELEASE available now

Thanks to @alankstewart and some new contributors from the open source community, Spring Roo 1.2.4 has been released. It is available for download now.

Fifty issues have been resolved and it looks like the twitter tweet has been removed from the shell.

I'll be digging around with this a bit and posting any tidbits - I am also going to upgrade the code samples for Roo in Action to 1.2.4 this week, and will post any notes on what I find during upgrades.

Ken

Friday
May242013

AngularJS Pattern #1 - async service results

Spring Quizzo ETE sample code

Hi everyone. If you're looking for examples of potential ways to interact with a Spring app from AngularJS, take a look at the project I worked on with Pivotal's David Turanski for ETE, the Quizzo-ETE application.

It's at github.com/krimple/quizzo-ete. Highlights:

Now here's something I ended up using (but not as well as in here) for the quiz. It's a way to send a request to a Angular service asynchronously and receive a result via a message back to the component.

Asynchronous calls to services in Angular

In Angular, everything is asynchronous as much as possible to provide speed. A call to a $http service, which performs ajax methods, doesn't immediately return a value. If you decide to split up your Angular controllers and services, so you separate your UI from the calls to your backends, you'll quickly find that it becomes hard to get a response without some extra work.

One way to orchestrate calls is to use the Angular messaging framework, built into the $scope object. For example, in our controller we can execute a call to fetch games we're able to play right now, but we won't get the response right away. So, we can subscribe to a message, sent by our service, which will then come back to us with data. See this simple JSFiddle for an example:

The service uses a passed $scope variable. I've also injected a $rootScope into the service. Using that one would allow us to broadcast the message to any interested party.

Saturday
May042013

Spring Roo project updates...

It's been a while and all has been quiet on my front - I've been buried with day-job work, and enjoying not having to update a book in a while :)

A quick note on Spring Roo - looks like there are plans for a 1.2.4 release sometime in the summer. Alan Stewart tweeted this earlier in the week. Also, the Roobot, which accepts new OSGi bundles and also provides for downloading of existing ones, went down for a while, but due to some work recently by Alan it's up and running for internal bundles as of today.

If you're using Roo and need some basic Roo-provided bundles, they are now online.

Alan is working on getting the Roobot stabilized (some project descriptor might be causing trouble, we'll have to see which one - at one point it was mine). Once that's done they can re-populate the repository with the user-contributed ones.

Finally, the download link seems to be broken (the initial Download button works, but once you bypass registration and go to the download form, the real link is not a link), but follow my reply on this forum thread for a quick workaround.

Once Roo 1.2.4 gets ready for takeoff, I'll post my notes on it. I've recently submitted a contributor agreement to help Alan with some things here and there, and if they accept it, I'll be able to do a bit more for the community.

Saturday
Feb162013

Quizzo - it's baaack - but this time for keeps

Hey everybody!

For my ETE talk, and our internal Chariot Day conference beforehand, I've taken on client-side Single-Page-Web-Application (SPWA) Javascript programming. I started by attempting to learn Backbone.js, but this poor old server-side programmer with a smattering of front-end talents grounded hard on the shallow waters of confusion.

I was not alone. At SpringOne/2GX 2012, VMware's Craig Walls hosted a talk comparing SPWA frameworks, and discussed Backbone's lack of a 'day one story' - a starting point example. He was really interested in the Walmart Labs projects Thorax and Lumbar, which are attempting to bring some higher-level structure and organization to the code base. Also, I ran into the emerging but not yet complete Yeoman
Then Chariot's Don Coleman turned me on to Addy Osmani's TodoMVC project - it implements the same task list use case in oh, about 18+ frameworks.

I spent time looking at each of them and AngularJS caught my eye. It has two-way instant data synchronization, is agnostic with respect to your models, contains a good basic validation scheme, and uses tags and attributes salted to the templates to expose a 'ViewModel' to the view.

What is a view model?

A ViewModel is an element of your MVC model that should be exposed to the page. Spring MVC has this concept - we put things in the Model object to show to the users, but rarely do we put true domain objects in there. If you have web-only beans that you send back-and-forth to the UI, chances are you're using the ViewModel pattern (please let me know if that is a wrong assumption).

A sample view

Let's review some code from our current Quizzo-ETE project, a collaboration with David Turanski of VMware for our upcoming Modern Spring Web Applications talk. We're using AngularJS and Spring to show enterprise developers how to leverage their skills in Spring but also quickly get onboard with a very powerful SPWA framework.

First, a simple view fragment, showing how to emit model elements:

<tr>
    <th span="2">Statistics</th>
</tr>
<tr>
    <th>Score</th>
    <td>{{statistics.score}}</td>
</tr>
<tr>
    <th>Max Score</th>
    <td>{{statistics.maxScore}}</td>
</tr>
<tr>
    <th>% Correct</th>
    <td>{{statistics.percentCorrect}}</td>
</tr>

So, you can see the handlebars-style substitutions of ViewModel elements using the {{ and }} characters.

A sample Angular controller

Here is the Angular controller that put the data in there in the first place:

myApp.controller('ByeCtrl', function($scope) {
  $scope.statistics = {
    "score": "130",
    "maxScore": "150",
    "percentCorrect": "86%",
    "topScorers": ['phil', 'joe', 'alex']
  };

The $scope object is our ViewModel. We're adding a Javascript object called

statistics

to it, hardcoding it for now.

Two-way databinding

The cool thing is that if anything on the page changes the objects, the page changes immediately. A click, an event, even a message from the outside world, can trigger a UI update. The same works the other direction with form elements. Consider this fragment:

  <form class="panelform left">
    <p>
        <label for="nickname"><b>Nickname</b></label>
        <input type="text" 
               ng-model="nickname"
               ng-change="verify_nick(nickname)"
               id="nickname"
                /> 
        <span ng-show="badNick" class="error">
                        Nickname already used...</span>

    <button id="join" ng-click="join_game($location)"
      ng-show="!badNick && nickname">Join</button>
    </p>
</form>

Handling events

The input tag has some special attributes in it - ng-model, which automatically binds the typed in value (live, no less, not even requiring a submit) to a $scope element called nickname. We trigger verification by calling a controller method called verify_nick, passing the nickname into the call. Here is what the controller looks like:

myApp.controller('JoinCtrl', function ($scope, $location, PlayerService, QuizManagerService) {

  $scope.verify_nick = function () {
    var result = PlayerService.searchNickName($scope.nickname);
    $scope.badNick = result;
  };

  $scope.join_game = function (nickName, emailAddress) {
    PlayerService.setNickName(nickname);
    QuizManagerService.startQuiz();
    $location.path("/play");
  };


});

You can see interactions with several objects. For Spring fans, we inject objects in a similar way to how Spring MVC does it - add it to the function's parameter list and it gets injected. NICE.

Services

We inject and use several objects:

  • $scope - our ViewModel
  • $location - allows us to change the page fragment we're showing
  • PlayerService, QuizManagerService - these are stateful service objects that live inside of the browser. Think of them as holding your state and calling business methods, and you're on the right track.

You should note that in this function, we're adding two other named functions to the ViewModel - verify_nick and join_game. Also, for those Spring developers you'll see us delegating most work to our named Service and built-in Angular objects. Just like a good MVC, it's just a front-end. The services do all the work.

Summary

That's all for now, and if you check out the commit with version 33607951b734a0f1cfc8a710b41abd8664cc3e8f you can run the app this way:

  • first, install node.js - 0.8 +
  • next, do a 'npm install -g express'
  • cd to ./angular-prototype/app
  • run the server with node server.js
  • browse to http://localhost:4567

It looks TERRIBLE right now. But it is a working app with several panes. I'm using Twitter bootstrap on the front-end so expect some ugliness until I get that smoothed out.

To re-iterate, our code is online - please feel free to watch our progress and comment away here if you like, but expect lots of silly steps as we move along). It's at http://github.com/krimple/quizzo-ete.