Microsemi AN1256 Web Programistoj Apliko

Enkonduko

JSON (JavaScript Object Notation) estas malferma-normo file formato kiu uzas homlegeblan tekston por interŝanĝado de datumoj. Ĝi estas ofta datumformato uzata por nesinkrona retumilo/servila komunikado.
Por la nova web paĝa dezajno, JSON-formato povas esti anstataŭaĵo por la originala stilo AJAX. Komparu al AJAX, uzante JSON faras la Web efektivigo pli facila kaj pli simpla. La programisto nur bezonas koncentriĝi web paĝa dezajno kaj la Web efektivigo de prizorganto povas esti preterlasita ĉar JSON-alirmetodo jam estas subtenata en ĉiu WebStaX-programaraj moduloj.
Ĉi tiu dokumento deklaras la programistojn gvidilon por la programaro inĝeniero kiu bezonas evoluigi la Web paĝo per JSON. La detalaj proceduroj kaj ekzamples ankaŭ inkluzivitaj en la sekvaj sekcioj.

Fluo de aliro al datumoj JSON

Finiteview
Jen la JSON-datumfluo, kiun HTTP-konekto estas komencita de la kliento (retumilo). La HTML-tabelo estas kreita dinamike laŭ la ricevitaj JOSN-datumoj de la servilo (DUT).

Figuro 1. La alirfluo inter kliento kaj servilo

Peto/Respondo JSON-datumoj
La JSON-peta pako baziĝas sur HTTP-peta afiŝa metodo kaj la enhavo devas sekvi la MSCC-JSON-formaton.

