Event overview mobile - Implemented flexible section header content

This commit is contained in:
Benjamin Barth committed 2015-06-16 13:48:20 +02:00
1 parent 12247b7380
commit 73cacfe29d
3 files changed
+97 -38

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 B

@@ -0,0 +1,80 @@
package com.sap.sailing.gwt.home.mobile.partials.sectionHeader;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.HeadingElement;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sailing.gwt.home.client.shared.LabelTypeUtil;
import com.sap.sailing.gwt.ui.shared.general.LabelType;
public class SectionHeaderContent extends Widget {
private static MyBinder uiBinder = GWT.create(MyBinder.class);
interface MyBinder extends UiBinder<DivElement, SectionHeaderContent> {
}
@UiField DivElement headerMainUi;
@UiField DivElement headerLeftUi;
@UiField HeadingElement titleUi;
@UiField DivElement labelUi;
@UiField DivElement imageUi;
@UiField DivElement subtitleUi;
@UiField DivElement headerRightUi;
@UiField DivElement infoTextUi;
@UiField ImageElement actionArrowUi;
private Command command;
public SectionHeaderContent() {
SectionHeaderResources.INSTANCE.css().ensureInjected();
setElement(uiBinder.createAndBindUi(this));
sinkEvents(Event.ONCLICK);
}
public void setSectionTitle(String sectionHeaderTitle) {
titleUi.setInnerText(sectionHeaderTitle);
}
public void setSubtitle(String subtitle) {
subtitleUi.getStyle().clearDisplay();
subtitleUi.setInnerText(subtitle);
headerLeftUi.addClassName(SectionHeaderResources.INSTANCE.css().sectionheader_itemdoublerow());
}
public void setLabelType(LabelType labelType) {
labelUi.getStyle().clearDisplay();
LabelTypeUtil.renderLabelType(labelUi, labelType);
}
public void setImageUrl(String imageUrl) {
imageUi.getStyle().clearDisplay();
imageUi.getStyle().setBackgroundImage("url(" + imageUrl + ")");
}
public void setInfoText(String infoText) {
headerRightUi.getStyle().clearDisplay();
infoTextUi.getStyle().clearDisplay();
infoTextUi.setInnerText(infoText);
}
public void setClickAction(final Command command) {
this.command = command;
headerRightUi.getStyle().clearDisplay();
actionArrowUi.getStyle().clearDisplay();
}
@Override
public void onBrowserEvent(Event event) {
if (command != null && event.getTypeInt() == Event.ONCLICK) {
command.execute();
return;
}
super.onBrowserEvent(event);
}
}
@@ -1,43 +1,22 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
<ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
<ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
<ui:with field="res" type="com.sap.sailing.gwt.home.mobile.resources.SharedResources" />
<ui:with field="local_res" type="com.sap.sailing.gwt.home.mobile.partials.sectionHeader.SectionHeaderResources" />
<g:HTMLPanel>
<!-- IF subtitle ADD class 'section-header__item--double-row' -->
<div class="{local_res.css.sectionheader_item} {local_res.css.sectionheader_itemdoublerow}">
<!-- IF END -->
<!-- IF image -->
<div style="background-image: url('')" class="{local_res.css.sectionheader_item_image}">
<div class="{local_res.css.sectionheader_item_image_seperator}"></div>
</div>
<!-- IF END -->
<!-- IF title -->
<h2 class="{local_res.css.sectionheader_item_title}">
<!-- title -->
</h2>
<!-- IF END -->
<!-- IF label -->
<div data-labeltype="live" class="{local_res.css.sectionheader_item_label} {res.mainCss.label}">
<!-- label -->
</div>
<!-- IF END -->
<!-- IF subtitle -->
<div class="{local_res.css.sectionheader_item_subtitle}">
<!-- subtitle -->
</div>
<!-- IF END -->
</div>
<div class="{local_res.css.sectionheader_item} {local_res.css.sectionheader_itemright}">
<!-- IF infoText -->
<div class="{local_res.css.sectionheader_item_infotext}">
<!-- infoText -->
</div>
<!-- IF END -->
<!-- IF link -->
<img src="images/home/arrow-grey-right.png" alt="" class="{local_res.css.sectionheader_item_arrow}"></img>
<!-- IF END -->
</div>
</g:HTMLPanel>
<div ui:field="headerMainUi">
<div class="{local_res.css.sectionheader_item}" ui:field="headerLeftUi">
<div class="{local_res.css.sectionheader_item_image}" style="display:none;" ui:field="imageUi">
<div class="{local_res.css.sectionheader_item_image_seperator}"></div>
</div>
<h2 class="{local_res.css.sectionheader_item_title}" ui:field="titleUi"></h2>
<div class="{local_res.css.sectionheader_item_label} {res.mainCss.label}" style="display:none;" ui:field="labelUi"></div>
<div class="{local_res.css.sectionheader_item_subtitle}" style="display:none;" ui:field="subtitleUi"></div>
</div>
<div class="{local_res.css.sectionheader_item} {local_res.css.sectionheader_itemright}" style="display:none;" ui:field="headerRightUi">
<div class="{local_res.css.sectionheader_item_infotext}" style="display:none;" ui:field="infoTextUi"></div>
<img src="images/mobile/arrow-grey-right.png" alt="" class="{local_res.css.sectionheader_item_arrow}"
style="display:none;" ui:field="actionArrowUi"></img>
</div>
</div>
</ui:UiBinder>