Using Srpy tabbed panels with slidding panels

I am very new to spry and so I am still just figuring it all
out. How I found it was I wanted a tabbed panel like the one on the
IBM website. Anyway, I am trying to
use the tabbed panels with the sliding panels and it just does not
seem to be working. I found
this
tutorial and followed the codes but it still only works as just the
tabbed panels - nothing has changed at all. Can someone tell me
what I might be doing wrong? I am attaching both my html and css
code for you to inspect.
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script
src="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link
href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 1</a></li>
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 2</a></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css code to follow in post below - too many characters.

and here is the css code
CSS Code
@charset "UTF-8";
/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab
buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container.
For our
* default style, this container does not contribute anything
visually,
* but it is floated left to make sure that any floating or
clearing done
* with any of its child elements are contained completely
within the
* TabbedPanels container, to minimize any impact or
undesireable
* interaction with other floated elements on the page that
may be used
* for layout.
* If you want to constrain the width of the TabbedPanels
widget, set a
* width on the TabbedPanels container. By default, the
TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this
selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup
container houses
* all of the tab buttons for each tabbed panel in the
widget. This container
* does not contribute anything visually to the look of the
widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in
this selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This
container houses
* the title for the panel. This is also the tab "button"
that the user clicks
* on to activate the corresponding content panel so that it
appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1
pixel down from
* where it wold normally render. This allows each tab to
overlap the content
* panel that renders below it. Each tab is rendered with a 1
pixel bottom
* border that has a color that matches the top border of the
current content
* panel. This gives the appearance that the tab is being
drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this
selector is not
* necessary to make the widget function. You can use any
class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
/* This selector is an example of how to change the appearnce
of a tab button
* container as the mouse enters it. The class
"TabbedPanelsTabHover" is
* programatically added and removed from the tab element as
the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the
appearance of a tab button
* container after the user has clicked on it to activate a
content panel.
* The class "TabbedPanelsTabSelected" is programatically
added and removed
* from the tab element as the user clicks on the tab button
containers in
* the widget.
* As mentioned above, for our default style, tab buttons are
positioned
* 1 pixel down from where it would normally render. When the
tab button is
* selected, we change its bottom border to match the
background color of the
* content panel so that it looks like the tab is part of the
content panel.
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside
of a tab button
* look like normal text. Users may want to use links inside
of a tab button
* so that when it gets focus, the text *inside* the tab
button gets a focus
* ring around it, instead of the focus ring around the
entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The
ContentGroup container houses
* all of the content panels for each tabbed panel in the
widget. For our
* default style, this container provides the background
color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in
this selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
/* This is the selector for the Content panel. The Content
panel holds the
* content for a single tabbed panel. For our default style,
this container
* provides some padding, so that the content is not pushed
up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this
selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce
of the currently
* active container panel. The class
"TabbedPanelsContentVisible" is
* programatically added and removed from the content element
as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules
above so that the
* TabbedPanels widget renders with its tab buttons along the
left side of
* the currently active content panel.
* With the rules defined below, the only change that will
have to be made
* to switch a horizontal tabbed panels widget to a vertical
tabbed panels
* widget, is to use the "VTabbedPanels" class on the
top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons
it contains
* render to the left of the active content panel. A border
is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so
that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
and CSS Sprites */
/* Revision by Craig Malcolm Petrou of CPMMUG.com */
.TabbedPanels {
margin: 10px 0 5px 0;
.TabbedPanelsTab {
font-weight: bold;
font-size: 100%;
background-color: #FFF;
border: solid 0 #FFF;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #FFF;
position: relative;
.TabbedPanelsContentGroup {
background-color: #FFF;
ul.TabbedPanelsTabGroup a {
display: block;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/brown.png) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/brown.png) no-repeat 100% 0;
padding: 7px 10px 5px 0;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/brown.png) no-repeat 0 -41px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/brown.png) no-repeat 100% -41px;
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and
CSS Sprites */
Also - is there a way to get rounded corners on the tabs in
spry? Any good tutorials I can follow about spry - more
specifically about using widgets and effects together.
Thanks so much

Similar Messages

How do I use Panorama / Tab Groups with the keyboard?

