Замена штатного интерфейса

> [HTML Version](buttons-instead-pages.html)

Важно\! Пример проекта доступен для скачивания [по ссылке](https://simple-scada.com/downloads/ReplacePanel.rar).

Рассмотрим случай, когда требуется скрыть [панель страниц](https://simple-scada.com/help/manual/page-panel.html) или [панель сообщений](https://simple-scada.com/help/manual/edit-zone.html), например для экономии места или если необходимо расположить страницы рядами, вертикально и т.д. В таком случае панель страниц можно заменить кнопками, а панель сообщений компонентом "[Список сообщений](https://simple-scada.com/help/manual/message-viewer.html)". 

**(./images/tog_code_1.png) 1. Замена панели страниц [(./images/link.png)](https://simple-scada.com/help/script/buttons-instead-pages.html?anchor=ex1)**

Для замены панели страниц необходимо:

1. Создать требуемые страницы/подстраницы используя однотипные имена, например Subpage1, Subpage2, Subpage3. Если в проекте имеются страницы, у которых нет подстраниц, то для таких страниц нужно создать пустую подстраницу и задать ей однотипное имя с требуемым номером по аналогии с остальными подстраницами проекта.

2. Скрыть штатную [панель страниц](https://simple-scada.com/help/manual/page-panel.html) кликнув соответствующую иконку слева от панели.

3. Создать новый [шаблон](https://simple-scada.com/help/manual/templateobjects.html). 

4. Разместить в шаблоне необходимое количество кнопок, при помощи которых будет производиться переход по страницам. Задать свойство "Тэг" кнопок в соответствии с номерами подстраниц, например у кнопки перехода на подстраницу "Subpage1" установить свойство "Тэг" = 1, у кнопки перехода на подстраницу "Subpage2" установить свойство "Тэг" = 2 и т.д. 

5. Перейти в редактор скриптов и [создать скрипт](via-script-editor.md) с типом события "[Универсальный скрипт](universal-event.md)":

````
var  
  aSubPage: TM\_SubPage;  
begin  
  // ищем подстраницу с именем Subpage + значение свойства Тэг кнопки  
  aSubPage := GetSubPageByName('Subpage' + IntToStr((Sender as TM\_Button).Tag));  
  if aSubPage <> nil then                      // если подстраница существует  
    aSubPage.GoToSubPageClient(GetClientName); // то, перейти на нее  
end.

6. ````
Созданный скрипт назначить [на событие](object-events.md) OnClick всех кнопок перехода по страницам.

7. Переход в меню трендов можно реализовать через кнопку и скрипт по событию OnClick, используя процедуру [GoToTrendsClient](gototrendsclient.md). 

8. Для подсветки активной страницы, можно на каждой странице поверх шаблона (над кнопкой страницы) разместить полупрозрачный прямоугольник нужного цвета.

9. Через меню "Окна / Шаблоны" -> "Вставить шаблон" выбрать созданный шаблон панели страниц и разместить его на всех страницах проекта.

Теперь при нажатии на кнопки будет происходить переход на нужную страницу. 

**(./images/tog_code_1.png) 2. Замена панели сообщений [(./images/link.png)](https://simple-scada.com/help/script/buttons-instead-pages.html?anchor=ex2)**

Для замены панели сообщений необходимо:

1. Скрыть штатную [панель сообщений](https://simple-scada.com/help/manual/edit-zone.html) кликнув соответствующую иконку слева от панели.

2. Создать новый [шаблон](https://simple-scada.com/help/manual/templateobjects.html). 

3. Разместить в шаблоне компонент "[Список сообщений](https://simple-scada.com/help/manual/message-viewer.html)". При необходимости добавить кнопки для подтверждения сообщений и смены пользователя, а также "[Календарь](https://simple-scada.com/help/manual/calendar.html)" для отображения системной даты/времени. 

4. Смену пользователя можно реализовать через кнопку и скрипт по событию OnClick используя процедуру [ChangeUser](changeuser.md).

5. Переход в меню сообщений можно реализовать через "[Список сообщений](https://simple-scada.com/help/manual/message-viewer.html)" и скрипт по событию OnClick используя процедуру [GoToMessagesClient](gotomessagesclient.md).

6. Подтверждение сообщений можно реализовать через кнопку и скрипт по событию OnClick используя процедуру [ConfirmMessage](confirmmessage.md).

7. Системное время отображаемое в правом нижнем углу штатной панели можно заменить следующим образом:

- Разместить в шаблоне компонент "[Календарь](https://simple-scada.com/help/manual/calendar.html)" и связать его с [системной переменной](https://simple-scada.com/help/manual/sys-var.html) "SysCurrentTime". 

- Настроить требуемый вид календаря. Например, можно оставить отображение только времени или только даты, а также задать формат даты/времени.

8. Через меню "Окна / Шаблоны" -> "Вставить шаблон" выбрать созданный шаблон панели сообщений и разместить его на всех страницах проекта.

**(./images/tog_code_1.png) 3. Компактная навигация по страницам [(./images/link.png)](https://simple-scada.com/help/script/buttons-instead-pages.html?anchor=ex3)**

Если проект требует максимальной компактности, то навигацию по страницам можно реализовать двумя кнопками - "На следующую страницу" и "На предыдущую страницу", используя скрипт на событие OnClick:

Для кнопки "На следующую страницу":

````
begin  
  GoToNextPageClient(GetClientName); // переход на следующую страницу/подстраницу на клиенте, который вызвал скрипт   
end.

````
Для кнопки "На предыдущую страницу":

````
begin  
  GoToPrevPageClient(GetClientName); // переход на предыдущую страницу/подстраницу на клиенте, который вызвал скрипт  
end.
````

````
****