• Petu JSON-sintakso:{“metodo”:” ","params":[ ], "id:"jsonrpc"}
• Responda JSON-sintakso: {“eraro”: ,"rezulto": , "id:"jsonrpc"}

La sekvaj momentfotoj montras la JSON-enhavon inter la retumilo kaj DUT.

Figuro 2. Momentfoto de HTTP-peto de kliento

Figuro 3. Momentfoto de HTTP-respondo de servilo

MSCC JSON-specifo
Por akiri la plenajn informojn pri JSON inkluzive de la metodo, parametro, priskribo kaj ktp. Tajpu "http://". /json_spec” sur via retumila adresbreto. Estas alia alirmetodo per JSON-metoda nomo "jsonRpc.status.introspection.specific.inventory.get", ĝi estas uzata por specifa metodo.

Figuro 4. Momentfoto de JSON-specifo web paĝo

Web kadro

La Web kadro en WebStaX-programaro estas bazita sur malfermfonteca MooTools. Ĝi estas kolekto de JavaScript-servaĵoj kun MIT-licenco. (http://mootools.net/license.txt) La menubreto kaj plejparto de web paĝoj baziĝas sur la kadro. Ambaŭ AJAX kaj JSON-algoritmo jam estas integritaj en ĝiaj utilecoj.
Cetere, WebStaX-programaro disponigas la aliajn ilojn kiuj estas utilaj por la JSON web paĝa dezajno.

• json.js - Uzu por transdoni/ricevi la dinamikajn datumojn kun JSON-sintakso.
• dynforms.js - Uzu por krei la HTML-tabelon dinamike.
• validigi.js - Uzu por la validigo de HTML-formularo.

La plenaj JavaScript-bibliotekoj troviĝas sub la fonta arba dosierujo: webstax2\ vtss_appl\web\html\lib.

Gvidlinio por JSON Web paĝa dezajno

Ĉi tiu sekcio gvidas kiel desegni a web paĝo bazita sur MSCC JavaScript-bibliotekoj. Ni uzas la Spegulon tutmondan agordita web paĝo kiel la eksample tie ĉi. La nesinkrona komunikado baziĝas sur HTTP JSON-alira metodo kaj ĉiuj tutmondaj agorditaj parametroj estas listigitaj en unu dinamika HTML-tabelo.
La web paĝa aranĝo estas listigita malsupre kaj la plena fontkodo troviĝas sub la fonta dosierujo: webstax2\vtss_appl\spegulo\html\mirror_ctrl.htm. Por esti pli tipa web paĝoj referenco, vidu la apendico sekcio.

Spegulo& RMirror Konfikrotabelo

Figuro 5. Example de tutmonda agordita tabelo

Redakti Web paĝo

HTML-kapo
Inkluzivi la JS-bibliotekojn kiuj bezonis en la HTML tag.

Komencu la dinamikan tabelrimedon

• Kiam la HTML-dokumento estas preta, voku DynamicTable() por pravalorigi la dinamikan tabelrimedon.
• La DynamicTable() estas uzata por krei la dinamikan tabelon post ricevi la JSON-datumojn.
• Ĝi tiam vokos requestUpdate por komenci la JSON-koman fluon.

1. fenestro.addEvent ('dompreta', funkcio () {
2. // Kreu formularon kun tabelkorpo por ricevi/sendi JSON-datumojn
3. miaDynamicTable = nova DynamicTable ("miaTableContent", "config","plusRowCtrlBar");
   4
4. peto Ĝisdatigi();
5. });

Peto/Respondo JSON-datumoj

• Kiam la HTML-dokumento estas preta, uzu requestJsonDoc() por sendi la JSON-peton "mirror.config.session.get" por ricevi informojn pri la agorditaj sesioj.
• Post kiam la JSON-datumoj por "mirror.capabilities.get" estas ricevitaj, la revokfunkcio requestUpdate() estos prilaborita. La funkcio requestUpdate tiam vokos "mirror.config.session.get" por ricevi la nunan agordon. Kiam la aktuala agordo estas ricevita, la funkcio processUpdate estas vokita por konstrui la montrotan tabelon.

1. funkciopeto Ĝisdatigi ()
2. {
3. // Restarigi tabelenhavon
4. miaDynamicTable.restore();
   5
5. // Ĉi tiu tablo du JSON-datumoj.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

Prilaboru la ricevitajn JSON-datumojn

• La funkcio processUpdate() estas uzata por aranĝi la dinamikan tabelon post ricevi la JSON-datumojn.
• La addRows() estas uzata por aldoni tabelvicojn. myDynamicTable.update() aranĝo la
  HTML-tabelo laŭ la datumoj en tabelvicoj.

1. funkcio processUpdate (recv_json, nomo)
2. {
3. // Ignoru la procezon se neniuj datumoj estas ricevitaj
4. se (!recv_json) {
5. alert ("Akiri dinamikajn datumojn malsukcesis.");
6. reveni;
7. }
8. // Konservu la ricevitajn JSON-datumojn
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Aldonu tabelvicojn
11. var table_rows = addRows (recv_json);
12. miaDynamicTable.addRows(tabulo_vicoj);
14. // Ĝisdatigu ĉi tiun dinamikan tabelon
15. miaDynamicTable.ĝisdatigo();
17. // Refreŝigi tempigilon
18. var aŭtorefreŝigo = document.getElementById(“aŭtomata refreŝigo”);
19. if (aŭtomata refreŝigo && aŭtomatefreŝigo.kontrolita) {
20. se (tempigiloID) {
21. clearTimeout (tempigiloID);
22. }
23. timerID = setTimeout ('peto Ĝisdatigo ()', agordojRefreshInterval ());
24. }
25. }

Aldonu tabelvicojn

• En la funkcio addRows(), ni uzas la formaton JSON por plenigi ĉiun tutmondan agordita parametro en la tabelvico.
• Ĉiuj HTML-kampoj estas listigitaj en la JSON-tabelo ("table_rows") kaj la sintakso de tabelkampo estas sube.

Sintakso:
tablo_vicoj:[ , ,… ] : { , ,… }
: {“tipo”: , "params":[ , , …, ]}

• En ĉi tiu kazo, ĉiu vico havas kvin kampojn: "Session ID", "Mode", "Type", "VLAN ID" kaj "Reflector Port" Ekz.ample,

ID de sesio (Noma kampo: int32_t)	1 (Identigilo de la spegula sesio)
Reĝimo (Noma kampo: vtss_bool_t)	vera (Signifante, ke la spegula sesio estas ebligita)
Tajpu (Noma kampo: enumerado {spegulo, rMirrorSource, rMirrorDestination}	RMspegula Fonto (ĉi tio estas la fonto de fora spegula sesio
VLAN ID (Noma kampo: uint16_t)	200 (la vlan uzata por spegulado)
Reflector Haveno (Noma kampo: vtss_ifindex_t)	Gi 1/1 (La haveno al kiu la spegula trafiko estas sendita

• La myDynamicTable.addRows() konvertos la JSON-datumojn al HTML-formato kaj eligos la HTML-tabelon.

1. funkcio addRow (ŝlosilo, valo)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Nenio”, none_interface_text = “NENIU”;
4. var tunnel_mode_sufix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var vico = {kampoj:[
6. {tipo:”ligo”, params:[“cr”, “mirror.htm?session_id=" + klavo, ŝlosilo]},
7. {tipo:”teksto”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {tipo:”teksto”, params:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {tipo:”teksto”, params:[val.Type == “spegulo” ? “-“:
   val.RMirrorVlan, “c”]},
10. {tipo:”teksto”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-”, “c”]}
11. ]};
12. reveni vicon;
13. }
14. funkcio addRows (recv_json)
15. {
16. var vico, malplena_colspan = 7;
17. var table_rows = new Array ();
18. // Aldonu tabelkapon
19. addHeader (tabulo_vicoj);
20. // Aldonu ununuran vicon
21. Object.each (recv_json, funkcio (registro) {
22. tablo_vicoj.push(addRow(record.key, record.val));
23. });
24. redoni tablo_vicojn;
25. }

Web helppaĝo
Por la web helppaĝa dezajno, la helppriskribo povas rilati al la JSON-specifo, ke la priskriba teksto povas kongrua kun JSON-produktaĵo kaj helpas redukti la redundajn priskribojn. EkzampLa ĉi tie estas prenita de dhcp6 relajsa agordo.

Hiper-ligo en la fonto file
Asignu la helpon file loko en sia fonto file HTML tag. La fiksa variablo nomo "help_page" estas uzata por la web helppaĝa tasko.

2. // Helppaĝo magio
3. var help_page = "/help/help_xxx.htm";

Ĝisdatigu HTML-kampan priskribon el JSON-specifo

• Uzu aŭ HTML tag por deklari la HTML-tabelpriskribon kaj doni unikan ID por la tag.
• Kiam la HTML-dokumento estas preta, voku loadXMLDoc() por akiri la tutan JSON-specifon aŭ ricevi la specifan metodon priskribon per JSON-metoda nomo "jsonRpc.status.introspection.specific.inventory.get".
• La processTableDesc() estas uzata por ĝisdatigi la priskribon de la tabelo kaj processUpdate() estas uzata por ĝisdatigi la priskribon de la tabelparametro.
• En processUpdate(), voku updateTableParamsDesc() por ĝisdatigi la JSON-elementojn, kiuj kongruas kun la specifaj elementnomoj.
• Ĝisdatigu la aŭ tag interna HTML laŭ la elemento priskribo.

2. /* Ĝisdatigu HTML-priskribajn kampojn */
3. funkcio processTableDesc(req) {
4. if (!req.responseText) {
5. reveni;
6. }
7. var json_spec = JSON.decode (req.responseText);
8. // Ĝisdatigu tabelpriskribon
9. $(“TableDesc”).innerHTML = getJsonSpecElement (json_spec, “grupoj”, “dhcp6_relay.config.vlan”).priskribo;
10. }
11. /* Ĝisdatigu priskribon de HTML-tabel parametro */
12. funkcioprocezoĜisdatigi(recv_json) {
13. // Ĝisdatigu priskribon de tabel parametro
14. var param_names = [
15. {
16. "alias": "Interfaco",
17. "tipo": "vtss_ifindex_t",
18. "nomo": "vlanInterfaco",
19. "sufikso": "."
20. },
21. {
22. "alias": "Relajsa Interfaco",
23. "tipo": "vtss_ifindex_t",
24. "nomo": "relayVlanInterface",
25. “sufikso”: “. La id de la interfaco uzata por elsendi."
26. },
27. {
28. “alias”: “Stafeto-Celo”,
29. "tipo": "mesa_ipv6_t",
30. "nomo": "stafeto_destino",
31. “sufikso”: “. La IPv6-adreso de la DHCPv6-servilo al kiu petoj estos elsenditaj. La defaŭlta valoro 'ff05::1:3' estas 'iu ajn DHCP-servilo'."
32. }
33. ];
34. updateTableParamsDesc ("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Akiru JSON-specifon */
37. window.addEvent('domready', funkcio () {
38. loadXMLDoc ("/json_spec", processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hiper-ligo en menubreto

• La HTML fontkodo de menubreto estas generita de file webstax2\vtss_appl\web\ menu_default.cxx.
• Redaktu la erojn en ĉi tio file por la Web paĝo hiper-ligilo.

1. #se difinita (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEMO ("Relajso,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTO
Rimarku, ke la nombro de spacsignoj en ITEM (""), kiu estas uzata por decidi la grupnivelon en la menubreto. En ĉi tiu kazo, ĉiuj web paĝoj estas sub la grupo "DHCPv6".

Figuro 6. Ekzample de tutmonda agordita tabelo

Apendico

Tipa web paĝoj

Estas pluraj tipaj web paĝoj povas esti uzataj por la referenca dezajno. Unu plia ekzampLa montrota ĉi tie estas la agordo de ununura spegula sesio trovita en vtss_appl\mirror\html\mirror.htm.
La web paĝo provizas la detalan agordon por ununura spegula sesio. Ĉiuj agorditaj parametroj estas listigitaj.

• Alklaku la butonon "Konservi" por apliki la nunan agordon.
• Alklaku la butonon "Restarigi" por restarigi la nunan agordon.
• Alklaku "Nuligi" por reveni al la superview de spegulaj kunsidoj

Spegulo&RMspegula agordo

Tutmondaj Agordoj

Fonta VLAN(j) Agordo

Havena Agordo

Figuro 7. Example de detala agordo de spegula sesio
La butonoj "Konservi", "Restarigi" kaj "Nuligi" estas aldonitaj per la html-kodo:

JSON-Komanda fluo
Ĉi tiu paĝo postulas dupaŝan komandfluon:

• Unue ĝi bezonas akiri la kapablojn de la aparato kun la metodo "mirror.capabilities.get". La kapabloj ne ŝanĝiĝas kaj devas esti legitaj nur unufoje.
• Tiam ĝi bezonas akiri la nunan agordon de la aparato uzante la metodojn "mirror.config.session.get", "port.status.get" kaj en kazo de stakado "topo.config.stacking.get".

La alvoko de "mirror.capabilities.get" estas iniciatita de la evento "domready" kaj la rezulto estas agordita por esti pritraktata de la funkcio requestUpdate.
La peto Ĝisdatigo komencos la vokon de "mirror.config.session.get",
"port.status.get" kaj en kazo de stakado "topo.config.stacking.get" kaj la rezultoj de ĉi tiuj alvokoj estas agorditaj por esti pritraktataj de la funkcio prepareUpdate.
La funkcio preparUpdate kolektos ĉiujn rezultojn, kaj nur kiam ĉiuj estos ricevitaj, ĝi vokos la funkcio processUpdate kiu konstruos la tabelojn montritajn sur la web.

Referencoj

1. Vikipedio JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

Dokumentoj/Rimedoj

Microsemi AN1256 Web Programistoj Apliko [pdf] Uzantogvidilo AN1256, AN1256 Web Apliko por programistoj, Web Programistoj Apliko, Apliko

Referencoj

• Uzanto Manlibro