Мицросеми АН1256 Web Кориснички водич за апликацију програмера

Мицросеми АН1256 Web Програмерс Апплицатион

Увод

ЈСОН (ЈаваСцрипт Објецт Нотатион) је отворени стандард file формат који користи текст читљив за људе за размену података. То је уобичајени формат података који се користи за асинхрону комуникацију претраживач/сервер.
За ново web дизајн странице, ЈСОН формат може бити замена за оригинални АЈАКС стил. У поређењу са АЈАКС-ом, коришћење ЈСОН-а чини Web имплементација лакша и једноставнија. Програмер треба да се фокусира само на web дизајн странице и Web Имплементација руковаоца може бити изостављена јер је ЈСОН метода приступа већ подржана у сваком од њих WebСтаКс софтверски модули.
Овај документ наводи водич за програмере за софтверског инжењера који треба да развије Web страница преко ЈСОН-а. Детаљне процедуре и прampлес такође укључен у следеће одељке.

ЈСОН ток приступа подацима

Готовоview
Ево тока приступа ЈСОН подацима којим се ХТТП веза покреће од клијента (прегледача). ХТМЛ табела се креира динамички према примљеним ЈОСН подацима са стране сервера (ДУТ).

Слика 1. Ток приступа између клијента и сервера

Захтев/одговор ЈСОН подаци
Пакет ЈСОН захтева је заснован на методи објављивања ХТТП захтева и садржај мора да прати МСЦЦ ЈСОН формат.

• Захтевај ЈСОН синтаксу:{“метод”:” ”,”парамс”:[ ], “ид:”јсонрпц”}
• ЈСОН синтакса одговора: {“грешка”: "резултат": , “ид:”јсонрпц”}

Следећи снимци приказују ЈСОН садржај између прегледача и ДУТ-а.

Слика 2. Снимак ХТТП захтева од клијента

Слика 3. Снимак ХТТП одговора са сервера

МСЦЦ ЈСОН спецификација
Да бисте добили потпуне ЈСОН информације укључујући метод, параметар, опис итд. Откуцајте „хттп:// /јсон_спец“ на адресној траци прегледача. Постоји још један метод приступа преко назива ЈСОН методе „јсонРпц.статус.интроспецтион.специфиц.инвентори.гет“, користи се за одређени метод.

Слика 4. Снимак ЈСОН спецификације web страница

Web оквир