Yes I know that CTRL-SHIFT-E opens the panorama window, and then I can use the mouse to organize my tabs into groups.
But how do I do this with the keyboard?
I've [http://lifehacker.com/#!5719596/switch-between-tab-groups-in-firefox-with-a-keyboard-shortcut read] [http://ubuntuforums.org/showthread.php?t=1705714 that] Ctrl-`should move me through tab groups. That doesn't work for me on my Danish keyboard. (Where the ' and ` chars are weird. But is how they are on a valid standard Danish keyboard) I've tried changing the keyboard to USA and then moving through tab groups works fine.
In short: Pretend I don't have a mouse. How do I use Panorama / Tab Groups?

Sorry. These are both known bugs:
[https://bugzilla.mozilla.org/show_bug.cgi?id=587010 Bug 587010] - Add keyboard UI for manipulated groups and tabs in Tab Candy
and
[https://bugzilla.mozilla.org/show_bug.cgi?id=626594 Bug 626594] - shortcut for switching tab groups is badly accessible on many non-US keyboard layouts

How to merge the Panel with another Panel to One Panel?

As Title!!

i will give it a shot. by no means do i say it is correct being a beginner myself
Panel aPanel = new Panel();
Panel anotherPanel = new Panel();
Panel mythirdPanel = new Panel();
aPanel.add(anotherPanel);
aPanel.add(myThirdPanel);
this should create one panel called aPanel with two panels inside - another Panel first, followed by mythirdPanel second. This should be in FlowLayout pattern as that is default unless specified.
That is my guess and my shot.
8)

Amarok icon not using systray in Fluxbox with XFce4-panel

I really can't accurately describe this, so i'll show you instead.
Because of the Amarok icon not being in the systray (You can just see it in the bottom right corner, under the panel) Amarok and any other application won't use the far right edge of the screen, this is incredibly annoying and I haven't a clue how to fix it.
Cheers in advance for any help

Nothing at all?

Using Windows Domain credentials with Remote Panel

I am looking for a way to deny remote panel access based on Domain login credentials. Is this possible natively to LabVIEW, or is it going to require calls to the Windows .NET libraries? (which I dislike doing)

Adding a solution in case anyone comes wandering by later looking.
As far as I can tell it does require a call to the API, but a fairly simple call.

HTML Panel with Tabs like Sliding Panel tabs

Hi, what do I need to add/change to have HTML panels
switching with tabs that switches background image like the tabs in
sliding panels example?
Or can I modify the
sp_withTabs.js to have graphic tabs work with HTML
Panels?

Nevermind, I got it. I used the SpryTabbedPanels.js and
modified the SpryTabbedPanels.css with my graphics, size, position
and what not.
I do have one more question. I'm using HTML Panels with Fade
in and out and when loading my page I have to have default content
in the main html doc for something to display when the page loads.
Then when I click on the first button, it then loads the real
external HTML panels. Is there any way I can load my first external
HTML page right when my site loads?

Creating filling panel with insets without gridbaglayout

Hi,
This is quite a newbie prob but i can't seem to get it right. I want a Panel with two panels. Both with insets. I want the first to only fill horizontally. The second has to fill-up the rest of the panel. Because Boxlayout and Borderlayout don't support insets with layout i tried the gridbaglayout, but i can't get the second panel to fill the remainder of the panel. It stops halfway.
contentPane.add(one,
new GridBagConstraints(0, 0, 1, 1, 1.0, 1.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL,
new Insets(2, 2, 2, 2), 0, 0));
contentPane.add(two,
new GridBagConstraints(0, 1, 1, 1, 1.0, 1.0, GridBagConstraints.CENTER,
GridBagConstraints.BOTH, new Insets(2, 2, 2, 2), 0, 0));
Can anyone tell me how to do this?
Much thanks
Hugo Hendriks

You can use:
panel.setBorder(BorderFactory.createEmptyborder(2,2,2,2));
to set insets on a JPanel. I believe Insets is the "old" way of doing borders.
Regards,
Tim

HT201317 I use a windows PC with XP Proffessional. I installed iCloud on my PC. when i open the iCloud control panel the photo stream tab is grey.

Hi I use a windows PC with XP Professional. I installed iloud on my PC s per the instructions from the Apple website.
In the iCloud control panel all the selections are available but the Photo stream selection is grey. This means i cannot sellect photo stream.
Anyone know how to fix this?

iCloud does not support Windows XP.

Tabbed Panels: Opening panel with panel number doesn't work with Spry Data

I have some data inside a TabbedPanelsContent div, and would
like to be able to open tabs using links, but it only seems to work
with static content.
Clicking on tabs themselves loads content correctly, whereas
clicking on links does nothing. I tried both - panel number and
panel ID - neither worked. What gives?
See code below.
<div spry:region="ds1">
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Asset
Management</li>
<li class="TabbedPanelsTab"
tabindex="0">Brokerage</li>
<li class="TabbedPanelsTab" tabindex="0">Mutual
Funds</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry01}'.search(/^Asset Management/) !=
-1;">{ds1::client}</p>
</div>
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry02}'.search(/^Brokerage/) !=
-1;">{ds1::client}</p>
</div>
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry03}'.search(/^Mutual Funds/) !=
-1;">{ds1::client}</p>
</div>
</div>
</div>
<script type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1");
</script>
</div>
<a href="#" onclick="tp1.showPanel(0); return
false;">Asset Management</a>
<a href="#" onclick="tp1.showPanel(1); return
false;">Brokerage</a>
<a href="#" onclick="tp1.showPanel(2); return
false;">Mutual Funds</a>

