Richfaces で戻ると進むを管理する

Question

RichFaces コンポーネント ライブラリを使用しており、エンドユーザーがブラウザの「戻る」ボタンと「進む」ボタンを使用できるように、Ajax ナビゲーションの履歴を管理したいと考えています。

それを行うためのきれいな方法、デザインパターン、ライブラリなどはありますか?

Answer 1

使用できます RSH Ajax 履歴を処理する

この例では、ユーザーが色を選択する必要があるページがあると仮定します。次に、選択した色が XmlHttpRequest を使用してサーバーに送信されます。

ここで、「戻る」および「進む」ナビゲーション ボタンが押されたときに、以前の選択を復元したいと考えています。

コード例

豆：

public class Bean {

    private static final String DAFAULT_COLOR = "green";

    private Map<String, Color> colors;
    private Color selectedColor;
    private String restoredColor;

    @PostConstruct
    public void init() {
        this.colors = new HashMap<String, Color>();
        this.colors.put("green", new Color("Green", "008000"));
        this.colors.put("blue", new Color("Blue", "0000FF"));
        this.colors.put("red", new Color("Red", "FF0000"));
        this.colors.put("purple", new Color("Purple", "FF0000"));
        this.colors.put("purple", new Color("Purple", "800080"));
        this.colors.put("yellow", new Color("Yellow", "FFFF00"));
        this.colors.put("silver", new Color("Silver", "C0C0C0"));
        this.colors.put("black", new Color("Black", "000000"));
        this.colors.put("white", new Color("White", "FFFFFF"));

        this.selectedColor = this.colors.get(DAFAULT_COLOR);
    }

    public void setSelectedColor(ActionEvent event) {
        UIComponent component = event.getComponent();
        String color = ((String)component.getAttributes().get("color")).toLowerCase();
        this.selectedColor =  this.colors.get(color);
    }

    public void restoreColor() {
        if(restoredColor.equals("") || restoredColor.equals("null")) {
            restoredColor =  DAFAULT_COLOR; 
        }

        this.selectedColor =  this.colors.get(restoredColor);
    }

    public List<Color> getColors() {
        return Arrays.asList(colors.values().toArray(new Color[0]));
    }

    public Color getSelectedColor() {
        return selectedColor;
    }

    public String getRestoredColor() {
        return restoredColor;
    }

    public void setRestoredColor(String restoredColor) {
        this.restoredColor = restoredColor.toLowerCase();
    }

}

ビュー：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:t="http://myfaces.apache.org/tomahawk"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"  
    template="/WEB-INF/template/default.xhtml">

<ui:define name="head">
    <script type="text/javascript" src="#{request.contextPath}/js/rsh/rsh.js"></script>
    <script type="text/javascript">
        window.dhtmlHistory.create({
            toJSON: function(o) {
                return Object.toJSON(o);
            },
            fromJSON: function(s) {
                return s.evalJSON();
            }
        });

        Event.observe(window, 'load', function() {
            dhtmlHistory.initialize();
            dhtmlHistory.addListener(handleHistoryChange);
        });

        var registerHistoryPoint = function(newLocation, historyData) {
            dhtmlHistory.add(newLocation, historyData); 
        };
    </script>
</ui:define>    

<ui:define name="content">
    <a4j:form id="frmColor">
        <div class="colors">
            <ul>
                <a4j:repeat value="#{bean.colors}" var="color">
                    <li style="background:##{color.hex};">
                        <a4j:commandLink value="&#160;"
                            actionListener="#{bean.setSelectedColor}" 
                            reRender="frmColor"
                            oncomplete="registerHistoryPoint('#{color.name}', '#{color.name}');">
                            <f:attribute name="color" value="#{color.name}"/>
                        </a4j:commandLink>
                    </li>
                </a4j:repeat>
            </ul>
        </div>
        <div class="selection" style="background:##{bean.selectedColor.hex};">
            <div class="selected-color" 
                style="color: ##{bean.selectedColor.name eq 'White' or 
                         bean.selectedColor.name eq 'Yellow' ? '000000' : 'ffffff'}">
                <h:outputText value="#{bean.selectedColor.name}"/>
            </div>
        </div>
        <a4j:jsFunction name="handleHistoryChange" reRender="frmColor"
            action="#{bean.restoreColor}">
            <a4j:actionparam name="historyData" assignTo="#{bean.restoredColor}" /> 
        </a4j:jsFunction>
    </a4j:form>
</ui:define>
</ui:composition>

ユーザーが色をクリックすると、 registerHistoryPoint が呼び出されます。これで登録されます historyData これは、「戻る」ボタンと「進む」ボタンが押されたときに Bean に渡されます。

例えば

• ユーザーは黄色を選択します。
• 黄色が登録されています。
• ユーザーは青を選択します。
• 青色が登録されています。
• ユーザーは「戻る」をクリックします。
• 黄色が復活しました。
• ユーザーが「進む」をクリックします。
• 青が復活しました。