JSF2.1 - Podmiana treści w contencie po kliknięciu w link

0

Witam,

czy jest jakaś koncepcja, żeby podmieniać strony w contencie, po kliknięciu w np linki? Nie mam tu na myśli podmiany bez przeładowania, po prostu strona jest poskładana z kilku części i jak chcę wyświetlić inną treść, to nie chcę tworzyć nowej strony zawierającej wszystkie te same części, a podmienić tylko środkową część.

Próbowałem w znaczniku ui:include uruchamiać metodę, która zwraca ścieżkę do odpowiedniej strony w folderze /pages, w zależności od zainstniałych warunków, ale nie działa taka forma tego rozwiązania.

Jeżeli ktoś ma jakiś pomysł, to byłbym wdzięczny za podsunięcie mi go :)

0

Dokopałem się do znacznika corejsf. Wydaje mi się, że on służy do czegoś takiego właśnie.

1. Utworzyłem bibliotekę do tego znacznika

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE facelet-taglib PUBLIC
    "-//Sun Microsystems. Inc.//DTD Facelet Taglib 1.0//EN"
    "http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
    
<facelet-taglib>

    <namespace>http://corejsf.com/facelets</namespace>
    
    <tag>
        
        <tag-name>side</tag-name>
        <source>tags/corejsf/side.xhtml</source>
        
    </tag>

</facelet-taglib>

2. Oraz jego implementację - znajduje sie w miejscu podanym w tagach source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>IGNORED</title>
    </h:head>
    <h:body>
        <ui:composition>
            
            <div class='#{name == contentControler.currentPage ?
                          "SideSelected" : "Side" }'>
            
                          <h:commandLink action="#{contentControler.changeCurrentPage(name)}">
                              <p>#{linkValue}</p>
                          </h:commandLink>
                          <ui:insert name="content1" />
            
            </div>
            
        </ui:composition>
    </h:body>
</html>

3. Stworzylem tez klase zawierajaca metody aktualna strona i zmien aktualna strone

package pl.easyshop;

import java.io.Serializable;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;


@RequestScoped
@Named("contentControler")
public class ContentControlerBean implements Serializable {
    
    private String currentPage;
    
    public String getCurrentPage() {
        
        return currentPage;
    }
    
    public String changeCurrentPage(String nevValue) {
        
        this.currentPage = nevValue;
        return currentPage;
    }
}

4. Wiem tez, jak ustawic te znaczniki w pliku robiącym za lewe menu

 <h:form>
                
                <corejsf:side name="#{default}" linkValue="Strona glowna"/>
                
                <corejsf:side name="#{succes}" linkValue="Jakas inna strona"/>
                
            </h:form>

5. Problem zaczyna sie w tym miejscu

Nie mam pojecia co dalej. Jak okreslic, zeby po kliknieciu w ten link któryś, w contencie zdefiniowanym w pliku index.xhtml pojawiala sie tresc odpowiedniej strony. Nie potrafie do tego dotrzeć.

Czy ktoś mógłby mi to wytłumaczyć?

0

Podbijam, bo troszkę mnie to blokuje

0

Nie jestem pewien czy chodzi ci o template strony, czy ajaxa. Jak się określisz to tutaj masz odpowiedź http://java.dzone.com/articles/how-do-10-common-tasks-jsf-20

0

Nie, nie jest to to czego szukam. Chodzi mi o podmianę samej środkowej części strony (content) po kliknięciu na dany link. Sąsiedztwo, tzn np. menu, header, bottom, się nie zmieniają.

Przykład - klikam link regulamin, w contencie pojawia się plik regulamin.xhtml, a raczej jego część ujęta w ui:composition - ale header, bottom, menu - pozostają bez zmian. I tak w zależności w jaki link klikniemy, zmienia się tylko ta część środkowa strony, gdzie przetrzymywana jest treść.

0

Czyli chodzi ci o ajax'a. W takim razie zainteresuj się f:ajax

0

nie koniecznie bez przeładowania strony. bo jak będę miał 1000 różnych stron do podmiany w zależności od spełnionych warunków, to ten mechanizm może mieć problemy?

0

No inaczej się nie da. Wiesz jak działa protokół HTTP? No chyba, że byś chciał załadować te tysiąc stron na raz, ukrył ich treść i podmieniał główną treść javascriptem.

0

http://zapodaj.net/182bf33c8c2b2.jpg.html

Mam na myśli powyższą sytuację. Strona jest podzielona na moduły: header, stopka, menu i środek. W każdym jest zainkludowany jakiś xhtml z danym modułem. Ale zależy mi na tym, zeby po kliknięciu w link z menu, zainkludowany w contencie plik "tresc1.xhtml" zmienial sie na "tresc2.xhtml". Nie musi to być bez przeładowania (ajax). Po prostu nie chce tworzyć 10 np szkieletów w których będą dołączał wszystkie moduły, astworzyć jeden szkielet, a różne treści z linków trzymać w osobnych plikach xhtml w znaczniku ui composition i tylko je podmieniać w środku jednego szkieletu.

Jaśniej to teraz ująłem ? :D

0

Podbijam

0

AJAX AJAX AJAX, wszystko co ma być dynamiczne na stronie AJAX AJAX AJAX

Sprawa prosta, robisz sobie a4j:region, za wyświetlanie twojego kontentu ustawiasz odpowiedzialnego backbeana, a następnie na akcje button robisz reRender (może być z a4j:support) całego regionu. Voila!! zrobione!!

Na upartego możesz cały content strony wstawić w jsf a odpowiednie obiekty oflagowujesz w backbeanie i określasz które mają się wyświetlić a które nie w danym stanie za pmocą atrybutu rendered=true/false

po problemie

0

Pierwsze słyszę, że do dynamicznych stron tylko AJAX, bzdury. Dynamika nie musi być realizowana asynchronicznie.
Na szablonach da radę bezproblemowo to zrobić:
sazblon:

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet library="css" name="default.css" />
    </h:head>

    <h:body>
        
            Tutaj definiujesz całą treść strony poza contentem: menu, logo, stopka

            <ui:insert name="content"/>

    </h:body>

</html>

link1:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:body>
    <ui:composition template="../WEB-INF/template.xhtml">


        <ui:define name="content">
            Link1
        </ui:define>


    </ui:composition>
</h:body>

</html>

link2:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:body>
    <ui:composition template="../WEB-INF/template.xhtml">


        <ui:define name="content">
            Link2
        </ui:define>


    </ui:composition>
</h:body>

</html>

oczywiście, żeby otrzymać layout jaki podałeś na screenie, musisz to odpowiednie ostylować.

1 użytkowników online, w tym zalogowanych: 0, gości: 1