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.HasAllFocusHandlers, com.google.gwt.event.dom.client.HasAllGestureHandlers, com.google.gwt.event.dom.client.HasAllKeyHandlers, com.google.gwt.event.dom.client.HasAllMouseHandlers, com.google.gwt.event.dom.client.HasAllTouchHandlers, com.google.gwt.event.dom.client.HasBlurHandlers, com.google.gwt.event.dom.client.HasClickHandlers, com.google.gwt.event.dom.client.HasDoubleClickHandlers, com.google.gwt.event.dom.client.HasFocusHandlers, com.google.gwt.event.dom.client.HasGestureChangeHandlers, com.google.gwt.event.dom.client.HasGestureEndHandlers, com.google.gwt.event.dom.client.HasGestureStartHandlers, com.google.gwt.event.dom.client.HasKeyDownHandlers, com.google.gwt.event.dom.client.HasKeyPressHandlers, com.google.gwt.event.dom.client.HasKeyUpHandlers, com.google.gwt.event.dom.client.HasMouseDownHandlers, com.google.gwt.event.dom.client.HasMouseMoveHandlers, com.google.gwt.event.dom.client.HasMouseOutHandlers, com.google.gwt.event.dom.client.HasMouseOverHandlers, com.google.gwt.event.dom.client.HasMouseUpHandlers, com.google.gwt.event.dom.client.HasMouseWheelHandlers, com.google.gwt.event.dom.client.HasTouchCancelHandlers, com.google.gwt.event.dom.client.HasTouchEndHandlers, com.google.gwt.event.dom.client.HasTouchMoveHandlers, com.google.gwt.event.dom.client.HasTouchStartHandlers, com.google.gwt.event.logical.shared.HasAttachHandlers, com.google.gwt.event.logical.shared.HasCloseHandlers<MaterialCutOut>, com.google.gwt.event.logical.shared.HasOpenHandlers<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.HasAllDragAndDropHandlers, gwt.material.design.client.base.HasBorder, 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.HasDimension, gwt.material.design.client.base.HasDraggableHandlers, gwt.material.design.client.base.HasDroppableHandlers, gwt.material.design.client.base.HasDurationTransition, 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.HasInteractionHandlers, gwt.material.design.client.base.HasOpacity, gwt.material.design.client.base.HasOrientation, gwt.material.design.client.base.HasOrientationChangeHandler, 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.HasTransform, gwt.material.design.client.base.HasVerticalAlign, 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.logical.shared.HasOpenHandlers<MaterialCutOut>, gwt.material.design.client.base.HasCircle, gwt.material.design.client.base.HasDurationTransition

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.open(); //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 focusElement 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 gwt.material.design.client.base.MaterialWidget

$this

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

DEBUG_ID_PREFIX

Constructor Summary

Constructors

Constructor and Description
MaterialCutOut()
MaterialCutOut(gwt.material.design.client.constants.Color backgroundColor, Boolean circle, Double opacity)

Method Summary

