Panel som låter dig välja år och månad
git-svn-id: svn://svn.dsv.su.se/scipro/scipro/trunk@228 73ecded7-942e-4092-bab0-0e58ef0ee984
This commit is contained in:
dan-kjel
parent
8da7256a60
commit
c51b91ded2
src/main/java/se/su/dsv/scipro/components/monthpicker
@ -0,0 +1,11 @@
|
||||
package se.su.dsv.scipro.components.monthpicker;
|
||||
|
||||
import java.util.Date;
|
||||
|
||||
import org.apache.wicket.IClusterable;
|
||||
import org.apache.wicket.ajax.AjaxRequestTarget;
|
||||
|
||||
public interface IMonthChangedListener extends IClusterable {
|
||||
|
||||
public void onSelectionChange(AjaxRequestTarget target, Date date);
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<wicket:panel>
|
||||
<div class="monthPicker">
|
||||
<form wicket:id="yearForm">
|
||||
<img wicket:id="down"></img>
|
||||
<input type="text" wicket:id="year" />
|
||||
<img wicket:id="up"></img>
|
||||
</form>
|
||||
<ul>
|
||||
<li wicket:id="monthList" class="monthPickerList">
|
||||
<span wicket:id="month"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</wicket:panel>
|
||||
@ -0,0 +1,204 @@
|
||||
package se.su.dsv.scipro.components.monthpicker;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.Arrays;
|
||||
import java.util.Date;
|
||||
import java.util.List;
|
||||
|
||||
import org.apache.wicket.Component;
|
||||
import org.apache.wicket.IClusterable;
|
||||
import org.apache.wicket.ResourceReference;
|
||||
import org.apache.wicket.ajax.AjaxRequestTarget;
|
||||
import org.apache.wicket.ajax.form.AjaxFormSubmitBehavior;
|
||||
import org.apache.wicket.behavior.AttributeAppender;
|
||||
import org.apache.wicket.markup.html.CSSPackageResource;
|
||||
import org.apache.wicket.markup.html.basic.Label;
|
||||
import org.apache.wicket.markup.html.form.Form;
|
||||
import org.apache.wicket.markup.html.form.TextField;
|
||||
import org.apache.wicket.markup.html.image.Image;
|
||||
import org.apache.wicket.markup.html.list.ListItem;
|
||||
import org.apache.wicket.markup.html.list.ListView;
|
||||
import org.apache.wicket.markup.html.panel.Panel;
|
||||
import org.apache.wicket.model.CompoundPropertyModel;
|
||||
import org.apache.wicket.model.Model;
|
||||
import org.joda.time.MutableDateTime;
|
||||
import org.wicketstuff.minis.spinner.Spinner;
|
||||
|
||||
public class MonthPicker extends Panel {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
private MutableDateTime internalDate = new MutableDateTime();
|
||||
|
||||
private final static String[] MONTH_NAMES = new String[]{"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"};
|
||||
|
||||
private YearForm yearForm;
|
||||
|
||||
private final List<IMonthChangedListener> listenersList = new ArrayList<IMonthChangedListener>();
|
||||
|
||||
private final AttributeAppender selectedCssClass = new AttributeAppender("class", true, new Model<String>("selected"), " ");
|
||||
|
||||
public MonthPicker(String id){
|
||||
this(id, null);
|
||||
}
|
||||
|
||||
public MonthPicker(String id, Date defaultDate) {
|
||||
super(id);
|
||||
setOutputMarkupId(true);
|
||||
internalDate = (defaultDate == null) ? new MutableDateTime() : new MutableDateTime(defaultDate);
|
||||
add(CSSPackageResource.getHeaderContribution(getClass(), "monthpicker.css"));
|
||||
addSpinner();
|
||||
addMonthList();
|
||||
}
|
||||
|
||||
private void addSpinner(){
|
||||
yearForm = new YearForm("yearForm", internalDate.getYear());
|
||||
add(yearForm);
|
||||
}
|
||||
|
||||
private void addMonthList(){
|
||||
|
||||
ListView<String> monthList = new ListView<String>("monthList", Arrays.asList(MONTH_NAMES)){
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@Override
|
||||
protected void populateItem(ListItem<String> item) {
|
||||
final Label month = new Label("month", item.getModelObject());
|
||||
final int monthOfYear = item.getIndex() + 1;
|
||||
if(monthOfYear == internalDate.getMonthOfYear()){
|
||||
month.add(selectedCssClass);
|
||||
}
|
||||
|
||||
month.add(new AjaxFormSubmitBehavior(yearForm, "onclick"){
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@Override
|
||||
protected void onSubmit(AjaxRequestTarget target) {
|
||||
YearForm form = (YearForm) getForm();
|
||||
internalDate.setYear(form.getModelObject().getYear());
|
||||
internalDate.setMonthOfYear(monthOfYear);
|
||||
for(IMonthChangedListener l : listenersList){
|
||||
l.onSelectionChange(target, internalDate.toDate());
|
||||
}
|
||||
month.add(selectedCssClass);
|
||||
target.addComponent(MonthPicker.this);
|
||||
}
|
||||
|
||||
@Override
|
||||
protected void onError(AjaxRequestTarget target) {
|
||||
System.out.println("Error");
|
||||
target.addComponent(MonthPicker.this);
|
||||
}});
|
||||
|
||||
item.add(month);
|
||||
add(item);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
add(monthList);
|
||||
}
|
||||
|
||||
public MonthPicker registerOnChangeListener(IMonthChangedListener listener){
|
||||
listenersList.add(listener);
|
||||
return this;
|
||||
}
|
||||
|
||||
public void removeOnChangeListener(IMonthChangedListener listener){
|
||||
listenersList.remove(listener);
|
||||
}
|
||||
|
||||
public MonthPicker fireEventOnYearChange(){
|
||||
yearForm.fireEventOnYearChange();
|
||||
return this;
|
||||
}
|
||||
|
||||
private class YearForm extends Form<YearFormModel> {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
private TextField<Integer> yearTf;
|
||||
|
||||
private Image up;
|
||||
private Image down;
|
||||
|
||||
public YearForm(String id, int defaultYear) {
|
||||
super(id, new CompoundPropertyModel<YearFormModel>(new YearFormModel(defaultYear)));
|
||||
|
||||
yearTf = new TextField<Integer>("year");
|
||||
|
||||
down = new Image("down", new ResourceReference(getClass(), "arrow-down_15x15.png"));
|
||||
down.setOutputMarkupId(true);
|
||||
add(down);
|
||||
up = new Image("up", new ResourceReference(getClass(), "arrow-up_15x15.png"));
|
||||
up.setOutputMarkupId(true);
|
||||
add(up);
|
||||
|
||||
Spinner yearSpinner = new Spinner(){
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@Override
|
||||
protected Component getSpinDownComponent(){
|
||||
return down;
|
||||
}
|
||||
|
||||
protected Component getSpinUpComponent(){
|
||||
return up;
|
||||
}
|
||||
};
|
||||
|
||||
yearTf.add(yearSpinner);
|
||||
add(yearTf);
|
||||
}
|
||||
|
||||
public void fireEventOnYearChange(){
|
||||
up.add(newOnYearChangeBehavior());
|
||||
down.add(newOnYearChangeBehavior());
|
||||
}
|
||||
|
||||
private AjaxFormSubmitBehavior newOnYearChangeBehavior(){
|
||||
return new AjaxFormSubmitBehavior(YearForm.this, "onclick"){
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@Override
|
||||
protected void onSubmit(AjaxRequestTarget target) {
|
||||
YearForm form = (YearForm) getForm();
|
||||
internalDate.setYear(form.getModelObject().getYear());
|
||||
for(IMonthChangedListener l : listenersList){
|
||||
l.onSelectionChange(target, internalDate.toDate());
|
||||
}
|
||||
target.addComponent(MonthPicker.this);
|
||||
}
|
||||
|
||||
@Override
|
||||
protected void onError(AjaxRequestTarget target) {
|
||||
System.out.println("Error");
|
||||
target.addComponent(MonthPicker.this);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
private class YearFormModel implements IClusterable {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
private Integer year;
|
||||
|
||||
public YearFormModel(int defaultYear){
|
||||
this.setYear(defaultYear);
|
||||
}
|
||||
|
||||
public void setYear(Integer year) {
|
||||
this.year = year;
|
||||
}
|
||||
|
||||
public Integer getYear() {
|
||||
return year;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After 
(image error) Size: 1.5 KiB |
Binary file not shown.
|
After 
(image error) Size: 1.4 KiB |
@ -0,0 +1,56 @@
|
||||
div.monthPicker {
|
||||
display: block;
|
||||
height: 2.5em;
|
||||
background-color: #004D99;
|
||||
line-height: 2.5em;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
div.monthPicker form {
|
||||
width: 7em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.monthPicker input {
|
||||
width: 3em;
|
||||
border: none;
|
||||
background-color: #004D99;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.monthPicker img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.monthPicker ul {
|
||||
margin: 0 0;
|
||||
padding: 0 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.monthPicker li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.monthPicker li span {
|
||||
cursor: pointer;
|
||||
padding: 0.4em 1em;
|
||||
border: 1px solid #004D99;
|
||||
}
|
||||
|
||||
div.monthPicker li span:hover {
|
||||
background-color: #3DD8FF;
|
||||
border: 1px solid #7AE4FF;
|
||||
color: black;
|
||||
-webkit-border-radius: 3px;
|
||||
}
|
||||
|
||||
div.monthPicker li span.selected {
|
||||
background-color: #52A8FF;
|
||||
border: 1px solid #7AE4FF;
|
||||
color: black;
|
||||
-webkit-border-radius: 3px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user