Dynamic Accordion
Hi --
I would like to build an accordion by iterating through a
record set and
create the open and close tags for the accordion based on a
value in my
database. However, when I try using the
<cfif>/<cfelse> tags with
<cfformgroup> inside I get an error because I have my
</cfformgroup> before
the <cfformgroup>
Below is my current code:
<cfform name="frmMainMenu" format="flash">
<cfformgroup type="accordion">
<cfoutput query="qryMenu">
<cfif #LINK# eq ''>
<cfformgroup type="page" label="#DESCRIPTION#"
name="page#ID#"/>
<cfelse>
<cfinput name="btn#ID#" type="button"
value="#DESCRIPTION#">
</cfif>
</cfoutput>
</cfformgroup>
</cfform>
As you can see I have the CFFORMGROUP self closing at the
moment. What I
want to do is this
if (link = "")
close the open CFFORMGROUP (if open)
open the next CFFORMGROUP
else
display a button inside the CFFORMGROUP
I would set a variable prior to the first record to not close
the
cfformgroup since none is open and then I would have a
cfformgroup closed at
the end of my loop.
Can anyone help me out here?
Thanks
Rich
I figured it out in case anyone else wanted to know..
<cfquery name="qryMenu" datasource="cfWebHotel">
SELECT *
FROM dbo.tableNewMenu
ORDER BY ID ASC
</cfquery>
<cfform format="flash" name="myForm"
onload="onLoadForm();" width="210">
<cfformitem type="script">
import mx.core.View;
import mx.containers.*;
import mx.controls.Button;
function onLoadForm() {
var top = 1;
<cfoutput query="qryMenu">
<cfif #LINK# is ''>
var child_obj = my_acc.createChild(Canvas, "inst#ID#",
{label:"#DESCRIPTION#"});
top = 1;
<cfelse>
var menuButton:Object = child_obj.createChild(Button,
"btn#ID#", {_x:1,
_y:top, width:180, label:"#DESCRIPTION#"});
top = top + 22;
</cfif>
</cfoutput>
</cfformitem>
<cfformgroup type="accordion" id="my_acc" width="184">
</cfformgroup>
</cfform>
"Rich Morey" <[email protected]> wrote in message
news:[email protected]...
> Hi --
>
> I would like to build an accordion by iterating through
a record set and
> create the open and close tags for the accordion based
on a value in my
> database. However, when I try using the
<cfif>/<cfelse> tags with
> <cfformgroup> inside I get an error because I have
my </cfformgroup>
> before the <cfformgroup>
>
> Below is my current code:
>
> <cfform name="frmMainMenu" format="flash">
> <cfformgroup type="accordion">
> <cfoutput query="qryMenu">
> <cfif #LINK# eq ''>
> <cfformgroup type="page" label="#DESCRIPTION#"
name="page#ID#"/>
> <cfelse>
> <cfinput name="btn#ID#" type="button"
value="#DESCRIPTION#">
> </cfif>
> </cfoutput>
> </cfformgroup>
> </cfform>
>
> As you can see I have the CFFORMGROUP self closing at
the moment. What I
> want to do is this
>
> if (link = "")
> close the open CFFORMGROUP (if open)
> open the next CFFORMGROUP
> else
> display a button inside the CFFORMGROUP
>
>
> I would set a variable prior to the first record to not
close the
> cfformgroup since none is open and then I would have a
cfformgroup closed
> at the end of my loop.
>
> Can anyone help me out here?
>
> Thanks
>
> Rich
>
>
Similar Messages
-
Spry:state and dynamic accordion
When I use a dynamic accordion (i.e. populated by a dataSet),
the accordion functionality disappears. Here is my code. Am I doing
something wrong, or is this just a bug?
Thanks
Andy
<div spry:region="dsOrders">
<div spry:state="loading">Data is
loading...</div>
<div spry:state="error">Error loading
data...</div>
<div spry:state="ready">
<div id="orders" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsOrders">
<div class="AccordionPanelTab"><h3
spry:content="{ORDERNUM}"></h3></div>
<div class="AccordionPanelContent"><span
spry:content="{ORDERDATE}"></span></div>
</div>
</div>
</div>
</div>This might also be helpful to some. Not only do we have
states in SPRY... but events! Here is how I did it on a site that
has a dataset called dsOpportunities. The following HTML/Javascript
was added to the head tags of the HTML. Then the on <body
onload="afterReady()" > was used to make sure it was run.
Remember that your section you are hiding needs to have a class
with the same senario. (Or if it is unique you could do something
simular with ID rather than class.
<script>
function afterReady() {
$('pageContent').style.visibility = 'hidden';
var iSPRY = new Object;
iSPRY.onPostLoad = function(dataSet,data) {
$('pageContent').style.visibility = 'visible';
dsOpportunities.addObserver(iSPRY);
</script>
<style>
.pageContent {
visibility: hidden;
</style> -
Dynamic accordion with dynamic datagrid
I’m trying to create a dynamic accordion with embedded
datagrids in each accordion area. I have the base working but have
2 problems I can’t seem to figure out.
Bases; the accordion uses a repeater and vbox with a custom
component from a webservice result set to create the accordion. The
custom component has another webservice that gets a value from the
repeater to pass it to the custom component.
My 2 problems:
1. how do I prevent the custom component from running the
webservice until the accordion item is clicked or the area is
visible? Otherwise I end up will a bunch of queries hitting the DB
and if there is several items for the accordion and many items from
the datagrid its slower.
2. how can I get the datagrid query to refresh when the
accordion item is clicked? Because the data may change I am not
able to see the updated data unless I reload the entire
application.
1 thing I did try. With the tab control you can use the
show() event and the data will refresh just fine, but with the
accordion, the show() event does not seem to fire. Its as if they
are all visible.
Any help here would be much appreciated, I’ve been
racking my brain for days now and I sure it is something simple
that I am missing. Thanks in advance.
See the example code below.
the application code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute"
width="100%"
height="100%"
initialize="ws.getMethod1.send()"
xmlns:output="com.comp.*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
public var thisWsdl:String = '
http://localhost/webservice/service.cfc?wsdl';
]]>
</mx:Script>
<mx:WebService id="ws"
wsdl="{thisWsdl}"
useProxy="false"
showBusyCursor="true"
fault="Alert.show(event.fault.faultString, 'Error');"
concurrency="multiple" requestTimeout="30">
<mx:operation name="getMethod1">
<mx:request>
<param1>{param1data}</param1>
<param2>{param2data}</param2>
<param3>{param3data}</param3>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Accordion width="100%" height="100%"
fillColors="[#808080, #808080]">
<mx:Repeater id="rp"
dataProvider="{ws.getMethod1.lastResult}">
<mx:VBox label="{String(rp.currentItem.catname)}"
backgroundColor="#C0C0C0" width="100%" height="100%"
paddingRight="10">
<output:comp catid="{rp.currentItem.catid}"/>
</mx:VBox>
</mx:Repeater>
</mx:Accordion>
</mx:Application>
the component code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%"
height="100%"
focusIn="ws.getMethod.send()"
horizontalAlign="center"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
public var thisWsdl:String = '
http://localhost/webservice/service.cfc?wsdl';
[Bindable]
public var catid:int;
]]>
</mx:Script>
<mx:WebService id="ws"
wsdl="{thisWsdl}"
useProxy="false"
showBusyCursor="true"
fault="Alert.show(event.fault.faultString, 'Error');"
concurrency="multiple" requestTimeout="30">
<mx:operation name="getMethod2">
<mx:request>
<catid>{catid}</catid>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:DataGrid id="itemGrid"
dataProvider="{ws.getMethod2.lastResult}" width="700"
height="250">
<mx:columns>
<mx:DataGridColumn width="100" dataField="itemid"
headerText="Item Id"/>
<mx:DataGridColumn wordWrap="true" dataField="itemname"
headerText="Item Name"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>Perhaps you could use the change event of the accordion, or
the show event of the child containers?
Tracy -
Dynamic Accordion 2-Levels deep
Hello,
I'm relatively new to FLEX and I am having a problem
referencing a dynamically named UI object to add a child to.
I am building a menu with an accordion, adding tab sections
using the addChild method, and then trying to add link buttons
within each tab section. No matter how I try to reference the
dynamically named tab section, nothing seems to work....
any help would be appreciated.
A graphic of my layout can be viewed here to better
understand the problem I am trying to solve.
click here for
graphic
There are 3 panels and empty accordians (hardcoded in the
mxml) ,
I retrieve from a database a list of tabs I want to display,
loop through and add to the accordian in which it belongs.
This works up to this point and adds all the children
correctly, but trying to add children (link buttons) to those newly
added children (tab sections) is where I'm tripping up....
my code follows;
private function
getSubCategoryTypes_ResultHandler(event:ResultEvent):void{
acSubCategoryTypes = ArrayCollection(event.result);
for ( var i:int=0; i < acSubCategoryTypes.length; i++ ) {
var iPanel:int = acSubCategoryTypes
.PanelSort;
var iTab:int = acSubCategoryTypes.TabSort;
var tabID:String = 'TB'+ iPanel + "-" + iTab;
accordion_addChild(this['Ac'+ iPanel], acSubCategoryTypes
.TabTitle, tabID)
private function accordion_addChild(accordion:Accordion,
childTitle:String, tabID:String):void{
var vbox:VBox = new VBox();
vbox.label = childTitle;
vbox.id = tabID;
vbox.percentWidth = 100;
vbox.percentHeight = 100;
accordion.addChild(vbox);
// this is where I call the function to get the list of links
I want to populate the accordian sections with.
createLinks(childTitle); //
private function createLinks(tabName:String):void {
RO_SecurityMenu.getLinkList(tabName);
private function
getLinkList_ResultHandler(event:ResultEvent):void{
acLinkItems = ArrayCollection(event.result);
for (var i:int=0; i < acLinkItems.length; i++ ) {
var urlPath:String = acLinkItems.URL;
var linkLabel:String = acLinkItems
.Descr;
var iPanel:int = acLinkItems.PanelSort;
var iTab:int = acLinkItems
.TabSort;
// but I cannot seem to reference it correctly when it is
dynamically named.
var vbox:VBox = this['TB'+ iPanel + "-" + iTab];
var linkButton:LinkButton = new LinkButton ();
linkButton.label = linkLabel;
linkButton.id = linkLabel;
linkButton.data = urlPath;
linkButton.addEventListener(MouseEvent.CLICK,
application.followLink);
// if I hardcode this line to a hardcoded accordian tab
section it works.....
vbox.addChild(linkButton);
I have been pulling my hair out trying to get this to work...
I don't have much left!!!
Any help would be appreciated greatly!!
Thanks,
KevinI was able to achieve this using a different method;
1. Returning XML instead of a query object from my remote
object.
2. Loop through the XML nodes using nested repeaters hard
coded in the mxml.
code follows;
<mx:Panel width="100%" height="33%" layout="vertical"
id="panel1" title="">
<mx:Accordion id="Ac1" width="100%" height="100%" >
<mx:Repeater id="repeatAc1" dataProvider="{MenuXML.tab}"
>
<mx:VBox width="100%" height="100%"
label="{repeatAc1.currentItem.label}" >
<mx:Repeater id="repeatlinkAc1"
dataProvider="{repeatAc1.currentItem.link}" >
<mx:LinkButton label="{repeatlinkAc1.currentItem.label}"
data="{repeatlinkAc1.currentItem.url}" click="followLink(event)"
/>
</mx:Repeater>
</mx:VBox>
</mx:Repeater>
</mx:Accordion>
</mx:Panel>
this is a sample of the XML data I'm returning from the
remote object;
<panel>
<panelID>3</panelID>
<tab>
<label>Fund - Portfolio Profile</label>
<link>
<label>Investor Information</label>
<url>index.cfm?DocID=</url>
</link>
<link>
<label>Subscription Lender Information</label>
<url>index.cfm?DocID=</url>
</link>
</tab>
<tab>
<label>Legal Documents</label>
<link>
<label>Subscription Agreements</label>
<url>index.cfm?DocID=</url>
</link>
<link>
<label>Private Placement Memorandum</label>
<url>index.cfm?DocID=</url>
</link>
<link>
<label>Limited Partnership Agreement</label>
<url>index.cfm?DocID=</url>
</link>
<link>
<label>Amendments to LPA</label>
<url>index.cfm?DocID=</url>
</link>
</tab>
</panel>
Thanks Kaotic101 for your help earlier!
Kevin (Kdub) -
Programmatic openPanels and Dynamic Accordion Content
I have been trying to add links to programmatically open
panels in my accordion, which is successfully populated with an XML
dataset. It doesn't seem to work, (tried using both "simple
navigation" and "panel index" links).
This does work when the data in the accordion is hard-coded.
I created a test page directly from the AccordionSample2 page
in the samples with Spry 1.5 (all of my files are 1.5).
I added the programmatic links to open each of the 2 methods
of populating the accordion on that page, and they don't seem to
work, either.
Test Page is here:
www.imagicdigital.com/spry/AccordionSample2test.html
I thought perhaps the dynamically created accordion is using
a different id, so that's why the programmatic linking doesn't
work, but when I viewed the generated markup with the debugger, it
appears to use the given id.
Any thoughts or help? Thanks in advance.http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
that might help u out. the bottom example is a tabbed widget
that gets activated by clicking a link.
and this;
http://labs.adobe.com/technologies/spry/articles/data_api/apis/collapsible_panel.html#meth ods
might help u out to.
also, u might want to add the
<script type="text/javascript">
var a1 = new Spry.Widget.Accordion("Acc2");
</script>
part, becouse that is missing, and its giving errors. and if
u have firebug installed u will see those errors on firefox.
getfirefox.com <-- firefox
getfirebug.com <-- firebug -
Dynamic Accordion Children/Height Issue
Hello,
I am fairly new to flex, so this issue may actually be an easy fix, but please bare with me.
I have an accordion in my project that is being populated with child canvas containers based on the result of a mysql_query from AMFPHP. Due to space limitations the accordion MUST remain the exact same size no matter how many records come back from my query. My problem is that when too many accordion child containers are generated they overlap on top of each other.
Is there a way to turn a scrollbar on for the accordion? If not then is there a way to limit the number of child containers displayed inside the accordion and then control that with a VScrollbar?
Thanks,
BrianWrap the Accordion in a VBox and you should be all set.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.containers.VBox;
private function init():void{
for(var a:uint=0;a<100;a++){
var vb:VBox = new VBox();
vb.label = "MyVBox" + a;
vb.width = 200;
vb.height = 100;
acc.addChild(vb);
]]>
</mx:Script>
<mx:HDividedBox width="100%" height="100%">
<mx:VBox width="50%" height="100%"/>
<mx:VDividedBox width="50%" height="100%">
<mx:VBox width="100%" height="50%"/>
<mx:VBox width="100%" height="50%">
<mx:Accordion id="acc" width="100%" height="50%"/>
</mx:VBox>
</mx:VDividedBox>
</mx:HDividedBox>
</mx:Application>
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services -
Dynamic Accordion height (revisited)
Hi All,
I have an application that allows the user to add or remove
Accordion panels at will. My problem is that I want to keep the
overall Accordion height constant independent of the number of
panels.
I have found a simple way to keep the overall height of an
Accordion constant by varying the AccordionPanelContent height as
follows:
<div class="AccordionPanelContent" style="height:
expression(500-(20*{ds_RowCount})+'px'); margin: 0px;">
The problem is that it only works in IE5+.
Is there a way to achieve the same result for other browsers?quote:
Originally posted by:
Barascu Diana
Hi,
you can use expression () only for IE and if you want to get
the same behavior for the other browsers, you should write some
java script code to compute the height and then to set it on the
element.
Something like this:
var el = document.getElementById('id_{ds_RowID}');
if (el){
el.style.height = 500 - (20 *
(isNaN(parseInt('{ds_RowCount}'))? 0 : parseInt('{ds_RowCount}')))
+ 'px';
Diana
Hello Diana,
Thank you very much for your quick response. I used your
script and it and it works like a charm.
Kind regards,
Ben -
Hi All,
I'm using spry accordion as a menu loading its data from an
XML file. Here is my code
<!-- here I include all the libraries -->
<script src="../SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script src="../SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js"
type="text/javascript"></script>
<script src="../SpryAssets/SpryDOMUtils.js"
type="text/javascript"></script>
<script src="../SpryAssets/SpryURLUtils.js"
type="text/javascript"></script>
<script type="text/javascript">
// Grabs the values of the URL parameters for the current
URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
<script type="text/javascript">
var strategic1 = new
Spry.Data.XMLDataSet("../xml/Strategic.xml", "NewDataSet/Content");
var observer = { onPostUpdate: function(notifier, data) { var
a2 = new Spry.Widget.Accordion("Accordion1" ,
{defaultPanel:(params.panel ? params.panel : -1)}); } };
Spry.Data.Region.addObserver("strategic1Region", observer);
//-->
</script>
<!-- here I set the spry region -->
<div id="strategic1Region" spry:region="strategic1">
<div id="Accordion1" class="Accordion" tabindex="0">
<!-- here I set the area to be repeated -->
<div spry:repeat="strategic1" class="AccordionPanel">
<div
class="AccordionPanelTab">{strategic1::Menu}</div>
<div class="AccordionPanelContent">
<ul>
<li spry:if=" '{strategic1::Link1}' != 'undefined' "
class="SubMenu"><a href="{URL1}"
class="SubMenu">{Link1}</a></li>
<li spry:if=" '{strategic1::Link2}' != 'undefined' "
class="SubMenu"><a href="{URL2}"
class="SubMenu">{Link2}</a></li>
<li spry:if=" '{strategic1::Link3}' != 'undefined' "
class="SubMenu"><a href="{URL3}"
class="SubMenu">{Link3}</a></li>
<li spry:if=" '{strategic1::Link4}' != 'undefined' "
class="SubMenu"><a href="{URL4}"
class="SubMenu">{Link4}</a></li>
<li spry:if=" '{strategic1::Link5}' != 'undefined' "
class="SubMenu"><a href="{URL5}"
class="SubMenu">{Link5}</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
AND HERE IS MY XML FILE
<Content>
<IdMenu>2</IdMenu>
<Menu>tab01</Menu>
<SunMenu>SUB2</SunMenu>
<Link1>link01</Link1>
<Link2>link02</Link2>
<Link3>link0303</Link3>
<URL1>../link01.asp?panel=0#strategic</URL1>
<URL2>../link02.asp?panel=0#strategic</URL2>
<URL3>../link03.asp?panel=0#strategic</URL3>
</Content>
<Content>
<IdMenu>3</IdMenu>
<Menu>tab02</Menu>
<SunMenu>SUB3</SunMenu>
<Link1>link01</Link1>
<Link2>link02</Link2>
<Link3>link0303</Link3>
<URL1>../link01.asp?panel=0#strategic</URL1>
<URL2>../link02.asp?panel=0#strategic</URL2>
<URL3>../link03.asp?panel=0#strategic</URL3>
</Content>
<Content>
<IdMenu>4</IdMenu>
<Menu>tab03</Menu>
<SunMenu>SUB4</SunMenu>
<Link1>link01</Link1>
<Link2>link02</Link2>
<Link3>link03</Link3>
<Link4>link04</Link4>
<Link5>link0303</Link5>
<URL1>../link01.asp?panel=0#strategic</URL1>
<URL2>../link02.asp?panel=0#strategic</URL2>
<URL3>../link03.asp?panel=0#strategic</URL3>
<URL4>../link04.asp?panel=0#strategic</URL4>
<URL5>../link05.asp?panel=0#strategic</URL5>
</Content>
The Question
Is there a way to get the number of childnodes from the XML
file and load it to a var x and loop
<li spry:if=" '{strategicx::Linkx}' != 'undefined' "
class="SubMenu"><a href="{URLx}"
class="SubMenu">{Linkx}</a></li>
instead of repeating the spry:if 5 times
<li spry:if=" '{strategic1::Link1}' != 'undefined' "
class="SubMenu"><a href="{URL1}"
class="SubMenu">{Link1}</a></li>
<li spry:if=" '{strategic1::Link2}' != 'undefined' "
class="SubMenu"><a href="{URL2}"
class="SubMenu">{Link1}</a></li>
<li spry:if=" '{strategic1::Link3}' != 'undefined' "
class="SubMenu"><a href="{URL3}"
class="SubMenu">{Link1}</a></li>
<li spry:if=" '{strategic1::Link4}' != 'undefined' "
class="SubMenu"><a href="{URL4}"
class="SubMenu">{Link1}</a></li>
<li spry:if=" '{strategic1::Link5}' != 'undefined' "
class="SubMenu"><a href="{URL5}"
class="SubMenu">{Link1}</a></li>Siva,
My suggestion:
1). Create a managed bean that contains nested java.util.List's or java.util.Array's that read the menu hierarchy from the database
2). Use af:forEach tags inside of af:panelAccordion to iterate through the menu structure and stamp out the menu items.
John -
Dynamic Accordion, fetching node name instead of value. Is it possible?
Here is the xml.
<?xml-stylesheet type="text/xsl" href="myweb.xsl"?>
<client product="ppd" date="4/26/11 3:17 AM">
<system>
<osname>Linux
</osname>
<hostname>abhishek
</hostname>
<release>2.6.18-128.el5
</release>
<version>Red Hat Enterprise Linux Server release 5.3 (Tikanga)
</version>
<machine>ia64
</machine>
<bitmode>64
</bitmode>
<filesystem>
<file mount='Mounted' home='Filesystem' total='1K-blocks' free='Available' used='Used' percentage='Use%' />
<file mount='/' home='/dev/sda3' total='60300484' free='38305668' used='18882312' percentage='34%' />
<file mount='/boot/efi' home='/dev/sda1' total='1046516' free='1037912' used='8604' percentage='1%' />
<file mount='/dev/shm' home='tmpfs' total='4120800' free='4120800' used='0' percentage='0%' />
</filesystem>
</system>
</client>
my spry region. Using {systemData::osname} I can point to "Linux" but instead I would like to get osname itself. So basically I want to make a tree like structure using accordion where data within tree comes from this xml's node names.
<div spry:region="systemData">
<div id="Accordion1" class="Accordion" tabindex="0">
<div spry:repeat="systemData" class="AccordionPanel">
<div class="AccordionPanelTab">{systemData::osname}</div>
<div class="AccordionPanelContent">
{systemData::hostname}
</div>
</div>
</div>
<script type="text/javascript">
var a1 = new Spry.Widget.Accordion("Accordion1");
</script>
</div>
last but not least here is my spry dataset
var systemData=new Spry.Data.XMLDataSet("include/xml/clientabhishek.xml","client/system");hehe. Sorry for not being so clear. I wanted to know whether there is a way I can get osname(node name) instead of Linux (node value) from my dataset. Like using {osname} I can get value of osname but I was wondering if osname itself can be fetched someway. Is there a way? Thanks for passing by
-
Hi..
I am interested in creating a dynamic accordion based on XML
data, such as
is shown here
http://www.powersdk.com/ted/2005/05/flex-example-accordion-repeater.php
Unfortunately, the provided link to the source code at the
bottom of the
page is broken.
Can anyone help me out? Basically I have a data list like
this
MENU A
SUBA1
SUBA2
SUBA3
MENUB
SUBb1
SUBB2
SUBB3
so I want an accordion tab for Menu A and Menu B and then the
SUB's as
buttons inside the appropriate accordion.
Thanks
RichWell, I am partway there. I can't figure out how to reference
the text nodes of the xml. I have put the date in a label attribute
for testing for now. Give this a try and see if it is approaching
what you want.
Tracy
<?xml version="1.0" encoding="utf-8"?>
<!-- There is a bug in Repeater that prevents XMLList from
being used as a dataProvider -->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _ArrayCollection:ArrayCollection = new
ArrayCollection;
private function initApp():void
var xmlAccordion:XML =
<root>
<item label="A">ITEM A
<subitem label="A1">SUBA1</subitem>
<subitem label="A2">SUBA2</subitem>
</item>
<item label="B">ITEM B
<subitem label="B1">SUBb1</subitem>
<subitem label="B2">SUBB2</subitem>
<subitem label="B3">SUBB3</subitem>
</item>
</root>
var xl:XMLList = xmlAccordion.item;
_ArrayCollection = convertArrayCollection(xl)
}//initApp
//Converts an XMLList into an ArrayCollection
private function
convertArrayCollection(xl:XMLList):ArrayCollection
var ac:ArrayCollection = new ArrayCollection;
for (var i:int=0;i<xl.length();i++) {
ac.addItem(xl
return ac;
]]></mx:Script>
<mx:Accordion width="300">
<mx:Repeater id="r" dataProvider="{_ArrayCollection}">
<mx:HBox label="{r.currentItem.@label}" width="100%">
<mx:Repeater id="rsub"
dataProvider="{convertArrayCollection(r.currentItem.subitem)}">
<mx:Button label="{rsub.currentItem.@label}" />
</mx:Repeater>
</mx:HBox>
</mx:Repeater>
</mx:Accordion>
</mx:Application> -
Accordéon Spry avec données dynamiques.
Bonsoir.
J'ai créé une base de données avec des news et je souhaiterais, à l'aide de Dreamweaver et la librairie Spry, réaliser un accordéon dynamique, affichant le titre de la new dans le bandeau cliquable, et le texte de la new dans le content. J'ai essayé de jouer avec les zones répétées mais je ne suis parvenu à rien. Quelqu'un peut-il me mettre sur la voie ? (je ne demande pas de solution toute faite bien sur, juste le chemin à suivre).
Merci beaucoup d'avance.
pmediagPersonally I would not an accordion for this; but a master/detail area as I have done here http://pleysier.com.au/rss/
But if you want to use a dynamic accordion, have a look here http://www.infoaccelerator.net/blog/post.cfm/spry-dynamic-panels-within-dynamic-accordions
The first step is to create an XML file populated with data from the database, see here http://labs.adobe.com/technologies/spry/samples/utils/query2xml.html
You can then create a SpryXMLDataSet to use for the accodrion.
Gramps -
ADF Jdeveloper Accordion Implementation
Hi
Could you please help in one of ADF accordion implementation.
I have a requirement to implement accordions on page. The scenario could be best explain with example: Lets say I have 3 tables schools, students, subjects. School contain list of schools. for each school there are number of students stored in students table and each student can enroll number of subjects. So, when user login in on page, depending upon school-ID,
for each student in that school there would be an accordion component say student1, student2, student3 etc.. number of students-accordion will be dynamic based on number of students in that school. When student1 accordion is clicked, it should show all the subjects that student has enrolled. Similarly if student2- accordion is clicked it should corresponding list of subjects for that student.
Any inputs or pointers on dynamic accordion. One approach would be iterate on number of students and create accordion accordingly..not sure it will work..Hi,
use an af:foEach as a child ofthe panelAccordion to iterate over a list of students. Within teh af:forEach component have a showDetailItem and within this, populate the student detail information. Using ADF, I would use a tree binding that shows all students and as child nodes the detail information
Frank -
Accordion menu problem. Doesn't move.
Hello!
Here are files I've modified.
http://failiem.lv/u/jhqapxy
I was making an accordion menu after this tutorial.
http://www.thetechlabs.com/xml/build-a-dynamic-accordion-menu-in-flash-cs4-with-actionscri pt-30-and-xml/
In basic tutorial there is extra part of button where you add menu name "home, about us" etc.
But I don't need this. I needed more simplier. From xml file I load an image or swf. And then you just mouse over it and it moves and it clicks. No extra 30 pixels for button space.
If i change AS line
ldr.x=0
to ldr.x=27
then it moves, but there is extra unnecessary empty space between content things. I don't need it. What should I do?
I'm total beginer at these things, but I really need this thing.You need to find where the space between is being added. If you include the relevant code in your posting you are more likely to get help. Also, probiding screenshots to show the problem you want to solve can be helpful.
People are generally not too keen about chancing downloading files and researching tutorials or other external information when trying to help in forums. -
This code here repeats the accordeons panel but all opened
and innactive.
<!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=iso-8859-1" />
<title>Products Demo</title>
<link href="css/accordion.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="../../includes/xpath.js"></script>
<script type="text/javascript"
src="../../includes/SpryData.js"></script>
<script type="text/javascript"
src="../includes/SpryEffects.js"></script>
<script type="text/javascript"
src="../includes/SpryAccordion.js"></script>
<script type="text/javascript"
src="../../includes/gallery.js"></script>
<script type="text/javascript">
var dsProducts = new Spry.Data.XMLDataSet("products.xml",
"products/product")
var dsProductFeatures = new
Spry.Data.XMLDataSet("products.xml",
"products/product/features/feature")
</script>
<link href="../css/screen.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="wrap">
<div id="sidebar">
<table spryregion="dsProductFeatures" id="products">
<caption>
{@Departure}
</caption>
</table>
<div spryregion="dsProductFeatures" id="content">
tetette
<p>
<img src="
http://staticcontent.exitravel.com/StaticContent/EN/DBImages/Common/Image/Hotel/{@OrgID}/{ @HotelID}_1.jpg"
id="mainImage" alt="main image" width="120" height="120" />
</div>
<div id="Acc1" class="Accordion">
<div spryregion="dsProductFeatures"
class="AccordionPanel">
<div spryrepeat="dsProductFeatures">
<div class="AccordionPanelLabel">
{@Destination}
</div>
<div class="AccordionPanelContent">
{@Price}
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var Acc1 = new Spry.Widget.Accordion("Acc1");
-->
</script>
</body>
</html>
Does that mean that Spry accordeons cant be duplicated that
way?Actually, you can generate the panels dynamically, but there
are a couple of things you have to keep in mind. There is an
expected markup structure for the accordion. The divs that make up
the accordion follow a pattern that looks like this:
Accordion
Accordion Panel
Accordion Panel Label
Accordion Panel Content
Accordion Panel
Accordion Panel Label
Accordion Panel Content
Inserting extra divs between and around some of these
structures will only confuse the Accordion behavior code.
Since you are trying to repeat accordion panels, you want to
put the spryregion attribute on the Accordion itself, and then put
a spryrepeat on the actual div that is the panel.
The next thing to consider, is that anytime Spry regenerates
the markup for a widget, you have to re-attach all of the widget
behaviors to the widget. To accomplish this, we have to place a
listener on the data set. The idea is that every time the data set
notifies listeners that its data has changed, we know the widget
markup will be re-generated, so we have to call the constructor for
the Accordion.
Here's some actual markup that I whipped up that works:
<!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=iso-8859-1" />
<title>Dynamic Accordion</title>
<link href="../../css/accordion.css" rel="stylesheet"
type="text/css" />
<script language="JavaScript" type="text/javascript"
src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript"
src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript"
src="../../includes/SpryEffects.js"></script>
<script language="JavaScript" type="text/javascript"
src="../../includes/SpryAccordion.js"></script>
<script language="JavaScript" type="text/javascript">
// Step 1: Define the data set:
var dsAirports = new
Spry.Data.XMLDataSet("../../data/airports.xml",
"/airports/airport");
// Step 2: Register a listener on dsAirports so that we can
auto-attach the
// Accordion behaviors.
dsAirports.addDataChangedObserver("accordionObserver", {
onDataChanged: function(ds, dcType) { setTimeout(function() { var
acc = new Spry.Widget.Accordion("Acc1"); }, 0); } });
</script>
</head>
<body>
<div id="Acc1" class="Accordion"
spry:region="dsAirports">
<div class="AccordionPanel" spry:repeat="dsAirports">
<div class="AccordionPanelLabel">
<h3>{code}</h3>
</div>
<div class="AccordionPanelContent">
<div>{name}</div>
</div>
</div>
</div>
</body>
</html>
Note the use of a timer in the listener callback. This is
necessary to force the Accordion call to be triggered *after* the
dynamic region has been re-generated. This won't be necessary once
we implement the dynamic region observers mechanism.
--== Kin ==-- -
OT: Need help on menu, please (JavaScript)
Hi there and thanx for your help so long.
My question is about this menu:
http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu
I must say that I really need this to work.
My effort is here:
www.energywa.co.za/layout/
It works beautifully in IE but not as beautifully in FF and Chrome.
Problem:
By just putting in the adress as above, the coloured boxes do not appear at all. They only appear when I click on the Home link at the top of the page or I type www.energywa.co.za/layout/index.php in the address bar.
It does this on my local machine as well as the server where it is hosted on.
What bugs me is that it works perfect from the writer's site in all 3 browsers. Unfortunately there is no support forum on the site and I have alrwady mailed the writer but had no luck yet.
Can someone please help me? I am in the process of learning JavaScript but can only copy & paste at the moment. ;-)
Thank you so long.
DeonHi Gary.
I eventually got it to work. There is still a lot of clutter in the script which I need to sif through, but it works! I am so relieved. I used the files another person modified (from the link I posted) and changed them here and there.
I also still need to get my menu to the left, but that should be easy.
You can again have a look at www.energywa.co.za/layout
It works in IE, FF and Chrome.
Thanx very much again for all your help. I don't know what exactly fixed it, but it is there somewhere.
Regards,
Deon
Maybe you are looking for
-
The Licence for this music cannot be found
When I try to play any tracks on OVI player I get the error shown in attachment error1.jpg. I have followed the instructions and accessed my account and in downloaded history I can see the album as shown in attachment error2.jpg When I click on the a
-
How to resolve Message "Incorrect translation in error saving docuemnt message"?
As of 29/Jan/2014, I only get this message from Adobe Reader of iPad (Japanese environment) Regardless of my subscription, I cannot convert anything to PDF. How to resolve or get money back?
-
Ready Time out error in application log
Hi All, Recently application are throwing below error when they are connected to databases engine. Application and Databases are two different servers. SQL Server Version: SQL Server 2012 Enterprises Editon Applicaiton: JAVA 2013-12-17 11:38:23,236 [
-
Make DropdownBox initial state to show blank
Hi! I need to set the initial value selected of sap.ui.commons.DropdownBox to be blank before user interaction, but without adding any empty items. Is this possible? If yes then how? Kind regards for your help Janis
-
Make a plugin directly updatable via Extension Manager
Hi, so, i have a panel built with Configurator 4 for Photoshop Cs6 and with Extension Builder 3 for CC. Some plugins have the cool feature of being updatable directly from Adobe extension manager. I am trying to find some documentation regarding this