In a polymer element I can bind a property like this:
<input type="text" value="{{value}}">
But if I create the html element dynamically in the script:
TextInputElement newElement = new TextInputElement();
How can I achieve the binding?
You can have a look at
Creating a dataList programatically
Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work
there was a similar question for Polymer.js recently with a simpler solution (Data binding for dynamically generated HTML in Polymer?) but I haven't seen anything similar for Polymer.dart yet.
I'll try to find something tomorrow, it's rather late here already ...
I created this issue http://dartbug.com/21029
This is fixed now with injectBoundHtml.
See also https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ for more details.
I use this workaround (polymer 0.15.5+4):
var template = new TemplateElement()
..setInnerHtml("<p>Reversed: {{ reversed }}</p>");
var fragment = this.instanceTemplate(template);
this.shadowRoot.append(fragment);
But it seems rather complex for me and i've not found more elegant solution for a while.
I feel confused by Günter's phrase "The used expressions must already be used somewhere so Smoke knows to generate code for them." from Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work thread. Can somebody from this thread light this moment?
Related
I've been tasked with creating a webapp using AngularDart. I'm new to Dart and therefore AngularDart also, but have worked through the tutorials at https://angulardart.org/tutorial/.
I've read similar SO questions/answers (How to access a AngularDart components attribute (NgOneWay) outside of the component, eg. on the page it is in?) but given my limited knowledge I don't fully understand how to implement Brian's suggestion - or if indeed it relates to my question! Am I also right in thinking that Vink's suggestion is now irrelevant as #Controller's are now deprecated?
In short, I'm trying to figure out if the following is in fact achievable:
create a top-level <custom-component/> complete with attributes;
within <ng-view/> - and therefore nested components - access <custom-component/>'s attributes. More specifically, bind/listen for changes to these attributes and act accordingly.
For example, given the following
<body>
<custom-component att1="val1" att2="val2"></custom-component>
<ng-view></ng-view>
</body>
and on the assumption that <ng-view/> renders the following markup
<div>
...
<other-component att1="{{customComponent.att1}}" att2="{{customComponent.att2}}"></other-component>
<another-component att1="{{customComponent.att1}}" att2="{{customComponent.att2}}"></another-component>
...
</div>
is it possible to bind customComponent.<<attributeName>> to <other-component/> and <another-component/>?
Or, as is likely, am I misunderstanding the use of AngularDart's #Component/#Decorator?
Should the #att1 and #att2 attributes be moved from <custom-component/> to <ng-view/>?
Alternatively, should I look to architect a different solution altogether? My ultimate goal in this instance is to provide the user with att1/att2 select boxes (from yet another component) which in turn determine the rendered content within each of <other-component/> and <another-component/>.
Any and all suggestions welcome, I won't be offended if you dismiss any/all of the above!!!
My current development environment is as follows:
Dart SDK version 1.9.0-dev.8.0
angular 1.0.0
Many thanks, J
What you can do is to move the two components into the content(template) of a wrapper component and bind attributes of both components to fields of the wrapper element.
Usually a better way is to use events like shown in How to communicate between Angular DART controllers or Angular Dart component events (controllers have been merged with components since then)
Once I switch my context to the DOM of the webview, I want to be able to search those elements by tag, but I get the error that searching by tag is deprecated and to search by class instead. This won't work to find DOM elements by tag. Is there still a way to do it? Thanks!
As per Appium documentation for migrating to 1.0:
We've removed the following locator strategies:
-name
-tag name
... tag name has been replaced by class name. So to find an element by its
UI type, use the class name locator strategy for your client.
Why searching by tag name?
Although Selenium still supports this type of query, Appium decided not to do anymore. Actually when interacting with the device, searching by tag name is very inefficient.
Why would you want to do that? Think about it, if your page has a bit of content, you will end up having many p, div, span tags. Your search will return many elements and then you will have to go thorugh the list and locate the one you are interested in. If your page is very little, then you will probably end up with one tag of the type you are looking for, however why not applying a class and solve the problem?
Classes are not for CSS style
Remember that HTML attribute class was not introduced by W3C for applying CSS style. It is used to provide an element with more informationa bout its purpose in the DOM. When you apply a class to an element, you should do that basing on the role that element holds! Thus locating an element by class is sure better.
So forget searching by tag name. You should change your strategy and apply class names to your tags in your hybrid app. If you do not want to do so, then do not switch to the new version of Appium but this will keep you far from future innovations!
Migrating from a tagname based element location to a class name
orientd one is good practice. That's why you should change too.
maybe this can help
element.getAttribute("class")
I am attempting to build a small proof-of-concept web application using the web2py framework. I'm so close, but my basic lack of knowledge of what's going on means I'm just hacking at it with pure guesswork rather than understanding what's going on. I was hoping someone on here could explain where I am going wrong...
The functionality I'm after is that the data needed to create the draggable items is held in a database table (and will ultimately form a hierarchy) with as little information held in the HTML as possible.
There's a fair bit of information for just about everything in this stack, so much so that I'm drowning in it, I don't know where to start. I suppose I should begin with what I've got so far...
The HTML:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
...
<script>
$(document).ready(function(){
$.ajax( {
type: "POST",
url: 'dragndrop.py',
success: function( response ) {
$("#draggable7").html(response);
}
} )
});
</script>
<div id="draggable7"></div>
The dragndrop.py script:
## My main draggable spawner
selected = [row.id for row in db(db.t_user_shop_layouts.id==7).select()]
return ''.join([DIV('draggable'.join(k), _class='draggable ui-widget-content', _snap=".ui-widget-header", _snapMode= "inner", _grid= [ 80, 80 ], _style='position: relative;') for k in selected])
And, just for completeness, the model web2py script (although the column I'm interested in is the "id" column, which is auto-generated):
db.define_table('t_shop_layout_items',
Field('f_item_display_name_string', type='string', notnull=True,
label=T('Item Display Name String')),
Field('f_item_icon_file', type='upload',
label=T('Item Icon File')),
Field('f_item_parent_id', type='integer',
label=T('Item Parent Id')),
auth.signature,
format='%(f_item_display_name_string)s',
migrate=settings.migrate)
I'm forcing the db call to only pick up one row at the moment (id == 7) just to get the ball rolling, but eventually what I'd like to do is have the (db.id == db.f_item_parent_id) items shown first. Then when double-click, any (db.f_item_parent_id == this.id) children get spawned using helpers. Then I'm going to get an 80x80 grid size target to land on to set shop layout, and save to db. But all this paragraph is for later, I'm just giving you an idea of where I'm going with it.
Finally, some great tutorials that have helped me along the way, but were either not web2py (PHP seems popular for this) or not dynamically spawning (but hard-coded in the HTML, or what-have-you. If I've missed something obvious, please let me know:
An excellent fiddle: http://jsfiddle.net/robertrozas/qLhke/25/ and its stack overflow beginnings Jquery drag drop form hidden value inserting into php mysql
The web2py documentation: http://web2py.com/books/default/chapter/34/11/jquery-and-ajax
OK, hope that's enough! Any help would be appreciated!
In web2py, you do not create .py files and then use them as URLs. Instead, you create functions in controllers and have URLs of the form /appname/controller/function. See the documentation on dispatching. It is also best to use the built-in URL() function to generate URLs. Also, this should probably be a GET request rather than POST.
You might also want to look into web2py's built-in ajax() function as well as Ajax components.
Regarding your data model, if the f_item_parent_id field is a self reference, then you should define it as a reference field (i.e., type='reference t_shop_layout_items').
More generally, before proceeding further, it will probably be very helpful if you read more of the documentation, particularly chapters 4, 5, 11, and possibly 12.
I am trying to get databinding to work in dart. Basically im doing the same as in this video. Using pseudo code it looks like this:
mdv.init();
var p = new Person('john');
query('#someId').model = p;
In the html file i also have a template which works correctly. For now i am only trying to get one way databinding to work and although the template is correctly initialized, subsequent changes to the variable p are not visible in the template. I tried to trigger an update like this
node.model = null;
node.model = p;
This does not trigger an update however. But if i'm using a delay it does work:
node.model = null;
new Timer(new Duration(milliseconds:20),(){
node.model = p;
});
So i have a couple of questions about this:
Why does a change in the variable not reflect a change in the template ?
Is the template not supposed to update the way i'm doing it? Or is mdv/polymer not working the way it is intended?
Is it possible manually trigger an update of the template?
Would it be possible to easily convert one-way to two-way databinding (i.e. by making the Person class in the psuedocode observable or something)?
PS i searched and tried several things before posting here. I found a topic in which a custom polymer element is created, which seems more of an hassle then i would like it to be. I also tried the fancy-syntax lib (this did't improve it) and databinder (compile error). I also read a couple of pages about polymer, but i'm not sure what is relevant to dart and has not been deprecated (or 'stale' as the warning above the page mentions).
You need one of the following packages, to update bindings automatically on change.
mdv_observe
observe
documentation (Observables)
I would still recommend you to just add "polymer" as a dependency (remove mdv) to your pubspec.yaml. This way you won't have to handle version issues and you would have a guarantee of a "confirmed" set of packages working together.
Tagsoup is interfering with input and formatting it incorrectly. For instance when we have the following markup
Text outside anchor
It is formatted as follows
Text outside anchor
This is a simple example but we have other issues as well. So we made tagsoup cleanup/formatting optional by adding an extra attribute to textarea control.
Here is the diff(https://github.com/binnyg/orbeon-forms/commit/044c29e32ce36e5b391abfc782ee44f0354bddd3).
Textarea would now look like this
<textarea skip-cleanmarkup="true" mediatype="text/html" />
Two questions
Is this the right approach?
If I provide a patch can it make it to orbeon codebase?
Thanks
BinnyG
Erik, Alex, et al
I think there are two questions here:
The first Concern is a question of Tag Soup and the clean up that happens OOTB: Empty tags are converted to singleton tags which when consumed/sent to the client browser as markup gets "fixed" by browsers like firefox but because of the loss of precision they do the wrong thing.
Turning off this clean up helps in this case but for this issue alone is not really the right answer because we it takes away a security feature and a well-formed markup feature... so there may need to be some adjustment to the handling of at least certain empty tags (other than turning them in to invalid singleton tags.)
All this brings us to the second concern which is do we always want those features in play? Our use-case says no. We want the user to be able to spit out whatever markup they want, invalid or not. We're not putting the form in an app that needs to protect the user from cross script coding, we're building a tool that lets users edit web pages -- hence we have turned off the clean-up.
But turning off cleanup wholesale? Well it's important that we can do it if that's what our usecase calls for but the implementation we have is all or nothing. It would be nice to be able to define strategies for cleanup. Make that function plug-able. For example:
* In the XML Config of the system define a "map" of config names to class names which implement the a given strategy. In the XForm Def the author would specify the name from the map.
If TagSoup transforms:
Text outside anchor
Into:
Text outside anchor
Wouldn't that be bug in TagSoup? If that was the case, then I'd say that it is better to fix this issue rather than disable TagSoup. But, it isn't a bug in TagSoup; here is what seems to be happening. Say the browsers sends the following to the client:
<a shape="rect"></a>After<br clear="none">
This goes through TagSoup, the result goes through the XSLT clean-up code, and the following is sent to the browser:
<a shape="rect"/>After<br clear="none"/>
The issue is on the browser, which transforms this into:
<a shape="rect">After</a><br clear="none"/>
The problem is that we serialize this as XML with Dom4jUtils.domToString(cleanedDocument), while it would be more prudent to serialize it as HTML. Here we could use the Saxon serializer. It is also used from HTMLSerializer. Maybe you can try changing this code to use it instead of using Dom4jUtils.domToString(). You'll let us know what you find when a get a chance to do that.
Binesh and I agree, if there is a bug it would be a good idea to address the issue closer to the root. But I think the specific issue he is only part of the matter.
We're thinking it would be best to have some kind of name-to-strategy mapping so that RTEs can call in the server-side processing that is right for them or the default if it's not specified.