Byggebasen Javascript

Transkript

1 EG Data Inform Byggebasen Javascript Implementering af ansvarsperioder og produktdata på eget site Jens Karsø 2013

2 Indhold Byggebasen javascript-plugin til DB12-site... 2 DB12-site kommunikationsmodel... 2 Skabelon... 2 Download javascript... 2 Javascript:ProdSoeg.js + forside HTML... 3 Javascript:restAPI.js... 4 Søgning trin Eksempel på dannelse af en søgning:... 5 Søgning trin Visning af produkter... 8 Proxy.Search... 8 Produktdata og javascript... 9 Eksempel:... 9 Bemærk: Bilag 1: OBS: TUN har skiftet navn til Danske Byggecentre derfor kaldes det unikke nr, der betegner en vare, ikke længere for tunnr. I stedet kaldes det for DB varenr. Af hensyn til kapabilitet med eksterne systemer vil tunnr stadig benyttes i kode.

3 Byggebasen javascript-plugin til DB12-site På DB12-sitet benyttes der udelukkende javascript til kommunikation med byggebasens data. Disse javascript-metoder er der mulighed for at implementere i sit eget site. Følgende vejledning er en beskrivelse af hvordan DB12-sitet har implementeret javascripts. Derfor er alle moduler og scripts, der stilles til rådighed, primære formål at opfylde DB12-sitets behov. Der kan derfor komme ændringer af javascript, lagt på serveren og ændringer af de tilhørende webservices. Vi opfordrer til at I sender kontaktinfo til byggebasen@eg.dk ved implementering på eget site, således at der kan sendes advisering ved ændringer. Det anbefales at udvikler downloader javascripts, studerer dem og implementere dem på eget site. DB12-site kommunikationsmodel prodsoeg.js Byggebasen RESTApi.js Ovenstående model forsøger at beskrive de 2 javascripts og deres indbyrdes opgaver. prodsoeg.js restapi.js Holder styr på visning af indhold og sammenfatte oplysninger til kald. Hvert kald til til RESTApi skal ledsages at en slutmetode (endmethod) Sørger for kald til byggebasens web-service i REST. restapi.js holder også styr på aktuelle søgning. Kald til byggebasen kan foregå synkront eller asynkront. Scriptet indeholder også en meget simpel template generator. Al kommunikation mellem server, moduler og hjemmeside er objekter formateret i JSON. Dvs. at det de kan benyttes direkte i javascripts uden yderligere omformning. Skabelon På adressen: findes en renset skabelon, som kan benyttes til baggrund for videre udvikling af egen implemntering. Download javascript Javascript kan downloades her

