0

ZK5 How to customize progress box?

asked 2010-01-16 21:45:20 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

The ZK 3 way no longer works, and I could not find any docs about it...

Some tips and a example would be great.

Thanks




ZK 3 way I'm using, on zk.xml:
<device-config>
  <!-- Configure the progress message to show in the center -->
  <embed>
    <![CDATA[<script type="text/javascript">
      AU_progressbar=function(id,msg){Boot_progressbox(id,msg,"45%",0,false,false);};
    </script>]]>
  </embed>
</device-config>

delete flag offensive retag edit

16 Replies

Sort by » oldest newest

answered 2010-01-20 21:13:30 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

Hi,

You can use zUtl.progressbox(id, msg, mask, icon) and zUtl.destroyProgressbox(id) instead.

link publish delete flag offensive edit

answered 2010-01-21 07:19:48 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hi Jumper,

With your hint I was able to make it work as in ZK3.

Thank you!!!

link publish delete flag offensive edit

answered 2010-01-21 07:19:48 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hi Jumper,

With your hint I was able to make it work as in ZK3.

Thank you!!!

link publish delete flag offensive edit

answered 2010-01-29 03:33:35 +0800

timo18146 gravatar image timo18146
189

updated 2010-01-29 03:33:54 +0800

Hi Madruga,

could you be so kind and post your working solution for ZK5 here? I have the same problem, but with this hint and all the old expired articles it's not very straight forward.

thank you!

Timo

link publish delete flag offensive edit

answered 2010-01-29 06:25:54 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hi Timo,

Below is a snippet on my zk.xml that overrides the progressbox position. You'll have to play a litle with JS depending on your needs.
My need was just to align the box on the center of x-axis (zk default is on the left)

I don't quite remember where the original source is, but a text search for "progressbox" on zk5 should point you right there (I usually do this with notepad++ -> search in files)

Regards


<device-config>
        <device-type>ajax</device-type>
        <!-- configures zk to reload the page if timeout happnes -->
        <timeout-uri></timeout-uri>
        <!-- configure zk to automatic reload timeout-uri without requireing a event from user -->
        <automatic-timeout/>
        <!-- Custom javascript snippets -->
        <embed>
            <![CDATA[<script type="text/javascript">
                /* top center align processing box */
                zUtl.progressbox = function(id, msg, mask, icon) {
                    if (mask && zk.Page.contained.length) {
                        for (var c = zk.Page.contained.length, e = zk.Page.contained[--c]; e; e = zk.Page.contained[--c]) {
                            if (!e._applyMask)
                                e._applyMask = new zk.eff.Mask({
                                    id: e.uuid + "-mask",
                                    message: msg,
                                    anchor: e.$n()
                                });
                        }
                        return;
                    }

                    if (mask)
                        zk.isBusy++;

                    var x = jq.innerX(), y = jq.innerY(),
                        style = ' style="left:'+x+'px;top:'+y+'px"',
                        idtxt = id + '-t',
                        idmsk = id + '-m',
                        html = '<div id="'+id+'"';
                    if (mask)
                        html += '><div id="' + idmsk + '" class="z-modal-mask"'+style+'></div';
                    html += '><div id="'+idtxt+'" class="z-loading"'+style
                        +'><div class="z-loading-indicator"><span class="z-loading-icon"></span> '
                        +msg+'</div></div>';
                    if (icon)
                        html += '<div class="' + icon + '"></div>';
                    jq(document.body).append(html + '</div>');
                    var $n = jq(id, zk),
                        n = $n[0],
                        $txt = jq(idtxt, zk);
                    if (mask)
                        n.z_mask = new zk.eff.FullMask({
                            mask: jq(idmsk, zk)[0],
                            zIndex: $txt.css('z-index') - 1
                        });

                    //center
                    var txt = $txt[0],
                        st = txt.style;
                    st.left = jq.px((jq.innerWidth() - txt.offsetWidth) / 2 + x);
                    //st.top = jq.px((jq.innerHeight() - txt.offsetHeight) / 2 + y);

                    $n.zk.cleanVisibility();
                }
            </script>]]>
        </embed>
    </device-config>

link publish delete flag offensive edit

answered 2010-01-29 09:37:46 +0800

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

I hope that is not the future of ZK ...

ZK = Ajax without JavaScript.

link publish delete flag offensive edit

answered 2010-01-29 11:29:59 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Although I'm starting to like JS due the amount of possibilities now with ZK5, I agree with Stephan...

Couldn't this be a property on zk.xml?

Something like this (would be a lot easier for everybody):

<library-property>
        <name>org.zkoss.zul.progressbox.position</name>
        <value>center,center</value>
    </library-property>
    <library-property>
        <name>org.zkoss.zul.progressbox.mask</name>
        <value>true</value>
    </library-property>

link publish delete flag offensive edit

answered 2010-01-31 19:10:40 +0800

tomyeh gravatar image tomyeh
610 1 3
http://blog.zkoss.org ZK Team

Hi Gustavo,

It sounds a reasonable spec. Would you post it to the feature request and then we can discuss there?

Tom

link publish delete flag offensive edit

answered 2010-01-31 21:09:07 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hi Tom,

Here it is

Regards

link publish delete flag offensive edit

answered 2010-08-04 11:18:14 +0800

ocreatur gravatar image ocreatur
3

for madruga0315....

Ua fratè si gruosssss!!!!

it work.

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-01-16 21:45:20 +0800

Seen: 4,649 times

Last updated: Nov 24 '11

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