Usinh HTMLPanel, TabbedPanels and Spry Regions

Hello,
I'm using HTMLPanel Widget to load an HTML file that has a
TabbedPanels whose content holds spry regions. I am getting the
TabbedPanels but I don't get the spry regions being generated
within them. I have the markup first...and then the dataset
instance...
quote:
<div class="TabbedPanelsContent"
spry:region="dsMenuItems">
<table width="100%">
<tr>
<th nowrap="nowrap" bgcolor="#B8C8DC">Content ID
</th>
<th nowrap="nowrap" bgcolor="#B8C8DC">Content
Name</th>
<th nowrap="nowrap"
bgcolor="#B8C8DC">Section</th>
<th nowrap="nowrap" bgcolor="#B8C8DC">File Type
</th>
<th nowrap="nowrap"
bgcolor="#B8C8DC">Column</th>
<th nowrap="nowrap" bgcolor="#B8C8DC">Order</th>
<th nowrap="nowrap"
bgcolor="#B8C8DC">Actions</th>
</tr>
<tr spry:repeat="dsMenuItems" spry:test="'{column}' ==
'left'">
<td align="center" valign="top">{contentid}</td>
<td align="center" valign="top">{name}</td>
<td align="center" valign="top">{section}</td>
<td align="center" valign="top">{filetype}</td>
<td align="center" valign="top">{column}</td>
<td align="center" valign="top">{order}</td>
<td align="center" valign="top">
<a spry:if="'{order}' > 1" href="javascript:void(0);"
onclick="getMenus('order={order}&dir=up&column={column}')">[up]</a>
<a spry:if="('{order}' < getNoItems('{column}'))"
href="javascript:void(0);"
onclick="getMenus('order={order}&dir=down&column={column}')">[down]</a>
<a href="javascript:void(0);"
onclick="getMenus('delete=true&contentID={id}&column={column}')">[delete]</a></td>
</tr>
</table>
</div>

sorry about not providing an example...i have it on local
machine.
the html page that has the markup as i quoted and the script
quote:
<script>var dsMenuItems = new
Spry.Data.XMLDataSet('?task=menus&a=get_content&menu_id=17',"/records/record",{
useCache: false});
dsMenuItems.setColumnType("order","number");
dsMenuItems.sort("order","ascending");
</script>
the HTML Panel is set to evaluate javascript. i get no
errors. are you sying to use observer on Panel? or on
tabbed?

Similar Messages

ADDT Datepicker and Spry:region

Using ADDT for a datepicker dropdown calendar, the following
code works as expected:
<form action="" method="post">
<input name="test" id="test" value="06/02/2008"
wdg:subtype="Calendar" wdg:mask="<?php echo
$KT_screen_date_format; ?>" wdg:type="widget"
wdg:mondayfirst="true" wdg:singleclick="true"
wdg:restricttomask="yes" />
</form>
When I add a Spry region, the dropdown calendar does not
work:
<div spry:region="ds1">
<form action="" method="post">
<input name="test" id="test" value="06/02/2008"
wdg:subtype="Calendar" wdg:mask="<?php echo
$KT_screen_date_format; ?>" wdg:type="widget"
wdg:mondayfirst="true" wdg:singleclick="true"
wdg:restricttomask="yes" />
</form>
</div>
Anyone have a solution please.
Ben

Anyone??

Air and spry (adding observer and addEventListener to spry regions links to open for a new window)

I'm trying to add a region.addobserver and addEventListener to spry regions so the links; that come for a external feed, opens in a new(default browser) window when clicked. The on* events in regions do not work in AIR so, is there a way to do this?
I have read a lot of the documentation on spry regions, addObserver and the addEventlistener but the samples don't deal with anything about external xml feeds with links in a spry region for a AIR app.
The closiest i saw was the gallery http://labs.adobe.com/technologies/spry/articles/air/photo_gallery.html, but it doesn't deal with:
links,
in a external RSS feed,
in the spry region,
to a new default browser.
Has anybody tried this before? Can it be done?
Ex:
          <div spry:region="rssDataNews" class="SpryHiddenRegion">
          <div spry:state="loading" id="notification2">Loading feeds, please wait ...<img src="assets/spinner.gif"></div>
          <div spry:state="error">Failed to load data! Please try again later</div>
            <table width="100%" spry:state="ready">
              <tr spry:repeat="rssDataNews" class="{ds_EvenOddRow}" spry:select="mySelectClass">
                <td class="cellPad">
                <span style="font-weight:bold">{title}</span><br /><br />
                {description}<br />
                 <a href="{link}" target="_blank">[Read full article]</a><br /><br />
                </td>
              </tr>
            </table>
      <div>
