I've a tree-view component (which uses a tree-view-item component) and I want to let the user to define the template of the items.
something like this (which would display "Item:" followed by the name in bold) :
<tree-view
[children]="folders"
childrenProperty="children">
<template>Item:<b>{{item.name}}</b></template>
</tree-view>
I can retrieve the TemplateRef using #ContentChild in the TreeView component class and access it from the TreeViewItem component but I've not found how to inject it into the dom of the item.
You can fin a Plunker on my tree-view component here : http://plnkr.co/edit/IMqKV4TrwHoiWfJKHHQn?p=preview
Is there a way to achieve this using Angular 2 ?
After lot of digging, I've found no way to achieve exactly what I wanted.
A workaround is to load (using DynamicComponentLoader) a given component (in input) for each item of the tree.
<tree-view
[children]="folders"
childrenProperty="children"
[itemComponentClass]="itemComponent">
</tree-view>
Where itemComponent is a reference to the class of the component (which have a template).
Not the better way but it's working : http://plnkr.co/edit/96IWGkw3owtUWfuG299V?p=preview
Related
I am trying to add more information to the price section in the cx-cart-item component:
cart entries
However, I don't see an outlet so that I can just attach the component "after" or "before" the price
How do I extend the render functionality? I am thinking:
copying and pasting the html and ts to just "append" the functionality - when I tried this I get errors indicating that tags such as cx-media does not exist
find a way to override the component, however, I think this is not possible since I was not able based on the documentation here https://sap.github.io/cloud-commerce-spartacus-storefront-docs/customizing-cms-components/#custom-angular-cms-components
The simplest answer, for now, would be overriding the component, as in the docs you've specified.
You can check the working example here:
https://github.com/tobi-or-not-tobi/spartacus-bootcamp/tree/master/src/app/features/components/banner
In the future, it should be possible to easily replace not only cms components, but also lower-level components.
I have a composite component that bundles some input fields. The component will be used multiple times on a page and contains a button to copy the values of another of these components. For this I would need to access one of those siblings via its clientId as a target for an
<f:ajax execute=":XXX:siblingId" render="...">
My problem lies in constructing this ID. I have the name of the sibling and I can make sure that it is located in the same naming container as the component that contains the copy button, but I can't control the complete nesting hierarchy, so it might be :form:foo:bar:parent:child or just form:parent:child. So essentially I would want to get the prefix of the current composite component, but without the component's own ID and then attach the ID of the component from which to copy.
This is similar to these questions:
How to address the surrounding naming container in jsf
How to access the parent naming container of composite
However, both answers make use of PrimeFaces-sepcific features like #parent and widgetVar, which does not apply to my project.
When experimenting with EL's implicit objects I basically tried the same things as the poster of the second question - with the same results: cc.parent.clientId is always empty. I also tried cc.namingContainer.clientId and some combinations of the two, alas - no success. Especially the fact that parent does not work as expected confuses me...
So: Is there a component-library-agnostic way to access the "path" of containing naming containers for a composite component? How is the parent object supposed to work, especially: when can we use it and when not?
PS: I was thinking about using the composite's full clientId and then trimming its actual ID with fn:split, however, if there was a more direct way I'd be happy to use it.
The #{cc.parent} resolves to UIComponent#getCompositeComponentParent() which returns the closest parent composite component. In other words, it returns only non-null when the composite component is by itself nested in another composite component.
The #{cc.namingContainer} simply refers to #{cc} itself, fully conform as specified in UIComponent#getNamingContainer():
Starting with "this", return the closest component in the ancestry that is a NamingContainer or null if none can be found.
Composite components namely implicitly implement NamingContainer themselves.
So your attempts unfortunately won't work. I also do not see any "standard API" ways to achieve the concrete functional requirement. The CompositeComponentAttributesELResolver causes that the #{cc.parent} doesn't resolve to UIComponent#getParent() which is what you ultimately want.
You can however provide a custom UIComponent implementation for the composite which adds an extra getter with an unique name which in turn properly delegates to UIComponent#getParent().
Here's a kickoff example:
#FacesComponent("myComposite")
public class MyComposite extends UINamingContainer {
public UIComponent getParentComponent() {
return super.getParent();
}
}
If you register it as follows in the composite interface:
<cc:interface componentType="myComposite">
then you'll be able to use
#{cc.parentComponent.clientId}
to get the client ID of the real parent UIComponent.
Ultimately you should be able to use the following construct to refer the sibling:
process=":#{cc.parentComponent.clientId}:siblingId"
I' working on a library control for Xpages and need some help in creating.
I would create a control which reads a configuration file and creates controls in a table, controls like Editboxes, checkboxgroups and so on.
so and now to my questions:
could I initiate controls from the Exlib or must I implement them all by my self?
if I could use them from the Exlib could anyone explain me how?
I hope its clear what i mean if not please ask me for further informations.
When creating your own components, if you're closely replicating some behavior that is already in an extension library component, I highly recommend you extend that component and just add what's needed to accommodate your different functionality. This makes things much easier and you don't have to code around every little scenario that the component might be placed in.
But, if you are developing a component that is nothing like any of the extension library or core components then just ensure your component extends UIComponent or UIComponentBase. If going this route, you'll also need to create your own renderer which extends Renderer. This is what will build the on-screen representation of your component. Again, if there's already something in the core components or extension library components that closely mimics what you need then make your renderer extend that renderer. Also, don't forget to include the renderer definition in the faces-config file and the component definition in the xsp-config file or your component won't work.
As for initiating controls from the extlib.... I assume you mean can you inject them onto the page at runtime. If so the answer is absolutely yes. To add an input text field to the page where there is a container (i.e. panel, div, span, whatever) with an ID of "someContainer"
XspInputText input = new XspInputText();
input.setValue("someValue");
input.setId("someID");
UIComponent container = FacesContext.getCurrentInstance().getViewRoot().findComponent("someContainer");
container.getChildren().add(input);
To see the api for all of the core and extension library components take a look at the XPages Controls Documentation. For a more complete tutorial on creating your own components take a look at my blog for creating a custom component inside an nsf, the steps are pretty much the same for putting them into a library:
Part 1,
Part 2 and there is an example database in the Part 2 post.
I have a form which one of it's fields is a code and description, also a button for opening a popup window that contains a list of all of the available codes.
when the user double clickes a row from that table i want to set these values to the code and description. - how can this be done?
Another question, I want to create this popup and table to be initialized dynamically - by that i mean that if i have a few forms in my application, when ever i have a field which has a description i want to be able to open this popup and to see the available list for that field. (every field can be from a diffrent table). is it possible to create something like that? if so, how?
Any help will be appritiated,
Thank's In Advance.
Yes, it is possible. Even more, many component libraries have ready to use popup/dialog components, such as RichFaces with <rich:popupPanel> and PrimeFaces with <p:dialog>.
If you do not want to use a component library for some reason, you would need to create a custom component for this which generates basically an absolutely positioned HTML <div> element with a CSS overlay which get shown/hidden by JS on a particular click/action. The HTML/CSS/JS part should be relatively simple if you are familiar with those languages. The JSF part is somewhat hard if you have never created a custom component before, but it should be possible with a composite component as well, so you could also just create one with pure XHTML. The updating/refreshing can just take place by the usual <f:ajax> means.
I'm developing custom jsf2 component, that has an datasource attribute. There are some operations on datasource, that belongs to VIEW. For instance, there is a method that returns some image for column header, if the table is sorted by the column, and other image if it doesn't. In JSF1, each component has its Java class, extending UIComponent, so I can implement such methods there. However, I see that in JSF2, component class is created automatically from xhtml, so I doesn't know how to add methods to it. Can anybody explain me how to do it? s it possible to use both composite component and component class in one component?
In JSF 2 you can create component classes in Java in the same way you do in JSF 1 (the API may have changed a bit, but it is mostly the same. For example, look at http://weblogs.java.net/blog/driscoll/archive/2009/10/09/jsf-2-custom-java-components-and-ajax-behaviors