Hi
When I drag an item over the iframe, it is strange that I release the mouse but it is not released. The item stays over the iframe and will not disappear. At this time, when I move the mouse out of the iframe, I can drag without holding down the mouse.
Here's my zul and controller:
Tags
People
Badges
Help
<zk xmlns:n="native">
<window hflex="1" vflex="1" apply="org.example.MyController">
<iframe vflex="1" hflex="1" id="iframe" src="iframe.zul"/>
<div>
<image height="150px" width="150px" src="/img/picture1.jpg" id="image"/>
</div>
</window>
</zk>
public class MyController extends SelectorComposer<Component> {
private Iframe iframe;
private Image image;
@Override
public void doAfterCompose(Component component) throws Exception {
iframe = (Iframe) component.getFellow("iframe");
image = (Image) component.getFellow("image");
iframe.setSrc("iframe.zul");
iframe.setDroppable("drop");
image.setDraggable("drop");
}
}
Here's my iframe.zul and iframeController:
<zk>
<div hflex="1" vflex="1" apply="org.example.IframeController" id="iframe_div">
Just throw in!
</div>
</zk>
public class IframeController extends SelectorComposer<Component> implements EventListener<Event> {
private Div div;
@Override
public void doAfterCompose(Component comp) throws Exception {
div = (Div) comp.getFellow("iframe_div");
div.setDroppable("drop");
div.addEventListener(Events.ON_DROP, this);
}
@Override
public void onEvent(Event event) throws Exception {
if (event.getName().equals(Events.ON_DROP)) {
System.out.println("dropped");
}
}
}
By the way, I'm from China. I speak through translation software, so my expression is not very good. Please forgive me.Anyway,thank your for help!
Hey there.
Here's a sample of manually rewriting events:
https://zkfiddle.org/sample/221p59m/8-Another-new-ZK-fiddle
This is the best you can hope to achieve with iframes. (won't work in fiddle cause cross-site origin, cause iframes :D, you need to open the page in a new window by clicking on the new window button located near the close button when you run the sample)
what it does is it wires events listeners to the iframe inner document, repeat these events to the main window. This enable the iframe itself to be a valid target for the drop event (not the components located inside of the iframes, but the frame itself).
Anything more complicated than that would require manual capture and redirection of the events, which is just not a good idea to begin with.
With this said, I want to be very clear about the use case:
Depending on how many of your business screens already implemented with iframes, I'd recommend you still consider just rewriting them by creating components in the same page if you plan on having any interaction between the two contents at all. (using Apply, include, Executions.createComponents)
I understand this might be a big task, but you are using the wrong tool for the job you are trying to accomplish. This will hurt you more and more if you want to implement other interactions between the frames.
Iframes are meant to separate the pages, and allow them to be totally independent from eachother.
If you want interaction, and the pages are located on the same server, it's just the worst possible choice for templating.
Hello MDuchemin, thank you for your reply!
As for the code I posted, I built a demo instead of my project code. I'm used to building a small project to simplify and highlight problems. Thank you for your code style suggestions.
You mentioned the use of "apply", "execution.Createcomponents" and "include". After my trial, this is really feasible, but I have used iframe to build complex business code in the original project, so it may not be a good idea to change components.
By comparison, I'd like to know how to write a custom event handler. Now the problem is that when I drag a component into the iframe, the mouseup event doesn't work. I want to know more about the custom way of drag and drop to help me finish my work.
Thanks again!
Hey there Resull, Here's a few pointers on your situation:
I see that you are using iframes in this situation. Usually, IFrames are reserved for communication between two different websites, or if you are trying to make the out and in pages strongly separated.
It would be possible in theory to write a custom event handler on the iframe, do the cross-site wiring, etc. but that would be A LOT of work.
Is that what you want to do in this case?
If you are only using this structure to include a part of the code from a different file, there is better options for this, which allow you to maintain a single page. Here's an example using the apply component (from ZK EE package): https://zkfiddle.org/sample/venmgl/3-drag-and-drop-frame
But there are also other options. You could use:
etc.
There are other options, such as template design. Those really depends on your requirements.
I'd also recommend either creating event listeners as members of your composer class (if you reuse them), or as an anonymous instance of EventListener directly (see my fiddle). Having the same class be both the composer and the event listener will severely limit what you can listen to.
MDuchemin ( 2021-06-03 15:16:04 +0800 )editAsked: 2021-06-02 11:38:38 +0800
Seen: 15 times
Last updated: Jun 10 '21