Áú»¢¶Ä²©

§±§â§Ö§Ù§Ö§ß§ä§Ñ§è§Ú§ñ

§¯§Ñ §ï§ä§à§Û §ã§ä§â§Ñ§ß§Ú§è§Ö §à§á§Ú§ã§Ñ§ß§í §Ü§à§Þ§á§à§ß§Ö§ß§ä§í, §Ü§à§ä§à§â§í§Ö §Þ§à§Ø§ß§à §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ä§î §Õ§Ý§ñ §ã§à§Ù§Õ§Ñ§ß§Ú§ñ §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §±§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ - §ï§ä§à §é§Ñ§ã§ä§î §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ü§à§ä§à§â§Ñ§ñ §á§à§Ý§å§é§Ñ§Ö§ä §Õ§Ñ§ß§ß§í§Ö §Ó §ã§à§à§ä§Ó§Ö§ä§ã§ä§Ó§Ú§Ú §ã§à §ã§Ó§à§Ö§Û §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ö§Û §Ú §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä §Ú§ç §ß§Ñ §Ú§ß§æ§à§â§Þ§Ñ§è§Ú§à§ß§ß§à§Û §á§Ñ§ß§Ö§Ý§Ú §Ó §Ü§à§ß§ä§Ö§Û§ß§Ö§â§Ö.

§±§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §á§â§Ö§Ù§Ö§ß§ä§Ñ§è§Ú§Ú §ã§à§ã§ä§à§Ú§ä §Ú§Ù §ä§â§Ö§ç §é§Ñ§ã§ä§Ö§Û:

• §¥§Ö§Û§ã§ä§Ó§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ
• §±§â§à§ã§Þ§à§ä§â §Ó§Ú§Õ§Ø§Ö§ä§Ñ
• JavaScript

§¥§Ö§Û§ã§ä§Ó§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ

§¬§Ý§Ñ§ã§ã §Õ§Ö§Û§ã§ä§Ó§Ú§Û §Ó§Ú§Õ§Ø§Ö§ä§Ñ (WidgetView) §ã§à§Õ§Ö§â§Ø§Ú§ä §Þ§Ö§ä§à§Õ§í §Õ§Ý§ñ §â§Ñ§Ò§à§ä§í §ã §Ó§Ú§Õ§Ø§Ö§ä§Ñ§Þ§Ú §Ó §â§Ö§Ø§Ú§Þ§Ö §á§â§à§ã§Þ§à§ä§â§Ñ §á§â§Ö§Ù§Ö§ß§ä§Ñ§è§Ú§Ú. §¢§à§Ý§î§ê§Ú§ß§ã§ä§Ó§à §Õ§Ö§Û§ã§ä§Ó§Ú§Û §Ó§Ú§Õ§Ø§Ö§ä§à§Ó §Ú§ã§á§à§Ý§î§Ù§å§ð§ä §Ú/§Ú§Ý§Ú §â§Ñ§ã§ê§Ú§â§ñ§ð§ä §Ü§Ý§Ñ§ã§ã §Ü§à§ß§ä§â§à§Ý§Ý§Ö§â§Ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð CControllerDashboardWidgetView.

§¬§Ý§Ñ§ã§ã §Õ§Ö§Û§ã§ä§Ó§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Õ§à§Ý§Ø§Ö§ß §ß§Ñ§ç§à§Õ§Ú§ä§î§ã§ñ §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö actions §Ú §å§Ü§Ñ§Ù§í§Ó§Ñ§ä§î§ã§ñ §Ó §á§Ñ§â§Ñ§Þ§Ö§ä§â§Ö actions (actions/widget.{id}.view/class) §Ó §æ§Ñ§Û§Ý§Ö manifest.json.

§±§â§Ú§Þ§Ö§â actions/WidgetView.php (§â§Ö§Ñ§Ý§Ú§Ù§à§Ó§Ñ§ß §Ó §â§à§Õ§ß§à§Þ §Õ§Ý§ñ Áú»¢¶Ä²© §Ó§Ú§Õ§Ø§Ö§ä§Ö §ª§ß§æ§à§â§Þ§Ñ§è§Ú§ñ §à §ã§Ú§ã§ä§Ö§Þ§Ö)

class WidgetView extends CControllerDashboardWidgetView {
       
           protected function doAction(): void {
               $this->setResponse(new CControllerResponseData([
                   'name' => $this->getInput('name', $this->widget->getDefaultName()),
                   'system_info' => CSystemInfoHelper::getData(),
                   'info_type' => $this->fields_values['info_type'],
                   'user_type' => CWebUser::getType(),
                   'user' => [
                       'debug_mode' => $this->getDebugMode()
                   ]
               ]));
           }
       }

§£§Ú§Õ§Ø§Ö§ä

§¬§Ý§Ñ§ã§ã §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ (CWidgetView) §à§ä§Ó§Ö§é§Ñ§Ö§ä §Ù§Ñ §á§à§ã§ä§â§à§Ö§ß§Ú§Ö §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ.

§¬§Ý§Ñ§ã§ã §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Õ§à§Ý§Ø§Ö§ß §ß§Ñ§ç§à§Õ§Ú§ä§î§ã§ñ §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö views. §¦§ã§Ý§Ú §æ§Ñ§Û§Ý, §ã§à§Õ§Ö§â§Ø§Ñ§ë§Ú§Û §Ü§Ý§Ñ§ã§ã §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ú§Þ§Ö§Ö§ä §Ú§Þ§ñ, §à§ä§Ý§Ú§é§ß§à§Ö §à§ä §Ú§Þ§Ö§ß§Ú §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð (widget.view.php), §ä§à §Ö§Ô§à §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§à §å§Ü§Ñ§Ù§Ñ§ä§î §Ó §æ§Ñ§Û§Ý§Ö manifest.json actions §á§Ñ§â§Ñ§Þ§Ö§ä§â (actions/widget.{id}.view/view).

§á§â§Ú§Þ§Ö§â views/widget.view.php

<?php
       
       /**
        * My custom widget view.
        *
        * @var CView $this
        * @var array $data
        */
       
       (new CWidgetView($data))
           ->addItem(
               new CTag('h1', true, $data['name'])
           )
           ->show();

JavaScript

