When a user tabs into a List and the List gets focus I want to put a border around the List's parent. It would be great if I could call onFocus/onBlur on the List. Any advice?
Currently there is no way to attach onBlur or onFocus events (or anything other than onScroll) to a Grid. (The same is true for List which just decorates a Grid).
You could add this behavior yourself using the ref though. Here is an example Plnkr: https://plnkr.co/edit/TVxnhf?p=preview
The key part is:
_setListRef(listRef) {
if (listRef) {
listRef = findDOMNode(listRef);
listRef.addEventListener('blur', onListBlur);
listRef.addEventListener('focus', onListFocus);
}
}
Related
I used the example code to create an info button (https://resources.jointjs.com/tutorial/element-tools). But I would like it to change when clicked. (I actually modified the example to show a "+" instead of a blue info circle, by using text and textContent instead of a path in the markup definition. But I would be happy to learn how to make the original example change when clicked, too.)
So when you click it I want it to show some info and change to a "-". And then if you click the "-", change back to a "+". I don't see how to change the textContent of the elementTools.Button programmatically or in an event. It was easy enough to change the label of the associated Rectangle. Inside the event I just did this.model.attr("label/text", "whatever"). But how to do it to the element tool Button?
There is an example that's pretty good, using a custom element containing subelements not tools (halfway through https://resources.jointjs.com/tutorial/events). Does it mean I can't use an element tool, that element tools can't change on an event?
The behaviour of the Button tool can be adjusted in the callback function in options.action.
joint.elementTools.InfoButton = joint.elementTools.Button.extend({
name: 'info-button',
options: {
action: function(evt, elementView, buttonView) {
// your action
}
}
});
Although, in your case I would probably go with the example using custom events you linked in your question. It is probably more flexible to work with an element rather than a tool in this instance.
I am struggling with the following.
On my XPage I have a viewpanel component, but it is not bound to a notesview datasource, but to a hashmap stored in viewScope. Reasons for this is beyond scope of my question.
Since the lines in my view are not actually linked to the documents I cannot use the standard checkboxes and the related getSelectedDocIds. I do however want a way to remove the selected documents. I have a column with checkboxes containing the unid of the corresponding row.
So long story short. I have an array of unids and want to perform an action that does the following:
Display a dijit.Dialog asking for confirmation
If OK clicked call a function that does the following:
Remove the documents based on the unids
Refresh the viewpanel
I am thinking of the following 2 solutions, but in doubt what would be best (maybe a third, even simpler solution?)
Have the OK button of the dojo dialog call a function that does an XmlHttpRequest to an XAgent or plain old LS agent
Have the OK button trigger an eventhandler that runs on the server as described by JeremyHodge here. But how would I pass the unids as parameter and refresh the view afterwards?
Thanks!
Cant you just make use of the extension library dialog with the dialog button control. In this button control you can then
A third option would be to add a column to your datatable/view which contains checkboxes. On the onchange event of these boxes you add an eventhander which adds the value to a viewScope variable.
A button on the bottom (or top.) of the page you add the code you need to remove the selected items from the hashmap, delete the documents associate with the selected id's. this button can be a ordinary button with a partial refresh on the viewpanel. When you run into the bug that you cant use buttons in a dialog please use the extension library dialog control because this fixes that issue for you.
If the current user does not have the correct access level to delete documents you could use the sessionAsSigner global (assuming the signer of the design element has the correct access levels).
This way you dont need to go call an xAgent by xmlthttprequest and can stay with the default xpage methodology.
I hope this helps in some way
I would second #jjbsomhorst in the use of the extension library for the dialog box - if you use one at all. Usually users don't read dialog boxes. So the approach would be add the column with the checkboxes, but don't bother with an event handler, but bind them ALL with their value to ONE scopeVariable. On submission that variable will then hold an array with the selected UNID.
Then render a page that lists these documents and have a confirm button. While the new page affords a server round-trip the likelihood, that users actually pay attention is way higher. What you can do:
Have the normal page that renders the dialog with editable checkboxes and when the user clicks "Delete" you set something like viewScope.confirmDeleteMode=true; and use that as condition for the checkboxes and make them read-only AND set the class of the selected rows to "morituri" which in your CSS would have something like .morituri { color: white; background-color : red; font-weight: bold } and a new button "Confirm Delete" (and hide the Delete button).
This way you only have one page to deal with.
I went for option 2, which has the possibility to provide the partial refresh id. I passed the unids as a submitvalue like:
function doRemove(unids){
XSP.executeOnServer(ISP.UI.removeEventID, ISP.UI.removeRefreshID, {
params: {
'$$xspsubmitvalue': unids
},
onComplete : function() {
//alert('test')
}
});
}
The ISP.UI.removeEventID performs the following code:
var unids = context.getSubmittedValue();
removeDocuments(unids); //SSJS function performing the actual delete
viewScope.reload = 'reload' //triggers the hashmap to be rebuild based on new documentcollection
Is it possible to set a onchange listener to the textfield in j2me?
sure. Use ItemStateListener for that:
// below assumes that 'form' contains 'textField' which changes you want to listen to
form.setItemStateListener(new ItemStateListener() {
public itemStateChanged(Item item) {
if (item != textFiled) {
return; // ignore other items
}
System.out.println("contents: [" + textField.getString() + "]");
}
});
It is worth keeping in mind details of how itemStateChanged is invoked per the API docs:
...when the user ...enters or modifies the value in a TextField...
It is up to the device to decide when it considers a new value to have
been entered into an Item. For example, implementations of text
editing within a TextField vary greatly from device to device.
In general, it is not expected that the listener will be called after
every change is made. However, if an item's value has been changed,
the listener will be called to notify the application of the change
before it is called for a change on another item, and before a command
is delivered to the Form's CommandListener. For implementations that
have the concept of an input focus, the listener should be called no
later than when the focus moves away from an item whose state has been
changed. The listener should be called only if the item's value has
actually been changed.
The listener is not called if the application changes the value of an
interactive item.
I am trying to implement search option for my file browser application.
I can get the item after taking an input from the user. Now, I want to add this item to my listview. Also after the search is over, the item should be clickable to open them.
Here, is the piece of code... Any suggestions will be appreciated.
void Browser::search()
{
QDirIterator it(path,QDir::AllDirs|QDir::Files|QDir::NoSymLinks|QDir::NoDotAndDotDot,QDirIterator::Subdirectories);
while(it.hasNext())
{
it.next();
if(it.fileInfo().completeBaseName().contains(content,Qt::CaseInsensitive))
{
qDebug()<<"it.fileinfo = "<<it.fileInfo().fileName();
}
}
path.clear();
}
Instead of List View you can use List Widget and simply fill the list using method addItem or addItems. If your list is small/simple it doesn't in my opinion make sense to use Model-View paradigm.
Look at QListWidget in documentation
You should read more about model/view concept. You add data to your model not to a view. You'll find in this article sections "Editable items" and "Resizable models", which address your issue.
I have a SproutCore Pane - a PalettePane, specifically - which includes a form tied to an object elsewhere on the screen. The Pane is causing trouble with the object deletion interaction. The way I want it to work is:
If a text input field is in focus, the backspace/delete keys should apply to those fields (i.e. editing the text)
If no text input field has focus, the backspace/delete keys should delete the selected object related to the form. (The pane appears when the user has selected an object, so if the pane exists there's a selected object.)
So far, I get one of these behaviors or the other, never both. If I set acceptsKeyPane: YES in the Pane, I get the backspace/delete keys applying to the text fields, but no deleting of selected objects when the text fields don't have focus. If I use acceptsKeyPane: NO, when I'm editing a text field and hit backspace, it deletes the object I was trying to edit.
To add insult to injury, in Firefox with acceptsKeyPane: YES the backspace key is caught by the browser and interpreted as a back-button click, which is going to be frustrating to the user.
I've looked at the root_responder.js code and it looks like SproutCore handles backspaces differently for Firefox, but if I can handle them as described above the distinction between FF and other browsers should be moot.
ETA May 2011: Bear in mind when reading answers here that the SproutCore API for 1.5, 1.6 and beyond may not be the same as this.
Here's how we finally wound up doing it:
When the pane was created, we called becomeFirstResponder() on it.
We added acceptsFirstResponder: YES to its view definition.
Then we added to the view definition:
keyDown: function(evt) {
return this.interpretKeyEvents(evt) ? YES : NO;
},
deleteBackward: function() {
this.get('objectToEdit').destroy();
return YES;
},
deleteForward: function() {
this.get('objectToEdit').destroy();
return YES;
}
...and that did the trick.