Using Progress Bar Component

Top  Previous  Next

By default if ajax updates are enabled (useServerSideLazyLoad="true") there is the Progress Bar showing "Please wait..." label during the operations. To disable this option set ajaxProgressShow="false". To customize text label ajaxProgressTitle="customize text" property should be used.

 

Examples of using ProgressBar with Tree Component

 

1) Default. There are no additional options sets.

 

       <tree:tree id="frameWorkContent" varName="frameWorkContent"

                         rootNodeVisible="false"

                         useServerSideLazyLoad="true"

                         lazyLoadTimeout="2000"

                         nodeImageHeight="20"

                         fontFamily="Comic Sans MS"

                         ...

 

                      >                          

               ...

          </tree:tree>

 

 

2) With inner <progressbar:interfaceManager> tag

 

       <tree:tree id="frameWorkContent" varName="frameWorkContent"

                         rootNodeVisible="false"

                         useServerSideLazyLoad="true"

                         lazyLoadTimeout="2000"

                         nodeImageHeight="20"

                         fontFamily="Comic Sans MS"

                         ...

                    ajaxProgressShow="true"

                     ajaxProgressTitle="waite..."

                      >

                         

                     <progressbar:interfaceManager

                                    labelStyle="border:solid black 1px;font-weight:bold;color:#0000ff;text-align:center;

                                                                                font-size:10pt;fontfamily:Garamond;font-style:normal;background-color:#ff0000;"

                          />        

               ...

          </tree:tree>

 

3) Progress Bar is standaloane component

 

                  <progressbar:progressBar  id="progressbar1"

                            value="#{Data.progress3}"

                            text="Please wait..."

                            dragAndDrop="true"                            

                            progressVisible="false"

                            useServerSide="false"

                          >

 

                  <progressbar:interfaceManager

                                    labelStyle="border:solid black 1px;font-weight:bold;color:#0000ff;text-align:center;font-size:10pt;

                                       font-family:Garamond;font-style:normal;background-color:#ff0000;"

                          />

 

              </progressbar:progressBar>

 

              <tree:tree id="frameWorkContent" varName="frameWorkContent"

                         rootNodeVisible="false"

                         useServerSideLazyLoad="true"

                         lazyLoadTimeout="2000"

                         nodeImageHeight="20"

                         fontFamily="Comic Sans MS"

                         ...

                        ajaxProgressId="progressbar1"

                      >

 

                  ...

 

              </tree:tree>