Class
zebkit.ui.Panel
extends <zebkit.layout.Layoutable> |
<zebkit.ui> |
This the core UI component class. All other UI components has to be successor of panel class.
// instantiate panel with no arguments
var p = new zebkit.ui.Panel();
// instantiate panel with border layout set as its layout manager
var p = new zebkit.ui.Panel(new zebkit.layout.BorderLayout());
// instantiate panel with the given properties (border
// layout manager, blue background and plain border)
var p = new zebkit.ui.Panel({
layout: new zebkit.ui.BorderLayout(),
background : "blue",
border : "plain"
});
Container Panel can contains number of other UI components as its children where the children components are placed with a defined by the panel layout manager:
// add few children component to panel top, center and bottom parts
// with help of border layout manager
var p = new zebkit.ui.Panel();
p.setBorderLayout(4); // set layout manager to
// order children components
p.add("top", new zebkit.ui.Label("Top label"));
p.add("center", new zebkit.ui.TextArea("Text area"));
p.add("bottom", new zebkit.ui.Button("Button"));
Input and component events The class provides possibility to catch various component and input events by declaring an appropriate event method handler. The most simple case you just define a method:
var p = new zebkit.ui.Panel();
p.pointerPressed = function(e) {
// handle event here
};
If you prefer to create an anonymous class instance you can do it as follow:
var p = new zebkit.ui.Panel([
function pointerPressed(e) {
// handle event here
}
]);
One more way to add the event handler is dynamic extending of an instance class demonstrated below:
var p = new zebkit.ui.Panel("Test");
p.extend([
function pointerPressed(e) {
// handle event here
}
]);
Pay attention Zebkit UI components often declare own event handlers and in this case you can overwrite the default event handler with a new one. Preventing the basic event handler execution can cause the component will work improperly. You should care about the base event handler execution as follow:
// button component declares own pointer pressed event handler
// we have to call the original handler to keep the button component
// properly working
var p = new zebkit.ui.Button("Test");
p.extend([
function pointerPressed(e) {
this.$super(e); // call parent class event handler implementation
// handle event here
}
]);
zebkit.ui.Panel
([l]
)
Parameters:
-
[l]
<Object | zebkit.layout.Layout>pass a layout manager or number of properties that have to be applied to the instance of the panel class.
protected
void
focused ( )
The method is called whenever the UI component gets or looses focus |
public
<zebkit.ui.zCanvas>
getCanvas ( )
Find a zebkit.ui.zCanvas where the given UI component is hosted
Returns:
<zebkit.ui.zCanvas>
a zebkit canvas |
public
<zebkit.ui.Panel>
getComponentAt (x, y )
Get a children UI component that embeds the given point. The method calculates the component visible area first and than looks for a children component only in this calculated visible area. If no one children component has been found than component return itself as a holder of the given point if one of the following condition is true:
Parameters:
Returns:
<zebkit.ui.Panel>
a children UI component |
@Override
zebkit.layout.Layoutable
public void kidAdded (index, constr, l )
The method is implemented to be aware about a children component insertion. Parameters:
|
@Override
zebkit.layout.Layoutable
public void kidRemoved (i, l, ctr )
The method is implemented to be aware about a children component removal. Parameters:
|
public
<zebkit.DoIt>
load (JSON )
Load content of the panel UI components from the specified JSON file. Parameters:
Returns:
<zebkit.DoIt>
a runner to track JSON loading |
public
void
paintChildComponents (g, clipChild )
Paint child components. Parameters:
|
public
void
paintComponent (g )
Paint the component and all its child components using the given 2D HTML Canvas context Parameters:
|
public
chainable
paintViewAt (g, ax, ay, v )
Paint the given view with he specified horizontal and vertical alignments. Parameters:
|
@Override
zebkit.layout.Layoutable
public void relocated (px, py )
The method is implemented to be aware the component location updating Parameters:
|
public
chainable
removeAll ( )
Remove all children components |
public
void
repaint ([x], [y], [w], [h] )
Request the whole UI component or part of the UI component to be repainted Parameters:
|
public
void
requestFocus ( )
Force the given component to catch focus if the component is focusable. |
public
void
requestFocusIn ([timeout] )
Force the given component to catch focus in the given timeout. Parameters:
|
@Override
zebkit.layout.Layoutable
public void resized (pw, ph )
The method is implemented to be aware the component size updating Parameters:
|
public
chainable
setBackground (v )
Set the background. Background can be a color string or a zebkit.draw.View class instance, or a function(g,x,y,w,h,c) that paints the background:
Parameters:
|
public
chainable
setBorder ([v] )
Set the border view Parameters:
Example:
|
public
chainable
setBorderLayout ([gap] )
Set border layout shortcut method Parameters:
|
public
chainable
setBottomPadding (bottom )
Set bottom padding Parameters:
|
public
chainable
setConstraints (ctr )
Set the component layout constraints. Parameters:
|
public
chainable
setEnabled (b )
Set the UI component enabled state. Using this property an UI component can be excluded from getting input events Parameters:
|
public
chainable
setFlowLayout ([ax], [ay], [dir], [gap] )
Set flow layout shortcut method. Parameters:
|
public
chainable
setGrisLayout ( )
Set raster layout shortcut method sizes. |
protected
chainable
setKids (a )
Add the given children component or number of components to the given panel. Parameters:
|
public
chainable
setLeftPadding (left )
Set left padding Parameters:
|
public
chainable
setListLayout ([ax], [gap] )
Set list layout shortcut method Parameters:
|
public
chainable
setPadding (v )
Set the UI component top, right, left, bottom paddings to the same given value Parameters:
|
public
chainable
setPadding (top, left, bottom, right )
Set UI component top, left, bottom, right paddings. The paddings are gaps between component border and painted area. Parameters:
|
public
chainable
setRasterLayout ([usePsSize] )
Set raster layout shortcut method Parameters:
|
public
chainable
setRightPadding (right )
Set right padding Parameters:
|
public
chainable
setStackLayout ([gap] )
Set stack layout shortcut method Parameters:
|
public
chainable
setTopPadding (top )
Set top padding Parameters:
|
public
chainable
setVisible (b )
Set the UI component visibility Parameters:
|
public
chainable
toBack ( )
Send the UI component to back |
public
chainable
toFront ( )
Bring the UI component to front |
public
chainable
toPreferredHeight ( )
Set the UI component height to its preferred height |
public
chainable
toPreferredSize ( )
Set the UI component size to its preferred size |
public
chainable
toPreferredWidth ( )
Set the UI component width to its preferred width |
public
<zebkit.draw.View>
toView (target )
Build zebkit.draw.View that represents the UI component Parameters:
Returns:
<zebkit.draw.View>
a view of the component |
public
void
vrp ( )
Shortcut method to invalidating the component and then initiating the component repainting. |









