gwt.material.design.addins.client.cutout

Class MaterialCutOut

java.lang.Object

com.google.gwt.user.client.ui.UIObject

com.google.gwt.user.client.ui.Widget

com.google.gwt.user.client.ui.Panel

com.google.gwt.user.client.ui.ComplexPanel

gwt.material.design.client.base.MaterialWidget

gwt.material.design.addins.client.cutout.MaterialCutOut

All Implemented Interfaces:

com.google.gwt.event.dom.client.HasClickHandlers, com.google.gwt.event.logical.shared.HasAttachHandlers, com.google.gwt.event.logical.shared.HasCloseHandlers<MaterialCutOut>, com.google.gwt.event.shared.HasHandlers, com.google.gwt.user.client.EventListener, com.google.gwt.user.client.ui.Focusable, com.google.gwt.user.client.ui.HasEnabled, com.google.gwt.user.client.ui.HasVisibility, com.google.gwt.user.client.ui.HasWidgets, com.google.gwt.user.client.ui.HasWidgets.ForIsWidget, com.google.gwt.user.client.ui.IndexedPanel, com.google.gwt.user.client.ui.IndexedPanel.ForIsWidget, com.google.gwt.user.client.ui.IsWidget, gwt.material.design.client.base.HasCenterOn, gwt.material.design.client.base.HasCircle, gwt.material.design.client.base.HasColors, gwt.material.design.client.base.HasDataAttributes, gwt.material.design.client.base.HasDepth, gwt.material.design.client.base.HasFlexbox, gwt.material.design.client.base.HasFloat, gwt.material.design.client.base.HasFontSize, gwt.material.design.client.base.HasFontWeight, gwt.material.design.client.base.HasGrid, gwt.material.design.client.base.HasHideOn, gwt.material.design.client.base.HasHoverable, gwt.material.design.client.base.HasId, gwt.material.design.client.base.HasInitialClasses, gwt.material.design.client.base.HasInlineStyle, gwt.material.design.client.base.HasOpacity, gwt.material.design.client.base.HasScrollspy, gwt.material.design.client.base.HasSeparator, gwt.material.design.client.base.HasShadow, gwt.material.design.client.base.HasShowOn, gwt.material.design.client.base.HasTextAlign, gwt.material.design.client.base.HasTooltip, gwt.material.design.client.base.HasWaves, Iterable<com.google.gwt.user.client.ui.Widget>

public class MaterialCutOut
extends gwt.material.design.client.base.MaterialWidget
implements com.google.gwt.event.logical.shared.HasCloseHandlers<MaterialCutOut>, com.google.gwt.event.dom.client.HasClickHandlers, gwt.material.design.client.base.HasCircle

MaterialCutOut is a fullscreen modal-like component to show users about new features or important elements of the document. You can use CloseHandlers to be notified when the cut out is closed.

XML Namespace Declaration

 
 xmlns:ma='urn:import:gwt.material.design.addins.client'
 
 

UiBinder Usage:

 
 <ma:cutout.MaterialCutOut ui:field="cutOut">
      <!-- add any widgets here -->
 </ma:cutout.MaterialCutOut>
 
 

Java Usage:

MaterialCutOut cutOut = ... //create using new or using UiBinder cutOut.setTarget(myTargetWidget); //the widget or element you want to focus cutOut.openCutOut(); //shows the modal over the page

Custom styling:

You use change the cut out style by using the material-cutout class, and material-cutout-focus class for the focus box.

Notice:

On some iOS devices, on mobile Safari, the CutOut may not open when the setCircle(boolean) is set to true. This is because of problems on Safari with box-shadows over rounded borders. To avoid this issue you can disable the circle. Check the issue 227 for details.

Author:

gilberto-torrezan

See Also:

Material Cutouts

Nested Class Summary

Nested classes/interfaces inherited from class gwt.material.design.client.base.MaterialWidget

gwt.material.design.client.base.MaterialWidget.Feature

Nested classes/interfaces inherited from class com.google.gwt.user.client.ui.UIObject

