Ìîäóëü: | WebCfgD |
²ì'ÿ: | Äèíàì³÷íèé WEB êîíô³ãóðàòîð |
Òèï: | Êîðèñòóâàöüê³ ³íòåðôåéñè |
Äæåðåëî: | ui_WebCfgD.so |
Âåðñ³ÿ: | 1.0 |
Àâòîð: | Ðîìàí Ñàâî÷åíêî |
Îïèñ: | Íàäຠäèíàì³÷íèé WEB áàçîâàíèé êîíô³ãóðàòîð. Âèêîðèñòàíî XHTML, CSS òà JavaScript òåõíîëî㳿. |
˳öåíç³ÿ: | GPL |
Ìîäóëü "WebCfgD" íàäຠêîíô³ãóðàòîð ñèñòåìè OpenSCADA. Êîíô³ãóðàòîð ðåàë³çîâàíî íà îñíîâ³ òàêèõ Web-òåõíîëîã³é:
²íòåðôåéñ êîíô³ãóðàòîðó ôîðìóºòüñÿ ó WEB-áðàóçåð³ øëÿõîì çâåðíåííÿ äî WEB-ñåðâåðó òà îòðèìàííÿ â³ä íüîãî XHTML-äîêóìåíòó çà ïðîòîêîëîì HTTP. Ó öüîìó âèïàäêó ó ðîë³ WEB-ñåðâåðó âèñòóïຠñèñòåìà OpenSCADA, ÿêà ï³äòðèìóº ñòàíäàðòí³ êîìóí³êàö³éí³ ìåõàí³çìè TCP-ìåðåæ (ìîäóëü Transport.Sockets), ïðîòîêîë ïåðåäà÷³ ã³ïåðòåêñòó (ìîäóëü Protocol.HTTP), à òàêîæ øèôðóâàííÿ òðàô³êó ì³æ áðàóçåðîì òà ñåðâåðîì (Transport.SSL). Âèõîäÿ÷è ç öüîãî, äëÿ îòðèìàííÿ äîñòóïó äî ³íòåðôåéñó êîíô³ãóðàö³¿ OpenSCADA, ÿêèé íàäàºòüñÿ öèì ìîäóëåì, òðåáà ó OpenSCADA íàëàøòóâàòè òðàíñïîðò (Transport.Sockets àáî Transport.SSL) ó çâ'ÿçö³ ³ç ïðîòîêîëîì HTTP (Protocol.HTTP). Ó ïîñòàâö³ ç ñèñòåìîþ OpenSCADA éäóòü êîíô³ãóðàö³éí³ ôàéëè, ÿê³ ì³ñòÿòü íàëàøòóâàííÿ Transport.Sockets äëÿ ïîðò³â 10002 òà 10004. ³äïîâ³äíî ³íòåðôåéñ ìîäóëÿ ó êîíô³ãóðàö³¿ OpenSCADA ïî çàìîâ÷åííþ áóäå äîñòóïíèé çà URL: http://localhost:10002 àáî
http://localhost:10004.
ϳñëÿ îòðèìàííÿ XHTML-äîêóìåíòó çàïóñêàºòüñÿ ïðîãðàìà íà JavaScript äëÿ ôîðìóâàííÿ äèíàì³÷íîãî ³íòåðôåéñó êîíô³ãóðàòîðó.
 îñíîâ³ ìîäóëÿ ëåæèòü ìîâà ³íòåðôåéñó óïðàâë³ííÿ ñèñòåìîþ OpenSCADA, à öå îçíà÷ຠùî íàäàºòüñÿ ºäèíèé ³íòåðôåéñ êîíô³ãóðàö³¿. Îíîâëåííÿ ìîäóëÿ ìîæå çíàäîáèòèñÿ ò³ëüêè ó âèïàäêó îíîâëåííÿ ñïåöèô³êàö³¿ ìîâè ³íòåðôåéñó óïðàâë³ííÿ.
