I'm writing a page where there are many components reside in single frame. In a sense, this is quite similar to concept of Single-Page Application. We have multiple components and slickGrid table is one of them. I'm trying to unify some interaction set into single vocabulary, each of them getting through its own channel.
However, when it comes to highlighting the row, things got complicated. I still haven't figured out the way to activate highlight function in slickgrid to highlight a specific row through javascript. Is it possible to do so?
Not quite sure which event you're after, but in the slickgrid source code there's a trigger function which is used to fire all slickgrid events, which you can use:
let trigger = (evt, args, e) => {
e = e || new Slick.EventData()
args = args || {}
args.grid = grid
return evt.notify(args, e, this.grid)
}
use it like:
trigger(grid.onMouseEnter, {...})
The only missing variable here is grid.
Related
I have a tabbed web page and I would like to place two different instances of mxGraph, one on the 1st tab and the other one on the 2nd tab:
var editor1 = new mxEditor();
var editor2 = new mxEditor();
I would like to configure each instance in its own way, so the two editors should have different behaviours and properties. Unfortunately, mxGraph is based on lots of static constructs:
mxConstants.EDGE_SELECTION_COLOR = '#a8d6e1';
mxGraphView.prototype.updateFloatingTerminalPoint = function (...) { ... };
mxConnectionHandler.prototype.movePreviewAway = false;
...
It seems that placing two graphs on the same page isn't the right thing to do, since the latest configurations would override others and, maybe, one event can conflict with other ones.
What are you suggesting me?
I'm thinking at completely redrawing graph every time a tab gets focused, but: 1. performances? 2. does mxGraph have a global destroy or reset function? 3. any side effect?...
Is there a way to schedule an event when a key is pressed on the keyboard. I can't seem to find that in the event triggers.
There are two possible answers to this.
First one is that slate is just javascript, with sandboxing layers (for security and functionality) so to an extent if you know the dom element ID could just try to reach it with something similar to this: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event#examples
const log = document.getElementById('log');
document.addEventListener('keypress', logKey);
function logKey(e) {
log.textContent += ` ${e.code}`;
}
Due to the sandboxing layers it may not be possible depending on what you are trying to achieve. If you want to do this natively, then the trick to effectively designing apps with slate is to think that the whole world gets recomputed whenever a variable changes. Similar to what happens with the lifecycle refreshes on Angular.js
There isn't a native global event for a key press in slate, so if you want to listen for any keypress that bubbles to the document, that won't work. But for most use cases you can work around it. For example by setting a variable from an input and then just read it from somewhere else.
1 - Go to the variables tab and create a new variable.
2 - Create an input box.
3 - Set the variable to update every time the variable changes.
4 - Read the variable from some widget or function.
I have Problem with onTick() method, I have two buttons for two different situations, in each one I will load separate dataSource, just like the czml.html example on Sandcastle. I have two different definition for onTick() method for each button seperately, to do some specific things when we reach at a specific time. In the reset method I am removing entities and dataSources of my viewer, but I cannot remove onTick method implementation.
When I am running my code, the default button is doing perfectly fine, but when I press other button, all those conditions that I mentioned for the first button is also happening at the same time, and it will not let my second onTick method to perform its job correctly. Do you know how I can deactivate the first onTick method?
Take a look at the addEventListener documentation, you'll find two different ways to undo the addition of an event listener: One is to call the matching removeEventListener, and the other is to save the return value from addEventListener and invoke it later.
Here's some code showing both ways. Use whichever option makes more sense for your code, but don't use both at once.
function onTickCallback(clock) {
// ... do stuff with every tick ...
}
var unsubscribeTicks = viewer.clock.onTick.addEventListener(onTickCallback);
function unsubscribeOption1() {
// One option is to call removeEventListener. In this case, you
// don't need to save "var unsubscribeTicks" at all, but you do
// need a reference to the original onTickCallback.
viewer.clock.onTick.removeEventListener(onTickCallback);
}
function unsubscribeOption2() {
// The other option is to save the return value of addEventListener,
// and later invoke it. This could be a cleaner option if the
// onTickCallback was declared anonymously inline.
unsubscribeTicks();
}
I have a submit button whose enablement state depends on several other widgets' state; and I can't come up with a client side solution in Google Apps Script to do the validation.
For example, take three checkboxes. The submit button should be enabled iff (if-and-only-if) at least one checkbox is enabled.
I know I could do this with server side validation but there shouldn't be any need for something this simple. Any suggestions? Thanks.
It perfectly possible to write client side handlers that depend on multiple widgets' states, as you can just chain many validateX calls on a single handler. The problem here is just that clientHandlers cannot validate checkboxes state.
I have opened an issue regarding this problem, you may want to star it to keep track of updates and kind of vote for it:
Issue 2220: UiApp handler validateValue of checkbox
Anyway, it is possible to workaround this, and I'll just to show you that it is possible to have handlers depending on multiple widgets value, but this code will be much simpler when issue 2220 is solved:
function doGet(e) {
var app = UiApp.createApplication().setTitle('Checkbox Test');
var panel = app.createVerticalPanel(),
noChecked = app.createClientHandler(),
button = app.createButton('Test').setEnabled(false);
for( var i = 0; i < 3; ++i ) {
var cb1 = app.createCheckBox('cb'+i),
cb2 = app.createCheckBox('cb'+i).setVisible(false),
tb = app.createTextBox().setValue('false').setVisible(false);
cb1.addClickHandler(app.createClientHandler().forTargets(cb2).setValue(true).setVisible(true).forEventSource().setVisible(false).forTargets(tb).setText('true'));
cb2.addClickHandler(app.createClientHandler().forTargets(cb1).setValue(false).setVisible(true).forEventSource().setVisible(false).forTargets(tb).setText('false'));
cb1.addClickHandler(app.createClientHandler().forTargets(button).setEnabled(true));
cb2.addClickHandler(noChecked.validateMatches(tb,'false'));
panel.add(cb1).add(cb2).add(tb);
}
noChecked.forTargets(button).setEnabled(false);
return app.add(panel.add(button));
}
ClientHandlers are intentionally simple. You can do arbitrary code with ServerHandlers and the speed difference should be relatively small. Otherwise, yes, this is by design and if you need more complicated client logic you need to use HtmlService.
The tradeoff between UiApp and HtmlService related to how we guarantee that you can't serve malicious code from a script. UiApp code uses simple builder patterns that are limiting but definitely safe, while HtmlService uses complex sandboxing to achieve that goal, with tradeoffs of not working on older browsers and some other limitations.
This specific use case sounds workable in UiApp, if I understand you correctly. If you want an example of a show/hide button that flips, here is one:
function doGet() {
var app = UiApp.createApplication();
var label = app.createLabel("I am a toggleable widget").setVisible(false);
var show = app.createButton("show");
var hide = app.createButton("hide").setVisible(false);
show.addClickHandler(app.createClientHandler()
.forTargets(label, hide).setVisible(true).forTargets(show).setVisible(false));
hide.addClickHandler(app.createClientHandler()
.forTargets(label, hide).setVisible(false).forTargets(show).setVisible(true));
return app.add(show).add(hide).add(label);
}
Basically, use 2 buttons and flip the visibility of the button too.
Checkboxes are in fact validated - but it is their text that is validated, not their value:
var app = UiApp.createApplication();
var check = app.createCheckBox();
check.setText("foo").addClickHandler(
app.createServerHandler("clicked").validateMatches(check, "foo"));
return app.add(check);
The issue tracker request is reasonable though.
I'm creating a GUI, but only if things go ok, so can i
addEventListener(Event.Complete, go) to something and in the go function create my GUI (grafical elements such as labels, lists, squares)?
Is it ok to do that?
Technically it's fine. crooksy88 gives a good example of supplying a default value for the event parameter to make the function more versatile.
However, for the sake of semantics, clarity, and maintenance I would usually prefer to separate things more. So mine might be set up more like this:
protected function onLoadComplete(e:Event):void {
initAppSettings();
createUI();
startApp();
}
It makes it much easier to understand the flow of the app and what each part does just by reading the function names. When I come back to this later, I'll know that my UI is created in the function named createUI and not have to figure out that it gets created in an event handler with a cryptic name like go or handleEvent.
Also, if I want to change the flow of my app, say to pop up a dialog once the load is complete before the UI is created, I just have to move around some function calls, instead of moving around large chunks of code.
Yes that is perfectly fine. The go function isn't part of the event listener.
function go(e:Event):void {
// do something
}
The sample above requires the event parameter from the listener (e:Event).
But you can modify the function so that the parameter is optional so you can call the go function any time you want
function go(e:Event = null):void {
// do something
}
The example above will be triggered by the listener and also by typing
go();