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.
Related
I have a repeat control using a view as the datasource with a custom control within the repeat. The custom control is made up of a panel with two tables. One table has computed fields with an Edit button and the other has editable fields with a Save and Cancel button. The Edit and Cancel buttons work as needed, but the Save button gives a NotesDocument.save() is null error. I have already narrowed the issue down to the error occurring on the edoc.save() line by commenting out all prior lines. I even tried to do an edoc.lock(), but got the same error.
var edoc:NotesDocument = database.getDocumentByUNID(viewScope.get('docid'));
edoc.replaceItemValue('Ext_1',viewScope.get('ext_1'));
edoc.replaceItemValue('DID',viewScope.get('did'));
edoc.replaceItemValue('Mobile',viewScope.get('mobile'));
try {
edoc.save();
} catch(e) {
print(e.toString());
}
The storage of a DocID in the viewScope and a repeat control doesn't seem right. You want to add a custom property to your custom control called DocID and then instead of
database.getDocumentByUNID(viewScope.get("docid"));
You do:
database.getDocumentByUNID(compositeData.DocID);
This was you can be sure that you get the document that was in that view for that row.
What you also might consider, instead of all the manual steps (the ones you commented out) have a panel with a DocumentDataSource and then simply bind your input fields to that one. Handover of id via custom property and "IgnoreRequestParameter = true
Then you simply do a rowDoc.save() (presuming you named the datasource rowDoc) and you don't need to recycle anything. Let us know how it goes.
This is a rather strange one I think, and I'm sure I made a mistake here myself:
in one of my applications I'm showing a fileDownload control bound to a Richtext field in my underlying NotesDocument. The control's properties a are set to Hide if no attachments, show size, type and created as well as allow delete. The control itself sits inside a custom control, being part of another custom control, similar to this:
Xpage.xsp
- ccContainer
- - ccInnerDoc
Document datasources for both the container and the "inner" doc are defined at the root of ccContainer and passed into the inner doc.
The inner doc's datasource is comnputed based on a document selection, and it's igenoreRequestParams property is set to false so that I can display the contents of the selected datasource in a given panel etc.
The selected doc is first opened in read mode, and I can set it to edit mode using a button.
Problem now is that my file download control always is showing the delete icon (trashcan) no matter which mode the doc is opened in. And it's not only the icon showing, it also pretends to work by asking me whether I really want to delete and then really removes the file attachment. Only that this change of course cannot be stored into the datasource because it's only open in read mode.
I'm sure that this behaviour is some side-effect of something else in my application (to a certain extent I rebuilt this in a plain new db and until now cannot reproduce it), but I'm at the end of my knowledge of what this could be.
Any hint of what could be causing this is more than welcome.
In place of #Frantisek Kossuth I answer this myself: see compute dynamically the allowDelete property of file download xpages
Thanks again, Frantisek!
I am working on a large, worldwide application, which includes access from areas of low bandwidth. As such, I want to use a minimum of SSJS or partial refreshes for all the complex hide/when calculations. Here is what I have so far for a simple "hide/when":
A Yes/No radio button, with CSJS to show a panel ("Yes") or hide the
panel ("No").
The panel has a formTable inside it, and the values are shown or hidden, as per #1.
In the XPage's onClientLoad, the following code is run:
// "getRadioValue" is a simple script to return the value of a radio button
var v_value = getRadioValue("#{id:radioButton}");
v_div = '#{javascript:getClientId("radioButtonPanel")}';
// show or hide div simply use dojo to change the display of the panel
if (v_value == 'Yes') {
showDiv(v_div);
} else {
hideDiv(v_div);
};
For a new document, the onClientLoad script will hide the "radioButtonPanel" successfully. Changing the radio button to "Yes" will show the radioButtonPanel, just as clicking "No" will hide it. It works great! :-)
Once the document is saved and reopened in read mode, though, the onClientLoad CSJS event should read the saved value in the document, and decide to show the panel or not. When the document is opened in edit mode, the onClientLoad fires, reads the radioButton value and successfully shows or hides the panel.
This is what I've tried so far, to get it to work in read mode:
In CSJS, using "#{javascript:currentDocument.getItemValueString('radioButton'}" to get the value,
Doing some calculations in the "rendered" or "visible" properties, but that's SSJS and, if hidden, prevents any of the "show/hideDiv" CSJS visibility style changes.
Adding an old fashioned "div" to compute the style (which is what I used to do before XPages), but since I can't do pass-thru html any more, I can't seem to get a CSJS calculation for the style. Ideally, I can do something like this:
<div id="radioButtonPanel" style="<ComputedValue>">
Where the ComputedValue would read the back end value of the document, and decide to add nothing or "display:none".
Note that I don't want to use viewScopes, since this long form would need many of them for all the other hide/when's.
Is there any way to make this 100% CSJS? I feel like I'm very close, but I wonder if there's something I'm just missing in this whole process.
First, rather than computing style, I'd recommend computing the CSS class instead -- just define a class called hidden that applies the display:none; rule. Then toggling visibility becomes as simple as a call to dojo.addClass or dojo.removeClass.
Second, I see that you're using the #{id:component} syntax to get the client ID of the radio button but using SSJS to get the client ID of the panel. Use the id: syntax for both; this is still just a server-side optimization, but if there are many instances of these calculations, it adds up. Similarly, replace #{javascript:currentDocument.getItemValueString('radioButton'} with #{currentDocument.radioButton}. Both will return the same value, but the latter will be faster.
Finally, any attribute of a pass-thru tag (any component with no namespace, like xp: or xc:) can still be computed, but you'll need to populate the expression by hand, since the editor doesn't know which attributes for valid for these tags, and therefore doesn't provide a graphical expression editor. So if the ideal way to evaluate the initial display is by wrapping the content in a div, the result might look something like this:
<div class="#{javascript:return (currentDocument.getValue('radioButton') == 'Yes' ? 'visible' : 'hidden');}">
<xp:panel>
...
</xp:panel>
</div>
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
In my program I want the user to be able to choose between some options so I was using wxChoice component. Unfortunately after user interaction (clicking a button) I have to show custom text (not from my predefined list). Everything works fine if I use wxCombobox control but the drawback of this approach is that each time user selects an element from a list, selected text is highlited. It is annoying. I want the component to be read-only like. How to achieve this ?
Some code to visualize my question:
wxComboBox* viewAngle = wxDynamicCast( owner->FindWindow
( ID_CHOICE_3D_VIEWANGLE ), wxComboBox );
viewAngle->SetSelection( wxNOT_FOUND );
viewAngle->SetValue(_("Custom View"));
EDIT:
This control is used to set camera view in 3D object viewer application. Possible options are like: top, left, right, etc. It is also possible that the user moves 3D object using mouse. In that case I want my combobox to display "custom view" string. However "custom view" should not be a part of combobox list because selecting this option does nothing.
wxWidgets default implementation alwasy marks selected text. Which might be misleading for the user because he might think that he is expected to input any text.
IMHO, the custom text should be added to the wxComboBox control, the program could just ignore it when user selects that option.
Also, the wxComboBox's wxCB_READONLY style could be used to avoid the highlighting thing.