I want user to be able to easily upload screenshots into my application. (preferably without to many js/ajax trickery)
Is there a standard way in Wicket to allow an image to be pasted in some FormComponent (textarea? div with contenteditable?) and used as a regular input, so that when the form is posted, I get a byte[]/stream in the Java code?
You have to use <input type="file"> in the markup and FileUpload component at the Java/server code.
If you need fancier ways than Upload button than you will need to use some Javascript library.
Here is the plain Wicket example
If you use Bootstrap then you may use Wicket-Bootstrap integrations like FileInput or DropZone
Related
I'm using react-quill as a text editor and then sending its delta.ops object to my backend.
Now I want to generate HTML from that delta.ops in the frontend without using any external package/library.
I tried some PHP approach from one of the solutions available but the problem is that by doing so I'm not able to add my custom styling to those elements.
suppose I have <strong>hello</strong> now I want to change its font-size and maybe color but unable to do so.
Any help would be appreciated.
We are currently looking to experiment with modern frontend frameworks like react on an MVC4 project. We use data annotations in our models and we have a lot of forms that use unobtrusive validation on the UI.
The main thing is finding a way to use react to generate the content while still being able to make use of features like unobtrusive validation. As I understand it, it really is just a bunch of data-val attributes dynamically generated when using HTML helpers like TextAreaFor, ValidationMessageFor with the attributes getting values from the data annotations in the model classes.
I've tried several things including
ReactDOM.render(
#using (Html.BeginForm("xyz", "xyz", FormMethod.Post))
{
#Html.TextBoxFor(x => x.Email)
which results in the input box not being editable for some reason.
I'd prefer to do something more like
ReactDOM.render(
<form><input type="text" data-val="#Model.datannotations[1].val" /></form>
Is that possible? How does one get the data-val values from the model anyway? What is the best way to achieve this?
it should not be possible.
These are two differents ways to delvelop the ui.
The razor way is preprocessing the markup code in server side to fill it.
And react works in another flow using the lifecycle methods, you should have already loaded the data-anotations values for accessing it on render.
Therefore, to make this works you have to run razor engine first to fill the markup and next using react engine.
I don't recommend use this approach because it's too hard to develop on it and the developers team have to keep that flow in mind while they are developing
Note this
ReactDOM.render(<ComponentMustHaveJSX/>)
I'd like to create form in specific way. The form should be able to render itself based on received data, should be used like that:
<form action="#" th:action="#{/blahblah}" th:formDefinition="${formDef}" th:object="${formData}"method="post">
This should render the necessary input elements in some way, fill in the data etc. Is there a way how to achieve this in Thymeleaf?
Nope there is no such way in pure thymeleaf which you can do this.
But you have an option to do something like this using fragments.
Create a th:fragment which takes the parameters formDef and formData
In the fragment, create a loop and geenrate the form as you want dynamically
Call the fragment using th:include with the real parameters in the places where you need the form to get generated.
Use Apache Freemaker to create templates in Netbeans IDE. Using this templates, auto-generate your forms from your Entities. This allows you to apply the principle of DRY.....Dont Repeat Yourself in your SDLC.
For more infor, watch the below clip on how they have applied the principle:
https://nofluffjuststuff.com/blog/reza_rahman/2015/01/vaadin_cdi_and_java_ee
I devise a web site. I am using PHP, XML and HTML. There is input forms in my HTML files and I want to implement auto-suggestion in input forms.
When you enter search phrase to google's input form, many suggestions appeared in your browser. I exactly want to implement this.
What must I do? Which language/interface/information I need to?
thanks in advance.
Autocomplete is done via JavaScript. Check out the jQuery Autocomplete plugin for a pretty easily library to get started with. You can either include the values to be used for autocomplete in the JavaScript, or you can make an AJAX request to a PHP script which provides suggestions. Feel free to comment if you'd like more help.
This will be the easiest way to get it done...
http://jqueryui.com/demos/autocomplete/
JQuery UI is a javascript framework that has a nice autocomplete implementation: http://jqueryui.com/demos/autocomplete/
Of course you will need the jquery and jquery ui javascript frameworks.
If I write
<form wicket:id="form" id="form>
or even
<form wicket:id="form>...
Then the rendered HTML shows the id 'form' appended with different numbers whenever the page is refreshed e.g.
<form id="form7"....
Is there a way to disable this behavior of the Wicket framework?
We set markup ids by hand extensively on our project to ease automatic testing with Selenium testing framework. It definitely works.
Component.setOutputMarkupId(true); // write id attribute of element to html
Component.setMarkupId("someid"); // id attribute of element is "someid"
This is the behavior you want in most cases when using wicket. The dynamic id is meant to prevent id collisions when Ajax behaviors are added to components or added to ajax responses for refreshing. For any of these situations, you really need both the client response and the server side state to be in cahoots. If there are external js resources you need the id of a component for dom lookup, then I would suggest adding a custom wicket component behavior that would then generate the js call to a function passing in the generated id.
I realize what I'm going to describe leads you more into the forest of Wicket. But I have been more than happy with the ajaxy stuff that Wicket opens up for you out of the box.
This is Wicket desing feature. You can use class for linking styles and components.
<form wicket:id="form" id="form>
Also you can to try (I never did it) setMarkupId . I'm not sure that it good way.
It has been a while since I worked with Wicket, but I remember that when wicket uses ajax elements, its ids are auto-generated (the id of the tag, not the wicket:id). You can control the id of the tag when not using and ajax element. In your case, since there is no code, I would guess that you will have to change any AjaxButton or Ajax* from your form.
Yes you can write custom JavaScript... you just need to implement it according to the 'Wicket way'. You can decorate components, Ajax calls etc. with custom JavaScript, then it all plays nicely.