The <a href > only opens the url in the native AIR window. I need it to open in a web browser.
Message was edited by: dee12345654321

About on* events
They do work, but not as attribute on your HTML elements, you will need to use eventlisteners to attach them on the relevant nodes.
How: http://labs.adobe.com/technologies/spry/samples/dom_utils/add_event_listener.html
About links
Currently in Adobe AIR, its not (easily) possible to open or execute other programs on the users PC. I have seen die hard hacker user Java to get around this limitation. But i suggest you check out the Adobe AIR forum to confirm that you cant open links in the users browser.
But, Adobe AIR is basically a browser

Split Spry.Data and Spry.Data.Region from SpryData.js?

I don't like Spry.Data.Region or anything like Spry.*.Region because it make hard to customize using javascript.
But Spry.Data with Observer / Notify feature is great one. In fact, using SpryData.js, I can write my own "render html object" easier.
SrpyData.js is big (127KB) even when compressed, it is still 65KB. That why, needed split Spry.Data and Spry.Data.Region from SpryData.js so who want to use Spry.Data only like me will get smaller trafic.
I've tried remove all Spry.Data.Region content in SpryData.js. Surprise, some in Spry.Data call to Spry.Data.Region >>> Design have problem.
Anyone can help splitting them?

Found this in the archives:
<div spry:if="{ds_RowCount} == 0" class="trigger" style="display:none"></div>
Basically a hack to point the tooltip to a hidden div so no errors are thrown.

Spry Regions and Selection of First Element

