PDA

View Full Version : Customize Dialog window



kpater87
12 Aug 2015, 9:34 PM
Hi all,

I would like to customize Dialog window in GXT3 to increase the header font size and to change the body background color. To do this I found three possible ways.

Approach 1.
Programaticaly modify the component styles.

CustomDialong.java:

public class CustomDialog extends Dialog {
public CustomDialog() {
getHeader().getAppearance().getTextElem(getHeader().getElement()).getStyle().setFontSize(16d, Unit.PX);
getHeader().getAppearance().getTextElem(getHeader().getElement()).getStyle().setLineHeight(20d, Unit.PX);
getBody().getStyle().setBackgroundColor("white");
}
}


Approach 2.
Add class names to proper elements and override the GXT CSS.

CustomDialog.java:

public class CustomDialog extends Dialog {
public CustomDialog() {
getHeader().getAppearance().getTextElem(getHeader().getElement()).addClassName("CustomDialogHeader");
getBody().addClassName("CustomDialogBody");
}
}

Application.css:

.CustomDialogHeader {
font-size: 16px !important;
line-height: 20px !important;
}

.CustomDialogBody {
background: white !important;
}

Approach 3: Use own appearance based on existing one:

CustomDialog.java:

public class CustomDialog extends Dialog {
public CustomDialog() {
super(new CustomBlueWindowAppearance());
}
}

CustomBlueWindowAppearance.java:

public class CustomBlueWindowAppearance extends BlueWindowAppearance {

public interface CustomBlueHeaderStyle extends BlueHeaderStyle {
}

public interface CustomBlueWindowStyle extends BlueWindowStyle {
}

public interface CustomBlueHeaderResources extends BlueHeaderResources {
@Override
@Source({ "com/sencha/gxt/theme/base/client/widget/Header.css", "com/sencha/gxt/theme/blue/client/window/BlueWindowHeader.css",
"CustomBlueWindowHeader.css" })
CustomBlueHeaderStyle style();
}

public interface CustomBlueWindowResources extends BlueWindowResources {

@Source({ "com/sencha/gxt/theme/base/client/panel/ContentPanel.css", "com/sencha/gxt/theme/base/client/window/Window.css",
"com/sencha/gxt/theme/blue/client/window/BlueWindow.css", "CustomBlueWindow.css" })
@Override
CustomBlueWindowStyle style();

}

@Override
public HeaderDefaultAppearance getHeaderAppearance() {
return new HeaderDefaultAppearance(GWT.<CustomBlueHeaderResources> create(CustomBlueHeaderResources.class));
}

public CustomBlueWindowAppearance() {
super((CustomBlueWindowResources) GWT.create(CustomBlueWindowResources.class));
}
}


CustomBlueWindow.css:

.body {
border: 0px;
background: white;
}

CustomBlueWindowHeader.css:

.headerText {
font-family: tahoma, arial, verdana, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 20px;
}

Which approach do you advice? I know that GXT 3 based on Appearance pattern, but does it mean that I always should create own appearance class if I want to slightly change the existing component?