I'm using dart to develop an app and i want to get the value of a clicked element. I.e:
Html:
<div id="blah">Value!!</div>
Dart:
void main(){
query("#blah").onClick.listen(showValue);
}
void showValue(Event e){
//Get #blah's innerHtml based on the Event(Something like e.target.innerHtml or e.target.value)
}
Anyone? I know how to do it in JS, but I want to know if there's a way to do it in DART!
Edit
Thanks to all of you, I'll try to be a little bit more clear. I have a loop that generates 9 elements dynamically and add them to a container.
Code:
var j = 0;
var optionsSquare = query("#optionsPanel");
while(j < 9){
DivElement minorSquare = new DivElement();
var minorSquareHeight = optionsSquare.clientHeight/3;
var minorSquareWidth = optionsSquare.clientWidth/3;
minorSquare
..attributes = {"class": "miniSugg"}
..style.width = (minorSquareWidth.round()-2).toString().concat("px")
..style.height = (minorSquareHeight.round()-2).toString().concat("px")
..style.float = "left"
..style.border = "1px solid"
..innerHtml = (j+1).toString();
..onClick.listen(showOptionsSquare);
optionsSquare.children.add(minorSquare);
j++;
}
If I try using #Pandian's way, it works, but I only get the value of the last element inside the loop. What I want is to somehow, track down the element clicked and get its value!
EDIT 2
Guys, just solved it!
I'll let the code here as a repo if someone needs this information:
void showOptionsSquare(Event e){
window.location.hash = "#optionsPanel";
mainDiv.style.opacity = (0.2).toString();
DivElement clicked = e.target;
window.alert(clicked.innerHtml);
}
[]'s
Using your example code you could just write
print(e.target.innerHtml);
inside of your showValue function and it would work. Do you get an error or something? If you are worried about the warning you could add a cast to Element or DivElement:
print((e.target as Element).innerHtml);
Try like below... it will help you...
DivElement div;
void showValue(){
window.alert(div.innerHTML);
}
void main() {
div = query('#blah');
div.on.click.add((Event e) => showValue());
}
Related
I came through DART custom elements, from dartlang.org site, here and here.
If I understood correctly,this is a vanilla DART custom element, not related to Polymer custom tags.
I wrote the below code,
class CustomElement extends HtmlElement {
factory CustomElement() => new Element.tag('x-custom');
CustomElement.created() : super.created() {
print('CustomElement created!');
}
}
void main() {
document.registerElement('x-custom', CustomElement);
}
and got the "CustomElement created!" statement printed in the console, which means the element had been created!
my question is, what else? how can I use this customs element, and what can I do with it can I write HTML template, if yes, how?
I read this but unfortunately could not how to do same with DART.
any thoughts!
This is also used by Polymer. Polymer is just the combination of Custom Element, HTML Imports, Template, Polymer, Polyfills and some builerplate to connect these parts and provider a nice API.
If you want to reinvent the wheel you can go with CustomElement alone.
Change your main to
void main() {
document.registerElement('x-custom', CustomElement);
var elem = new Element.tag('x-element');
elem.appendText('x-element');
document.body.append(elem);
elem.onClick.listen((e) {
print('clicked');
});
}
and you can react to click events
I was ableto write the below, which had been worked, feel I did it the long way,
I could not use the tag
Not sure if the way I used to callback the elements in the custumElement in the correct way, as I was forced to use .append for all the items, and not sure if there is an easier way to do it.
my index.html file is
pick a color:<input type="color" name="colorname" id="colorname"> the color you selected is: <output id="picked-color"></output> click it !
<div id='my-element'></div>
my index.dart file is:
import 'dart:html';
class CustomElement extends HtmlElement {
factory CustomElement() => new Element.tag('x-custom');
CustomElement.created() : super.created() { }
Element launchElement(Element o1){
o1.onClick.listen((e) => window.alert('the input color is: ${o1.text}'));
print('CustomElement created!');
var output = new Element.html('<div></div>');
var statement = new Element.html('<div></div>');
var bind = new Element.html('<div></div>')
..text='this text will be dynamically replaced by what you are entering down';
var input = new InputElement()
..id ='input'
..type ='text'
..placeholder='enter data here';
input.onInput.listen((e) => bind.text=input.value);
var element = new Element.html('<span>content: </span>')
..style.color='red';
var button = new ButtonElement()
..id = 'awesome'
..classes.add('important')
..onClick.listen((e) => pop(input.value)) // "Hi There!!!")
..text = 'Click Me man!'
..style.color='orange';
statement.innerHtml="<b>I'm an x-custom-with-markup!</b> ";
output.node..add(statement)..add(bind)..add(input)..add(element)..add(button);
return (output);
}
var button1 = new ButtonElement()
..id = 'awesome2'
..text = 'External Click Me man!';
void pop(i){ window.alert("input is: $i"); }
}
void main() {
document.registerElement('x-custom', CustomElement);
var xFoo = new Element.tag('x-custom');
InputElement colorname = querySelector('#colorname');
Element theColor = querySelector('#picked-color');
xFoo = xFoo.launchElement(theColor);
theColor.text = colorname.value;
Element myDiv=querySelector('#my-element');
myDiv.children.add(xFoo);
colorname.onInput.listen((Event e) {
theColor.text = colorname.value;
});
}
Not available now
document.registerElement is deprecated: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/registerElement
window.customElements.define with Dart is blocked by https://github.com/dart-lang/sdk/issues/35829
I want to do the ill-advised and place both an onClick and onDoubleClick on the same element with each type of event resulting in a different action. Specifically on an image, click to advance to the next image, double-click to toggle fullscreen.
Naturally I get two clicks followed by a double-click (though I understand that some browsers only fire one click before the double-click).
I had thought to make it easy on myself and place each event into a buffer (List) - or rather to add the event.type string to a list, then, after a suitable elapse of time, say 250 or 300 milliseconds examine the last item in the buffer and if doubleclick then go fullscreen else advance the length of the list.
I have found that the list only ever has one item, and I have not worked out how to get the timer to work..
Amongst my attempts was this one:
void catchClickEvents(Event e) {
var eventTypes = new List<String>();
eventTypes.add(e.type);
Duration duration = const Duration(milliseconds: 300);
var timeout = new Timer(duration, () => processEvents(eventTypes));
}
void processEvents(List eTypes) {
// just to see what is going on...
print(eTypes);
}
this results in this output printed to the console:
[click]
[click]
[dblclick]
rather than
[click, click, dblclick]
If I slow it down there is a clear delay before those three event types are printed together
So...
The bigger question is
'What is the darty way to distiguish between single and double-click and perform a different action for each?'
The other questions are:
How do I fill a buffer with successive events (and later clear it down) - or even how do I use Dart's Stream of events as a buffer...
What is the real way timeout before examining the contents of the buffer?
(and I guess the final question is 'should I abandon the effort and settle for a conventional set of buttons with glyph-icons?'!)
I'm not sure if IE still has the event sequence explained here (no 2nd click event)
https://stackoverflow.com/a/5511527/217408
If yes you can use a slightly deviated variant of Roberts solution:
library app_element;
import 'dart:html' as dom;
import 'dart:async' as async;
Duration dblClickDelay = new Duration(milliseconds: 500);
async.Timer clickTimer;
void clickHandler(dom.MouseEvent e, [bool forReal = false]) {
if(clickTimer == null) {
clickTimer = new async.Timer(dblClickDelay, () {
clickHandler(e, true);
clickTimer = null;
});
} else if(forReal){
print('click');
}
}
void dblClickHandler(dom.MouseEvent e) {
if(clickTimer != null) {
clickTimer.cancel();
clickTimer = null;
}
print('doubleClick');
}
void main() {
dom.querySelector('button')
..onClick.listen(clickHandler)
..onDoubleClick.listen(dblClickHandler);
}
or just use Roberts solution with the mouseUp event instead of the click event.
The problem is that your variable is not global.
var eventTypes = new List<String>();
void catchClickEvents(Event e) {
eventTypes.add(e.type);
Duration duration = const Duration(milliseconds: 300);
var timeout = new Timer(duration, () => processEvents(eventTypes));
}
void processEvents(List eTypes) {
print(eTypes);
}
There also is e.detail that should return the number of the click. You can use that, if you don't need the Internet Explorer. The problem with your list is that it grows and never gets cleared.
Let's take into account what we know: You get click events and at somepoint you have doubleclicks.
You could use a click counter here. (Or use e.detail) to skip the second click event. So you only have click and dblclick.
Now when you get a click event, you create a new timer like you did before and run the click action. If you get the dblclick event you simply run you action. This could like this:
DivElement div = querySelector('#div');
Timer timeout = null;
div.onClick.listen((MouseEvent e) {
if(e.detail >= 2) {
e.preventDefault();
} else {
if(timeout != null) {
timeout.cancel();
}
timeout = new Timer(new Duration(milliseconds: 150), () => print('click'));
}
});
div.onDoubleClick.listen((MouseEvent e) {
if(timeout != null) {
timeout.cancel();
timeout = null;
}
print('dblclick');
});
This is the example code that works for me. If you can't rely on e.detail just us a counter and reset it after some ms after a click event.
I hope this helps you.
Regards, Robert
Your page should react on user inputs as fast as possible. If you wait to confirm double click - your onClick will become much less responsive. You can hide the problem by changing visual state of the element(for example, playing animation) after first click but it can confuse user. And it gets even worse with handheld. Also if element has to react only on onClick event, you can "cheat" and listen to onmousedown instead - it will make your UI much more responsive.
On top of all this, double click, from client to client, may have noticeably different trigger time interval and it isn't intuitive, for user, that you can double click something. You will have to bloat your interface with unnecessary hints.
edit: Added my solution. It should be fairly extensible and future proof.
import 'dart:html';
import 'dart:async';
import 'dart:math';
//enum. Kinda... https://code.google.com/p/dart/issues/detail?id=88
class UIAction {
static const NEXT = const UIAction._(0);
static const FULLSCREEN = const UIAction._(1);
static const ERROR = const UIAction._(2);
final int value;
const UIAction._(this.value);
}
/**
*[UIEventToUIAction] transforms UIEvents into corresponding UIActions.
*/
class UIEventToUIAction implements StreamTransformer<UIEvent, UIAction> {
/**
* I use "guesstimate" value for [doubleClickInterval] but you can calculate
* comfortable value for the user from his/her previous activity.
*/
final Duration doubleClickInterval = const Duration(milliseconds: 400);
final StreamController<UIAction> st = new StreamController();
Stream<UIAction> bind(Stream<UIEvent> originalStream) {
int t1 = 0,
t2 = 0;
bool isOdd = true;
Duration deltaTime;
originalStream.timeout(doubleClickInterval, onTimeout: (_) {
if ((deltaTime != null) && (deltaTime >= doubleClickInterval)) {
st.add(UIAction.NEXT);
}
}).forEach((UIEvent uiEvent) {
isOdd ? t1 = uiEvent.timeStamp : t2 = uiEvent.timeStamp;
deltaTime = new Duration(milliseconds: (t1 - t2).abs());
if (deltaTime < doubleClickInterval) st.add(UIAction.FULLSCREEN);
isOdd = !isOdd;
});
return st.stream;
}
}
void main() {
//Eagerly perform time consuming tasks to decrease the input latency.
Future NextImageLoaded;
Future LargeImageLoaded;
element.onMouseDown.forEach((_) {
NextImageLoaded = asyncActionStub(
"load next image. Returns completed future if already loaded");
LargeImageLoaded = asyncActionStub(
"load large version of active image to show in fullscreen mode."
"Returns completed future if already loaded");
});
Stream<UIEvent> userInputs = element.onClick as Stream<UIEvent>;
userInputs.transform(new UIEventToUIAction()).forEach((action) {
switch (action) {
case UIAction.FULLSCREEN:
LargeImageLoaded.then( (_) =>asyncActionStub("fullscreen mode") )
.then((_) => print("'full screen' finished"));
break;
case UIAction.NEXT:
NextImageLoaded.then( (_) =>asyncActionStub("next image") )
.then((_) => print("'next image' finished"));
break;
default:
asyncActionStub("???");
}
});
}
final DivElement element = querySelector("#element");
final Random rng = new Random();
final Set performed = new Set();
/**
*[asyncActionStub] Pretends to asynchronously do something usefull.
* Also pretends to use cache.
*/
Future asyncActionStub(String msg) {
if (performed.contains(msg)) {
return new Future.delayed(const Duration(milliseconds: 0));
}
print(msg);
return new Future.delayed(
new Duration(milliseconds: rng.nextInt(300)),
() => performed.add(msg));
}
I want to check if the textboxes created like this:
(function(arr) {
for (var i = 0; i < arr.length; i++) {
app.add(app.createLabel(arr[i] + " mail"));
app.add(app.createTextBox().setName(arr[i]));
}
})(["first", "second", "third"]);
have the same contents? I was looking for something like getElementByTagname or or getTextboxes, but there are no such functions.
So how to iterate thvrough them and show a label if they are all equal?
To access any widget values you need to add them as a callback element (or a parent panel) to the server handler that will process them. The values of each widget are populated on a parameter passed to the handler function and can be referenced by the widget name (that you already set).
You don't need to setId as suggested on another answer. Unless you want to do something with the widget itself (and not its value). e.g. change its text or hide it, etc.
var textBoxes = ["first", "second", "third"];
function example() {
var app = UiApp.createApplication().setTitle('Test');
var panel = app.createVerticalPanel();
textBoxes.forEach(function(name){
panel.add(app.createLabel(name + " mail"));
panel.add(app.createTextBox().setName(name));
});
panel.add(app.createLabel('Example Label').setId('label').setVisible(false));
var handler = app.createServerHandler('btnHandler').addCallbackElement(panel);
panel.add(app.createButton('Click').addClickHandler(handler));
SpreadsheetApp.getActive().show(app.add(panel));
}
function btnHandler(e) {
var app = UiApp.getActiveApplication(),
allEqual = true;
for( var i = 1; i < textBoxes.length; ++i )
if( e.parameter[textBoxes[i-1]] !== e.parameter[textBoxes[i]] ) {
allEqual = false; break;
}
app.getElementById('label').setVisible(allEqual);
return app;
}
Notice that ServerHandlers do not run instantly, so it may take a few seconds for the label to show or hide after you click the button.
When you create the textboxes, assign each one an id using setId(id).
When you want to obtain their reference later, you can then use getElementById(id).
Here is an example:
function doGet() {
var app = UiApp.createApplication();
app.add(app.createTextBox().setId("tb1").setText("the original text"));
app.add(app.createButton().setText("Change textbox").addClickHandler(app.createServerHandler("myHandler")));
return app;
}
function myHandler() {
var app = UiApp.getActiveApplication();
app.getElementById("tb1").setText("new text: in handler");
return app;
}
yesterday i asked one question and got the answer from our friend here, and i ran successfully, also it have one problem with it. "Yester day My question is, when we selecting the drop down list then it should be shown by a label as "1" at very first time, again it'll be increas by selection", this is what the answer i got..,
static int count = 0;
private void bind()
{
ArrayList ar = new ArrayList();
ar.Add("first");
ar.Add("Second");
ar.Add("Third");
ar.Add("Four");
ar.Add("Five");
ar.Add("Six");
ar.Add("Seven");
CCddl.DataSource = ar;
CCddl.DataBind();
}
protected void CCddl_SelectedIndexChanged(object sender, EventArgs e)
{
if (count == 0) count = 1;
Label12.Text = count++.ToString();
}
this code worked, but once the running window getting closed, then it lose the continuation, i mean again application getting run it'll shown again "1". But exactly what i want is, the number continuation should be end when the system day has change.
Try using the Application Settings feature. I added two user settings CountDate and Count in the Project->Property's->Settings and changed your SelectedIndexChangedEvent to
protected void CCddl_SelectedIndexChanged(object sender, EventArgs e)
{
if (count == 0) count = 1;
Label12.Text = count++.ToString();
Properties.Settings.Default.CountDate = DateTime.Now.Date;
Properties.Settings.Default.Count = count;
Properties.Settings.Default.Save();
}
And right before you call your Bind Method during your form initialization put something like this.
if(Properties.Settings.Default.CountDate.Date != DateTime.Now.Date)
{
Properties.Settings.Default.Count = 0;
Properties.Settings.Default.CountDate = DateTime.Now.Date;
Properties.Settings.Default.Save();
}
else
count = Properties.Settings.Default.Count;
bind();
Added the Property Settings Image
You should somehow store the value in a database or something. With the date value. Then when the datechanges you just reset the value.
I want to select all items in a listfield at a time when cliking on the select all menu item in the application.i tried with my code like this..
selectall = new MenuItem("Selectall", 200, 10){
public void run(){
int elementLength = _elements.length;
for(int count = 0; count < elementLength; ++count)
{
_listData.addElement(new ChecklistData(_elements[count], true));
listField.insert(count);
}
}
};
but iam getting the result with old list also.below the old list this new list is coming with checked.how to solve that.please give your ideas.and where iam doing the mistake.thanks in advance..
Your use of listField.insert means that you're adding new ChecklistData objects to the list. That's why you're getting a completely new list underneath your previous one. Instead of adding to _listData, go through it and set the ChecklistData to be checked.
It looks like that is a custom class, so I don't know what it will take for you to do that. If you used CheckboxFields in _listData, you could do it like this:
for (Enumeration e = _listdata.elements() ; e.hasMoreElements() ;) {
CheckboxField c = (CheckboxField)e.nextElement();
c.setChecked(true);
}
Thanks for your all suggestions. i solved my problem now..the solution is..
selectall = new MenuItem("Selectall", 200, 10){
public void run(){
int elementLength = _elements.length;
for(int count = 0; count < elementLength; ++count)
{
_listData.setElementAt(new ChecklistData(_elements[count], true), count);
}
}
};