Echo Web Framework

Can it be made to work by plugging into the browsers real back and forward button?

Excellent. Will it work in IE?

I would suggest you create a component called somehting like HistoryManager. There would only need to be one history manager per app instance added.

Then you could encapsulate the 2 JS files into one and serve them via the rendering peer and its JS sending capability.

This component would not have a visible UI pe se but rather provide a skeleton into which events (lets called them HistoryEvents) could be raised.

The ExternalEventMonitor component in EPNg is a bit like this. No UI but it does raise events.

I have created a HistoryMonitor component in EPNG. Its in the lastest CVS.

Its based on Mikes code above and comes from the unFocus JS toolkit. (The code looks complete if somewhat ugly!)

It works on FireFox but I am having troubles on IE (ah got it working). I have tried to design it so that we can replace the actual history saving mechanism without changing the componentry.

I am not quite happy with the Java design at the moment. I would like some feedback on this.

We start with a HistoryMonitor component. Normally you would have one component per web app instance.

It has HistoryEventListeners which use HistoryEvents as their paremeters.

The key to this is a HistoryUndoRedo interface. It is a simple object that is "added" to the HistoryMonitor when the state of the application changes and is meant to encapsulte the "undo" and "redo" steps required to go back and forward.

At present it has a getStateCounter() which is ever increasing number used to represent a bit of state This ends up as an anchor link in the browser.

What I would like to do eventually is remove this method and have a marker interface only. The "magic" numbers would be managed by the framework and "mapped" back to the actual HistoryUndoRedo objects.

Perhaps another solution would be to have a getEncodedState() mechanism to allow the developer to specify "encoded" state so that if the user bookmarks the page, they may have a chance at "re-instating" the app state when the app first starts next time.

Again I would like to thank Mike for his intial contribution. I hope we can get something useful up and going.

Here is the code from the EPNg test app I have so far. This is still a work in progress and is far from finished or polished.

    static class HistoryUndoRedoImpl implements HistoryUndoRedo {
        
        private static int globalStateCount = 0;
        
        private int stateCounter;
        private String undoValue;
        private String redoValue;
        
        /**
         * Constructs a <code>TestXtra.HistoryUndoRedoImpl</code>
         */
        public HistoryUndoRedoImpl(String undoValue, String redoValue) {
            synchronized (HistoryUndoRedoImpl.class) {
                globalStateCount++;
                this.stateCounter = globalStateCount;
            }
            this.undoValue = undoValue;
            this.redoValue = redoValue;
        }
        
        public int getStateCounter() {
            return stateCounter;
        }
        public String getRedoValue() {
            return redoValue;
        }
        public void setRedoValue(String redoValue) {
            this.redoValue = redoValue;
        }
        public String getUndoValue() {
            return undoValue;
        }
        public void setUndoValue(String undoValue) {
            this.undoValue = undoValue;
        }
        
        public String toString() {
            return super.toString();
        }
        
    }

    public Component testHistoryMonitor() {
        
        final HistoryMonitor historyMonitor = new HistoryMonitor();
        HistoryUndoRedoImpl undoRedo = new HistoryUndoRedoImpl(null," state of the text field");
        historyMonitor.addHistory(undoRedo);
        
        final TextField textField1 = new TextField(new StringDocument(),undoRedo.getRedoValue(),30);
        
        ButtonEx buttonUpdateState = new ButtonEx("Cause Application State Update to occur!");
        buttonUpdateState.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                String currentText = textField1.getText();
                String currentTime = new SimpleDateFormat("hh:mm:ss").format(new Date());
                currentTime += " " + RandKit.roll(new String[] { "Roses"," Daffodils", "Hydranges", "Strezlixia" });
                textField1.setText(currentTime);
                HistoryUndoRedoImpl undoRedo = new HistoryUndoRedoImpl(currentText,currentTime);
                historyMonitor.addHistory(undoRedo);
            }
        });
        
        historyMonitor.addHistoryEventListener(new HistoryEventListener() {
            public void onRedo(HistoryEvent historyEvent) {
                HistoryUndoRedoImpl undoRedo = (HistoryUndoRedoImpl) historyEvent.getUndoRedo();
                textField1.setText(undoRedo.getRedoValue());
            }
            public void onUndo(HistoryEvent historyEvent) {
                HistoryUndoRedoImpl undoRedo = (HistoryUndoRedoImpl) historyEvent.getUndoRedo();
                textField1.setText(undoRedo.getUndoValue());
            }
        });
        
        LabelEx explanation = new LabelEx("Each time you click the button, the application state (for the" +
                " textfield anyway) will be saved and added as a HistoryundoRedo object encapulating" +
                " that state.  The when you press the back and forward button on the browser these" +
                " values will be retreived and re-instated to undo and redo application state.");
        explanation.setLineWrap(true);
        
        Column cell = new Column();
        cell.add(historyMonitor);
        cell.add(explanation);
        cell.add(textField1);
        cell.add(buttonUpdateState);
        return cell;
        
    }

