I want to design Nested Header (for group header and data header related to group.)
Means I want to design like this . The top header will be there, once I will click on the header the sub header data will come (The sub header will contain one header and some record data.)
I have written the code like this
<template name="model:group" var="group">
<listgroup label="#load(groupNameList)"
style="color: #666;" open="false"
onClick="#command('groupCloseAndOpen',listGroup = self)"
tooltiptext="#load(each)">
<listcell>
<label value="${group.deptId}" tooltiptext="${each.deptId}">
</label>
</listcell>
<listcell>
<label value="${group.deptName}"
tooltiptext="${each.deptName}">
</label>
</listcell>
<listcell>
<label value="${group.deptLoc}"
tooltiptext="${each.deptLoc}">
</label>
</listcell>
</listgroup>
</template>
<template name="model" var="folderInfoData">
<listitem>
<listcell if="${folderInfoDataStatus.index == 0}">
<label
value="#load(folderInfoData.id)"/>
</listcell>
<listcell>
<label
value="#load(folderInfoData.id)"/>
</listcell>
<listcell><label
value="#load(folderInfoData.name)" />
</listcell>
<listcell><label
value="#load(folderInfoData.sal)"
/>
</listcell>
</listitem>
</template>
</listbox>
Can anyone suggest how to solve this issue ?
Related
This is my current code:
<g:form method="post" >
<g:hiddenField name="id" value="${personInstance?.id}" />
<g:hiddenField name="version" value="${personInstance?.version}" />
<fieldset class="form">
<g:render template="form"/>
</fieldset>
<fieldset class="buttons">
<g:actionSubmit class="save" action="update" value="update', default: 'Update')}" />
<g:actionSubmit class="delete" action="delete" value="update", default: 'Delete')}" />
</fieldset>
</g:form>
In my person instance, I have a list variable that I want to set as a hidden field as well, but I am unable to figure out how to do so as the hiddenField tag can only take in one piece of text. This is what I want to create:
<g:hiddenField name="classes" value=["English", "Math"] />
Is this possible a different way?
I'm using a Sap.M.Table, which should have a column of checkboxes bound to data. The Checkbox that shows up with MultiToggle selection seems to be a prettier solution all around, but how do I bind that particular checkbox (i.e. the 'row is selected' property) to my boolean property in my model?
I can't find any information about this seemingly simple thing anywhere.
My table is currently setup with a rows aggregation, and Column definitions that contain templates. I did try changing the rows aggregation to an items aggregation and then moved the content of my templates to the cells aggregation from the Items element in the xml, but as soon as I included the Items element, I got the 404 on sap.m.Items.js
<tab:Table
rows="{
path: '/Items'
}"
selectionMode="None"
visibleRowCountMode="Auto"
class="sapUiNoMargin"
>
<tab:columns>
<tab:Column width="4rem" sortProperty="StatusBool">
<Label text="Book" />
<tab:template>
<Checkbox selected="{Selected}" enabled="{StatusBool}" select="OnBookSelect" />
</tab:template>
</tab:Column>
<tab:Column width="6rem" sortProperty="ProdOrder">
<Label text="Production Order" />
<tab:template>
<Button text="{ProdOrder}" icon="sap-icon://inspection" width="100%" visible="{=!!${ProdOrder}}" press="OnProdOrderPress" />
</tab:template>
</tab:Column>
<tab:Column width="14rem" sortProperty="ItemCode">
<Label text="Item Code" />
<tab:template>
<Label text="{ItemCode}" />
</tab:template>
</tab:Column>
<tab:Column width="10rem" sortProperty="Op">
<Label text="Op" />
<tab:template>
<Label text="{Op}" />
</tab:template>
</tab:Column>
<tab:Column width="8rem" sortProperty="PlanQty">
<Label text="Planned Time" />
<tab:template>
<Label text="{PlanQty}" />
</tab:template>
</tab:Column>
</tab:Columns>
</tab:Table>
The other two answers on this question propose overriding
div.ui-input-text {}
However, I have multiple input fields on this page and also within my project. So those answers won't work as they would effect everything on my page or project.
How can I modify a single text input?
A class designation in the input tag doesn't work. If I encapsulate the input with a div tag it still doesn't work. I'm trying to put an icon at the end but it seems all Jquery mobile text input takes the entire screen.
<input class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
CSS, No Effect!
.address {
width: 200px !important;
}
Now, I could still switch to Bootstrap if that's the better way to go on this project. It seems to have .col-xs-* classes that solve this problem.
Thanks in advance.
Instead of directly setting the class on the input,jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox.
<input data-wrapper-class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
Working DEMO
It is maybe bit late to answer this, but maybe for others looking for the same thing (I was :-)
You can put your address in a div:
<div class="myContainer">
<label id="lbAddress">Provide the address</label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
Then select your container and just the input inside that container in the CSS:
.myContainer > .ui-input-text
{
width:200px;
}
demo: https://jsfiddle.net/petitbarzun/cfazq5k5/
Reading your comments on the answer from ezanker, if you want all the inputs to appear on one line, there needs to be a container with ui-field-contain like this (the label should be there too):
<div class="ui-field-contain">
<label id="lbAddress" style="display:none"></label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
The CSS then looks like this:
.ui-field-contain > #lbAddress~[class*=ui-input-text]
{
width:219px;
}
demo http://jsfiddle.net/petitbarzun/cfazq5k5/1/
Can you please tell me how to add text field in front of label in jquery mobile .
There is two different types of text field in this image.How to implement this?
Just you have to copy simple code to your website...
For input box:-
<div data-role="fieldcontain">
<label for="text-12">Text input:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
For textarea:-
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
Keep that in mind the value of for="" and id="" of input box should be same...
For more details check out:- http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/
Use this code to add textfield
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
Ref this docs to know more informations about JQM
http://jquerymobile.com/demos/1.2.1/docs/forms/textinputs/
I created a simple JSF login page, and I'm trying to integrate it with spring security.
Here is the form element from login.xhtml
<h:form>
<h:outputLabel value="User Id:" for="userId"/>
<h:inputText id="j_username" label="User Id"
required="true" value="#{loginBean.name}" >
</h:inputText>
<h:outputLabel value="Password: " for ="password"/>
<h:inputSecret id="j_password" value="#{loginBean.password}" />
<h:commandButton value="Submit" action="#{j_spring_security_check}" />
</h:form>
But the rendered html page has something like the below. Take a look at the form action and the input tag's names
The form element
<form id="j_idt6" name="j_idt6" method="post"
action="/jsfproject2/faces/login.xhtml"
enctype="application/x-www-form-urlencoded">
And the input tags
User Id:</label><input id="j_idt6:j_username" type="text"
name="j_idt6:j_username" />
Now I want form action to be /j_spring_security_check and input boxes to be 'j_username' and j_password
How can we achieve this ?
There are two options for Spring Security to work.
Use prependId="false" on a JSF form
As <h:form> is a naming container, it prepends id of its children with the specified id, or the autogenerated id, so as Spring Security expects ids to remain unchainged, just don't prepend the ids:
<h:form prependId="false">
<h:outputLabel value="User Id: " for="userId" />
<h:inputText id="j_username" label="User Id" required="true" value="#{loginBean.name}" />
<h:outputLabel value="Password: " for ="password" />
<h:inputSecret id="j_password" value="#{loginBean.password}" />
<h:commandButton value="Submit" action="#{loginBean.login}" />
</h:form>
Note that #{j_spring_security_check} is a wrong action method: it needs to be #{loginBean.login} with the following contents:
public String login() {
//do any job with the associated values that you've got from the user, like persisting attempted login, etc.
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext extenalContext = facesContext.getExternalContext();
RequestDispatcher dispatcher = ((ServletRequest)extenalContext.getRequest()).getRequestDispatcher("/j_spring_security_check");
dispatcher.forward((ServletRequest)extenalContext.getRequest(), (ServletResponse)extenalContext.getResponse());
facesContext.responseComplete();
return null;
}
Basically, all you need to do is dispatch to /j_spring_security_check and have j_username and j_password as request parameters.
Use plain HTML form
Basically, there's no particular need to mess with JSF form on this issue, in case you don't need to do some extra things apart from authentication, and plain HTML form is sufficient for Spring Security to do its job.
<form action="/j_spring_security_check" method="POST">
<label for="j_username">User Id: </label>
<input id="j_username" name="j_username" type="text" />
<label for="j_password">Password: </label>
<input id="j_password" name="j_password" type="password"/>
<input type="submit" value="Submit"/>
</form>
Thats how i did it:
<form action="${request.contextPath}/appLogin" method="POST">
<h:form prependId="false">
<p:inputText id="app_username" placeholder="Username" name="app_username" styleClass="Wid80 TexAlCenter Fs18" required="true"/>
<p:password id="app_password" placeholder="Password" name="app_password" label="Password" required="true" styleClass="Wid80 TexAlCenter Fs18"/>
<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only Wid60">
<span class="ui-button-text">Login</span>
</button>
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</h:form>
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
I'm using the Premium Theme Ronin from Primefaces and custom login URLs like "appLogin" and custom Parameters like "app_username".