I used the following 4 lines of code setting up a NativeSelect in a vaadin java web application successfully and the NativeSelect menu was created and populated by my enum (ApplicationStatus).
When I tried to do the same thing in a declarative file, the NativeSelect menu shows up and is empty.
class Application extends VerticalLayout
{
public Application()
{
..
//ApplicationStatus is an enum, these exact four lines of code work fine without declarative
private NativeSelect<ApplicationStatus> categorySelect = new NativeSelect<ApplicationStatus>("Application Status");
categorySelect.setItems( ApplicationStatus.values());
categorySelect.setItemCaptionGenerator( ApplicationStatus::getName );
categorySelect.setSelectedItem(ApplicationStatus.ACTIVE);
..
}
Here is the Declarative HTML FILE (ATTEMPT1) //the menu shows up empty
...
<row>
<column><vaadin-label><strong>Decline Reason</strong></vaadin-label></column>
<column><v-native-select _id="categorySelect"></v-native-select></column>
</row>
...
**Here is the Declarative HTML FILE (ATTEMPT2)** //I tried populating it inline but the result was that the menu now has the word "Duplicate" showing 5 times.
...
<row>
<column><vaadin-label><strong>Change Category</strong></vaadin-label></column>
<column><vaadin-native-select _id="categorySelect">
<option value="D">Decline</option>
<option value="W">Waitlist</option>
<option value="R">Rejected by VCS</option>
<option value="P">Prospect</option>
<option value="C">Duplicate</option>
</vaadin-native-select></column>
</row>
...
You didn't include the Java source for the declarative implementation, so just going to take a stab at it.
Declare the NativeSelect variable in the class object used to define the layout where it lives. Let the design bind the variable to the declarative using the _id you provided. Then populate the control with the enums and specify a default as you did previously.
NativeSelect<ApplicationStatus> categorySelect;
public DemoView()
{
Design.read( "DemoView.html", this );
categorySelect.setItems( ApplicationStatus.values() );
categorySelect.setSelectedItem( ApplicationStatus.ACTIVE );
This produces a select control with the desired captions and enum mappings.
I traced some of the Vaadin code, and I'm not sure there is a way to populate the control with enums purely using the declarative method.
Related
To avoid repeat re-writing the same code multiple times,I'm using VueJs component feature to make a component that includes the Select dropdown list.
The code goes like this
Vue.component('select-component', {
template: `
<label>elType</label>
<div class="col-md-colwidth">
<select>
<option value=""></option>
#foreach (elType s in ViewBag.elTypes)
{
<option value="#s[elType+"ID"]">#s["Designation"+elType]</option>
}
</select>
<input type="hidden" v-model="elTarget">
</div>
`,
props: {
elType: {
type: String,
default: 'User'
},
elTarget: {
type: String,
default: 'user'
},
colwidth: {
type: int,
default: '3'},
}
})
As you can see, I'm requiring some data list I brought from the ViewBag
but all i get is that the Razor is always ignoring that it is inside a Vue Component and giving "The type or namespace name 'elType' could not be found ".
P.S:
1) the input Hidden is used in the original code to manipulate the bs jQuery select2
2)Don't mind the elTarget and elType :p it's actually same thing except I'm lazy to camelCase the word :p
3)I tried to wrap the inside #{ } but still toggle the same error
You can't use Razor 'inside' a Vue component because Razor generates the page server-side before Vue gets to do its stuff in the browser. What you have there is a Vue component inside a Razor page. elType is defined as a Vue prop, so it likely isn't in your view bag?
In any case, please don't do this! Use Razor or Vue. If you choose Vue, your vue components are static .js or .vue files, your data arrives via AJAX calls, and you loop through elTypes with v-for, in the browser. Any other way will lead to madness :-)
You could send your razor with props to the component if necessary:
View file
<component-name :prop1="#Model.somethingOtherThanString" prop2="#Model.aString"></component-name>
Vue file
props: {
prop1: Boolean,
prop2: String
}
I have been working on a component to streamline a series of other components. The reason I wanted to do this is pretty much to create 1 place where the implementations would be since the code is the same, we don't have to worry about maintaining 17 html files, just 1.
I was trying to find a way to programmatically move 1 web component into another. some sort of A.appendHtml(B); but i was not 100% sure if that worked with WebComponents.
My goal is to move mine-b's template contents into ele-a before it renders out to the page. Essentially unwrapping the mine-b wrapper and injecting it to where it is suppose to go
<template>
<ele-a></ele-a>
<div>
<mine-b></mine-b>
</div>
</template>
<ele-a></ele-a> accepts only 2 tag types: sub-a and sub-b. sub-b can accept form tags.
<ele-a>
<sub-a></sub-a>
<sub-b>
<form></form>
</sub-b>
</ele-b>
so i thought to myself to create a component which would allow me to streamline all the attribute setting
<mine-a>
<ele-a>
<content></content>
</ele-a>
</mine-a>
<mine-b>
<sub-a></sub-a>
<sub-b>
<content></content>
</sub-b>
</mine-b>
which would allow me to do something like:
<mine-a>
<mine-b>
<form></form>
</mine-b>
</mine-a>
THe issue i have been having is that since ele-a only accepts sub-a and sub-b so i cant define it as a child of ele-a. The reason is the select attribute inside of ele-a which will prevent me from stamping out mine-b. So i tried to make it a sibling:
<mine-a>
<ele-a></ele-a>
<mine-b></mine-b>
</mine>
So this is where i am right now. In the dart for mine-a which extends PolymerElement. Is there a way to move the stamped out contents of the template of mine-b to ele-a? IE: the sub-a, and sub-b?
I was thinking to do something like:
<mine-a>
<ele-a id="targetEle"></ele-a>
<div id="sourceEle" hidden>
<content select="mine-b"></content>
</div>
</mine-a>
class MyElementA extends PolymerElement {
DivElement get _source => $['sourceEle'];
ElementA get _target => $['targetEle'];
MyElementA.created() : super.created(){
_target.appendHtml(_source.children());
}
}
or something to just move 1 WebComponent into another? I have been having some issues with this.
When looking at the PolymerLife Cycle, I was thinking I might be able to do it prior to the dom being initialized, by doing it in the created function.
I am creating a Jira plugin which provides a version tab panel. In the velocity of this version tab panel i am providing a select list . the code of select list is as below
<form name="input" action="AddParent" method="post">
<select name="parentVersion">
<option value="-1">--select Parent--</option>
#foreach($version in $versions )
<option value="$version" selected="true">$version</option>
<input type="submit" value="Add Parent"/>
</form>
Now in my plugin i have included a webwork module to handle this action . when i click the "Add Parent" button nothing is happening. I need the value which i have selected in my java action class . I am surely missing something . can someone please help me with this ?
Thanks in advance .
As an alternative, you can declare a local variable named same as your select list, create getter and setter and the variable will get the selected value.
Also, yo can specify the form action as action="YourClass!yourMethod.jspa"
private String parentVersion;
public String getParentVersion() {
return parentVersion;
}
public void setParentVersion(String parentVersion) {
this.parentVersion = parentVersion;
}
I'm not sure what's missing in your code, but the WebWork Sample Plugin has more information about this.
Grails newbie - I'm trying to create URIs for the value attributes in my select markup (iterating over each object of a domain class). I tried using the createLink tag in my tag like so:
<g:select name="project.id" from="${Project.list(sort:'start', order:'desc')}" optionValue="${createLink(controller:'project',action:'show')}/${it.id}" noSelection="['null': 'select project']/>
Obviously I get a GSP exception, which explains that "/[mycontroller]/[myaction]/null" is not a property of the object.
Is there any other way of constructing these URI's inside a <g:select> (e.g. <option value="/my/uri/"> without resorting to a loop and constructing the values "manually"?
It can be easily done by adding an extra method to Project domain:
class Project {
static transients = ['optionValue']
String getOptionValue() {
def g = ApplicationHolder.application.mainContext.getBean(
'org.codehaus.groovy.grails.plugins.web.taglib.ApplicationTagLib')
return g.createLink(controller:'project',action:'show', id: id)
}
}
and using it as:
<g:select name="project.id" from="${Project.list(sort:'start', order:'desc')}" optionValue="optionValue" noSelection="['null': 'select project']" />
Would it be possible to use a project-specific stylesheet for JIRA projects?
For example, if I would like to include project X in an iframe, I'd like to hide the logo and possibly the JIRA toolbar - for specific user groups for example (it's only for viewing purpose, it is not a security feature)
Granted that I'd have to implement this myself (through the webservice api for example) - are there templates for the standard issue page?
Thanks in advance!
There is a (currently undocumented) plugin point in JIRA for inserting top navigation components, <top-navigation>.
You can use this plugin point to add your own navigation bar, and perhaps hide the normal bar using an inline CSS stylesheet. The following example triggers this behavior by using a ?hideit=true query parameter, which is the simplest way to approach the "embed in iframe" problem. You could make that "sticky" by storing it in a session or cookie.
Once you have created a plugin that plugins into the <top-navigation>, hiding the top bar is simple. Here is a velocity script that does it:
#if ($hideHeaderHack)
<style>
\#header {display:none;}
</style>
HIDDEN (remove this message eventually)
#else
NORMAL (remove this message eventually)
#end
To create such a plugin, use the Atlassian Plugin SDK (use atlas-create-jira-plugin). Your atlassian-plugin.xml should look like:
<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}</description>
<version>${project.version}</version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
</plugin-info>
<top-navigation key="standard-navigation-top"
name="Tigerblood"
class="com.madbean.topnavhack.TopNav" state='enabled'>
<resource type="velocity" name="view" location="topnav.vm"/>
<order>5</order>
</top-navigation>
</atlassian-plugin>
Your top-navigation implementation class (called com.madbean.topnavhack.TopNav above) should look like:
public class TopNav implements PluggableTopNavigation {
private TopNavigationModuleDescriptor descriptor;
public void init(TopNavigationModuleDescriptor descriptor)
{
this.descriptor = descriptor;
}
public String getHtml(HttpServletRequest request) {
Map<String,Object> params = new HashMap<String, Object>();
params.put("hideHeaderHack", "true".equals(request.getParameter("hideit")));
return descriptor.getTopNavigationHtml(request, params);
}
}
Your plugin will be laid out something like:
./pom.xml
./src/main/java/com/madbean/topnavhack/TopNav.java
./src/main/resources/atlassian-plugin.xml
./src/main/resources/topnav.vm
Disclaimer I work for Atlassian as a developer in the JIRA team.
I don't believe this functionality is exposed directly, and you don't state what JIRA version you are using, but in 4.x in \atlassian-jira\includes\decorators there is a file called bodytop.jsp the has the following fragment that renders the top level navigation and toolbar elements:
// Render all the top nav plugins
for (Iterator iterator = topNavPlugins.iterator(); iterator.hasNext();) {
TopNavigationModuleDescriptor topNavModuleDescriptor = (TopNavigationModuleDescriptor) iterator.next();
PluggableTopNavigation pluggableTopNavigation = (PluggableTopNavigation) topNavModuleDescriptor.getModule();
%>
<%= pluggableTopNavigation.getHtml(request) %>
<%
}
%>
If you wanted to you could create a version of the dashboard rendering jsp that calls a modified bodytop.jsp that renders none of the usual nav elements.
I would be tempted to write a basic plugin to do this.
Take a look at http://confluence.atlassian.com/display/JIRA/Web+Resource+Plugin+Module
If you have yet to write a jira plugin, now might be the time to try it out http://confluence.atlassian.com/display/DEVNET/Developing+your+Plugin+using+the+Atlassian+Plugin+SDK .
I'm currently running Jira 4.2.2 and wrote a plugin that implements PluggableTopNavigation for a custom navigation bar. Unfortunately, this functionality, as detailed in the awarded question, is now depreciated.
My plugin added a div to the top of the Jira header that created a nice menu for use with our development pages. The source of the menu was hard-coded into the plugin and located as a static menu.html file on our server for sharing across different pages.
Since I'd have to completely redesign the plugin for Jira 5.2, I started searching for different ways to re-implement the menu. Here's what I settled on. It's not pretty, but it makes it so you don't have to write a plugin.
Change your announcement banner (quickly get there by typing 'gg', then search for announcement banner) to the following:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.get("http://path.to.server/menu.html", function(data){
jQuery("#header").prepend('<nav class="global" role="navigation">'+data+'</nav>');
jQuery("#top-level-id-of-navbar a").css("color", "white")
});
});
</script>
Replace the menu.html link with your own link. The color of the header was inherited by the links in my menu, so I had to change them back to white after inserting the html page.
The result looks identical to Jira 4.2.2, so I'm happy.