§¬§Ý§Ñ§ã§ã JavaScript §à§ä§Ó§Ö§é§Ñ§Ö§ä §Ù§Ñ §à§á§â§Ö§Õ§Ö§Ý§Ö§ß§Ú§Ö §á§à§Ó§Ö§Õ§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §ß§Ñ§á§â§Ú§Þ§Ö§â, §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§Ö §Õ§Ñ§ß§ß§í§ç §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§Ö §â§Ñ§Ù§Þ§Ö§â§Ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §à§ä§à§Ò§â§Ñ§Ø§Ö§ß§Ú§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§à§Ó §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú §ä. §Õ.

§£§ã§Ö §à§á§Ö§â§Ñ§è§Ú§Ú JavaScript §Ú§ã§á§à§Ý§î§Ù§å§ð§ä §Ú/§Ú§Ý§Ú §â§Ñ§ã§ê§Ú§â§ñ§ð§ä §Ò§Ñ§Ù§à§Ó§í§Û §Ü§Ý§Ñ§ã§ã JavaScript §Ó§ã§Ö§ç §Ó§Ú§Õ§Ø§Ö§ä§à§Ó §á§Ñ§ß§Ö§Ý§Ú - CWidget. §¬§Ý§Ñ§ã§ã CWidget §ã§à§Õ§Ö§â§Ø§Ú§ä §ß§Ñ§Ò§à§â §Þ§Ö§ä§à§Õ§à§Ó §ã §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§Ö§Û §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð §Õ§Ý§ñ §á§à§Ó§Ö§Õ§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §£ §Ù§Ñ§Ó§Ú§ã§Ú§Þ§à§ã§ä§Ú §à§ä §ã§Ý§à§Ø§ß§à§ã§ä§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ï§ä§Ú §Þ§Ö§ä§à§Õ§í §Þ§à§Ø§ß§à §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ä§î §Ü§Ñ§Ü §Ö§ã§ä§î §Ú§Ý§Ú §â§Ñ§ã§ê§Ú§â§Ú§ä§î.

§¬§Ý§Ñ§ã§ã CWidget §ã§à§Õ§Ö§â§Ø§Ú§ä §ã§Ý§Ö§Õ§å§ð§ë§Ú§Ö §Þ§Ö§ä§à§Õ§í:

• §®§Ö§ä§à§Õ§í, §à§á§â§Ö§Õ§Ö§Ý§ñ§ð§ë§Ú§Ö §Ø§Ú§Ù§ß§Ö§ß§ß§í§Û §è§Ú§Ü§Ý §Ó§Ú§Õ§Ø§Ö§ä§Ñ: onInitialize(), onStart(), onActivate(), onDeactivate(), onDestroy(), onEdit().
• §®§Ö§ä§à§Õ§í, §à§Ò§â§Ñ§Ò§Ñ§ä§í§Ó§Ñ§ð§ë§Ú§Ö §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§Ö §Ú §à§ä§à§Ò§â§Ñ§Ø§Ö§ß§Ú§Ö §Õ§Ñ§ß§ß§í§ç §Ó§Ú§Õ§Ø§Ö§ä§Ñ: promiseUpdate(), getUpdateRequestData(), processUpdateResponse(response), processUpdateErrorResponse(error), setContents(response).
• §®§Ö§ä§à§Õ§í, §Ú§Ù§Þ§Ö§ß§ñ§ð§ë§Ú§Ö §Ó§ß§Ö§ê§ß§Ú§Û §Ó§Ú§Õ §Ó§Ú§Õ§Ø§Ö§ä§Ñ: onResize(), hasPadding().

§¬§Ý§Ñ§ã§ã JavaScript §Õ§à§Ý§Ø§Ö§ß §ß§Ñ§ç§à§Õ§Ú§ä§î§ã§ñ §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö assets/js §Ú §å§Ü§Ñ§Ù§í§Ó§Ñ§ä§î§ã§ñ §Ó §á§Ñ§â§Ñ§Þ§Ö§ä§â§Ö assets (assets/js) §Ó manifest.json §æ§Ñ§Û§Ý.

§®§Ö§ä§à§Õ§í §Ø§Ú§Ù§ß§Ö§ß§ß§à§Ô§à §è§Ú§Ü§Ý§Ñ

§®§Ö§ä§à§Õ§í §Ø§Ú§Ù§ß§Ö§ß§ß§à§Ô§à §è§Ú§Ü§Ý§Ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ó§í§Ù§í§Ó§Ñ§ð§ä§ã§ñ §á§Ñ§ß§Ö§Ý§î§ð §Ú §ß§Ñ §â§Ñ§Ù§ß§í§ç §ï§ä§Ñ§á§Ñ§ç §Ø§Ú§Ù§ß§Ö§ß§ß§à§Ô§à §è§Ú§Ü§Ý§Ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ó§à §Ó§â§Ö§Þ§ñ §Ö§Ô§à §ã§å§ë§Ö§ã§ä§Ó§à§Ó§Ñ§ß§Ú§ñ §ß§Ñ §á§Ñ§ß§Ö§Ý§Ú.

§®§Ö§ä§à§Õ onInitialize() §à§á§â§Ö§Õ§Ö§Ý§ñ§Ö§ä §Ú§ã§ç§à§Õ§ß§à§Ö §ã§à§ã§ä§à§ñ§ß§Ú§Ö §Ú/§Ú§Ý§Ú §Ù§ß§Ñ§é§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ò§Ö§Ù §Ó§í§á§à§Ý§ß§Ö§ß§Ú§ñ §Ü§Ñ§Ü§Ú§ç-§Ý§Ú§Ò§à §Þ§Ñ§ß§Ú§á§å§Ý§ñ§è§Ú§Û §ã HTML §Ú§Ý§Ú §Õ§Ñ§ß§ß§í§Þ§Ú. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §á§â§Ú §ã§à§Ù§Õ§Ñ§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ (§ã§à§Ù§Õ§Ñ§Ö§ä§ã§ñ §ï§Ü§Ù§Ö§Þ§á§Ý§ñ§â §à§Ò§ì§Ö§Ü§ä§Ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ), §à§Ò§í§é§ß§à §á§å§ä§Ö§Þ §Õ§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ß§Ñ §ã§ä§â§Ñ§ß§Ú§è§å §á§Ñ§ß§Ö§Ý§Ú §Ú§Ý§Ú §Ù§Ñ§Ô§â§å§Ù§Ü§Ú §ã§ä§â§Ñ§ß§Ú§è§í §á§Ñ§ß§Ö§Ý§Ú.