Try to declare the variable out side of the region
<script> var tp1;</script>
<div spry region ... >
tab panel stuff
<script type="text/javascript">
tp1 = new Spry.Widget.TabbedPanels("tp1");
</script>
</div>

Help Using Spry tabbed panel as a menu.

Thanks in advance to all who take the time to read and any assistance you can offer.
I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel. I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page. For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
HELP?
http://www.orange.k12.nc.us/ec/beta/default.html

Thank you Gramps - for your prompt and helpful response! Your solution absolutely fixed the problem I asked about.
If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page. Can you look at one more page and advise please??
On the "subpages" of this site, the same tabbed panel "fake menu" exists. I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me. I'm obviously missing something in the code to send the user back to the HOME page from these pages.
In the sample link below, you will be starting from a "subpage" of the site. Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.) Can I add something to that line of code to get them back to the home page?
Again... thank you!!
http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html

Tabbed panel with adjustable/variable height based on content

Is there anyway that you can create a tabbed panel with adjustable/variable height based on content in each tab?

Abhishek,
Thanks for your reply, however, it is not working with Muse. I added the Javascript to the head section and adjusted iframe and it displays as a small square in the upper left hand corner, unable to view the whole page.
Inserted into head section --
<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
inserted as an html object --
<iframe name="MycoSmooth" src="http://www.mycosmooth.com" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Below is the result:
The purpose is to have an independent website run the blogging capabilities, since muse doesn't directly support blogging as of yet.
Since the site is on a different domain, I am running into cross domain issues and it won't get the height of the page. The methods that apparently work use php and I am unsure how that would work in muse, if at all.

How to use H1, h3, h4 etc when using Spry Tabbed Panels?

Hi folks,
I am using Spry Tabbed Panels 2 on my site as it's the only way I know to direct visitors to particular tabs with links.
Unfortunately I can't use any of my header tags because H2 is dedicated to the Spry tabs, and for some reason has also taken "ownership" o all H tags.
Is there another way to mark my headings accordingly without having them turn into tabs?
My site is at www.qtnz.co.nz/activities
Thanks in advance for advice,
Jo

To help you on your way, have a look at the following. Just copy and paste into a new document and view in your favourite browser.
<!DOCTYPE html>
<html>
<head>

<base href="http://ajax.googleapis.com/" />

<link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
        type="text/css" rel="Stylesheet" />

<script src="/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
      // See the jQuery UI Tabs documentation for
      // more information about how this works.
      $('#tabs').tabs();
</script>
</head>
<body>
<div id="tabs">
    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1">
      <p>These tabs were created with JavaScript, CSS, and
        images hosted on Google's AJAX APIs CDN.</p>
      <p>Thanks, Google!</p>
    </div>
    <div id="tab-2">
      <h1>YEAH!</h1>
      <p>My header!</p>
    </div>
    <div id="tab-3">
      
    </div>
