I am using Ace editor in a web app I am developing. I have a Save button that calls a function I wrote called handleFileUpdate(). But, I also want the user to be able to save the contents by a keyboard shortcut.
Here is my current code for the Ace keybinding:
this.editor.commands.addCommand({
name: 'save',
bindKey: {win: "Ctrl-S", "mac": "Cmd-S"},
exec: function(editor) {
this.handleFileUpdate();
}
});
where this.handleFileUpdate() is a function in my own code.
When the command is invoked, Ace throws this error:
TypeError: this.handleFileUpdate is not a function. (In 'this.handleFileUpdate()', 'this.handleFileUpdate' is undefined)
I understand that this.handleFileUpdate() is not visible to Ace.
My question is: how is it possible for an Ace command to invoke an external function? Or put another way, how is it possible to provide a custom function to Ace so it can invoke it when Ctrl-S is pressed?
This is not so much a question about ace, as about this handling in javascript.
In your example this in the internal function is the object on which the method is defined.
As a workaround you can use an arrow function.
this.editor.commands.addCommand({
name: 'save',
bindKey: {win: "Ctrl-S", "mac": "Cmd-S"},
exec: (editor) => {
this.handleFileUpdate();
}
})
``~
Related
example https://rahulshettyacademy.com/AutomationPractice/
on click window
I have tried with get the property of onclick but its displaying undefined, if any one have a code please post here.
The "Open Window" button uses the window.open method to load a new url in a new browser window. There are two ways to test this.
Stubbing
You can stub the window.open method and check it was called.
cy.visit(url, {
onBeforeLoad (win) {
cy.stub(win, 'open').as('open')
}
})
cy.get('#openwindow').click()
cy.get('#open').should('have.been.calledOnce')
Loading on the same window
You can also have the url loaded in the same window as the cypress test runner.
cy.visit(url)
cy.window().then(win => {
cy.stub(win, 'open').callsFake((url, target) => {
expect(target).to.be.undefined
// call the original `win.open` method
// but pass the `_self` argument
return win.open.wrappedMethod.call(win, url, '_self')
}).as('open')
})
cy.get('#openwindow').click()
cy.get('#open').should('have.been.calledOnce')
Gleb has good reading material on this.
I'm using ag-grid to render a table in my angular 7.2.1 app. The custom cell renderer is just to render an edit button in the rows that will redirect to a different page.
I've done this before in a different app on a different Angular version a while ago, but for some reason the same code in this Angular 7 app is resulting in this. I think I may be missing something really simple.
I've created a minimalist reproduction of the error I'm seeing in this stackblitz - https://stackblitz.com/edit/angular-v98mjs
If you click on the Edit button, you will see this error in the console.
ERROR Error: Cannot read property 'navigate' of undefined
ag-grid versions:-
I'm using the following version for ag-grid:-
"ag-grid-angular": "^20.2.0", "ag-grid-community": "^20.2.0",
Please look at the stackblitz code in the link above for the code.
You needed to define onEdit with Arrow Function
onEdit = (row): void => {
console.log('row is being edited', {row})
this.router.navigate(['/new-url', { id: row.incidentId }], {
relativeTo: this.route.parent
});
};
More example such thing: ag-grid server side infinite scrolling accessing props
Have a look at the updated plunk: https://stackblitz.com/edit/angular-oppxte
Without arrow function, inside onEdit function of AppComponent was not able to get reference of this.router, and hence, you were getting the error.
Cannot read property 'navigate' of undefined
I have also introduced RootComponent and NewComponent for better modularity in the example. Hope it will be clear with that.
I'm working on an implementation of Ace Editor and Ctrl+F works great for the built-in "Find" dialog, however I'm trying to find a way to change out the Ctrl+H for Ctrl+R and prevent default behavior.
I've looked over docs and forums about working with the keybindings but I can't identify what method is being called to instantiate the 'replace' dialog or how to overwrite it.
Replace command is defined here. it is possible to use the following code to change Ctrl+H for Ctrl+R
editor.commands.addCommand({
name: "replace",
bindKey: {win: "Ctrl-R", mac: "Command-Option-F"},
exec: function(editor) {
require("ace/config").loadModule("ace/ext/searchbox", function(e) {
e.Search(editor, true)
// take care of keybinding inside searchbox
// this is too hacky :(
var kb = editor.searchBox.$searchBarKb
command = kb.commandKeyBinding["ctrl-h"]
if (command && command.bindKey.indexOf("Ctrl-R") == -1) {
command.bindKey += "|Ctrl-R"
kb.addCommand(command)
}
});
}
});
but the part with inner command is quite ugly, i'd suggest to make an issue on ace repository to either use normal name for it, or pick up replace commands key automatically
This worked for me:
editor.commands.addCommand({
name: 'replace',
bindKey: {win: 'Ctrl-R', mac: 'Command-Option-F'},
exec: function(editor) {
ace.config.loadModule("ace/ext/searchbox", function(e) {e.Search(editor, true)});
},
readOnly: true
});
Following the JavaFX Tutorial here: http://docs.oracle.com/javafx/2/get_started/fxml_tutorial.htm, trying to make it run in Clojure. For now I'm just doing lein run after setting up :aot :all and stuff with (:gen-class) etc. It took a few days of figuring out, but now it seems to be mostly working.
In src/jfxtwo/ClojureExampleController.clj:
(defn -handleSubmitButtonAction [^ActionEvent event]
(let [actiontarget (Text.)]
(println "event button pressed")
(println "Event instance:" event)
(println "Event class:" (class event))
(.setText actiontarget "Sign in button pressed...")))
In resources/fxml_example.fxml:
<GridPane fx:controller= "jfxtwo.ClojureExampleController"
xmlns:fx= "http://javafx.com/fxml"
alignment= "center" hgap= "10" vgap= "10"
styleClass= "root" >
...
<Button text= "Sign In"
onAction= "#handleSubmitButtonAction" />
...
<Text fx:id= "actiontarget"
GridPane.columnIndex= "1" GridPane.rowIndex= "6" />
...
I have my clojure code able to read the fxml and css file to generate the proper GUI. When I press the button I can see the event handler being called, but I don't know how to access the Text I want to change, or the ActionEvent instance that is associated with the button press. I tried (println event) and (println (class event)) expecting to see something about an ActionEvent instance, but this only results in showing me that for whatever reason the callback function thinks the event is a ClojureExampleController, even though the type hint says it should be an ActionEvent:
event button pressed
Event instance: #<ClojureExampleController jfxtwo.ClojureExampleController#3e61061d>
Event class: jfxtwo.ClojureExampleController
The Java code to do this looks like this:
public class JFXAppSampleController {
#FXML private Text actiontarget;
#FXML protected void handleSubmitButtonAction(ActionEvent event) {
actiontarget.setText("Sign in button pressed");
}
}
Clearle the #FXML annotation is doing the magic here. What's going on, and how do I make this work in Clojure?
Also, is there a way to bind the button press to the text change directly in the FXML so I don't really have to handle a gui->gui change in the code-behind, and instead only deal with the logic associated with the button press? I'm guessing yes, but I haven't gotten to that point in the tutorial.
thanks!
You need an explicit this argument in your handler:
(defn -handleSubmitButtonAction [this ^ActionEvent event]
...)
Perhaps a more accurate way of putting this is that event is the this argument in your handler as exhibited in the question text and you need to add a second argument to accept the event in and move the type hint to it (and probably rename the first argument to this for readability).
Given the fact that your code gets called at all, it would seem that JavaFX is happy to call a handler without passing it the event at all if it doesn't care about it (as evidenced by not having a formal parameter corresponding to it).
The type hint's only purpose is to allow the Clojure compiler to avoid emitting reflective code when ActionEvent methods are called on event. This will not prevent passing an object of a different type to the function.
I need to do some post-processing work on a png file of a Highchart graph. How do I determine when the export is finished? I've tried to attach a function, but it never gets called:
console.log("Saving chart...");
chart.exportChart({
type : "application/png",
filename: "tmp_chart_filename"
},
function(data) {
console.log("Export done, Data: " + data); // Not called.
})
console.log("Out");
To my understanding, it is not possible out of the box.
What happens internally in the exportChart() method is, a form is created on the fly and the chart svg is sent to the server by programmatically triggering a submit on this form. The server in turn, processes received svg into a png (or whatever you may select) and returns it to the browser.
The popup you see that asks you to "save as" is the action of the browser (and not any highchart code) when a file is thrown at it. Basically the returned png is never returned to the code, it goes directly to the browser.
You can however write your custom svg->png server module and do your magic there :)
I had a rather similar issue and solved it by defining the onclick event on the contextButton. This seems possible only if you are OK with losing the items in the context menu (export by file type), which wasn't an issue in my case. Below the code to be included in the chart initial building:
[... your Highcharts chart setup ...],
exporting: {
buttons: {
contextButton: {
menuItem: null, // You'll lose your menu items here
onclick: function(event) {
yourFunctionBeforeExport();
this.exportChart();
yourFunctionAfterExport();
}
}
}
}
[... rest of the Highcharts chart setup ...]