Тхе Web оквир у WebСтаКс софтвер је заснован на МооТоолс отвореног кода. То је колекција ЈаваСцрипт услужних програма са МИТ лиценцом. (http://mootools.net/license.txt) Трака менија и већина web странице су засноване на оквиру. И АЈАКС и ЈСОН алгоритам су већ интегрисани у његове услужне програме.
Осим тога, WebСтаКс софтвер пружа друге услужне програме који су корисни за ЈСОН web дизајн странице.

• јсон.јс – Користите за за пренос/примање динамичких података са ЈСОН синтаксом.
• динформс.јс – Користи се за динамичко креирање ХТМЛ табеле.
• валидате.јс – Користи се за проверу ваљаности ХТМЛ обрасца.

Пуне ЈаваСцрипт библиотеке се налазе у директоријуму изворног стабла: webстак2\ втсс_аппл\web\хтмл\либ.

Смернице за ЈСОН Web дизајн странице

Овај одељак наводи како да дизајнирате а web страница заснована на МСЦЦ ЈаваСцрипт библиотекама. Користимо глобално конфигурисано огледало web страница као бившиampле хере. Асинхрона комуникација је заснована на ХТТП ЈСОН методу приступа и сви глобално конфигурисани параметри су наведени у једној динамичкој ХТМЛ табели.
Тхе web изглед странице је наведен испод, а цео изворни код се налази у директоријуму изворног стабла: webстак2\втсс_аппл\миррор\хтмл\миррор_цтрл.хтм. Да будем типичнији web странице референце, погледајте одељак додатка.

Табела конфигурације огледала и огледала

Слика 5. Exampле глобално конфигурисане табеле

Уреди Web страница

ХТМЛ заглавље
Укључите потребне ЈС библиотеке у ХТМЛ tag.

Иницијализујте ресурс динамичке табеле

• Када је ХТМЛ документ спреман, позовите ДинамицТабле() да бисте иницијализовали ресурс динамичке табеле.
• ДинамицТабле() се користи за креирање динамичке табеле након пријема ЈСОН података.
• Затим ће позвати рекуестУпдате да покрене ток ЈСОН команде.

1. виндов.аддЕвент('домреади', фунцтион() {
2. // Креирајте образац са телом табеле за пријем/пренос ЈСОН података
3. миДинамицТабле = нев ДинамицТабле(“миТаблеЦонтент”, “цонфиг”,”плусРовЦтрлБар”);
   4
4. рекуестУпдате();
5. });

Захтев/одговор ЈСОН подаци

• Када је ХТМЛ документ спреман, користите рекуестЈсонДоц() да пошаљете ЈСОН захтев „миррор.цонфиг.сессион.гет“ да бисте добили информације о конфигурисаним сесијама.
• Након што су ЈСОН подаци за „миррор.цапабилитиес.гет“ примљени, функција повратног позива рекуестУпдате() ће бити обрађена. Функција рекуестУпдате ће затим позвати „миррор.цонфиг.сессион.гет“ да добије тренутну конфигурацију. Када се прими тренутна конфигурација, позива се функција процессУпдате да направи табелу која ће бити приказана.

1. функција рекуестУпдате()
2. {
3. // Врати садржај табеле
4. миДинамицТабле.ресторе();
   5
5. // Ова табела два ЈСОН података.
6. рекуестЈсонДоц(“миррор.цонфиг.сессион.гет”, нулл, процессУпдате, “цонфиг”);
7. }

Обрадите примљене ЈСОН податке

• Функција процессУпдате() се користи за постављање динамичке табеле након пријема ЈСОН података.
• АддРовс() се користи за додавање редова табеле. миДинамицТабле.упдате() распоред тхе
  ХТМЛ табела према подацима у редовима табеле.

1. функција процессУпдате(рецв_јсон, име)
2. {
3. // Занемари процес ако се не прими ниједан податак
4. иф (!рецв_јсон) {
5. алерт(„Добијање динамичких података није успело.“);
6. повратак;
7. }
8. // Сачувајте примљене ЈСОН податке
9. миДинамицТабле.савеРецвЈсон(“цонфиг”, рецв_јсон);
10. // Додај редове табеле
11. вар табле_ровс = аддРовс(рецв_јсон);
12. миДинамицТабле.аддРовс(табле_ровс);
14. // Ажурирај ову динамичку табелу
15. миДинамицТабле.упдате();
17. // Тајмер за освежавање
18. вар ауторефресх = доцумент.гетЕлементБиИд(“ауторефресх”);
19. иф (ауторефресх && ауторефресх.цхецкед) {
20. иф (ИД тајмера) {
21. цлеарТимеоут(тимерИД);
22. }
23. тимерИД = сетТимеоут('рекуестУпдате()', сеттингсРефресхИнтервал());
24. }
25. }

Додајте редове табеле

• У функцији аддРовс() користимо ЈСОН формат да попунимо сваки глобални конфигурисани параметар у реду табеле.
• Сва ХТМЛ поља су наведена у ЈСОН низу („табле_ровс“), а синтакса поља табеле је испод.

Синтакса:
table_rows:[<row_0>, <row_1>, …<row_n>]
<row_n>: {<field_0>, <field_1>, …<field_n>}
: {"тип": , „парамс“:[ , , …, ]}

• У овом случају, сваки ред има пет поља: „ИД сесије“, „Режим“, „Тип“, „ВЛАН ИД“ и „Рефлецтор Порт“ нпр.ampле,

• МиДинамицТабле.аддРовс() ће конвертовати ЈСОН податке у ХТМЛ формат и исписати ХТМЛ табелу.

1. функција аддРов(кључ, вал)
2. {
3. вар ноне_мап_вал = 0кФФФФФФФФ, ноне_мап_тект = “Ништа”, ноне_интерфаце_тект = “НОНЕ”;
4. вар туннел_моде_суффик = вал.ТуннелМоде == “усеглобал” ? ” (” + оТТуннелМоде[оВТуннелМоде.индекОф(глобал_цонф.туннелМоде)] + “)” : “”;
5. вар ров = {фиелдс:[
6. {типе:”линк”, парамс:[“цр”, “миррор.хтм?сессион_ид=” + кључ, кључ]},
7. {типе:”тект”, парамс:[оТМоде[оВМоде.индекОф(вал.Моде)], “ц”]},
8. {типе:”тект”, парамс:[оТТипе[оВТипе.индекОф(вал.Типе)], “ц”]},
9. {типе:”тект”, парамс:[вал.Типе == “миррор” ? „-“:
   вал.РМиррорВлан, “ц”]},
10. {типе:”тект”, парамс:[вал.Типе == “рМиррорСоурце” ?
    вал.РефлецторПорт : “-” , “ц”]}
11. ]};
12. повратак ред;
13. }
14. функција аддРовс(рецв_јсон)
15. {
16. вар ров, емпти_цолспан = 7;
17. вар табле_ровс = нев Арраи();
18. // Додај заглавље табеле
19. аддХеадер(табле_ровс);
20. // Додај један ред
21. Објецт.еацх(рецв_јсон, фунцтион(рецорд) {
22. табле_ровс.пусх(аддРов(рецорд.кеи, рецорд.вал));
23. });
24. ретурн табле_ровс;
25. }

Web страница помоћи
За web дизајн странице помоћи, опис помоћи може да се односи на ЈСОН спецификацију, да текст описа може бити у складу са ЈСОН излазом и помаже у смањењу сувишних описа. Прampовде је преузето из конфигурације релеја дхцп6.

Хипер-линк у извору file
Додели помоћ file локација у свом извору file ХТМЛ tag. Фиксно име променљиве „хелп_паге“ се користи за web задавање странице помоћи.

2. // Магија странице помоћи
3. вар хелп_паге = “/хелп/хелп_ккк.хтм”;

Ажурирајте опис ХТМЛ поља из ЈСОН спецификације

• Користите или ХТМЛ tag да декларишете опис ХТМЛ табеле и добијете јединствени ИД за tag.
• Када је ХТМЛ документ спреман, позовите лоадКСМЛДоц() да бисте добили целу ЈСОН спецификацију или добили опис специфичне методе помоћу назива ЈСОН методе „јсонРпц.статус.интроспецтион.специфиц.инвентори.гет“.
• ПроцесТаблеДесц() се користи за ажурирање описа табеле, а процессУпдате() се користи за ажурирање описа параметара табеле.
• У процесуУпдате(), позовите упдатеТаблеПарамсДесц() да бисте ажурирали ЈСОН елементе који се подударају са специфичним именима елемената.
• Ажурирајте или tag унутрашњи ХТМЛ према опису елемента.

2. /* Ажурирајте ХТМЛ поља описа */
3. функција процессТаблеДесц(рек) {
4. иф (!рек.респонсеТект) {
5. повратак;
6. }
7. вар јсон_спец = ЈСОН.децоде(рек.респонсеТект);
8. // Ажурирај опис табеле
9. $(“ТаблеДесц”).иннерХТМЛ = гетЈсонСпецЕлемент(јсон_спец, “гроупс”, “дхцп6_релаи.цонфиг.влан”).десцриптион;
10. }
11. /* Ажурирај опис параметра ХТМЛ табеле */
12. фунцтион процессУпдате(рецв_јсон) {
13. // Ажурирај опис параметара табеле
14. вар парам_намес = [
15. {
16. „алиас“: „Интерфејс“,
17. „тип“: „втсс_ифиндек_т“,
18. “наме”: “вланИнтерфаце”,
19. "суфикс": "."
20. },
21. {
22. „алиас“: „Релејни интерфејс“,
23. „тип“: „втсс_ифиндек_т“,
24. “наме”: “релаиВланИнтерфаце”,
25. "суфикс": ". ИД интерфејса који се користи за преношење."
26. },
27. {
28. “алиас”: “Релаи Дестинатион”,
29. „тип“: „меса_ипв6_т“,
30. “наме”: “релаи_дестинатион”,
31. "суфикс": ". ИПв6 адреса ДХЦПв6 сервера који захтева биће прослеђена. Подразумевана вредност „фф05::1:3“ је „било који ДХЦП сервер“.“
32. }
33. ];
34. упдатеТаблеПарамсДесц(“ТаблеПарамсДесц”, рецв_јсон, “дхцп6_релаи.цонфиг.влан.гет”, парам_намес);
35. }
36. /* Добијте ЈСОН спецификацију */
37. виндов.аддЕвент('домреади', фунцтион () {
38. лоадКСМЛДоц(“/јсон_спец”, процессТаблеДесц);
39. рекуестЈсонДоц(“јсонРпц.статус.интроспецтион.специфиц.инвентори.гет”, “дхцп6_релаи.цонфиг.влан”, процессУпдате);
40. });

Хипер-линк у траци менија

• Изворни ХТМЛ код траке менија је генерисан из file webстак2\втсс_аппл\web\ мену_дефаулт.цкк.
• Уредите ставке у овоме file за Web хипервеза странице.

1. #ако је дефинисан(ВТСС_СВ_ОПТИОН_ДХЦП6_РЕЛАИ)
2. ИТЕМ(” Релеј,дхцп6_релаи.хтм”);
3. #ендиф //ВТСС_СВ_ОПТИОН_ДХЦП6_РЕЛАИ

НАПОМЕНА
Обратите пажњу на број размака у ИТЕМ(“”), који се користи за одређивање нивоа групе у траци менија. У овом случају, све web странице су у групи „ДХЦПв6“.

Слика 6. Примampле глобално конфигурисане табеле

Додатак

Типично web странице

Постоји неколико типичних web странице се могу користити за референтни дизајн. Још један ексampОвде ће бити приказана конфигурација једне сесије огледала која се налази у втсс_аппл\миррор\хтмл\миррор.хтм.
Тхе web страница пружа детаљну конфигурацију за једну сесију огледала. Сви конфигурисани параметри су наведени.

• Кликните на дугме „Сачувај“ да бисте применили тренутну конфигурацију.
• Кликните на дугме „Ресетуј“ да бисте ресетовали тренутну конфигурацију.
• Кликните на „Откажи“ да бисте се вратили на крајview огледала сесија

Миррор&РМиррор конфигурација

Глобална подешавања

Конфигурација изворног ВЛАН-а

Порт Цонфигуратион

Слика 7. Exampле детаљне конфигурације сесије огледала
Дугмад „Сачувај“, „Ресетуј“ и „Откажи“ додаје хтмл код:

ЈСОН ток команде
Ова страница захтева ток команди у два корака:

• Прво треба да добије могућности уређаја методом „миррор.цапабилитиес.гет“. Могућности се не мењају и морају се прочитати само једном.
• Затим треба да добије тренутну конфигурацију уређаја користећи методе „миррор.цонфиг.сессион.гет“, „порт.статус.гет“ и у случају слагања „топо.цонфиг.стацкинг.гет“.

Позив „миррор.цапабилитиес.гет“ иницира догађај „домреади“, а резултат је конфигурисан да њиме рукује функција рекуестУпдате.
РекуестУпдате ће покренути позив „миррор.цонфиг.сессион.гет“,
“порт.статус.гет” иу случају слагања “топо.цонфиг.стацкинг.гет” и резултати ових позива су конфигурисани да њима рукује функција реадиУпдате.
Функција реадиУпдате ће прикупити све резултате и тек када сви буду примљени позваће функцију процессУпдате која ће конструисати табеле које ће бити приказане на web.

Референце

1. Википедиа ЈаваСцрипт https://en.wikipedia.org/wiki/JavaScript
2. ЈСОН https://www.json.org/
3. МоонТоолс https://mootools.net/