§±§â§Ú§Þ§Ö§â:

onInitialize() {
           this._time_offset = 0;
           this._interval_id = null;
           this._clock_type = CWidgetClock.TYPE_ANALOG;
           this._time_zone = null;
           this._show_seconds = true;
           this._time_format = 0;
           this._tzone_format = 0;
           this._show = [];
           this._has_contents = false;
           this._is_enabled = true;
       }

§®§Ö§ä§à§Õ onStart() §à§á§â§Ö§Õ§Ö§Ý§ñ§Ö§ä HTML-§ã§ä§â§å§Ü§ä§å§â§å §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §ß§Ö §Ó§í§á§à§Ý§ß§ñ§ñ §ß§Ú§Ü§Ñ§Ü§Ú§ç §Þ§Ñ§ß§Ú§á§å§Ý§ñ§è§Ú§Û §ã §Õ§Ñ§ß§ß§í§Þ§Ú. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §á§Ö§â§Ö§Õ §á§Ö§â§Ó§à§Û §Ñ§Ü§ä§Ú§Ó§Ñ§è§Ú§Ö§Û §ã§ä§â§Ñ§ß§Ú§è§í §á§Ñ§ß§Ö§Ý§Ú §Þ§à§ß§Ú§ä§à§â§Ú§ß§Ô§Ñ, §ä§à §Ö§ã§ä§î §Õ§à §ä§à§Ô§à, §Ü§Ñ§Ü §á§Ñ§ß§Ö§Ý§î §Þ§à§ß§Ú§ä§à§â§Ú§ß§Ô§Ñ §Ú §Ö§Ö §Ó§Ú§Õ§Ø§Ö§ä§í §á§à§Ý§ß§à§ã§ä§î§ð §à§ä§à§Ò§â§Ñ§Ù§ñ§ä§ã§ñ §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§ð.

§±§â§Ú§Þ§Ö§â:

onStart() {
           this._events.resize = () => {
               const padding = 25;
               const header_height = this._view_mode === ZBX_WIDGET_VIEW_MODE_HIDDEN_HEADER
                   ? 0
                   : this._header.offsetHeight;
       
               this._target.style.setProperty(
                   '--content-height',
                   `${this._cell_height * this._pos.height - padding * 2 - header_height}px`
               );
           }
       }

§®§Ö§ä§à§Õ onActivate() §Õ§Ö§Ý§Ñ§Ö§ä §Ó§Ú§Õ§Ø§Ö§ä §Ñ§Ü§ä§Ú§Ó§ß§í§Þ §Ú §Ú§ß§ä§Ö§â§Ñ§Ü§ä§Ú§Ó§ß§í§Þ, §Ó§Ü§Ý§ð§é§Ñ§ñ §ß§Ñ§ã§ä§â§Ñ§Ú§Ó§Ñ§Ö§Þ§í§Ö §á§â§à§ã§Ý§å§ê§Ú§Ó§Ñ§ä§Ö§Ý§Ú §ã§à§Ò§í§ä§Ú§Û (§Õ§Ý§ñ §â§Ö§Ñ§Ô§Ú§â§à§Ó§Ñ§ß§Ú§ñ §ß§Ñ §Õ§Ö§Û§ã§ä§Ó§Ú§ñ §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§ñ) §Ú §Ù§Ñ§á§å§ã§Ü§Ñ§ñ §è§Ú§Ü§Ý §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ (§Õ§Ý§ñ §á§à§Õ§Õ§Ö§â§Ø§Ñ§ß§Ú§ñ §Ñ§Ü§ä§å§Ñ§Ý§î§ß§à§ã§ä§Ú §Ö§Ô§à §ã§à§Õ§Ö§â§Ø§Ú§Þ§à§Ô§à). §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §á§â§Ú §Ñ§Ü§ä§Ú§Ó§Ñ§è§Ú§Ú §ã§ä§â§Ñ§ß§Ú§è§í §Ú§ß§æ§à§â§Þ§Ñ§è§Ú§à§ß§ß§à§Û §á§Ñ§ß§Ö§Ý§Ú, §ä§à §Ö§ã§ä§î §Ü§à§Ô§Õ§Ñ §à§ß§Ñ §á§à§Ý§ß§à§ã§ä§î§ð §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä§ã§ñ §Ó §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î§ã§Ü§à§Þ §Ú§ß§ä§Ö§â§æ§Ö§Û§ã§Ö.

§°§Ò§â§Ñ§ä§Ú§ä§Ö §Ó§ß§Ú§Þ§Ñ§ß§Ú§Ö, §é§ä§à §Õ§à §Ó§í§Ù§à§Ó§Ñ §Þ§Ö§ä§à§Õ§Ñ onActivate() §Ó§Ú§Õ§Ø§Ö§ä §ß§Ñ§ç§à§Õ§Ú§ä§ã§ñ §Ó §ß§Ö§Ñ§Ü§ä§Ú§Ó§ß§à§Þ §ã§à§ã§ä§à§ñ§ß§Ú§Ú (?WIDGET_STATE_INACTIVE?). §±§à§ã§Ý§Ö §å§ã§á§Ö§ê§ß§à§Ô§à §Ó§í§Ù§à§Ó§Ñ §Ó§Ú§Õ§Ø§Ö§ä §á§Ö§â§Ö§ç§à§Õ§Ú§ä §Ó §Ñ§Ü§ä§Ú§Ó§ß§à§Ö §ã§à§ã§ä§à§ñ§ß§Ú§Ö (?WIDGET_STATE_ACTIVE?). §£ §Ñ§Ü§ä§Ú§Ó§ß§à§Þ §ã§à§ã§ä§à§ñ§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä §â§Ö§Ñ§Ô§Ú§â§å§Ö§ä, §ã§Ý§å§ê§Ñ§Ö§ä §ã§à§Ò§í§ä§Ú§ñ, §á§Ö§â§Ú§à§Õ§Ú§é§Ö§ã§Ü§Ú §à§Ò§ß§à§Ó§Ý§ñ§Ö§ä §ã§Ó§à§Ö §ã§à§Õ§Ö§â§Ø§Ú§Þ§à§Ö §Ú §Þ§à§Ø§Ö§ä §Ó§Ù§Ñ§Ú§Þ§à§Õ§Ö§Û§ã§ä§Ó§à§Ó§Ñ§ä§î §ã §Õ§â§å§Ô§Ú§Þ§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ§Þ§Ú.

