Java Web ZK Framework & SQL Server (Tips For Beginner) Part #2 - Menu Side Bar

                                      

                                                        

Tutorial Project Java Web & SQL Server Part #2 - Menu Side Bar

A. Eclipse & ZK Framework (Menu Side Bar)

- Create Index.zul

 <?page title="index.zul"?>
<window id="winmain" width="100%" height="100%">
    <borderlayout height="100%">
            <center border="0">
                <borderlayout>
                <west style="text-align:center" title=".: MENU PROGRAM :. " maxsize="250" size="20%"
                        collapsible="true">
                <div style="background:#fafafa" vflex="1">       
           
                    <tabbox sclass="tabbmenu_mod" id="tabsystem" width="100%" height="100%" mold="accordion-lite"   
                                visible="true">
                        <!-- HEADER TAB -->
                        <tabs id="tabssystem" height="100%">
                            <tab label="HOME"/>
                            <tab label="MASTER"/>
                            <tab label="REPORT"/>
                        </tabs>           
                               
                        <tabpanels id="tabpanelsystem" height="100%">
                            <!-- SUB TAB HOME -->
                            <tabpanel>
                                <tree>
                                    <treechildren>
                                        <treeitem>
                                            <treerow>
                                                <treecell label="HOME" onClick="manuhome()">           
                                                </treecell>
                                            </treerow>
                                        </treeitem>
                                    </treechildren>
                                </tree>                               
                            </tabpanel>

                            <!-- SUB TAB MASTER -->
                            <tabpanel>
                                <tree>
                                    <treechildren>
                                        <treeitem>
                                            <treerow>
                                                <treecell label="CUSTOMER" onClick="manucustomer()">           
                                                </treecell>
                                            </treerow>
                                        </treeitem>
                                    </treechildren>
                                </tree>                               
                            </tabpanel>

                            <!-- SUB TAB REPORT -->
                            <tabpanel>
                                <tree>
                                    <treechildren>
                                        <treeitem>
                                            <treerow>
                                                <treecell label="CUSTOMER" onClick="menurptcustomer()">           
                                                </treecell>
                                            </treerow>
                                        </treeitem>
                                    </treechildren>
                                </tree>                               
                            </tabpanel>
                           
                        </tabpanels>
                    </tabbox>   
                </div>                   
                </west>

        <!-- Menu Side Center  -->
                <center id="MainCenter" border="0" autoscroll="true" >
                    <panel style="background:#fafafa;text-align:left">
                    <panelchildren>
                    <tabbox id="tabApp" sclass="tab_app" width="100%">
                        <tabs id="tabs" mold="">
                            <tab id="tabStartUp" label="HOME" image="/images/home.png"
                            style="color:#0F3B82; font-size: 10px; font-weight: bold;" />
                        </tabs>
    
                        <tabpanels id="tabPanels">
                            <tabpanel id="tpStartUp">
                                <hbox>
                                <space width="10px"/>
                                <include id="maincenter2" src="content/home.zul" width="100%" height="100%"  />
                                <space width="10px"/>
                            </hbox>
                            </tabpanel>
                        </tabpanels>
                    </tabbox>
                    </panelchildren>
                    </panel>
                </center>   
               
           
            </borderlayout>   
            </center>
    </borderlayout>

<zscript>
    <![CDATA[
          void manucustomer(){
              tabStartUp.setLabel("CUSTOMER");
              maincenter2.setSrc("content/customer.zul");
          }
            
          void manuhome(){
              tabStartUp.setLabel("HOME");
              maincenter2.setSrc("content/home.zul");
          }

          void menurptcustomer(){
              tabStartUp.setLabel("REPORT");
              maincenter2.setSrc("content/rptcustomer.zul");
          }
         
         
      ]]>

</zscript>
</window>

    

#Java #SqlServer

B. Tutorial Youtube

D. Note 

• Create File XML Connection Java With SqlServer (JDBC) : https://qr-notes.blogspot.com/2021/08/create-file-xml-connection-java-zk.html
  

• Create File Java Connection : https://qr-notes.blogspot.com/2021/09/create-file-java-connection-database.html
  

• Create Form Index.zul #Part 1 Simple For Beginner : https://qr-notes.blogspot.com/2020/06/java-web-zk-framework-sql-server-tips.html

•  Create Form Login : https://qr-notes.blogspot.com/search?q=login
  

• Create Form Menu Side Bar : https://qr-notes.blogspot.com/2021/05/java-web-zk-framework-sql-server-tips.html