Ja taky z javascriptu bliju a pro ruzne webove udelatka pouzivam primefaces.org - variantu pro JSF2.
Muzes ukazat priklad, jak s tim udelam tabulku, ktera se mi bude kazdou 1s aktualizovat novymi zaznamy z backendu? A pak bych rosil jeste jednou tu samou tabulku, ktera se mi aktualizuje nikoliv periodicky, ale az kdyz na backendu data zmenila, tzn. vyuziva to treba Websocket.
Tak jestli jsem te tim prilis nezaskocil, tak diky.
Na periodicke pollovani je tu primefaces Poll
http://www.primefaces.org:8080/showcase/ui/ajax/poll.xhtml?jfwid=90af5
Ne webfoctek standardni JSF2.3 <f:websocket>
https://stackoverflow.com/questions/3787514/how-can-server-push-asynchronous-changes-to-a-html-page-created-by-jsf/49852105#49852105
Ve starych Primefaces do verze 6.2 byla jejich interni implementace websocketu, tu odstranili, kdyz to zacala podporovat primo JSF
Sam jsem to nikdy nepouzil, nepotreboval jsem
Ma to fungovat velice jednoduse, ze na urvni XHTML page se websocket notifikace zachyti jako AJAX event, na ktery pripojim update prislusne komponenty, napr <p:datatable> se zobrazenim dat
Divam se na to a nechapu, v cem si pomuzes oproti Vue.js. Vzdyt budes mit napsane vesmes to same. Akorat ze kolem nebudes mit tu tucnou vrstvu javovske abstrakce. A ten poll - umi to vubec upadovat i tabulku, tzn. aplikovat ty data jako foreach template?
V JSF2 se zadny foreach template nikam nestrka, zapomen na generovani HTML kodu.
Udela se XHTML deklarace, ktera na stranku nastrka widgety a propoji je s backing beanem. Npriklad pro tabulku backing bean poskytne List<> beanu, atributy beanu obsahuji jednotlive sloupce.
viz nejjednodussi priklad hole tabulky
https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml?jfwid=f505c<h:form>
<div class="card">
<p:dataTable var="product" value="#{dtBasicView.products}" id="testtable">
<p:column headerText="Code">
<h:outputText value="#{product.code}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{product.name}" />
</p:column>
<p:column headerText="Category">
<h:outputText value="#{product.category}" />
</p:column>
<p:column headerText="Quantity">
<h:outputText value="#{product.quantity}" />
</p:column>
</p:dataTable>
</div>
</h:form>Tahle deklarace si z named backing beanu "dtBasicView" vezme List<> beanu s daty a zobrazi je v tabulce.
Ona komponenta ma svoje id="testtbl" (v origo examplu ani neni, pridal jsem), pokud nejakym eventem zavolas update pro tento id - jenom tato samotny datatable widget se updatuje bez reloadu stranky.
A je uplne jedno, jestli ten event vedouci na update idu "testtbl" pristal ze zmacknuti tlacitka, z periodickeho pollu, nebo z websocketu.
Takze jako koder udelas vyse popsanou XHTML dekraraci, udelas primitivni backing bean, co vraci List<> a hotovo.
V onom odkazu jsou i zdrojaky onoho backing beanu a dokonce i fake servica, co pro bean generuje data.
Nikde neni ani radek javascriptu. (I kdyz mas samozrejme moznost i s tim pracovat)
96 Odpovědí
60507 Zhlédnutí