§±§â§Ú§Þ§Ö§â:

onActivate() {
           this._startClock();
       
           this._resize_observer = new ResizeObserver(this._events.resize);
           this._resize_observer.observe(this._target);
       }

§®§Ö§ä§à§Õ onDeactivate() §à§ã§ä§Ñ§ß§Ñ§Ó§Ý§Ú§Ó§Ñ§Ö§ä §Ý§ð§Ò§å§ð §Ñ§Ü§ä§Ú§Ó§ß§à§ã§ä§î §Ú §Ú§ß§ä§Ö§â§Ñ§Ü§ä§Ú§Ó§ß§à§ã§ä§î §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Õ§Ö§Ñ§Ü§ä§Ú§Ó§Ú§â§å§ñ §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î§ã§Ü§Ú§Ö §á§â§à§ã§Ý§å§ê§Ú§Ó§Ñ§ä§Ö§Ý§Ú §ã§à§Ò§í§ä§Ú§Û §Ú §à§ã§ä§Ñ§ß§Ñ§Ó§Ý§Ú§Ó§Ñ§ñ §è§Ú§Ü§Ý §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ, §Ü§à§Ô§Õ§Ñ §ã§ä§â§Ñ§ß§Ú§è§Ñ §á§Ñ§ß§Ö§Ý§Ú §Õ§Ö§Ñ§Ü§ä§Ú§Ó§Ú§â§å§Ö§ä§ã§ñ, §ä§à §Ö§ã§ä§î §à§ä§Ü§Ý§ð§é§Ñ§Ö§ä§ã§ñ §Ú§Ý§Ú §å§Õ§Ñ§Ý§ñ§Ö§ä§ã§ñ, §Ú§Ý§Ú §Ü§à§Ô§Õ§Ñ §Ó§Ú§Õ§Ø§Ö§ä §å§Õ§Ñ§Ý§ñ§Ö§ä§ã§ñ §ã§à §ã§ä§â§Ñ§ß§Ú§è§í §á§Ñ§ß§Ö§Ý§Ú.

§°§Ò§â§Ñ§ä§Ú§ä§Ö §Ó§ß§Ú§Þ§Ñ§ß§Ú§Ö, §é§ä§à §Õ§à §Ó§í§Ù§à§Ó§Ñ §Þ§Ö§ä§à§Õ§Ñ onDeactivate() §Ó§Ú§Õ§Ø§Ö§ä §ß§Ñ§ç§à§Õ§Ú§ä§ã§ñ §Ó §Ñ§Ü§ä§Ú§Ó§ß§à§Þ §ã§à§ã§ä§à§ñ§ß§Ú§Ú (WIDGET_STATE_ACTIVE). §±§à§ã§Ý§Ö §å§ã§á§Ö§ê§ß§à§Ô§à §Ó§í§Ù§à§Ó§Ñ §Ó§Ú§Õ§Ø§Ö§ä §á§Ö§â§Ö§ç§à§Õ§Ú§ä §Ó §ß§Ö§Ñ§Ü§ä§Ú§Ó§ß§à§Ö §ã§à§ã§ä§à§ñ§ß§Ú§Ö (?WIDGET_STATE_INACTIVE?).

§±§â§Ú§Þ§Ö§â:

onDeactivate() {
           this._stopClock();
           this._resize_observer.disconnect();
       }

§®§Ö§ä§à§Õ onDestroy() §Ó§í§á§à§Ý§ß§ñ§Ö§ä §Ù§Ñ§Õ§Ñ§é§Ú §à§é§Ú§ã§ä§Ü§Ú §á§Ö§â§Ö§Õ §å§Õ§Ñ§Ý§Ö§ß§Ú§Ö§Þ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ã §á§Ñ§ß§Ö§Ý§Ú §å§á§â§Ñ§Ó§Ý§Ö§ß§Ú§ñ, §é§ä§à §Þ§à§Ø§Ö§ä §Ó§Ü§Ý§ð§é§Ñ§ä§î §Ó §ã§Ö§Ò§ñ §Ù§Ñ§Ü§â§í§ä§Ú§Ö §ã§à§Ö§Õ§Ú§ß§Ö§ß§Ú§ñ §ã §Ò§Ñ§Ù§à§Û §Õ§Ñ§ß§ß§í§ç, §Ü§à§ä§à§â§à§Ö §Ò§í§Ý§à §å§ã§ä§Ñ§ß§à§Ó§Ý§Ö§ß§à §Ó§à §Ó§â§Ö§Þ§ñ §Ú§ß§Ú§è§Ú§Ñ§Ý§Ú§Ù§Ñ§è§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §à§é§Ú§ã§ä§Ü§Ñ §Ó§â§Ö§Þ§Ö§ß§ß§í§ç §Õ§Ñ§ß§ß§í§ç §Õ§Ý§ñ §à§ã§Ó§à§Ò§à§Ø§Õ§Ö§ß§Ú§ñ §ã§Ú§ã§ä§Ö§Þ§ß§à§Û §á§Ñ§Þ§ñ§ä§Ú §Ú §á§â§Ö§Õ§à§ä§Ó§â§Ñ§ë§Ö§ß§Ú§ñ §å§ä§Ö§é§Ö§Ü §â§Ö§ã§å§â§ã§à§Ó, §à§ä§Þ§Ö§ß§Ñ §â§Ö§Ô§Ú§ã§ä§â§Ñ§è§Ú§Ú §á§â§à§ã§Ý§å§ê§Ú§Ó§Ñ§ä§Ö§Ý§Ö§Û §ã§à§Ò§í§ä§Ú§Û, §ã§Ó§ñ§Ù§Ñ§ß§ß§í§ç §ã §ã§à§Ò§í§ä§Ú§ñ§Þ§Ú §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§ñ §â§Ñ§Ù§Þ§Ö§â§Ñ §Ú§Ý§Ú §ß§Ñ§Ø§Ñ§ä§Ú§ñ§Þ§Ú §Ü§ß§à§á§à§Ü, §é§ä§à§Ò§í §á§â§Ö§Õ§à§ä§Ó§â§Ñ§ä§Ú§ä§î §ß§Ö§ß§å§Ø§ß§å§ð §à§Ò§â§Ñ§Ò§à§ä§Ü§å §ã§à§Ò§í§ä§Ú§Û §Ú §å§ä§Ö§é§Ü§Ú §á§Ñ§Þ§ñ§ä§Ú §Ú §ä. §Õ. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §á§â§Ú §å§Õ§Ñ§Ý§Ö§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú§Ý§Ú §ã§ä§â§Ñ§ß§Ú§è§í §Ú§ß§æ§à§â§Þ§Ñ§è§Ú§à§ß§ß§à§Û §á§Ñ§ß§Ö§Ý§Ú, §Ü§à§ä§à§â§Ñ§ñ §Ö§Ô§à §ã§à§Õ§Ö§â§Ø§Ú§ä.

