0

Dragn an drop with textbox

asked 2010-10-13 11:48:00 +0800

forestmedina gravatar image forestmedina
15

hi, i have a listbox and a textbox y a page and i need add the text of the listcell on the current cursor position of the textbox when dragging items from the listbox to the textbox but the textbox only accepts adding text to the final not in the current cursor postition. what can i do??

delete flag offensive retag edit

9 Replies

Sort by ยป oldest newest

answered 2010-10-13 12:16:43 +0800

twiegand gravatar image twiegand
1807 3

Sorry if I don't understand your question correctly but is this the behavior you are looking for?

<zk>
	<window style="padding: 25px;">
		<listbox width="500px" >
			<listitem label="AAAA" draggable="true" droppable="true"/>
			<listitem label="BBBB" draggable="true" droppable="true"/>
			<listitem label="CCCC" draggable="true" droppable="true"/>
			<listitem label="DDDD" draggable="true" droppable="true" />
		</listbox>
		
		<separator />
		<separator />
		
		<textbox id="txtbox" width="500px" draggable="true" droppable="true" onDrop="move(event.dragged)"/>

		<zscript>
			void move(Component dragged) {
				txtbox.setValue(dragged.getLabel());
			}
		</zscript>
	</window>
</zk>

Regards,

Todd

link publish delete flag offensive edit

answered 2010-10-14 00:15:30 +0800

forestmedina gravatar image forestmedina
15

thanks for the reply i look for something like that but in this part

                 <zscript>
			void move(Component dragged) {
				txtbox.setValue(dragged.getLabel());
			}
		</zscript>


i actually do this
                 <zscript>
			void move(Component dragged) {
				txtbox.setText(txtbox.getText()+dragged.getLabel());
			}
		</zscript>

but in this way the text only can be added at the end of the texbos so it must be something like this

                 <zscript>
			void move(Component dragged) {
				txtbox.insertInPosition(txtbox.getCurrentCaretPosition(),dragged.getLabel());
			}
		</zscript>

but i can not find any method in the documentation of textbox that allow to get the actual caret postition.

link publish delete flag offensive edit

answered 2010-10-17 22:45:37 +0800

samchuang gravatar image samchuang
4084 4

Hi

I am not sure what do you mean insertInPosition, but you can refer to javadoc DropEvent and MouseEvent to get infomation you need

link publish delete flag offensive edit

answered 2010-10-22 02:18:03 +0800

dis gravatar image dis flag of Switzerland
140 4

Hi

I want to implement exactly the same as you. Did you find a solution?

The method getCurrentCaretPosition does not exist. How do you get the current caret position?

Once you have the caret position, it is easy to insert a string. You could do it like this:

            int caretPosition = txtbox.getCurrentCaretPosition();  // this method does NOT exist!!

            // insert the dragged label to txtbox
            String oldValue = txtbox.getValue();
            String newValue = oldValue.substring(0, caretPosition) + dragged.getLabel() + oldValue.substring(caretPosition);
            txtbox.setValue(newValue);

Again, how did you find the current caret position?

- Dieter

link publish delete flag offensive edit

answered 2010-11-03 12:02:13 +0800

forestmedina gravatar image forestmedina
15

hi Dieter i did not found a solution.
as you say the method getCurrentCaretPosition does not exist so i continue adding the text at the end of the textbox.
i will try to do something with javascript but for now there are other parts of my project with more priority

link publish delete flag offensive edit

answered 2011-01-26 11:25:38 +0800

rafaelmaas gravatar image rafaelmaas
51

Any solution?
same problem here =/

link publish delete flag offensive edit

answered 2011-01-27 00:52:39 +0800

dis gravatar image dis flag of Switzerland
140 4

Hi

I found a solution with client side Java Script.

The following code should help you how to do it:

zul page:

<?page title="" contentType="text/html;charset=UTF-8"?>

