0

BorderLayout add button in the Center title

asked 2014-03-19 19:08:01 +0800

gyowanny gravatar image gyowanny
283 1 2 6

Hi,

Is this possible to add buttons in the Center's title component? I would like something like this screenshot

Thank you,

Gyo

delete flag offensive retag edit

6 Answers

Sort by ┬╗ oldest newest most voted
2

answered 2014-03-20 01:29:21 +0800

vincentjian gravatar image vincentjian
2245 6

Hi, Center component support Caption since ZK 6.5.0. Here is the sample usage if you are using ZK 6.5.0.

<zk>
    <borderlayout hflex="1" vflex="1">
        <north title="North" size="20%"></north>
        <center>
            <caption label="Center">
                <hbox align="center" pack="end">
                    <button label="button 1"/>
                    <button label="button 2"/>
                </hbox>
            </caption>
            <div>
                Center Content
            </div>
        </center>
    </borderlayout>
</zk>
link publish delete flag offensive edit
0

answered 2014-03-20 19:25:16 +0800

gyowanny gravatar image gyowanny
283 1 2 6

Awesome,

worked like a charm screenshot

Thank you,

Gyo

link publish delete flag offensive edit
0

answered 2014-04-01 10:58:57 +0800

chillworld gravatar image chillworld flag of Belgium
5322 4 9
https://github.com/chillw...

updated 2014-04-01 11:19:12 +0800

<zk>    
  <borderlayout hflex="1" vflex="1">
    <north title="North" size="20%">
    </north>
    <center>
      <caption label="Center">
        <hbox align="center" pack="end" hflex="1">
          <button label="button 1"/>
          <button label="button 2"/>
        </hbox>
      </caption>
      <div>Center Content</div>
    </center>
  </borderlayout>
</zk>

just added the hflex="1" and it shall work.

edit : What's wrong in the fiddle. I can see the center text.

edit 2 : this is the fiddle of copy/paste your code, with zk 7.0.1 I can still see the center content with IE9.

Greetz chill.

link publish delete flag offensive edit
0

answered 2014-04-01 11:25:12 +0800

PhabryATzkoss gravatar image PhabryATzkoss
1 1

you are right... but i can't see the content of the region with my local setup

each time i use the caption component, the content of the region disappears

  • my zk.xml file is empty
  • i tried with firefox and chrome with the same results
  • i can't post links
link publish delete flag offensive edit

Comments

put your urls, I shall convert them nicely

chillworld ( 2014-04-01 11:33:46 +0800 )edit

result with my local setup: http://prntscr.com/361a3u

PhabryATzkoss ( 2014-04-01 12:44:14 +0800 )edit

have to look it this evening, page blocked by work :)

chillworld ( 2014-04-01 13:09:27 +0800 )edit
  • downgraded zk to version 6.5.2: the problem persists
  • created a new maven project: zk-archetype-webapp version 6.5.2, the example page works perfectly but the problem with the caption persists
PhabryATzkoss ( 2014-04-01 15:36:31 +0800 )edit
0

answered 2014-04-01 10:54:11 +0800

PhabryATzkoss gravatar image PhabryATzkoss
1 1

updated 2014-04-01 11:09:18 +0800

this code doesn't work with zk 7.0.1, the content of the center region is not visible.

example:

<zk>
  <borderlayout>
    <north>
    <div>
    North content (visible)
    </div>
    </north>
    <center>
        <caption>
        Center caption (visible)
        </caption>
        <div>
            Center Content (not visible)
        </div>
    </center>
  </borderlayout>
</zk>

Any Suggestions or workarounds?

link publish delete flag offensive edit

Comments

I tried the sample code with ZK 7.0.2 freshly version and it works fine. Can you try again?

vincentjian ( 2014-04-11 05:08:38 +0800 )edit

i tried with version 7.0.2.FL.20140410, the result is the same: http://prntscr.com/38xlom

PhabryATzkoss ( 2014-04-11 08:54:36 +0800 )edit

It is a bug for ZK CE only version, refer to the issue

vincentjian ( 2014-04-11 10:31:06 +0800 )edit

ok, thank you vincentjian

PhabryATzkoss ( 2014-04-11 10:54:50 +0800 )edit
0

answered 2014-04-01 12:56:04 +0800

PhabryATzkoss gravatar image PhabryATzkoss
1 1