Ìîäóëü ðåàë³çîâóâàâñÿ òà òåñòóâàâñÿ íà òðüîõ WEB-áðàóçåðàõ, ïðåäñòàâíèêàõ òðüîõ òèï³â WEB-ðóø³¿â, à ñàìå:
Âèêîðèñòàííÿ ìîäóëÿ ïî÷èíàºòüñÿ ç â³äêðèòòÿ ñåàíñó êîðèñòóâà÷à (àâòåíòèô³êàö³¿) ìîäóëåì ïðîòîêîëó HTTP (Protocol.HTTP). Äëÿ ôóíêö³þâàííÿ àóòåíòèô³êàö³¿ òà ìåõàí³çìó çáåðåæåííÿ ñåàíñó áðàóçåð ïîâèíåí äîçâîëÿòè Cookies.
Ðîçãëÿíåìî ðîáî÷å â³êíî êîíô³ãóðàòîðó íà ðèñ. 2.
Ðîáî÷å â³êíî êîíô³ãóðàòîðó ñêëàäàºòüñÿ ³ç íàñòóïíèõ ÷àñòèí:
1 Ïàíåëü ³íñòðóìåíò³â — ì³ñòèòü êíîïêè óïðàâë³ííÿ.
2 Àäðåñà â³äêðèòîãî âóçëà — â³äîáðàæຠïîòî÷íèé îáðàíèé âóçîë.
3 Íàâ³ãàòîð — ïðèçíà÷åíî äëÿ ïðÿìî¿ íàâ³ãàö³¿ çà äåðåâîì óïðàâë³ííÿ.
4 Ðîáî÷å ïîëå — ïîä³ëåíî íà ÷àñòèíè:
5 Ðÿäîê ñòàòóñó — â³äîáðàæຠñòàí êîíô³ãóðàòîðà.
Ïàíåëü ³íñòðóìåíò³â ì³ñòèòü íàñòóïí³ êíîïêè óïðàâë³ííÿ (çë³âà íà ïðàâî):
Åëåìåíòè óïðàâë³ííÿ ïîä³ëÿþòüñÿ íà áàçîâ³, êîìàíäè, ñïèñêè, òàáëèö³ òà çîáðàæåííÿ. Âñ³ åëåìåíòè â³äîáðàæàþòüñÿ ó ïîñë³äîâíîñò³, ñóâîðî¿ â³äïîâ³äíîñò³ äî ¿õ ðîçòàøóâàííÿ ó îïèñó ìîâè ³íòåðôåéñó óïðàâë³ííÿ.
Äëÿ íàëàøòóâàííÿ âëàñíî¿ ïîâåä³íêè ó íåî÷åâèäíèõ ñèòóàö³ÿõ ìîäóëåì íàäàºòüñÿ ìîæëèâ³ñòü íàëàøòóâàííÿ îêðåìèõ ïàðàìåòð³â çà ïîñåðåäíèöòâîì ³íòåðôåéñó óïðàâë³ííÿ OpenSCADA (ðèñ. 3). Òàêèìè ïàðàìåòðàìè º:
Äî ÷èñëà áàçîâèõ åëåìåíò³â âõîäÿòü: ³íôîðìàö³éí³ åëåìåíòè, ïîëÿ ââîäó çíà÷åíü, åëåìåíòè âèáîðó ç ïåðåë³êó, îçíàêè. Ó âèïàäêó â³äñóòíîñò³ ³ì'ÿ åëåìåíòó, áàçîâèé åëåìåíò ïðèºäíóºòüñÿ äî ïîïåðåäíüîãî áàçîâîãî åëåìåíòó. Ïðèêëàä ãðóïè áàçîâèõ åëåìåíò³â ç ïðèºäíàííÿì íàâåäåíî íà ðèñ.4.
Äëÿ åëåìåíò³â ââîäó, ÿê³ íå ïåðåäáà÷àþòü ìèòòºâèõ çì³í òà ìîæóòü òðèâàëèé ÷àñ ðåäàãóâàòèñÿ ïåðåä îñòàòî÷íèì çàâåðøåííÿì, ïåðåäáà÷åíî ìåõàí³çì ï³äòâåðäæåííÿ. Öåé ìåõàí³çì äîçâîëÿº âèêëþ÷àòè çàòðèìêè ïðè ðåäàãóâàíí³, îñîáëèâî ó âèïàäêó êîíô³ãóðàö³¿ â³ääàëåíèõ ñòàíö³é, òà âíîñèòü çì³íè çà ï³äòâåðäæåííÿì. Äî åëåìåíò³â ââîäó ç ï³äòâåðäæåííÿì ìàþòü â³äíîøåííÿ: ïîëÿ ââîäó ðÿäê³â òåêñòó àáî ÷èñåëüí³ çíà÷åííÿ òà òåêñòîâ³ ïîëÿ. ϳäòâåðäæåííÿ çä³éñíþºòüñÿ íàòèñêîì êíîïêè, ÿêà ç'ÿâëÿºòüñÿ ïîðÿä ç ïîëåì ââîäó ï³ñëÿ ïî÷àòêó ðåäàãóâàííÿ.
Ïåðåêëàä
Êîìàíäè — öå åëåìåíòè äëÿ ïåðåäà÷³ âèçíà÷åíèõ ä³é âóçëó òà îðãàí³çàö³¿ ïîñèëàíü íà ñòîð³íêè. Êîìàíäè ìîæóòü ì³ñòèòè ïàðàìåòðè. Ïàðàìåòðè ôîðìóþòüñÿ ç áàçîâèõ åëåìåíò³â. Ïðèêëàä êîìàíäè ç ïàðàìåòðàìè íàâåäåíî íà ðèñ.5.
Ñïèñêè ì³ñòÿòü ãðóïó áàçîâèõ åëåìåíò³â îäíîãî òèïó. Îïåðàö³¿ íàä åëåìåíòàìè äîñòóïí³ ÷åðåç êîíòåêñòíå ìåíþ çà êë³êîì ìèøåþ íà ïåðåë³êó. ×åðåç åëåìåíòè ïåðåë³êó ìîæóòü çä³éñíþâàòèñÿ îïåðàö³¿ ïåðåõîäó íà ³íø³ ñòîð³íêè. Ñïèñêè ìîæóòü áóòè ³íäåêñîâàíèìè. Ïðèêëàä ñïèñêó ïðèâåäåíî íà ðèñ.6.
Òàáëèö³ ì³ñòÿòü çíà÷åííÿ áàçîâèõ åëåìåíò³â. Òèï áàçîâîãî åëåìåíòó º ³íäèâ³äóàëüíèì äëÿ êîæíîãî ñòîâï÷èêó. Ïðèêëàä òàáëèö³ ïðèâåäåíî íà ðèñ.7. Îïåðàö³¿ ³ç ñòðóêòóðîþ òàáëèö³ äëÿ ðåäàãîâàíèõ òàáëèöü äîñòóïí³ çà ïîñåðåäíèöòâîì êîíòåêñòíîãî ìåíþ çà êë³êîì íà ñëóæáîâîìó ñòîâï÷èêó ³ç íîìåðàìè ðÿäê³â. Ðåäàãóâàííÿ åëåìåíò³â òàáëèö³ çä³éñíþºòüñÿ øëÿõîì ïîäâ³éíîãî êë³êó íà ïîòð³áí³é êë³òèíö³.
Çîáðàæåííÿ çàêëèêàí³ ïåðåäàâàòè ãðàô³÷íó ³íôîðìàö³þ ó êîíô³ãóðàòîð³. Ïðèêëàä çîáðàæåííÿ íàâåäåíî íà ðèñ.8.
Ïðåäñòàâëåííÿ êîíô³ãóðàòîðó ìîæå äåùî â³äð³çíÿòèñÿ íà ð³çíèõ òèïàõ áðàóçåð³â. Öå ïîâ'ÿçàíî ç òèì, ùî ó îñíîâ³ öüîãî ìîäóëÿ ëåæèòü áàãàòî äîñòàòíüî ñêëàäíèõ òåõíîëîã³é, à òàêîæ â³äì³ííîñòåé ¿õ ðåàë³çàö³¿ íà ð³çíèõ òèïàõ WEB-ðóø³¿â.
Îêð³ì òîãî, êîæíèé Web-áðàóçåð ì³ñòèòü âëàñí³ ïîìèëêè. ×àñòèíà ïîìèëîê áóëî îá³éäåíà ó ïðîöåñ³ ðåàë³çàö³¿, îäíàê ÷àñòèíà çàëèøèëàñÿ ó çâ'ÿçêó ç³ çíà÷íèìè ñêëàäíîñòÿìè ó ¿õ îáõîä³ àáî-æ ôàêòè÷íî¿ íåìîæëèâîñò³ öå çðîáèòè.
Ó öüîìó ðîçä³ë³ ì³ñòèòüñÿ òàáëèöÿ ïåðåë³êó âèÿâëåíèõ ïîìèëîê WEB-áðàóçåð³â, ÿê³ ïðîÿâëÿþòüñÿ ó êîíô³ãóðàòîð³.
Îøèáêà | Îïèñàíèå | Èñïðàâëåíèå |
Mozilla FireFox 3.0.4 (óñòîé÷èâ, îøèáîê íåìíîãî) | ||
Ñìåùåíèå âñïëûâàþùåãî îêíà ðåäàêòèðóåìîãî êîìáîáîêñà íà 5 ïèêñåëîâ ââåðõ-âëåâî. | Ïðîáëåìà ñâÿçàíà ñ òåì, ÷òî âû÷èñëåíèå àáñîëþòíîé ïîçèöèè ýëåìåíòà äîêóìåíòà íå äîáèðàåò ðîâíî 5 ïèêñåëîâ. Îøèáêà íà 5 ïèêñåëîâ âèäíà â ñîïîñòàâëåíèè ñ êîîðäèíàòàìè êóðñîðà ìûøè è ïîëîæåíèåì âíîâü ñîçäàâàåìîãî àáñîëþòíî-ïîçèöèîíèðóåìîãî îêíà. Àëãîðèòì âû÷èñëåíèÿ ïîëîæåíèÿ: for( ; obj != null; obj = obj.offsetParent ) posX += obj.offsetLeft; | Äëÿ óñòðàíåíèÿ ýòîé îøèáêè ê ðàñ÷¸òíîìó çíà÷åíèþ íà ýòîì áðàóçåðå ïðèáàâëÿåòñÿ 5 ïèêñåëîâ. |
 ýëåìåíòå ñïèñêà (<select size="10"/>) âñåãäà îòîáðàæàåòñÿ âåðòèêàëüíûé ñêðîëëåð è íèêîãäà íå âêëþ÷àåòñÿ ãîðèçîíòàëüíûé. | Äàííûé ýëåìåíò àêòèâíî èñïîëüçóåòñÿ äëÿ ôîðìèðîâàíèÿ êîíòåêñòíîãî ìåíþ è âûïàäàþùåãî ñïèñêà ðåäàêòèðóåìîãî êîìáîáîêñà. | Äëÿ îáõîäà îøèáêè áðàóçåðà ïðèøëîñü âêëþ÷èòü ñïèñîê â áëîê ñî ñêðîëîì ñàìîãî áëîêà. |
