Netbeans 8.1, Angular 1.3 ja Angular-Material

No niin, nyt on mehukas pläjäys päivityksiä. Netbeans 8.1 päivitys tipahti muutama viikko sitten, ja se paransi huomattavasti tukea Angular projektien ja Angular Seedin suhteen. Aiemmat bower pulmat ovat poistuneet – ainakin hetkeksi. Sillä pystyy tekemään hyvän Angular projektirungon siis nyt.

Angular frameworkistä vuorostaan on tullut ulos juuri tuoreeltaan odotettu 1.3 versio. Jatkossa toki luvassa vielä odotetumpi 2.0 versio joka järisyttää kaiken uusiksi. Mutta tämä 1.3 on mukava vakaa pikkupäivitys. Sen saa käyttöön vaikka heti, ja aika monet kirjastot sitä jo vaativatkin.

Lopulta angular-material. Olen kovasti itse ollut kiinnostunut Googlen Polymer/Material kirjastosta muutamasta syystä: Sitä saa niin Androidiin kuin webiinkin, se on selkeästi tablet/phablet/mobile first ui framework, se suuntaa tulevaisuuden selaimiin, ja se on aika siisti. Siinä on selkeä filosofia takana ui-kehitykseen. Ja nyt sitä saa Angulariinkin.

Kun kaikki nämä kolme lyö yksiin, tulee taas aika metka alusta kehitellä tai prototypoida. Se onnistuu esim. näin:

Lataa Netbeans 8.1 tai päivittele se tuoreimpaan versioon:

https://netbeans.org/

Tee sinne Uusi HTML 5 projekti tyyppiä Angular seed:

HTML 5 projektityyppi

Angular Seed pohja

Angular Seed antaa mukavat pohjat kehitykselle: Siellä on jo npm, ja bower mukana.

Seuraava tempaus on mennä Important Files-kansioon, editoimaan bower.json tiedostoa. Ideana on muutella siellä Angular-versiot 1.2.x versiosta versioon 1.3.x. Samalla lisää sinne myös angular-material 0.4.x, sekä angular-animate 1.3.x. Voit myös muokata projektin nimen, kuvauksen, version ja kotisivulinkin makusi mukaan. Esim- näin:

{
 "name": "Material Design Demo",
 "description": "Angular Material Design demo",
 "version": "0.0.1",
 "homepage": "https://spagettikoodi.wordpress.com",
 "license": "MIT",
 "private": true,
 "dependencies": {
 "angular": "1.3.x",
 "angular-route": "1.3.x",
 "angular-loader": "1.3.x",
 "angular-mocks": "~1.3.x",
 "angular-animate": "~1.3.x",
 "html5-boilerplate": "~4.3.0",
 "angular-material": "~0.5.x"
 },
 "resolutions": {
 "angular": "1.3.x",
 "angular-animate": "1.3.x",
 "angular-aria": "1.3.x"
 }
 
}

Huomaa tuossa myös resolutions-osa, ilman sitä saat mehukkaan angular not found errorin aikaiseksi, kun bowerille jää epäselväksi mitä versiota Angularista tulisi käytellä.

Nyt kun koko roska on valmis, aja npm install ja bower install, ja haluamasi kirjastot lataillaan interwebistä koneelle. Jos Javascriptin jumalat suovat. Taisin aiemmin kirjaillakin metkoista ongelmista npm työkalusta windows 2012 koneissa suhteessa npm central registryyn. Tätä kirjoittaessa ne ovat edelleen olemassa, täältä suomen kamaralta suunnattuna.

Npm and Bower run tools

Angular-Material kirjasto vaatii index-sivulle muutaman linkin toimiakseen: tarvitset linkit javascript-tiedostoihin ja tyylisivuihin. Ne kannattaa laittaa olemassaolevien kaveriksi, ja huomioida myös miten aiempien linkkien polut bower-components kansioon toimivat. Mutta tähän tapaan:

<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>My AngularJS App</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
 <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
 <link rel="stylesheet" href="/bower_components/angular-material/themes/default-theme.css">
 <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
 <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
 <link rel="stylesheet" href="app.css">
 <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
 </head>
 <body>
 <ul class="menu">
 <li><a href="#/view1">view1</a></li>
 <li><a href="#/view2">view2</a></li>
 </ul>