4 Javascript:ProdSoeg.js + forside HTML Før javascriptene kan benyttes skal de initialiseres på siden, hvor de skal benyttes: <html> <head> <title> </title>  <script type="text/javascript" language="javascript" src="scripts/prodsog.js"></script> <script type="text/javascript" language="javascript" src="scripts/restapi.js"></script>  <script type="text/javascript" language="javascript" src="scripts/jquery js"></script> <script type="text/javascript" language="javascript" src="scripts/jquery-ui custom.min.js"></script> function onload() { init(); function init() { proxy.restpath = ' objlib.restapi = RESTLib; </script> </head> <body onload= javascript:init(); > </body> </html> Ovenstående forbinder proxyen i respapi til webservicen og forbinder objlib i ProdSog til restapi Bemærk: Stierne for scripts/prodsoeg.js og scripts/restapi.js er i forhold til eget site. Hvis der ønskes at henvise til byggebasens server skal URL indtastes her. På forsiden er der defineret en række felter som fra start er tomme, men skal fyldes med indhold. Felterne skal døbes vha ID Følgende felter er på DB12-sitet: <div id="ptvgtree"></div> - Felt til dannelse af træet for varegruppe/produkttype <div id="divmain"></div> - Felt til visning af Leverandører <div id="divstatus"></div> - Felt til visning af aktuelle status (fejl m.m.)

5 På eget site er navne valgfrie, men javascriptet skal tilrettes med ændrede navne. En søgning foregår typisk 2 trin: 1. På bagrund af søgemetode og søgetekst dannes der Varegruppe/Produkttype træet. 2. Ved klik på en produkttype foretages søgning på leverandøre der tilmeldt udvidet garanti og som har vare i produkttypen Ved hvert trin i søgningen, opdateres der en overskrift der opsummerer aktuelle søgning. Javascript:restAPI.js Dette modul har 3 hovedopgaver (klasser): 1. Proxy Danner en proxy til kommunikation til serveren. Samt husker seneste søgning. 2. RESTLib Håndterer søgninger og kald til proxyen. 3. Templ Template håndtering i HTML. Søgning trin 1 Der er 4 forskellig slags søgninger på DB12. (se figur) BD varenr Søger direkte på et BD varenr og er den eneste søgning der også viser et produkt. Varegruppe og ProduktType Søger i hele varegruppeplanen Producent Søger på producenter og leverandører.

6 Eksempel på dannelse af en søgning: Når en bruger begynder at indtaste en søgning i søgefeltet. Er tekstboksens HTML udformet på flg. måde. <input type="text" id="tbsog" onkeyup="javascript:objlib.setuvisible(); RESTLib.sogProdukt(objLib.getTunUser(),objLib.getSogeMetode(),objLib.getSogeTekst(),objLib.e ndproduktsog);" /> <input type="radio" id="rdtunnr" name="sogemetode" value="tunnr" />Tunnr <input type="radio" id="radio2" name="sogemetode" value="varegruppe" />Varegruppe <input type="radio" id="radio6" name="sogemetode" value="producent" checked="checked" />Producent <input type="radio" id="rdprodukttype" name="sogemetode" value="produkttype" />ProduktType <a class="knap" onclick="javascript: objlib.setuvisible(); RESTLib.sogProdukt(undefined,objLib.getSogeMetode(),objLib.getSogeTekst(),objLib.endProduktS og,false);">søg</a> For hver gang en bruger trykker en tast bliver metoden sogprodukt i ProdSoeg.js kaldt med 3 parametre tilknyttet: 1. Søgemetode (Producent) 2. Søgetekst (tekstboks) 3. Slut metode ved svar fra server. Søgemetoden tages fra valgte input-boks valuefelt. Derfor skal de have flg. navne: Tunnr (bemærk at der benyttes den gamle betegnelse) Varegruppe Producent ProduktType Selve sogprodukt ser således ud: sogprodukt: function (tunuser, sogemetode, soegestreng, endmethod) { proxy.search.soegstreng = soegestreng; proxy.search.sogemetode = sogemetode; if (soegestreng.length > 3) { var obj = JSON.stringify({ tunuser: tunuser ) + JSON.stringify({ sogemetode: sogemetode ) + JSON.stringify({ SoegStreng: soegestreng ); proxy.call("post", "SogProduktREST/", true, endmethod, obj);

7 Bemærk at der i if sætningen først begyndes at søge, når der indtastet 4 tegn. Sidste linje i metoden kalder proxyen asynkront ved parameteren true. Parameteren endmethod angiver hvilken metode der skal kaldes, når svaret modtages fra serveren. endmethod var er angivet til at kalde metode endproduktsog i prodsoeg.js og ser således ud: endproduktsog: function (result) { var ud = ''; var ni = document.getelementbyid('ptvgtree'); objlib.clearallchilds('ptvgtree'); objlib.renderheader(); if (result!= null && result._varegrupper!= undefined) { for (b = 0; b < result._varegrupper.length; b++) { var elem = tmpl("item_varegruppe", result._varegrupper[b]); for (a = 0; a < result._varegrupper[b]._produkttyper.length; a++) { result._varegrupper[b]._produkttyper[a].vgnr = result._varegrupper[b]._nr; result._varegrupper[b]._produkttyper[a].vgnavn = '\'' + result._varegrupper[b]._navn + '\''; result._varegrupper[b]._produkttyper[a].ptnavn = '\'' + result._varegrupper[b]._produkttyper[a]._navn + '\''; elem += (tmpl("item_produkttype", result._varegrupper[b]._produkttyper[a])); ni.innerhtml += elem; objlib.sethtml('ptvgtree', ud); Obs: Ovenstående er en forsimplet kode og håndtere kun varegruppesøgning. Se ProdSog.js for den endelige implementering. Proxyen sørger automatisk for at kalde en angivet endmethod og leverer serverens søgeresultat i metodekaldet i parameteren result Linjen: var elem = tmpl("item_varegruppe", result.result._varegrupper[b]); bruger en template kaldet item_varegruppe til at danne de overordnede varegrupper i søgningen. Linjen: elem += (tmpl("item_produkttype",result.result._varegrupper[b]._produkttyper[a])); Danner de tilhørende produkttyper for hver varegruppen ud fra HTML-template kaldet item_produkttype Inden template bliver behandlet, bliver result objektet modificeret en anelse, af hensyn til dannelse af toplinjen (aktuelle søgning) og begrænsninger i javascript. (brug af anførselstegn og appostroffer). Template for dannelse af en linje af produkttype, ser således ud:

8 <script type="text/html" id="item_produkttype"> <span class="ptdiv" id="<#=obj._nr#>_<#=obj.vgnr#>" onclick="javascript:objlib.vgclick(<#=obj._nr#>,<#=obj.vgnr#>, <#=obj.vgnavn#>, <#=obj.ptnavn#>, '<#=obj._nr#>_<#=obj.vgnr#>');" ><span class="ptdiv2"><#=obj._navn#></span><span class="ptdiv3"><#=obj._nr#></span></span> </script> Søgning trin 2 Efter dannelsen af varegrupper og produkttyper klikkes der på en produkttype for at søge efterleverandører og/eller producenter I templaten item_produkttype bliver der indsat et span-objekt med en tilhørende onlclick event, som kalder metoden vgclick: vgclick: function (pt, vg, vgnavn, ptnavn, id) { proxy.search.varegruppenavn = vgnavn; proxy.search.produkttypenavn = ptnavn; objlib.setheader(vg, pt); var result = objlib.restapi.soglevproduk(undefined, pt, vg, objlib.getsogemetode(), objlib.getsogetekst(), objlib.endvisleverandoerer); Ovenstående opdatere search-objektet med aktuelle søgning og kalder soglevprodukt. SogLevProdukt kalder serveren og danner indhold til templaten item_udv_lev hvor leverandør vises Templaten item_udv_lev ser således ud: <script type="text/html" id="item_udv_tmpl"> <div style="clear:both; height:40px;width:790px;"> <div class="col2-1header-firma" > <#=obj.navn#> </div> <div class="col2-1header-adresse"> <#=obj.adresse#> </div> <div class="col2-1header-postnr-by"> <#=obj.postnr#> <#=obj.by#> </div> <div class="col2-1header-tlf"> <#=obj.telefonnr#> </div> <div class="col2-1hehader-ansvarsperiode"> <#=obj.ansvarsperiod#> </div> <div class="col2-1header-sevarer"> <span class="levdiv" id="<#=obj.tunbruger#>" onclick="javascript:objlib.levclick(<#=obj.tunbruger#>, <#=obj.produkttypeid#>, <#=obj.varegruppeid#>, objlib.getsogetekst(), <#=obj.tunbruger#>);">se varer</span> </div> <br/>

9 </div> </script> Visning af produkter Ved søgning direkte på et BD varenr vises produktet vha flg: danproduktvisning: function (result) { var elem = document.getelementbyid("divmain"); if (elem.firstchild!= null) { elem.removechild(elem.firstchild); objlib.clearallchilds('divmain'); var newdiv = document.createelement('div'); for (c = 0; c < result.getproduktsogresult.result.length; c++) { newdiv.innerhtml += tmpl("item_tmpl", result.getproduktsogresult.result[c]); elem.appendchild(newdiv); Proxy.Search Objekt. Til håndtering af aktuelle søgning: Indehold oplysninger for aktuel søgning og indstillinger for antal produkt pr side/visning. Search: { lev: null, vg: null, pt: null, sogemetode: null, soegstreng: null, prpage: 15, currentpage: 1, htmlid: null, Aktuelle leverandørnummer Aktuelle varegruppenummer Aktuells produkttypenr Default 15 produkter pr side (udfaset) Aktuelle side (udfaset) Støtte element varegruppenavn: null, produkttypenavn: null, leverandoernavn: null, resultprod: null, resultendmethodprod: null, resultpages: null, resultendmethodpages: null Antal produkter i søgningen Slutmetode der skal danne visning Antal sider (resultprod / prpgae) (udfaset) Slutmetode der skal danne sidebladring

10 Produktdata og javascript På sitet er det muligt at søge REACH, CE-Mærkning og andre udvalgte katalogdataemner. I bilag 1 er der vedhæftet et kodeeksempel, som udfører en søgning (se billede). Kodeeksemplet kan også downloades på adressen: Som det fremgår af eksemplet, benyttes restapi.js fra søgningen på udvidet ansvar på byggematerialer. Eksemplet beskriver de 6 trin der udføres for at danne en komplet visning på Proxy og angivelse af adresse på service sættes op i funktion init function init() { proxy.restpath = ' Sogning.Tunnr = ; FindesREACH(Sogning.Tunnr); Bemærk at på addressen ' forbeholdt produktdatadata og en hyppigere opdatering. Det anbefales at benytte ' Samt læse yderlig information på Eksempel: Eksemplet beskriver 1. trin. Her dannes et sog object indeholdende tunnr der ønskes forespurgt på. Webservicen kaldes på metoden FindesReach gennem proxyen, med angivelse af metoden EndFindesReach, som ønskes kaldt når webservicen returnere sit svar. /* 1. trin */ function FindesREACH(tunnr) { AddText("1. trin: Undersøger om der findes reach-information","h2"); var sog = JSON.stringify({ tunnr: tunnr ); proxy.call("post", "FindesReach/", true, EndFindesReach, sog); function EndFindesReach(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); if (result.findesreachresult == true) { SogTunnr(Sogning.Tunnr);

11 Bemærk: Trin 5 og 6 omhandler visning af produkt- og leverandørinformationer. Ønskes der en søgning hvor man også kan søge på EAN (stregkode). Anbefales det at man flytter trin 5 op til at være trin 1 da denne søgning også søger på EAN. Således får man også BD varenr (TUNNr) der skal bruges i de næste trin.

12 Bilag 1: Kode eksempel til produktdata: <!DOCTYPE html> <html xmlns=" <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" lang="javascript" src=" <script> var Sogning = { Tunnr: null, Dato: null function onload() { init(); function init() { proxy.restpath = ' Sogning.Tunnr = ; FindesREACH(Sogning.Tunnr); function AddText(text, tag) { var elem = document.getelementbyid('main'); if (tag!=undefined) elem.innerhtml += "<" + tag + ">" + text + " </" + tag + ">"; else elem.innerhtml += "<br />" + text; /* 1. trin */ function FindesREACH(tunnr) { AddText("1. trin: Undersøger om der findes reach-information","h2"); var sog = JSON.stringify({ tunnr: tunnr ); proxy.call("post", "FindesReach/", true, EndFindesReach, sog); function EndFindesReach(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); if (result.findesreachresult == true) { SogTunnr(Sogning.Tunnr); /* 2. trin */ function SogTunnr(tunnr) {

13 AddText("2. trin: Findfoldere med reach-information på tunnr", "h2"); var sog = JSON.stringify({ tunnr: tunnr ); proxy.call("post", "Folders/", true, EndSogTunnr, sog); function EndSogTunnr(result) { Sogning.Dato = result.foldersresult[0].name; AddText("JSON object:", "b"); AddText(JSON.stringify(result)); FilesInFolders(result.FoldersResult[0].FullName); /* 3. trin : filer i folder */ function FilesInFolders(Folder) { AddText("3. trin: Leder efter filer i folder:", "h2"); var sog = JSON.stringify({ Folder: Folder ); proxy.call("post", "FilesInFolder/", true, EndFilesInFolders, sog); function EndFilesInFolders(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); AddText("<br/><br/>Test resultat:", "b"); AddText("<a href=\" + Sogning.Dato + "&tunnr=" + Sogning.Tunnr + "&file=" + result.filesinfolderresult[0].name + "\"/>Klik - for REACH</a>"); getandreemner(sogning.tunnr); /* 4. trin : andre emner */ function getandreemner(tunnr) { AddText("4. trin: Leder efter yderligere katalogdataemner:", "h2"); var sog = JSON.stringify({ tunnr: tunnr ); proxy.call("post", "getreachkatalogemner/", true, endgetandreemner, sog); function endgetandreemner(result) { // document.writeln(json.stringify(result)); AddText("JSON object:", "b"); AddText(JSON.stringify(result)); AddText("<br/><br/>Test resultat:", "b"); for (var a = 0; a < result.getreachkatalogemnerresult.length; a++) { switch (result.getreachkatalogemnerresult[a].id) { case 22: AddText("<a href=\" produktdata.danskebyggecentre.dk/visemne.aspx?file=ce_corkcomfort.pdf&dato=filarkiv&tunnr= &type=23\"/>Klik - for CE-mærkning </a>"); default: AddText("<a href=\" + result.getreachkatalogemnerresult[a].tunnr + "&emneid=" + result.getreachkatalogemnerresult[a].id + "\"/>Klik - for " + result.getreachkatalogemnerresult[a].emne + " </a>"); getprodukt(sogning.tunnr);

14 /* 5. trin : hentprodukt */ function getprodukt(tunnr) { AddText("5. trin: Henter produkt:", "h2"); var sog = JSON.stringify({ tunnr: tunnr ); proxy.call("post", "getsingleprodukt/", true, endprodukt, sog); function endprodukt(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); getleverandoer(result.getsingleproduktresult.tunbrugernr); /* 6. trin : Henter leverandør oplysninger */ function getleverandoer(levnr) { AddText("6. trin: Henter producentinformationer:", "h2"); var sog = JSON.stringify({ levnr: levnr ); proxy.call("post", "getleverandoer/", true, endleverandoer, sog); function endleverandoer(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); </script> </head> <body onload="init();"> <h1>produktdata - test</h1> <div id="main"> </div> </body> </html>