ZK 7: Bootstrap support for grid ?

answered 2016-07-19 11:27:52 +0800

Alex91
1

Hey Darksu,

i am also searching for the explanation how to get a basic bootstrap grid or listbox style for the zk components. I allready installed the zk-bootstrap addon, but this doesn't support grids and other nice components. The addon works only for a few components.

Would be very nice if there is a detailed tutorial, or a bigger addon, to get the bootstrap styles for all the zk components, so you can use every of these nice bootstrap themes in the internet like on wrapbootstrap.com

Thank you for help

Alex

answered 2016-07-20 07:34:17 +0800

grzesiek
72 ● 1 ● 5

I'm also interested how to solve this problem :)

answered 2016-07-24 07:31:47 +0800

Darksu
1991 ● 1 ● 4

Hello,

I prefer combining zk with bootstrap using zhtml. It's pretty easy to use and provides a lot of flexibility, freedom, and the end result's are amazing!

Best Regards,

Darksu

answered 2016-08-01 16:23:56 +0800

Alex91
1

Hello Darksu

thank you for your idea with zhtml. How can i use that ? Must i take a special tag ? Have you a link to a little example ?

Best regards

Alex

answered 2016-08-20 05:41:31 +0800

Darksu
1991 ● 1 ● 4

Hello Alex91,

Please find below a simple example:

<zk:zk  xmlns="native" xmlns:x="xhtml" xmlns:sh="shadow" xmlns:zk="zk" xmlns:z="zul">
<x:html lang="en">

<x:body viewModel="@id('vm') @init('java.class')">

<z:textbox value="@bind(vm.project.projectName)" class="form-control" width="100%" placeholder="Enter Project Name" constraint="no empty"></z:textbox>

</x:body>

</x:html>
</zk:zk>

Best Regards,

Darksu

answered 2016-09-27 07:48:06 +0800

Alex91
1

Hello Darksu,

sorry for my late answer. I tried your example with a new maven project and the zk-archetype-webapp 8.0.1.1, but i always get an error. Must i include some dependencies or why i get this error: java.lang.InternalError: Not possible: <Textbox pJ2Q4> I hope you can help me.

Here my code:

<zk:zk  xmlns="native" xmlns:x="xhtml" xmlns:sh="shadow" xmlns:zk="zk" xmlns:z="zul">
<x:html lang="en">

<x:body apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('org.me.test.MyViewModel')">

<z:textbox  value="@bind(vm.count)"  width="100%" placeholder="Enter Project Name" constraint="no empty"></z:textbox>

</x:body>

</x:html>
</zk:zk>

Here the full error message:

Exception in thread "http-nio-8080-exec-7" java.lang.InternalError: Not possible: <Textbox pJ2Q4>
at org.zkoss.zk.ui.sys.HtmlPageRenders.outStandalone(HtmlPageRenders.java:956)
at org.zkoss.zhtml.impl.AbstractTag.redrawChildrenDirectly(AbstractTag.java:304)
at org.zkoss.zhtml.impl.AbstractTag.redraw(AbstractTag.java:276)
at org.zkoss.zhtml.Body.redraw(Body.java:47)
at org.zkoss.zhtml.impl.AbstractTag.redrawChildrenDirectly(AbstractTag.java:300)
at org.zkoss.zhtml.impl.AbstractTag.redraw(AbstractTag.java:276)
at org.zkoss.zhtml.Html.redraw(Html.java:53)
at org.zkoss.zk.ui.sys.HtmlPageRenders.outPageContent(HtmlPageRenders.java:688)
at org.zkoss.zul.impl.PageRenderer.renderDesktop(PageRenderer.java:104)
at org.zkoss.zul.impl.PageRenderer.render(PageRenderer.java:56)
at org.zkoss.zk.ui.impl.PageImpl.redraw(PageImpl.java:876)
at org.zkoss.zk.ui.impl.UiEngineImpl.execNewPage0(UiEngineImpl.java:548)
at org.zkoss.zk.ui.impl.UiEngineImpl.execNewPage(UiEngineImpl.java:358)
at org.zkoss.zk.ui.http.DHtmlLayoutServlet.process(DHtmlLayoutServlet.java:217)
at org.zkoss.zk.ui.http.DHtmlLayoutServlet.doGet(DHtmlLayoutServlet.java:136)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:622)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:729)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:291)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:219)
at org.apache.catalina.core.StandardContextValve.__invoke(StandardContextValve.java:106)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:502)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:142)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:79)
at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:610)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:88)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:518)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1091)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:668)
at org.apache.coyote.http11.Http11NioProtocol$Http11ConnectionHandler.process(Http11NioProtocol.java:223)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1517)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.run(NioEndpoint.java:1474)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:745)

answered 2016-06-04 08:43:08 +0800

Darksu
1991 ● 1 ● 4

Hello llw1149,

You can refer to the following small talk to get some ideas:

https://www.zkoss.org/wiki/SmallTalks/2013/November/CustomizingBootstrapThemeDemonstration

Also you can download all the code from github.

Best Regards,

Darksu