Microsemi AN1256 Web Panduan Pengguna Aplikasi Programmer

Isine ndhelikake

1 Microsemi AN1256 Web Aplikasi Programmer

2 Pambuka

3 aliran akses data JSON

4 Web kerangka

5 Pedoman kanggo JSON Web desain kaca

5.1 Sunting Web kaca

6 Lampiran

6.1 Pangilon & Konfigurasi Pangilon

7 Referensi

8 Dokumen / Sumber Daya

8.1 Referensi

9 Kiriman sing gegandhengan

Microsemi AN1256 Web Aplikasi Programmer

Pambuka

JSON (JavaScript Object Notation) minangka standar mbukak file format sing nggunakake teks sing bisa diwaca manungsa kanggo ijol-ijolan data. Iki minangka format data umum sing digunakake kanggo komunikasi browser/server asinkron.
Kanggo anyar web desain kaca, format JSON bisa dadi panggantos kanggo gaya AJAX asli. Dibandhingake karo AJAX, nggunakake JSON ndadekake Web implementasine luwih gampang lan prasaja. Pangembang mung kudu fokus web desain kaca lan Web implementasi handler bisa diilangi amarga metode akses JSON wis didhukung ing saben Webmodul piranti lunak StaX.
Dokumen iki nyatakake pandhuan programer kanggo insinyur piranti lunak sing kudu ngembangake Web kaca liwat JSON. Prosedur rinci lan examples uga kalebu ing bagean ngisor.

aliran akses data JSON

Swaraview
Iki minangka aliran akses data JSON sing sambungan HTTP diwiwiti saka klien (browser). Tabel HTML digawe kanthi dinamis miturut data JOSN sing ditampa saka sisih server(DUT).

Gambar 1. Aliran akses antarane klien lan server

Panjaluk / Respon data JSON
Paket panyuwunan JSON adhedhasar metode kirim panjalukan HTTP lan konten kudu ngetutake format MSCC JSON.

