Nice to meet you. It will be first post. This is @ tesaito-gxp from GxP.
This article is the 18th day of Growth Experts Advent Calendar 2020 .
It was said that the theme of the Advent calendar was looking back on this year's learning
, but in the three years since I was assigned, I can finally tell others about Apache Wicket
. I think I'll write it down as if I've learned it.
I haven't touched on it much these days, but I used it for crunching in the first half of the year, so I'll write about it.
Basically, I think that frameworks are created with "how to realize without writing source code", but the idea of Wicket is exactly the opposite, "everything is Java. It becomes a framework that "I want to realize with." Of course, there are some configuration files (web.xml), but Wicket only describes the HTML and Java source code as the page template.
When creating a web application, writing an xml file, creating a JSP, preparing a Servlet, creating a configuration file for the framework, a property file, etc., the development work needs to go through various steps. .. However, when developing with Wicket, once you have prepared HTML, all you have to do is write Java. You can just write it as a class definition, not a method that is called according to GET or POST.
Of course, there are advantages and disadvantages.
The major features of Wicket are as follows.
Atomic design is a design method that defines hierarchy and granularity using a chemistry metaphor based on the idea that UI is a combination of nested small components.
Reference source: Atomic Design Chapter2
What I've been doing since I learned about this atomic design was wrong. .. .. I was made aware of it.
Let's get back to Wicket.
SamplePage1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!--From here on down I will write in the inherited class-->
<wicket:extend />
</body>
</html>
SamplePage1.java
import org.apache.wicket.markup.html.WebPage;
public abstract class SamplePage1 extends WebPage {
}
SamplePage1Impl.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<wicket:child>
<div wicket:id="sampleLabel" />
</wicket:child>
</body>
</html>
SamplePage1Impl.java
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.model.Model;
public class SamplePage1Impl extends SamplePage1 {
public java:SamplePage1Impl() {
super();
Label sampleLabel = new Label("sampleLabel", Model.of("I put a Label on Wicket"));
this.add(sampleLabel);
}
}
With this kind of feeling, while having elements such as headers (written in the body) that do not change on any page in the parent class, we will implement the function by adding the necessary elements in the inherited child class. .. Since various functions are additionally implemented in the child class, it can be implemented with polymorphism in mind.
Actual page
SamplePage2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>↓ From here on down, write in the Panel class ↓</div>
<wicket:panel wicket:id="samplePanel" />
</body>
</html>
SamplePage2.java
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.panel.Panel;
public class SamplePage2 extends WebPage {
public SamplePage2() {
super();
Panel samplePanel = new SamplePanel("samplePanel");
this.add(samplePanel);
}
}
SamplePanel.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<span wicket:id="sampleLabel" />
</div>
</body>
</html>
SamplePanel.java
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.Model;
public class SamplePanel extends Panel {
public SamplePanel(String componentId) {
super(componentId);
Label sampleLabel = new Label("sampleLabel", Model.of("I put a Label on Wicket Sample2"));
this.add(sampleLabel);
}
}
This writing style is similar to atomic design. I implemented a new class called Panel, which corresponds to the template in atomic design. Reusable programming can be done by placing various elements on the Panel.
(Since only one Label is placed this time, the process of molecules and organisms is skipped.)
Actual page
Both patterns are simply expressed as follows. I can't say which implementation is better because there are project guidelines, but in my head I was thinking about pattern 2, but sometimes the completed form was pattern 1. did. I think I was able to put together the ideas around here.
Since I learned about atomic design, I often write in pattern 2, which makes it easier for me to have guidelines for code reviews, and I don't get lost even if there are additional changes. I think that if the policy was decided at the project or individual level, it would be easier to do.
Ah, I want to hit myself in the past.
Recommended Posts