Persisting JSF2 Composite Component value - jboss

I have a datatable which loops through a List and has a value column which renders as such:
<h:dataTable var="assessmentFieldValue" value="#{assessmentBean.assessmentFieldValues}">
...
<ui:fragment rendered="#{assessmentFieldValue.field.type eq 'TEXT'}">
<h:inputText value="#{assessmentFieldValue.value}" />
</ui:fragment>
<ui:fragment rendered="#{assessmentFieldValue.field.type eq 'SLIDER'}">
<component:slider value="#{assessmentFieldValue.value}" />
</ui:fragment>
...
</h:dataTable>
So sometimes I get a standard inputText, sometimes I get my composite slider component:
<composite:interface>
<composite:attribute name="value" />
</composite:interface>
<composite:implementation>
<script type="text/ecmascript">
function updateValue(value) {
$('##{cc.id} span').each(function() {
$(this).text(value);
});
}
</script>
<div id="#{cc.id}">
<input id="sliderComponent" type="range" min="1" max="10"
value="#{cc.attrs.value}"
style="float: left"
onchange="javascript:updateValue(this.value);" />
<h:outputText id="fieldValue" value="#{cc.attrs.value}"
style="min-width: 20px; display: block; float: left" />
</div>
</composite:implementation>
This all renders as I would like it too (deployed on JBoss-AS7), but when I hit the save button associated with the datatable the assessmentBean.assessmentFieldValue List doesn't reflect any value changes on the slider component yet it does for the standard inputText.
Can anyone suggest why changes to the slider aren't making it back to the backing bean? Thanks!

That's because you used a plain HTML <input> element instead of a fullworthy JSF input component like <h:inputText>. This way the value is in no way bound to the JSF context. It's only treated as plain vanilla template output value, not as input value. A composite component isn't going to solve this. You really need to create a fullworthy UIComponent for this (or to look for a 3rd party component library which has already done the nasty job for you, such as PrimeFaces with its <p:slider>).
See also:
When to use <ui:include>, tag files, composite components and/or custom components?

Related

Sightly - Empty check on list HTL

How to check the empty list on Sightly?
I wanted to prevent render the item-list DIV if there was no item on itemImgaeList. But it returns me one (1) always if there were no items while trying with -
LIST_SIZE_PRINT = "${container.itemImgaeList.size}"; // retrun 1
HTL:
<div data-sly-test="${container.itemImgaeList.size > 1}">
<sly data-sly-list.imageList="${container.itemImgaeList}">
<div class="item-list">
<picture>
<img alt="${imageList.qlImageText}" src="${imageList.qlImagePath}" />
</picture>
</div>
</sly>
</div>
Any help?
data-sly-list can be used for implementing the above requirement of rendering the list elements only when the list is not empty.
The use of 'data-sly-test' is not required for checking a list, as the check for emptiness is done inherently by data-sly-list.
Here is a working example using data-sly-list:
<div class="item-list" data-sly-list.item="${container.itemImgaeList}">
<picture>
<img alt="${item.qlImageText}" src="${item.qlImagePath}" />
</picture>
</div>
More information:
https://www.aemquickstart.in/2016/08/htl-sightly-notes.html

How to sync form and useState object?

How do I link a graph using a state to a form, so when the form changes the graph is automatically updated as well, even the form is not submitted yet? The graph is just using showCarrot to generate a chart.js element.
I found initialValues as fields for forms but do not know how to clue this all together. Anyone can help to save me from insanity?
Update: I figured that Ant Design form is based on field-form, still not know how this helps but it is a trail.
That's the state I set and propagate to my form and my graph
const [showCarrot, setCarrot] = useState<ICarrotArray>([]);
That's my form and table to edit the data
<Form form={form} initialValues={showCarrot} onFinish={onFinish}>
<Table
dataSource={showCarrot}
rowKey={"id"}
pagination={false}
bordered
footer={(): React.ReactElement => {
return (
<Button onClick={addCarrot}>
<PlusOutlined /> Add Carrot
</Button>
);
}}
>
...
</Table>
<br />
<Row justify="end">
<Form.Item>
<Button type="default" onClick={onReset}>
Restore
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }}>
Save
</Button>
</Form.Item>
</Row>
</Form>
Firstly I just want to understand, correct me if I'm wrong.
You set your initialValues for form which is showCarrot. Is it mean that initialValues set for some Form.Item, because usually object element inside initialValue is used as data for Form.Item by their name.
Like so
<Form
name="validate_other"
{...formItemLayout}
onFinish={onFinish}
initialValues={{
['input-number']: 3, //name of the Form.Item
['checkbox-group']: ['A', 'B'],
rate: 3.5,
}}
>
<Form.Item label="InputNumber">
<Form.Item name="input-number" noStyle>
<InputNumber min={1} max={10} />
</Form.Item>
<span className="ant-form-text"> machines</span>
</Form.Item>
But by your code it look you want set showCarrot only as table data. If so, I can't find columns in your table, look like currently error because of that. You should add there dataIndex param which will listen for your data elements by that name

Whenever I apply autocomplete.js the input text box will change Algolia

