history.pushState(null, "dinosaurs", dinosaurs.html);

Här lägger vi till ett ny historik-post (dinosaurs.html) på stacken och passar samtidigt på att döpa om sidan till ”dinosaurs”.

pjax är ett jQuery-bibliotek som utnyttjar pushState och, som de själva säger, ökar browsingupplevelsen – nothing more.

pjax kan implementeras på ett flertal sätt, här följer ett:

<script type="text/javascript">
    "#nav change": function(el) {
        $.pjax({
            url: el.find(":selected").data("href"),
        	container: "#main"
        });
    }
</script>

<div id="main">
    Hello dinosaurs!
</div>

<select id="nav">
    <option data-href="/home">home</option>
    <option data-href="/dinosaurs" selected="selected">dinosaurs</option>
</select>

I koden anropas funktionen pjax() när användaren byter värde i en select-box. pjax-anropet fungerar i stort sätt som ett vanligt ajax-anrop där det svar vi får tillbaka skrivs ut i den main-container vi plockar ut med selektorn "#main".

Det som slutligen, implicit och per default, sker är ett anorp till pushState där vi lägger till URL:en på stacken. Anropet ser ut något i stil med:

history.pushState(null, $(data).filter('title').text(), '/dinosaurs')

Ett smidigt sätt att öka upplevelsen för användaren.

Vill du labba med pjax hittar du koden här och för ett hands-on-exempel kan du titta närmare på den här koden.

JQVMap är en jQuery-plugin som gör kartor med vektorbaserad grafik. Den använder Scalable Vector Graphics (SVG) för moderna webbläsare som Firefox, Safari, Chrome, Opera och Internet Explorer 9. Legacy-stöd för äldre versioner av Internet Explorer 6-8 tillhandahålls via VML.

Det medkommer ett antal kartor över världen, USA och Europa som är färdiga att använda. Det finns flera konfigurationsmöjligheter som färger, kantlinjer och opacities.

Kort och gott innebär detta att du, när du kör ett Mavenkommando, talar om för Maven att gå igenom ett antal faser och att exekvera de mål som hör till varje fas.

Illustration över Mavens olika nivåer

Maven har tre inbyggda livscykler:

• default (även kallad build) som hanterar deployment
• clean som sköter rensning av projekt
• site som hanterar projektdokumentering

Var och en av dessa cykler innehåller ett antal faser som representerar ett specifikt steg i cykeln. Exempelvis innehåller defaultcykeln fasen compile som ansvarar för kompilering av källkoden. Trots att varje fas har en specifik uppgift kan sättet den utför sin uppgift på variera då det är de mappade målen som i slutändan bestämmer vad som faktiskt sker. Vilka mål som knyts till vilken fas bestäms dels och framöverallt genom sättet artefakten paketerats men också genom de plugins som sugs in i projektet.

Som bilden ovan visar kan ett mål kan vara knutet till ett, flera eller inga faser precis som en fas kan innehålla noll eller flera mål. Ett fristående mål kan exekveras utanför livscykeln samtidigt som ett mål mappat mot flera faser körs en gång för varje mappning. Faser innehållandes multipla mål exekverar dessa i samma ordning som de deklarerats i POM:en. Däremot kommer en fas utan några mål aldrig att exekveras.

Defaultcyklen – för många användare den mest betydelsefulla cykeln då den fungerar som en generell modell för en applikations byggprocess – innehåller sammanlagt 23 faser. Nedan listar jag de mest framträdande av dessa:

Validate
Bekräftar att projektet är korrekt och att all information som behövs för att slutföra ett bygge finns tillgänligt.

Compilie
Komplilerar källkoden.

Test
Testar den kompilerade koden mot uppsatta tester.

Package
Paketerar den kompilerade koden till ett distribuerbart format (exempelvis .jar).

Integration-test
Om så är nödvändigt läggs den paketerade koden ut i en miljö anpassad för att köra integrationstester i.