<zk xmlns="http://www.zkoss.org/2005/zul"
    xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:n="http://www.zkoss.org/2005/zk/native"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

    <window width="500px" xmlns:w="http://www.zkoss.org/2005/zk/client" apply="test.CaretPosComposer">


        <zscript>
            void insertText(){
                System.out.println("insertText");
                String value = "x";

                String cp = caretPosTB.getValue();
                if (cp == null || cp.length() == 0) {
                    cp = "0";
                }
                int caretPos = Integer.parseInt(cp);
                if (caretPos != -1) {
                    String currentValue = scriptTB.getValue();
                    String newValue = currentValue.substring(0, caretPos) + value + currentValue.substring(caretPos);
                    scriptTB.setValue(newValue);
                }
            }

        </zscript>

        <html><![CDATA[
                <script type="text/javascript">

                function updateCaretPosition() {
                    // get the zk widgets
                    var scriptTB = zk.Widget.$(jq('$scriptTB'))
                    var caretPosTB = zk.Widget.$(jq('$caretPosTB'))

                    // get the js elements
                    var jsScriptTB = document.getElementById(scriptTB.uuid)
                    var jsCaretPosTB = document.getElementById(caretPosTB.uuid)

                    // get the caret position
                    var pos = getCaret(jsScriptTB);

                    // set the caret position in the hidden text field
                    jsCaretPosTB.value = pos;

                    // trigger an event to send the caret position to the server
                    if (document.createEvent) {
                     var evt = document.createEvent('HTMLEvents');
                     evt.initEvent( 'blur', false, false);
                     jsCaretPosTB.dispatchEvent(evt);

                     var evt2 = document.createEvent('HTMLEvents');
                     evt2.initEvent( 'change', false, false);
                     jsCaretPosTB.dispatchEvent(evt2);
                    } else if (document.createEventObject) {
                     jsCaretPosTB.fireEvent('onblur');
                     jsCaretPosTB.fireEvent('onchange');
                    }
                }

                function getCaret(el) {
                    if (el.selectionStart) {
                        return el.selectionStart;
                    } else if (document.selection) {
                        el.focus();

                        var r = document.selection.createRange();
                        if (r == null) {
                            return 0;
                        }

                        var re = el.createTextRange(),
                                rc = re.duplicate();
                        re.moveToBookmark(r.getBookmark());
                        rc.setEndPoint('EndToStart', re);

                        return rc.text.length;
                    }
                    return 0;
                }
                </script>
            ]]></html>

        <textbox id="scriptTB" multiline="true" rows="10" width="100%"
                 style="font-family:monospace;overflow:auto;" w:onClick="updateCaretPosition()"
                 w:onChanging="updateCaretPosition()">
        </textbox>

        <textbox id="caretPosTB" visible="true"/>

        <button label="Insert" onClick="insertText()" />

    </window>

</zk>

Composer class (you need the onChange$caretPosTB event listener to make sure that the server side status of the caretPosTB Textbox is correctly updated):

package test;

public class CaretPosComposer extends org.zkoss.zk.ui.util.GenericForwardComposer {
    public void onChange$caretPosTB() {
        System.out.println("CaretPosComposer.onChange$caretPosTB");
    }
}


how it works:
1. type something in the scriptTB Textbox
2. set the caret somewhere in the middle of the text
3. a client side JavaScript read the caret position and triggers the onChange event of the caretPosTB Textbox
4. click Insert button -> a text is inserted at the current caret position.

The main trick is the caretPosTB which holds the caret position of the testbox. You can make that textbox hidden.

hope it helps.

- Dieter

link publish delete flag offensive edit

answered 2011-01-27 04:20:53 +0800

rafaelmaas gravatar image rafaelmaas
51

Tanx man, u save my life!

link publish delete flag offensive edit

answered 2011-03-17 08:21:31 +0800

rohitwadke gravatar image rohitwadke
339 1 5

hey dis,

Nice code work perfectly for me.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-10-13 11:48:00 +0800

Seen: 820 times

Last updated: Mar 17 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More