</div>
</body>
</html>

Flexible Tabbed Panels with CSS Selector

Just thought I'd share a tip about making Tabbed Panels more
flexible with the CSS Selector.
In working on the
menu
page for
a new
restaurant, I needed Tabbed Panels with the same custom scroll
bar I used on the rest of the site. I'd chosen the
fleXcroll kit because it is so
flexible, unobtrusive, and cross-browser compatible (if poorly
documented). Once you figure out how fleXcroll wants you to give it
the elements of your scroll bar, activating it is as easy as adding
the "fleXcroll" class to the div you want scrolled. This was the
same div which wraps my Tabbed Panels
(div.TabbedPanelsContentGroup).
No problem, I thought, as fleXcroll makes a big deal about
how it "can cope with dynamic updates such as dynamic content
injected via AJAX." The problem, though, is that that Tabbed Panels
can't cope with the wrappers fleXcroll injects inside the panel
container, as Tabbed Panels depends on a clean and fixed hierarchy
to identify panels as direct descendants of that container. Tabbed
Panels thought the fleXcroll wrappers were panels, and things just
didn't work.
Luckily, the CSS Selector provides a much easier method of
finding panels and tabs than traversing a fixed hierarchy. Instead
of identifying tabs as children of .TabbedPanelsTabGroup (which is
identified as the first child of the div you give to Tabbed Panel's
constructor) and panels as children of .TabbedPanelsContentGroup,
you simply identify tabs as Spry.$$(".TabbedPanelsTab") and panels
as Spry.$$(".TabbedPanelsContent")!
In SpryTabbedPanels.js, tabs and panels are collected with
getTabs() and getPanels():
var tabs = this.getTabs();
var panels = this.getContentPanels();
To escape the hierarchical bounds of Tabbed Panels, you just
have to change:
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
to:
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
tabs = Spry.$$(".TabbedPanelsTab"); // or your selector of
choice
return tabs;
and:
Spry.Widget.TabbedPanels.prototype.getContentPanels =
function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
to:
Spry.Widget.TabbedPanels.prototype.getContentPanels =
function()
var panels = [];
panels = Spry.$$(".TabbedPanelsContent"); // or your
selector of choice
return panels;
This still assumes that everything happens within the element
you give to the constructor, but that's okay by me for now.
Hope this helps someone else!

The TabbedPanels code:
<div id="mainmenu" spry:region="menuCom menuCat">
     <div id="TP1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
               <li spry:repeat="menuCat" class="TabbedPanelsTab" tabindex="0">{menuCat::category}</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
               <div spry:repeat="menuCom" spry:test="'{menuCom::category}' == '{menuCat::category}'" class="TabbedPanelsContent">{menuCom::subcategory} - {menuCom::description}</div>
            </div>
            </div>
           </div>
           </div>

Loading Tabbed Panels with the updateContent Util function

Hey,
Just wanted to see if anyone has had any issues while running
ThickBox Javascript and the updateContent function at the same
time.
On my site only 1 or the other will work... very confusing,
as my Javascript skills are minimal. Not sure what the clash is, I
thought it might be conflicting div id actions not being unique
enough, but it wasn't.
Anyone else?

HI Kin,
I appreciate your quick reply. Actually I was using your old
code to rotate my tabbed panels and not the new one you posted. The
new one from your website works well with regular tabbed panels but
when trying it with a Spry data, it still doesn't work, the tabs
doesn't play at all...
I use the spry:repeat, I don't know if that makes a
difference.
http://demiurgical.fluctuation.net/development/test.html
based on the original Tabbed Panels with Spry Data
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample2.html
I really appreciate your help!
Thanks,
John

How can I use a single query panel with two view criteria?