§°§Ò§â§Ñ§ä§Ú§ä§Ö §Ó§ß§Ú§Þ§Ñ§ß§Ú§Ö, §é§ä§à §á§Ö§â§Ö§Õ §Ó§í§Ù§à§Ó§à§Þ §Þ§Ö§ä§à§Õ§Ñ onDestroy() §Ó§Ú§Õ§Ø§Ö§ä §Ó §Ñ§Ü§ä§Ú§Ó§ß§à§Þ §ã§à§ã§ä§à§ñ§ß§Ú§Ú (WIDGET_STATE_ACTIVE) §Ó§ã§Ö§Ô§Õ§Ñ §Õ§Ö§Ñ§Ü§ä§Ú§Ó§Ú§â§å§Ö§ä§ã§ñ §ã §á§à§Þ§à§ë§î§ð §Ó§í§Ù§à§Ó§Ñ §Þ§Ö§ä§à§Õ§Ñ onDeactivate().

§±§â§Ú§Þ§Ö§â:

onDestroy() {
           if (this._filter_widget) {
               this._filter_widget.off(CWidgetMap.WIDGET_NAVTREE_EVENT_MARK, this._events.mark);
               this._filter_widget.off(CWidgetMap.WIDGET_NAVTREE_EVENT_SELECT, this._events.select);
           }
       }

§®§Ö§ä§à§Õ onEdit() §à§á§â§Ö§Õ§Ö§Ý§ñ§Ö§ä §Ó§ß§Ö§ê§ß§Ú§Û §Ó§Ú§Õ §Ú §á§à§Ó§Ö§Õ§Ö§ß§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ §á§â§Ú §á§Ö§â§Ö§ç§à§Õ§Ö §á§Ñ§ß§Ö§Ý§Ú §å§á§â§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó §â§Ö§Ø§Ú§Þ §â§Ö§Õ§Ñ§Ü§ä§Ú§â§à§Ó§Ñ§ß§Ú§ñ. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ, §Ü§à§Ô§Õ§Ñ §á§Ñ§ß§Ö§Ý§î §Þ§à§ß§Ú§ä§à§â§Ú§ß§Ô§Ñ §á§Ö§â§Ö§ç§à§Õ§Ú§ä §Ó §â§Ö§Ø§Ú§Þ §â§Ö§Õ§Ñ§Ü§ä§Ú§â§à§Ó§Ñ§ß§Ú§ñ, §à§Ò§í§é§ß§à §Ü§à§Ô§Õ§Ñ §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î §Ó§Ù§Ñ§Ú§Þ§à§Õ§Ö§Û§ã§ä§Ó§å§Ö§ä §ã §Ü§ß§à§á§Ü§à§Û §²§Ö§Õ§Ñ§Ü§ä§Ú§â§à§Ó§Ñ§ä§î §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú§Ý§Ú §Ü§ß§à§á§Ü§à§Û §²§Ö§Õ§Ñ§Ü§ä§Ú§â§à§Ó§Ñ§ä§î §á§Ñ§ß§Ö§Ý§î §á§Ñ§ß§Ö§Ý§Ú §Þ§à§ß§Ú§ä§à§â§Ú§ß§Ô§Ñ.

§±§â§Ú§Þ§Ö§â:

onEdit() {
           this._deactivateGraph();
       }

§®§Ö§ä§à§Õ§í §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ

§®§Ö§ä§à§Õ§í §á§â§à§è§Ö§ã§ã§Ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §à§ä§Ó§Ö§é§Ñ§ð§ä §Ù§Ñ §á§à§Ý§å§é§Ö§ß§Ú§Ö §à§Ò§ß§à§Ó§Ý§Ö§ß§ß§í§ç §Õ§Ñ§ß§ß§í§ç §ã §ã§Ö§â§Ó§Ö§â§Ñ Áú»¢¶Ä²© §Ú§Ý§Ú §Ý§ð§Ò§à§Ô§à §Õ§â§å§Ô§à§Ô§à §Ú§ã§ä§à§é§ß§Ú§Ü§Ñ §Õ§Ñ§ß§ß§í§ç §Ú §Ú§ç §à§ä§à§Ò§â§Ñ§Ø§Ö§ß§Ú§Ö §Ó §Ó§Ú§Õ§Ø§Ö§ä§Ö.

§®§Ö§ä§à§Õ promiseUpdate() §Ú§ß§Ú§è§Ú§Ú§â§å§Ö§ä §á§â§à§è§Ö§ã§ã §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Õ§Ñ§ß§ß§í§ç §á§å§ä§Ö§Þ §á§à§Ý§å§é§Ö§ß§Ú§ñ §Õ§Ñ§ß§ß§í§ç, §à§Ò§í§é§ß§à §ã §á§à§Þ§à§ë§î§ð §Ó§Ö§Ò-§Ù§Ñ§á§â§à§ã§à§Ó §Ú§Ý§Ú §Ó§í§Ù§à§Ó§à§Ó API. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §á§â§Ú §à§ä§à§Ò§â§Ñ§Ø§Ö§ß§Ú§Ú §ã§ä§â§Ñ§ß§Ú§è§í §á§Ñ§ß§Ö§Ý§Ú §Ú §á§Ö§â§Ú§à§Õ§Ú§é§Ö§ã§Ü§Ú §á§à§ã§Ý§Ö §ï§ä§à§Ô§à, §á§à§Ü§Ñ §ã§ä§â§Ñ§ß§Ú§è§Ñ §á§Ñ§ß§Ö§Ý§Ú §ß§Ö §á§Ö§â§Ö§Ü§Ý§ð§é§Ú§ä§ã§ñ §ß§Ñ §Õ§â§å§Ô§å§ð §ã§ä§â§Ñ§ß§Ú§è§å §á§Ñ§ß§Ö§Ý§Ú.