<!--[if lt IE 9]>

 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
 <![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
 -->
 <script src="bower_components/angular/angular.js"></script>
 <script src="/bower_components/angular-aria/angular-aria.js"></script>
 <script src="/bower_components/angular-animate/angular-animate.js"></script>
 <script src="/bower_components/hammerjs/hammer.js"></script>
 <script src="/bower_components/angular-material/angular-material.js"></script> 
 <script src="bower_components/angular-route/angular-route.js"></script>
 <script src="app.js"></script>
 <script src="view1/view1.js"></script>
 <script src="view2/view2.js"></script>
 <script src="components/version/version.js"></script>
 <script src="components/version/version-directive.js"></script>
 <script src="components/version/interpolate-filter.js"></script>
 </body>
</html>

Editoi app.js tiedostoa, lisää sinne material design moduuli niin saat myös funktiot esim. modaali-ikkunoille käyttöön:

’use strict’;

// Declare app level module which depends on views, and components
angular.module('myApp', [
 'ngRoute',
 'ngMaterial',
 'myApp.view1',
 'myApp.view2',
 'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
 $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Lopuksi, jos haluat heti nähdä toimivatko linkit suht oikein, avaa view1/view1.html tiedosto, ja lisää sinne material-design nappi.

<p>This is the partial for view 1.</p>
<md-button class="md-fab md-raised">PUSH ME</md-button>

Huomaa pari seikkaa:

– Paketissa tulee mukana myös angular-aria ja hammerjs, nekin mielenkiintoisia kirjastoja tabsujen ja kämmyköiden kanssa.

– Näissä linkeissä on viittaus angular/material kansion alla olevaan themes/default-theme.css tiedostoon, se tulee angular-material 0.5:sta alkaen mukana.

Jos haluat, voit nyt ajaa sovelluksen ja tarkistaa että virheilmoituksia ei tule ja nappi tulee näkyviin. Se tapahtuu Netbeansissä yksinkertaisesti oikealla hiirennapilla projektin päällä:

Run app

 

First material design button

 

Huomaa material design napin onhover efekti ja onclick ripple-efekti. Siinä esimakua mitä on luvassa.

No niin, se siitä. Nyt sinulla on Netbeans 8.1, AngularJS 1.3, sekä angular-material asennettuna, ja hupi voi alkaa. Mitäpä tällä kombolla voi tehdä? Kirjoitan siitä toisen artikkelin myöhemmin.

Tässä muutama asiaan liittyvä linkkivinkki:

https://github.com/angular/angular.js/blob/master/CHANGELOG.md

https://material.angularjs.org/#/

https://github.com/angular/bower-material

 

Mainokset

Netbeans 8.0.1 ja JavaScript, Angular, Require, Grunt,…

Netbeans 8 on ollut kaikista kehutuista ominaisuuksistaan huolimatta Javascript käytössä lähinnä glorifioitu tekstieditori. Tarkoittaen, että ominaisuudet vaativat toimiakseen tietyn HTML5 tyyppisen projektin, esim. Maven tai web projektit eivät kelpaa, saati sitten freeform kansiot. Sen kanssa on pärjäilty tähän asti, lähinnä Maven-tuen ja Git-tuen hyvän integraation vuoksi.

Nyt tuli kuitenkin putkesta ulos 8.0.1 päivitys, ja siinä on pieniä parannuksia tälle kentälle. Jatkossakin on vielä varaa paljon parantaa – mutta jokainen askel eteenpäin on hyvästä.

Yksi päivityksistä on parempi tuki require-moduulihallinnalle. Se löytyy nyt myös Maven projektin asetuksista:

RequireJS kirjastot

Kuten dialogista näkee, voi halutessaan määritellä polkuja myös manuaalisesti jotta moduulit löytyvät – rasti ruudussa pitäisi kuitenkin pitkälti riittää. Kun moduulit löytyvät, monet intellisense/content assist mahdollisuudet paranevat:

Content assit for require paths

Intellisense

Tosiaan kaukana ollaan vielä täydellisyydestä, parannettavaa on vielä. Intellisense on paranemaan päin mutta esim. angular templateiden ymmärtäminen aivan alkutekijöissä: nykyisellään niistä tulee lukemattomia html5 sääntömotkotuksia mm. attribuuteista ilman arvoja tai siitä mikä elementti voi olla missäkin kohtaa. Useimmat niistä ovat vääriä hälyytyksiä, mutta niiden sekaan häviävät sitten merkityksellisetkin.

Tosiaan editoripuolella suosittu vaihtoehtohan on Webstorm, itse en siitä niin innostunut koska kaupallinen ja koska Maven projektituki edelleen ainakin omalle logiikalle kehno. Muita hyviä keveämpiä open source editoreita ovat mm. Brackets, sekä Sublime. Mukavasti grunt/mavenillä rakennetussa projektissa on kivaa se että voi käyttää mitä editoria haluaa, kunhan koodin muotoiluasetukset ovat yhtenevät. Brackets tuli blogin lukijavinkkinä, ja olen siihen tykästynyt.

Pistä Netbeans Git:isemään!

Devaaja joutuu/pääsee päivän aikana tekemään update/commit tai commit/pull/push syklejä aika monta kertaa. Netbeansin oletus tälle on hieman raivostuttava wizardi joka kyselee kaikenlaista.

Onneksi pull/push upstream eivät pahemmin kysele kunhan versiohaara on jo määritelty ja remote repository paikallaan (Git)ssä. Vielä maukkaampaa on määritellä näille pikanäppäimet joilla voi paukutella commit/pull/push syklin ajatusta nopeammin.

Kuva

Ja taas säästyi devaajilta aikaa parempaan – kuten itsensä ihailuun ja kahvin juontiin 😉 No ei vain, vaikka nykyajan kehitysvälineet automatisoivat paljon ja suorastaan kirjoittavat koodin itsekseen jonkun pitää toki vielä kirjoittaa ne kolme ensimmäistä kirjainta ja painaa Ctrl+Space.

Netbeans Maven actionien pika-ajo

Huomasin Netbeansiä tutkiessani uuden mukavan piirteen Mavenin suhteen. Yksi mitä on ollut vähän kiven takana on ollut kyky ajaa mielikuvituksellisempiakin tehtäviä Netbeansistä kuin vain package, install, test. Nämähän löytyvät oikean hiirennapin takaa. Olisi myös kiva pystyä säätämään ympäristömuuttujia ja vaihtamaan profiileja helposti.

Vaivihkaa Netbeansiin onkin hiipinyt tämä toiminta. Jos avaat Maven-projektin asetukset (properties), kohdassa Configurations löytyy erilaisia konfiguraatioita, moodeja, joille voi tehdä eri tehtäviä. Konfiguraatio taas on helposti Netbeansissä vaihdettavissa yläpalkista.

Kun konfiguraatio on valittu aktiiviseksi, voit editoida sen Actioneitä kohdasta Actions samoin projektin asetuksissa. Voit myös editoida ihan oletus-konfiguraation toimintoja suoraan samasta paikkaa.

Netbeans projektin Maven Actions näkymä

Tässä listassa on erilaisia tehtäviä jotka ajavat Maven taskeja. Voit editoida niitä, tyhjentää niiden sisällön, tai lisätä ihan uusia. Joka actioniin liittyy myös mahdollisuus säätää komentoriviparametreja.

Pikavalikko Custom actioneille

Lisäämäsi custom actionit ilmestyvät sitten oikean hiirennapin alle kun projektia klikkaat, kohtaan custom action. Cool stuff? 😉

 

 

Java 8, Eclipse, IntelliJ, Netbeans 8 – kaikki ulkona

Jep, eilen tuli Java 8 release valmiiksi ja jakoon,se lopullinen versio. Se jossa on lambdoja, oletustoteutuksia rajapinnoissa, kokoelmat pistetty uusiksi, päivämääränkäsittelyt pistetty taas kerran uusiksi.Se kauan odotettu vastine Scalalle, josta olen bloggaillut jo aiemmin.

Omalta osalta tässä ei ole mitään järisyttävää, Java 8 release candidatet ovat itsellä pyörineet tuotannossa kera Glassfishin ja MondoDB:n jo kuukausia, ja kehitysympäristössä se on ollut oletuksena pidempään. Kuitenkin vaikuttaa että ihmiset ovat olleet sormi  liipasimella jo hetken, sillä samalla siunaamalla paukahti release versioita kaikista suosituista IDE:istä, ja lukuisia artikkeleita kasiversiosta.

Eli nyt sitä saa. Ja tässä linkityksiä:

Java 8:
http://www.oracle.com/technetwork/java/javase/downloads/index.html

Netbeans 8:
https://netbeans.org/

Eclipse with Java 8 (Luna, Kepler with SR2):
https://www.eclipse.org/downloads/ ja https://wiki.eclipse.org/JDT/Eclipse_Java_8_Support_For_Kepler

IntelliJ IDEA 13.1:
http://www.jetbrains.com/idea/

Eli, kimppuun vain ja hauskaa pitämään! Tieturilla on tietysti myös koulutusta tarjolla, http://www.tieturi.fi/kurssit/kurssi.html?course=85000345

 

 

Sekalaisia Java-huomioita

Paljon on taas tapahtunut maailmalla, mutta ei ole ollut aikaa kirjoitella blogia hetkeen joten ajattelin istua alas ja tällä kertaa vain kirjailla huomioita ylös – ihan ilman lähdekoodeja 😉

JavaOne aika ja paikka on päätetty – itse asiassa jo kuukausi sitten jolloin ilmoittauduin mukaan. Mielenkiintoista kyllä homma menee tällä kertaa samalla kaavalla millä viimeksi – eli OpenWorld on samaan aikaan Moscone Centerissä, ja JavaOne trackin tapahtumat on keskitetty ympäri kaupungin hotelleja Hiltonin ympärille. Tästähän valitettiin viime vuonna aika reippaasti, ilmeisesti ei ole koettu tarpeelliseksi vielä tänä vuonna tehdä asialle mitään. Googlen ja Oraclen välinen oikeusjuttu on vieläkin kesken eli voi hyvin olla että Google loistaa poissaolollaan tänäkin vuonna  – aika sen näyttää, aikaa onneksi vielä on.

Suositus lisävarusteesta on siis iPad tai Android sormitietokone, joilla voi seurata reaaliajassa tapahtumien siirtyilyä eri rakennuksiin. Ja hyvät lenkkarit joilla pystyy juoksemaan nopeasti 😉

Sormitietokoneista puheenollen sain hyppysiini Motorolan Xoom vimpaimen, jossa on hyvin vaikuttavat tekniset speksit, sille on jo ensimmäiset omat softat portattu ja uuttakin koodattu. Xoom on ensimmäinen Honeycomb 3.0 laite, ja lisää on tulossa mm. Samsungilta, HTC:ltä, sekä SonyEricssonilta parikin laitetta erilaisin konfiguraatioin, toisessa mm. kaksiosainen käännettävä näyttö. Nopeasti summaten Xoom hakkaa ipad perheen spekseiltään mennen tullen, mutta tuttuun tapaan palveluita ei ole mietitty samaan tapaan, eli vastaavanlaista helppoa tapaa tuhlata rahojaan verkossa kuin iTunes kauppa ei ole, vastaavanlaista integraatiota pöytäkoneen musakirjastoihin ei ole. Nokkela nörtti tietysti imuttelee mp3 biisit ihan muualta ja nipsauttelee ne Androidiin copy-pastella, tai hankkii softan joka peräti synkronoi koneet yhteen, mutta peruskäyttäjälle iPad nyt vain on paljon automaattisempi ja kätevämpi – Applen perinteiseen tapaan. Samoin ainakin viimeksi tarkastellen Android marketplace ei luokittele softia samalla lailla fiksusti kuin Applen kauppa, että sieltä saisi erikseen näkyviin sormitietokone-optimoidut softat ja erikseen kännykkäsoftat jotka saattavat pyöriä sormitietokoneessa. Se on itsellä ykkösenä toivelistalla, koska monet kännykälle suunnitellut softat näyttävät ihan karmealta Xoomissa, vaikka toimivatkin.

Java EE 7 speksit on lähetetty mietittäväksi ja yksityiskohtien hiominen alkaa. Java SE 7 julkaistaneen kesän tienoilla – developer preview on jo vapaasti ladattavissa uskaliaille, itse olen sitä pyöritellyt jo hetken koneessani ja tutustunut uusiin piirteisiin ja työkaluihin. Java SE 8:han on aikataulutettu ensi vuodelle, eli piukeasti tulee uutta tiiviissä tahdissa..

Netbeans 7 valmistui, sen tärkein piirre on tuki Java SE 7:lle, sekä Developer Preview:lle että myöhemmin ihan aidolle tavaralle. Tämä tuleekin tarpeeseen koska kieli ja syntaksi itsessään jälleen muuttuu. Aika paljon muutakin on mahdutettu mukaan, mm. parannuksia Swing puolelle jälleen kerran, esim. GridBagLayout managerille on nyt oma suunnitteluohjelmansa. Samoin parempi tuki Oracle Weblogic serverille suoraan sisäänrakennettuna (ei suuri yllätys ;), parempi tuki Glassfish 3.1:lle, Maven 3:lle, ja lopulta saatiin JUnit jälleen takaisin – sehän poistui lisenssiteknisistä syistä Netbeansistä, mutta nyt asennuksen yhteydessä tulee uusi ikkuna ja kun sen sisältämän lisenssin hyväksyy ,junit asentuu taas 😉 HTML 5 on trendikkäästi paremmin tuettuna editoreissa, mm. selaineroja on näissä huomioitu. Viime aikoina olen kovasti hääräillyt suorituskykyasioiden parissa, ja tässä on tietysti taas parannettua profiloijaa sun muuta mukavaa tuloillaan.

Että tällaista tällä viikolla, huh 😉