com.google.gwt.user.client.ui.UIObject.DebugIdImpl, com.google.gwt.user.client.ui.UIObject.DebugIdImplEnabled

Nested classes/interfaces inherited from interface com.google.gwt.user.client.ui.IndexedPanel

com.google.gwt.user.client.ui.IndexedPanel.ForIsWidget

Nested classes/interfaces inherited from interface com.google.gwt.user.client.ui.HasWidgets

com.google.gwt.user.client.ui.HasWidgets.ForIsWidget

Field Summary

Fields inherited from class com.google.gwt.user.client.ui.UIObject

DEBUG_ID_PREFIX

Constructor Summary

Constructors

Constructor and Description
MaterialCutOut()

Method Summary

Modifier and Type	Method and Description
com.google.gwt.event.shared.HandlerRegistration	addClickHandler(com.google.gwt.event.dom.client.ClickHandler handler)
com.google.gwt.event.shared.HandlerRegistration	addCloseHandler(com.google.gwt.event.logical.shared.CloseHandler<MaterialCutOut> handler)
void	closeCutOut() Closes the cut out.
void	closeCutOut(boolean autoClosed) Closes the cut out.
String	getAnimationDuration()
String	getAnimationTimingFunction()
String	getBackgroundColor()
String	getBackgroundSize()
int	getCutOutPadding()
double	getOpacity()
com.google.gwt.dom.client.Element	getTargetElement()
boolean	isAnimated()
boolean	isCircle()
void	openCutOut() Opens the modal cut out taking all the screen.
void	setAnimated(boolean animated) Enables or disables the open animation of the cut out.
void	setAnimationDuration(String animationDuration) Sets the animation duration of the opening cut out.
void	setAnimationTimingFunction(String animationTimingFunction) Sets the animation timing fucntion of the opening cut out.
void	setBackgroundColor(String bgColor)
void	setBackgroundSize(String backgroundSize) Sets the radius size of the Cut Out background.
void	setCircle(boolean circle) Sets if the cut out should be rendered as a circle or a simple rectangle.
void	setCutOutPadding(int cutOutPadding) Sets the padding in pixels of the cut out focus in relation to the target element.
void	setOpacity(double opacity)
void	setTarget(com.google.gwt.dom.client.Element targetElement) Sets the target element to be focused by the cut out.
void	setTarget(com.google.gwt.user.client.ui.Widget widget) Sets the target widget to be focused by the cut out.
protected void	setupComputedBackgroundColor() Gets the computed background color, based on the backgroundColor CSS class.
protected void	setupCutOutPosition(com.google.gwt.dom.client.Element cutOut, com.google.gwt.dom.client.Element relativeTo, int padding, boolean circle) Setups the cut out position when the screen changes size or is scrolled.
protected void	setupTransition()
protected void	setupWindowHandlers() Configures a resize handler and a scroll handler on the window to properly adjust the Cut Out.

Methods inherited from class gwt.material.design.client.base.MaterialWidget

add, add, clearActiveClass, enableFeature, getCenterOn, getCenterOnMixin, getCircleMixin, getColorsMixin, getDataAttribute, getDepth, getEnabledMixin, getFlexboxMixin, getFloat, getFloatMixin, getFocusableMixin, getFontSize, getFontSizeMixin, getFontWeight, getFontWeightMixin, getGridMixin, getHideOn, getHideOnMixin, getHoverableMixin, getId, getIdMixin, getInitialClasses, getScrollspy, getScrollspyMixin, getSeparatorMixin, getShadow, getShadowMixin, getShowOn, getShowOnMixin, getTabIndex, getTextAlign, getTextAlignMixin, getTextColor, getTooltip, getTooltipDelayMs, getTooltipMixin, getTooltipPosition, getTruncateMixin, getWaves, getWavesMixin, getWidth, getWidth, insert, insert, isEnabled, isFeatureEnabled, isHoverable, isSeparator, onLoad, setAccessKey, setBottom, setCenterOn, setDataAttribute, setDepth, setDisplay, setEnabled, setFlex, setFlexAlignContent, setFlexAlignItems, setFlexAlignSelf, setFlexBasis, setFlexDirection, setFlexGrow, setFlexJustifyContent, setFlexOrder, setFlexShrink, setFlexWrap, setFloat, setFocus, setFontSize, setFontSize, setFontWeight, setGrid, setGwtDisplay, setHideOn, setHoverable, setId, setInitialClasses, setLayoutPosition, setLeft, setMargin, setMarginBottom, setMarginLeft, setMarginRight, setMarginTop, setOffset, setOverflow, setPadding, setPaddingBottom, setPaddingLeft, setPaddingRight, setPaddingTop, setRight, setScrollspy, setSeparator, setShadow, setShowOn, setTabIndex, setTextAlign, setTextColor, setTooltip, setTooltipDelayMs, setTooltipPosition, setTop, setTruncate, setVisibility, setWaves, stopTouchStartEvent, stopTouchStartEvent