I've done a little work with spry regions and am currently struggling with how to interact with the generated content via Javascript.
Specifically (I'm not using a Spry DataGrid BTW) I'm trying to do something like document.getElementById("st").focus(); on the first anchor in the returned dataset. I haven't put the ID in yet because I'm not sure exactly what to use (maybe @id) but how to capture the first one for the reference in the final .focus() call.
Anybody done this before?

<div spry:region="dsCompanies" style="clear:both;">
<div spry:repeat="dsCompanies">
<div class="card" >
<p><b><a href="#" onclick="loadcompany('{@id}','contacts');searchpanel.displayPopupDialog(false);return false;">{name}</a></b>
<br>{rectype}
<br>{name}
<br>{support}
<br>{address1}
<br>{address2}
<br>{address3}
<br>{city}, {state} {zip}
</p>
</div>
</div> 
<p spry:state="loading"> Please Wait...</p>
</div> 

You can apply focus to form elements and anchors/links. In this case I am attempting to set the focus to the <a href> tag.. but only the first in the repeating region.
<HTML>
<BODY>
<a id="foo1" href="#"> This</a>
<a id="foo2" href="#"> That</a>
<script type="text/javascript">
// selects 'that'
document.getElementById("foo2").focus();
</script>
</BODY>
</HTML>

Animated gif does not work in spry region

Trying to display an animated gif while xml file is loading.
The gif displays while loading but does not animate in the spry region.
<div spry:region="dslistings">
<div id="loadXML" spry:state= "loading"><img src="loadinganimated.gif"/></div>
<div spry:state="ready" </div>
Thank you in advance for any help.
Jeff

I believe you are correct, I tried to place the same animated gif outside of the spry region
and it also did not animate until the xml (approximately 500 records) loaded and completed displaying.
Once the xml loaded, the gif outside of the spry region started to animate.
So how then could you display some sort of animated loading indication?
Thank you
jeff

How do I display on-the-fly generated XML on a web page using DW CS4 Spry regions?

On a main web page I'm trying to display formatted data from an ASP page that generates XML on-the-fly from a query.
When I run the ASP page from the browser, the XML formatting of the data works. But when I run the main web page, the data doesn't display.
I'm using DW CS4 Spry regionsto display the data on the main page from the XML data generated by the ASP page. Here's the main page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache" >
<html>
<head>
<script type="text/javascript" src="SpryAssets/xpath.js"></script>
<script type="text/javascript" src="SpryAssets/SpryData.js"></script>
<script type="text/javascript" src="SpryAssets/SpryUtils.js"> </script>
<script type="text/javascript">var A1D1xml = new Spry.Data.XMLDataSet("A1D1ACRs_testWxmlCode.asp", "tests/test");</script>
<title>Test XML Main</title>
</head>
<body>
      <div id="A1D1xml" spry:region="A1D1xml">
                                <table id="A1D1">
            <tr>
            <th>ID</th>
            <th>Last Name</th>
            <th>Final Status</th>
            </tr>
            <tr spry:repeat="A1D1xml">
                   <td>{acr_id}</td>
                <td>{acr_lastName}</td>
                <td>{acr_final_status}</td>
            </tr>
              </table>
         </div>
</body>
</html>
Here's the code for the page that generates the XML: A1D1ACRs_testWxmlCode.asp
<html>
<%
set objConn=server.CreateObject("ADODB.Connection")
objConn.Open application("web_test")
set rs = objConn.Execute( "SELECT acr_id, acr_lastName, acr_final_status from acr_records_grid_view where acr_changeOption = 'A1D1'")
Response.ContentType = "text/xml"
Response.AddHeader "Pragma", "public"
Response.AddHeader "Cache-control", "private"
Response.AddHeader "Expires", "-1"
%>
<?xml version="1.0" encoding="utf-8"?>
<tests>
<%While (NOT rs.EOF)%>
                <test>
                                <ID><%=(rs.Fields.Item("acr_id").Value)%></ID>
                                <acr_lastName><![CDATA[<%=(rs.Fields.Item("acr_lastName").Value)%>]]></acr_lastName>
                                <acr_final_status><![CDATA[<%=(rs.Fields.Item("acr_final_status").Value)%>]]></acr_final_s tatus>
                </test>
    <%
              rs.MoveNext()
                Wend
%>
</tests>
<%
rs.Close()
Set rs = Nothing
%>
</html>
Thanks.

Thanks, but no; I'm using the correct case and folder.
With this code on the main page, The region flashes the table column header names
and the code as written for the spry repeat; then instantly disappears from the screen.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="SpryAssets/xpath.js"></script>
<script type="text/javascript" src="SpryAssets/SpryData.js"></script
<script type="text/javascript">var A1D1x = new Spry.Data.XMLDataSet("A1D1ACRs_testWxmlCode.xml", "tests/test");</script>
<title>Test XML Main</title>
</head>
<body>
      <div id="A1D1" spry:region="A1D1x">
               <table id="A1D1a">
            <tr>
            <th>ID</th>
            <th>Last Name</th>
            <th>Final Status</th>
            </tr>
            <tr spry:repeat="A1D1x">
                <td>{acr_id}</td>
                <td>{acr_lastName}</td>
                <td>{acr_final_status}</td>
            </tr>
              </table>
         </div>
</body>
</html>

Hiding Columns in a Spry Region

Hello All,
I'm using the SpryDOMUtils.js to hide columns in my SPRY table. Everything works fine when I load the page except when I add the LoadListener to hide the columns when the page generates:
function hideColumn(){
     Spry.$$("#second th:nth-child(n+5),#second td:nth-child(n+5)").toggleClassName("hideIt");
     changeText("button2","Hide Detail","Show Detail");
Spry.Utils.addLoadListener(function(){
     hideColumn();
After the page loads the columns are hidden like they are supposed to but the show button will not 'show' the columns and the code seems broken. Sorry I cannot post a link the code as it is on a Intranet.
I have followed the example on http://labs.adobe.com/technologies/spry/samples/dom_utils/hide_columns.html but maybe it is because it is in a spry region?
Cheers!
Kevin

I'm assuming that by "Spry Table" you meant that you are using a Spry region to generate a table. If so, you need to trigger your code from an onPostUpdate observer instead of triggering it after the page loads. The reason is that even though the page has loaded, the data sets that load your data still might not have completed loading ... so your region may not have been processed until *AFTER* the onload event fired.
Take a look at this example:
http://labs.adobe.com/technologies/spry/samples/data_region/RegionObserverSample.html
--== Kin ==--

Issue using spry regions in spry tabbed content

I am having a slight issue with making a slideshow in a spry tabbed panel set. I have tested my XML used for the slideshow in a basic blank page, where I created the spry source and detail regions, and it loads fine. When you click on the thumbnail, the detail region loads the image. But when I place the slideshow in my websites page, it is inside a spry tabbed panel set. Where it just doesn't seem to want to work.
Has anyone had this issue?
I posted a copy of the page at the link below. The slideshow is under the portfolio tab
http://www.fscproductions.net/spry/
Thanks
JF

Hi,
On the main forum page you will have read the following.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
After you have upgraded and not removed the remarks from the Spry files, we will have another look at it.
Ben

Spry region XML issue

I'm developing an interactive menu using the Spry and Ajax framework that lists the menu items on the left (in a Spry accordion) to a corresponding image and description on the right. I have the basic functionality working, however, my menu items are broken into sub categories, and I can't seem to get my XML file to separate these.
For an example of what I'm trying to do, visit here: http://bit.ly/g0RrU
As you can see, my menu is broken into sections; i.e. Tapas, Pizzas, Entrees...etc. Do I need to link a separate XML file to each of these sections, or can I simply make one more generation in my XML file.
For instance, could my XML file look like this:
<?xml version="1.0" encoding="UTF-8"?>
<menu>
     <tapas>
       <item>
          <name>Fresh Tilapia Dip</name>
          <title>Fresh Tilapia Dip</title>
          <image>../one0one/images/food/crab_cakes.jpg</image>
          <desc>Mesquite Smoked Fresh Fish w/ Tortilla Chips and Pickled Jalapenos $6.99</desc>
       </item>
       <item>
            <name>Jamaican Jerk Chicken Satay</name>
          <title>Jamaican Jerk Chicken Satay</title>
          <image>../one0one/images/food/satay.jpg</image>
          <desc>Served with Pineapple Chutney w/ 101’s Spicy Tartar. $9.99</desc>
       </item>
       </tapas>
       <pizzas>
               <name>Pizza1</name>
               <title>Pizza1</title>
               <image>img.jpg</image>
               <desc>description</desc>                      </pizzas>
</menu>
This is actually how it is currently set up, but when I link the XML file to a Spry region, it ignores the <tapas> and <pizzas> categories, and goes straight to the <item>. What's the best practice to achieve this menu effect?

What version of Spry are you using? If you are going to work
Spry and AIR, you will need Spry 1.6.1 to work within AIR's
application sandbox. You can find the details here:
http://labs.adobe.com/technologies/spry/air.html
and a case study that shows what I had to do to make the
Photo Gallery work in AIR 1.0 here:
http://labs.adobe.com/technologies/spry/articles/air/photo_gallery.html
--== Kin ==--

SELECT and detail Region in IE

The following code work great in Firefox but not in IE.
Basically what I'm doing is search a DB with a string and
populating a Select menu with the results. Once the select menu
populated, the user chooses a name and the details of that employee
is displayed in fields at the bottom. Like I said, it works great
in FF but got an unwanted suprise when i tested in IE.
<fieldset>
<legend>Ship To</legend>
<label for="ShipLname">Last Name:</label>
<input type="text" name="ShipLname" id="ShipLname" />
<hr>
<label for="ShipLname">First Name:</label>
<input type="text" name="ShipFname" id="ShipFname"
/><hr>
<input type="button" value="Get"
style="width:45px;margin-left:217px;"
onclick="getEmployee('ShipLname','ShipFname',dsShipTo);" />
<hr>
<div spry:region="dsShipTo">
<label for="select2">Please choose one</label>
<select name="ShipEmpID" id="label">
<option spry:repeat="dsShipTo"
onmousedown="dsShipTo.setCurrentRow('{ds_RowID}')"
value="{empid}">{fullname}</option>
</select> <span class="style1">{ds_RowCount}
Record(s) Found!</span><hr>
</div>
<div id="shipDetail2" spry:detailregion="dsShipTo" >
<label for="shipSector">Sector</label>
<input id="shipSector" name="shipSector" value="{sector}"
disabled /><hr>
<label for="shipTitle">Titler</label>
<input id="shipTitle" name="shipTitle" value="{title}"
disabled /><hr>
<label for="shipApplid">Employee ID</label>
<input id="shipApplid" name="shipApplid"
value="{employeeid}" disabled /><hr>
</div>
</fieldset>
spry call
<script>//com/employee.cfc?method=getEmployees
var dsShipTo = new
Spry.Data.XMLDataSet("com/employee.cfc?method=getEmployees&lastname=null&firstname=null",
"employees/employee");
dsShipTo.setColumnType("title","html");
</script>
Functions
function getEmployee(lname,fname, ds){
var firstname = document.getElementById(fname).value;
var lastname = document.getElementById(lname).value;
var thisURL =
'com/employee.cfc?method=getEmployees&lastname=' + lastname +
'&firstname=' + firstname;
//alert(thisURL);
ds.setURL(thisURL);
ds.loadData();
var rowCnt = ds.getRowCount();

Hii Barascu, Thank for checking this problem out with me.It's
really appreciated.
When I do the text/html, stops working in FF and still does
not work in IE.
Here is the xml cfc
<cfset ds = getEmployeesQry2(arguments.firstname)>
<Cfset xmldoc = '<?xml version="1.0"
encoding="utf-8"?><employees>'>
<cfloop query="ds">
<Cfset xmldoc = xmldoc & '<employee>
<firstname>#key_first_name#</firstname>
</employee>'>
</cfloop>
<cfset xmldoc = xmldoc & '</employees>'>
<cfcontent type="text/xml">
<cfoutput>#xmldoc#</cfoutput>
</cffunction>

Accessing form elements within a Spry region.

Since nested Spry regions isn't yet support, can someone tell
me how to access and modify form elements within a existing region?
For example, I have a region that displays a form based on
data I defined in a javascript array. On of the form elements is a
select with some options. I want to added and remove options to
this select depending on the number of objects in the data array.
The select is not defined when I try to access it after spry
has finished rendering the form, eg
document.forms[0].selOrder1.options.length = 0;
How are Spry regions attached to the browser's DOM? Does Spry
create it's own DOM subordinate to the main DOM?
Is it possible to make changes to a Spry region without using
Spry?
thx
pwp

Actually, there are a couple of ways to get access to the DOM
underneath a region container. If you have a region, you can put an
ID attribute on the region container node, or if you are using a
region observer, the data passed into the observer has a regionNode
property. So if you want access to the region DOM anytime the
region is re-generated, do something like this:
function myRegionObserver(notificationType, notifier, data)
// We only want to do something after the region is
re-generated,
// for all other notifications, do nothing.
if (notificationType != "onPostUpdate")
return;
// If your region container element has an ID on it, just
use
// getElementByID. This is useful in the case where your
observer
// is only ever registered with one region.
var rgnElement1 = document.getElementById("headerRegion");
alert(rgnElement1.innerHTML);
// Or you can simply use the regionNode property of the data
// that is passed in. This is useful if you've registered
the same
// observer on multiple regions. The regionNode property
will
// contain the region container node for the region that is
currently
// being updated.
var rgnElement2 = data.regionNode;
alert(rgnElement2.innerHTML);
Spry.Data.Region.addObserver("headerRegion",
myRegionObserver);
<div id="headerRegion" spry:region="ds1">
</div>
--== Kin ==--

Spry:region - Update

Hi,
I'm a beginner in programming with Adobe Spry so I don't know
if I already understood the Spry concept correctly or if my
question has already been answered in this forum before.
I have got an XML file on my web server which contains the
address data of a single user in the following way:
<?xml version="1.0" encoding="iso-8859-1"?>
<adressbook>
<contact id='1'>
<name>Person 1</name>
<company>his company</company>
</contact>
</adressbook>
The xml file is dynamically generated and can be called with
a GET-parameter "contact" which represents the contact id of the
contact whose address data should be delivered in the response.
Now I read something about the Adobe Spry data set concept.
So I wanted to implement a small address book widget by fetching
the data of a chosen contact from the server in the following way:
<script type="text/javascript">
var contactinfo = null;
function getcontactinfo(contactid) {
contactinfo = new
Spry.Data.XMLDataSet("data.xml.php?contact=" + contactid,
"/adressbook/contact", { useCache: false });
</script>
<div id='names'>
<a href='javascript:getcontactinfo(1)'>Person
1</a><br>
<a href='javascript:getcontactinfo(2)'>Person
2</a><br>
</div>
<div id='info' spry:region="contactinfo">
<table spry:repeatchildren="contactinfo">
<tr><td>name:</td><td>{name}</td></tr>
<tr><td>company:</td><td>{company}</td></tr>
</table>
</div>
My problem is that the spry:region won't be updated after
requesting new data via Spry.Data.XMLDataSet(). If I leave out the
getcontactinfo()-function and simply write something like
var contactinfo = new
Spry.Data.XMLDataSet("data.xml.php?contact=1",
"/adressbook/contact", { useCache: false });
everything works fine. Can anybody help me and could give me
a hint what I might do wrong.
Thanks a lot
André Langer
P.S.: btw. does anybody know if there's an option in the
spry:repeatchildren part to implement a similar behaviour like in
XSL where I could find out the tag names (in Spry the column
names), see
<xsl:for-each select="/adressbook/contact/*">
<tr><td><xsl:value-of
select="name()"/>:</td><td><xsl:value-of
select="."/></td></tr>
</xsl:for-each>

Hi Ala,
Look into the setURL and loadData functions.
http://labs.adobe.com/technologies/spry/articles/data_set_overview/
You can so something like
<a onClick="
contactinfo.setURL('data.xml.php?contact={contactid}');
contactinfo.loadData();")
http://labs.adobe.com/technologies/spry/samples/data_region/SetURL.html
Hope this helps.
Don

Adobe AIR and Spry Table

Hi All,
I'm having an interesting issue -- I'm very new to AIR, btw.
I build a spry table (using CS3) that pulls a local XML data source, and it displays fine in HTML
However, when I try to show it as an AIR file, I get this message:spry:region or spry:detailregion attribute has no data set!
Any ideas off the top? I will post the code shortly.

Here are the files (which work fine as html, but throw error as AIR)

Formatting tags in xml data set used for spry region

I am trying to put <p>,,,</p> tags in my xml data set but they cause the field to not load. For example I would like to create an xml file as follows:
<blog>
      <blogentry>
          <blogdate>Jan 2009</blogdate>
          <blogtitle>January Blog</blogtitle>
          <blogtext><p> this is a paragraph</p>
<p>and so is this</p>
          </blogtext>
     </blogentry>
</blog>
When I do this I don't get anything in the spry region. If I remove the <p>,</p> tabs it works.
Is there anyway to do this (not just with <p> but with any tags ... ie. tables, etc.).
Thanks/Hal

I have an online example:
http://www.pearlmanpr.com/perspective_test.html
The spBlog.xml file contains test junk. If I put the <[[CDATA....]]> inside the BlogEntry/BlogText tag it doesn't work at all.
http://www.pearlmanpr.com/perspective_test_2.html
If I use it without the <[[CDATA..]] it doesnt work either.
http://www.pearlmanpr.com/perspective_test_3.html
If I use it without any <> within the tag it sort of works (still needs to be aligned).

Usinh HTMLPanel, TabbedPanels and Spry Regions

Similar Messages

Maybe you are looking for