Многостраничность - GyverLibs/GyverPortal GitHub Wiki

У каждой страницы свой url

Логика создания многостраничного интерфейса следующая:

• Внутри вашей функции-конструктора функция portal.uri() возвращает адрес открытой в браузере "страницы" (часть после IP адреса)
• Страницы создаются виртуально по условиям в daeyrwbb конструктора: при совпадении адреса добавляем в страницу нужные компоненты
• Навигация может осуществляться как из адресной строки в браузере, так и при помощи кнопок-ссылок
• При создании страницы, на которой присутствует форма form, виртуальный адрес этой страницы должен совпадать с именем формы, чтобы после отправки формы браузер получил ту же самую страницу!

Кнопки-ссылки

Кнопка ссылка ведёт на страницу внутри сервера. Если нужно перенаправить на внешнюю страницу - начинайте адрес с http://!

Пример интерфейса с тремя страницами:

• / - главная страница с кнопками-ссылками на остальные страницы
• /save - здесь форма form с текстовым полем и кнопкой сохранения, а также кнопкой-ссылкой "назад"
• /status - здесь мигает "светодиод" при помощи инструмента update, а также кнопка-ссылка "назад"

void build() {
  GP.BUILD_BEGIN();
  GP.THEME(GP_DARK);

  // страница с формой
  if (portal.uri() == "/save") {
    GP.FORM_BEGIN("/save");
    GP.TEXT("txt", "", ""); GP.BREAK();
    GP.SUBMIT("Save");
    GP.FORM_END();
    GP.BUTTON_LINK("/", "Back");

    // страница с лампочкой
  } else if (portal.uri() == "/status") {
    GP.AJAX_UPDATE("led");
    GP.LABEL("LED: ");
    GP.LED_RED("led", 0);   GP.BREAK();
    GP.BUTTON_LINK("/", "Back");

    // главная страница "/"
  } else {
    GP.BUTTON_LINK("/save", "Save page");      GP.BREAK();
    GP.BUTTON_LINK("/status", "Status page");
  }

  GP.BUILD_END();
}

void action() {
  if (portal.form("/save")) Serial.println(portal.getString("txt"));
  static bool led;
  if (portal.update("led")) portal.answer(led = !led);
}

См. пример multiPageButtons

Панель навигации

Вместо кнопок можно использовать панель навигации со ссылками - компонент GP.NAV_TABS_LINKS(). Он размещается вверху страницы и должен быть виден на всех страницах. В него передаются ссылки и имена страниц в виде списков, разделённых запятой. Перепишем пример выше:

void build() {
  GP.BUILD_BEGIN();
  GP.THEME(GP_DARK);

  GP.NAV_TABS_LINKS("/,/save,/clicks,/updates", "Home,Form,Clicks,Updates");
  
  if (portal.uri("/save")) {
    GP.FORM_BEGIN("/save");
    GP.TEXT("txt", "text", ""); GP.BREAK();
    GP.SUBMIT("Submit");
    GP.FORM_END();

    // страница с кнопкой, на которую можно кликнуть
  } else if (portal.uri("/clicks")) {
    GP.BUTTON("btn", "Button");

    // страница с лампочкой, которая сама переключается
  } else if (portal.uri("/updates")) {
    GP.UPDATE("led");
    GP.LABEL("LED: ");
    GP.LED_RED("led", 0);

    // главная страница, корень, "/"
  } else {
    GP.LABEL("Home");
  }

  GP.BUILD_END();
}

См. пример multiPageTabLinks