Panjaluk sintaks JSON:{"metode":" ","params":[ ], "id:"jsonrpc"}
Tanggapan sintaks JSON: {"kesalahan": "asil": , "id:"jsonrpc"}

Gambar ing ngisor iki nuduhake konten JSON ing antarane browser lan DUT.

Gambar 2. Gambar panjalukan HTTP saka klien

Gambar 3. Snapshot respon HTTP saka server

Spesifikasi MSCC JSON
Kanggo entuk informasi JSON lengkap kalebu metode, parameter, deskripsi lan liya-liyane. Ketik "http: // /json_spec" ing bilah alamat browser sampeyan. Ana cara akses liyane liwat jeneng cara JSON "jsonRpc.status.introspection.specific.inventory.get", digunakake kanggo cara tartamtu.

Gambar 4. Gambar saka spesifikasi JSON web kaca

Web kerangka

Ing Web kerangka ing WebPiranti lunak StaX adhedhasar MooTools sumber terbuka. Iki minangka koleksi utilitas JavaScript kanthi lisensi MIT. (http://mootools.net/license.txt) Bar menu lan paling saka web kaca adhedhasar framework. Algoritma AJAX lan JSON wis terintegrasi ing utilitas.
Kajaba iku, WebPiranti lunak StaX nyedhiyakake utilitas liyane sing migunani kanggo JSON web desain kaca.

json.js – Gunakake kanggo ngirim / nampa data dinamis karo sintaks JSON.

dynforms.js – Gunakake kanggo nggawe tabel HTML kanthi dinamis.
validate.js – Gunakake kanggo validasi formulir HTML.

Pustaka JavaScript lengkap ana ing sangisore direktori wit sumber: webstax2\ vtss_appl\web\html\lib.

Pedoman kanggo JSON Web desain kaca

Bagean iki nuntun carane ngrancang a web kaca adhedhasar perpustakaan JavaScript MSCC. Kita nggunakake Mirror global diatur web kaca minangka mantanample kene. Komunikasi asinkron adhedhasar metode akses HTTP JSON lan kabeh parameter sing dikonfigurasi global didaftar ing siji tabel HTML dinamis.
Ing web tata letak kaca kapacak ing ngisor iki lan kode sumber lengkap ana ing sangisore direktori wit sumber: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Kanggo entuk luwih khas web referensi kaca, deleng bagean lampiran.

Tabel Konfikurasi Mirror& RMirror

Gambar 5. Example saka tabel konfigurasi global

Sunting Web kaca

header HTML
Kalebu perpustakaan JS sing dibutuhake ing HTML tag.

Miwiti sumber daya tabel dinamis

Nalika document HTML siap, nelpon DynamicTable () kanggo initialize sumber tabel dinamis.

DynamicTable () digunakake kanggo nggawe tabel dinamis sawise nampa data JSON.
Banjur bakal nelpon requestUpdate kanggo miwiti aliran printah JSON.

window.addEvent('domready', function() {
// Nggawe formulir karo awak meja kanggo nampa / ngirim data JSON
myDynamicTable = new DynamicTable("myTableContent", "config", "plusRowCtrlBar");
4
requestUpdate();
});

Panjaluk / Respon data JSON

Nalika document HTML siap, nggunakake requestJsonDoc () kanggo ngirim request JSON "mirror.config.session.get" kanggo njaluk informasi bab mau diatur.

Sawise data JSON kanggo "mirror.capabilities.get" ditampa, requestUpdate fungsi callback () bakal diproses. Fungsi requestUpdate bakal nelpon "mirror.config.session.get" kanggo njaluk konfigurasi saiki. Nalika konfigurasi saiki ditampa, diarani processUpdate fungsi kanggo mbangun tabel sing bakal ditampilake.

fungsi requestUpdate()
{
// Mulihake isi tabel
myDynamicTable.restore();
5
// Tabel iki loro data JSON.
requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
}

Proses data JSON sing ditampa

Fungsi processUpdate () digunakake kanggo tata letak tabel dinamis sawise nampa data JSON.

AddRows () digunakake kanggo nambah baris tabel. myDynamicTable.update () tata letak ing
Tabel HTML miturut data ing baris tabel.

fungsi processUpdate(recv_json, jeneng)
{
// Nglirwakake proses yen ora ana data sing ditampa
yen (!recv_json) {
alert("Entuk data dinamis gagal.");
bali;
}
// Simpen data JSON sing ditampa
myDynamicTable.saveRecvJson("config", recv_json);
// Tambah baris tabel
var table_rows = addRows(recv_json);
myDynamicTable.addRows(table_rows);
// Nganyari tabel dinamis iki
myDynamicTable.update();
// Refresh timer
var autorefresh = document.getElementById("autorefresh");
yen (autorefresh && autorefresh.checked) {
yen (timerID) {
clearTimeout(timerID);
}
timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
}
}

Tambah baris tabel

Ing addRows () fungsi, kita nggunakake format JSON kanggo isi saben parameter global diatur ing baris meja.

Kabeh kolom HTML kadhaptar ing array JSON ("table_rows") lan sintaks kolom tabel ing ngisor iki.

Sintaksis:
tabel_baris:[ , ,… ] :{ , ,… }
: {"jinis": , "params":[ , ,…, ]}

Ing kasus iki, saben baris duwe limang kolom: "ID Sesi", "Mode", "Jenis", "ID VLAN" lan "Port Reflektor" Kanggo example,

ID Sesi (Jeneng kolom: int32_t)	1 (Id saka sesi pangilon)
Mode (Jeneng kolom: vtss_bool_t)	bener (Tegese sesi pangilon diaktifake)
Jinis (Nama kolom: enumeration {pangilon, rMirrorSource, rMirrorDestination}	Sumber RMirror (iki sumber sesi pangilon remot
ID VLAN (Jeneng kolom: uint16_t)	200 (vlan sing digunakake kanggo mirroring)
Port Reflektor Kab (Kolom Jeneng: vtss_ifindex_t)	Gi 1/1 (Port sing dikirimake lalu lintas cermin

myDynamicTable.addRows () bakal ngowahi data JSON menyang format HTML lan output tabel HTML.

fungsi addRow(key, val)
{
var none_map_val = 0xFFFFFFFF, none_map_text = "Ora ana", none_interface_text = "NONE";
var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;

var baris = {kolom:[
{type:”link”, params:[“cr”, “mirror.htm?session_id="+key, key]},
{tipe:”teks”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
{type:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
{type:"text", params:[val.Type == "mirror" ? "-":
val.RMirrorVlan, “c”]},
{jinis:"teks", params: [val.Type == "rMirrorSource"?
val.ReflectorPort : “-” , “c”]}
]};
baris bali;
}
fungsi addRows(recv_json)
{
var baris, empty_colspan = 7;
var table_rows = Array anyar ();
// Tambah header tabel
addHeader(table_rows);
// Tambah baris siji
Object.each(recv_json, function(record) {
table_rows.push(addRow(record.key, record.val));
});
bali table_rows;
}

Web kaca bantuan
Kanggo web desain kaca bantuan, katrangan bantuan bisa ngarujuk marang spesifikasi JSON, manawa teks deskripsi bisa konsisten karo output JSON lan mbantu nyuda deskripsi sing berlebihan. Example kene dijupuk saka dhcp6 konfigurasi relay.

Hyper-link ing sumber file
Menehi pitulungan file lokasi ing sumber file HTML tag. Jeneng variabel tetep "help_page" digunakake kanggo web tugas kaca bantuan.

// Help page magic
var help_page = "/help/help_xxx.htm";

Nganyari katrangan lapangan HTML saka spesifikasi JSON

Gunakake utawa HTML tag kanggo ngumumake katrangan tabel HTML lan diwenehi ID unik kanggo tag.

Nalika dokumen HTML wis siyap, nelpon loadXMLDoc () kanggo njaluk kabeh specification JSON utawa njaluk katrangan cara tartamtu dening jeneng metode JSON "jsonRpc.status.introspection.specific.inventory.get".
ProcessTableDesc () digunakake kanggo nganyari gambaran Tabel lan processUpdate () digunakake kanggo nganyari katrangan parameter Tabel.

Ing processUpdate (), nelpon updateTableParamsDesc () kanggo nganyari unsur JSON sing cocog karo jeneng unsur tartamtu.
Nganyari ing utawa tag HTML batin miturut katrangan unsur.

/* Update kolom deskripsi HTML */
function processTableDesc(req) {
yen (!req.responseText) {
bali;
}
var json_spec = JSON.decode(req.responseText);
// Nganyari katrangan tabel
$("TableDesc").innerHTML = getJsonSpecElement(json_spec, "grup", "dhcp6_relay.config.vlan").deskripsi;
}
/* Nganyari katrangan parameter tabel HTML */
function processUpdate(recv_json) {
// Nganyari katrangan parameter tabel
var param_name = [
{
"alias": "Antarmuka",
"jinis": "vtss_ifindex_t",
"jeneng": "vlanInterface",
"sufiks": "."
},
{
"alias": "Antarmuka Relay",
"jinis": "vtss_ifindex_t",
"jeneng": "relayVlanInterface",
"sufiks": ". Id antarmuka sing digunakake kanggo relaying.
},
{
"alias": "Tujuan Relay",
"jinis": "mesa_ipv6_t",
"jeneng": "relay_destination",
"sufiks": ". Alamat IPv6 saka server DHCPv6 sing dijaluk bakal dikirim menyang. Nilai standar 'ff05::1:3' mans 'sembarang server DHCP'.
}
];
updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
}
/* Entuk spesifikasi JSON */
window.addEvent('domready', function() {
loadXMLDoc(“/json_spec”, processTableDesc);
requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
});

Hyper-link ing garis menu

Kode sumber HTML bar menu digawe saka file webstax2\vtss_appl\web\ menu_default.cxx.
Sunting item ing iki file kanggo Web kaca hyper-link.

#yen ditetepake(VTSS_SW_OPTION_DHCP6_RELAY)
ITEM("Relay,dhcp6_relay.htm");
#endif //VTSS_SW_OPTION_DHCP6_RELAY

CATETAN
Wigati yen jumlah karakter spasi ing ITEM (""), sing digunakake kanggo mutusake level grup ing garis menu. Ing kasus iki, kabeh web kaca ana ing grup "DHCPv6".

Gambar 6. Example saka tabel konfigurasi global

Lampiran

khas web kaca

Ana sawetara khas web kaca bisa digunakake kanggo desain referensi. Ex tambahan sijiample kanggo nuduhake kene konfigurasi saka sesi mirror siji ditemokaké ing vtss_appl\mirror\html\mirror.htm.
Ing web kaca nyedhiyakake konfigurasi rinci kanggo sesi pangilon siji. Kabeh parameter sing dikonfigurasi didaftar.

Klik tombol "Simpen" kanggo ngetrapake konfigurasi saiki.
Klik tombol "Reset" kanggo ngreset konfigurasi saiki.
Klik "Batal" kanggo bali menyang liwatview saka sesi pangilon

Pangilon & Konfigurasi Pangilon

Setelan Global

Konfigurasi VLAN Sumber

Konfigurasi Port

Gambar 7. Example konfigurasi rinci saka sesi pangilon
Tombol "Simpen", "Reset" lan "Batal" ditambahake dening kode html:

Aliran Perintah JSON
Kaca iki mbutuhake aliran printah rong langkah:

Pisanan kudu entuk kemampuan piranti kanthi metode "mirror.capabilities.get". Kapabilitas ora owah lan mung kudu diwaca sapisan.
Banjur perlu kanggo njaluk konfigurasi saiki piranti nggunakake cara "mirror.config.session.get", "port.status.get" lan ing cilik saka numpuk "topo.config.stacking.get".

Telpon saka "mirror.capabilities.get" diwiwiti dening acara "domready" lan asil diatur kanggo ditangani dening requestUpdate fungsi.
RequestUpdate bakal miwiti telpon "mirror.config.session.get",
"port.status.get" lan ing cilik saka numpuk "topo.config.stacking.get" lan asil saka telpon iki diatur kanggo ditangani dening fungsi prepareUpdate.
Fungsi prepareUpdate bakal ngumpulake kabeh asil, lan mung yen kabeh wis ditampa bakal nelpon fungsi processUpdate sing bakal mbangun tabel sing bakal ditampilake ing web.