0

How to wrap components in ZK5

asked 2010-03-12 16:41:24 +0800

twiegand gravatar image twiegand
1807 3

Hello all,

I have a screen running under ZK5 that has a lot of data to display and I've been using multiple Groupboxes without the 3d mold which essentially makes fieldsets. Doing it this way groups the like data fields together in a nice, clean visual way. Plus, they look great on a wide screen because I can put 2 or 3 Groupboxes on a single line.

Here is an example of some code with 2 boxes:

<zk>
	<hbox>
		<groupbox width="600px">
		<caption label="Box1:" />
			<grid>
				<columns>
					<column label="Name" hflex="1"/>
					<column label="Value" hflex="1"/>
				</columns>
				<rows>
					<row>Username:<textbox hflex="1"/></row>
					<row>Password:<textbox hflex="1"/></row>
				</rows>
			</grid>
		</groupbox>

		<groupbox width="600px">
		<caption label="Box2:" />
			<grid >
				<columns>
					<column label="Name" hflex="1"/>
					<column label="Value" hflex="1"/>
				</columns>
				<rows>
					<row>First name:<textbox hflex="1"/></row>
					<row>Last name:<textbox hflex="1"/></row>
				</rows>
			</grid>
		</groupbox>
	</hbox>
</zk>

The problem comes when a user comes along with a screen width that doesn't allow full viewing of all the boxes without scrolling (e.g. the user's screen width is only 800px wide)

What I'd like to be able to do is have the boxes "wrap" to the next line (like what would happen if I changed my <hbox> tags above to <vbox>.

However, try as I might, I cannot seem to get this auto wrapping to occur. At best the field labels within the groupbox will go to multiple lines but at some point the two boxes just start to overlap one another, making some of the fields not readable.

I've tried various combinations of Window, Panel, Columnlayout, Hbox, etc. components but no luck so far.

Does anyone have any ideas on how to make the 2nd groupbox drop down to the next line when the browser width gets too small?

Thanks to everyone who takes the time to read and to reply!

Todd

delete flag offensive retag edit

12 Replies

Sort by ยป oldest newest

answered 2010-03-15 22:04:39 +0800

PeterKuo gravatar image PeterKuo
481 2

Have you tried clientinfo?

http://docs.zkoss.org/wiki/Browser_management#The_onClientInfo_Event
http://www.zkoss.org/javadoc/3.6.0/zk/org/zkoss/zk/ui/event/ClientInfoEvent.html

You may try to layout after knowing the width of client screen width.

If you still have problem, don't hesitate to let us know.

link publish delete flag offensive edit

answered 2010-03-16 11:57:42 +0800

twiegand gravatar image twiegand
1807 3

Thank you for your reply, Peter.

I was hoping there was a way for ZK to wrap the components automatically (sort of like Notepad or Microsoft Word does with words in a paragraph). From your reply, it seems we will have to build multiple layouts within each screen to account for a given user's browser size. Although this is not necessarily a new issue in webpage development, I was hoping ZK had an elegant solution that might alleviate some of the work our team will have due to the sheer number of screens we have to build.

Thanks again for taking the time to respond!

Kind regards,

Todd

link publish delete flag offensive edit

answered 2010-03-16 19:48:45 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

Hi twiegand,
Sounds like a useful feature to have. If you could please submit a feature request using this link

Thanks,
Ashish

link publish delete flag offensive edit

answered 2010-04-19 16:25:53 +0800

twiegand gravatar image twiegand
1807 3

Done: https://sourceforge.net/tracker/?func=detail&aid=2989584&group_id=152762&atid=785194

link publish delete flag offensive edit

answered 2010-11-11 08:53:23 +0800

mirjalali gravatar image mirjalali
27 1

Hello.
I just came into the same problem and saw this thread.
I solved my problem by using the <div> tag instead of <hbox>.
Just wanted to mention, as it might be useful for the others.

