super.onFirstShowPage();
PScript.get().execute("window.colors = {};");
final PFlowPanel layout = new PFlowPanel();
layout.add(new PLabel("Pony SDK styling use Less CSS. It's really easy to customize your styling with the use of a few variable."));
layout.add(new PLabel("Customize the sample by changing this variables :"));
final Form form = new Form();
final PSimplePanel headerPreview = new PSimplePanel();
final PSimplePanel headerTextColorPreview = new PSimplePanel();
final PSimplePanel footerPreview = new PSimplePanel();
final PSimplePanel footerTextColorPreview = new PSimplePanel();
final PSimplePanel highlightPreview = new PSimplePanel();
final PSimplePanel blackPreview = new PSimplePanel();
final PSimplePanel grayDarkerPreview = new PSimplePanel();
final PSimplePanel grayDarkPreview = new PSimplePanel();
final PSimplePanel grayPreview = new PSimplePanel();
final PSimplePanel grayLightPreview = new PSimplePanel();
final PSimplePanel grayLighterPreview = new PSimplePanel();
final PSimplePanel whitePreview = new PSimplePanel();
header = buildColorFormField("498BF4", headerPreview);
headerTextColor = buildColorFormField("EDEDED", headerTextColorPreview);
footer = buildColorFormField("498BF4", footerPreview);
footerTextColor = buildColorFormField("EDEDED", footerTextColorPreview);
highlight = buildColorFormField("498BF4", highlightPreview);
black = buildColorFormField("000000", blackPreview);
grayDarker = buildColorFormField("222222", grayDarkerPreview);
grayDark = buildColorFormField("333333", grayDarkPreview);
gray = buildColorFormField("555555", grayPreview);
grayLight = buildColorFormField("999999", grayLightPreview);
grayLighter = buildColorFormField("eeeeee", grayLighterPreview);
white = buildColorFormField("ffffff", whitePreview);
form.addFormField(header.formField);
form.addFormField(headerTextColor.formField);
form.addFormField(footer.formField);
form.addFormField(footerTextColor.formField);
form.addFormField(highlight.formField);
form.addFormField(black.formField);
form.addFormField(grayDarker.formField);
form.addFormField(grayDark.formField);
form.addFormField(gray.formField);
form.addFormField(grayLight.formField);
form.addFormField(grayLighter.formField);
form.addFormField(white.formField);
final PFlexTable formLayout = new PFlexTable();
formLayout.setWidget(0, 0, new FormFieldComponent("header", header.formField));
formLayout.setWidget(1, 0, new FormFieldComponent("headerTextColor", headerTextColor.formField));
formLayout.setWidget(2, 0, new FormFieldComponent("footer", footer.formField));
formLayout.setWidget(3, 0, new FormFieldComponent("footerTextColor", footerTextColor.formField));
formLayout.setWidget(5, 0, new FormFieldComponent("highlight", highlight.formField));
formLayout.setWidget(0, 1, headerPreview);
formLayout.setWidget(1, 1, headerTextColorPreview);
formLayout.setWidget(2, 1, footerPreview);
formLayout.setWidget(3, 1, footerTextColorPreview);
formLayout.setWidget(5, 1, highlightPreview);
formLayout.setWidget(0, 2, new FormFieldComponent("black", black.formField));
formLayout.setWidget(1, 2, new FormFieldComponent("grayDarker", grayDarker.formField));
formLayout.setWidget(2, 2, new FormFieldComponent("grayDark", grayDark.formField));
formLayout.setWidget(3, 2, new FormFieldComponent("gray", gray.formField));
formLayout.setWidget(4, 2, new FormFieldComponent("grayLight", grayLight.formField));
formLayout.setWidget(5, 2, new FormFieldComponent("grayLighter", grayLighter.formField));
formLayout.setWidget(6, 2, new FormFieldComponent("white", white.formField));
formLayout.setWidget(0, 3, blackPreview);
formLayout.setWidget(1, 3, grayDarkerPreview);
formLayout.setWidget(2, 3, grayDarkPreview);
formLayout.setWidget(3, 3, grayPreview);
formLayout.setWidget(4, 3, grayLightPreview);
formLayout.setWidget(5, 3, grayLighterPreview);
formLayout.setWidget(6, 3, whitePreview);
final PButton validateButton = new PButton("Validate");
validateButton.setStyleName("pony-PButton accent");
validateButton.addClickHandler(new PClickHandler() {
@Override
public void onClick(final PClickEvent clickEvent) {
final boolean isValid = form.isValid();
if (isValid) {
updateClientColorAndRefreshLess();
}
}
});
layout.add(formLayout);
layout.add(validateButton);
final PListBox themesSelector = new PListBox();
themesSelector.addItem(STANDARD);
themesSelector.addItem(DARK);
themesSelector.addChangeHandler(new PChangeHandler() {
@Override
public void onChange(final PChangeEvent event) {
final String selectedItem = themesSelector.getSelectedItem();
setTheme(selectedItem);
}
});
layout.add(new PHTML("<br><br><br>"));
layout.add(new PLabel("You can easily compile many themes"));
layout.add(new PLabel("Try some of it: "));
layout.add(themesSelector);
examplePanel.setWidget(layout);
}