beforeHoverEffect problem

Develop and Deploy Cross-Browser Web Apps .

beforeHoverEffect problem

Postby joedarock » Fri Oct 07, 2016 3:39 pm

I have a treeGridControl inside a pane. The grid's beforeHoverEffect event fires when the mouse enters/leaves via the header area. Entering/leaving the grid from any of the other 3 sides doesn't fire the event.
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm

Re: beforeHoverEffect problem

Postby support » Sat Oct 08, 2016 2:25 am

The beforeHoverEffect event can only be triggered by those "HoverEffected" nodes.
support
 
Posts: 350
Joined: Sat Apr 27, 2013 9:22 am

Re: beforeHoverEffect problem

Postby joedarock » Sat Oct 08, 2016 11:46 am

The control has this event in the toolbox.
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm

Re: beforeHoverEffect problem

Postby joedarock » Mon Oct 10, 2016 12:43 pm

"The control has this event in the toolbox"
---------------------

After re-reading your previous for the 3rd time, I think you're suggesting that the control only supports this event when you pass over certain elements within the control. If this is the case, how can I know when the mouse passes in or out of the control? I use this to close the popup containing the control when the user mouses out of it.
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm

Re: beforeHoverEffect problem

Postby support » Mon Oct 10, 2016 2:23 pm

Normally, there are several dom nodes in a widget. For performance reasons, we didn't add "HoverEffected" function to each node.

For instance, in version 1.2, in xui.UI.TreeGrid widget, only 3 nodes( ROWTOGGLE, HCELL, FHCELL) have "HoverEffected" function.

the original code is:

javascript code
HoverEffected:{ROWTOGGLE:'ROWTOGGLE', HCELL:'HCELL', FHCELL:'FHCELL'},


If you wanna to add "HoverEffected" function for other nodes, you have to set it before the widget was created.

For instance,

1) the following code will add 'HoverEffected" function to the TreeGrid's CELL node:

javascript code
xui.UI.TreeGrid.setBehavior({HoverEffected:{CELL:'CELL'}})


2) the following code will add 'HoverEffected" function to the Group's root node:

javascript code
xui.UI.Grid.setBehavior({HoverEffected:{KEY:'KEY'}})
support
 
Posts: 350
Joined: Sat Apr 27, 2013 9:22 am

Re: beforeHoverEffect problem

Postby joedarock » Mon Oct 10, 2016 3:26 pm

The same problem exists for a Group control, so I'll use that as an example.

The following example app was created in CrossUI RAD Studio 1.3 by placing just a group control on the page and writing an alert in the event code:

Class('App', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
Instance:{
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
autoDestroy : true,
// To initialize properties
properties : {},
// To initialize instance(e.g. properties)
initialize : function(){
},
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};

append(
(new xui.UI.Group())
.setHost(host,"ctl_group169")
.setLeft(230)
.setTop(120)
.setWidth(190)
.setHeight(180)
.setCaption("ctl_group169")
.setToggleBtn(false)
.beforeHoverEffect("_ctl_group169_beforehovereffect")
);

return children;
// ]]Code created by CrossUI RAD Studio
},
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
// Give a chance to load other resource
iniResource: function(com, threadid){
//xui.Thread.suspend(threadid);
//var callback=function(/**/){
// /**/
// xui.Thread.resume(threadid);
//};
},
// Give a chance to load other com
iniExComs : function(com, threadid){
//xui.Thread.suspend(threadid);
//var callback=function(/**/){
// /**/
// xui.Thread.resume(threadid);
//};
},
_ctl_group169_beforehovereffect:function (profile, item, e, src, type){
var ns = this, uictrl = profile.boxing();
alert("Hover");
}
}
});

This code doesn't fire the event.




I then wrote the same app in SPA Builder On-line:

// The default code is a module class (inherited from xui.Module)
// Ensure that all the value of "key/value pair" does not refer to external variables
Class('App', 'xui.Module',{
Instance:{
// Dependency classes
Dependencies:[],
// Required modules
Required:[],

// To initialize properties
properties : {},

// To initialize instance(e.g. properties)
initialize : function(){
},

// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};

append(
xui.create("xui.UI.Group")
.setHost(host,"xui_ui_group1")
.setLeft(230)
.setTop(180)
.setWidth(200)
.setHeight(100)
.setCaption("xui_ui_group1")
.setToggleBtn(false)
.beforeHoverEffect("_xui_ui_group1_beforehovereffect")
);

return children;
// ]]Code created by CrossUI RAD Studio
},

// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
_xui_ui_group1_beforehovereffect:function (profile,item,e,src,type){
var ns = this, uictrl = profile.boxing();
alert("Hover");
}
/*,
// To determine how properties affects this module
propSetAction : function(prop){
},
// To set all node's style in this modlue
customStyle:{}
},
//To customize the default properties and event handlers
Static:{
$DataModel:{
},
$EventHandlers:{
}
*/
}
});

This works. I haven't looked at the differences, but it does appear to be version dependent. In Ver 1.4, no events are fired at all. In the on-line version, events are fired for every item in the control (it seems).

As you know, I tried upgrading to Ver 1.4 a while ago with catastrophic consequences. so I'm still on 1.3 until my confidence level is restored. I'd try to build my application code on the on-line compiler, but the app is built in about 6 files, so I haven't figured out how to do that.
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm

Re: beforeHoverEffect problem

Postby joedarock » Mon Oct 10, 2016 4:02 pm

I just downloaded the latest Ver 1.4 and installed it with my application on a different computer just in case...

Voila! Everything works fine now! So it does appear to be a version-related problem. In spite of your lengthy description of why it only fires on certain parts of the control, it does appear to also fire when you enter and leave the control as I wanted, using the Type property with 'mouseover" and "mouseout" as qualifiers.

So...problem solved. I'll continue to build with Ver 1.4 until I have more confidence, but this appears that it might solve other problems I've had too. Too bad there's not much in the way of other user activity here, as things like this might have been reported before.
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm


Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 0 guests