Hi all,
I have a requirement to allow users to change the "display mode" on a search results tree table for an advanced search page. What this will do is change the structure of how the data is laid out. In one case the tree table is 3 levels deep, in the other case it's only 2 with different data being at the root node.
What I've done so far:
1) I exposed the data relationship for these two ways of viewing the data in the application module's data model.
2) I created a view criteria in the two view objects that are at the root of the relationships, where (for simplicity sake) I'm only comparing a single field.
This is in one view object:
<ViewCriteria
    Name="PartsVOCriteria"
    ViewObjectName="gov.nasa.jpl.ocio.qars.model.views.PartsVO"
    Conjunction="AND">
    <Properties>... </Properties>
    <ViewCriteriaRow
      Name="vcrow23"
      UpperColumns="1">
      <ViewCriteriaItem
        Name="PartDiscrepantItemsWithIRVO"
        ViewAttribute="PartDiscrepantItemsWithIRVO"
        Operator="EXISTS"
        Conjunction="AND"
        IsNestedCriteria="true"
        Required="Optional">
        <ViewCriteria
          Name="PartDiscrepantItemsWithIRVONestedCriteria"
          ViewObjectName="gov.nasa.jpl.ocio.qars.model.views.PartDiscrepantItemsWithIRVO"
          Conjunction="AND">
          <ViewCriteriaRow
            Name="vcrow26"
            UpperColumns="1">
            <ViewCriteriaItem
              Name="InspectionRecordNumber"
              ViewAttribute="InspectionRecordNumber"
              Operator="="
              Conjunction="AND"
              Value=""
              Required="Optional"/>
          </ViewCriteriaRow>
        </ViewCriteria>
      </ViewCriteriaItem>
    </ViewCriteriaRow>
</ViewCriteria>
and this is in the other view object:
<ViewCriteria
      Name="IRSearchCriteria"
      ViewObjectName="gov.nasa.jpl.ocio.qars.model.views.InspectionRecordVO"
      Conjunction="AND">
      <Properties>... </Properties>
      <ViewCriteriaRow
         Name="vcrow7"
         UpperColumns="1">
         <ViewCriteriaItem
            Name="InspectionRecordNumber"
            ViewAttribute="InspectionRecordNumber"
            Operator="="
            Conjunction="AND"
            Required="Optional"/>
      </ViewCriteriaRow>
   </ViewCriteria>
3) I had a query panel and tree table auto-generated by dragging the data control for ONE of the view object data relationship that's exposed in the app module. Then I created a second query panel and tree table the same way but using the data control for the other. I'm hiding one of the query panels permanently and toggling the visibility of the tree tables based on the display mode the user chooses. Both tables have separate bindings and iterators.
This is a portion of the page definition:
<executables>
    <variableIterator id="variables"/>
    <searchRegion Criteria="IRSearchCriteria"
                  Customizer="oracle.jbo.uicli.binding.JUSearchBindingCustomizer"
                  Binds="InspectionRecordVOIterator"
                  id="IRSearchCriteriaQuery"/>
    <iterator Binds="InspectionRecordVO" RangeSize="25"
              DataControl="QARS_AppModuleDataControl"
              id="InspectionRecordVOIterator" ChangeEventPolicy="ppr"/>
    <iterator Binds="Root.QARS_AppModule.PartsVO1"
              DataControl="QarsMasterAppModuleDataControl" RangeSize="25"
              id="PartsVO1Iterator"/>
    <searchRegion Criteria="PartsVOCriteria"
                  Customizer="oracle.jbo.uicli.binding.JUSearchBindingCustomizer"
                  Binds="PartsVO1Iterator" id="PartsVOCriteriaQuery"/>
</executables>
4) I've created a custom queryListener to delegate the query event.
This is in my advanced search jsp page:
<af:query id="qryId1" headerText="Search" disclosed="true"
                  value="#{bindings.IRSearchCriteriaQuery.queryDescriptor}"
                  model="#{bindings.IRSearchCriteriaQuery.queryModel}"
                  queryListener="#{pageFlowScope.SearchBean.doSearch}"
                  queryOperationListener="#{bindings.IRSearchCriteriaQuery.processQueryOperation}"
                  resultComponentId="::resId2" maxColumns="1"
                  displayMode="compact" type="stretch"/>
