Adding * to required form labels - ruby-on-rails

Does anybody have a nice way of adding * to required form labels, without having to turn to tools like SimpleForm?
I did not like the way SimpleForm added all these weird wrappers and classes to my stuff. I thought the point of SimpleForm was to allow you to write simple, semantic form ERB (which it most certainly does) - but not at the same time mess up your existing layout by adding wrappers and classes at random. I always style my forms before I bring them to Rails, so I like to tell it what classes to use, not the other way around.

Can't you just simply style your labels?
Your label:
<label class="required">MyRequiredField</label>
Your css.
label.required:after{content:"*"}
Or am I missing what you're trying to accomplish?

If you don't like their solution you can see how they implemented and roll your own:
https://github.com/plataformatec/simple_form/blob/master/lib/simple_form/helpers/required.rb

Related

How to use "anchor" with associated text (that is not linkable)

From this question (Hyperlink inside label field in Vaadin 12) I was able to use Vaadin's HTML component to create custom html code (and it worked fine, including putting in ahref links etc.)
However, Vaadin provides the "Anchor" component which appears to be the far more powerful (and potentially more secure) way of creating links that can be used to navigate to either other classes I built or to external website (or even to download dynamically generated data in a streaming fashion).
However, what if I want to have both normal "label-like" text and an achor link all appear in a single paragraph? For example, in "normal html", I could just do this:
<p>
This is my normal text.
Download <a href="/resources/excelTemplate.xlsx" download> this Excel file</a>
and follow the instructions therein
</p>
and it would create the link somewhere within my <p>...</p> paragraph. How can I do this in Vaadin with the Anchor object? The best I came up with thus far is to use Horizontal Layout and then add a label, an achor, and then another label -- but that is really really ugly and doesn't technically have the same effect (it won't wrap properly.) The other option is to NOT use "Anchor" but instead just use "HTML" component and just create ahref links everywhere, but that seems a tiny big ugly too (though I suppose it's an ok workaround.). (I'm assuming I can call any UI I build by sticking the url links in the ahref calls....) Thoughts on the "right Java Vaadin" way to do this?
Paragraph p = new Paragraph("para");
Anchor a = new Anchor("go", "www.go.com");
p.add(a);
p.addClickListener(e-> UI.getCurrent().navigate(a.getHref()));
Vaadin 10+ offers you (atleast) three ways to handle this kind of case. You mentioned two of the..
Make composition of components in Java. Instead of VerticalLayout you could wrap the content in Div and using Text component also in Div instead of Label. You can make this kind of custom component by extending Composite.
The second alternative is to use HTML component as you mentioned.
The third alternative is to create custom html polymer template and connect to it with PolymerTemplate class. That will result in custom component that behaves like the custom component of the first option. It is just different way of implementation.
Which one of the three is a correct way. From framework perspective all of them. Which one is correct for you depends on your preference and application.

Editable select/combobox

is there any way (or plugin) to display editable combobox? I have a set of options, but I would like to give possibility to enter custom value.
I've searched the documentation, and I can't find way to do this. I made workaround with javascript, but I'm looking for more elegant solution.
I'm pretty sure that there simply is no HTML form element that does this, and so Rails can't provide you with a helper. As you said, you can work with JS to create something similar (and there should be JS libraries/plugins already out there), or you could just use a select element and add a text field next to it for new values.
HTML5 specification doesn't define such an element. So you may either continue using JS, either try to use autocomplete feature of an input element (although it is not exactly what you want and doesn't compatible with old browsers).

Ember.js Handlebars globalization approach

I am trying to use ember.js in my Rails app.
Have a question specific to globalizing the handlerbars view template content.
Should I try to create myview.handlebars.erb and get the strings translated on the server side (havent tried this) or should I create seperate handlebars templates per each language (doesnt sound like really DRY unless there is a cleaner way)?
Whats the ideal way to go about it?
Did you get this working to your satisfactioin?
Another alternative (what we use at http://travis-ci.org) is i18n-js.
We like it because it lets you keep all your localizations in the same place (config/locales/[x].yml) and automatically adds them into your assets path.
Part of that DRY thing ;)
The syntax in your handlebars is pretty much the same, we just us a handlebars helper
Handlebars.registerHelper('i18n', function(key) {
return new Handlebars.SafeString(I18n.t(key))
});
and then {{i18n "path.to.translation"}} in the handlebars view.
Ember-I18n provides a solution: https://github.com/jamesarosen/ember-i18n

Closer to the HTML...then why the HtmlHelper?

I often see, touted as one of the big benefits of ASP.NET MVC, the fact that it gets you closer to the actual page markup, as opposed to the pseudomarkup of WebForms.
If that's the case, then why does the HtmlHelper exist? It seems like all this LabelFor, TextBoxFor stuff is just as much pseudomarkup as <asp:Label> and <asp:TextBox> are in WebForms.
What am I missing? Why is there an HtmlHelper class? Do people use it in real life?
Whilst you are right in saying that HtmlHelper functions do abstract away the exact markup rendered, the big advantage of this is that the views are more DRY and you are able to pass in the necessary parameters to the functions in order to customise the HTML generated.
Rather than having to manually type out a full <input /> tag, complete with value=<%= Model.Property %>, Html.TextBoxFor is a more concise way of outputting the same thing. And as with all DRY approaches, if you need to change the HTML for all textboxes in your application (e.g. to output a new attribute) all you need to do is change the HtmlHelper method.
They seem to me a little like simple, lightweight partial views that are just designed to output some consistent HTML given some input.
The point of HTML helpers is to eliminate tedious and repetitive <input> tags.
Unlike server-side controls, HTML helpers emit raw, (fairly-)predictable HTML.
It simplifies the creation of those and allows them to be strongly named. Of course people use this!
I don't quite agree with the answers, and i somehow agree with you.
You can think of the helpers as pre-built custom controls, if you want to have some code generated you can make use of the helpers, if you want a clean approach and get closer to the html then don't.
The important point here is that MVC allows you to get close to the html, but does not limit you to only that.
You can create your own helper that created the markup you wish, and use that instead.
At the end of the day, it comes down to your own preference, and you can choose to or choose not to be closer to the html

Should jQueryUI apply styles automatically

I've created a theme and applied it to my ASP.NET MVC site. However, the elements on the page aren't picking up the styles automatically. If I do the following for a specific element they get applied appropriately:
$("input[type=button]").button();
$("input[type=submit]").button();
Am I right in thinking I need to do this for all the different elements? Perhaps incorrectly, I assumed this would be done automatically by referencing the css and custom js files?
Thanks
you can write :submit instead of input[type=submit], but I know that's no the answer of your question.
The jQuery UI library only provides code to style your website, but it doesn't do it automatically. So what you need to do is something like this:
$(":submit, :button, :reset").button();
But sometimes you want to use icons or something like this, then you can use
$("#specificButton").button("option", "...", "...");
I hope it helps!

Resources