§¯§Ú§Ø§Ö §á§â§Ú§Ó§Ö§Õ§Ö§ß §á§â§Ú§Þ§Ö§â §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§Ú §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð §Þ§Ö§ä§à§Õ§Ñ promiseUpdate(), §Ú§ã§á§à§Ý§î§Ù§å§Ö§Þ§à§Ô§à §Ò§à§Ý§î§ê§Ú§ß§ã§ä§Ó§à§Þ §â§à§Õ§ß§í§ç §Ó§Ú§Õ§Ø§Ö§ä§à§Ó Áú»¢¶Ä²©. §£ §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§Ú §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð §Þ§Ö§ä§à§Õ promiseUpdate() §ã§à§à§ä§Ó§Ö§ä§ã§ä§Ó§å§Ö§ä §à§Ò§ë§Ö§Þ§å §ê§Ñ§Ò§Ý§à§ß§å §á§à§Ý§å§é§Ö§ß§Ú§ñ §Õ§Ñ§ß§ß§í§ç §ã §ã§Ö§â§Ó§Ö§â§Ñ. §°§ß §ã§à§Ù§Õ§Ñ§Ö§ä §ß§à§Ó§í§Û §à§Ò§ì§Ö§Ü§ä Curl §ã §ã§à§à§ä§Ó§Ö§ä§ã§ä§Ó§å§ð§ë§Ú§Þ URL-§Ñ§Õ§â§Ö§ã§à§Þ §Ú §á§Ñ§â§Ñ§Þ§Ö§ä§â§Ñ§Þ§Ú §Ù§Ñ§á§â§à§ã§Ñ, §à§ä§á§â§Ñ§Ó§Ý§ñ§Ö§ä §Ù§Ñ§á§â§à§ã POST §ã §á§à§Þ§à§ë§î§ð §Þ§Ö§ä§à§Õ§Ñ fetch() §ã §à§Ò§ì§Ö§Ü§ä§à§Þ §Õ§Ñ§ß§ß§í§ç, §ã§à§Ù§Õ§Ñ§ß§ß§í§Þ §Þ§Ö§ä§à§Õ§à§Þ getUpdateRequestData(), §Ú §à§Ò§â§Ñ§Ò§Ñ§ä§í§Ó§Ñ§Ö§ä §à§ä§Ó§Ö§ä (§Ú§Ý§Ú §à§ä§Ó§Ö§ä §à§Ò §à§ê§Ú§Ò§Ü§Ö) §ã §á§à§Þ§à§ë§î§ð processUpdateResponse(response) §Ú§Ý§Ú processUpdateErrorResponse(error) §ã§à§à§ä§Ó§Ö§ä§ã§ä§Ó§Ö§ß§ß§à. §¿§ä§Ñ §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ §á§à§Õ§ç§à§Õ§Ú§ä §Õ§Ý§ñ §Ò§à§Ý§î§ê§Ú§ß§ã§ä§Ó§Ñ §Ó§Ú§Õ§Ø§Ö§ä§à§Ó, §á§à§ã§Ü§à§Ý§î§Ü§å §à§ß§Ú §à§Ò§í§é§ß§à §á§à§Ý§å§é§Ñ§ð§ä §Õ§Ñ§ß§ß§í§Ö §Ó §æ§à§â§Þ§Ñ§ä§Ö JSON §Ú §à§Ò§â§Ñ§Ò§Ñ§ä§í§Ó§Ñ§ð§ä §Ú§ç §ã§à§Ô§Ý§Ñ§ã§à§Ó§Ñ§ß§ß§í§Þ §à§Ò§â§Ñ§Ù§à§Þ.

promiseUpdate() {
           const curl = new Curl('zabbix.php');
       
           curl.setArgument('action', `widget.${this._type}.view`);
       
           return fetch(curl.getUrl(), {
               method: 'POST',
               headers: {'Content-Type': 'application/json'},
               body: JSON.stringify(this.getUpdateRequestData()),
               signal: this._update_abort_controller.signal
           })
               .then((response) => response.json())
               .then((response) => {
                   if ('error' in response) {
                       this.processUpdateErrorResponse(response.error);
       
                       return;
                   }
       
                   this.processUpdateResponse(response);
               });
           }

§®§Ö§ä§à§Õ getUpdateRequestData() §á§à§Õ§Ô§à§ä§Ñ§Ó§Ý§Ú§Ó§Ñ§Ö§ä §Õ§Ñ§ß§ß§í§Ö §Ù§Ñ§á§â§à§ã§Ñ §ã§Ö§â§Ó§Ö§â§Ñ §Õ§Ý§ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §ã§à§Ò§Ú§â§Ñ§ñ §â§Ñ§Ù§Ý§Ú§é§ß§í§Ö §ã§Ó§à§Û§ã§ä§Ó§Ñ §Ú §ã§à§à§ä§Ó§Ö§ä§ã§ä§Ó§å§ð§ë§Ú§Ö §Ú§Þ §Ù§ß§Ñ§é§Ö§ß§Ú§ñ (§Ú§Õ§Ö§ß§ä§Ú§æ§Ú§Ü§Ñ§ä§à§â§í §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §æ§Ú§Ý§î§ä§â§Ñ, §Ó§â§Ö§Þ§Ö§ß§ß§í§Ö §Õ§Ú§Ñ§á§Ñ§Ù§à§ß§í §Ú §ä. §Õ.) §Ú§Ù §ã§à§ã§ä§à§ñ§ß§Ú§ñ §Ú §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ú §ã§à§Ù§Õ§Ñ§ß§Ú§Ö §à§Ò§ì§Ö§Ü§ä§Ñ §Õ§Ñ§ß§ß§í§ç, §Ü§à§ä§à§â§í§Û §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§ñ§Ö§ä §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§å§ð §Ú§ß§æ§à§â§Þ§Ñ§è§Ú§ð, §á§à§Õ§Ý§Ö§Ø§Ñ§ë§å§ð §à§ä§á§â§Ñ§Ó§Ü§Ö §ß§Ñ §ã§Ö§â§Ó§Ö§â §Ó §Ù§Ñ§á§â§à§ã§Ö §ß§Ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§Ö. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §ä§à§Ý§î§Ü§à §Ü§Ñ§Ü §é§Ñ§ã§ä§î §Þ§Ö§ä§à§Õ§Ñ promiseUpdate() §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð, §ä§à §Ö§ã§ä§î §Ó§à §Ó§â§Ö§Þ§ñ §á§â§à§è§Ö§ã§ã§Ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ.

