In Wicket, I'd like to subclass TextField form component to add additional markup around the tag.
Why I do not want to create a Panel:
1) I want the web page designer to use the input tag:
<input wicket:id="blah">
2) I don't want the subclass to lose the FormField semantics in Java, e.g.:
field.setRequired(true);, etc.
I'm fine with hard-coding the wrapping markup in Java. But I'd like this to behave like a FormField in Java.
Any ideas? Looked around for examples, but stumped on this one
Edit:
I'm aware of Borders, but my issue with them is you have to add them in both the markup and in Java. For example:
<div wicket:id="border">
<input type="text" wicket:id="field"/>
</div>
--
FormComponent<Integer> field = new TextField<Integer>("field", new Model(1));
field.setRequired(true);
Border border = new MyBorder("border");
border.add(field);
form.add(border);
This makes the web page designer have to be aware of special markup, and the Java can't be encapsulated (as a FormField subclass).
Ah, this is what I wanted via IBehavior:
My wrapper behavior (sorry for the Scala syntax):
class FieldWrapper extends AbstractTransformerBehavior {
def transform(component: Component, output: CharSequence): CharSequence = """
<div class="blah">
Blah blah blah
%s
</div>
""".format(output)
}
My subclass:
class MyField[T](id: String, model: IModel[T]) extends TextField[T](id, model) {
add(new FieldWrapper)
}
Original Markup:
<input type="text" wicket:id="foobar"/>
Generated markup:
<div class="blah">
Blah blah blah
<input type="text" value="" name="foobar" xmlns:wicket="http://wicket.apache.org">
</div>
Thanks S.O. for jumpstarting my mind :-)
You wouldn't even need to subclass TextField. although it might be easier to to so if you want to reuse it. If you just want to add markup outside of the original tag, it's the poster use case for a Border.
If digging into the rendering of a Component is needed
MarkupContainer#onRender()
is your friend.
An example might be:
AbstractTree#onRender()
mf
Related
I am new to Angular2/Typescript, since I come from the Java world, I decided to learn Typescript and Angular2 directly.
I want to leave most of the logic on the server, thus I don't need complex validation management on the client. So all I want is the user to fill out forms, and post/put all the fields to the REST Service.The goal is to leave the client side as light as possible.
I have a form:
<form role="form" (ngSubmit)="onSubmit()" #ArbeitstagForm="ngForm">
and a field in it, some datepickers too: similar like this:
<input type="text" class="form-control pull-right" id="datepicker" [(ngModel)]="model.datum">
When I submit the form, I call this function:
model = new Arbeitstag();
onSubmit(form:any) {
alert(JSON.stringify(this.model));return false;
}
So that alerts me the the entered data as JSON, which I will after send to a REST Service. It works actually great, BUT only when I actually type something into the field, when I have a default value, or I set the field with a datepicker, the model object values will remain empty.
I've found out about the dirty setting of the fields, which are false by default and are getting true when I type something in and that's also what I see when I check firebug, but that's definitely not what I want to achieve.
Is there a way to set all the fields dirty in a form in Angular2? I've found many examples for Angular.js 1, but not for Angular2/Typescript.
Control has a markAsDirty() (and markAsTouched()) method
<input #datePicker="ngForm" type="text" class="form-control pull-right" id="datepicker" [(ngModel)]="model.datum">
<button (click)="datePicker.control.markAsDirty()">update dirty status</button>
Plunker example
What I usually do is get a reference to the form in my component, using ViewChild. With that reference I can mark to form dirty or touched when I need to. Like so:
export class MyComponent implements OnInit, OnDestroy {
#ViewChild('form') form: NgForm;
...
public methodWithFormChange(): void {
this.form.control.markAsDirty();
}
}
;-)
I want to do this in html:
<div class="input-group" id="name">
<input type="text" class="form-control" name="name" placeholder="Name">
<span class="input-group-addon">None</span>
</div>
I try this in GWT Bootstrap:
<b:InputGroup>
<b:TextBox b:id="name" placeholder="Name"/>
<b:InputGroupAddon>
<b:Anchor ui:field="noName" text="None"/>
</b:InputGroupAddon>
</b:InputGroup>
But thus I get the error:
Illegal child <b:Anchor text='Name' ui:field='noName'> in a text-only context. Perhaps you are trying to use unescaped HTML where text is required, as in a HasText widget?: <b:InputGroupAddon> (:56)
Why? b:Anchor implements HasText interface.
My aim is to add a link on which, when a user clicks input will fill value NONE
The HasText bit is about InputGroupAddon, not Anchor. "Text-only context" (implied by implementing HasText) means you can only put, well, text into that widget. Either through the text property (<b:InputGroupAddon text='Name' />) or inside the tags (<b:InputGroupAddon>Name</b:InputGroupAddon>) - those declarations are equivalent. You can't put unescaped HTML or widgets in such a context.
For your use case, I'd recommend using buttons (as the Bootstrap docs suggest):
<b:InputGroup>
<b:TextBox b:id="name" placeholder="Name" />
<b:InputGroupButton>
<b:Button ui:field="noName" text="None" />
</b:InputGroupButton>
</b:InputGroup>
See the demo to see it in action. You can easily style it to your needs (maybe no text and just an icon = "ERASER").
I'm trying to declare these elements in my UiBinder XML:
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" ui:field="lastNameField" maxlength="150" />
Simply put, a label that is associated with a text input.
When I try to compile, however, I get this error:
[ERROR] Cannot declare id="lastName" and ui:field="lastNameField" on the same element Element (:23)
This seems like an idiotic restriction, especially since ui:field doesn't generate an ID. The only solution I've found so far is to assign the ID in the Java code itself like this:
#UiElement InputElement lastNameField;
...
lastNameField.setId("lastName");
This adds needless clutter to my Java. It also adds the complication that if this ID gets updated somewhere down the line, the <label> declaration in the XML will also need to be updated (and there's no #UiElement for the label, so it's pretty much completely invisible from the Java side.)
Is there a way to add an ID to an element with a ui:field declaration from within the UiBinder XML itself?
UiBinder uses the ID to implement its ui:field magic, so no you can't set it from the XML.
The way to do it is to have a Java constant with the ID and use it from both sides:
#UiField(provided = true)
final String lastNameId = Document.get().createUniqueId();
#UiField InputElement lastNameField;
…
lastNameField.setId(LAST_NAME_ID);
and in the XML:
<ui:with field="lastNameId" type="java.lang.String"/>
…
<label for="{lastNameId}">Last Name:</label>
<input ui:field="lastNameField" maxlength="150"/>
Note that I haven't tested the above code with type="java.lang.String", I've always used
a class containing various identifiers instead (or rather, an interface with a generator)
Alternatives are:
if you can, use the alternate syntax for <label>:
<label>Last Name: <input ui:field="lastNameField" maxlength="150"/></label>
read the for="" value from Java to use it in setId(), that way at least you remove duplication, but you'll still have the issue that your IDs possibly won't be unique (as soon as you use your UiBinder-widget more than once)
<label ui:field="lastNameLabel" for="lastName">Last Name:</label>
<input ui:field="lastNameField" maxlength="150" />
#UiField LabelElement lastNameLabel;
#UiField InputElement lastNameField;
…
lastNameField.setIf(lastNameLabel.getHtmlFor());
You may simplify Thomas' answer (a bit) by accessing the id in uibinder like this:
<b:ControlLabel for="{testTextBox.getId}">TextBox</b:ControlLabel>
<b:TextBox ui:field="testTextBox"></b:TextBox>
// In code behind:
#UiField(provided = true)
TextBox testTextBox = new TextBox();
...
testTextBox.setId("test");
this.initWidget(uiBinder.createAndBindUi(this));
If you use GWT Bootstrap there is a handy feature that let's you wire up everything in xml only:
<b:ControlLabel for="{testTextBox.getId}">TextBox</b:ControlLabel>
<b:TextBox ui:field="testTextBox" b:id="test"></b:TextBox>
b:id="test" works for all gwtbootstrap3 widgets.
I'm trying to make a Widget that generalizes a bootstrap style from twitter for collapsible items.
I got to make it work hardcoding it, but I find some dificulties abstracting it.
The widget looks like:
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
... text to show collapsed ...
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
... anything to show expanded ...
</div>
</div>
</div>
</div>
The thing is, this uses a javascript which depends on ids of some div tags. The generalized widget would need this to be randomized or depending on some seed passed in the constructor.
It would also be nice to have access to those generated Strings from Java part, as it would be a fancy way to set the text showing in the widget.
My first approach was to use something like <ui:with type="com.a.b.c.IdGenerator" field="idGenerator"></ui:with> but it seems to instanciate dynamically the class IdGenerator so no access to the Strings is obtained in Java part.
Is there any fancy way to dinamically generate those Strings having access to them from the Java part?
You simply need a #UiField IdGenerator idGenerator on the Java side to have the instance created by the <ui:with> injected in it (or you can #UiField(provided = true) it).
Suppose there is an image_url column in database.
I want the user to choose from several recommended images,which is something like this:
<input type="radio" value="domain.com/path_to_img1" name="image_url" />
<img src="domain.com/path_to_img1" />
<input type="radio" value="domain.com/path_to_img2" name="image_url" />
<img src="domain.com/path_to_img2" />
Where the image urls are generated on the fly.
How to do this in a symfony flavor by sfForm?
I tried this:
$form->widgetSchema['key'] = new sfWidgetFormSelect(...)
But get a fatal error:
Cannot access protected property
But what's the exact way to do this?
Well, standart approach is to write a widget.
In your concrete case it seems you actually want to perform a choice, right? So you have to implement another sfWidgetFormChoice renderer. To do that, inherit sfWidgetFormSelectRadio (let's call them sfWidgetFormSelectRadioImage) to learn them to render labels as <img> tags. Then ask sfWidgetFormChoice explicitly to render itself with sfWidgetFormSelectRadioImage class, and that should be all.
In your form configuration insert the following:
$this->widgetSchema['choices'] = new sfWidgetFormChoice (array('choices' => $custom_values_array));