Verify
Kör uppsatta kontroller för verifiering av paketets giltighet samt kontrollerar att paketet möter alla kvalitetskriterier.

Install
Installerar paketet i det lokala repot och kan nu användas som ett beroende i andra projekt lokalt.

Deploy
Kopierar det slutgiltiga paketet till ett remote repo för delning med andra projekt och utvecklare.

Utöver dessa faser tillkommer mellanfaser vilka bland annat hanterar förberedelser som att kopiera och flytta resurser till rätt kataloger samt post-process-steg som att städa upp efter körda tester. Här hittar ni den kompletta listan över faser.

JavaScriptMVC (JMVC) är ett open source-ramverk med motivationen att hjälpa dig som klientutvecklare att bygga strukturerade, skalbara JavaScript-applikationer av hög kvalitet. Byggt ovanpå jQuery erbjuder JMVC en samling best-practices och verktyg där man plockat ut det bästa från jQuery i avsikt att bringa ordning i röran: jQueryMX, StealJS, FuncUnit och DocumentJS.

jQueryMX

jQueryMX består av ett gäng jQuery-bibliotek vars syfte är att tillhandahålla den struktur och organisation man många gånger saknar i jQuery-tunga applikationer. jQueryMX kommer bland annat med specialevents som drag-and-drop, DOM extensions och language helpers som förenklar hantering av JavaScript-data.

Utöver detta inför jQueryMX även MVC-tänket i JavaScript med sina $.Model-, $.View- och $.Controller-plugins. Dessa olika delar kan användas tillsammans eller separat vilket innebär att du endast inkluderar de plugins du faktiskt kommer att ha användning för.

MVC-upplägget fungerar enligt förväntan:

• Modellen kapslar in service- och datalagret och kommunicerar via JSON-baserade REST-anrop.
• Vyn renderar modelldata som hämtats från servern.
• Controllern lyssnar på events och sköter kommunikation mellan modellen och vyn.

StealJS

StealJS är en samling verktyg som gör det enkelt att bygga, paketera och dela JavaScript-applikationer. Verktygen kommer med en mängd trevliga egenskaper:

• StealJS är bra på Dependency Management.
• StealJS hjälper dig bygga ihop dina JS- och CSS-filer till en enda komprimerad produktionsfil.
• StealJS kan användas för att generera projektstrukturer.
• StealJS kommer med stöd för SVN och GIT.
• StealJS möjliggör code cleaning och validering via JSLint.
• Och som en liten bonus kan StealJS göra din AJAX-app crawlable.

FuncUnit

FuncUnit är ett testramverk med ambitionen att göra enhetstestning och funktionell testning av webbapplikationer enklare och – som de själva säger – roligare! Med en jQuery-liknande syntax skriver, kör och debuggar du dina tester direkt i browsern (fungerar för IE 6+, FF 2+, Safari 4+, Opera 9+ och Chrome) och samma tester kan, via Selenium, också automatiseras. FuncUnit stödjer simulering av user actions såsom typing, clicking, dragging och scrolling.

Nedanstående kod, vilken testar att en AutoSuggest returnerar fem resultat, får fungera som exempel på ramverkets hyfsat okomplicerade syntax:

module("autosuggest",{
 setup: function() {
   S.open('autosuggest.html')
 }
});

test("JavaScript results",function(){
 S('input').click().type("JavaScript")

 // wait until we have some results
 S('.autocomplete_item').visible(function(){
   equal( S('.autocomplete_item').size(), 5, "there are 5 results")
 })
});

DocumentJS

DocumentJS tillhandahåller, precis som namnet avslöjar, verktyg för dokumentering av JavaScript-kod. DocumentJS hjälper dig generera, organisera, granska och underhålla din dokumentation och, precis som i alla andra delar av JavaScriptMVC, ligger fokus på användarvänlighet och enkelhet.

Men det finns hjälp att tillgå, låt oss ta en titt på det dynamiska CSS-språket {less} som genom förkompilering ger oss möjlighet att använda variables, mixins, operations och functions.