So are you saying that using the Command pattern, the HistoryMonitor would be responsible for running the redo() or undo() methods rather than informaing a listener and have it do it.

I dont mids that per se but I figure people might want to know when the a back history event has occur for other reasons and hence the listener.

Or how about a secondary interface called HistoryUndoRedoCommand with the undo() and redo() methods.

Then if the HistoryUndoRedo (which might have to be renamed to say HistoryState) implements HistoryUndoRedoCommand then the code would invoke it directly as well as call any listeners attached. That way the default code pattern would be without listeners but they could be added if required.

What do you think?

interface HistoryState {
  public String historyHash();
}


interface HistoryUndoRedo extends HistoryState {
  public void undo();
  public void redo();
}

Looking at this you would get the best of bother worlds! (funny how you see things when you express it as code instead of words)

Its in CVS now. The classes are

HistoryMonitor

- the component that owns all this history. Probably on have one per web app since you only have one back and forward button.

HistoryState - a simple interface that generates the "history hash" for use within the browser URL

HistoryUndoRedo - the command pattern extenstion of HistoryState

HistoryEventListener - a listener interface for when history events occur. eg they pressed the back or forward button

HistoryEvent - a wrapper of the HistoryState/HistoryUndoRedo objects to the listener

The code from EPNG test look like this now :

    public Component testHistoryMonitor() {

        DefaultTableColumnModel columnModel = new DefaultTableColumnModel();
        columnModel.addColumn(new TableColumnEx(0, "index"));
        columnModel.addColumn(new TableColumnEx(1, "historyHash"));
        columnModel.addColumn(new TableColumnEx(2, "toString()"));
        final DefaultTableModel historyTableModel = new DefaultTableModel(3, 0);
        final TableEx historyTable = new TableEx(historyTableModel, columnModel);
        historyTable.setSelectionEnabled(true);
        historyTable.setBorder(BorderEx.DEFAULT);

        final LabelEx explanation = new LabelEx("Each time you click the button, the application state (for the"
                + " textfield anyway) will be saved and added as a HistoryUndoRedo object encapulating"
                + " that state.  Then when you press the back and forward button on the browser these"
                + " values will be retreived and re-instated to undo and redo application state.");
        explanation.setLineWrap(true);

        final Label eventLabel = new LabelEx();
        eventLabel.setForeground(Color.BLUE);

        final HistoryMonitor historyMonitor = new HistoryMonitor();
        final TextField textField1 = new TextField(new StringDocument(), "Initial value", 30);

        ButtonEx buttonUpdateState = new ButtonEx("Cause Application State Update To Occur!");
        buttonUpdateState.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                HistoryUndoRedo historyUndoRedo = new HistoryUndoRedo() {

                    private String undoValue = textField1.getText();

                    private String redoValue = genNewText();

                    private String genNewText() {
                        String newText = new SimpleDateFormat("hh:mm:ss").format(new Date());
                        newText += " "
                                + RandKit.roll(new String[] { 
                                        "Roses", " Daffodils", "Hydranges", "Strezlixia", 
                                        "ButterCups", "Lillies", "Azalias",
                                        "Rodademdrems", "Banksias", "Warratahs" });
                        return newText;
                    }

                    public String historyHash() {
                        return String.valueOf(hashCode());
                    }

                    public void redo() {
                        textField1.setText(redoValue);
                    }

                    public void undo() {
                        textField1.setText(undoValue);
                    }

                    public String toString() {
                        StringBuffer buf = new StringBuffer();
                        buf.append("undo:[");
                        buf.append(String.valueOf(undoValue));
                        buf.append("] redo:[");
                        buf.append(String.valueOf(redoValue));
                        buf.append("]");
                        return buf.toString();
                    }
                };
                historyUndoRedo.redo();
                historyMonitor.addHistory(historyUndoRedo);

                updateHistoryTable(historyTableModel, historyTable, historyMonitor);
            }
        });

        historyMonitor.addHistoryEventListener(new HistoryEventListener() {
            public void onRedo(HistoryEvent historyEvent) {
                eventLabel.setText("History Event : Redo event occurred");
                updateHistoryTable(historyTableModel, historyTable, historyMonitor);
            }

            public void onUndo(HistoryEvent historyEvent) {
                eventLabel.setText("History Event : Undo event occurred");
                updateHistoryTable(historyTableModel, historyTable, historyMonitor);
            }

            public void onNoHistoryAvailable(HistoryEvent historyEvent) {
                eventLabel.setText("History Event : No history available in HistoryMonitor");
                updateHistoryTable(historyTableModel, historyTable, historyMonitor);
            }
        });

        Column cell = new Column();
        cell.add(historyMonitor);
        cell.add(explanation);
        cell.add(textField1);
        cell.add(buttonUpdateState);
        cell.add(eventLabel);
        cell.add(historyTable);
        return cell;

    }