this is the page code of zk fiddle:

 <!DOCTYPE html>
 <html>
 <head>
 <title></title>

 <link rel="stylesheet" type="text/css" href="/t701svt/zkau/web/3891cef2/_zkiju-silvertail/zul/css/zk.wcs"/>

 <script type="text/javascript" src="/t701svt/zkau/web/3891cef2/js/zk.wpd" charset="UTF-8"></script>
 <script type="text/javascript" src="/t701svt/zkau/web/3891cef2/js/zuljsp.js" charset="UTF-8"></script>
 <!-- ZK 7.0.1 EE 2014022710 Evaluation Only -->
 </head>


 <body>
 <div id="dFEP_" class="z-temp"><div id="zk_proc" class="z-loading"><div class="z-loading-indicator"><span class="z-loading-icon"></span>Attendere prego...</div></div></div>
 <script class="z-runonce" type="text/javascript">
 zk.appName='ZK Fiddle Sandboxes';zkmx(
 [0,'dFEP_',{dt:'z_6qi',cu:'/t701svt',uu:'/t701svt/zkau',ru:'/o5gpic/3/index.zul'},[
 ['zul.layout.Borderlayout','dFEP0',{prolog:'\n  '},[
 ['zul.layout.North','dFEP1',{$$onSize:false,$$onOpen:false},[
 ['zul.wgt.Div','dFEP2',{},[
 ['zul.wgt.Label','dFEP3',{value:'\n        North content (visible)\n      '},[]]]]]],
 ['zul.layout.Center','dFEP4',{$$onSize:false,$$onOpen:false},[
 ['zul.wgt.Caption','dFEP5',{},[
 ['zul.wgt.Label','dFEP6',{value:'\n        Center caption (visible)\n      '},[]]]],
 ['zul.wgt.Div','dFEP7',{},[
 ['zul.wgt.Label','dFEP8',{value:' \n        Center Content (not visible)\n      '},[]]]]]]]]]]);

 </script>
 <noscript>
 <div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then <a href="">try again</a>.</p></div>
 </noscript>

 </body>
 </html>

while this is the source code of my page:

 <!DOCTYPE html>
 <html>
 <head>
 <title></title>

 <link rel="stylesheet" type="text/css" href="/web-view/zkau/web/78b1efcf/_zkiju-silvertail/zul/css/zk.wcs"/>

 <script type="text/javascript" src="/web-view/zkau/web/78b1efcf/js/zk.wpd" charset="UTF-8"></script>
 <!-- ZK 7.0.1 2014022710 -->
 </head>



 <body>
 <div id="vQ6Q_" class="z-temp"><div id="zk_proc" class="z-loading"><div class="z-loading-indicator"><span class="z-loading-icon"></span>Processing...</div></div></div>
 <script class="z-runonce" type="text/javascript">
 zkmx(
 [0,'vQ6Q_',{dt:'z_knq',cu:'/web-view',uu:'/web-view/zkau',ru:'/album_lista/tmp.zul'},[
 ['zul.layout.Borderlayout','vQ6Q0',{prolog:'\n  '},[
 ['zul.layout.North','vQ6Q1',{$$onSize:false,$$onOpen:false},[
 ['zul.wgt.Div','vQ6Q2',{},[
 ['zul.wgt.Label','vQ6Q3',{value:'\n        North content (visible)\n      '},[]]]]]],
 ['zul.layout.Center','vQ6Q4',{$$onSize:false,$$onOpen:false},[
 ['zul.wgt.Caption','vQ6Q5',{},[
 ['zul.wgt.Label','vQ6Q6',{value:'\n        Center caption (visible)\n      '},[]]]],
 ['zul.wgt.Div','vQ6Q7',{},[
 ['zul.wgt.Label','vQ6Q8',{value:' \n        Center Content (not visible)\n      '},[]]]]]]]]]]);

 </script>
 <noscript>
 <div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then <a href="">try again</a>.</p></div>
 </noscript>

 </body>
 </html>

The only difference i can spot is in this line (missing in my page):

 <script type="text/javascript" src="/t701svt/zkau/web/3891cef2/js/zuljsp.js"   charset="UTF-8"></script>
link publish delete flag offensive edit
Your answer
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
2 followers

RSS

Stats

Asked: 2014-03-19 19:08:01 +0800

Seen: 52 times

Last updated: Apr 01 '14

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