§²§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð:

getUpdateRequestData() {
           return {
               templateid: this._dashboard.templateid ?? undefined,
               dashboardid: this._dashboard.dashboardid ?? undefined,
               widgetid: this._widgetid ?? undefined,
               name: this._name !== '' ? this._name : undefined,
               fields: Object.keys(this._fields).length > 0 ? this._fields : undefined,
               view_mode: this._view_mode,
               edit_mode: this._is_edit_mode ? 1 : 0,
               dynamic_hostid: this._dashboard.templateid !== null || this.supportsDynamicHosts()
                   ? (this._dynamic_hostid ?? undefined)
                   : undefined,
               ...this._contents_size
           };
       }

§®§Ö§ä§à§Õ processUpdateResponse(response) §à§Ò§â§Ñ§Ò§Ñ§ä§í§Ó§Ñ§Ö§ä §à§ä§Ó§Ö§ä, §á§à§Ý§å§é§Ö§ß§ß§í§Û §à§ä §ã§Ö§â§Ó§Ö§â§Ñ §á§à§ã§Ý§Ö §Ù§Ñ§á§â§à§ã§Ñ §ß§Ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§Ö, §Ú, §Ö§ã§Ý§Ú §á§â§à§è§Ö§ã§ã §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §á§â§à§ê§Ö§Ý §å§ã§á§Ö§ê§ß§à §Ú §Ò§Ö§Ù §à§ê§Ú§Ò§à§Ü, §à§é§Ú§ë§Ñ§Ö§ä §Õ§Ñ§ß§ß§í§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä §ß§à§Ó§à§Ö §ã§à§Õ§Ö§â§Ø§Ú§Þ§à§Ö §ã §á§à§Þ§à§ë§î§ð §Þ§Ö§ä§à§Õ§Ñ setContents(). §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §ä§à§Ý§î§Ü§à §Ü§Ñ§Ü §é§Ñ§ã§ä§î §Þ§Ö§ä§à§Õ§Ñ promiseUpdate() §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð, §ä§à §Ö§ã§ä§î §Ó§à §Ó§â§Ö§Þ§ñ §á§â§à§è§Ö§ã§ã§Ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ.

§²§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð:

processUpdateResponse(response) {
           this._setHeaderName(response.name);
       
           this._updateMessages(response.messages);
           this._updateInfo(response.info);
           this._updateDebug(response.debug);
       
           this.setContents(response);
       }

§®§Ö§ä§à§Õ processUpdateErrorResponse(error) §à§Ò§â§Ñ§Ò§Ñ§ä§í§Ó§Ñ§Ö§ä §à§ä§Ó§Ö§ä, §á§à§Ý§å§é§Ö§ß§ß§í§Û §à§ä §ã§Ö§â§Ó§Ö§â§Ñ §á§à§ã§Ý§Ö §Ù§Ñ§á§â§à§ã§Ñ §ß§Ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§Ö, §Ö§ã§Ý§Ú §à§ä§Ó§Ö§ä §ñ§Ó§Ý§ñ§Ö§ä§ã§ñ §à§ê§Ú§Ò§Ü§à§Û, §Ú §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä §ã§à§à§Ò§ë§Ö§ß§Ú§ñ §à§Ò §à§ê§Ú§Ò§Ü§Ñ§ç. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §ä§à§Ý§î§Ü§à §Ü§Ñ§Ü §é§Ñ§ã§ä§î §Þ§Ö§ä§à§Õ§Ñ promiseUpdate() §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð, §ä§à §Ö§ã§ä§î §Ó§à §Ó§â§Ö§Þ§ñ §á§â§à§è§Ö§ã§ã§Ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ.

§²§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð:

processUpdateErrorResponse(error) {
           this._updateMessages(error.messages, error.title);
       }

§®§Ö§ä§à§Õ setContents(response) §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä §ã§à§Õ§Ö§â§Ø§Ú§Þ§à§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ö§ã§Ý§Ú §á§â§à§è§Ö§ã§ã §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §á§â§à§ê§Ö§Ý §å§ã§á§Ö§ê§ß§à §Ú §Ò§Ö§Ù §à§ê§Ú§Ò§à§Ü, §é§ä§à §Þ§à§Ø§Ö§ä §Ó§Ü§Ý§ð§é§Ñ§ä§î §Ó §ã§Ö§Ò§ñ §Þ§Ñ§ß§Ú§á§å§Ý§Ú§â§à§Ó§Ñ§ß§Ú§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ§Þ§Ú DOM, §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§Þ§á§à§ß§Ö§ß§ä§à§Ó §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î§ã§Ü§à§Ô§à §Ú§ß§ä§Ö§â§æ§Ö§Û§ã§Ñ, §á§â§Ú§Þ§Ö§ß§Ö§ß§Ú§Ö §ã§ä§Ú§Ý§Ö§Û §Ú§Ý§Ú §æ§à§â§Þ§Ñ§ä§Ú§â§à§Ó§Ñ§ß§Ú§ñ §Ú §ä. §Õ. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §ä§à§Ý§î§Ü§à §Ü§Ñ§Ü §é§Ñ§ã§ä§î §Þ§Ö§ä§à§Õ§Ñ processUpdateResponse(response) §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð, §ä§à §Ö§ã§ä§î §Ó §á§â§à§è§Ö§ã§ã§Ö §à§Ò§â§Ñ§Ò§à§ä§Ü§Ú §à§ä§Ó§Ö§ä§Ñ, §á§à§Ý§å§é§Ö§ß§ß§à§Ô§à §à§ä §ã§Ö§â§Ó§Ö§â§Ñ §á§à§ã§Ý§Ö §Ù§Ñ§á§â§à§ã§Ñ §ß§Ñ §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§Ö.

§²§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð:

setContents(response) {
           this._body.innerHTML = response.body ?? '';
       }

§®§Ö§ä§à§Õ§í §Þ§à§Õ§Ú§æ§Ú§Ü§Ñ§è§Ú§Ú §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ

