I'm trying to modify the structure of a screen. Specifically, I want to add button to System/dashboard.xml. The problem is the screen doesn't iteratively build its buttons from its subscreens as webroot/apps/AppList.xml does. They are hardcoded.
I considered two solutions:
Just override dashboard.xml from my component
Inject javascript into dashboard.xml to dynamically create the button
Solution 1 would work but it's obviously not desired as it could create clashes with other components also wanting to modify dashboard.xml and using the same method.
I haven't been able to get around implementing solution 2, as, if I understand correctly, the mounted dashboard.xml subscreen with the javascript would not execute in dashboard.xml as it's not in the url path. A solution would be to reverse the mount order, and mount dashboard.xml under the javascript screen but that would create a problem similar to solution 1.
So, is there a standard or recommended way of doing this?
Instead of extending it there are three ways I am thinking you can do it.
The first one is including the screen in you extended screen using the tag
<include-screen location"component://path/to/component"/>
You can combine it with <include-screen ...share-scope="true" /> so that both pages operate in the same context.
The second one is using a parametrization so when you include the screen depending on a flag the third button is added or not:
<actions>
<set field="parameterName" value="1"/> <!-- or 0 -->
</actions>
<widgets>
...
<include-screen location"component://path/to/component"/>
...
</widgets>
And in dashboard.xml
<parameter name="parameterName" />
<!-- then use conditional-field or if tag to show conditionally -->
The third one is trying to replicate the menu structure at webroot/apps/AppList.xml, just as tabs, and menus do.
Related
From this question (Hyperlink inside label field in Vaadin 12) I was able to use Vaadin's HTML component to create custom html code (and it worked fine, including putting in ahref links etc.)
However, Vaadin provides the "Anchor" component which appears to be the far more powerful (and potentially more secure) way of creating links that can be used to navigate to either other classes I built or to external website (or even to download dynamically generated data in a streaming fashion).
However, what if I want to have both normal "label-like" text and an achor link all appear in a single paragraph? For example, in "normal html", I could just do this:
<p>
This is my normal text.
Download <a href="/resources/excelTemplate.xlsx" download> this Excel file</a>
and follow the instructions therein
</p>
and it would create the link somewhere within my <p>...</p> paragraph. How can I do this in Vaadin with the Anchor object? The best I came up with thus far is to use Horizontal Layout and then add a label, an achor, and then another label -- but that is really really ugly and doesn't technically have the same effect (it won't wrap properly.) The other option is to NOT use "Anchor" but instead just use "HTML" component and just create ahref links everywhere, but that seems a tiny big ugly too (though I suppose it's an ok workaround.). (I'm assuming I can call any UI I build by sticking the url links in the ahref calls....) Thoughts on the "right Java Vaadin" way to do this?
Paragraph p = new Paragraph("para");
Anchor a = new Anchor("go", "www.go.com");
p.add(a);
p.addClickListener(e-> UI.getCurrent().navigate(a.getHref()));
Vaadin 10+ offers you (atleast) three ways to handle this kind of case. You mentioned two of the..
Make composition of components in Java. Instead of VerticalLayout you could wrap the content in Div and using Text component also in Div instead of Label. You can make this kind of custom component by extending Composite.
The second alternative is to use HTML component as you mentioned.
The third alternative is to create custom html polymer template and connect to it with PolymerTemplate class. That will result in custom component that behaves like the custom component of the first option. It is just different way of implementation.
Which one of the three is a correct way. From framework perspective all of them. Which one is correct for you depends on your preference and application.
I have a layout file. I want something like this in each of my pages inheriting that layout:
Just ${step} Steps Away From The Awesome!!
So in my layout I have defined a string as above with a placeholder step. I dont want to pass the value of this placeholder from controller. I wish to define it in the gsp that inherits this layout.
I was looking for something like <g:set var="step" value="1"/> (or 2 or 3 depending on the gsp). But it does not work if I define it like that.So how do I dereference the value of "step" inside each extending layout?
One of the best ways to accomplish this is to make use of content blocks and page properties. These are both features derived from Sitemesh.
I assume you only want to conditionally include this information when the page using the layout provides a value. So in my example here I have wrapped it in a quick if check.
In your layout:
<g:if test="${pageProperty(name: 'page.step')}">
Just <g:pageProperty name="page.step" /> Steps Away From The Awesome!!
</g:if>
Then in any page that uses the layout you can include the content for the variable step
<content tag="step">3</content>
Note that the value within the content tag can be whatever you like. It will be evaluated when the page is rendered.
Is there a way to dynamically add an attribute to a struts 2, tag UI tag such as a textfield?
The reason is that I want to add a readOnly form field attribute to an <s:textfield/>, depending on an action's method result. I cannot use readOnly="%{isReadOnly()}" since once the attribute is defined, the form element is read-only, no matter what value it has. And wrapping each form field into an <s:if/> tag is pretty cumbersome and results in a lot of code duplication.
I would also like to avoid JavaScript for interoperability reasons and for not relying on the browser's scripting settings.
If the issue is to use the built in struts2 functionality then one easy option is to render your view with freemarker, which readily supports the dynamic addition of attributes.
If you are using conventions, it is VERY trivial you just need to create a file with a ".ftl" extension, if you are using xml it is also very easy just use the freemarker result type (see here for greater description):
<action name="test" class="package.Test">
<result name="success" type="freemarker">/WEB-INF/content/testView.ftl</result>
</action>
Here is example view using a map to dynamically add attributes (example also taken from liked page):
<#s.textfield name="test" dynamicAttributes={"placeholder":"input","foo":"bar"}/>
The dynamicAttributes would be extremely useful in all JSP UI tags but alas it is not currently implemented.
NOTE: There is one error/omission in the above link. It tells you to add the following line which causes an error in my environment (simply the line is not needed).
<#assign s=JspTaglibs["/WEB-INF/struts.tld"] />
That is, this line in a file all by it self is sufficient for rendering a text element, no explicit tag library declaration needed!
<#s.textfield name="test" dynamicAttributes={"placeholder":"input","foo":"bar"}/>
There are a number of advantages to using freemarker over plain JSPs, so taking a moment to explore the syntax and using it for this one case may prove useful later.
I have a ApplicationBarIconButton which I use repeatedly on multiple pages.
I want to be able to define the Click action in my Application C# file.
I have
<Application.Resources>
<shell:ApplicationBarIconButton
x:Key="AddLocationAppBarIconBut"
IconUri="/icons/appbar.add.rest.png"
Text="location"
Click="Add_Location_Event" />
in my App.xaml file and I want to load it into another page I have under
<phone:PhoneApplicationPage.ApplicationBar>
How do I go about this exactly?
Can I bind a click event to an event in my Application cs file?
Unfortunately, you can't!
In full WPF framework, you'd be able to do something like this:
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBar.Buttons>
<StaticResource ResourceKey="AddLocationAppBarIconBut" />
</shell:ApplicationBar.Buttons>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
The trick here is in the usage of StaticResource, but Silverlight doesn't have a backing class representation like that; you can only use the Markup Extension as {StaticResource AddLocationAppBarIconBut}, but this won't help you here!
What you can is define the full ApplicationBar object as a resource and then just call it on the page like this:
<phone:PhoneApplicationPage ApplicationBar="{StaticResource ApplicationBarResource}">
<!-- remaining code -->
<phone:PhoneApplicationPage />
I got the following scenario:
I got several tabs (TabView is a naming container )
and in one of the I got a p:inputText which shows a dialog(which is located in other xhtml file) , now I want the dialog to update the p:inputText , the thing is that the id of the p:inputText is unknow (JSF adds some prefix to it)
<h:form id="hoursReportFrm">
<p:inputText id="comment4Dialog" value="#{hoursReportBean.aComment}"
onfocus="dlg1.show();"/>
I can't use this update="hoursReportFrm:comment4Dialog" in the dialog
ATM i looked at the example of this site JSF: working with component IDs (id vs clientId) (its from 2009)
and added binding to to inputtext , like thisbinding="#{lookup.components.comment4Dialog}" and in the p:commandButton of the dialog I changed to update="#{lookup.clientIds.comment4Dialog}"
and It works just fine, but I'm looking for a better way , without the need to bind every component that I would like to access later...
Thanks ahead,
To be quite honest, I think the binding is probably the easiest route, however when I've been in that situation I've found composite components often offer a better solution than bindings. Depending on the situation (and again, its totally case by case) you can use a composite component to get around this problem. This allows you to reuse parts of a page creatively so that your specific updates don't take a lot of work and you can reuse the code.
An example of this might be:
//comp:myDialog
...
<composite:interface>
<composite:attribute name="update" />
<!-- Other attributes -->
</composite:interface>
<composite:implementation>
...
<!-- Implementation -->
<p:commandButton update="#{cc.attrs.update}"/>
...
</composite:implementation>
And here might be the component in use:
//for the sake of argument 'comp' as your library
<h:form id="someForm">
<p:inputText value="#{bean.changeMe}" id="changeMe"/>
</h:form>
<h:form id="dialog">
<!-- dialog here -->
<comp:myDialog update="someForm:changeMe" />
</h:form>
By separating this view into a piece of reusable code you might be able to get around the burden of specifying the full path because it is now much easier to reuse. However, I think it is a toss up of a binding or the composite component depending on the specific case. For reuse, make a new object (component) and reuse it. If you're dealing with a highly dynamic environment: bind it.
I'm not an expert by any means, but generally speaking the above has gotten me out of a lot of tough situations.
EDIT: on a re-read you should also make sure that the tab-view isn't lazily loaded and take a look at the rendering to make sure the path is correct (inspect the ID). I've had problems (in older versions of Primefaces) where sometimes the id was nested inside a p:outputPanel or in rare cases the subview id. It might be a very simple fix by specifying the full path ':subview:form:component' though that shouldn't be the case.