link publish delete flag offensive edit

answered 2010-11-11 10:00:43 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2010-11-11 10:20:47 +0800

Please show us a complete little sample with the div

@Todd

i do such things with groupbox mold="3d" and the sizes do automatically. I don't know is this a bug in the default mold.
Second, i use ONE groupbox with columnlayout in it for two columns.

With mold="3d" i can put a toolbar with buttons in the header too, like this pic.

<?xml version="1.0" encoding="UTF-8" ?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>

<zk xmlns="http://www.zkoss.org/2005/zul"
	xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

	<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ -->
	<!-- DataBinding Initiator.                              -->
	<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ -->
	<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./windowArticleDetails1" ?>

	<window id="windowArticleDetails1" apply="${articleDetails1Ctrl}"
		border="none" width="100%">


		<borderlayout id="borderLayout_articleDetails1">
			<center border="none" autoscroll="true">

				<div>
					<groupbox mold="3d" style="padding: 5px"
						closable="false">
						<caption image="/images/icons/view.gif"
							label="${c:l('common.Description')}" />


						<columnlayout>
							<columnchildren width="50%"
								style="padding: 5px">
								<panel border="none">
									<panelchildren>

										<grid
											sclass="GridLayoutNoBorder" fixedLayout="true"
											style="border:0px; padding-left:5px; padding-right:5px;">
											<columns>
												<column width="150px" />
												<column />
											</columns>
											<rows>
												<row>
													<hbox>
														<label
															value="${c:l('common.Article.No')}" />
														<label value="*"
															style="color:red;font-size:10px" />
													</hbox>
													<textbox
														id="txtb_Article_ArticleNo"
														value="@{controller.article.articleNo}"
														constraint="no empty" readonly="true" maxlength="20"
														width="150px" />
												</row>
												<row>
													<hbox>
														<label
															value="${c:l('common.Shorttext')}" />
														<label value="*"
															style="color:red;font-size:10px" />
													</hbox>
													<textbox
														id="txtb_Article_Shorttext"
														value="@{controller.article.shorttext}"
														constraint="no empty" readonly="true" maxlength="50"
														width="99%" />
												</row>

												<row>
													<separator
														bar="true" />
													<separator
														bar="true" />
												</row>

												<!-- ArticleGroup / Artikelgruppe -->
												<row>
													<label
														value="${c:l('common.ArticleGroup')}" />

													<hbox pack="stretch"
														width="100%">
														<textbox
															id="txtb_Article_ArticleGroup"
															value="@{controller.article.articleGroup.groupname}"
															readonly="true" width="100%" />
														<div
															align="left">
															<button
																id="btnSearchArticleGroup" disabled="true" height="24px"
																image="/images/icons/btn_search2_16x16.gif"
																tooltiptext="${c:l('btnSearch.tooltiptext')}" />
														</div>
													</hbox>
												</row>

												<!-- ReleasingUnit / Abgabe Einheit -->
												<row>
													<label
														value="${c:l('common.ReleasingUnit')}" />

													<hbox pack="stretch"
														width="100%">
														<textbox
															id="txtb_Article_ReleasingUnit"
															value="@{controller.article.releasingUnit.unitname}"
															readonly="true" width="100%" />
														<div
															align="left">
															<button
																id="btnSearchReleasingUnit" disabled="true"
																height="24px"
																image="/images/icons/btn_search2_16x16.gif"
																tooltiptext="${c:l('btnSearch.tooltiptext')}" />
														</div>
													</hbox>
												</row>

											</rows>
										</grid>
									</panelchildren>
								</panel>
							</columnchildren>

							<columnchildren width="50%"
								style="padding: 5px">
								<panel border="none">
									<panelchildren>

										<grid
											sclass="GridLayoutNoBorder" fixedLayout="true"
											style="border:0px; padding-left:5px; padding-right:5px;">
											<columns>
												<column width="150px" />
												<column />
											</columns>
											<rows>
												<row>
													<label
														value="${c:l('common.Longtext')}" />
													<textbox
														id="txtb_Article_Longtext"
														value="@{controller.article.longtext}" readonly="true"
														multiline="true" rows="8" width="98%" />
												</row>

											</rows>
										</grid>
									</panelchildren>
								</panel>
							</columnchildren>
						</columnlayout>
					</groupbox>


					<groupbox mold="3d" style="padding: 5px"
						closable="false">
						<caption image="/images/icons/table.gif"
							label="${c:l('common.Prices')} / ${c:l('common.Stock2')}" />

						<columnlayout>
							<columnchildren width="50%"
								style="padding: 5px">
								<panel border="none">
									<panelchildren>

										<grid
											sclass="GridLayoutNoBorder" fixedLayout="true"
											style="border:0px; padding-left:5px; padding-right:5px;">
											<columns>
												<column width="150px" />
												<column width="100%" />
											</columns>
											<rows>
												<row>
													<hbox>
														<label
															value="${c:l('common.ListPrice')}" />
														<label value="*"
															style="color:red;font-size:10px" />
													</hbox>
													<decimalbox
														id="decimalb_ListPrice"
														value="@{controller.article.listPrice}" readonly="true"
														constraint="no empty" style="text-align: right"
														width="50px" />
												</row>
												<row>
													<label
														value="${c:l('common.BasePrice')}" />
													<decimalbox
														id="decimalb_Article_Price"
														value="@{controller.article.basePrice}" readonly="true"
														style="text-align: right" width="50px" />
												</row>

											</rows>
										</grid>
									</panelchildren>
								</panel>
							</columnchildren>

							<columnchildren width="50%"
								style="padding: 5px">
								<panel border="none">
									<panelchildren>

										<grid
											sclass="GridLayoutNoBorder" fixedLayout="true"
											style="border:0px; padding-left:5px; padding-right:5px;">
											<columns>
												<column width="150px" />
												<column width="100%" />
											</columns>
											<rows>
												<row>
													<label
														value="${c:l('common.TotalStockOnHand')}" />
													<intbox
														id="intb_Article_TotalStock"
														value="@{controller.article.totalStock}" readonly="true"
														style="text-align: right" width="50px" />
												</row>
												<row>
													<label
														value="${c:l('common.AvailableStock')}" />
													<intbox
														id="intb_Article_AvailableStock"
														value="@{controller.article.availableStock}"
														readonly="true" style="text-align: right" width="50px" />
												</row>

												<row>
													<separator
														bar="true" />
													<separator
														bar="true" />
												</row>

												<!-- StockPLaces / Lagerplatz -->
												<row>
													<label
														value="${c:l('common.Stockname')}" />

													<hbox pack="stretch"
														width="100%">
														<textbox
															id="txtb_Article_StockPlace"
															value="@{controller.article.stockPlace.stockname}"
															readonly="true" width="100%" />
														<div
															align="left">
															<button
																id="btnSearchStockPlace" disabled="true" height="24px"
																image="/images/icons/btn_search2_16x16.gif"
																tooltiptext="${c:l('btnSearch.tooltiptext')}" />
														</div>
													</hbox>
												</row>

											</rows>
										</grid>
									</panelchildren>
								</panel>
							</columnchildren>

						</columnlayout>
					</groupbox>
				</div>

			</center>
		</borderlayout>


	</window>