Modifier and Type	Method and Description
com.google.gwt.event.shared.HandlerRegistration	addCloseHandler(com.google.gwt.event.logical.shared.CloseHandler<MaterialCutOut> handler)
com.google.gwt.event.shared.HandlerRegistration	addOpenHandler(com.google.gwt.event.logical.shared.OpenHandler<MaterialCutOut> handler)
void	close() Closes the cut out.
void	close(boolean autoClosed) Closes the cut out.
String	getAnimationTimingFunction()
gwt.material.design.client.constants.Color	getBackgroundColor()
String	getBackgroundSize()
int	getCutOutPadding()
int	getDuration()
com.google.gwt.dom.client.Element	getFocusElement()
double	getOpacity()
com.google.gwt.dom.client.Element	getTargetElement()
boolean	isAnimated()
boolean	isCircle()
void	open() Opens the modal cut out taking all the screen.
void	setAnimated(boolean animated) Enables or disables the open animation of the cut out.
void	setAnimationTimingFunction(String animationTimingFunction) Sets the animation timing fucntion of the opening cut out.
void	setBackgroundColor(gwt.material.design.client.constants.Color 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 focusElement in relation to the target element.
protected void	setCutOutStyle()
void	setDuration(int duration)
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

$this, add, add, addAttachHandler, addBlurHandler, addClickHandler, addDoubleClickHandler, addDragEndHandler, addDragEnterHandler, addDragLeaveHandler, addDragMoveHandler, addDragOverHandler, addDragStartHandler, addDropActivateHandler, addDropDeactivateHandler, addDropHandler, addFocusHandler, addGestureChangeHandler, addGestureEndHandler, addGestureStartHandler, addKeyDownHandler, addKeyPressHandler, addKeyUpHandler, addMouseDownHandler, addMouseMoveHandler, addMouseOutHandler, addMouseOverHandler, addMouseUpHandler, addMouseWheelHandler, addOrientationChangeHandler, addTouchCancelHandler, addTouchEndHandler, addTouchMoveHandler, addTouchStartHandler, body, clearActiveClass, enableFeature, getBackfaceVisibility, getBorder, getBorderBottom, getBorderLeft, getBorderMixin, getBorderRadius, getBorderRight, getBorderTop, getCenterOn, getCenterOnMixin, getChildren, getChildrenList, getCircleMixin, getColorsMixin, getDataAttribute, getDepth, getDimensionMixin, getEnabledMixin, getFlexboxMixin, getFloat, getFloatMixin, getFocusableMixin, getFontSize, getFontSizeMixin, getFontWeight, getFontWeightMixin, getGridMixin, getHandlerRegistry, getHideOn, getHideOnMixin, getHoverableMixin, getId, getIdMixin, getInitialClasses, getLayoutPosition, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOrientation, getOrientationMixin, getPerspective, getPerspectiveOrigin, getScrollspy, getScrollspyMixin, getSeparatorMixin, getShadow, getShadowMixin, getShowOn, getShowOnMixin, getTabIndex, getTextAlign, getTextAlignMixin, getTextColor, getTooltip, getTooltipDelayMs, getTooltipHTML, getTooltipMixin, getTooltipPosition, getTransform, getTransformMixin, getTransformOrigin, getTransformStyle, getTruncateMixin, getVerticalAlign, getVerticalAlignMixin, getWaves, getWavesMixin, getWidth, insert, insert, isDetectOrientation, isEnabled, isFeatureEnabled, isHoverable, isSeparator, isTruncate, onLoad, onUnload, registerHandler, removeHandler, setAccessKey, setBackfaceVisibility, setBorder, setBorderBottom, setBorderLeft, setBorderRadius, setBorderRight, setBorderTop, setBottom, setCenterOn, setClass, setDataAttribute, setDepth, setDetectOrientation, 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, setLineHeight, setMargin, setMarginBottom, setMarginLeft, setMarginRight, setMarginTop, setMaxHeight, setMaxWidth, setMinHeight, setMinWidth, setOffset, setOrientation, setOverflow, setPadding, setPaddingBottom, setPaddingLeft, setPaddingRight, setPaddingTop, setPerspective, setPerspectiveOrigin, setRight, setScrollspy, setSeparator, setShadow, setShowOn, setStyle, setTabIndex, setTextAlign, setTextColor, setTooltip, setTooltipDelayMs, setTooltipHTML, setTooltipPosition, setTop, setTransform, setTransformOrigin, setTransformStyle, setTransition, setTruncate, setVerticalAlign, setVisibility, setWaves, stopTouchStartEvent, validate, window

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

add, adjustIndex, checkIndexBoundsForAccess, checkIndexBoundsForInsertion, 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, 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()

MaterialCutOut

public MaterialCutOut(gwt.material.design.client.constants.Color backgroundColor,
                      Boolean circle,
                      Double opacity)

Method Detail

open

public void open()

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:

setTarget(Widget)

setCutOutStyle

protected void setCutOutStyle()

close

public void close()

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

close

public void close(boolean autoClosed)

Closes the cut out.

Parameters:

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

setBackgroundColor

public void setBackgroundColor(gwt.material.design.client.constants.Color bgColor)

Specified by:

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

Overrides:

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

getBackgroundColor

public gwt.material.design.client.constants.Color 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

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 focusElement in relation to the target element. The default is 10.

getCutOutPadding

public int getCutOutPadding()

Returns:

The padding in pixels of the cut out focusElement 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.

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.

getFocusElement

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

setDuration

public void setDuration(int duration)

Specified by:

setDuration in interface gwt.material.design.client.base.HasDurationTransition

getDuration

public int getDuration()

Specified by:

getDuration in interface gwt.material.design.client.base.HasDurationTransition

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>

addOpenHandler

public com.google.gwt.event.shared.HandlerRegistration addOpenHandler(com.google.gwt.event.logical.shared.OpenHandler<MaterialCutOut> handler)

Specified by:

addOpenHandler in interface com.google.gwt.event.logical.shared.HasOpenHandlers<MaterialCutOut>