Methods inherited from class com.google.gwt.user.client.ui.ComplexPanel

add, adjustIndex, checkIndexBoundsForAccess, checkIndexBoundsForInsertion, getChildren, getWidget, getWidgetCount, getWidgetIndex, getWidgetIndex, insert, iterator, remove, remove

Methods inherited from class com.google.gwt.user.client.ui.Panel

add, adopt, clear, doAttachChildren, doDetachChildren, orphan, remove

Methods inherited from class com.google.gwt.user.client.ui.Widget

addAttachHandler, addBitlessDomHandler, addDomHandler, addHandler, asWidget, asWidgetOrNull, createHandlerManager, delegateEvent, fireEvent, getHandlerCount, getLayoutData, getParent, isAttached, isOrWasAttached, onAttach, onBrowserEvent, onDetach, onUnload, removeFromParent, setLayoutData, sinkEvents, unsinkEvents

Methods inherited from class com.google.gwt.user.client.ui.UIObject

addStyleDependentName, addStyleName, ensureDebugId, ensureDebugId, ensureDebugId, getAbsoluteLeft, getAbsoluteTop, getElement, getOffsetHeight, getOffsetWidth, getStyleElement, getStyleName, getStyleName, getStylePrimaryName, getStylePrimaryName, getTitle, isVisible, isVisible, onEnsureDebugId, removeStyleDependentName, removeStyleName, resolvePotentialElement, setElement, setElement, setHeight, setPixelSize, setSize, setStyleDependentName, setStyleName, setStyleName, setStyleName, setStyleName, setStylePrimaryName, setStylePrimaryName, setTitle, setVisible, setVisible, setWidth, sinkBitlessEvent, toString

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, wait, wait, wait

Methods inherited from interface com.google.gwt.event.shared.HasHandlers

fireEvent

Methods inherited from interface gwt.material.design.client.base.HasFlexbox

setVisible

Methods inherited from interface java.lang.Iterable

forEach, spliterator

Constructor Detail

MaterialCutOut

public MaterialCutOut()

Method Detail

setBackgroundColor

public void setBackgroundColor(String bgColor)

Specified by:

setBackgroundColor in interface gwt.material.design.client.base.HasColors

Overrides:

setBackgroundColor in class gwt.material.design.client.base.MaterialWidget

getBackgroundColor

public String getBackgroundColor()

Specified by:

getBackgroundColor in interface gwt.material.design.client.base.HasColors

Overrides:

getBackgroundColor in class gwt.material.design.client.base.MaterialWidget

setOpacity

public void setOpacity(double opacity)

Specified by:

setOpacity in interface gwt.material.design.client.base.HasOpacity

Overrides:

setOpacity in class gwt.material.design.client.base.MaterialWidget

getOpacity

public double getOpacity()

Specified by:

getOpacity in interface gwt.material.design.client.base.HasOpacity

Overrides:

getOpacity in class gwt.material.design.client.base.MaterialWidget

getAnimationDuration

public String getAnimationDuration()

Returns:

the animation duration of the opening cut out

setAnimationDuration

public void setAnimationDuration(String animationDuration)

Sets the animation duration of the opening cut out. The default is 0.5s.

