No table support yet

[mortensen]

Hi Riccardo.

Unfortunatelly I wasn´t able to find any possibility to contact you. Neither on your homepage nor here in GitHub (except a Twitter account, which I don´t have yet). Are there plans for table support in the near soon? Like this here: http://getbootstrap.com/examples/dashboard/. Would be REALLY cool and I am deeply in the need of it. Are you still developing BootsFaces?

Best regards.

[TheCoder4eu]

Hi Frederik, well you are already contacting me on Github(and Twitter), unless you are asking me for my personal email. My apologies for not answering you quickly but I came back from my vacations and had to do a little "housekeeping" at work. Ok, coming back to this issue I do not understand your problem: if you use at least one BootsFaces component in your page (and you should do), core.css should be loaded and the table styling classes of Bootstrap are there. Therefore you should be able to use them either in html markup(static), or in a standard h:dataTable tag as in the following example:

<h:dataTable styleClass="table table-striped" value="#{itemBean.items}" var="item">
<h:column>
    <f:facet name="header"> Item</f:facet>
   #{item.name}
</h:column>

<h:column>
<f:facet name="header"> Code</f:facet>
     #{item.code}
</h:column>
</h:dataTable>

Please let me know if you still have any doubts/issues.

[TheCoder4eu]

As an added Bonus I will add to the examples the dasboard example in the next release.

[mortensen]

Hi Riccardo.

Big big thanks for your fast answer, the html example and your example works for the next release! I will try it these days and definitely come back to you with a success / failed status update! ;) And if you like to, you can add an "About me" page to your site http://www.thecoder4.eu/ so that people can get in touch with you via email. But githup also does its job, thanks again!

Best regards.

[mortensen]

Unfortunatelly I couldnt find a way to paste formatted code in here. So I hope you dont mind my pastebin link:

http://pastebin.com/bZbZzDUB

If I compare this example and the example http://getbootstrap.com/examples/dashboard/ on my mobile phone, I can definitely see a difference. I can see that bootstrap changes my page and that the table is getting somehow formatted (borders are slightly different). But I still cant read the text because it is too small. It is not as sharp and readable as the example on the bootstrap page. And when i change from landscape to portrait, then the bootstrap example removes one column to better fit. My table wont do that. Still 100% visible but small the table. I am very new to bootstrap so I am really Sorry if I am doing something wrong. But I thought when I dont use any other css that could interrupt and when I simply add the bootsfaces classes and the container for bootstrap and your mentioned stylesheet, then the table should look like the one on the bootstrap page? Is that idea wrong? Do they use custom css and other stuff? How is font size etc. affected by default in bootsfaces...?

Maybe you see my problem. Thank you in advance. Appreciate any help in this. I think bootsfaces could be really great if it does what i need it to do ;)

Best regards!!

[TheCoder4eu]

The example uses a responsive table, have a look at the Bootstrap docs here: http://getbootstrap.com/css/#tables-responsive

Until there will not be a tabular component in Bootsfaces, you have to manually surround the h:dataTable tag with a div like in the following example:

<div class="table-responsive">
  <h:dataTable>
    ...
  </h:dataTable>
</div>

I have plans to revise the Thecoder4eu page, I just miss the time.

[mortensen]

Hi again.

First of all thank you again for your help! I finally made it with your tipps and reading the documentation a little more. It seems there are several lines you need:

• Import: xmlns:b="http://bootsfaces.net/ui"
• Meta-Tag: <meta name="viewport" content="width=device-width, initial-scale=1" />
• Container: <b:container>
• Div-Class: <div class="table-responsive">
• Styleclass: class="table table-striped"

Hope this helps out some ppl in here trying to use bootsfaces and bootstrap with tables.

The full example:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:b="http://bootsfaces.net/ui"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><h:outputText value="customers" /></title>
</h:head>

<h:body>
    <f:view>

        <h:form>

            <b:container>
                <div class="table-responsive">
                    <h:dataTable id="customerlist"
                        value="#{customerController.customers}" var="customer"
                        class="table table-striped">
                        <h:column>
                            <f:facet name="header">
                                <div>customername</div>
                            </f:facet>
                            <h:outputText value="#{customer.name}" />
                        </h:column>
                    </h:dataTable>
                </div>
            </b:container>

        </h:form>

    </f:view>
</h:body>

</html>

My next challenge will be a upload and download dialog with bootsfaces. If you like to, you can tell me how to reach you in case of questions. But you dont have to give "full development support", of course ;) This ticket is solved I guess.

[TheCoder4eu]

Have a look to my profile on github, now you will find how to contact me.