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;

Feedback