Question regarding bootstrap formatting

[Mario Giammarco]

Hello,

If I change table with ul as documentation says I get an unordered list with vertical input fields.

This fields are correctly marked with col-sm bootstrap style.

But the table is a "table-responsive" class and so I am not able to get a layout like this to have a bootstrap table with horizontally aligned input fields:

<div class="container">

  <div class="row">

    <div class="col-*-*"></div>

    <div class="col-*-*"></div>

  </div>

  <div class="row">

    <div class="col-*-*"></div>

    <div class="col-*-*"></div>

    <div class="col-*-*"></div>

  </div>

  <div class="row">

    ...

  </div>

</div>

Can you suggest me a way to render it correctly? Do I need to modify only html code?

Thanks,

Mario

[Edwin Stang]

Well, when going with the <ul> binding, you normally don't use any table tags and thus remove them from your html. The ordering/alignment can then be handled by your html code around in the <ul> in FooPage.html.
The BarPanel.html then defines the nested html code of each element. If you want to combine multiple elements into groups, you have to also group these via NoWicket.

So for your example you have:
<div class="container">
    <ul wicket:id="rows" />
</div>
Inside a ContainerPage.html with a Container model:
public Container {
    public List<Row> getRows(){...}
}

Then for the RowPanel.html:
<div class="row">
    <ul wicket:id="cols" />
</div>

which has the Row model:
public Container {
    public List<Col> getCols(){...}
}

And lastly the ColPanel.html:
<div class="col-*-*">
...
</div>
For your Col model which either defines the editor field directly as in the Dynamic Editor Fields example or wraps another panel which contains the actual editor field.
As can be seen in the live html generated for your browser, the <ul> tag is actually not rendered but only in the html files for metainformation that is being digested by the generated binding. The component it binds is as previously noted "de.invesdwin.nowicket.generated.binding.processor.visitor.builder.component.ModelRefreshingView" which disables rendering the <ul> tag via  "this.setRenderBodyOnly(true);". You can make use of the same method to remove unwanted div or other tags from around your own nested panels.

Though as can be seen this involves quite some code with NoWicket and is feasible. But a more pragmatic approach would be to write a custom component for your layout needs in plain wicket as a replacement (via a binding interceptor) for the ModelRefreshingView and utilize wickets internal repeating abilities as described here: https://cwiki.apache.org/confluence/display/WICKET/ListView+and+other+repeaters
Though there is more documentation available. At least this would lead to one less layer of panels needed and a bit less code. But it depends on the developer which approach is considered easier/faster.

Best regards,
Edwin

[Mario Giammarco]

I have read the alternatives proposed.

I have another idea to suggest. 

If I can change the div with class "form-horizontal" to class "row" I get my goal.

Have you considered one annotation to change class of rendered components?

[sub es]

Hi Mario,

the design goal is not to do everything in the models, instead providing the flexibility to modify the html as needed. The looks are a concern of the html in that regard. Also I guess it is more or less the same development overhead to change an annotation or the html, with the annotation then making nowicket needlessly more complex. Though you can try to convince me otherwise.

Best regards,

Edwin

--
You received this message because you are subscribed to the Google Groups "invesdwin-platform" group.
To unsubscribe from this group and stop receiving emails from it, send an email to invesdwin-platf...@googlegroups.com.
To post to this group, send email to invesdwin...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/invesdwin-platform/19fd78b0-d9b9-434f-9635-270d49ceb0fb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Edwin Stang]

Hi Mario,

did you try yet simply modifying the html to achieve your result as you suggested?

Best regards,
Edwin

To unsubscribe from this group and stop receiving emails from it, send an email to invesdwin-platform+unsub...@googlegroups.com.
To post to this group, send email to invesdwin-platform@googlegroups.com.

[Mario Giammarco]

I had to work on another project. Anyway I am thinking about it. Infact I have not considered that I can modify the css tag on html.

I have also read some articles regarding boostrap. The real problem is that the advantage of css is that you can modify the look of a page without touching html code and html tags.

Bootstrap asks you to use specific tags to obtain the result needed, and it is not good.

I will think again about it.

To unsubscribe from this group and stop receiving emails from it, send an email to invesdwin-platform+unsubscribe@googlegroups.com.

To post to this group, send email to invesdwin-platform@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/invesdwin-platform/19fd78b0-d9b9-434f-9635-270d49ceb0fb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "invesdwin-platform" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/invesdwin-platform/r9sSCERQA8k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to invesdwin-platform+unsub...@googlegroups.com.

To post to this group, send email to invesdwin-platform@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/invesdwin-platform/27dbb341-7f78-4562-94c9-bcf76b717f20%40googlegroups.com.

[Edwin Stang]

If you are unhappy with the looks of specific css classes provided by bootstrap you can override them. See this as an example (getInitializerOverride() uses BootstrapExtensionsHeaderContributor):
https://github.com/subes/invesdwin-nowicket/blob/master/invesdwin-nowicket-parent/invesdwin-nowicket-examples/invesdwin-nowicket-examples-mvp-eva/src/main/java/com/eva/web/EvaWebApplicationConfig.java

This applies the following CSS overrides that change look of bootstrap:
https://github.com/subes/invesdwin-nowicket/blob/master/invesdwin-nowicket-parent/invesdwin-nowicket-examples/invesdwin-nowicket-examples-mvp-eva/src/main/java/com/eva/web/css/ceruleanExtensions.css

Regarding the advantage of css, you have to differentiate between looks vs semantics&layout. Bootstrap allows you to change the looks as you want as seen in the example above. But for layouting and semantics (which includes the behavior and feel of the components being displayed) it requires you to change html tags and css classes. If you are not careful when you override the semantics&layout (which is also possible to do with css here), you could get funny results when you mix components that expect different meanings for their css classes.

Though if you don't like bootstrap, you are free to strip your html files from bootstrap classes and do everything in table layout or some other css framework. Though some predefined components will still use bootstrap for their layouting. But you can also override the default binding builder to replace them with components that use your own css framework. Only the generator itself currently lacks a parameter for allowing to generate css for other frameworks. For this we would have to provide a way to override the HtmlComponentBuilder class (https://github.com/subes/invesdwin-nowicket/blob/master/invesdwin-nowicket-parent/invesdwin-nowicket/src/main/java/de/invesdwin/nowicket/generated/markup/processor/visitor/internal/html/HtmlComponentBuilder.java).
If desired I can provide that mechanism.

Though the power of wicket and thus nowicket only unfolds if you are able to modify the html to change tags and css classes to change the semantics&layout.

Best regards,
Edwin

To unsubscribe from this group and stop receiving emails from it, send an email to invesdwin-platform+unsub...@googlegroups.com.

To post to this group, send email to invesdwin-platform@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/invesdwin-platform/19fd78b0-d9b9-434f-9635-270d49ceb0fb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.