Rich-UI-Widget 'Shadow'
Ein Rich-UI-Widget 'Shadow' erzeugt einen Schattierungseffekt für die Widgets, die untergeordnete Elemente eines Widgets 'Div' sind.
In Ihrem Arbeitsbereich werden Beispiele zum Ausprobieren zur Verfügung gestellt. Zunächst eine einfache
Demonstration:
package client;
import com.ibm.egl.rui.widgets.Div;
import com.ibm.egl.rui.widgets.Shadow;
import com.ibm.egl.rui.widgets.TextLabel;
handler MyHandler type RUIHandler{initialUI =[myShadow]}
myTextLabel TextLabel{text = "Text with a Shadow"};
myShadow Shadow{x = 20, y = 20, width = 100,
div = new Div{padding = 5,
backgroundColor = "salmon", children =[myTextLabel]}};
end
Im zweiten Beispiel werden die Eigenschaften position und visibility
verwendet, um während einer Drag-and-drop-Operation einen visuellen Effekt zu erzielen:
package client;
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Div;
import com.ibm.egl.rui.widgets.Shadow;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Widget;
handler MyHandler type RUIHandler{initialUI =[myBox, shadow, myOtherBox]}
const OTHERBOXX INT = 30;
const OTHERBOXY INT = 50;
myTextField TextField{
text = "What a drag!",
width = 120,
backgroundColor = "white",
onStartDrag = start, onDrag = drag, onDropOnTarget = drop};
myBox Box { children = [ myTextField{} ]};
shadow Shadow { zIndex = 2, position = "absolute", visibility="hidden",
div = new Div { } };
myOtherBox Box {position = "absolute", zIndex = 1,
x = OTHERBOXX, y = OTHERBOXY,
width = 200, height = 200, backgroundColor = "blue"};
dx, dy int;
function start(myWidget Widget in, x int in, y int in) returns(boolean)
dx = x - myWidget.x;
dy = y - myWidget.y;
myTextField.position = "static";
shadow.div.children = [ myTextField ];
shadow.visibility = "visible";
return(true);
end
function drag(myWidget Widget in, drop Widget in, x int in, y int in)
shadow.x = x - dx;
shadow.y = y - dy;
end
function drop(widget Widget in, drop Widget in, x int in, y int in)
shadow.visibility = "hidden";
myTextField.position = "relative";
myTextField.x = shadow.x - OTHERBOXX;
myTextField.y = shadow.y - OTHERBOXY;
myOtherBox.children = [ myTextField ];
end
end
Das dritte Beispiel zeigt eine Möglichkeit zum Testen der Position eines gezogenen Widgets:
package client;
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Div;
import com.ibm.egl.rui.widgets.Shadow;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.position;
import egl.ui.rui.Widget;
handler MyHandler type RUIHandler{initialUI =[shadow, , myBox, myOtherBox1, myOtherBox2]}
myTextField TextField{
text="What a drag!", width=120, backgroundColor="white",
onMouseOver::=mouseOver, onMouseOut::=mouseOut,
onStartDrag=start, onDrag=drag, onDropOnTarget=drop };
myBox Box { children=[ myTextField{} ]};
shadow Shadow { zIndex=2, position="absolute",
visibility="hidden", div=new Div { } };
myOtherBox1 Box {
padding=10, margin=10, width=200, height=200, backgroundColor="lightblue",
borderColor="black", borderWidth=2, borderStyle="solid" };
myOtherBox2 Box { padding=10, margin=10, width=200, height=200,
backgroundColor="lightyellow",
borderColor="black", borderWidth=2, borderStyle="solid" };
dx, dy int;
function mouseOver(e Event in)
myTextField.cursor = "move";
end
function mouseOut(e Event in)
myTextField.cursor = "";
end
function start(myWidget Widget in, x int in, y int in) returns(boolean)
dx = x - myWidget.x;
dy = y - myWidget.y;
myTextField.position="static";
shadow.div.children=[ myTextField ];
shadow.visibility="visible";
return(true);
end
function drag(myWidget Widget in, drop Widget in, x int in, y int in)
shadow.x=x - dx;
shadow.y=y - dy;
if (inside(x, y, myOtherBox1))
myOtherBox1.backgroundColor = "lightgreen";
else
myOtherBox1.backgroundColor = "lightblue";
end
if (inside(x, y, myOtherBox2))
myOtherBox2.backgroundColor = "lightgreen";
else
myOtherBox2.backgroundColor = "lightyellow";
end
end
function drop(widget Widget in, drop Widget in, x int in, y int in)
shadow.visibility="hidden";
myTextField.position="static";
if (inside(x, y, myOtherBox1))
myOtherBox1.children=[ myTextField ];
end
if (inside(x, y, myOtherBox2))
myOtherBox2.children=[ myTextField ];
end
end
function inside(x int in, y int in, widget Widget in) returns(boolean)
return (x>=widget.x && x<=widget.pixelWidth + widget.x &&
y>=widget.y && y<=widget.pixelHeight + widget.y);
end
end
Die Haupteigenschaft des Widgets 'Shadow' ist div, die ein Widget vom Typ 'Div' akzeptiert.
Unterstützte Eigenschaften und Funktionen werden in “Widgeteigenschaften und Widgetfunktionen” beschrieben.
Zur Verwendung dieses Widgets ist die folgende Anweisung erforderlich:
import com.ibm.egl.rui.widgets.Shadow;