Parameters:

animationDuration - The duration in CSS time unit, such as s and ms.

getAnimationTimingFunction

public String getAnimationTimingFunction()

Returns:

the animation timing fucntion of the opening cut out

setAnimationTimingFunction

public void setAnimationTimingFunction(String animationTimingFunction)

Sets the animation timing fucntion of the opening cut out.

Parameters:

animationTimingFunction - The speed curve of the animation, such as ease (the default), linear and ease-in-out

setCircle

public void setCircle(boolean circle)

Sets if the cut out should be rendered as a circle or a simple rectangle. Circle is better for targets with same width and height. The default is false (is a rectangle).

Specified by:

setCircle in interface gwt.material.design.client.base.HasCircle

Overrides:

setCircle in class gwt.material.design.client.base.MaterialWidget

isCircle

public boolean isCircle()

Specified by:

isCircle in interface gwt.material.design.client.base.HasCircle

Overrides:

isCircle in class gwt.material.design.client.base.MaterialWidget

Returns:

The if the cut out should be rendered as a circle or a simple rectangle

setCutOutPadding

public void setCutOutPadding(int cutOutPadding)

Sets the padding in pixels of the cut out focus in relation to the target element. The default is 10.

getCutOutPadding

public int getCutOutPadding()

Returns:

The padding in pixels of the cut out focus in relation to the target element

setTarget

public void setTarget(com.google.gwt.dom.client.Element targetElement)

Sets the target element to be focused by the cut out.

setTarget

public void setTarget(com.google.gwt.user.client.ui.Widget widget)

Sets the target widget to be focused by the cut out. Its the same as calling setTarget(widget.getElement());

See Also:

setTarget(Element)

getTargetElement

public com.google.gwt.dom.client.Element getTargetElement()

Returns:

The target element to be focused

setAnimated

public void setAnimated(boolean animated)

Enables or disables the open animation of the cut out. The default is true.

isAnimated

public boolean isAnimated()

Returns:

If the animation of the cut out is enabled when opening.

setBackgroundSize

public void setBackgroundSize(String backgroundSize)

Sets the radius size of the Cut Out background. By default, it takes the whole page by using 100rem as size.

Parameters:

backgroundSize - The size of the background of the Cut Out. You can use any supported CSS unit for box shadows, such as rem and px.

getBackgroundSize

public String getBackgroundSize()

Returns:

The radius size of the background of the Cut Out.

openCutOut

public void openCutOut()

Opens the modal cut out taking all the screen. The target element should be set before calling this method.

Throws:

IllegalStateException - if the target element is null

See Also:

#setTargetElement(Element)

closeCutOut

public void closeCutOut()

Closes the cut out. It is the same as calling closeCutOut(boolean) with false.

closeCutOut

public void closeCutOut(boolean autoClosed)

Closes the cut out.

Parameters:

autoClosed - Notifies with the modal was auto closed or closed by user action

setupCutOutPosition

protected void setupCutOutPosition(com.google.gwt.dom.client.Element cutOut,
                                   com.google.gwt.dom.client.Element relativeTo,
                                   int padding,
                                   boolean circle)

Setups the cut out position when the screen changes size or is scrolled.

setupWindowHandlers

protected void setupWindowHandlers()

Configures a resize handler and a scroll handler on the window to properly adjust the Cut Out.

setupTransition

protected void setupTransition()

setupComputedBackgroundColor

protected void setupComputedBackgroundColor()

Gets the computed background color, based on the backgroundColor CSS class.

addCloseHandler

public com.google.gwt.event.shared.HandlerRegistration addCloseHandler(com.google.gwt.event.logical.shared.CloseHandler<MaterialCutOut> handler)

Specified by:

addCloseHandler in interface com.google.gwt.event.logical.shared.HasCloseHandlers<MaterialCutOut>

addClickHandler

public com.google.gwt.event.shared.HandlerRegistration addClickHandler(com.google.gwt.event.dom.client.ClickHandler handler)

Specified by:

addClickHandler in interface com.google.gwt.event.dom.client.HasClickHandlers