1 2 Previous Next 16 Replies Latest reply: Nov 26, 2012 3:50 AM by Mahmoud_Rabie RSS

    Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme

    Mahmoud_Rabie
      Dear Experts,

      Given:
      - Apex 4.2
      - Application Theme: Bluejay-22
      - Page Template Class: Two Level Tabs

      Required:
      - Convert 2nd Level Tabs of (Bluejay-22 Theme) to be Drop-Down Menus as in (Application Builder Theme)
      - Where can I find documentation for app_AppMenuMultiOpenBottom3

      Current Situation
      - Only the first level tabs are converted to match the (Application Builder Theme).
      - The Drop-Down menus of the second level tabs are not working

      Steps tried
      1) link the following CSS's into the Header section of the Page Template of (Bluejay-22)
      <link rel="stylesheet" href="/i/css/apex_builder.min.css?v=4.2.0.00.27" type="text/css" />
      <link rel="stylesheet" href="/i/css/apex_ui.min.css?v=4.2.0.00.27" type="text/css" />
      <link rel="stylesheet" href="/i/css/apex_ui_builder_home.css" type="text/css" />
      2) link the following Scripts into the Header section of the Page Template
      <script type="text/javascript">
      var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
      </script>
      <script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
      <script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
      <style> html {visibility:hidden;} </style>
      <script type="text/javascript">
      apex.security.framebreaker("D");
      </script>
      <script src="/i/libraries/apex/minified/widget.textarea.min.js?v=4.2.0.00.27" type="text/javascript"></script>
      <script src="/i/libraries/apex/minified/builder.min.js?v=4.2.0.00.27" type="text/javascript"></script>
      3) Re-write the Body section to be as the following
      <div id="page-header">
            
        .... LOGO AND WELCOME HERE ......  
       
         <div class="apex-top-bar-end">
             <div class="apex-top-bar">
                    <div id="tabs" class="dhtmlMenuLG">
                        #PARENT_TAB_CELLS#
                        <ul id="" htmldb:listlevel="1" 
                          class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
                            #TAB_CELLS#
                            <li class="last" dir="RTL"><span></span></li>
                        </ul>
                    </div>  
             </div>
         </div>   
      </div>
      
      <div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
      <div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
      <div id="body">
          <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
          <tbody>
            <tr>
              <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
              <td class="tbl-sidebar">#REGION_POSITION_03#</td>     
            </tr>
          </tbody>
          </table>
      </div>
      4) Update the section of Standard Tab Attributes to have
      Current Tab as the following
      <li class="#TAB_STATUS#">
        <a href="#TAB_LINK#" 
           class="dhtmlSubMenuN" onmouseover="dhtml_CloseAllSubMenusL(this)" 
           title="#TAB_LABEL#">
           "#TAB_LABEL#
        </a>
      </li>
      {code}
      and *Non Current Standard Tab* as the following
      {code}
      <li class="#TAB_STATUS#">
        <a href="#TAB_LINK#" 
           class="dhtmlSubMenuN" onmouseover="dhtml_CloseAllSubMenusL(this)" 
           title="#TAB_LABEL#"> 
            "#TAB_LABEL#
        </a>
      </li>
      5) Update the section of Parent Tab Attributes to have
      Current Parent Tab as the following
      <div id="#TAB_ID#" class="current">
         <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
         <a href="#"    
            onclick="app_AppMenuMultiOpenBottom3(this,
                                               'S#TAB_ID#',
                                               '#TAB_ID#',
                                               false); return false;" class="link_icon">
            <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
                 class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
         </a>
      </div>
      and Non Current Parent Tab as the following
      <div id="#TAB_ID#" class="non-current">
         <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
         <a href="#"    
            onclick="app_AppMenuMultiOpenBottom3(this,
                                               'S#TAB_ID#',
                                               '#TAB_ID#',
                                               false); return false;" class="link_icon">
            <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
                 class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
         </a>
      </div>
      How to achieve the required above??

      Best Regards
      Mahmoud
        • 2. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
          974630
          Mahmoud

          You have probably already noticed that #TAB_CELLS# only replaces the standard tabs belonging to the current parent tab.
          To generate all standard tabs you have to use either a plugin like [url http://www.apex-plugin.com/oracle-apex-plugins/region-plugin/tab-menu_203.html] Tab menu  or do it you self.

          Nicolette
          • 3. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
            Mahmoud_Rabie
            Dear Nicolette

            Thank you for your response.

            Yes I need to generate lists for all 2nd level tabs so I need to replace #TAB_CELLS# with the list of standard tabs under a parent tab clicked.

            The question is HOW TO DO IT MYSELF? Is there other way away from using plugins.
            Can I accomplish this with Page Template by adding some jQuery code_

            I have viewed a tabs-concerned piece of source code of a page of Application Builder. It is like the following:
                onclick="app_AppMenuMultiOpenBottom3(this,'SL171313604592527903','L171313604592527903',false); return false;"
            - How can I use app_AppMenuMultiOpenBottom3 in the sections Parent Tab in the Page Template
            - What are *'SL171313604592527903' , 'L171313604592527903'* ?

            Best Regards
            Mahmoud

            Edited by: Mahmoud_Rabie on Nov 22, 2012 4:25 PM

            Edited by: Mahmoud_Rabie on Nov 22, 2012 4:39 PM
            • 4. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
              974630
              Mahmoud_Rabie wrote:
              Dear Nicolette

              Thank you for your response.

              Yes I need to generate lists for all 2nd level tabs so I need to replace #TAB_CELLS# with the list of standard tabs under a parent tab clicked.

              The question is HOW TO DO IT MYSELF? Is there other way away from using plugins.
              Can I accomplish this with Page Template by adding some CSS and JS updates._
              CSS won't do anything the standerd tabs of the not current parent tabs are simply not renderd on the page.
              You could use some ajax to get the standerd tabs of the non current parent tabs.
              Or create a PL/SQL region and use PL/SQL code to render the appropiate html.
              Have a look at the code of the plugin to get an idea of which apex views hold the information of the tabs and how they are connected.
              I have viewed a tabs-concerned piece of source code of a page of Application Builder. It is like the following:
              onclick="app_AppMenuMultiOpenBottom3(this,'SL171313604592527903','L171313604592527903',false); return false;"
              - How can I use app_AppMenuMultiOpenBottom3 in the sections Parent Tab in the Page Template
              - What are *'SL171313604592527903' , 'L171313604592527903'* ?
              This looks like ID's of the particular list items. See if you can get access to the not minimed javascript files used by apex. They are in the approximate same location as the minified files on your image directory.
              And have a look at the different functions used by this list template to see what they actualy do.

              How many parent and standard tabs do you have?
              A faster approach could be to simple replace the tabs by a list.
              This also gives you the possibility to add more levels to your menu.
              Be awere though that there is a difference in behavior between list and tabs.
              Standard tabs do a submit. List are a link and don't do a submit.

              Nicolette
              • 5. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                Mahmoud_Rabie
                You could use some ajax to get the standerd tabs of the non current parent tabs.
                How to do that?
                • 6. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                  974630
                  Mahmoud Rabie
                  Mahmoud_Rabie wrote:
                  You could use some ajax to get the standerd tabs of the non current parent tabs.
                  How to do that?
                  The basic are some javascript code that calls a apex page process that runs some pl/sql code.
                  The pl/sql page process is of the type ondemand process.(Search the forum for more on this)
                  This process will use sys.htp procedures to return the required html.
                  The javascript function makes sure everything is shown at the correct time and place.

                  With which step in the process do you have problems?
                  What is stopping you from using the plugin I have mentioned?

                  Nicolette
                  • 7. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                    Mahmoud_Rabie
                    What is stopping you from using the plugin I have mentioned?
                    1) If using plugin don't conflict with my theme mentioned above, then no thing is preventing me.
                    2) How to keep the current parent tab highlighted when using this plugin?
                    3) In the region attributes of the plugin how to put the class of tabs dhtmlMenuLG

                    The plugin page says
                    The plug-in uses the (parent) tab setting of the page template as a template for the menu. To position the tabs within the parent tab use the #TABS# substitution string. The other tab substitution strings are also available.
                    I will put plugin in #REGION_POSITION_08# in Page 0 then refer to
                    #REGION_POSITION_08# instead of #TAB_CELLS#

                    What  are the steps to employ this plugin to show the second level tabs as drop down menu?

                    Mahmoud
                    • 8. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                      974630
                      Mahmoud
                      Mahmoud_Rabie wrote:
                      What is stopping you from using the plugin I have mentioned?
                      1) If using plugin don't conflict with my theme mentioned above, then no thing is preventing me.
                      That is the beauty of this plugin you're in control of the html and CSS so you decide how the tabs are displayed.
                      2) How to keep the current parent tab highlighted when using this plugin?
                      The plugin page says
                      The plug-in uses the (parent) tab setting of the page template as a template for the menu.
                      This means that the following from your original post is used to render the parent tabs
                      Mahmoud_Rabie wrote:
                      5) Update the section of Parent Tab Attributes to have
                      Current Parent Tab as the following
                      <div id="#TAB_ID#" class="current">
                      <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
                      <a href="#" class="link_icon">
                      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
                      class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
                      </a>
                      </div>
                      and Non Current Parent Tab as the following
                      <div id="#TAB_ID#" class="non-current">
                      <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
                      <a href="#" class="link_icon">
                      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
                      class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
                      </a>
                      </div>
                      >
                      The plugin page says
                      To position the tabs within the parent tab use the #TABS# substitution string. The other tab substitution strings are also available.
                      This means that the html for the current parent tab would be changed to something like
                      <div id="#TAB_ID#" class="current">
                          <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
                          <a href="#" class="link_icon">
                            <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
                                 class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
                         </a>
                         <ul id="" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
                             #TABS#
                             <li class="last" dir="RTL"><span></span></li>
                          </ul>
                      </div>
                      The html for the non-current parent tab should be changed in the same way.

                      >
                      I will put plugin in #REGION_POSITION_08# in Page 0 then refer to
                      #REGION_POSITION_08# instead of #TAB_CELLS#
                      Taking the body second from your original post it should become
                        <div class="apex-top-bar-end">
                             <div class="apex-top-bar">
                                #REGION_POSITION_08#
                             </div>
                         </div>
                      The following of the plugin settings should than be
                      Before html:
                      <div id="tabs" class="dhtmlMenuLG">
                      After html:
                      </div>
                      Mahmoud_Rabie wrote:
                      What  are the steps to employ this plugin to show the second level tabs as drop down menu?
                      Assuming you installed the plugin and read the documentation (Tab menu.pdf).
                      If you have understood and done everything mentioned above then you have done the most important and hardest part.

                      Some other settings I can give you now assuming that the changes you mentioned in you first post are done to a page template in your current theme.
                      Theme number: leave empty (the current theme is used)
                      Template: Name of the page template you made the changes on.
                      jQuery selector submenu: ".pulldown-tabs"

                      The setting Tab is probably "main" but check the "Parent Tab Set" attribute of your parent tabs.

                      Now keep in mind that everything I said above isn't tested yet and may need some tweaking.
                      I try to set up something in the weekend.
                      In the mean time if you run in to any more problems set up an demonstration of what you have done on apex.oracle.com so I can have look.

                      Nicolette
                      • 9. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                        Mahmoud_Rabie
                        Dear Nicolette

                        What about these attributes
                        jQuery selector submenu:     .submenu
                        Tab set:                              main
                        Include single subtab     
                        Class first parent     
                        Class last parent     
                        Class first child     
                        Class last child     
                        File Prefix:                              #WORKSPACE_IMAGES#
                        Javascript libraries     
                        CSS file:                              Tabmenu_horizontale.css
                        Onload code     

                        I think the CSS file and File Prefix need to be changed to get match the theme

                        Best Regards
                        Mahmoud
                        • 10. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                          974630
                          Mahmoud
                          Mahmoud_Rabie wrote:
                          File Prefix:                              #WORKSPACE_IMAGES#
                          Javascript libraries     
                          CSS file:                              Tabmenu_horizontale.css
                          Onload code     

                          I think the CSS file and File Prefix need to be changed to get match the theme
                          The CSS file only have to be filled with the name of the file if you are using a separated file with the CSS for the menu.
                          If you want to style your tab menu to be the same as a list template all the CSS is already in the CSS file linked on the page. Then there is no need for an extra file and the setting can be left empty.

                          If you don't have a CSS file or javascript libraries then you don't need the File prefix setting either.
                          Mahmoud_Rabie wrote:
                          Dear Nicolette

                          What about these attributes
                          jQuery selector submenu:     .submenu
                          Tab set:                              main
                          The Tab set is the tabset where the parent tabs belong too. As already mentioned you can find that in the "Parent Tab Set" attribute of the parent tabs.

                          The jQuery selector submenu: is the jQuery selector that selects the submenu container(s). In your case that is a selector that selects the ul statement surrounding the #TABS#.
                          Because we are going to use a javascript function to show the standard tabs of the parent tab we clicked on it would probably do no harm in leaving this empty.

                          In the mean time I did some investication on my on.
                          I used the Pull down menu list template of my theme as example to create the tab menu.
                          This template uses the javascript function app_AppMenuMultiOpenBottom2(this,'L18963330840850448',false) to show the drop down menu on click of a icon button.
                          The *'L18963330840850448* is the id of the container that holds the li elements that make up the second level of the menu.
                          Translate to the tab menu that would be the ul statement surrounding the #TABS#

                          The parent tab templates need to be changed to include the onclick html attribute on the icon to be clicked and a id attribute added to the submenu container
                          <a href="#" class="link_icon" onclick="app_AppMenuMultiOpenBottom2(this,'#TAB_NAME#',false);return false;">
                                <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
                                     class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
                             </a>
                             <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
                                 #TABS#
                                 <li class="last" dir="RTL"><span></span></li>
                              </ul>
                          I already have an example working on my local oracle XE instance and will add it to my demo page tomorrow.
                          (Or rather later today because it is already past midnight and way past bed time here.)
                          Just to see if we are really talking about the same kind of menu.

                          Nicolette

                          Edited by: Nicolette on 23-nov-2012 0:48
                          A empty messages was posted added the orginal text of the message
                          • 11. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                            Mahmoud_Rabie
                            Dear Nicolette

                            The current situation
                            With plugin : The plugin drop down behavior is working however the lists are displayed incorrectly without any theme. This may be fixed if I have demo of Option 2 below
                            Without plugin: #PARENT_TAB_CELLS# are displayed correctly and using the function app_AppMenuMultiOpenBottom2 if clicked the #TABS# is displayed which needs replacement with JS in Option 1 below

                            Now, I have two options to accomplish what I need

                            Option 1
                            I need to do the following:
                            1) Write PL/SQL on-demand process generates HTML list items under parent tab id passed.
                            2) Write JS function to call the above process when the parent tab clicked (inside the parent tab template)

                            Option 2
                            I am waiting for your demo using the plugin with the theme of Application Builder

                            Best Regards
                            Mahmoud
                            • 12. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                              974630
                              Mahmoud
                              Mahmoud_Rabie wrote:
                              Dear Nicolette

                              The current situation
                              With plugin : The plugin drop down behavior is working however the lists are displayed incorrectly without any theme.
                              Just use the developer options of your favorite browser to see the CSS that is used on the menu you are using as example.
                              And either add that too the CSS file's you are already using.
                              Or created a new CSS file and add that using the already mentioned plugin settings.
                              Mahmoud_Rabie wrote:
                              Option 2
                              I am waiting for your demo using the plugin with the theme of Application Builder
                              Just to be clear the demo I will set up later today will be based on the list template "Pull Down Menu" and the color scheme of my own theme.
                              I won't be making an exact match to the apex builder menu.
                              To get the menu to look exactly like you want you have to define the CSS.
                              And tweak the HTML and plugin settings to your exact needs.

                              Without an example of what you have so far on apex.oracle.com nobody will be able to make any suggetions on what your missing or what tweak to make.

                              Nicolette
                              • 13. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                                974630
                                Mahmoud

                                As promised [url https://apex.oracle.com/pls/apex/f?p=VANBARENPLUGINS:TABSUBMENU]here are two examples of the plugin using a list template Pull down menu a basis.

                                The main navigation of the demo application is a list using the "Pull down menu" template.
                                With the tab menu in the region "List template pull down menu" I have made it to be exactly the same as the navigation of the application.

                                With the tab menu in the region "List template pull down menu classes" I changed the CSS a bit and split the class ui-corner-all in ui-corner-left and ui-corner-right.
                                To stack the parenttabs neatly together.
                                Using the settings Class first parent and Class last parent the beginning and end of the menu are nicely rounded.

                                In the region to the right of the page shows all the settings used for all the tab menu's demoed on the page.

                                Want to see the effect of different colors. Choose a different theme in the select list in the top right corner of the page.

                                The reason I have chosen the list template Pull down menu as basis for these demo's is because I think that is the same list template that is used for the drop down menu in the apex builder.
                                Secondly it is the template that I have used for my main navigation list.
                                And not unimportandly it stays in line with the theme of the rest of the demo application.

                                Nicolette
                                • 14. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
                                  Mahmoud_Rabie
                                  Dear Nicolette

                                  Please enter the workspace on apex.oracle.com containing the application TestDropDownAppBuilderTabs
                                  with the following:
                                  Workspace : ralab
                                  User : nicolette
                                  Password : abc123

                                  I have done the following steps:
                                  1) Adjust Page template to match the theme which I need
                                  2) Install plugin and update the Page Template Name to be WithNicolettePlugin
                                  3) Set the Theme number to 2 (Builder Blue)
                                  4) Put the Plugin in region #REGION_POSITION_08# of Page 0

                                  The parent tabs of the plugins are displayed correctly however th drop downmenu of #TABS# is not displayed correctlty.

                                  Best Regards
                                  Mahmoud
                                  1 2 Previous Next