I'm starting learning dart, I've installed the Dart Editor normally on a Linux system, but the problem comes up when I start to code a simple snippet of code for instance this:
import 'dart:html';
void main() {
querySelector('#status').innerHtml = "Hola mundo";
var button = new ButtonElement();
button.text = "Haz click";
button.on.click.add( (e){
var div = new Element.html("<div>puto</div>");
document.body.elements.add(div);
});
document.body.elements.add(button);
}
I get three warnings with the same messages: "There is no such getter 'function' in..." in three different parts of the code:
I got this code in a book, so the code is correct, How do I resolve this problem? thanks
edit: I cannot run this code with these warnings as you could expect.
The book is probably out of date from the current library APIs.
Try changing elements to children, e.g. document.body.children.add(elem2); is an example in the DOM section of Dart: Up and Running.
See the api
https://api.dartlang.org/apidocs/channels/stable/#dart-dom-html.Element#id_onClick
ElementStream<MouseEvent> get onClick
Stream of click events handled by this Element.
This syntax is outdated
// button.on.click.add( (e){
button.onClick.listen(callback);
// or button.on['my-custom-event'].litsen();
Related
after several rounds of research, I found there is no clear answer about the situation like below:
I have a js file called 'AAA.js', and there is simple code in side like this:
var AAA = {
listenForMenuLayer: function () {
console.log("menu initiated");
$('.nav-menu').on('click', function() { console.log("menu clicked")});
}
init: function(){
this.listenForMenuLayer();
}
};
And in the dart, I wrote like below (using 'dart:js'):
js.context['AAA'].callMethod('init');
Then, when I run it, everything looks fine, the "menu initiated" shows properly, which means the 'listenForMenuLayer' is initiated, but when click on the '.nav-menu', there is nothing happened. (I check many times, there is no spelling error or else)
My question is: Can Dart accept this kind of initiating of external JS event? or we should re-write those JS events at all, please advise, many thanks.
Updates:
I found that if we write the js code like above, the jquery will not be initiated properly, which means all the features begin with '$' will not be functional.
guys, I update it to using 'package:js/js.dart';
#JS('AAA.init')
external void aInit();
then some where, just simply call after including:
aInit();
I know that my question is not new, but all solutions I've found here and in the Internet are not working :( Or, I'm doing something completely wrong.
I need to create a communication between Dart and JS, and I would love to use events, as the idea seems to be neat and simple.
So, I tried this tutorial: https://dart.academy/easy-dart-js-interopt/
My JS code:
var customEvent = new CustomEvent("fromJavascriptToDart");
window.onload = document.dispatchEvent(customEvent);
document.addEventListener("fromJavascriptToDart", test, false);
function test() {
console.log("Listening");
}
The event is dispatched, as I see Listening in console log.
But when it comes to dart, nothing is working.
I've tried the following methods and everything failed:
document.on['fromJavascriptToDart'].listen((CustomEvent event) {
print("HEY! I'M LISTENING!");
});
window.on["fromJavascriptToDart"].listen((e) => print( "HEY! I'M LISTENING!"));
window.on['foo'].add((e) => print(e.detail)); //This is not working, as there is no add method in Stream Event anymore
#Listen('fromJavascriptToDart')
void eventTest(){
print("HEY! I'M LISTENING!");
}
Any help is mostly appreciated.
DartPad example
document.on['fromJavascriptToDart'].listen((CustomEvent event) {
print("HEY! I'M LISTENING!");
});
Works fine.
#Listen() is Polymer specific
add doesn't exist (listen as show above should be used)
the event doesn't seem to reach window, but I'm sure this will behave the same in pure JS.
I'm trying to migrate from Bootstrap to Polymer/Paper and I've got a lot of situations where I have to enable/disable buttons that were previously accessed as ButtonElements and then .disabled=true/false.
So for example I've got a paper button I'm trying to access and enable/disable via querySelector as such:
PaperButton nextWeekButton = querySelector("#nextweekbutton");
nextWeekButton.disabled=!_status;
But I am getting the error: type 'HtmlElement' is not a subtype of type 'PaperButton' of 'nextWeekButton'.
I get the same variety of message if I try as an InputElement or ButtonElement. If I try to get it as an HtmlElement then of course I get the "setter 'disabled' is not defined..."
I was going to start playing around with attribute setting but really shouldn't there be a way to do this that's like the ButtonElement? Just want to make sure I am not missing anything.
Update: For now I am doing this
void disableButton(Element _e, bool _status) {
if(!_status) {
_e.setAttribute("disabled","true");
} else {
_e.attributes.remove("disabled");
}
}
I'm pretty sure the problem is that your code is executed before Polymer is initialized. See https://stackoverflow.com/a/20982658/217408 how to initialize Polymer when you have a custom main method.
So I have a view that create pie chart. Th recurring code looks like this.
function drawChart() {
var dataBest = new google.visualization.DataTable();
dataBest.addColumn('string', 'Name');
dataBest.addColumn('number', 'Number');
dataBest.addRows([
<ui:repeat value="#{dashboardController.bestSelling()}" var="sale">
[ '#{sale[0].prodId.prodName}', #{sale[1]}],
</ui:repeat >
]);
var options = {'title':'Best Sold Products', 'width':400,'height':300};
var chart = new google.visualization.PieChart(document.getElementById('test'));
chart.draw(dataBest, options);
}
And in my controller called DashboardController I have:
public String bestSelling() {
List<Sales> bestSelling = saleService.getBestSellingProduct(country,gender,status,income);
return new Gson().toJson(bestSelling);
}
But, when I go on my page, I have the following error:
/faces/all.xhtml #22,83 value="#{dashboardController.bestSelling}": The class 'com...managedbean.DashboardController' does not have the property 'bestSelling'.
I don't understand what I did wrong there.
You're not running the code you think you're running. Look at the error message:
/faces/all.xhtml #22,83 value="#{dashboardController.bestSelling}
It mentions the method without the parentheses. So, you've apparently added it later in, but the webapp project is not properly been saved/cleaned/rebuilt/redeployed/restarted.
Unrelated to the concrete problem, there's many more wrong with this approach (attempting to use <ui:repeat> to iterate over a Java String as #1 thinking mistake), but you'll experience this as soon as you fix the current problem. Hint: JSF is a HTML code generator and JS is part of that HTML.
Does anyone know what might have changed since v3.0.5 that would enable extensions to work? Or, maybe I'm missing a setting somewhere? I wrote this add-on that works fine with newer versions, but I can't get it to launch in older ones. Specifically, I can't even get this part to work (this is in my browser overlay.xul):
<html:script>
<![CDATA[
var Cc = Components.classes;
var Ci = Components.interfaces;
var obSvc = Cc["#mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
gBrowser.consoleService = Cc["#mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService);
gBrowser.log = function(msg){
this.consoleService.logStringMessage(msg);
}
gBrowser.newObj= new MyAddOn();
gBrowser.log("initializing...");
function regListener()
{
obSvc.addObserver(gBrowser.newObj, "http-on-modify-request", false);
}
function unregListener()
{
obSvc.removeObserver(gBrowser.newObj, "http-on-modify-request");
}
window.addEventListener("load", regListener, false);
window.addEventListener("unload", unregListener, false);
]]>
This should attach listeners to the new obj (defined by a linked .js) However, I'm not even getting the "initializing..." message in the console. Any ideas?
Don't use <html:script>, use <script> (assuming you have xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" on your root <overlay> element).
Don't register an application-global listener (http-on-modify-request) from a window overlay. Doing so will make your code run one time in each window the user may have open. Use an XPCOM component instead - https://developer.mozilla.org/en/Setting_HTTP_request_headers
Don't pollute common objects (like gBrowser or the global object (with var Cc)) with your own properties. If everyone did that, no two extensions would work together. Put all your code properties on your own object with a unique name.
accessing gBrowser before the load event is probably what's causing your specific problem.
Set up your environment and check the Error Console to debug problems.
Don't waste time trying to support Firefox 3. It's not supported by Mozilla itself for over a year and shouldn't be used to access the web.
It looks like gBrowser.log is not defined, or at least is not a function, as the error console will probably tell you. I've never heard of it either. Maybe it was added in Fx 3.5?