Skip to content

Instantly share code, notes, and snippets.

@dashorst
Created December 4, 2022 15:43
Show Gist options
  • Save dashorst/15f7713718746fcbcb03b989d52aad20 to your computer and use it in GitHub Desktop.
Save dashorst/15f7713718746fcbcb03b989d52aad20 to your computer and use it in GitHub Desktop.
ReactJS ToDo application rewritten in Wicket Java and HTML
<html xmlns:wicket="http://wicket.apache.org">
<body>
<h1 wicket:id="title" class="text-center mb-4"></h1>
<form wicket:id="formTodoForm">
<label wicket:id="formTodoLabel"><b>Add Todo</b></label>
<input type="text" wicket:id="textField" class="input" placeholder="Add new todo" />
<button wicket:id="submit" type="submit">Submit</button>
</form>
<div>
<ul>
<li wicket:id="todos" class="todo">
<span wicket:id="text"></span>
<a wicket:id="markTodo" class="outline-success" href="#">✓</a>
<a wicket:id="removeTodo" class="outline-danger" href="#">✕</a>
</li>
</ul>
</div>
</wicket:panel>
</body>
</html>
public class App extends WebPage {
private static final long serialVersionUID = 1L;
private List<Todo> todos = Arrays.asList(
new Todo("This is a sample todo", false)
);
public App() {
add(new Label("title", "Todo List"));
add(new FormTodoForm("formTodoForm"));
add(new ListView<Todo>("todos", todos) {
@Override
protected void populateItem(ListItem<Todo> item) {
item.add(new TodoPanel("todo", item.getModel()));
}
});
}
private class FormTodoForm extends Form<Void> {
private static final long serialVersionUID = 1L;
private TextField<String> textField;
public FormTodoForm(String id) {
super(id);
add(new Label("formTodoLabel", "Add Todo"));
textField = new TextField<>("textField", Model.of(""));
add(textField);
add(new Button("submit") {
@Override
public void onSubmit() {
if (StringUtils.isNotBlank(textField.getValue())) {
todos.add(new Todo(textField.getValue(), false));
textField.setModelObject("");
}
}
});
}
}
private class TodoPanel extends Panel {
private static final long serialVersionUID = 1L;
private Todo todo;
public TodoPanel(String id, IModel<Todo> model) {
super(id, model);
this.todo = model.getObject();
add(new Label("text", todo.getText()).setRenderBodyOnly(true));
add(new AjaxLink<Void>("markTodo") {
@Override
public void onClick(AjaxRequestTarget target) {
todo.setDone(true);
target.add(TodoPanel.this);
}
});
add(new AjaxLink<Void>("removeTodo") {
@Override
public void onClick(AjaxRequestTarget target) {
todos.remove(todo);
target.add(TodoPanel.this.getParent());
}
});
}
@Override
protected void onConfigure() {
super.onConfigure();
addStateChange();
}
}
private static class Todo implements Serializable {
private static final long serialVersionUID = 1L;
private String text;
private boolean done;
public Todo(String text, boolean done) {
this.text = text;
this.done = done;
}
public String getText() {
return text;
}
public boolean isDone() {
return done;
}
public void setDone(boolean done) {
this.done = done;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment