Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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??
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
thanks for the reply i look for something like that but in this part
<zscript>
void move(Component dragged) {
txtbox.setValue(dragged.getLabel());
}
</zscript>
<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.
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
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
Any solution?
same problem here =/
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
Tanx man, u save my life!
Asked: 2010-10-13 11:48:00 +0800
Seen: 821 times
Last updated: Mar 17 '11