Brad (or anyone),

Is the HistoryMonitor component complete and working? How do you plug it into the browsers BACK and FORWARD buttons?

I’m trying to use your HistoryMonitor components to support the BACK and FORWARD functionality offered by the web browser, but I cannot get it to work.

In my ApplicationInstance class, I define the HistoryMonitor object as a property on the class like so..

private HistoryMonitor pHistory = new HistoryMonitor();

In my ApplicationInstance class I also have a method where I place the ContentPane in the Window component returned from the init() method. In this method, I add my HistoryUndoRedo implementation to the HistoryMonitor.

/** Sets the ContentPane to the Window component within this application instance. */
public void setContent(final ContentPane aPane) {
    ContentPane undo = pWindow.getContent();
    HistoryUndoRedo ur = new DagHistoryUndoRedo(this, undo, aPane);
    pHistory.addHistory(ur);
    
    pWindow.setContent(aPane);
}

As the user navigates from screen to screen in my application, the setContent(ContentPane) method is called, which adds to the HistoryMonitor.

I have an implementation of the HistoryEventListener but I'm not sure what the purpose of a listener would be. I say this because the JavaDocs for the HistoryMonitor class states, "If the HistoryState object also implements HistoryUndoRedo, then the appropriate undo() or redo() method will be called when a history event occurs. NOTE : These methods will be called before the HistoryEventListeners are invoked. " From that it would appear as though the HistoryMonitor class will call the HistoryUndoRedo methods. If that is the case, what would one do in an event listener?

Here is my HistoryUndoRedo implementation... (DagApp is my extension of the ApplicationInstance)

public class DagHistoryUndoRedo implements HistoryUndoRedo {
    private DagApp pApplInstance;
    private ContentPane pUndoPane;
    private ContentPane pRedoPane;

    public DagHistoryUndoRedo(final DagApp aApplInstance, final ContentPane aUndoPane,
            final ContentPane aRedoPane) {
        pApplInstance = aApplInstance;
        pUndoPane = aUndoPane;
        pRedoPane = aRedoPane;
    }

    public void redo() {
        System.out.println("**** REDO *****");
        if (pRedoPane != null) {
            pApplInstance.setContent(pRedoPane);
        }
    }

    public void undo() {
        System.out.println("**** UNDO *****");
        if (pUndoPane != null) {
            pApplInstance.setContent(pUndoPane);
        }
    }

    public String historyHash() {
        return String.valueOf(hashCode());
    }
}

Can anyone help me to get the HistoryMonitor to work when the user clicks the browsers BACK and FORWARD buttons? What am I missing/doing wrong?

Appreciate any assistance you or anyone can provide?

-Doug

I had the same issue. I discovered that the HistoryMonitor must be part of the contents (Add this component to the contentpane) to be functional.

Since I added the HistoryMonitor to myApplicationInstance.getMainwindow().getContentPane() it seems to work...