public
<Boolean>
canHaveFocus
Define and set the property to true if the component has to catch focus |
- childEventName ( e )
- clipCopy ( )
- clipPaste ( s )
- compAdded ( e )
- compEnabled ( e )
- compMoved ( e )
- compRemoved ( e )
- compShown ( e )
- compSized ( e )
- focusGained ( e )
- focusLost ( e )
- keyPressed ( e )
- keyReleased ( e )
- keyTyped ( e )
- pointerClicked ( e )
- pointerDragEnded ( e )
- pointerDragged ( e )
- pointerDragStarted ( e )
- pointerEntered ( e )
- pointerExited ( e )
- pointerMoved ( e )
- pointerPressed ( e )
- pointerReleased ( e )
childEventName
It is also possible to listen all the listed above event for children component. To handle the event register listener method following the pattern below:
Parameters:
|
clipCopy
The method is called for focusable UI components (components that can hold input focus) to ask a string to be saved in native clipboard |
clipPaste
The method is called to pass string from clipboard to a focusable (a component that can hold input focus) UI component Parameters:
|
compAdded
Implement the event handler method to catch component added event The event is triggered every time the component has been inserted into another one.
Parameters:
|
compEnabled
Implement the event handler method to catch component enabled event The event is triggered every time a component enabled state has been updated.
Parameters:
|
compMoved
Implement the event handler method to catch component moved event The event is triggered every time the component location has been updated.
Parameters:
|
compRemoved
Implement the event handler method to catch component removed event The event is triggered every time the component has been removed from its parent UI component.
Parameters:
|
compShown
Implement the event handler method to catch component shown event The event is triggered every time a component visibility state has been updated.
Parameters:
|
compSized
Implement the event handler method to catch the component sized event The event is triggered every time the component has been re-sized.
Parameters:
|
focusGained
Implement the event handler method to catch component focus gained event The event is triggered every time a component has gained focus.
Parameters:
|
focusLost
Implement the event handler method to catch component focus lost event The event is triggered every time a component has lost focus
Parameters:
|
keyPressed
Implement the event handler method to catch key pressed event The event is triggered every time a key has been pressed. var p = new zebkit.ui.Panel(); p.keyPressed = function(e) { ... }; // add event handler Parameters:
|
keyReleased
Implement the event handler method to catch key released event The event is triggered every time a key has been released.
Parameters:
|
keyTyped
Implement the event handler method to catch key types event The event is triggered every time a key has been typed.
Parameters:
|
pointerClicked
Implement the event handler method to catch pointer clicked event. The event is triggered every time a pointer button has been clicked. Click events are generated only if no one pointer moved or drag events has been generated in between pointer pressed -> pointer released events sequence.
Parameters:
|
pointerDragEnded
Implement the event handler method to catch pointer drag ended event. The event is triggered every time a pointer cursor has been moved last time when a pointer button has been pressed. Or when a finger has been moved last time over a touch screen.
Parameters:
|
pointerDragged
Implement the event handler method to catch pointer dragged event. The event is triggered every time a pointer cursor has been moved when a pointer button has been pressed. Or when a finger has been moved over a touch screen.
Parameters:
|
pointerDragStarted
Implement the event handler method to catch pointer drag started event. The event is triggered every time a pointer cursor has been moved first time when a pointer button has been pressed. Or when a finger has been moved first time over a touch screen.
Parameters:
|
pointerEntered
Implement the event handler method to catch pointer entered event. The event is triggered every time a pointer cursor entered the given component.
Parameters:
|
pointerExited
Implement the event handler method to catch pointer exited event. The event is triggered every time a pointer cursor exited the given component.
Parameters:
|
pointerMoved
Implement the event handler method to catch pointer moved event. The event is triggered every time a pointer cursor has been moved with no a pointer button pressed.
Parameters:
|
pointerPressed
Implement the event handler method to catch pointer pressed event. The event is triggered every time a pointer button has been pressed or a finger has touched a touch screen.
Parameters:
|
pointerReleased
Implement the event handler method to catch pointer released event. The event is triggered every time a pointer button has been released or a finger has untouched a touch screen.
Parameters:
|
- zebkit.ui.date.MonthDaysGrid.DayPan
- zebkit.ui.date.Calendar
- zebkit.ui.date.DateInputField
- zebkit.ui.date.DateRangeInput
- zebkit.ui.RootLayer
- zebkit.ui.ViewPan
- zebkit.ui.Line
- zebkit.ui.ImageLabel
- zebkit.ui.Progress
- zebkit.ui.Toolbar
- zebkit.ui.Scroll
- zebkit.ui.ScrollPan
- zebkit.ui.BaseList
- zebkit.ui.Combo
- zebkit.ui.Combo.ContentPan
- zebkit.ui.BorderPan
- zebkit.ui.SplitPan
- zebkit.ui.CollapsiblePan
- zebkit.ui.StatusBarPan
- zebkit.ui.StackPan
- zebkit.ui.RulerPan
- zebkit.ui.Slider
- zebkit.ui.Tabs
- zebkit.ui.MenuItem
- zebkit.ui.PopupLayer
- zebkit.ui.Window
- zebkit.ui.Tooltip
- zebkit.ui.tree.BaseTree
- zebkit.ui.grid.BaseCaption
- zebkit.ui.grid.Grid
- zebkit.ui.grid.GridStretchPan
- zebkit.ui.design.ShaperPan
- zebkit.ui.web.HtmlElement
- zebkit.ui.web.VideoPan