Is there any easy way to access the associated element object of an element declared in your template. For instance say I have a button on my template and I want to access the ButtonElement object so I can manipulate it programmatically.
I appreciate I could give it an ID and query for it onInsert. Is this the best practise? If so how do I stop the ID's not being unique if multiple instances of the component are used or is the query restricted to the Shadow DOM?
I appreciate I could give it an ID and query for it onInsert. Is this the best practise?
It's not if you have multiple of them (as you realized). Duplicate ID's do not only happen when used multiple times in the same component, but also if the component is inserted multiple times to the page.
You can always go with traditional classes:
...
<template>
<div class="some-part-of-your-component">foo</div>
</template>
...
DivElement somePart;
inserted() {
somePart = _root.query('.some-part-of-your-component');
}
Related
Working on a project that will display hierarchies of "tasks". I'm running into a problem where it will not allow for multiple entries of the same object. From what I can tell, the "duplicate" item is under a different parent.
The domain data allows for this - a given task may appear in lots of places.
It would seem that this is intentional (maybe), but is there a way around this?
It's intentional to a degree; each Grid and TreeGrid data item is expected to be unique. You could work around this by creating your own implementation of the hierarchical DataProvider class (for example extend AbstractHierarchicalDataProvider) which overrides the getId method along with the other required methods. The return value of this method needs to be unique per item, as it's used as a hash key.
Well, this is probably not the best solution, but it works.
I added a field to the abstract super class that is initialized with the current time (long ms). When I am adding items to the tree grid, I check to see if the tree contains the item and if so, I randomize the field and then add it. The new field is marked #Transient so it's not persisted.
How do I remove a row from a container/item/grid/db/entity/bean/class/object/ID?
Also, what's the difference between all these?
Everyone seems to say these as if they were interchangeable.
Can I get a simple explanation of how these all work together?
I've been through dozens of youtube videos and tutorials, but I still can't see the big picture.
Simple task: Delete one row from a grid.
But then it starts getting bigger and more complex with nested beanitem container property field entities and I just can't make sense of it.
Thank you for all of your help in advance!
The Grid, Table or any other Vaadin Component used to present set of data use some implementation of the Container to store your data. A Component is a part of your User Interface, the <div> in your DOM which is seen by your end user. The Vaadin Containers contains your objects. The most widely used containers are:
IndexedContainer - default container for Grid and Table. You usually add items by calling addItem method on either container or related component. The disadvantage of using this type of container is that you are usually obligated to set appropriate properties (think of columns) on both items and the container itself,
BeanContainer - is able to receive Java objects that follows JavaBean convention. Thus it is able to automatically infer properties of your component,
SQLContainer - contains data stored in database. Constructed using SQL query. Can be setup to automatically update your database based on changes made by user in UI.
Items and IDs
Adding single items to some containers may look a bit complicated. There are a few ways to do this. They are described very well on a Vaadin website. Basically the ID is an unique object that you use to access corresponding Item. The Item is represents the single row in your component. Every Item have properties. You can access and make changes to your items in container using their IDs i.e.
table.getItem("uniqueId");
Usually, you don't operate directly on containers. The components expose basic Container interface methods via their API. In example implementation of AbstractSelect.getItem() component currently (Vaadin 7.5.9):
protected Container items;
public Item getItem(Object itemId) {
return items.getItem(itemId);
}
(AbstractSelect is a super class of other Vaadin components like Table and Grid)
It gets more complicated with properties of the items. Every Item have some properties (columns). And every Property has its corresponding ID. Using property ID you can access the value of the item in the specific column. The following code presents above - it adds one item with one property and sets its value:
Table table = new Table();
table.addContainerProperty("column1", String.class, "defaultValue");
Item item = table.addItem("uniqueId");
item.getItemProperty("column1").setValue("Black Friday");
Notice that it is perfectly safe to use String literals as IDs since underneath they are compared using equals()
I'm using appendHtml() in a loop to dynamically add li elements (with unique IDs in the string) to a ul. When I need to access these dynamically created li elements by their IDs to, for example, create nested lists, querySelector() returns null. If I should be able to do this, then there could very well be bugs in my code. But I want to make sure this is the case.
It doesn't matter how elements are added, if the are part of the DOM querySelector can find them.
I have a question that I have been unable to find a clear and concise answer to without extra unnecessary calls through Dart and Polymer.
I want to create a parent custom-element that is able to allow it's child objects to access the parents information.
Example:
If I create a container called Student-View that sets up some tabs and pulls the basic information. Then have a child element that is able to access much of the same information through {{firstname}} {{lastname}} etc...
I am not sure the best way to accomplish this, and would prefer if it were all self contained. Or, should I go the angular dart route. Thanks!
Your description is pretty vague. Do you mean something like this?
http://jsbin.com/kelub/5/edit
In this case, the parent binds the student record to the child element's student property, like so:
<student-worksheet student="{{student}}"></student-worksheet>
I'm trying to use a code which looks like :
<ice:dataTable id="revisionDocuments" value="#{agendaBean.agenda.revisionsDocuments}" var="revision">
<ice:column>
<ice:inputText value="#{revision.sequenceAdresse}" id="revisionSequenceAdresse#{revision.index}" />
</ice:column>
I'd like to have a different id for my form fields. The revision object do contains an "index" field, representing the index of the object in the List. I want to see it appears in the id. However, nothing happens. The #{revision.index} expression is never interpreted (getIndex() on the revision object is never called).
You'll tell me JSF already make something that looks like :
revisionDocuments:0:revisionSequenceAdresse
revisionDocuments:1:revisionSequenceAdresse
revisionDocuments:2:revisionSequenceAdresse
True, but this affect only the clientId generated in the HTML. The UIComponent representing the form fields (in the ViewRoot from FacesContext) have all the same "id" AND "clientId" (yes, event if the HTML contains "revisionDocuments:0:revisionSequenceAdresse", the "clientId" you will find in ViewRoot is revisionDocuments:revisionSequenceAdresse).
Someone can help with my try ?
Thank you very much, any help will be greatly appreciated.
The component IDs are to be determined during view build time, not during view render time. The #{revision} is not available during view build time, so it always evaluates empty. Basically, you need to bind it to #{agendaBean} or something else which is already in the scope during the view build time. The component ID is specific to the component itself, not to its generated HTML output. You can't assign multiple different IDs to physically the one and same component.
But you actually don't need to fiddle around this approach. Your concrete problem for which you thought that this is the solution is already answered in your previous question: JSF2 + IceFaces 2 - Retrieve UIComponent from ViewRoot.