David Steinsland – informatikkstudent og webutvikler

Innlegg fra kategorien «Programmering»

Kompilere Java-prosjekter med Apache Ant

| Ingen kommentarer »

 

Når en jobber med store Java-prosjekter som inneholder mange klasse- og kildefiler, kan det være et mareritt å holde styr på alle disse. For ikke å snakke om å sørge for å kompilere alle, én etter én. Apache Ant ble laget for akkurat dette formålet, og har mange likhetstrekk med Make (for de som er kjent med Unix). Ant er et automatisert kompileringsverktøy som kan brukes for å kompilere hele Java-prosjekter med én kommando.

Programmet tar utgangspunkt i en konfigurasjonsfil som er formatert i XML, og styrer hvilke filer som kan kompileres og hvor klassefilene skal ligge. Du kan også velge om du skal opprette JAR-filer for hele prosjektet.

Installasjon

Gå til nedlastningssiden for Apache Ant og last ned siste versjon. Pakk ut mappen til for eksempel C:\ant\.

Sørg deretter for at du har en miljøvariabel kalt JAVA_HOME med verdien tilsvarende mappen som inneholder JDK. For eksempel slik:
c:\Progra~1\Java\jdk1.7.0\

Du må også huske å inkludere C:\ant\bin\ i miljøvariabelen PATH.

Forberedelse

Opprett en helt enkelt Java-klasse med en main-metode, som du lagrer i en mappe kalt src.

Deretter oppretter du en XML-fil som du kaller build.xml med følgende innhold:

<?xml version="1.0"?>
<project name="MySQL" default="compile">

	<!-- Configuration -->
	<property name="src.dir"     value="src"/>
    <property name="build.dir"   value="build"/>
    <property name="classes.dir" value="${build.dir}/classes"/>
    <property name="jar.dir"     value="${build.dir}/jar"/>
    <property name="main-class"  value="Test"/>
	<!-- End Configuration -->

	<target name="clean">
        <delete dir="${build.dir}"/>
    </target>

   <target name="compile">
        <mkdir dir="${classes.dir}"/>
        <javac srcdir="${src.dir}" destdir="${classes.dir}"/>
    </target>

	<target name="jar" depends="compile">
        <mkdir dir="${jar.dir}"/>

		<jar destfile="${jar.dir}/${ant.project.name}.jar" basedir="${classes.dir}">
            <manifest>
                <attribute name="Main-Class" value="${main-class}"/>
            </manifest>
        </jar>
    </target>

	<target name="run" depends="jar">
		<java jar="${jar.dir}/${ant.project.name}.jar" fork="true"/>
    </target>
</project>

I starten trenger du ikke tenke på mer enn å endre «TestApp» til prosjektets navn, samt endre «main-class» til den klassen som inneholder main-metoden.

De ulike target-blokkene utgjør kommandoene du kan gjøre med Ant. For eksempel vil vi med denne filen ha følgende kommandoer tilgjengelige:

ant compile
ant jar
ant run
ant clean

Dersom du legger merke til linje nummer to, så står det blant annet default=»compile». Dette gjør at dersom vi kjører kommandoen:

ant

Så vil den kjøre compile-oppgaven.

Konfigurasjonsfilen skal lagres i prosjektmappen, slik at du ender opp med følgende mappestruktur;

TestApp
+ src/
|	Test.java
+ build.xml

Gjennomføring

Nå er det lille prosjektet vårt klar til å kompileres.
Start opp kommandolinjen og endre mappe til prosjektet.

For å kompilere prosjektet, skriver du inn kommandoen:

ant

Denne kommandoen gjør oppgaven som er spesifisert under <target name=»compile»>.
Den oppretter mappen build\classes og lagrer klassefilene der.

For å lage en JAR-fil for videre distribusjon, utfører vi kommandoen:

ant jar