Íå îáíîâëÿåòñÿ ïîëå èçîáðàæåíèÿ. | Äëÿ èñêëþ÷åíèÿ íåîáõîäèìîñòè ïåðåñòðîéêè êîíôèãóðèðóåìîé ñòðàíèöû ïðè îáíîâëåíèè çíà÷åíèé ïîëåé â äåðåâå îáúåêòîâ ñòðóêòóðû ñòðàíèöû, ïîëó÷åííîé ñ ïîìîùüþ XMLHttpRequest, ñîçäàþòñÿ ñâîéñòâà ñî ññûëêàìè íà îáúåêòû òåãîâ ïîëåé (addr_lab, addr_val_w).  îáúåêòàõ ñ èìåíåì òåãà "img" ýòè ñâîéñòâà áðàóçåðîì íå ñîçäàþòñÿ. | Ïðîáëåìà íå ðåøåíà |
Opera (óñòîé÷èâ, îøèáîê íåìíîãî) | ||
Íå âêëþ÷àåòñÿ ñêðîëëåð áëîêà ñòðàíèöû. Íàïðèìåð, ïðè îòîáðàæåíèè øèðîêèõ èçîáðàæåíèé òðåíäà. | Áëîê ÿâëÿåòñÿ ôèêñèðîâàííûì ñ ïàðàìåòðàìè { overflow: auto; width: 600px; }, îäíàêî, ïðè ïðåâûøåíèè ðàçìåðà âíóòðåííèõ ýëåìåíòîâ ñêðîëëåð íå âêëþ÷àåòñÿ. | Ïðîáëåìà íå ðåøåíà. |
Konqueror (î÷åíü íå óñòîé÷èâ íà äèíàìè÷åñêèõ ðåñóðñàõ è ñîäåðæèò ìíîæåñòâî îøèáîê) | ||
Ñòàáèëüíûå ïàäåíèÿ áðàóçåðà. | Áðàóçåð íåîäíîêðàòíî è ñòàáèëüíî ïàäàåò â ìîìåíòû âû÷èñëåíèÿ JavaScript è ïðè îïåðàöèÿõ ñ âíåøíèìè îêíàìè. | Ïðîáëåìà íå ðåøåíà. |
Íå âîçâðàùàåòñÿ ñêðîëë äåðåâà íàâèãàöèè. | Åñëè äåðåâî íàâèãàöèè ðàçâåðíóòü äî ïîÿâëåíèÿ âåðòèêàëüíîãî ñêðîëà, çàòåì ïðîêðóòèòü åãî âíèç, ïîñëå ÷åãî ñâåðíóòü êðóïíóþ âåòêó, òî âåðòèêàëüíûé ñêðîëë èñ÷åçàåò, à ÷àñòü äåðåâà îñòà¸òñÿ íåâèäèìîé çà âåðõíåé ÷àñòüþ áëîêà. Ò.å. ñîäåðæèìîå áëîêà íå îáíîâëÿåòñÿ. | Ïðîáëåìà íå ðåøåíà. |
Íå îáíîâëÿþòñÿ èçîáðàæåíèÿ | Â ïîëÿõ èçîáðàæåíèé äëÿ îáíîâëåíèÿ èçîáðàæåíèÿ èç ñåðâåðà èçìåíÿåòñÿ ñâîéñòâî "src". Áðàóçåð ýòîãî íå ÷óâñòâóåò, èíîãäà äàæå îáíîâëÿåò ðàçìåð ðàìêè, à èçîáðàæåíèå íå îáíîâëÿåò. Ìåòîäû äëÿ ïðåäîòâðàùåíèÿ êåøèðîâàíèÿ èçîáðàæåíèÿ ïðèìåíÿþòñÿ, íî íå ïîìîãàþò. | Ïðîáëåìà íå ðåøåíà. |
Ñõâàòûâàíèå èçîáðàæåíèé êíîïîê | JavaScript ìîäóëÿ èñïîëüçóþò íå àñèíõðîííûå, à ñèíõðîííûå çàïðîñû ê ñåðâåðó äëÿ ñîõðàíåíèÿ ïîñëåäîâàòåëüíîñòè äåéñòâèé. Â ìîìåíòû òàêîãî çàïðîñà, åñëè îí áûë âûçâàí ñîáûòèåì îò èçîáðàæåíèÿ (èçîáðàæåíèå ÿâëÿåòñÿ êíîïêîé), èçîáðàæåíèå ñõâàòûâàåòñÿ êàê áóäòî äëÿ ïåðåíîñà, äàæå ïî êðàòêîâðåìåííûì êëèêàì ìûøè. | Ïðîáëåìà íå ðåøåíà. |
Íåâîçìîæíî âñòàâèòü íîâûé ýëåìåíò â äåðåâî îáúåêòîâ, ïîëó÷åííîå êàê ðåçóëüòàò XMLHttpRequest | Äëÿ êîíòðîëÿ çà ìîäèôèêàöèåé ñòðóêòóðû êîíôèãóðàöèîííîé ñòðàíèöû èñïîëüçîâàëîñü ïðèâåäåíèå òåêóùåãî äåðåâà ñòðóêòóðû ê íîâîé, òîëüêî ÷òî ïîëó÷åííîé èç XMLHttpRequest.  ìîìåíò âñòàâêè íîâîãî ýëåìåíòà â äåðåâî ñòðóêòóðû ïîñðåäñòâîì insertBefore() ïðîèñõîäèò îøèáêà "DOM error 4". Åñëè âñòàâêà ïðîèçâîäèòñÿ â äåðåâî, ñîçäàííîå ñ íóëÿ (à íå èç XMLHttpRequest), ýòà îøèáêà íå ïðîèñõîäèò. Ïîõîæå ïðîáëåìà çàêëþ÷àåòñÿ â îòëè÷èè îáúåêòà "document" âëàäåëüöà ýòèõ äåðåâüåâ.  òàêîå äåðåâî íåâîçìîæíî äîáàâèòü óçåë, ñîçäàííûé êàê document.createElement(). Âñòàâëÿþòñÿ òîëüêî ñîçäàííûå êàê mytree.ownerDocument.createElement(). | Ïðîöåäóðà ïðîâåðêè ñòðóêòóðû áûëà óïðîùåíà è ñâåäåíà ê îïðåäåëåíèþ ôàêòà èçìåíåíèÿ. |
Íå ðàáîòàþò ìåõàíèçìû ôîðìèðîâàíèÿ êîíòåêñòíîãî ìåíþ íà Konqueror 4. | Îáû÷íî äëÿ ôîðìèðîâàíèÿ êîíòåêñòíîãî ìåíþ èñïîëüçóåòñÿ îáðàáîò÷èê oncontextmenu, íà Firefox è IE èëè onmousedown ñ îáðàáîòêîé ïðàâîé êëàâèøè íà â îñòàëüíûõ áðàóçåðàõ.  Konqueror âîîáùå oncontextmenu íå ðàáîòàåò, à onmousedown ðàáîòàåò òîëüêî â Konqueror 3.5. | Ïðîáëåìà íå ðåøåíà. |