§®§Ö§ä§à§Õ§í §Þ§à§Õ§Ú§æ§Ú§Ü§Ñ§è§Ú§Ú §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §à§ä§Ó§Ö§é§Ñ§ð§ä §Ù§Ñ §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§Ö §Ó§ß§Ö§ê§ß§Ö§Ô§à §Ó§Ú§Õ§Ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ.

§®§Ö§ä§à§Õ onResize() §à§ä§Ó§Ö§é§Ñ§Ö§ä §Ù§Ñ §ß§Ñ§ã§ä§â§à§Û§Ü§å §Ó§Ú§Ù§å§Ñ§Ý§î§ß§í§ç §ï§Ý§Ö§Þ§Ö§ß§ä§à§Ó §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ó §ã§à§à§ä§Ó§Ö§ä§ã§ä§Ó§Ú§Ú §ã §ß§à§Ó§í§Þ §â§Ñ§Ù§Þ§Ö§â§à§Þ §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ü§à§ä§à§â§í§Ö §Þ§à§Ô§å§ä §Ó§Ü§Ý§ð§é§Ñ§ä§î §á§Ö§â§Ö§ã§ä§Ñ§ß§à§Ó§Ü§å §ï§Ý§Ö§Þ§Ö§ß§ä§à§Ó, §ß§Ñ§ã§ä§â§à§Û§Ü§å §â§Ñ§Ù§Þ§Ö§â§à§Ó §ï§Ý§Ö§Þ§Ö§ß§ä§à§Ó, §å§ã§Ö§é§Ö§ß§Ú§Ö §ä§Ö§Ü§ã§ä§Ñ, §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ð §à§ä§Ý§à§Ø§Ö§ß§ß§à§Û §Ù§Ñ§Ô§â§å§Ù§Ü§Ú §Õ§Ý§ñ §å§Ý§å§é§ê§Ö§ß§Ú§ñ §â§Ö§Ñ§Ô§Ú§â§à§Ó§Ñ§ß§Ú§ñ §á§â§Ú §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§Ú §â§Ñ§Ù§Þ§Ö§â§Ñ §Ú §ä. §Õ. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §á§â§Ú §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§Ú §â§Ñ§Ù§Þ§Ö§â§Ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §ß§Ñ§á§â§Ú§Þ§Ö§â, §Ü§à§Ô§Õ§Ñ §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î §Ó§â§å§é§ß§å§ð §Ú§Ù§Þ§Ö§ß§ñ§Ö§ä §â§Ñ§Ù§Þ§Ö§â §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú§Ý§Ú §Ü§à§Ô§Õ§Ñ §Ú§Ù§Þ§Ö§ß§ñ§Ö§ä§ã§ñ §â§Ñ§Ù§Þ§Ö§â §à§Ü§ß§Ñ §Ò§â§Ñ§å§Ù§Ö§â§Ñ.

§±§â§Ú§Þ§Ö§â:

onResize() {
           if (this.getState() === WIDGET_STATE_ACTIVE) {
               this._startUpdating();
           }
       }

§®§Ö§ä§à§Õ hasPadding() §à§ä§Ó§Ö§é§Ñ§Ö§ä §Ù§Ñ §á§â§Ú§Þ§Ö§ß§Ö§ß§Ú§Ö §Ó§Ö§â§ä§Ú§Ü§Ñ§Ý§î§ß§à§Ô§à §Ù§Ñ§á§à§Ý§ß§Ö§ß§Ú§ñ §ê§Ú§â§Ú§ß§à§Û 8 §á§Ú§Ü§ã§Ö§Ý§Ö§Û §Ó §ß§Ú§Ø§ß§Ö§Û §é§Ñ§ã§ä§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ü§à§Ô§Õ§Ñ §à§ß §ß§Ñ§ã§ä§â§à§Ö§ß §ß§Ñ §á§à§Ü§Ñ§Ù §Ù§Ñ§Ô§à§Ý§à§Ó§Ü§Ñ. §¿§ä§à§ä §Þ§Ö§ä§à§Õ §Ó§í§Ù§í§Ó§Ñ§Ö§ä§ã§ñ, §Ü§à§Ô§Õ§Ñ §ã§ä§â§Ñ§ß§Ú§è§Ñ §Ú§ß§æ§à§â§Þ§Ñ§è§Ú§à§ß§ß§à§Û §á§Ñ§ß§Ö§Ý§Ú §Ñ§Ü§ä§Ú§Ó§Ú§â§å§Ö§ä§ã§ñ, §ä§à §Ö§ã§ä§î §Ü§à§Ô§Õ§Ñ §à§ß§Ñ §ã§ä§Ñ§ß§à§Ó§Ú§ä§ã§ñ §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§Þ§à§Û §ã§ä§â§Ñ§ß§Ú§è§Ö§Û §Ó §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î§ã§Ü§à§Þ §Ú§ß§ä§Ö§â§æ§Ö§Û§ã§Ö.

§²§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð:

hasPadding() {
           return this.getViewMode() !== ZBX_WIDGET_VIEW_MODE_HIDDEN_HEADER;
       }

§¥§Ý§ñ §ß§Ö§Ü§à§ä§à§â§í§ç §Ó§Ú§Õ§Ø§Ö§ä§à§Ó §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§à §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ä§î §Ó§ã§Ö §Õ§à§ã§ä§å§á§ß§à§Ö §á§â§à§ã§ä§â§Ñ§ß§ã§ä§Ó§à §Ó§Ú§Õ§Ø§Ö§ä§à§Ó, §ß§Ñ§á§â§Ú§Þ§Ö§â, §Õ§Ý§ñ §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §ã§à§Ò§ã§ä§Ó§Ö§ß§ß§à§Ô§à §è§Ó§Ö§ä§Ñ §æ§à§ß§Ñ. §¯§Ú§Ø§Ö §á§â§Ú§Ó§Ö§Õ§Ö§ß §á§â§Ú§Þ§Ö§â §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§Ú §Þ§Ö§ä§à§Õ§Ñ hasPadding(), §Ú§ã§á§à§Ý§î§Ù§å§Ö§Þ§à§Ô§à §Ó §â§à§Õ§ß§à§Þ §Õ§Ý§ñ Áú»¢¶Ä²© §Ó§Ú§Õ§Ø§Ö§ä§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç.

hasPadding() {
           return false;
       }