How can I arrange to propagate wxWindows right click mouse events up to the parent window from static text controls?
Motivation:
My GUI looks like this
Each box ( wxPanel ) represents a 'device' I want a right click on the box to pop-up a dialog to edit the device info.
This works fine so long as the user clicks on the background of the panels. If the click falls on any of the text ( wxStaticText ), then the panel never sees the click event. Since the text covers a big fraction of the device panels, this is unsatisfactory.
I understand the cause is that mouse events do not inherit from wxCommandEvent. The documentation states: by default only wxCommandEvent-derived events are set to propagate. But I do not see how to change the default behaviour so that the right click events are set to propagate. It seems that this should be possible because the docs also say other events can be propagated as well because the event handling code uses wxEvent::ShouldPropagate() to check whether an event should be propagated.
Maybe I need to need to specialize the wxStaticText class, so that it 'handles' the right click event, calling wxEvent::ResumePropagation( 1 ) on it?
Here is the device panel constructor
cDevicePanel::cDevicePanel( wxWindow* parent, devicify::cDevice& device )
: wxPanel( parent,-1,wxDefaultPosition,wxSize(200,110),wxBORDER_RAISED )
, myDevice( device )
{
switch( device.myMatch )
{
case devicify::cDevice::eMatch::OK:
SetBackgroundColour( wxColor(120,180,255) );
break;
case devicify::cDevice::eMatch::noDevice:
SetBackgroundColour( wxColor(255,180,120) );
break;
case devicify::cDevice::eMatch::noDetails:
SetBackgroundColour( wxColor(255,255,0) );
break;
}
myName = new wxStaticText(this,-1,device.myName,wxPoint(10,10));
myPower = new wxStaticText(this,-1,
wxString::Format("Power: %f kw",myDevice.myPower),
wxPoint(20,30));
myEnergy = new wxStaticText(this,-1,
wxString::Format("Energy: %f kwh",myDevice.myEnergy),
wxPoint(20,50));
myButton = new wxButton(this,ButtonDeviceOnOff,"OFF",wxPoint(10,70),wxSize(40,20));
Bind(wxEVT_BUTTON,&cDevicePanel::OnSwitch, this,ButtonDeviceOnOff );
new wxButton(this,ButtonDevicePlot,"Plot",wxPoint(90,70),wxSize(40,20));
Bind(wxEVT_BUTTON,&cDevicePanel::OnPlot, this,ButtonDevicePlot );
Bind(wxEVT_RIGHT_UP,&cDevicePanel::OnRightClick, this );
}
All this propagation stuff predates Bind() and maybe even Connect(). Now that we have those, the simplest solution is to just bind to the event you're interested in in each of the controls. It does mean that you need to do it for all the controls, but it's simple to iterate over all the children and you would need to do something for all windows with any other solution anyhow.
The "other events can be propagated" refers to custom events you could define, I think. I.e. if you're defining a new event class, you could set m_propagationLevel to wxEVENT_PROPAGATE_MAX for it to make it behave as wxCommandEvent.
As VZ suggests, it is easiest to ignore propagation issues and to solve the problem using bind.
Important:
Call bind as a member of the child window
Pass pointer to parent window as parameter to bind
So, my constructor looks like this:
myName = new wxStaticText(this,-1,device.myName,wxPoint(10,10));
myName->Bind( wxEVT_RIGHT_DOWN, &cDevicePanel::OnRightClick, this );
myPower = new wxStaticText(this,-1,
wxString::Format("Power: %f kw",myDevice.myPower),
wxPoint(20,30));
myPower->Bind( wxEVT_RIGHT_DOWN, &cDevicePanel::OnRightClick, this );
myEnergy = new wxStaticText(this,-1,
wxString::Format("Energy: %f kwh",myDevice.myEnergy),
wxPoint(20,50));
myEnergy->Bind( wxEVT_RIGHT_DOWN, &cDevicePanel::OnRightClick, this );
// right clicks on panel background
Bind(wxEVT_RIGHT_DOWN,&cDevicePanel::OnRightClick, this );
Related
I have an object I want to drag around the screen with the mouse in Processing. I set acquired to true on mouse down over the object, and to false on mouse up, thus:
void mousePressed() {
if (overThing()) {
acquired = true;
}
}
void mouseReleased() {
acquired = false;
}
I then query acquired in my update(), and drag the object if it is true.
void update() {
\\ other stuff...
if (acquired) {
\\ drag thing code ...
}
}
This all works fine in Processing. mouseReleased() gets called whether I release the mouse inside or outside the active window.
However, when I move the code to Chrome, using processing.js (v1.4.8), mouseReleased() is not called if I release the mouse outside the canvas (whether the mouse is still over the web page, or outside the browser window). So when I return the (now unclicked) mouse to the canvas, the object is still getting dragged around.
I tried including a test of mousePressed in update(), but that also returns true in these circumstances.
Any help on what I need to do to make mouse state changes outside the canvas visible with processing.js?
I don't know about Processing specifically, but releasing mouse buttons outside a widget is a common issue in GUI development.
I suspect that you have no way of knowing the precise time when the mouse is released outside the widget, but you do have two options:
Set acquired = false in mouseOut(), as #Kevin suggests.
I assume there is some type of mouseEntered() method in Processing, and also some way of knowing if the mouse button is currently pressed (either a global variable, or an event object passed to mouseEntered()). You can catch the mouse entered event, check if the mouse has been released, and set acquired = false then.
Like so:
void mouseEntered() {
if (mouse button is pressed) {
acquired = false;
}
}
Edit: From your comments, #Susan, it seems like there is a bug in processing.js, where mousePressed is not set to false if the mouse button is released outside the canvas. One thing pointing to this being a bug is that the mouse movement example on the processing website also shows this behaviour.
Depending upon how much control you have over the website this is going on, and how much effort you want to go to, you could fix the bug yourself by writing some javascript (separate from your processing code):
Define a mouseUp() event on the page <body>, to catch all mouse release events on the page.
In the mouseUp() event, check if the event comes from your Processing control. (There is probably an event object passed to the mouseUp() function, and you might have to give your Processing control an ID to identify it)
If the event doesn't come from your Processing control, then fire a mouseUp event yourself, on the Processing control. This should (hopefully!) trigger a mouse event inside your Processing code.
I'm not sure what Processing will make of the mouse (x,y) position being outside its control when it handles the event you send it. You might want to set a flag on the event object (assuming you can add extra data to the event object) to say "don't use the (x,y) position of this event - it's outside the control".
Edit2: It was easier than I thought! Here is the JavaScript code to detect the mouse being released outside of the Processing canvas and send the mouseReleased event to the canvas. I've tested it on the mouse movement example from the Processing website, and it fixes the bug.
It uses jQuery (although it could be re-written to not use jQuery), and it assumes your Processing canvas has the ID "processingCanvas":
$(':not(processingCanvas)').mouseup(function(){
Processing.getInstanceById('processingCanvas').mouseReleased();
});
To use this code, include it anywhere in your page (in a JavaScript file or in <script> tags) and make sure you have the jQuery library included before this code.
The Processing object allows JavaScript to call any functions defined in your Processing code. Here I've used it to call Processing's built in mouseReleased() function, but if you wanted to call a custom function to handle the mouse-released-outside state differently, then you could.
You should use the mouseOut() function to detect when the mouse leaves the sketch:
void mouseOut() {
acquired = false;
}
More info in the reference here.
I try to implement a custom ContextMenu in a LongListSelector.
I'm not using the ContextMenu from Microsoft.Phone.Controls.Toolkit, it's basically the same as in the Rowi App:
(source: hiddenpineapple.com)
Approach 1
My list item toggles a VisualState on hold and an overlay is shown with controls in it.
The problem
I can't find a way to go back to the default state when the user clicks outside of the list item (as in the default ContextMenu).
Approach 2
I've implemented a custom template for the toolkit ContextMenu which looks exactly the same. I had to move its margin top to -itemHeight, as by default it is below the item.
The problem
The problem with this solution is, that it automatically closes itself when opening and I couldn't figure out how to avoid this.
Another problem was that it didn't work well with TiltEffect.IsTiltEnabled from the Toolkit (visual problems).
I need your help
Any suggestions on how to get this working?
Answer
Thanks to Cheese, now I know how to properly close the menu when the user clicks outside.
His suggestion was to get the coordinates of a Tap event on the current page, and check if it's inside the menu. When not, close the menu.
So I added a Tap listener to the page when the menu opens, and removed it when the menu closes. From the page listener I got the event coordinates and could check if it's inside the control which holds the menu (same size and position). I received the position of the control with Point leftUpperPoint = control.TransformToVisual(page).Transform(new Point(0, 0)) and the rightLowerPoint by adding the ActualWidth and ActualHeight.
But then I realized:
Why should I even calculate if the tap is inside the menu? I always want to close the menu when the user taps anywhere on the screen. If it's outside, yes. If it's on a menu button, yes.
Another modification I made was to listen for MouseLeftButtonDown instead of Tap as it also triggers when the user swipes.
So I removed this code and came up with the following:
private void ToggleMenu(object sender, System.Windows.Input.GestureEventArgs e)
{
PhoneApplicationFrame frame = ((PhoneApplicationFrame)Application.Current.RootVisual);
VisualState state = this.States.CurrentState;
if (state == null || state.Name == "DefaultState")
{
frame.MouseLeftButtonDown += MouseDownDelegate;
this.State = "MenuState";
}
else
{
frame.MouseLeftButtonDown -= MouseDownDelegate;
this.State = "DefaultState";
}
}
private void MouseDownDelegate(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
ToggleMenu(sender, null);
}
This works perfectly!
Thanks to Cheese for the hint.
Something like this by #denniscode http://dotnet.dzone.com/articles/rowi-show-tap-menu
Approach 1 problem
The best solution would be:
Get the menus coordinates, when user makes a tap - you check are tap coordinates on menu or not, if not - dissmiss - simple.
Approach 2 problem
I guess you had some button in a corner and when you tapped on it - nothing happened? And when you dissmissed the Tilt all worked. It seems that tilt works faster than a click, so, tilt changes the button coordinates, and device thiks you have missed/or dragged off
You can use what #ScottIsAFool suggested and maybe create another Dependency Property on your TapMenu control of type UIElement named CloseWhenTappedElement and automatically listen for Tap events inside your control once set. For example
<Grid x:Name="TapArea"/>
<TapMenu CloseWhenTappedElement="{Binding ElementName=TapArea"}/>
how do I find out if my custom widget has focus in Dojo?
i have dojo editor i wnat to know if the editor has already focus or not?
you can use the module dijit/focus to find out the focus
FROM DOJO DOCS
Tracking active widgets
At any point in time there is a set of (for lack of a better word)
“active” or “focused” widgets, meaning the currently focused widget
and that widget’s ancestors. “Ancestor” can mean either DOM ancestor
(ex: TextBox –> Form), or a logical parent-child relationship (ex:
TooltipDialog –> DropDownButton).
For example, if focus is on a TextBox inside a TabContainer inside a
TooltipDialog triggered by a DropDownButton, the stack would be
TextBox –> ContentPane –> TabContainer –> TooltipDialog –>
DropDownButton.
The activeStack[] parameter indicates this set of widgets, and an app
can monitor changes to activeStack[] by:
require([ "dijit/focus" ], function(focusUtil){
focusUtil.watch("activeStack", function(name, oldValue, newValue){
console.log("Focused widget + ancestors: ", newValue.join(", "));
});
});
the question in title has a different answer than the one in the descriptions.
there are two ways achieving the question in the title, by using dojo's focusUtil ("dijit/focus"). both ways give you something that you could find the widget using it and the dijit's registry ("dijit/registry").
focusUtil.curNode: gives you the DOM Node that currently has the focus. the function below, you could get the widget reference.
function getWidgetByNode(node){
var result;
while (!result && node){
result = registry.byNode(node);
if (node.parentElement)
node = node.parentElement;
else
node = null;
}
return result;
}
var focusedWidget = getWidgetByNode(focusUtil.curNode)
focusUtil.activeStack: gives you an array of the widgets (parent to child) that has the focus. so the last item in the array is the direct widget which has the focus. index values are widget ids, so you should get the widget by the following code
var focusedWidgetId = focusUtil.activeStack[focusUtil.activeStack.length-1];
var focusedWidget = registry.byId(focusedWidgetId);
now if you want to know if the currently focused widget is some specific one, it depends on what you have in hands from that specific widget:
widget itself: like the return values of above samples. now you have to compare if these are the same thing. you can not compare two widget objects using the == operator. you could compare their ids like this:
myWidget.id == focusedWidget.id
widget's id: this way you just easily get the id of the current node from focusUtil and compare it with the id you have liek this:
myWidgetId == focusedWidgetId
references:
http://dojotoolkit.org/reference-guide/1.9/dijit/focus.html
http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html
require([ "dijit/focus" ], function(focusUtil){
var activeElement = focusUtil.curNode; // returns null if there is no focused element
});
check blow url here you can see some examples
http://dojotoolkit.org/reference-guide/1.8/dijit/focus.html#dijit-focus
a) For dojo 1.6: call dijit.getFocus(). This will return an object containing the currently focused dom node, among other things (selected text, etc.). To get the corresponding widget, simply do:
var activeElement = dijit.getEnclosingWidget(dijit.getFocus().node);
This is the full reference for dijit.getFocus(), from the source code:
// summary:
// Called as getFocus(), this returns an Object showing the current focus
// and selected text.
//
// Called as getFocus(widget), where widget is a (widget representing) a button
// that was just pressed, it returns where focus was before that button
// was pressed. (Pressing the button may have either shifted focus to the button,
// or removed focus altogether.) In this case the selected text is not returned,
// since it can't be accurately determined.
//
// menu: dijit._Widget or {domNode: DomNode} structure
// The button that was just pressed. If focus has disappeared or moved
// to this button, returns the previous focus. In this case the bookmark
// information is already lost, and null is returned.
//
// openedForWindow:
// iframe in which menu was opened
//
// returns:
// A handle to restore focus/selection, to be passed to `dijit.focus`.
b) For dojo 1.7 and up, use dijit/focus:
require([ "dijit/focus" ], function(focusUtil) {
var activeElement = focusUtil.curNode; // returns null if there is no focused element
});
What i have is a single dijit.Menu that contains the dijit.MenuItem objects with labels 1 - 9. It is connected to a sudoku like grid of 81 'nodes' (because there are so many, i dont bother with individual id's, i simply collect them with dojo.query('their-css-class-name')). This is the code i'm using inside of a widget to instantiate the context menu and its menu items.
var contextMenu = new dijit.Menu({targetNodeIds:dojo.query(".sudokuNode"), leftClickToOpen:true});
for(var i = 1; i <= 9; i++) {
contextMenu.addChild(new dijit.MenuItem({
label:i,
onClick: function(evt) {
//??
}
}));
};
contextMenu.startup();
What i'm trying to do is have the node that is clicked, and subsequently opens a popup/context menu, be filled with the value (1-9) selected from the context menu's MenuItems.
My problem is that i dont know how to "know" which of the 81 nodes was the one to fire the oncontextmenu event, and i dont know how to reference that node inside the 'onClick' method declared in the menu item.
Any help demonstrating how to reference the calling node in that context would be appreciated! If this isn't enough information, let me know what else i can do to explain my problem!
evt.target should get you the node that was actually clicked. Depending on the structure, you may need to do some other navigation from there, or use dijit.getEnclosingWidget().
If the MenuItems allow the events to bubble (I'm not sure; haven't used it myself), you could connect to the onClick() method of the Menu, so you've only got the single event listener in play.
I'm currently struggling to use UI elements in Interface Builder. I keep trying to do things "in the .NET way."
I have several buttons that all map down their TOUCH event to the SAME FUNCTION:
-(IBAction) onTouch:(id) sender
{
// do something with touch, DEPENDING ON WHAT BUTTON WAS PUSHED
// I want to do something like
if( sender.tag == "something" )
{
//...doesn't work on apple, of course..
}
}
I want to uniquely identify each BUTTON USING SOMETHING like the TAG property in .NET. I tried using the INTERFACE BUILDER "NAME" field that is on the "Identity" panel of interface builder, but I don't know how to access that field programmatically.
-(IBAction) onTouch:(id) sender
{
// do something with touch, DEPENDING ON WHAT BUTTON WAS PUSHED
// I want to do something like
if( sender.InterfaceBuilderName == "something" )
{
//...doesn't work..
}
}
So, WHAT / IS THERE a way to uniquely identify a UI element (such as a button) OTHER THAN doing something like
-(IBAction) onTouch:(id) sender
{
// look at
[sender currentTitle]
}
The reason that's bad is because if the text on the button changes for some cosmetic reason you break the whole app, right
The last solution I can think of is write seperate functions for each button's touch event but I really want to know if it is possible to uniquely identify a button by something similar to .Net's TAG property.
In the iPhone SDK all UIView objects have a property also called tag which is an integer value and can basically be used to do what you are intending.
I usually define a constant for the tag values I'm going to use for a specific purpose.
You can access the tag on the button object:
myButton.tag = MYBUTTON_TAG_CONSTANT
// button tag constant
#define MYBUTTON_TAG_CONSTANT 1
For buttons, there is a Tag entry in the View section (click on your button, select Attributes Inspector from the Tools menu). You can then use this integer value in your code.
Here is a link that may help as well:
http://www.iphonedevsdk.com/forum/iphone-sdk-development/25582-using-tags-interface-builder.html
UIView's tag property is accessible from Interface Builder. Unlike .NET, it's an integer rather than a string.