Im using algolia to perform a search on my website, but I realized one thing. Im using search box generator to customized my search input field. However the problems occur, when I try to apply autocomplete.js on my search input field
Initially, it looks like the one below,
but when I apply the autocomplete feature it will look like this
Code - HTML
<form id="search" novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-google" style="margin-top: 7px;">
<div role="search" class="sbx-google__wrapper">
<input type="search" id="search_input" name="search" placeholder="Search" autocomplete="off" required="required" class="sbx-google__input">
<button type="submit" title="Submit your search query." class="sbx-google__submit">
<svg role="img" aria-label="Search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
</svg>
</button>
<button type="reset" title="Clear the search query." class="sbx-google__reset">
<svg role="img" aria-label="Reset">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
</svg>
</button>
</div>
</form>
Code - JAVASCRIPT
autocomplete('#search_input',
{ hint: false }, {
source: autocomplete.sources.hits(index, {hitsPerPage: 5}),
//value to be displayed in input control after user's suggestion selection
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
console.log(suggestion)
return '<span>' +
suggestion._highlightResult.title.value + '</span>';
}
}
});
The custom search box is advised by algolia themselves, on the autocomplete documentation. I have no idea on how to solve this problem, seems like the js script overwrite the css styling. This only happen if I passed in the #search_input in the autocomplete function
Here is the js fiddle https://jsfiddle.net/Ldpqhkam/
Algolia autocomplete adds a span around the input and that's what breaks the design. It has inline style changing the display, you can override it to fix the design.
.algolia-autocomplete {
display: inline !important;
}

ZK :Show Bind value in Client.showNotification

i m working on a ZK project using MVVM aproach , what i m trying to do is to show notification of a #bind(each.info) value but is not seems to work with me , here s what i have done so far.
<div width="59%" style=" float: left !important;" apply="org.zkoss.bind.BindComposer"
viewModel="#id('menu') #init('ma.schlemmer.headerbar.mainMenu')">
<hlayout children="#bind(menu.listMenu)">
<template name="children">
<a iconSclass="#bind(each.icon)" href="#bind(each.link)" autag="#bind(each.info)" onRightClick='Clients.showNotification("#bind(each.info)" ,"warning",this.self,"after_center",1000)'></a>
</template>
</hlayout>
</div>
and thank you
You can do this using ZK commands. You should get the result you want like this:
<div width="59%" style=" float: left !important;" apply="org.zkoss.bind.BindComposer"
viewModel="#id('menu') #init('ma.schlemmer.headerbar.mainMenu')">
<hlayout children="#bind(menu.listMenu)">
<template name="children">
<a iconSclass="#bind(each.icon)" href="#bind(each.link)" autag="#bind(each.info)"
onRightClick="#command('showInfo', obj=each, comp=self)"></a>
</template>
</hlayout>
Then add this command to your View Model:
#Command
public void showInfo(#BindingParam("obj") ListMenu listMenu, #BindingParam("comp") Component comp) {
Clients.showNotification(listMenu.getInfo(),"warning",comp,"after_center",1000);
}
You did not provide enough code, so I can`t test the exact situation, but basically you need to pass the object each (which I guess is something like ListMenu object) and component to the command. Then you can easily show notification.
Best regards,
Osvaldas

How do I make a HTML form using <label> <input> and <span>?

I have made a form in HTML using a table and that worked fine, however, my teacher told me that making forms from tables is not the proper way to do it anymore, instead I should use:
<form>
<label></label>
<input>
</form>
but he also mentioned something about using <span></span> and I'll guess it is just about this point where I got a bit confused, because where should I use it - ie. should I put the <label> and the <input> in between <span></span> ?
A few of the reason I ask is:
I don't consider myself very savvy when it comes to HTML
I would just have used a <div></div> to wrap around the <label> and the <input> and then use css to put it where I want it to appear on the webpage.
Regarding the form I want to create then I want it to look like this:
[Firstname] [lastname]
[textfield] [textfield]
[Street] [zip-code] [city]
[textfield] [textfield] [textfield]
[E-mail] [Phone]
[textfield] [textfield]
[message]
[textarea]
I hope the layout of my form makes sense to the majority of you !
Try something like this:
<form action="action.php">
<label for="firstName">First Name</label>
<input type="text" name="fname" id="firstName"><br>
<label for="lastName">First Name</label>
<input type="text" name="lname" id="lastName"><br>
....
</form>
and to line it all up you could use some css like this:
label{
width: 100px;
text-align:left;
}
Although you could use SPAN technically.. as it's an inline element and so are LABEL and INPUT, it doesn't quite sit well. Inline elements aren't really designed to be containers, so using a block level element such as a DIV would be a better way of structuring it.
Beyond this to make it line up, you're moving into the relms of CSS to float your elements.
So something alone the lines of:
<form action="">
<fieldset>
<div class="left">
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" id="FirstName">
</div>
<div class="right">
<label for="LastName">Last Name</label>
<input type="text" name="LastName" id="LastName">
</div>
</fieldset>
</form>
<style type="text/css">
fieldset {
width:500px;
overflow:hidden;
}
fieldset .left {
float:left;
width:50%;
}
fieldset .right {
float:right;
width:50%;
}
fieldset label {
display:block;
}
fieldset block {
display:block;
}
</style>
You teacher probably means that you should wrap each pair of input and label in a span. You are quite right in thinking that you should use div instead of span there. Just tell your teacher to look at the page when style sheets are disabled. On similar grounds, you should prove her/him that he is all wrong about saying that a table should not be used.
To do the exercise of writing a form (that is essentially tabular data) without using table markup, just use your div approach and use tabular layout features of CSS: set display: table on the form, display: table-row on the div elements, and display: table-cell on the input and label elements. Add padding and horizontal alignment as needed. Do not forget to inform your teacher that this will only work on sufficiently modern browsers, whereas the logical approach of using an HTML table works on all browsers.