PDA

View Full Version : I must be missing something.


Animal
11 Sep 2006, 7:02 AM
My JSP outputs the following code to the browser:




<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><link rel="stylesheet" href="/aspicio/Aspicio.css"><script type="text/javascript" src="/aspicio/js/yahoo.js" ></script><script type="text/javascript" src="/aspicio/js/event.js"></script><script type="text/javascript" src="/aspicio/js/dom.js"></script><script type="text/javascript" src="/aspicio/js/logger.js"></script><script type="text/javascript" src="/aspicio/js/connection.js"></script><script type="text/javascript" src="/aspicio/js/animation.js"></script><script type="text/javascript" src="/aspicio/js/dragdrop.js"></script><script type="text/javascript" src="/aspicio/js/treeview.js"></script><script type="text/javascript" src="/aspicio/js/container.js"></script><script type="text/javascript" src="/aspicio/js/menu.js"></script><script type="text/javascript" src="/aspicio/js/YahooExtensions.js"></script><script type="text/javascript" src="/aspicio/js/fcl.js"></script><title>Area Maintenance</title></head><body ><body><div id="message">

</div><div id="menu">

<script type="text/javascript" src="/aspicio/js/fclmenu.js"></script><div class="MenuBar " ><span class="MenuButton" onmouseover="buttonMouseover(this, 'Menu24676841');" onclick="return buttonClick(this, 'Menu24676841');">Static Data</span><span class="MenuButton" onmouseover="buttonMouseover(this, 'Menu1375978');" onclick="return buttonClick(this, 'Menu1375978');">Application Data</span></div><div id="Menu24676841" class="Menu " >Area/Postal/Zip Codes (/gfFw/editUser.do?type=Area&action=list)Class Control (/gfFw/editUser.do?type=ClassControl&action=list)Companies (/gfFw/editUser.do?type=Company&action=list)House Components (/gfFw/editUser.do?type=Component&action=list)Contacts (/gfFw/editUser.do?type=Contact&action=list)ContactTypes (/gfFw/editUser.do?type=ContactType&action=list)Countries (/gfFw/editUser.do?type=Country&action=list)Country sub-entities (/gfFw/editUser.do?type=CountrySubEntity&action=list)Currencies (/gfFw/editUser.do?type=Currency&action=list)<span class="MenuItem " onclick="clearActiveButton();0" >DateInfo</span>Economic Groups (/gfFw/editUser.do?type=EconomicGroup&action=list)Languages (/gfFw/editUser.do?type=Language&action=list)Markets (/gfFw/editUser.do?type=Market&action=list)Main Menu Groupings (/gfFw/editUser.do?type=Menu&action=list)Supply-Chain Players (/gfFw/editUser.do?type=Player&action=list)Player Types (/gfFw/editUser.do?type=PlayerType&action=list)TimeZones (/gfFw/editUser.do?type=TimeZone&action=list)Users (/gfFw/editUser.do?type=User&action=list)User Groups (/gfFw/editUser.do?type=UserGroup&action=list)</div><div id="Menu1375978" class="Menu " >Tax No Validations (/gfFw/editUser.do?type=AppTaxNoValidation&action=list)Application Classes (/gfFw/editUser.do?type=AppClass&action=list)Application Components (/gfFw/editUser.do?type=AppComponent&action=list)</div></div><div id="titleBar">Area Maintenance</div><div id="content">

<script type='text/javascript' src='/aspicio/dwr/engine.js'></script>
<script type='text/javascript' src='/aspicio/dwr/util.js'></script>
<script type="text/javascript" src="/aspicio/dwr/interface/RemoteEntityLister.js"></script>
<script type="text/javascript" src="/aspicio/js/dom.js"></script>
<script type="text/javascript" src="/aspicio/js/YahooExtensions.js"></script>
<script type="text/javascript" src="/aspicio/js/yui-ext.js"></script>
<script type="text/javascript" src="/aspicio/js/AspicioGridDataModel.js"></script>
<script type="text/javascript" src="/aspicio/dwr/util.js"></script>
<script type="text/javascript">
DWREngine.setTextHtmlHandler(function()
{
alert("DWR call rejected by server.\nSession timed out. Reloading page");
top.location.href.reload(true);
});