Denne er avhengig av at prosjektet først er kompilert, men dette sørger Apache Ant for å gjøre dersom du ikke har gjort det.
Det vil si at vi faktisk ikke trenger å utføre kommandoen ant compile på forhånd.

For å teste at JAR-filen fungerer, kan vi bruke kommandoen ant run.

Tips: Enkle feilmeldinger med animasjon

| Ingen kommentarer »

errorbox

Her følger en liten kodesnutt som viser en feilmelding i ca. fem sekunder før den fjernes igjen. I dét feilmeldingen vises, blir bakgrunnsfargen forsterket for å få en «se her!»-opplevelse. Dersom musen blir holdt over feilmeldingen, blir den ikke fjernet før etter musepekeren er fjernet fra den.

For å få koden til å fungere trenger du jQuery og jQuery UI.

JavaScript:

$(function ()
{
	$('div.message').hide().effect ('highlight', {
		color:'#ff8a8a'
	}, 2000).delay(3000).animate({
		height: 'toggle',
		opacity: 'toggle'
	}, 'slow').hover (function ()
	{
		$(this).stop(true, true);
	}, function ()
	{
		$(this).delay(2000).animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
	});
});

Om du studerer JavaScript-koden, vil du se at vi bruker effekten «Highlight». Effekten angir feilmeldingsboksen med angitt bakgrunnsfarge, før den fader tilbake til bakgrunnsfargen som er satt i CSS. Alternativt kan en benytte seg av «pulsate», som også gir en ganske behagelig animasjon:

 $(function() {
    $('div.message').hide().effect('pulsate', {
        times: 2
    }, 450).delay(4000).animate({
        height: 'toggle',
        opacity: 'toggle'
    }, 'slow').hover(function() {
        $(this).stop(true, true);
    }, function() {
        $(this).delay(2000).animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 'slow');
    });
});

Pulsate-effekten her veksler mellom å skjule/vise feilmeldingsboksen iløpet av 450 millisekunder.

CSS:

div.message
{
    display:none;
    border:1px solid;
    padding:10px;
    color: #D8000C;
    background-color:#FFBABA;
}

div.message h4
{
    font-weight:bold;
    font-size:14px;
}

div.message p
{
    padding:5px 0;
    font-size:12px;
}

HTML:

<div class="message">
    <h4>An Error has Occured!</h4>
    <p>
        There was a problem while editing the article. Your data has been saved, and you can go <a href="#">back</a> to continue editing.
    </p>
    <p>
        Error ID: #1337
    </p>
</div>

Resultatet:

Klikk på «Result» i vinduet under.

Eget vindu

Komprimere CSS og JavaScript

| Ingen kommentarer »

Jeg har ved et par anledninger skrevet om hvordan du kan dra opp ytelsen i nettsidene dine, ved å for eksempel introdusere mellomlagring (cache) på databasen din eller i applikasjonen.

I dag tenkte jeg å dekke litt om «minifisering» av JavaScript og CSS-kode.

Først av alt: hva er det for noe, og hva betyr det for meg?

Når du skriver CSS- og JavaScript-kode (og alle andre typer..) så pleier mange å skrive på en slik måte at det er mest mulig lesbart og forståelig. Dette kan være aktivt bruk av whitespace, TAB, newlines, variabel- og funksjonsnavn blant annet.

Resultatet er da at koden blir lang, noe som er unødvendig: en maskin bryr seg ikke om hvor fint koden er skrevet når den skal tolke koden. Et menneske bryr seg, derimot.

Og som vi alle vet: dess flere bytes, dess lengre lastetid. Og på Internett har dette en stor betydning, spesielt for brukere med lav Internetthastighet (ikke alle har fått gleden av fiber ennå).

Det er derfor et godt tips å gjøre koden så liten som overhodet mulig, ved å fjerne whitespace og gjøre funksjonsnavn og variabelnavn kortere. Denne prosessen kalles gjerne «komprimering» eller «minifisering» (eng. minify).

