<window apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.test.labelTest')">
<template <!--model = "#bind(vm.allLabelSets)" some thing like this --> >
<label value="#load(each.label1)" />
<label value="#load(each.label2)" />
<label value="#load(each.label3)" />
</template>
</window>
how can we use template to iterate over a list without using any of gridModel,treeModel ?
Try this below code
<vlayout id="vlayout" children="#bind(vm.allLabelSets) #template('record')">
<template name="record" var="record">
<vlayout style="padding-left:10px; border:2px solid green;" >
<label value="#load(each.label1)" />
<label value="#load(each.label2)" />
<label value="#load(each.label3)" />
</vlayout>
</template>
</vlayout>
You have to use children attribute
Related
I'm using this code to call controller with action.
I want to send data from input tag inside asp-route-data.
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="korisnik" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="lozinka" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin" asp-controller="Members" asp-route-username=a sp-route-password="" asp-action="LoginUser">
So, asp-route-username should be the value from input korisnik.
Is it possible?
If I understood your question correctly (of which I'm not so sure) I think the answer to your problem is it use <form> tag. Then instead of appling the asp-route attributes on <button> tag, apply them on <form> tag:
<form asp-controller="Members" asp-action="LoginUser" asp-route-username="a" asp-route-password="">
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="korisnik" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="lozinka" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin"></button>
</form>
Be sure to check out the official ASP.NET Core documentation on how to work with forms.
If you pass username and password using asp-route-{value}, it will show these information in the url which is not recommended.
If you just want to pass the two input values from view to controller, you need to modify name attribute of input to match the action parameters.For example:
View:
<form method="post" asp-controller="Members" asp-action="LoginUser">
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="username" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="password" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin"></button>
</form>
Action:
[HttpPost]
public async Task<IActionResult> LoginUser(string username,string password)
I am using a Wizard object in my app with multiple steps. I want the content of this step to utilize the full width available. I am currently using the below XML, though this is just resulting in the content being bunched together on the left (see attached image).
How can I modify this so the SimpleForms will use the full width of the page ?
Any help would be greatly appreciated,
thanks,
Joe
<WizardStep id="wizStep2" validated="true" title="Customer Confirm"
icon="sap-icon://customer" >
<HBox width="100%" fitContainer="true">
<form:SimpleForm editable="true">
<Label text="Title"/>
<Input value="MR"/>
<Label text="Name"/>
<Input value="John"/>
<Input value="Smith"/>
<Label text="House"/>
<Input value="81"/>
<Label text="Street"/>
<Input value="Main Road"/>
<Label text="City"/>
<Input value=""/>
<Label text="PostCode"/>
<Input value=""/>
</form:SimpleForm>
<form:SimpleForm editable="true">
<Label text="Home Tel"/>
<Input value=""/>
<Label text="Mobile No"/>
<Input value=""/>
<Label text="Email"/>
<Input value=""/>
</form:SimpleForm>
</HBox>
</WizardStep>
Current output
A SimpleForm will start a new column if you use a Title element: Simple Form API Doc. You also can control the Layout of the Simple Form by using SimpleFormLayout.
So basically, you need to place content that will actually use the 100% width.
By default it uses 100% with ... your limitation comes from somewhere else in your view.
This wizard takes 100% of your screen:
<mvc:View controllerName="tc_v1.test.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:form="sap.ui.layout.form">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<Wizard id="wizard" complete="onPressReview" finishButtonText="Review" showNextButton="true">
<WizardStep id="wizStep1" validated="true" title="Customer Confirm" icon="sap-icon://customer">
<HBox fitContainer="true">
<form:SimpleForm editable="true">
<Label text="Title"/>
<Input value="MR"/>
<Label text="Name"/>
<Input value="John"/>
<Input value="Smith"/>
<Label text="House"/>
<Input value="81"/>
<Label text="Street"/>
<Input value="Main Road"/>
<Label text="City"/>
<Input value=""/>
<Label text="PostCode"/>
<Input value=""/>
</form:SimpleForm>
<form:SimpleForm editable="true">
<Label text="Home Tel"/>
<Input value=""/>
<Label text="Mobile No"/>
<Input value=""/>
<Label text="Email"/>
<Input value=""/>
</form:SimpleForm>
</HBox>
</WizardStep>
<WizardStep id="id_wizStp2" validated="true" title="Step 2"/>
<WizardStep id="id_wizStp3" validated="true" title="Step 3"/>
</Wizard>
</content>
</Page>
</pages>
</App>
</mvc:View>
I'm currently working on a page that is made with openui5, what I need to do is to insert a captcha, but as far as I know there is no captcha in openui5, what I was trying is to insert HTML content into this.
The problem is, my views are in XML and I did try to insert directly using tags and changing the content, but wasn't possible, it says incorrect xml parsing.
Part of my code of where I want to input my html div:
<Page id="page1" class="marginBoxContent" showHeader="false" showFooter="false" enableScrolling="true">
<content>
<Image src="../../image/logo.svg" />
<l:Grid
defaultSpan="L12 M12 S12"
width="100%">
<l:content>
<f:Form id="FormChange354"
minWidth="1024"
maxContainerCols="2"
editable="true">
<f:layout>
<f:ResponsiveGridLayout
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1" />
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="{i18n>Language}">
<f:fields>
<Select id="animationSelect" selectedKey="en" change="languageChange">
<core:Item text="English" key="en" />
<core:Item text="Português" key="pt" />
<core:Item text="Español" key="es" />
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="{i18n>User}">
<f:fields>
<Input id="username" value="" type="Email" />
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="{i18n>Password}">
<f:fields>
<Input id="password" type="Password" placeholder="" value="" />
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="">
<f:fields>
<Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
<l:VerticalLayout>
<Link text="{i18n>CreateUser}" press="navCreateUser" />
<Link text="{i18n>RecoverPass}" press="navRecoverPass" />
<Link text="{i18n>ChangePass}" press="navChangePass" />
</l:VerticalLayout>
</l:content>
</l:Grid>
</content>
I want to insert exaclty here:
<f:formElements>
<f:FormElement label="">
<f:fields>
<Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
</f:fields>
</f:FormElement>
</f:formElements>
Inside the fields xml or before, because the captcha will appear above the login button.
The content of the div I want to insert is from google captcha:
<div id='recaptcha' class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible"></div>
Couldn't have success yet, anybody can help me with that?
Maybe is something about the namespace, I don't know, here is my namespace config:
<mvc:View
height="100%"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
controllerName="hiddenName.app.login.view.Login">
Thanks a lot for your time!
thank you for every help. I got some help from all comments, what I did was declare the namespace to html:
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns:html="http://www.w3.org/1999/xhtml"
height="100%"
controllerName="hiddenName.app.login.view.Login"
>
And simply added the tag as I show down here:
<html:div id="recaptchaGoogle" class="g-recaptcha" data-sitekey="yourKey"></html:div>
Also remember to declare the import of the google js(added it on my index):
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
I'm still trying to figure out how to get this captcha answer and pass or not to the login.
With that, the captcha appears and is generated.
Thank you!
To insert HTML in a XML view you could use the HTML control from the sap.ui.core library. You will have to escape the HTML text before using it in XML.
<core:HTML content='<div id="recaptcha" class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit" data-size="invisible"></div>' />
I am trying to submit some data in JSF. The problem is that I have two forms and the button which I want to trigger the update is outside of the forms, here I place my code so that you can understand better what I mean. Because of that I cannot submit any data to the server.
<ui:define name="mainArea">
<h:form id="form">
<div class="row">
<div class="col-md-5">
<p:outputLabel for="rfqName" value="Name" />
<br></br>
<p:inputText id="rfqName" required="true" style="width:100%;"
value="#{data.data.rfqName}" maxlength="100">
<p:ajax event="change" update="#form"/>
</p:inputText>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p:outputLabel for="rfqVersion" value="Version" />
<br></br>
<p:inputText id="rfqVersion" required="true" style="width:60%;"
value="#{data.data.rfqVersion}" maxlength="20"></p:inputText>
</div>
</div>
</h:form>
</ui:define>
<ui:define name="actionSection">
<p:commandButton actionListener="#{logic.close}" value="Proceed" update=":form"
styleClass="pull-right">
</p:commandButton>
<p:commandButton value="Save" styleClass="pull-right" />
</ui:define>
You can use the primefaces RemoteCommand. This allows you to click the button on the form from the outside.
<ui:define name="mainArea">
<h:form id="form">
<div class="row">
<div class="col-md-5">
<p:outputLabel for="rfqName" value="Name" />
<br></br>
<p:inputText id="rfqName" required="true" style="width:100%;"
value="#{data.data.rfqName}" maxlength="100">
<p:ajax event="change" update="#form" />
</p:inputText>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p:outputLabel for="rfqVersion" value="Version" />
<br></br>
<p:inputText id="rfqVersion" required="true" style="width:60%;"
value="#{data.data.rfqVersion}" maxlength="20"></p:inputText>
</div>
</div>
<p:remoteCommand name="remoteClose" actionListener="#{logic.close}"
update=":form" styleClass="pull-right" />
<p:remoteCommand name="remoteSave" value="Save"
styleClass="pull-right" />
</h:form>
</ui:define>
<ui:define name="actionSection">
<p:commandButton type="button" onclick="remoteClose()" value="Proceed" />
<p:commandButton type="button" onclick="remoteSave()" value="Save"
styleClass="pull-right" />
</ui:define>
In order to replace the default Spring security login form I came up with this solution:
<form name="f" action="../j_spring_security_check" method="POST" >
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputText id="j_password" />
</h:panelGrid>
<h:commandButton value="Login" />
</form>
But instead of plain <form> tag I would like to use <h:form> since Primefaces components only work within <h:form>. Using <h:form> the form action will be set automatically by JSF to the current page, not to the value set by me in the example above. Where to I have to code the action "../j_spring_security_check" now? I tried putting it into the <h:commandButton> as follows but that doesn't work:
<h:form name="f">
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputText id="j_password" />
</h:panelGrid>
<h:commandButton value="Click here" action="../j_spring_security_check" />
</form>
It leads to the error message Unable to find matching navigation case with from-view-id '/login.xhtml' for action '../j_spring_security_check' with outcome '../j_spring_security_check'.
Is it the only way to define a navigation case in faces-config.xml? I want to avoid using a bean for this simple use case.
The best solution for me is to use the default <button> tag instead. Since typical button styling is not being applied (in my case I am using Primefaces), I set it manually. Here's the whole result:
<h:outputStylesheet library="primefaces" name="jquery/ui/jquery-ui.css" />
<h:outputStylesheet library="css" name="login.css" />
<div class="message">
<c:if test="#{param.error == 1 and SPRING_SECURITY_LAST_EXCEPTION != null}">
<span class="error">#{SPRING_SECURITY_LAST_EXCEPTION.message}</span>
</c:if>
</div>
<div class="login">
<form action="../j_spring_security_check" method="post">
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputSecret id="j_password" />
</h:panelGrid>
<div class="submit">
<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">Login</span>
</button>
</div>
</form>
</div>
<h:form id="login" prependId="false" onsubmit="document.getElementById('login').action='j_security_check';">
Your action attribute should be an EL expression like follows:
action="#{managedBean.method}"
Your best chance is to use the onclick property of the button. This is an example with a primefaces commandButton, but it will also work for jsf components because it uses the (native) javascript onclick function.
<h:form>
<p:commandButton value="Submit" onclick="alert('JS!')" actionListener="#{tweetBean.addTweet()}" update=":tabView,:trends,:tweetsnr" />
</h:form>