How to achieve the following structure dynamically in GWT without using the HTMLWidget?
<div class="samplecheckbox">
<label><input type="checkbox">Remember me</label>
</div>
Simple solution
Create an instance of FlowPanel. (This creates the outer div)
Add the Checkbox to it. (This creates the checkbox to div with label embedded)
This should work:
Element divElem = DOM.createDiv();
divElem.addClassName("samplecheckbox");
Element labelElem = DOM.createLabel();
Element checkElem = DOM.createInputCheck();
checkElem.setInnerText("Remember me");
labelElem.appendChild(checkElem);
divElem.appendChild(labelElem);
Related
I would like to create a dynamic form using polymer, meaning that everytime the user press "add" button,it will add a new field in the form. Or, more specifically, it will add a paper-dropdown-menu, where all of the options come from a dom-repeat fed by an ajax call.
this is what i've done so far:
<div id="filterContainer">
<div class="flex rulesForm" id="filter1">
<paper-dropdown-menu name="rule1A" no-label-float>
<paper-listbox attr-for-selected="value" selected="{{filter1A}}" class="dropdown-content" id="thirdPartyFilter1A">
<template is="dom-repeat" items="{{rule1A}}">
<paper-item value="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
</div>
<paper-button raised on-tap="addFilterField">Add</paper-button>
<div>
and in the JS:
addFilterField: function () {
let dropdown = document.createElement('paper-dropdown-menu');
dropdown.name = "";
dropdown.noLabelFloat = true;
let listbox = document.createElement('paper-listbox');
listbox.class = "dropdown-content";
listbox.attrForSelected = "value";
listbox.selected = "{{filter1A}}";
let paperItem = document.createElement('paper-item');
paperItem.value = "[[item]]";
var itemNode = document.createTextNode('[[item]]');
paperItem.appendChild(itemNode);
listbox.appendChild(paperItem);
dropdown.appendChild(listbox);
console.log(dropdown);
filterContainer.appendChild(dropdown);
my problem is about the data-binding... If I use createTextNode with [[item]], it will simply write it as a string in the document. Is there a way to fix this? (or a way easier solution to add field in a form?)
first of all you cannot use binding notation in javascript. it is markup
2nd, polymer doesn't yet support creating data bindings dynamically. however I'm sure you can accomplish what you are trying to do.
3rd,
you have to use the Polymer Dom API. https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-api
instead of paperItem.appendChild(itemNode)
you would use
Polymer.dom(listbox).appendChild(itemNode);
I am trying to build a small, 3 step form. It would be something similar to this:
The way I did this in react was by using redux to track form completion and rendering the form body markup based on the step number (0, 1, 2).
In angular 2, what would be a good way to do this? Here's what I am attempting at the moment, and I'm still working on it. Is my approach fine? Is there a better way to do it?
I have a parent component <app-form> and I will be nesting inside it <app-form-header> and <app-form-body>.
<app-form>
<app-header [step]="step"></app-header>
<app-body [formData]="formData"></app-body>
</app-form>
In <app-form> component I have a step: number and formData: Array<FormData>. The step is just a index for each object in formData. This will be passed down to the header. formData will be responsible the form data from user. Each time the form input is valid, user can click Next to execute nextStep() to increment the index. Each step has an associated template markup.
Is there a better way to do something like this?
don't overdo it, if it is a simple form you don't need to use the router or a service to pass data between the steps.
something like this will do:
<div class="nav">
</div>
<div id="step1" *ngIf="step === 1">
<form></form>
</div>
<div id="step2" *ngIf="step === 2">
<form></form>
</div>
<div id="step3" *ngIf="step === 3">
<form></form>
</div>
It's still a small template, and you kan keep all of the form and all the data in one component, and if you want to you can replace the ngIf with something that switches css-classes on the step1,2,3 -divs and animate them as the user moves to the next step
If you want to keep things extensible, you could try something like this:
<sign-up>
<create-account
[model]="model"
[hidden]="model.createAccount.finished">
</create-account>
<social-profiles
[model]="model"
[hidden]="model.socialProfiles.finished">
</social-profiles>
<personal-details
[model]="model"
[hidden]="model.personalDetails.finished">
</personal-details>
</sign-up>
export class SignUpVm {
createAccount: CreateAccountVm; //Contains your fields & finished bool
socialProfiles: SocialProfilesVm; //Contains your fields & finished bool
personalDetails: PersonalDetailsVm; //Contains your fields & finished bool
//Store index here if you want, although I don't think you need it
}
#Component({})
export class SignUp {
model = new SignUpVm(); //from sign_up_vm.ts (e.g)
}
//Copy this for personalDetails & createAccount
#Component({})
export class SocialProfiles {
#Input() model: SignUpVm;
}
what is the best way to clear bootstrap modal form data without using jquery?
I could use this, but I would like to know the angular way of clearing modal form data.
$('#myModal').on('hidden', function () {
$('#Username').val("");
});
Edit:
I have multiple elements on the form. I found out the easiest way is to create a service to reset the object and updates the ng-models on the form.
To reset the form object, call the shared service to reset: mySharedService.resetObj(); To clear the form in controller:
$scope.myObj = mySharedService.getObj();
$scope.myForm={};
$scope.myForm.myData = angular.copy($scope.myObj);
all the elements is under the 'myData' item.
Use ng-bind to set the value of whatever inside the <div class="modal-body"> equal to a $scope variable, then change the $scope variable on whatever action you want, most likely on the cancel event, like so:
$scope.cancel = function () {
$scope.yourVariable = "";
$modalInstance.dismiss('cancel');
};
the binding is like this:
<div class="modal-body">
<div ng-bind="yourVariable"></div>
</div>
Here is the zul file for reference
<?page title="MVVM Tree POC"?>
<zk>
<borderlayout height="800px">
<west size="25%"></west>
<center>
<window apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.nagarro.viewmodel.TreeViewModel')"
title="Dynamic Tree" border="normal">
<tree checkmark="true" model="#bind(vm.treeModel)"
onSelect="#command('select')" >
<template name="model" var="node" status="s">
<treeitem checkable="#load(node.checkable)"
open="true">
<treerow style="text-align:center;">
<treecell
label="#bind(node.data.firstName)" style="text-align:left;">
</treecell>
</treerow>
</treeitem>
</template>
</tree>
</window>
</center>
</borderlayout>
</zk>
There is a "onSelect" event in the tree tag and there are checkboxes for some treeItems only. Now, I want to create certain components like a combobox for the corresponding tree row when its checkbox is selected. I am trying to do it with the onSelect event of the tree but the problem is I need to pass the reference of the selected checkbox which I am unable to pass as the onSelect event is kept outside the scope of the template through which treeItems are getting rendered.
Is there any other way out to do what I want
This is the page which I get through the above zul file.
I want to know which checkbox is selected ?
You can pass any parameter on every event like that (from ZK docs):
<button label="Delete" onClick="#command('delete', item=item)"/>
and use this parameter in your java code:
#Command
public void delete(#BindingParam("item") Item item ) {
//do some stuff based on what item you've picked
}
In your case I would move onSelect-Event from Tree-Component to Treeitem, like this:
<tree checkmark="true" model="#bind(vm.treeModel)">
<template name="model" var="node" status="s">
<treeitem checkable="#load(node.checkable)"
open="true" onSelect="#command('select', nameParameter=node.data.firstName">
<treerow style="text-align:center;">
<treecell
label="#bind(node.data.firstName)" style="text-align:left;">
</treecell>
</treerow>
</treeitem>
</template>
</tree>
and use parameter in your #Command-method:
#Command
public void select(#BindingParam("nameParameter") String nameParameter ) {
System.out.println(nameParameter + " selected");
}
See ZK MVVM > Advance > Parameter Docs for more information
This is an issue I often run into. My solution has always been to attach data to the component itself; keep a database entity's id or an object itself on the checkbox for retrieval during the event.
checkbox.setAttribute("myAttributeName", myAttributeValue);
This requires a cast to retrieve, which is unfortunate, but with some best practices you can do so confidently.
I'm building a "buffet menu list" form which has a lot of options for the "menu" radiobutton.
However I noted that all those values are "inline" just like in this example: http://demo.atk4.com/demo.html?t=14
I'd like to know in first instance how could I add a line break on every value, and then, how could I simulate groups by adding some sort of < p> < /p> between specific option values (logical grouping).
Thanks in advance!
There are two solutions I can think of.
Look at the examples here for some inspiration:
http://agiletoolkit.org/doc/grid/columns
1. Adding custom field to grid
First, create a form with no mark-up:
$form = $this->add('Form',null,null,array('form_empty'));
Next, add Grid into a form like this:
$grid = $form->add('Grid'); // or MVCGrid if you are using models
Add a column for selection:
$grid->addColumn('template','selection')
->setTemplate('<input type=radio name=selection value="<?$id?>"/>');
Finally - make sure the column 'selection' is first (or last)
$grid->addOrder()->move('selection','first')->now();
Finally you need to manually look into the POST data, because it's not a real form column.
if($form->isSubmitted()){
$this->js()->univ()->successMessage('Selection is '+((int)$_POST['selection']))
->execute();
}
You must remember that accessing POST directly exposes you to injection attack and you must validate it properly. Grid also MUST be inside the form, however you can place submit button anywhere else on your page. You can also use "Form_Plain", see "http://agiletoolkit.org/whatsnew" for an example.
2. Using JavaScript and hidden field
In this example you can add a bunch of Radio button elements and tie them to a form. I've also using "Lister" here instead of "Grid", of course you can mix-and-match those approaches.
$form = $this->add('Form');
$selection = $form->addField('line','selection');
// can be placed anywhere.
$menu = $this->add('MVCLister',null,null,array('view/menu'));
$menu->setModel('MenuItems');
$menu->js(true)->find('input[type=radio]')->click(
$selection->js()->_enclose()->val(
$this->js()->_selectorThis()->val()
);
);
// produces $('#menu_id').find('input[type=radio]').click(function(){
// $('#selection_id').val( $(this).val() );
// }
Your view/menu.html template file could look like this:
<div class="menu-container">
<?rows?><?row?>
<div><input type="radio" name="anything" value="<?$id?>"> <?$name?> </div>
<?/row?><?/rows?>
</div>
EDIT: code which worked for Fernando
$grid->addColumn('template','Menu')
->setTemplate('<input type=\'radio\' name=\'selection\' value="<?$value?>"/> <?$value?>');
if($form->isSubmitted()){
$this->js()->univ()
->successMessage('Hoy: <b>'.$_POST['selection'].'</b>')->execute();
}