HTMLPanel

Opis

Od wersji 5.4.5 serwera NEOS dostępna jest kontrolka HTML Panel, która umożliwia wyświetlanie HTML'a w kliencie WEB\'owym. Kontrolka ta nie działa pod klientem VCL (zamiast tego można użyć WEBBrowsera do wyświetlania strony). Kontrolka ta wprowadza wiele nowych możliwości. Np. można generować dowolny HTML a następnie wyświetlać go na stronie jako "ReadOnly". Ponadto można osadzać przyciski lub linki. Świetnie nadaje się do generowania podglądu plików graficznych.

Sposób użycia

Aby użyć opisywanej kontrolki wystarczy przeciągnąć ją w odpowiadające nam miejsce z dostępnych kontrolek. Następnie przechodzimy na metody gdzie dodajemy metodę na HTML Template. Generujemy w kodzie C# dowolny HTML i zwracamy jako wynik tej metody. Następnie silnik NEOS'a ustawi wygenerowany HTML w odpowiednie miejsce na naszej formie co spowoduje wyrenderowanie i wyświetlenie go.

Uwaga!

Metoda na template Panelu wykonuje się po zmianie wartości w użytych polach modelu danych lub parametrach w kodzie. Czyli analogicznie jak metody na przeliczenie / walidację.

Tak wygląda kontrolka w zasobniku

Kontrolka HTML Panelu nie przyjmuje innych elementów należy korzystać z metody na template lub wymienić kontrolkę na inną.

Przykłady użycia

Wyświetlenie tekstu

W celu wyświetlenia czystego tekstu lub tekstu posiadającego znaczniki HTML należy ten tekst zwrócić w wyniku metody na template. Należy zwrócić uwagę, że gramatyka template w komponentach Kendo traktuje znak "#" jako znak specjalny. Należy wszystkie jego wystąpienia poprzedzić podwójnym backslashem, aby był to znak przeznaczony do wyświetlenia. W języku C# musimy więc użyć poczwórnego backslasha.

Warto zauważyć, że w metodzie na template możemy odowoływać się do pól modelu danych lub parametrów. W przypadku zmiany zawartości tych pól i parametrów metoda na template zostanie wywołana automatycznie, a nowa wartość wynikowa zostanie przesłana do klienta WEB i odświeżona w oknie.

public string SetHtmlPanelTemplate(HtmlPanelTemplate html)
{
  return _html.ToString().Replace("#","\\\\#");    
}

Wyświetlanie grafiki

W celu wyświetlenia grafiki z repozytoruim wystarczy w metodzie na template wpisać poniższy kod:

public string SetHtmlPanelTemplate(HtmlPanelTemplate html)
{
  // S1 -> zawiera nazwę repozytorium
  // S2 -> zawiera nazwę pliku
  return html.Preview(this.S1, this.S2);
}

Jeśli przekazany plik będzie można wyświetlić bezpośrednio w przeglądarce to metoda Preview wygeneruje odpowiedni kod. W przeciwnym razie metoda zwróci pustego stringa i należy według uznania wygenerować informację dla użytkownika. Metoda wspiera następujące rozszerzenia plików: (".jpg", ".jpeg", ".png", ".gif", ".bmp", ".svg", ".pdf", ".txt")

W/w przykład wygląda następująco na przykładowej tabeli:

Dokumentu google lub innej strony

W celu wyświetlenia innej strony lub np. dokumentu google należy wykorzystać komponent IFrame. Silnik NEOS wspiera generowanie takiego HTML'a. Poniższy kod prezentuje w jaki sposób można osadzić inną stronę na przykładzie dokumentów google.

public string SetHtmlPanelTemplate(HtmlPanelTemplate html)
{
  return html.Iframe("https://docs.google.com/document/d/1EOJLOG_dPyE7Gk0DrgokMgi4x9hunlLp5HAHneeJRUk/edit");
}

Generowanie przycisku / linku

Jeśli chcemy wygenerować przycisk, link, który będzie reagował na kliknięcie :) należy użyć gotowych szablonów, które udostępnia technologia NEOS. W celu dodania akcji do "dowolnego" elementu w przygotowywanym HTML'u - należy zwrócić się do DBR.

Przykład kodu generującego przycisk / link na podstawie zdefiniowanej akcji.

public string SetHtmlPanelTemplate(HtmlPanelTemplate html)
{
  return $@"<div>
{html.Button(Actions.ShowTestInfo, "REF:" + this.REF, "MI_PANEL")}
{html.Link(Actions.ShowTestInfo, "REF: "+this.REF, "MI_PANEL")}
</div>";

}

Przykład działania w/w kodu:

Przykład użycia HTML Panelu to np. okno informujące o wygaśnięciu sesji

Tak to działa :)

Kod w HTMLPanelu

public string SetHtmlPanelTemplate(HtmlPanelTemplate html)
{
  long time = (long)_activeuntil.AsDateTime.ToUniversalTime().Subtract(new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).TotalMilliseconds;
  string style = "display: flex; font-size: 24px; height: 100%; align-items: center; justify-content: center; padding-bottom: 8px; box-sizing: border-box;";
  string template = $"<div style='{style}'><span>Twoja sesja wygaśnie za <span class='countdown'></span> sekund</span></div>";
  string callback = $@"
    const endtime = new Date({time});
    const countdown = $('.countdown', this.container);
    var refresh = function() {{
      const total = endtime - new Date();
      const seconds = Math.floor(total/1000);
      countdown.text(seconds);
      if (seconds <= 0) {{
        clearInterval(timeinterval);
      }}
    }}
    const timeinterval = setInterval(refresh, 1000);
    refresh();";

  return $@"{template}#data.callback = function(){{{callback}}}#";
}