I would like to know how can I build a clock (date and current time) using Dart. I'll be binding the resulting observable string (so it refreshes automatically) to an HTML Polymer element.
I thought about using a timer to refresh the string using DateTime.now(), but this seems to be a workaround, not the best solution.
I just need to know how to code the dart file, since the HTML and Polymer elements are already configured.
You might take a look at this example
https://github.com/bwu-dart/polymer_ui_elements/blob/master/example/polymer_ui_clock.html
https://github.com/bwu-dart/polymer_ui_elements/blob/master/lib/polymer_ui_clock/polymer_ui_clock.dart
It needs a little tweaking to work with the current Polymer version.
var oneSecond = new Duration(seconds: 1);
_timer = new Timer.periodic(oneSecond, updateTime);
updateTime is a method called every second.
Related
I am developing jira and using variables in velocity, which are exposed as public getters in java plugin code. Everything seems good, I am getting my java code results in output.vm inside velocity template after processing excel file but I would like to add progressbar which is coded in pure javascript, so I have some js files and I would like to get velocity variables like current number of processed issue, and
how many issues are there to calculate progress. I can't bring solution because when
I am attaching <script> inside velocity .vm and alerting after timeouted function
the variable issueNumber is not changing at all, its 0. issueNumber is public instance variable in java.
<script>
function test() {
var get = $issueNumber;
alert(get);
}
setTimeout(test, 5000);
test();
</script>
My public variable issueNumber can be rendered in velocity as result after iterating in output velocity file, but can't be used as indicator in javascript where current progress is. Basically I need runtime variable not render time variable.
The velocity engine just replaces $issueNumber with the constant value during html page rendering and it happens only once so it is impossible to track any changes in that way. To achieve what you want you can implement an endpoint on the server-side which returns the actual state of the progress and do ajax calls to it in your script with some interval.
In my Dart based application I just noticed that I can omit the new keyword and everything works perfectly fine.
Instead of final widget = new Widget(); I can also use final widget = Widget();.
Does this have any effect in code?
No, it does not. With Dart 2 (click for the announcement with more information) the new and also const keywords were made optional.
This means that new Widget() does the exact same as Widget() on its own.
The const keyword can, however, change a value that would not be a const implicitly to a const.
So you will have to explicitly specify const when needed.
In Dart 2, if you invoke a constructor like a function, without a new or const in front, then it is equivalent to using new.
If you want a const invocation, then you should put const in front.
Inside a const expression, you don't need to write const again, and in some contexts that require const expressions (like switch case expressions and initializers of const variables), you don't even need the outer const.
So you don't ever need to write new.
Dart language team wants to allow expressions where you can insert either new or const and still have the invocation be correct (that is, a const constructor with constant arguments) to default to inserting const instead of new, hopefully in an early update to Dart 2.
For that reason, I recommend writing new it in front of Object(), or any other const constructor where you need the object to be a new instance. That's a very rare case, usually you don't care about the identity of your immutable object (which is why inserting const is considered a good idea). (That plan didn't pan out, so you can ignore this.)
The new keyword was made optional in Dart 2. As of now, calling a class will always return a new instance of that class. As per my recommendation, you can use it (NOT MANDATORY) outside of a Layout definition, but omit in inside Layouts.
One more point which I would like to share with you guys is that if you use new or const keyword while declaring widgets, you are also able to see the + icon which you can use to collapse and expand the widget body code. This is useful when you want to collapse/hide the rest widget code in dart file while working on another widget code in the same file.
Once again, a Dart/Polymer related question.
I wanted to use the Parse.com JavaScript library, but since it's not available in Dart I've written Wrapper classes which store a JsObject and delegate all calls from Dart to the corresponding JavaScript object. Basically it's like a proxy.
Guess what, it works pretty great.
However, my observables don't. To understand this, you have to take a look at the following structure of one of my "proxy"-classes.
class ParseObject extends Observable {
JsObject _jsDelegate = new JsObject(context['Parse']['ParseObject']);
void set(String key, dynamic value) {
_jsDelegate.callMethod('set', [key, jsify(value)];
}
dynamic get(String key) {
return dartify(_jsDelegate.callMethod('get', [key]));
}
}
The HTML code of my Polymer Element looks like this:
<div>Name: {{project.get('name')}}</div>
Since the data binding is only evaluate in case the parameter of the method changed, it will never be updated and thus even though the name is changed, the old one will stay in place.
The solution I came up with is to store all the values the user is setting in the ParseObject#set(String, dynamic) method into a Map which is observable. This works but I think it's quiete dirty since I have to make sure that both Maps, the one in Dart and the one in the ParseObject's JavaScript representation equal.
Thus I am looking for a better solution and I think of some kind of method to tell Polymer to reevaluate it's data bindings.
Does such a method exist or are there any other possibilities to address this problem?
Extending observable by itself does nothing yet.
You need to annotate the getters with #observable (and if you are not using Polymer, you also need to add the observable transformer to pubspec.yaml). You can't make functions observable (this works in Polymer elements but not in Observable model classes. For more details about observable see for example Implement an Observer pattern in Dart or Dart: #observable of getters
I'm looking for a way to use a handler function to respond to changes to an observable collection in Dart. I want to pipe my change directly to a function.
List things = toObservable([]);
//...
things.onChange.listen((e) => onThingsChanged(e) ); //blows up
//...
function onThingsChanged(e){
//...
}
There obviously isn't such thing as onChange, so what am I looking for here? All the examples I find are just watching the changes with a <template> tag in the HTML.
There is a good (official) article about Observables and Data Binding with Web UI. I think it is still under construction and thus there are no links on the dartlang.org website yet.
The part that answers your question is: Expression Observers
You can do something like this:
List things = toObservable([]);
observe(() => things, onThingsChanged);
onThingsChanged(ChangeNotification e) {
// ...
}
Few additions to Marco's answer which might not be obvious.
Besides observe which takes an expression, you can also use observeChanges which takes an instance of Observable, so you can write observeChanges(things, (c) => ...).
More important is the fact that if you use ObservableList outside of Web UI context (e.g. in a standalone script), the changes will not be triggered immediately. Instead, changes are queued and you need to call deliverChangesSync to trigger the notifications. The listener will then get notified with list of changes.
In C# we have CultureInfo which affects the way ToString() works for dates and numbers
eg. you can set CurrentCulture by doing:
Thread.CurrentThread.CurrentCulture = new CultureInfo("pl-PL");;
Is there any equivalent for the above in dart?
EDIT:
Short answer is: use intl package (thanks to all for answers)
As Alan Knight pointed below setting locale "by thread" does not make sense in Dart since we do not control threads explicite.
At the moment i write this NumberFormating is work in progress as far as i understand it
The intl library will offer you this, although it doesn't affect the behavior of toString().
Here's an example:
Add as a dependency to your pubspec.yaml:
dependencies:
intl: any # You might specify some version instead of _any_
Then a code sample:
import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';
main() {
initializeDateFormatting("en_US", null).then((_) {
var formatter = new DateFormat.yMd().add_Hm();
print(formatter.format(new DateTime.now()));
});
}
The output looks like this:
07/10/1996 12:08 PM
Yes, as per the previous entry the Intl library is what you want. You can set the default locale, or use the withLocale method to set it within a function. Setting it by thread doesn't work, as there are no threads. The other major difference is that, since this is all downloaded into the browser, you don't automatically have all the locale data available, but have to go through an async initialization step to load the data. That will probably be switched over to use the new lazy loading features soon.
Also, the locale doesn't affect the system toString() operation but rather you have to use a DateFormat object to print the date. And as it's still work in progress, NumberFormat doesn't work properly for locales yet, but should soon.
http://api.dartlang.org/docs/releases/latest/intl/Intl.html
From the page:
The Intl class provides a common entry point for internationalization related tasks.