Budowanie HTML w supla-device po nowemu!

[klew]

Jak buduje się HTML w WebSender i klasach z src/supla/network/html ?

Kilka dni temu lukfud mnie podpuścił, co zaowocowało całkowitym przerobieniem sposobu generowania HTML w klasach supla-device.

Najważniejsza rzecz: w nowej wersji HTML nie jest składany ręcznie przez klejenie stringów. Zamiast tego jest mały builder w WebSender, który daje RAII-owe helpery do tagów, a klasy z src/supla/network/html są po cienkimi wrapperami na konkretne formularze i sekcje.

Co to daje?
Sumarycznie binarka się trochę zmniejszyła . Mniej ręcznego sklejania HTML-a, lepsze domykanie tagów, łatwiej utrzymać spójny układ formularzy.

Podstawowy pattern
Najprostszy przykład to budowanie tagów przez tag() i voidTag():

Code: Select all

auto div = sender->tag("div");
div.attr("class", "box").body([&]() {
  sender->sendSafe("Hello <world>");
});

Tu ważna rzecz: sendSafe() escapuje treść, więc znaki typu <, >, & nie rozwalą HTML-a. Jeśli tekst pochodzi od użytkownika albo z konfiguracji, to właśnie tego trzeba pilnować.

W praktyce używa się tego tak
Na przykład prosty tekstowy input:

Code: Select all

sender->labeledField("ssid", "Network name", [&]() {
  sender->textInput("ssid", "ssid");
});

Albo checkbox:

Code: Select all

sender->labeledField("wifi_en", "Enable Wi-Fi", [&]() {
  sender->checkboxInput("wifi_en", "wifi_en", true);
});

Podział odpowiedzialności
- WebSender ogarnia niskopoziomowe budowanie HTML.
- Klasy z html opisują pojedyncze parametry / sekcje formularza.
- Logika zapisu i odczytu konfiguracji siedzi obok, ale nie robi się z tego monolit.

Mini-przykład własnej klasy

Code: Select all

class MyParam : public Supla::Html::HtmlElement {
 public:
  MyParam() : HtmlElement(HTML_SECTION_FORM) {}

  void send(Supla::WebSender* sender) override {
    sender->labeledField("my_key", "Mój parametr", [&]() {
      sender->numberInput("my_key",
                          {
                              .min = Supla::fixed(0, 0),
                              .max = Supla::fixed(100, 0),
                              .value = Supla::fixed(42, 0),
                              .step = Supla::fixed(1, 0),
                          });
    });
  }
};

Listę dostępnych metod i opis znajdziecie tutaj: https://supla.github.io/supla-device/cl ... ender.html

[fracz]

A myślałem że tylko mnie lukfud podpuszcza.