</zk>

link publish delete flag offensive edit

answered 2010-11-11 10:13:41 +0800

twiegand gravatar image twiegand
1807 3

updated 2010-11-11 10:17:45 +0800

Like this:
 

<zk>
	<div style="float: left;">
		<groupbox width="600px">
		<caption label="Box1:" />
			<grid>
				<columns>
					<column label="Name" hflex="1"/>
					<column label="Value" hflex="1"/>
				</columns>
				<rows>
					<row>Username:<textbox hflex="1"/></row>
					<row>Password:<textbox hflex="1"/></row>
				</rows>
			</grid>
		</groupbox>
	</div>
	<div style="float: left;">
		<groupbox width="600px">
		<caption label="Box2:" />
			<grid >
				<columns>
					<column label="Name" hflex="1"/>
					<column label="Value" hflex="1"/>
				</columns>
				<rows>
					<row>First name:<textbox hflex="1"/></row>
					<row>Last name:<textbox hflex="1"/></row>
				</rows>
			</grid>
		</groupbox>
	</div>
</zk>

It is a work-around, but it works... :-)

Todd

link publish delete flag offensive edit

answered 2010-11-12 12:03:54 +0800

mirjalali gravatar image mirjalali
27 1

Yes "twiegand" did it well.
My own example is:

