I'm here because my research and testing lead me nowhere.
I have made a little calendar application and now I want to improve the user interface with nice controls. I'm trying to achieve an interface where you can create an event by dragging over it (as you can do in Google agenda, in fact this a school project and I want to reproduce this week view).
For this purpose I have tried this approach:
For each cells of the area (a GridPane that contain VBoxes) I attach handlers that achieve that feature (setOnDragDetected, setOnMouseDragEntered and setOnMouseDragReleased). And it does the job well but in some case this don't work (if the mouse move over another event, which do no have the handlers, the drag feature stop).
As I saw this too heavy and subject to bogus (3 handlers x 7 columns x 48 rows = 1008 handlers !! ), I thought about other approach but I'm a beginner in javaFX and I don't know if there is other mechanism to perform this. (I thought about a transparent layout/pane that will handle this feature and act like a "touch screen" over my application but I did not found satisfying answers). Can someone enlighten me about this kind of problem ? For a good example of what I try to achieve take the behaviour of the Google agenda for an event creation with the mouse (I do not need to manage overlap of event). Thanks in advance !!
I post a picture of what the actual view look like.
So as Tomas Mikula suggest me I only attached my handlers to the GridPane (and not to each "cell" as I made previously): setOnDragDetected, setOnMouseDragOver, setOnMouseDragReleased and setOnMouseDragExited.
As the handlers are triggered on the GridPane, moving the mouse over other element doesn't stop the feature.
With this I reduced the number of handler, simplified the code (As I do not need to manage extra behaviours as mover over another child).
Thanks !
Related
I would like to recreate the transition effect which can be observed when a user clicks on a tile on the start menu. But I have hit a road block in my quest. I am unable to search for information related to that particular transition. Is it possible to do so in you own application? If so, please guide me. Thanks in advance.
I call it a 'peel animation' and have implemented it here:
http://www.scottlogic.co.uk/blog/colin/2011/03/metro-in-motion-part-2-peel-animations/
Others call it a 'turnstile' and have also implemented it:
http://turnstile.codeplex.com/
when i use pivot with in the panorama .pivot are used as a gallery view. i want to move pivot when i swipe it .but the problem is this because of both panorama and pivot are the same gesture event so both are they move .
i want swipe only my pivot view .
I would like some sample code or any other suggestion to do this.
so please give me a solution for doing this and
also give me a link where i easily understand this. Thanx in advance
You shouldn't have a Pivot in a Panorama control. End of discussion.
I believe it is achievable, because I've already solved similar issues with having WebBrowser control inside a custom horizontal-scrollable overview container like Pivot/Panorama, but believe me, it is NOT worth it. I've had to dig very deep into the visualstructure of the controls and attach my own manipulation-handlers to their viscera, manually choose which horiz/verti events to pass and which to cancel, and so on. This is not so easy, takes a lot of time, and doesn't guarantee that on the end you will have something behaving in a way you wanted to achieve in the first place. If you are not bound by some contract to preserve the shape of the UI, please, drop the idea and redesign your UI, just to save on your sanity and nerves.
But, if you are already insane or really want to dig where noone should, start on analysing your UI as a two rectangles: large pano and small pivo, and think which part should behave how on different possible touches/h-v swipes/h-v pans/pinches/so on. Write it down just to for reference, or soon you will probably start making small mistakes that will interfere with your understaning of the flow of the events.
I've checked the version I have, and "my" Panorama uses internally the UIElement.ManipulationXXXX events. In that case:
Display visualtrees of your UI and try attaching manipulation-events to every control. In those events, write/log which control's which handler was invoked. Then make some swipe/scroll on your APP and observe events. Analyze how they were bubbling and try cancelling (e.Handled=true) the manipulation-completed and/or manipulation-delta events somewhere between pivot and panorama. Your goal is to have the panorama see that e.Handled=true, while your pivot must see e.Handled=false. Your Pivot will probably see the event sooner than the Pano, so that point should be relatively easy.
If it fails to work, then you should check your version of the Pano, and check how it detects movements. If, for example, it uses the GestureListener - try the same trick with it. Etc.
And remember, you can always make your own horizontal-overwiew-container that will look like Pano, behave like Pano, and that will work with Pivo better - because it will be your code and you will tell it what and when to move. if you want to go this way, start on google and check all the preliminary Panorama previews that random people have published before that control was published by MS.
I'm writing a diagram editor in Qt with Graphics View Framework.
Currently I'm just trying to create a simple Node (QGraphicsItem) on GraphScene (QGraphicsScene). I created a Canvas (QGraphicsView) and added a grid to it. I can even add Nodes and move them around on scene. My final goal is to have different working modes, editing and styling options, etc. For now I just want to know how can I setup selection for Nodes already present on scene. I tried doing it with mouse events but noticed that event calls for selection and Node insertion overlap... When I try to select something a new Node is created... This is my first Qt application so I don't fully understand how the functionality I want to achieve should be designed.
How the Selection Rectangle should be properly drawn?
How should I manage mouse events that conflict with each other?
You can use a checkable button/action(that's a QPushButton/QAction with a checkable property set to 'true) to switch between Edit & Insert mode. Then you check the state in your mouse event and insert a new item only if you're in Insertion mode.
You can also distinct between mouse buttons - insert item when dragged with the right button for example
Or use QKeyboardModifiers - for example: on drag + Ctrl - insert item.
Hope this helps.
In case of the overlapping mouse events, you should have a single place (like QGraphicsView to handle the mouse clicking/moving events) and create a state machine and then handle the events according to the state you are in. You need to plan your architecture well and that can be really complex task.
set your state enum/constants
refer to the current machine state in your events in your if conditions
keep your "business logic" on a single place
Like it's shown in these two NodeEditor tutorials #11 and #12: https://www.youtube.com/watch?v=pk4v2xuXlm4 and https://www.youtube.com/watch?v=-VYcQojkloE)
If you still want more in depth explanation of the functionality and events of Qt, here is a full list of tutorials with implementing all possible features like dragging edges to nodes, selecting them and deleting them, cutting edges, serialization, etc., you can have a look on the whole list of 50 tutorials I've recorded here: https://www.blenderfreak.com/tutorials/node-editor-tutorial-series/.
I'm putting a link to the whole list, since it's not possible to write all the code on this page...
Is there any way to control the threshold of the flick action to on/off a toggle switch so that it doesn't mess with the pivot control's navigation?
Sorry, but I'm going to avoid you're question (I can't answer it anyway) and suggest you use a different approach.
You could (I assume) use a checkbox to just as easily provide the option to the person using the application. Afterall a toggle switch has the same functionality as a checkbox (specify/choose between two states) it just implements the interaction differently.
The toggle switch has not been designed/built (AFAIK) to support being used on top of something which also supports the same gesture.
As a general rule of usability, having controls on top of each other (or even next to each other) which support the same gesture is likely to cause problems for the user. Even if the problems are through accidentaly triggering the wrong gesture or expectations about how their gesture will be interpretted.
In summary: this is a really tricky problem to solve; I don't think you can with the controls as they are; and the problem goes away entirely if you use a different control for toggling anyway.
I've had the same problem with my codermate, we've been digging this for many hours and we finally reached the top of the hill and we came up with a solution.
This solution works for the bing map control:
on mouse enter: myMapControl.CaptureMouse();
on mouse leave: myMapControl.ReleaseMouseCapture();
And there you go, when you'll navigate inside the map the pivot won't do transition ;)
If you don't get the point, just poke me and I'm going to explain with real code (I'm quite busy right now).
Cheers
This solution posted recently seems to be working out for people for dealing with gesture conflicts on pano / pivot. You might like to check it out.
Preventing the Pivot or Panorama controls from scrolling
Set the IsHitTestVisible = false in your root pivot control
The solution to this is simple, and comes from my experience with Android and iPhone application development.
simply make sure you only tap into the OnMouseLeave event - not the OnChecked or the OnMouseClick as these will accidentally fire just by touching the toggle.
You want make sure that they were touching it when they let go of the screen, and this (unless you put the toggle on the edge of the screen will almost never be the case
New to GWT here...
I'm using the UIBinder approach to layout an app, somewhat in the style of the GWT Mail sample. The app starts with a DockLayoutPanel added to RootLayoutPanel within the onModuleLoad() method. The DockLayoutPanel has a static North and a static South, using a custom center widget defined like:
public class BigLayoutWidget extends ResizeComposite {
...
}
This custom widget is laid out using BigLayoutWidget.ui.xml, which in turn consists of a TabLayoutPanel (3 tabs), the first of which contains a SplitLayoutPanel divided into WEST (Shortcuts.ui.xml) and CENTER (Workpanel.ui.xml). Shortcuts, in turn, consists of a StackLayoutPanel with 3 stacks, each defined in its own ui.xml file.
I want click events within one of Shortcuts' individual stacks to change the contents of Workpanel, but so far I've only been able to manipulate widgets within the same class. Using the simplest case, I can't get a button click w/in Shortcuts to clear the contents of Workpanel or make WorkPanel non-visible.
A few questions...
Is ResizeComposite the right type of class to extend for this? I'm following the approach from the Mail example for TopPanel, MailList, etc, so maybe not?
How can I make these clicks manipulate the contents of panels in which they do NOT reside?
Are listeners no longer recommended for handling events? I thought I saw somewhere during compilation that ClickHandlers are used these days, and the click listener "subscription" approach is being deprecated (I'm mostly using #UiHandler annotations)
Is there an easy way to get a handle to specific elements in my app/page? (Applying the "ID" field in the UI.XML file generates a deprecation warning). I'm looking for something like a document.getElementById() that get me a handle to specific elements. If that exists, how do I set the handle/ID on the element, and how can I then call that element by name/id?
Note that I have the layout itself pretty well nailed; it's the interaction from one ui.xml modularized panel to the next that I can't quite get.
Thanks in advance.
If you don't have a use for resizing events than just use Composite
What you want is what the GWT devs called message bus (implemented as HandlerManager). You can get a nice explanation in the widely discussed (for example, on the GWT Google Group, just search for 'mvp') presentation by Ray Ryan from Google I/O 2009 which can be found here. Basically, you "broadcast" an event on that message bus and then a Widget listening for that event gets the message and does its stuff.
Yep, *Handlers are the current way of handling events - the usage is basically the same so migration shouldn't be a problem (docs). They changed it so that they could introduce custom fields in the future, without breaking existing code.
If you've set an id for any DOM element (for Widgets I use someWidget.getElement().setId(id), usually in combination with DOM.createUniqueId()) you can get it via GWT.get(String id). You'll get then a RootPanel which you'll have to cast to the right Widget class - as you can see it can get a little 'hackish' (what if you change the type of the Widget by that id? Exceptions, or worse), so I'd recommend sticking with MVP (see the first point) and communicating via the message bus. Remember however, that sometimes it's also good to aggregate - not everything has to be handled via the message bus :)
Bottom line is I'd recommend embracing MVP (and History) as soon as possible - it makes GWT development much easier and less messy :) (I know from experience, that with time the code starts to look like a nightmare, if you don't divide it into presentation, view, etc.)