Ange variabler som du kan återanvända

// instruktion i less
@color: #4D926F;
#header {color: @color;}
h2 {color: @color;}

/*kompilerat CSS Resultat*/
#header {color: #4D926F;}
h2 {color: #4D926F;}

Mixins, inbäddning av css värden:

// instruktion i less
.rounded-corners (@radius: 5px) {
    border-radius:@radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

#header {.rounded-corners}
#footer {.rounded-corners(10px);}

/*kompilerat CSS Resultat*/
#header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#footer {
     border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

Nästlade regler

// instruktion i less
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

/*kompilerat CSS Resultat*/
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {font-size: 12px;}
#header p a {text-decoration: none;}
#header p a:hover {border-width: 1px;}

Operations and functions

Att hantera relativa fontstorlekar i procent beräknat utifrån pixlar är ett vanligt case. Vi utgår från en basstorlek på 13px och skapar en funktion som returnerar ett procenttal utifrån önskad pixel- och basstorlek:

// instruktion i less
@basefontsize: 13;

.fontresizer(@fontsize: 13px)  {
    font-size: percentage(@fontsize/@basefontsize);
}
.classx { .fontresizer(); }

/*kompilerat CSS Resultat*/
.classx{ font-size: 100%;}

// instruktion i less
.classx{ .fontresizer(20px);}

/*kompilerat CSS Resultat*/
.classx{font-size: 153.846%;}

Ett annat vanligt förekommande behov är att reducera instruktioner för så kallade imagesprite-bakgrunder

// instruktion i less
.sprite(@offset-x: 0, @offset-y: 0) {
    background: url("../sprites/icons.png") scroll no-repeat @offset-x @offset-y;
}
.classx {.sprite(100%, -100px);
}

/*kompilerat CSS Resultat*/
.classx{ background: url("../sprites/icons.png") scroll no-repeat 100% -100px;}

Installera och använd {less}

Less kan användas såväl från klienten (Chrome, Safari och Firefox för lokal utveckling) som från servern med Node.js och Rhino. Använder du Maven rekommenderar jag denna plugin för kompilering av {less}-resurser till CSS-filer.

Som Mac-användare kan du även använda {less}-appen från CodeKit i din lokala utvecklingsmiljö

CommonJS är ett initiativ startat för tre år sedan under namnet ServerJS av Kevin Dangoor. Det syftar till att göra JavaScript till ett seriöst alternativ som serverplattform. CommonJS innehåller ett antal API-specifikationer, exempelvis för filsystemaccess, hantering av binärdata, kommandoradsargument och utmatning till konsol. Dessutom finns en specifikation för modulhantering: CommonJS Modules. Enligt denna specifikation publicerar man variabler och funktioner med exports och importerar dem med require. Så här kan en modul se ut:

movieFinder.js

var priv = [];

exports.add = function (item) {
    priv.push(item);
};

exports.findAll = function () {
    return priv;
};

Variabeln priv är inte tillgänglig utanför modulen. Det är däremot funktionerna add och findAll, eftersom de lagts till objektet exports. Om en modul behöver importera en annan görs det med require:

movieLister.js

var finder = require("./movieFinder");

exports.moviesDirectedBy = function (arg) {
    var hasDirector = function (movie) {
        return movie.getDirector() === arg;
    };

    return finder.findAll().filter(hasDirector);
};

Dessa två moduler kommer bara att finnas i ett exemplar vardera. Om man istället behöver en klass där man kan instansiera objekt tilldelar man en konstruktor till exports:

Movie.js

var constructor = function (title, director) {
    return {
        getTitle: function () {
            return title;
        },

        getDirector: function () {
            return director;
        },

        toString: function () {
            return title + " by " + director;
        }
    };
};

module.exports = constructor;

Notera att det här är ett av många sätt att skriva konstruktorer i JavaScript. Douglas Crockfords JavaScript: The Good Parts har ett helt kapitel om detta. Huvudmodulen kan sedan se ut så här:

main.js

var Movie = require("./Movie");
var movieFinder = require("./movieFinder");
var movieLister = require("./movieLister");

movieFinder.add(Movie("Terminator", "James Cameron"));
movieFinder.add(Movie("Blade Runner", "Ridley Scott"));
movieFinder.add(Movie("Titanic", "James Cameron"));

var movies = movieLister.moviesDirectedBy("James Cameron");

for (var i = 0; i < movies.length; i++) {
    console.log(movies[i].toString());
}

För att allt det här ska fungera behöver man naturligtvis en implementation av CommonJS Modules. På serversidan implementerar exempelvis Node.js specifikationen. Om man skriver kod som ska köras i browsern kan man bland annat välja på inject och require.js.

Det finns redan mängder med tutorials över hur man sätter upp Google-konton på sin iPhone men jag har upplevt det aningen problematiskt att synka multipla Google-kalendrar och tänker mig att detta inlägg får fungera som en steg för steg-guide över hur jag fick till synkningen. Jag har en iPhone 3GS med iOS 5 och använder mig av Google Sync för synkronisering.

Har du inte redan satt upp ett Google-konto på din iPhone följer du dessa steg:

1. Under inställningsmenyn på din iPhone väljer du E-post, kontakter, kalendrar
2. Lägg till konto
3. Välj att skapa ett Microsoft Exchange-konto (vilket är det protokoll Google Sync använder vid synkronisering till iPhone)

4. Under E-post fyller du i din fullständiga e-postadress
5. Lämna domänfältet tomt
6. Fyll i din fullständiga e-postadress under Användarnamn
7. Skriv in lösenordet för ditt Google-konto
8. Klicka på Nästa
9. När fältet Server poppar upp fyller du i m.google.com
10. Klicka på Nästa
11. Välj vad du vill synka (denna guide kräver att du åtminstone väljer att synka kalendrar)

Setup av synkroniseringen är nu klar och beroende på vad du i steg 11 valde att synka kommer det nu att pushas ut information till din iPhone.

Med Google Sync kan du synka upp till 25 kalendrar på din iPhone vilket man enkelt ska kunna sätta upp genom att surfa in på http://m.google.com/sync och logga in på sitt konto. Här stötte jag dock på problem. Sidan talade om för mig att Google Sync tyvärr inte kunde stödja min enhet eftersom jag var tvungen att ha iOS 3 eller senare – något som jag uppenbarligen hade då jag precis uppdaterat till iOS 5.

Efter en tids undersökning kunde jag konstatera att detta var en bugg fler användare upplevt och en konsekvens av att Google Sync befinner sig i ett beta-stadie. Sajten kräver att sidan presenteras på engelska och det du behöver göra för att komma runt problemet är att byta språk från svenska till just engelska enligt nedan steg:

12. Med din iPhone, surfa in på http://m.google.com/sync
13. För att ändra språk klickar du på länken Byt språk (jag valde English (UK))
14. Sidan laddas om och du har nu möjlighet att logga in. Gör detta genom att klicka på Sign in with your Google Account
15. Du möts nu av de enheter du har satt upp ditt Google-konto på och genom att klicka dig in på de olika enheterna kan du välja exakt vilka kalendrar du vill synka

16. Efter att ha valt vilka kalendrar du vill synka och klickat på Save är du klar

När du nu lägger till, editerar eller tar bort händelser i dina kalendrar kommer dessa speglas på alla enheter du synkat enligt ovan steg – detta gäller självfallet oberoende av om du gör förändringarna i kalendern på din iPhone eller i webbgränssnittet på din dator.

package se.cygni.blog;

import static org.mockito.Mockito.mock;
import static org.mockito.Mockito.verify;

import javax.persistence.EntityManager;

import org.junit.Before;
import org.junit.Test;

public class BlogServiceTest {

    private BlogService service;
    private EntityManager entityManager;

    @Before
    public void setup() {
        entityManager = mock(EntityManager.class);
        service = new BlogService(entityManager);
    }

    @Test
    public void addEntry() {
        Entry entry = new Entry("title", "text");

        service.addEntry(entry);

        verify(entityManager).persist(entry);
    }

}

Testet i exemplet är relativt enkelt och verifierar endast att persist anropas i addEntry och ger oss följande kod för ett Spring-baserat projekt:

package se.cygni.blog;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
public class BlogService {

    @PersistenceContext
    private EntityManager entityManager;

    public BlogService() {
    }

    protected BlogService(EntityManager entityManager) {
        this.entityManager = entityManager;
    }

    @Transactional
    public void addEntry(Entry entry) {
        entityManager.persist(entry);
    }

}

För att kunna använda en mockad entityManager har vi lagt till en konstruktor som tar en EntityManager som BlogService sedan kan använda. Använder vi dessutom ”field injection” är vi tvugna att lägga till en no-args-konstruktor. Alternativt hade vi kunnat lägga till en setter istället.

    protected void setEntityManager(EntityManager entityManager) {
        this.entityManager = entityManager;
    }

Det är väl antagligen inte så illa att behöva lägga till konstruktorer alternativt setters även om det blir värre när en klass har flera beroenden. Däremot känns det ju lite onödigt när både Spring och Java EE numera stödjer field injection. Det går ju att köra enhetstesterna med till exempel Spring och låta Spring injicera alla beroenden. Detta anses dock inte helt lämpligt för enhetstester utan lämpar sig bättre för integrationstester. Istället kan Mockito ta hand om injicering, genom att köra testerna med MockitoJUnitRunner och använda annotationerna @Mock och @InjectMocks. Mockito fungerar då i princip som en enkel IOC-container och några extra konstruktorer eller setters behövs inte.

package se.cygni.blog;

import static org.mockito.Mockito.verify;

import javax.persistence.EntityManager;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.mockito.InjectMocks;
import org.mockito.Mock;
import org.mockito.runners.MockitoJUnitRunner;

@RunWith(MockitoJUnitRunner.class)
public class BlogServiceTest {

    @Mock
    private EntityManager entityManager;

    @InjectMocks
    private BlogService service = new BlogService();

    @Test
    public void addEntry() {
        Entry entry = new Entry("title", "text");

        service.addEntry(entry);

        verify(entityManager).persist(entry);
    }
}

@Controller
public class MyController {

    @EJB(mappedName="java:module/MyService")
    private MyService myService;

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home(Model model) {
        model.addAttribute("message", myService.getMessage());
        return "home";
    }
}

Nyckeln till att injektionen med @EJB-annotation fungerar, i exemplet ovan, är att mappedName används. Spring utför då en JNDI-lookup på det angivna JNDI-namnet. Eftersom JNDI har standardiserats i Java EE 6 är dessutom namnen portabla mellan applikationsservrar. Stödet för Java EE 6 kommer säkerligen förbättras i framtida versioner av Spring så det finns bra defaults för ejb-lookups med JNDI.

En annan spännande detalj med detta exempel är att MyService inte behöver vara ett interface eftersom Java EE 6 inte kräver detta för lokala session beans. Dessutom kan session beans paketeras tillsammans med resten av webbapplikationen i war-arkivet. D.v.s. det behövs ingen ejb-jar och inget EAR-arkiv.

Läs hela artikeln på Java Code Geeks.

• Roberts inlägg om kortkommandon och handgrepp är alltid högaktuellt. Inlägget visar bland annat på smarta kommandon för navigering och refactoring.
• Save Actions är ett ovärderligt verktyg om du vill hålla ordning och reda i koden.
• Conditional Breakpoints och Exception Breakpoints kan vara välbehövligt i vissa debugsituationer.

Kolla även in en rad tips på olika smarta plugins, hur man remote-debuggar osv.