<zk>
	<div>
		<div style="float: left;">
			<groupbox width="500px">
				<caption label="Box1:" />
				<grid>
					<columns>
						<column label="Name" hflex="1"/>
						<column label="Value" hflex="1"/>
					</columns>
					<rows>
						<row>Username:<textbox hflex="1"/></row>
						<row>Password:<textbox hflex="1"/></row>
					</rows>
				</grid>
			</groupbox>
		</div>
	
		<div style="float: left;">
			<groupbox width="500px">
				<caption label="Box2:" />
				<grid >
					<columns>
						<column label="Name" hflex="1"/>
						<column label="Value" hflex="1"/>
					</columns>
					<rows>
						<row>First name:<textbox hflex="1"/></row>
						<row>Last name:<textbox hflex="1"/></row>
					</rows>
				</grid>
			</groupbox>
		</div>
	</div>
</zk>

But, if the internal parts of the main <div> were not groupboxes,
it would not needed to enclose the groupboxes with <div style="float: left;"></div> tags.
Can anybody explain why this is specially needed for groupbox?

link publish delete flag offensive edit

answered 2011-05-15 00:55:16 +0800

dagarwal82 gravatar image dagarwal82
246 4

Hey Terry,

How did you able to show toolbar in the groupbox header ?

link publish delete flag offensive edit

answered 2011-05-15 07:05:17 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2014-07-15 10:27:43 +0800

You can place the toolbar in the caption of a groubox or panel like this pic .

        <groupbox mold="3d" closable="false">
                            <caption image="/images/icons/view.gif"
                                label="${c:l('common.Order.Positions')}">

                                <div sclass="z-toolbar"
                                    style="padding:0">
                                    <hbox pack="stretch"
                                        sclass="hboxRemoveWhiteStrips" width="100%">

                                        <toolbar align="start"
                                            style="float:left; border-style: none;">
                                        </toolbar>

                                        <toolbar align="center"
                                            style="float:left; border-style: none;">
                                        </toolbar>

                                        <toolbar align="end"
                                            style="float:right; border-style: none;">
                                            <button id="btnNew"
                                                height="24px" tooltiptext="${c:l('btnNew.tooltiptext')}" />
                                            <button id="btnEdit"
                                                height="24px" tooltiptext="${c:l('btnEdit.tooltiptext')}" />
                                            <button id="btnDelete"
                                                height="24px" tooltiptext="${c:l('btnDelete.tooltiptext')}" />
                                            <button id="btnSave"
                                                height="24px" tooltiptext="${c:l('btnSave.tooltiptext')}" />
                                            <button id="btnCancel"
                                                height="24px" tooltiptext="${c:l('btnCancel.tooltiptext')}" />
                                        </toolbar>
                                    </hbox>
                                </div>
                            </caption>

                        <panel border="none">
                            <panelchildren>

                                                     . . .

                            </panelchildren>
                        </panel>
                    </groupbox>

best Stephan

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-03-12 16:41:24 +0800

Seen: 1,323 times

Last updated: May 27 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More