Angular SPA-portlet, avaussivun Javascript

Angular-SPA-portletin avaavan JSP-sivun Javascriptilla on tärkeä rooli, sillä siinä alustetaan globaalit Javascript-muuttujat.

Mahdollisimman suuren osan Javascript-koodista pitäisi olla täysin yleiskäyttöistä. Tämä tarkoittaa lyhyitä ns. utility-metodeja, joilla ei ole sivuvaikutuksia. Näitä tiedostoja kannattaa kerätä yrityksessä ikäänkuin koodauksen pääomaksi. Koetellun yleiskäyttöisen koodin suhteellisen osuuden kasvu sovelluksen koodissa nostaa väistämättä sovelluksen laatua. Jo pyrkimys tehdä yleiskäyttöistä koodia nostaa koodin laatua ja ylläpidettävyyttä.

Osa Javascript-koodin tiedoista kannattaa kuitenkin sijoittaa globaaleihin muuttujiin jo koodin joustavuuden takia. Avaava JSP-sivu on ainoa paikka SPA-portletissa, jossa JSP-sivun Java-koodin muuttujia voidaan edelleen sijoittaa Javascript-muuttujiin. Seppien ohje on siis: sijoita kaikki globaalit Javascript-muuttujien määritykset avaavalle JSP-sivulle.

Javascript tiedostot ladataan portletin määritysten (liferay-portlet.xml) mukaisesti, silloin kun portletin ensimmäinen sivu avataan. Kukin JSP-sivu ladataan vain kerran, juuri ennenkuin sitä käytetään.

Javascript koodin muuttujien nimeäminen pitää miettiä aina tarkasti, ei vain SPA-portleteissa. Tämä on tarpeen, koska kaikki portaalisivun portletit jakavat kaiken JSP-sivun Javascript-koodin. Jokaisen portletin lataamisen yhteydessä ladataan portlettiin määritellyt Javascript-tiedostot.

Jos JS-tiedostot sisältävät samannimisiä muuttujia tai funktioita, viimeinen lataus ylikirjoittaa aiemman. Samanniminen muuttuja kahdessa eri portletissa viittaa siis samaan! Tämän miinan välttämiseksi sepät käyttävät seuraavassa kuvattua rakennetta. Määrittele avaavalle JSP-sivulle, script-lohkoon ensimmäiseksi, metodi getNamespace:

function getNamespace()
{

var ns = {};

// common portlet variables:
ns.namespace = ””;
ns.contextPath = ””;

// Ajax-tasks:
ns.selectAllUrl = ””;
ns.selectRowUrl = ””;
….

// AngularJS-modules:
ns.appMod = angular.module(ns.namespace + ”appMod”, [ ”ngRoute” ]);

// Other global variables:
….

return ns;

} // getNamespace

Näin kaikki globaalit muuttujat on kääritty yhden tietueen jäseniksi. Nyt tämä tietue nimetään portletin nimellä kyseistä metodia kutsuen, eikä nimiavaruuksien konflikteja tapahdu:

var gsPortletinNimiNS = getNamespace(); // uniikki nimi globaalille muuttujalle

Nyt kaikki globaalit muuttujat ovat piilossa muuttujassa gsPortletinNimiNS. Huolehdit vain, että millään saman portlettisivun vastaavalla muuttujalla ei ole samaa nimeä, niin nämä määritellyt eräänlaiset nimiavaruudet, ovat uniikkeja.

Avaavalla JSP-sivulle ei tulisi laittaa muuta Javascript-koodia, vaan se pitäisi sijoittaa erillisiin Javascript-tiedostoihin, jotka sitten liitetään mukaan liferay-portlet.xml:n määrityksissä.

Miten globaaleja muuttujia käytetään js-tiedostoissa?

Erillisissä Javascript-tiedostoissa (*.js), jotka ovat portlettikohtaisia (eivät siis pelkkiä ns. utility-metodeja sisältäviä tiedostoja), nämä globaalit muuttujat otetaan käyttöön seuraavalla tavalla. Tarkoituksena on välttää pitkien nimiavauuksien kirjoittamista ja halutaan vakioida muuttujien nimet. Tulostus sivun alussa auttaa ymmärtämään tiedostojen latausta. Js-sivun alkuun kaksi riviä:

var ns = gsPortletinNimiNS; // siirto helppoon lokaaliin muuttujanimeen
console.log(”javascript-tiedoston-nimi: ” + ns);

Nyt kyseisssä tiedostossa voidaan käyttää globaalien muuttujia aina samalla lyhyellä tavalla Javascript-koodissa, lokaalin muuttujan (ns) kautta esim.:

var portletin_nimiavaruus = ns.namespace;

Se että globaali namespace sijoitetaan paikalliseen muuttujaan Javascript-tiedoston alussa, tarkoittaa, että kyseinen JS-tiedosto on portlettikohtainen, ei yleinen. Seuraavassa blogissa menemme tarkemmin Angularin käyttöön portletin JSP-sivun Javascriptissa.