This is in my backing bean:
public void doSearch(QueryEvent queryEvent) {
      String bindingName = flag
         ? "#{bindings.IRSearchCriteriaQuery.processQuery}"
         : "#{bindings.PartsVOCriteriaQuery.processQuery}";
      invokeMethodExpression(bindingName, queryEvent);
   private void invokeMethodExpression(String expr, QueryEvent queryEvent) {
      FacesContext fctx = FacesContext.getCurrentInstance();
      ELContext elContext = fctx.getELContext();
      ExpressionFactory eFactory = fctx.getApplication().getExpressionFactory();
      MethodExpression mexpr =
         eFactory.createMethodExpression(elContext, expr, Object.class, new Class[] { QueryEvent.class });
      mexpr.invoke(elContext, new Object[] { queryEvent });
When no inspection record number (the only search field so far) is supplied in the query panel, then it behaves correctly. Namely, the tree tables shows all search results. However, when an inspection record number is supplied the tree table that was created with the query panel in use (remember there are two query panels, one of them is hidden) shows a single result (this is correct) while the other tree table (the one with the hidden query panel that isn't in use) shows all results (this is NOT correct).
Is what I'm trying to accomplish even doable? If so, what am I missing?
I'm using JDeveloper 11.1.1.7
Thanks,
Bill

I ended up keeping one query panel permanently visible and the other permanently hidden. When performing a search using the table that has the hidden query panel, I seed the query descriptor for the hidden query panel using the visible query panel's query descriptor and then delegate the request:
   public void doSearch(QueryEvent queryEvent) {
      String bindingName = null;
      if(isIrTableRendered()) {
         bindingName = "#{bindings.IRSearchCriteriaQuery.processQuery}";
      } else {
         seedPartsQueryDescriptor();
         bindingName = "#{bindings.PartsVOCriteriaQuery.processQuery}";
         queryEvent = new QueryEvent(partsQuery, partsQuery.getValue());
      invokeMethodExpression(bindingName, queryEvent);
   private void seedPartsQueryDescriptor() {
      ConjunctionCriterion criterion = irQuery.getValue().getConjunctionCriterion();
      for(Criterion criteria : criterion.getCriterionList()) {
         AttributeCriterion attributeCriteria = (AttributeCriterion)criteria;
         List values = attributeCriteria.getValues();
         String qualifiedName = attributeCriteria.getAttribute().getName();
         int indexOfDot = qualifiedName.lastIndexOf(".");
         String name = indexOfDot < 0
            ? qualifiedName
            : qualifiedName.substring(indexOfDot + 1);
         ConjunctionCriterion partsCriterion =
            partsQuery.getValue().getConjunctionCriterion();
         for (Criterion partsCriteria : partsCriterion.getCriterionList()) {
            AttributeCriterion partsAttributeCriteria =
               (AttributeCriterion) partsCriteria;
            String partsQualifiedName =
               partsAttributeCriteria.getAttribute().getName();
            if (partsQualifiedName.endsWith(name)) {
               partsAttributeCriteria.setOperator(attributeCriteria.getOperator());
               List partsValues = partsAttributeCriteria.getValues();
               partsValues.clear();
               for (int i = 0, count = values.size(); i < count; i++) {
                  partsValues.set(i, values.get(i));
   private void invokeMethodExpression(String expr, QueryEvent queryEvent) {
      FacesContext facesContext = FacesContext.getCurrentInstance();
      ELContext elContext = facesContext.getELContext();
      ExpressionFactory expressionFactory =
         facesContext.getApplication().getExpressionFactory();
      MethodExpression methodExpression =
         expressionFactory.createMethodExpression(elContext, expr, Object.class, new Class[] { QueryEvent.class });
      methodExpression.invoke(elContext, new Object[] { queryEvent });
Then when the advanced/basic button is pressed for the visible query panel, I programmatically set the same mode for the hidden query panel:
   public void handleQueryModeChange(QueryOperationEvent queryOperationEvent) {
      if(queryOperationEvent.getOperation() == QueryOperationEvent.Operation.MODE_CHANGE) {
         QueryMode queryMode = (QueryMode) irQuery.getValue().getUIHints().get(QueryDescriptor.UIHINT_MODE);
         QueryDescriptor queryDescriptor = partsQuery.getValue();
         queryDescriptor.changeMode(queryMode);
         AdfFacesContext.getCurrentInstance().addPartialTarget(partsQuery);

Using Srpy tabbed panels with slidding panels

Similar Messages

Maybe you are looking for