var AreaTabset = null;
var AreaListTab = null;
var AreaFormTab = null;
var AreaListerId = null;
var AreaDataModel = null;
var AreaGrid = null;

function bodyOnLoad()
{
AreaTabset = new YAHOO.ext.TabPanel("MaintenanceTabset");
AreaFormTab = AreaTabset.addTab("AreaFormTab", "Area");
AreaListTab = AreaTabset.addTab("AreaListTab", "Area List");
editArea(0);
}

function editArea(row)
{
AreaFormTab.getUpdateManager().update("/aspicio/editUser.do?type=Area&id=" + row);
AreaFormTab.activate();
}

function loadAreaListTab(form)
{
// Use YAHOO's Connection to collect all form values (Except uuid and version) into a string.
form.uuid.disabled = true;
form.uuid.version = true;
YAHOO.util.Connect.setForm(form);
form.uuid.disabled = false;
form.uuid.version = false;

// Switch to the list tab
AreaListTab.activate();

var paramString = YAHOO.util.Connect._sFormData;
YAHOO.widget.Logger.log("Submitting criteria: '" + paramString + "'");
RemoteEntityLister.createEntityLister(paramString, createAreaGrid);
}

function createAreaGrid(id)
{
AreaListTab.bodyEl.setStyle("width", AreaListTab.bodyEl.getWidth() + "px");
AreaListerId = id;
AreaDataModel = new YAHOO.ext.grid.AspicioDataModel(AreaListerId);
AreaGrid = new YAHOO.ext.grid.Grid("AreaListTab", AreaDataModel, AreaDataModel);
AreaGrid.autoSizeColumns = true;
AreaGrid.minColumnWidth = 50;
AreaGrid.render();
}

</script>
<body onload="bodyOnLoad()">
<div id="MaintenanceTabset" style="height:550px">
<div id="AreaFormTab" class="tab-content"></div>
<div id="AreaListTab" class="tab-content" style="height:500px">
</div>
</div>
</body>
</div></body></html>

This displays:

http://static.flickr.com/88/240553791_6e3629aa17.jpg?v=0

There are no header boundaries.

The columns are autosized too wide.

Double clicking on the header when the cursor changes to resize (It does think there are column header boundaries) shrinks column size to about 5px.

Resizing a column header does not resize the data columns.

The header does not scroll left/right when the data table is scrolled left/right.

I know this stuff works in the examples, so it must be something I'm doing wrong, hence posting in "Help".

Also, the tabs are not displaying right. There's a line under the tab labels seperatring them from the body - the active tabpanel doesn't "flow" into the label.
jack.slocum
11 Sep 2006, 10:28 AM
The column splitters are done with one of the images in the resources directory in the download. By default grid.css points to ../images/grid/ for all images.

Do me a favor and remove this line:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And see if that fixes the problems. I haven't tested any of this in XHTML strict, so that's the first thing I noticed.

If that isn't an option, or it doesn't fix it, can you put up a page anywhere that I can take a look and try to debug?

Thanks,

Jack
Animal
12 Sep 2006, 6:28 AM
I've figured a lot of it out.

My ColumnModel has to accept the setColumnWidth() calls from the auto-measuring, and then fire the column width changed event.

I've fixed the image locations in my CSS.

The only thing tat doesn't look that good now is the tabs in the tabpanel. There's a line under the tabs.*

*I don't know what the terminology is, the little sticky up things with the title in, they are the "tab"s right?
jack.slocum
12 Sep 2006, 11:51 AM
Yes. The CSS for the tabs comes from the YUI patterns library. It's possible they won't work with XHTML strict. I don't know. You may need to tweak the CSS.

The way it keeps that line from appearing is by using margin-bottom: -1px. It's possible that margin-bottom: -1px is not vaid in strict mode but I'm just guessing.