Rich UI Shadow

We offer examples for you to try in your workspace. First, a simple 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

Our second example uses position and visibility properties to help give a visual effect during a drag-and-drop operation:

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 

Our third example shows a way to test the location of a dragged widget:

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 

Use of this widget requires the following statement:

import com.ibm.egl.rui.widgets.Shadow;