I want to load set a class for a HTML componenet <h:li /> like this :
<h:li class="#load(vm.className)" />
but I can't and I can't use a ZK componenent.
Any suggestion will be welcome, Thank you
EDIT
here's the error :
org.zkoss.zel.ELException: The identifier [class] is not a valid Java identifier as required by section 1.19 of the EL specification (Identifier ::= Java language identifier). This check can be disabled by setting the system property org.zkoss.zel.impl.parser.SKIP_IDENTIFIER_CHECK to true.
That's because "class" is a Java keyword (i.e. you cannot use it as a name). So zk uses "sclass" instead to work around this.
So, try this: <h:li sclass="#load(vm.className)" />
To help understand what is going on: If you write something like <component property="something" /> in zul, zk will at some point call component.setProperty(something). So in your case, even without "class" being a Java keyword, it would have complained that there is no setClass method on li.
If you have trouble setting a property in the future, just open the Java class of the component you are trying to create and check whether it actually has a setter for the property.
Edit after feedback from Op:
#KiloBatata There is another possibility, though: Use the xhtml
namspace instead of the native one. I have just tried it :
<h:li xmlns:h="http://www.w3.org/1999/xhtml" sclass="#load(vm.className)" />
gives me
<li id="z_3" class="hello-world"></li>
Using the xhtml namespace instead of the native one helped, as the native one does not create any widget or components for the DOM elements.
Related
Can I set data-* attribute with Thymeleaf?
As I understood from Thymeleaf documentation I tried:
<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->
<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->
Yes, th:attr to the rescue Thymeleaf documentation - Setting attribute values.
For your scenario, this should do the job:
<div th:attr="data-el_id=${element.getId()}">
XML rules do not allow you to set an attribute twice in a tag, so you can't have more than one th:attr in the same element.
Note: If you want more that one attribute, separate the different attributes by comma:
<div th:attr="data-id=${element.getId()},data-name=${element.getName()}">
With Thymeleaf 3.0 there is the Default Attribute Processor which can be used for any kind of custom attributes, e.g. th:data-el_id="" becomes data-el_id="", th:ng-app="" becomes ng-app="" and so on. There is no need for the beloved data attribute dialect anymore.
This solution I prefer, if I want to use json as the value, instead of:
th:attr="data-foobar='{"foo":'+${bar}+'}'"
You can use (in combination with literal substitution):
th:data-foobar='|{"foo":${bar}}|'
Update: If you don't like the th namespace, you can also use HTML5 friendly attribute and element names like data-th-data-foobar="".
If someone is interested, related template engine tests can be found here: Tests for Default Attribute Processor
Or you can use this Thymeleaf dialect https://github.com/mxab/thymeleaf-extras-data-attribute and you'll be able do
<div data:el_id="${element.getId()}">
IntelliJ IDEA uses .form file format for describing Swing forms.
Let's take MyForm.form file as an example (I skip irrelevant content)
<component id="d32e0" class="javax.swing.JCheckBox">
<properties>
<text value="CheckBox"/>
</properties>
</component>
My question is simple: why not to use attribute "text" instead of tag "text"?
<component id="d32e0" class="javax.swing.JCheckBox" text="CheckBox">
</component>
There might be several reasons:
Using attributes they would have to discern between "property" attributes (e.g. "text") and non-property attributes (e.g. "id", "class") which must be treated differently.
Using nested structures also allow to set nested properties like List or Map properties.
Because the allowed properties are not known upfront it would be hard to define XML validation schemas or DTDs when attributes are used. Using a tag allows to validate the overall structure and only put in a wildcard in the properties section.
Then the XML dialect/grammar would have to allow the text attribute for every component even if the concrete Component subclass doesn't support text. Logically it would be dependent of the value of the class attribute. In fact the component tag then would have to allow every possible attribute of every possible class that inherits from Component - impossible, as it is open.
The attribute form may look easier for a single value but as soon as more than one attribute value has to be set writing it as list is better readable. But then I think this file is not edited by hand.
If it is not a pure XML dialect than a mix of (undeclared) attribute and list declaration would be possible. In fact the text tag in itself smells.
Working with Polymer Project markup, the <element> and <polymer-element> tags take an attribute called attributes to publish things in the custom element (1).
This causes problems in jade, since since #617 attributes as an attribute name is treated specially. Is there a workaround for this in Jade?
After the recent update to jade (v1.0.0 and greater) attributes is no longer special cased. As such you can just write:
polymer-element(attributes='foo bar')
results in:
<polymer-element attributes="foo bar"></polymer-element>
If you want to try it out in your browser you can do so at: http://jade-lang.com/demo/
Just put a '\' before the attributes-attribute, like so
polymer-element(\attributes='foo bar')
It was just a guess, but it worked. Can't find any reference in the documentation on this.
So consider it as a work around.
I don't know if this helps in your particular situation, but note that you can use an object property called publish in your prototype in place of the attributes attribute on the <polymer-element>.
E.g.
<polymer-element attributes='foo bar'...>...
is equivalent to
<polymer-element...>...
<script>
Polymer(..., {
publish: {
foo: null,
bar: null
}
}
That way you should be able, at least, to write your own elements without bumping into Jade syntax.
Just to keep this answer up-to-date, attributes is no more reserved in jade :).
Newbie to ASP.net MVC 4 and trying to make sense of Razor. If I wanted to just display some text in my .cshtml page, can I use
<label class="LabelCSSTop">Introduction</label>
or should I use:
#Html.Label("STW", htmlAttributes: new { #class = "LabelCSSTop" })
Not sure if one is preferred over the other or if either is okay. If the latter emits the label tag anyway, should I just stick to the former?
Again, if I just wanted to display a text box, can I just do this:
<input id="txtName" type="text" />
or should I do this:
#Html.TextBox("txtName", "")
Is there a situation when I should use the #Html over the regular html tag?
Thanks in advance!!
In the case of your label snippet, it doesn't really matter. I would go for the simpler syntax (plain HTML).
Most helper methods also don't allow you to surround another element. This can be a consideration when choosing to use/not use one.
Strongly-Typed Equivalents
However, it's worth noting that what you use the #Html.[Element]For<T>() methods that you gain important features. Note the "For" at the end of the method name.
Example:
#Html.TextBoxFor( o => o.FirstName )
This will handle ID/Name creation based on object hierarchy (which is critical for model binding). It will also add unobtrusive validation attributes. These methods take an Expression as an argument which refers to a property within the model. The metadata of this property is obtained by the MVC framework, and as such it "knows" more about the property than its string-argument counterpart.
It also allows you to deal with UI code in a strongly-typed fashion. Visual Studio will highlight syntax errors, whereas it cannot do so with a string. Views can also be optionally compiled along with the solution, allowing for additional compile-time checks.
Other Considerations
Occasionally a HTML helper method will also perform additional tasks which are useful, such as Html.Checkbox and Html.CheckboxFor which also create a hidden field to go along with the checkbox. Another example are the URL-related methods (such as for a hyperlink) which are route-aware.
<!-- bad -->
my link
<!-- good -->
#Html.ActionLink( "my link", "foo", "bar", new{ id=123 } )
<!-- also fine (perhaps you want to wrap something with the anchor) -->
<span>my link</span>
There is a slight performance benefit to using plain HTML versus code which must be executed whenever the view is rendered, although this should not be the deciding factor.
Depends on what your are doing.
If you have SPA (Single-Page Application) the you can use:
<input id="txtName" type="text" />
Otherwise using Html helpers is recommended, to get your controls bound with your model.
If you want to just display some text in your .cshtml page, I do not recommend #Html.Label and also not to use the html label as well. The element represents a caption in a user interface. and you'll see that in the case of #Html.Label, a for attribute is added, referring to the id of a, possibly non-existent, element. The value of this attribute is the value of the model field, in which non-alphanumerics are replaced by underscores.
You should use #Html.Display or #Html.DisplayFor, possibly wrapped in some plain html elements line span or p.
The helpers are there mainly to help you display labels, form inputs, etc for the strongly typed properties of your model. By using the helpers and Visual Studio Intellisense, you can greatly reduce the number of typos that you could make when generating a web page.
With that said, you can continue to create your elements manually for both properties of your view model or items that you want to display that are not part of your view model.
When it comes to labels, I would say it's up to you what you prefer. Some examples when it can be useful with HTML helper tags are, for instance
When dealing with hyperlinks, since the HTML helper simplifies routing
When you bind to your model, using #Html.LabelFor, #Html.TextBoxFor, etc
When you use the #Html.EditorFor, as you can assign specific behavior och looks in a editor view
#html.label and #html.textbox are use when you want bind it to your model in a easy way...which cannot be achieve by input etc. in one line
I have a list of items in an html table. On each row (tr) I'm proceeding like this:
<tr idAffaire="#suite.IdAffaire" idSuite="#suite.IdSuite" class="#suite.Username row droppable">
I used the attributes idAffaire and idSuite for retrieving some infos later. I know the official identification attribute is "id" but in my case I need 2 id. When I compile my code, VS is warning me about some things:
this name contains uppercase characters, which is not allowed.
attribute 'idaffaire' is not a valid attribute of element 'tr'
...
Is it possible to prevent these warnings? Is there a better way of doing?
Thank you.
Yes, in Tools > Options > Text Editor > HTML > Validation > [Untick] Show errors
Ideally, you could use 2 hidden input fields with the id="suite" and value="whatever" to allow you to pick these up in a valid way.
The problem is that you are writing invalid HTML. As you mentioned, id is a valid attribute but idAffaire or idSuite are not. I'm assuming from the fact that you get a warning about uppercase characters, you are using an XHTML doctype. A better way to do this would be to use an HTML5 doctype:
<!DOCTYPE html>
And use custom data attributes for your new attributes:
<tr data-affaire="#suite.IdAffaire" data-suite="#suite.IdSuite" class="#suite.Username row droppable">
I believe you should add name space extension of yours. Then define your newly introduced attributes.
What you are doing is termed as adding custom attributes to html elements, which have a very varying opinion among the experts.
Firstly , using capital in html attributes is not recommended, you can switch to small case.
Secondly , adding custom attributes in XHTML (which i suppose you are using) throws warning, where as this is perfectly valid in HTML5.
there are few option to deal with it -
use Jquery .data() api to store data with java script.
or
follow a specific convention while storing data making it easy to maintain and read.You can follow HTML5 syntax
<ul>
<li data-id='5' data-name='john'></li>
</ul>