Om du har lastet ned for eksempel en jQuery-plugin før, har du ofte fått to filer presentert: en «vanlig» fil, og en som slutter med «.min».

Her er to eksempler på dette:

jquery.js
jquery.min.js

Forskjellen her er at jquery.min.js er en miniversjon av jquery.js, og er dermed mindre i filstørrelse.

jquery.min.js er egnet til produksjonsbruk, mens jquery.js er egnet til videre utvikling. Det vil si at dersom du skal gjøre endringer i koden din, må du gjøre dette i kildefilen for så og lage en komprimert versjon av den etterpå.

Forskjell mellom vanlig og komprimert JavaScript

Hvilke program er tilgjengelige?

Det finnes mange gode verktøy for å minifisere CSS- og JavaScript-filer, hvor de mest brukte er Yahoo! Compressor og Google Closure. Dette er to Java-filer som du må kjøre lokalt på PC-en via kommandolinjen. Kanskje ikke det beste alternativet for alle, som er årsaken til at det finnes mange gode nettbaserte verktøy også.

Egenutviklet program

Jeg har utviklet et program for Windows basert på Yahoo! Compressor, som gjør at du slipper å benytte kommandolinjen for å minifisere filer.

Programmet er skrevet i C#, og fungerer derfor kun på Windows (som jeg vet om). Det er likevel et nyttig verktøy som er lett å bruke!

Last ned Last ned programmet her.

Datoer i PHP – på den enkle måten

| Ingen kommentarer »

Å jobbe med datoer kan være riktig slitsomt til tider. Hvor mange ganger har du ikke klødd deg litt i bakhodet, og tenkt hvordan i huleste du kan formatere datoer som enten er formatert forskjellig, er fra ulike tidssoner eller som du må trekke fra / legge til dager/uker/måneder … ?

Ja, det har vært et problem. Med det mener jeg at løsningen er på plass, og at du kan slappe ekstra godt av. Dette innebærer selvfølgelig at du har en PHP-installasjon tilsvarende 5.3.x.

Alle dager i mars måned

Tidligere har vi måttet brukt PHPs datofunksjoner (date/strtotime/strftime …), men siden PHP 5.3 kan vi nemlig dra nytte av de nye DateTime-klassene og godene som medfølger.
Se bare hvor enkelt det er å skrive ut alle dagene i Mars 2011:

$march = new DateTime ('March 2011');

$days = new DatePeriod (
    $march,
    new DateInterval ('P1D'),
    $march->modify ('first day of next month')
);

foreach ($days as $day)
{
    echo $day->format ('Y-m-d'), "\n";
}

Årsaken til at jeg valgte å skrive «first day of next month» fremfor «last day of» er på grunn av at siste datoen blir ekskludert, som hadde betydd at 31. mars ikke hadde blitt skrevet ut.

I eksempelet mitt har jeg benyttet meg av alle klassene som inngår i DateTime-biblioteket (med unntak av DateTimeZone) hvor:

  • DateTime lager et objekt med 1. mars 2011 utifra «March 2011″
  • DatePeriod lager et objekt som inneholder alle datoer fra 1. mars til 1. april (eksklusivt) hvor det er 1 dag mellom hver instans (dette bestemmes av DateInterval)

Antall dager mellom to datoer

DateTime-klassen har et stort bruksområde, og kan for eksempel brukes til å finne differansen mellom to datoer:


$january = new Datetime ('January 2011');

$diff = $january->diff ( new DateTime ('April 2011') );

echo 'Difference between January and April: ',
$diff->format ('%R%a days');  // 90 days

%a fungerer slik at den skal gi meg det totale antallet dager mellom de to datoene. Denne funksjonaliteten fungerer dessverre ikke optimalt på Windows, og kan skape endel frustrasjoner. Men i lag med PHP 5.3 kan du også sammenligne to DateTime-instanser ved bruk av «comparison operators» (større/mindre enn, osv.) Dette gjør oss istand til å lage en «work-around» til Windows-problematikken:


$january = new DateTime ('January 2011');
$april = new DateTime ('April 2011');

// clone variable to keep $january clean..
$currdate = clone $january;

for ($days = 0; $currdate->modify ('+1 day') <= $april; ++$days);

echo "Difference between January and April: {$days} days";

Utvide DateTime med støtte for MySQL Datetime

Det er også ganske tilfredsstillende å benytte seg av DateTime ilag med MySQL DATETIME. I dette eksempelet har jeg valgt å utvide DateTime-klassen:

class MyDateTime extends DateTime
{
    const MYSQL = 'Y-m-d H:i:s';

    public static function createFromMySQL ($datetime)
    {
        return self::createFromFormat (self::MYSQL, $datetime);
    }
}

// date from MySQL
$date = MyDateTime::createFromMySQL ($row['my_date']);

$timestamp = $date->getTimestamp ();

echo "Date: {$date->format ('d.m.Y H:i')}\n";

Poenget mitt var ikke å utvide klassen for å legge til en enkel funksjon, men heller illustrere at det kan være lurt å gjøre det (DateTime-klassen har tross alt ikke tatt høyde for absolutt alt).
Kanskje det kunne vært en idé å gjøre Windows work-arounden min til en funksjon som utvider DateInterval ?

Som regel er det kun DateTime du har behov for i det daglige, men du kan også få god nytte av både DateInterval og DatePeriod om du for eksempel skal jobbe med kalendere.

Lære Regular Expressions

| Ingen kommentarer »

Dersom du ikke vet hva Regular Expressions er for noe, er det på høy tid å finne dette ut. Kort fortalt er det et verktøy du bruker for å søke igjennom en string med tekst med et gitt mønster, slik at du kan forandre på teksten, fjerne den, eller gjøre hva du vil. Muligens en smule dårlig forklart fra min side, men «verktøyet» er iallfall i bruk i de aller fleste operativsystemer (se etter grep i Linux) samt programmeringsspråk.

I starten kan RegExs virke litt skremmende, spesielt det å lese og forstå et mønster. Ta for eksempel dette:

upload/(bruker|system)/(?P<additional_dir>[a-z0-9/]+/)?(?P<image>[\w._-]+\.(?:jpe?g|gif|png))?

Kan du gjette hva jeg prøver på her?

Selv har jeg ønsket å lære meg RegExps skikkelig, men har manglet både motivasjon og insentiv. I dag er situasjonen forandret, og jeg fryder meg med å lære Regular Expressions!

Hvordan jeg lærte meg Regexp

Da jeg virkelig bestemte meg for å gjøre noe med det, gikk jeg til innkjøp av boken Mastering Regular Expressions samt programmet RegexBuddy. I lag med kunnskapen jeg satt inne med fra før, så har jeg hatt en jevn og fin lærekurve (du trenger dog ikke ha noen kunnskaper før du leser boken!).

Det noe kontroversielt om hvor nyttig Regular Expressions faktisk her, med tanke på at mange har en tendens til å forelske seg i dem og bruke de overalt (såkalt blind kjærlighet..). Men trikset er bare å bruke RegEx fornufting.

I løpet av de siste dagene har jeg blant annet benyttet meg av RegExs til å hente ut URL-er til både linker og bilder i systemet vårt på jobb, slik at jeg for eksempel kan bytte ut originalbilder med thumbnails og erstatte URL-ene med andre. Dette gjorde vi da vi skulle bygge en mobilversjon av systemet, uten å måtte bruke mange titalls timer på å endre selve systemet. Resultatet er en nettside med små bilder optimalisert for mobilenheter, samt at alle interne URL-er nå peker til mobil-domenet.

Tips

Om du bruker Twitter jevnlig kan det være interessant å følge RegexTip for daglige tips!

Jeg elsker Regular Expressions! Gjør du?