Mouseover or hover over panel - change color or effect

[rsanford]

Hello, I'd like to have the ability to mouseover/mouseenter a unipanel and have the panel change color and/or display some other type of effect, such as a solid white border - something similar to clicking a tile in windows 8, then return to the original color/initial effect at mouseleave.

 

Would anyone know of a way to do this within unigui? Thank in advance.

[erich.wanker]

Hello rsanford..

 

Change color and font of label:

 

procedure TUniMainModule.setze_label_schwarz(was:TUniLabel);

begin

      was.Cursor:=crHandPoint;

      was.Font.Color:=UniMainModule.schwarz;

      was.Font.Style:=was.Font.Style + [];

end;

 

 

 

change color of panel:

 

procedure TUniMainModule.setze_panel_dunkelgrau(was:TUniPanel);

begin

     was.Cursor:=crDefault;

     was.ClientEvents.ExtEvents.Add

      ('OnAfterrender=function OnAfterrender(sender)'+

      ' {  sender.setBodyStyle("background-color:'+ColorToHtml(dunkelgrau)+'");  }');

end;

 

 

change to round corners and color of panel:

 

procedure TUniMainModule.setze_panel_rund_dunkelgrau(was:TUniPanel);

begin

     was.Cursor:=crDefault;

     was.ClientEvents.ExtEvents.Add

         ('OnAfterrender=function OnAfterrender(sender)'+

       ' {  sender.setBodyStyle("background:'+ColorToHtml(dunkelgrau)+'; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px");  }');

end;

 

 

change color on mouseover:

 

procedure TUniMainModule.funktion_panel_hoover_dunkelgrau_zu_grau(was:TUniPanel);

begin

   was.Cursor:=crHandPoint;

   was.ClientEvents.ExtEvents.Add

      ('OnAfterrender=function OnAfterrender(sender)'+

      ' {  sender.setBodyStyle("background-color:'+ColorToHtml(dunkelgrau)+'"); }');

   was.ClientEvents.ExtEvents.Add

      ('OnMouseout=function Onmouseout(sender)'+

      ' { sender.body.applyStyles("background-color:'+ColorToHtml(dunkelgrau)+'"); }');

   was.ClientEvents.ExtEvents.Add

      ('Onmouseover=function Onmouseover(sender)'+

      ' {sender.body.applyStyles("background-color:'+ColorToHtml(grau)+'"); }');

end;

 

 

change color on mouseover and round corners:

 

procedure TUniMainModule.funktion_panel_rund_hoover_dunkelgrau_zu_grau(was:TUniPanel);

begin

   was.Cursor:=crHandPoint;

   was.ClientEvents.ExtEvents.Add

      ('OnAfterrender=function OnAfterrender(sender)'+

      ' {  sender.setBodyStyle("background-color:'+ColorToHtml(dunkelgrau)+'; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px");  }');

   was.ClientEvents.ExtEvents.Add

      ('OnMouseout=function Onmouseout(sender)'+

      ' { sender.body.applyStyles("background-color:'+ColorToHtml(dunkelgrau)+'"); }');

   was.ClientEvents.ExtEvents.Add

      ('Onmouseover=function Onmouseover(sender)'+

      ' {sender.body.applyStyles("background-color:'+ColorToHtml(grau)+'"); }');

end;

 

 

and the colorToHtml thing:

 

function TUniMainModule.ColorToHtml(DColor:TColor):string;

  var

    tmpRGB : TColorRef;

  begin

    tmpRGB := ColorToRGB(DColor) ;

    Result:=Format('#%.2x%.2x%.2x',

                   [GetRValue(tmpRGB),

                    GetGValue(tmpRGB),

                    GetBValue(tmpRGB)]) ;

  end; {function ColorToHtml}

 

 

 

hth

 

erich

[Oliver Morsch]

Simple version:

-> in "TUniPanel / ClientEvents / ExtEvents -> OnAfterrender":
 

function OnAfterrender(sender)
{
document.getElementById(sender.body.id).className += " hoverpanel";
}

 

-> in "UniServerModule / CustomCSS": 
 

.hoverpanel:hover {
background-color: #0077FF;
}

[Jancarlos Martins]

Hi,

 

Very easy, 

 

Client Side

 

ClientEvents->ExtEvents

 

function Onmouseover(sender)

{

   sender.addCls('effectPanel'); // Method extjs http://docs.extjs.com/extjs/4.2.1/#!/api/Ext.panel.Panel-method-addCls

}

 

 

function Onmouseout(sender)

{

   sender.removeCls('effectPanel'); // Method extjs http://docs.extjs.com/extjs/4.2.1/#!/api/Ext.panel.Panel-method-removeCls

}

 

ServerModule.pas -> CustomCSS

 

.effectPanel {

 your effects

}

 

OR

 

create file css and declare into ServerModule.pas -> CustomFiles

 

PerJanBR

[Oliver Morsch]

sender.addCls(...);

 

And I tried to use "sender.body.className" without success, so that I had to do this: "document.getElementById(sender.body.id).className"...

 

thx

[rsanford]

Thanks everyone, I appreciate your help. I will check out your suggestions. 

[rsanford]

Would it be possible to get a sample program that can demo the panel effects please? Thank you.

[Harry Rogers]

Hi

What's the syntax for adding this functionality in a dynamically created panel for example ?

 

 

Simple version:

-> in "TUniPanel / ClientEvents / ExtEvents -> OnAfterrender":
 

function OnAfterrender(sender)
{
document.getElementById(sender.body.id).className += " hoverpanel";
}

 

 

I've tried various things like this below but no joy yet .......

 

// add a panel to the display form

Apanel.create(frmDisp);

Apanel. parent := .....

etc

etc

//add some event handlers

//serverside

Apanel.OnClick := clicked;

//Clientside     THIS IS NOT HOW TO DO IT !!!

Apanel.ClientEvents.ExtEvents.Add('function onAfterrender(sender) {  document.getElementById(sender.body.id).className += " hoverpanel";  }');  

Many thanks

[Oliver Morsch]

//Clientside     THIS IS NOT HOW TO DO IT !!!

Apanel.ClientEvents.ExtEvents.Add('function onAfterrender(sender) {  document.getElementById(sender.body.id).className += " hoverpanel";  }');  

 

Try this:

Apanel.ClientEvents.ExtEvents.Add('onAfterrender=function onAfterrender(sender) { ...

[Harry Rogers]

Hi Oliver

 

Many thanks for the reply.

Unfortunately I'm not getting anything with this :

Apanel.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');

 

This works fine in the same app using the in-place editor to add an event handler for the onAfterrender event of a design time created panel.

OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');

 

Any ideas ?

 

Cheers

[Oliver Morsch]

Hi Oliver

 

Many thanks for the reply.

Unfortunately I'm not getting anything with this :

Apanel.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');

 

This works fine in the same app using the in-place editor to add an event handler for the onAfterrender event of a design time created panel.

OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');

 

Any ideas ?

 

Cheers

 

This works for me (you must give the component a unique name):

procedure TMainForm.UniButton4Click(Sender: TObject);
var
  aPnl: TUniPanel;
begin
  aPnl := TUniPanel.Create(self);
  aPnl.Left:= 30;
  aPnl.Top := 400;
  aPnl.Caption := 'Test';
  aPnl.Name := 'MyTestPanel';
  aPnl.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');
  aPnl.Parent := self;
end;

[Harry Rogers]

I've found the problem.

I'm setting the panel.color property as part of the creation process (odd/even alternation) if I don't do that it works fine.

 

Many thanks for your help