Object Oriented ContentPanel and events

[ericd]

Hi folks (and Merry Christmas and a Happy New Year)

Here is what i am trying to do. I have a dialog box that implements ContentPanels where each panel has its own jsp, for example,

var queryPanel = new YAHOO.ext.ContentPanel('inputParameters', {title: 'Input', closable: false});
queryPanel.getUpdateManager().update({version:"1.0", session:"hi there", url:'jsp\\SearchInput.jsp', scripts:true, callback:handleSearchInputEvents});

That works, no problem, very happy :) Just like Jack's examples. Now the SearchInput.jsp (mentionned above) also has its own javascript called, as you might have guessed, SearchInput.js. This script does validation against data a user might enter and whatever else needs to happen. For example, the text area box initially is empty and buttons defined in the parent dialog (that is the one that created the ContentPanel I previously mentionned) are "inactive". Only when the user enters text in the text area box will the buttons become active. For this to work I had envisionned the SearchInput.js sending an event to its parent dialog to let it know that there is data, its valid and etc. and therefore enable the buttons.

The reason I would have set this up this way, is to have the parent dialog handle all events between itself and all possible ContentPanels, i.e be a Broker. This way, each ContentPanel would instantiate an Object (javascript and its associated jsp) that can handle its own validation, setup, configuration and the likes. When said Object has some interesting data it would like to share, it would simply send an event to the parent with data attached to it.

I can already do this between a jsp and its javascript, that is, again, in many of Jack's samples. The parent can receive an "update" event from the ContentPanel, I tested it that and its works, but what about any event I would define.

Again, your thoughts, comments are more than welcomed.

Eric

[tryanDLS]

You can define your own events in any object that's derived from Observable, by adding it to the 'this.events' object. I would suggest you adopt a convention to prefix the names for your events, so that future additions to the base code don't conflict. You can then listen to those events via activateListener (or on) just like any other events.

If you're not deriving from Observable, you can still do it, you just need to follow something similar to the way it does things. That is define an event and firing mechanism. If you go this route, I would advise that you use the yui-ext event model and don't mix in the yui one. It'll just make things harder, and more work if you later decide to derive from Observable.

[ericd]

Thanks Tryan

I have been looking around for sample code that basically does what your second paragraph proposes, i.e I am not deriving from Observable. What I currently looking at is http://www.yui-ext.com/forum/viewtopic.php?t=1232&highlight=events in the hope to find similarities to what I am attempting to do

What I am trying to build is a text area box in a jsp and have it notify its parent when a user enters data. What I have gotten so far is the following,


var Search_Input = function()
{
var formEvents = null;
this.textdata_available = false;
this.textdata_unavailable = true;

this.events = {
'textdata_available' : new YAHOO.util.CustomEvent('textdata_available'),
'textdata_unavailable' : new YAHOO.util.CustomEvent('textdata_unavailable')
};

// private methods
var initForm = function()
{
// Hook into the text box events..
var textInput = getEl('searchText');
textInput.on('keyup', notifyOfData);
};

var initEvents = function()
{
formEvents = new YAHOO.util.CustomEvent("VDM_SEARCHFORM_EVENTS");
};

// Notify our parent that we have data available (or not)
var notifyOfData = function(event)
{
if(document.getElementById("searchText").value.length == 0)
{
this.fireEvent('textdata_unavailable', this);
}
else if(document.getElementById("searchText").value.length == 1)
{
this.fireEvent('textdata_available', this);
}
};

// return a public interface
return {
// Form event handler
subscribeFormEvents : function(subscriber)
{
formEvents.subscribe(subscriber, this);
},

initializeForm : function()
{
initForm();
initEvents();

return this;
},

getFormData : function()
{
},

putFormData : function(xmlData)
{
},

getID : function()
{
return "llb_search-input";
}
};
}();

//
YAHOO.extendX(llbSearch_Input, YAHOO.ext.util.Observable, {
//
textdata_available : function() {
this.textdata_unavailable = false;
this.textdata_available = true;
this.fireEvent('textdata_available', this);
},

//
textdata_unavailable : function() {
this.textdata_unavailable = true;
this.textdata_available = false;
this.fireEvent('textdata_unavailable', this);
}
});


Up to date things are not working, but that's OK, its part of the learning process. :) The this.fireEvent('textdata_unavailable', this) or this.fireEvent('textdata_available', this) complains that said functions does not exist. Do I need to convert the Search_Input to a prototype or something?

Thanks guys
Eric



You can define your own events in any object that's derived from Observable, by adding it to the 'this.events' object. I would suggest you adopt a convention to prefix the names for your events, so that future additions to the base code don't conflict. You can then listen to those events via activateListener (or on) just like any other events.

If you're not deriving from Observable, you can still do it, you just need to follow something similar to the way it does things. That is define an event and firing mechanism. If you go this route, I would advise that you use the yui-ext event model and don't mix in the yui one. It'll just make things harder, and more work if you later decide to derive from Observable.

[tryanDLS]

Part of your problem maybe the way you create your object.



var Search_Input = function() {
...

}();
YAHOO.extendX(llbSearch_Input, YAHOO.ext.util.Observable, {
...
}}



I don't believe the above is a valid construct. You can't do an immediate creation of Search_Input and then invoke extendX. Try eliminating the '()' creation and then create an instance via 'new' after extendX.

There may be a way to get your way to work, but I've never managed to, and non of the yui-ext code does that either.

[ericd]

Hey Tryan,

Yep you are right, the construct I was using was wrong. Its now without the ().. so we are now looking at is as follows:


var Search_Input = function() {
...
};

YAHOO.extendX(Search_Input, YAHOO.ext.util.Observable, {
...
});

I updated the code that creates the Search_Input by doing a new, i.e.

from
var pSearchObject = llbSearch_Input.initializeForm();

to
var test = new llbSearch_Input();
var pSearchObject = test.initializeForm();

and all still works as before (well almost) still the event issue, as before... where functions does not exists.... and i am not giving up.... though stating the no one does this is scary... I am sure there is a way... when it does work. i will post it

Eric

[ericd]

oops, forgot to add.... what do you mean by "create an instance via 'new' after extendX"
Do you mean something like;

var testSearch = newSearch_Input();

I am learning JS as I go along, so please bear with my ignorance....


Hey Tryan,

Yep you are right, the construct I was using was wrong. Its now without the ().. so we are now looking at is as follows:


var Search_Input = function() {
...
};

YAHOO.extendX(Search_Input, YAHOO.ext.util.Observable, {
...
});

I updated the code that creates the Search_Input by doing a new, i.e.

from
var pSearchObject = llbSearch_Input.initializeForm();

to
var test = new llbSearch_Input();
var pSearchObject = test.initializeForm();

and all still works as before (well almost) still the event issue, as before... where functions does not exists.... and i am not giving up.... though stating the no one does this is scary... I am sure there is a way... when it does work. i will post it

Eric

[tryanDLS]

Are you doing something to change the scope of the call for textdata_available() ? If you set a BP, is 'this' pointing to the right object?

[ericd]

Tim,

The BP tells me that this is my object, i.e. Search_Input, yes but for your "Are you doing something to change the scope of the call for textdata_available()" not that I know of... but will look into it ..

Thanks for all your help :)

[ericd]

Hey Tim,

I have been looking at all the fields of the 'this'.. should I not see the fireEvent method? cause i dont right now... just not there, and my guess, if it is derived, I should

[tryanDLS]

If 'this' is your object than don't worry about my comment regarding changing scope.

In Firebug, you should see all the methods even if they are derived. You can verify this by trying it with one of the sample examples. If you stop after the dialog is built and look at that object (note that it's not 'this', rather the actual instance of a dialog), you'll see all the methods.

When you're in the debugger, looking at your textSearch variable, you should see all the methods. You may have to add it as a 'watch' expression to be able to browse it.

[ericd]

Tim,

I rewrote things, well, moved stuff around and I do the events attached :), so my guess its a step in the right direction.. this is what it looks like now

var Search_InputEvents = function(el)
{
this.dataAvailable = false;
this.el = getEl(el, true);

this.events = {
'textdata_available' : new YAHOO.util.CustomEvent('textdata_available'),
'textdata_unavailable' : new YAHOO.util.CustomEvent('textdata_unavailable')
};
};

YAHOO.extendX(lSearch_InputEvents, YAHOO.ext.util.Observable, {
//
setSearchState : function(status)
{
this.dataAvailable = status;

if(this.dataAvailable)
this.fireEvent('textdata_available', this);
else
this.fireEvent('textdata_unavailable', this);
}
});

var Search_Input = function()
{
// Notify our parent that we have data available (or not)
var notifyOfData = function(event)
{
if(document.getElementById("searchText").value.length == 0)
{
var test = new Search_InputEvents("searchText");
test.setSearchState(false);
}
else if(document.getElementById("searchText").value.length == 1)
{
var test = new Search_InputEvents("searchText");
test.setSearchState(true);
}
};
};

Now let see the parent can hook into the events. Again, your opinions are more than welcomed

Eric

[ericd]

Hey all,

I have tried to get this working but alas, nothing ... yet. I will tried to put this in another way. If one takes a look at Jack's sample (see Layout Feed Viewer 2) that is precisely what I want to do. Every content panel can send events back to the parent and the parent can then react and update other panels. Click on a Suggested Field and the View Feed reacts accordingly. Click on a View Feed, the Preview Panel updates itself. Great stuff.

But, what I do not like about it is that all of it lives in one javascript and one html, when I think it would be better if one could have each panel be an individual javascript and html or jsp or whatever. Any change in one panel does NOT affect any other panels nor its corresponding html. I believe that having all of it in one javascript and a corresponding html will become a nightmare to support if the "object" one tries to create becomes somewhat complicated, i.e. sucky code. Another advantage is that each panel/object could be re-used by any other (brb, need cigs) projects.

I.e., each panel would be treated as an object that can send and receive events back to its parent and have data attached to it, if required, and be re-used anytime by any yui-ext stuff. An object could be simply attached to a dialog, attached to a ContentPanel but its always the same object. You write it, you debug it and you re-used it.

I have been learning the yui-ext for the last 3 weeks or so and again, I think its simply the best thing out there, but since being a "newbie" using this library I dont have all the answers. I might be missing something really obvious but I dont see why this would not be possible.

To reiterate what I am trying to do: Create a simple javascript and its jsp or html that simply puts a text box where a user would enter text. The "text area object" would notify its parent, let it be a dialog, a ContentPanel or whatever Jack will cook up in the future, that the user started entering data by firing an event back to the parent.

The script and its html.. very easy. Where my current pain resides :) is having it notify the parent.

What I have is as such

ParentDialog {

...

var queryPanel = new YAHOO.ext.ContentPanel('inputParameters', {title: 'Input', closable: false});
queryPanel.getUpdateManager().update({version:"1.0", session:"hi there", url:'jsp\\SearchInput.jsp', scripts:true, callback:handleSearchInputEvents});
innerLayout.add('center', queryPanel);

...
}();


Notice the url... I am calling a jsp page. This page is as follows:

<%@ page contentType="text/html; charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<script type="text/javascript">

// Search Query initialization
InitializeSearch = function()
{
var test = new SearchInput();
var pSearchObject = test.initializeForm();
pSearchObject.subscribeFormEvents(FormEventHandler);
}

// Initialize and render when it is available in the DOM
YAHOO.ext.EventManager.onDocumentReady(InitializeSearch);

</script>
</head>


<body>
<div id="tdg_searchinput_location"></div>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1%"></td>
<td width="70%" align="left" nowrap><span class="style1">Enter your Search Text Here</span></td>
<td width="29%"></td>
</tr>
<tr>
<td width="1%"></td>
<td width="70%" align="left"><textarea name="searchText" id="searchText" tabindex="1" cols=40 rows=6/></textarea></td>
<td width="29%"></td>
</tr>
</table>
</body>
</html>

If you notice, the jsp page will instantiate SearchInput() which is the javascript that does more of the "heavy" processing. The reason I do it this way is to have the jsp simply handle the look and feel and have the processing done by the corresponding javascript. You will also notice that it wraps the text box with Jack's extention... way to cool not to have it

Last but not least, said javascript

var SearchInputEvents = function(el)
{
SearchInputEvents.superclass.constructor.call(this);

//
this.dataAvailable = false;
this.el = getEl(el, true);

this.events = {
'textdata_available' : new YAHOO.util.CustomEvent('textdata_available'),
'textdata_unavailable' : new YAHOO.util.CustomEvent('textdata_unavailable')
};
};

YAHOO.extendX(SearchInputEvents, YAHOO.ext.util.Observable, {
//
setSearchState : function(status, data)
{
this.dataAvailable = status;

if(this.dataAvailable)
this.fireEvent('textdata_available', this, data);
else
this.fireEvent('textdata_unavailable', this, data);
}
});

var SearchInput = function()
{
var formEvents = null;
var test = new llbSearch_InputEvents("tdg_searchinput_location");

// private methods
var initForm = function()
{
var dwrapped = new YAHOO.ext.Resizable('searchText', {
wrap:true,
pinned:true,
width:450,
height:150,
minWidth:200,
minHeight: 50,
dynamic: true
});

// Hook into the text box events..
var textInput = getEl('searchText');
textInput.on('keyup', notifyOfData);
};

// Notify our parent that we have data available (or not)
var notifyOfData = function(event)
{
if(document.getElementById("searchText").value.length == 0)
{
test.setSearchState(false, null);
}
else if(document.getElementById("searchText").value.length == 1)
{
test.setSearchState(true, document.getElementById("searchText").value);
}
};

// return a public interface
return {
// Form event handler
initializeForm : function()
{
initForm();
return this;
},

};
};


Big fancy graphic....
ParentDialog ---> ContentPanel ---> SearchInput.jsp ---> SearchInput.js

By the way, all of this works just fine (except for the events :) ) What I would like to have is for SearchInput.js to send events to ParentDialog and ParentDialog send events to SearchInput.js. Is that possible?


Sorry for being so long winded... but its worst to type it :)
Eric

[ericd]

Got it to work, just the way I want it :)

[Wolfgang]

@ericd


...
But, what I do not like about it is that all of it lives in one javascript and one html, when I think it would be better if one could have each panel be an individual javascript and html or jsp or whatever.
...

2nd this.




Got it to work, just the way I want it


@ericd
i am looking for something similar.
Would you mind sharing your sample code?

Regards
Wolfgang

[ericd]

Hi Wolfgang,

Not a problem, I will prepare something and post it. The way I got it to work was to use the YAHOO.ext.state.CookieProvider(). Will post shortly

Eric


@ericd


...
But, what I do not like about it is that all of it lives in one javascript and one html, when I think it would be better if one could have each panel be an individual javascript and html or jsp or whatever.
...

2nd this.




Got it to work, just the way I want it


@ericd
i am looking for something similar.
Would you mind sharing your sample code?

Regards
Wolfgang

[Wolfgang]

Thank you, will wait for you :)

[ericd]

Alright.... here we go... if anyone reads this and looks over at the code and find potential issues, please let me know. This is a work in progress and will get perfected in time. Suggestions, as usual, are welcomed. The important parts are bolded

The basic concept is to break everything up in modules or objects, where each object can communicate with its parent using events. Said objects could live on different servers (which is what I am doing) The parent has a single event handler where all events are processed. The parent also keeps a handle to all objects so it can communicate back to them. It might be interesting to have the parent communicate back to its children using events vs their objects.

Also, I should create a class that handles the basic functionality and have all children derive from it. This will happen soon, cause I hate rewritting things over and over :)

And last but not least... have a real nice destroy method. ALso, I would like to pass the event handler name as a parameter when creating the component using the getUpdateManager().update

Note.. There is some issues when resizing the Dialog.. the panels dont resize.. :)

The "magic" happens in the CreateWindow method. I think that in the future, I might have to create a specialized CookieProvider that only handles what I am doing, but not sure yet. Jack created the CookieProvider to record states and I am using it for a different purpose. The day I start remembering states I might have an issue, but will deal with it when the time comes. I also currently leave the expire date to Jack's default when it should be set to session.


var cookieProvider = new YAHOO.ext.state.CookieProvider();
cookieProvider.clear();
cookieProvider.set("SearchDialogEventHandler", FormEventHandler.createDelegate(FormEventHandler));
YAHOO.ext.state.Manager.setProvider(cookieProvider);

Here is the code

The Parent dialog (looks a lot like Jack's Nested Layout example, thanks Jack)

var SearchDialog = function()
{
// define some private variables
var m_SearchWindow = null;

var m_windowName = "VDM_SEARCH_WINDOW";

var queryExplorerTree_url = "jsp\\treePanel.jsp";
var queryExplorerCluster_url = "jsp\\clusterPanel.jsp";
var searchInput_url = "jsp\\searchInput.jsp";
var searchResult_url = "jsp\\resultPanel.jsp";
var searchStatus_url = "jsp\\statusPanel.jsp";

var searchButton = null;
var searchResultObject = null;
var resultPanelObject = null;

// Event Handler... Handles events from all content panels
FormEventHandler = function(type, args, handle)
{
switch(type)
{
case 'VDM_OBJECT_EVENTS':
{
switch(handle.getID())
{
case 'searchPanel':
{
if(args[0].object_event == 'object_initialization_success')
{
searchResultObject = handle;
}
else if(args[0].object_event == 'data_unavailable')
{
if(!searchButton.isDisabled())
searchButton.disable();
}
else if(args[0].object_event == 'data_available')
{
if(searchButton.isDisabled())
searchButton.enable();
}

break;
}

case 'resultPanel':
{
if(args[0].object_event == 'object_initialization_success')
{
resultPanelObject = handle;
}
}
}
}
}
};

// Window specific stuff
var initWindowLayout = function()
{
//
var vdm_master = document.getElementById("master_location");

// Window setup
var searchWindowRoot = document.createElement("div");
searchWindowRoot.id = m_windowName;
vdm_master.appendChild(searchWindowRoot);

var documentElement = document.createElement("div");
documentElement.id = "the-search-dialog";
searchWindowRoot.appendChild(documentElement);

//
var documentElement1 = document.createElement("div");
documentElement1.id = "search-dialog";
documentElement1.style.position = "absolute";
documentElement1.style.top = "0px";
documentElement1.style.visibility = "hidden";
documentElement.appendChild(documentElement1);

var documentElement2 = document.createElement("div");
documentElement2.id = "searchHeader";
documentElement2.className = "ydlg-hd";
documentElement2.appendChild(document.createTextNode("TEST"));
documentElement2.align = "center";
documentElement1.appendChild(documentElement2);

//
var documentElement3 = document.createElement("div");
documentElement3.id = "searchDialog_body";
documentElement3.className = "ydlg-bd";
documentElement1.appendChild(documentElement3);

//
var documentElement4 = document.createElement("div");
documentElement4.id = "searchDialog_center";
documentElement4.className = "ylayout-inactive-content";
documentElement4.innerHTML = "";
documentElement3.appendChild(documentElement4);
};

var initSearchLayout = function()
{
var vdm_master = document.getElementById("master_location");

var layout = document.createElement("div");
layout.id = "layout";
vdm_master.appendChild(layout);

var searchWindowLayout = document.createElement("div");
searchWindowLayout.id = "container";
layout.appendChild(searchWindowLayout);

// Layout setup
var toolbarLocation = document.createElement("div");
toolbarLocation.id = "toolbarLocation";
searchWindowLayout.appendChild(toolbarLocation);

var toolbar = document.createElement("div");
toolbar.id = "searchToolbar";
toolbarLocation.appendChild(toolbar);

//
var searchLocationTree = document.createElement("div");
searchLocationTree.id = "searchTree";
searchWindowLayout.appendChild(searchLocationTree);

var searchLocationCluster= document.createElement("div");
searchLocationCluster.id = "searchCluster";
searchWindowLayout.appendChild(searchLocationCluster);

//
var contentLocation = document.createElement("div");
contentLocation.id = "content";
searchWindowLayout.appendChild(contentLocation);

//
var inputLocation = document.createElement("div");
inputLocation.id = "inputParameters";
searchWindowLayout.appendChild(inputLocation);

//
var resultLocation = document.createElement("div");
resultLocation.id = "resultset";
searchWindowLayout.appendChild(resultLocation);

//
var statusLocation = document.createElement("div");
statusLocation.id = "status";
searchWindowLayout.appendChild(statusLocation);
};

var destroyDialog = function()
{
m_SearchWindow.hide();
m_SearchWindow.shadow.hide();
m_SearchWindow.destroy();

// Remove all children from this dialog
var vdm_dialog = document.getElementById(m_windowName);
var vdm_remove = vdm_dialog.cloneNode(false);
vdm_dialog.parentNode.replaceChild(vdm_remove, vdm_dialog);

// Last but not least, remove this dialog from the DOM
var master = document.getElementById("master_location");
master.removeChild(document.getElementById(m_windowName));

m_SearchWindow = null;
};

//
var Search = function()
{
if(searchResultObject)
alert(searchResultObject.getData());
};

var Preferences = function()
{
alert("Preferences");
};

var Help = function()
{
alert("Help");
};

var createLayout = function()
{
// Set up the Search window internal layout
var SearchLayout = null;

SearchLayout = new YAHOO.ext.BorderLayout("searchDialog_body", {
hideOnLayout: true,
fitToFrame: true,
autoScroll:false,
north: {
//fitToFrame: true,
//autoCreate:true,
split:false,
initialSize: "2.2em",
titlebar: false
},
west: {
//fitToFrame: true,
//autoCreate:true,
split:true,
initialSize: 225,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
cmargins: {top:0,bottom:2,right:2,left:2}

},
south: {
fitToFrame: true,
autoScroll:true,
//autoCreate:true,
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
//fitToFrame: true
//autoScroll:true
}
});

SearchLayout.beginUpdate();

// Set up toolbars
var searchToolbar = new YAHOO.ext.Toolbar('searchToolbar');
searchButton = searchToolbar.addButton({text: 'Search', className: 'view-tab', click: Search.createDelegate(this)});
searchButton.disable();

var toolbarLocation = new YAHOO.ext.ContentPanel('toolbarLocation', {fitToFrame:true, closable: false, toolbar:searchToolbar});
SearchLayout.add('north', toolbarLocation);

// Set up Tree view
var treePanel = new YAHOO.ext.ContentPanel('searchTree', {title: 'Query Explorer', fitToFrame:true, closable: false});
treePanel.setUrl(queryExplorerTree_url, {version:"1.0", session:"hi there"}, true);
SearchLayout.add('west', treePanel);

// Set up Cluster view
var clusterPanel = new YAHOO.ext.ContentPanel('searchCluster', {title: 'Cluster Explorer', fitToFrame:true, closable: false});
clusterPanel .setUrl(queryExplorerCluster_url, {version:"1.0", session:"hi there"}, true);
SearchLayout.add('west', clusterPanel );

// Set up Status view
var statusPanel = new YAHOO.ext.ContentPanel('status', {title: 'Search Status', fitToFrame:true, closable: false});
statusPanel.setUrl(searchStatus_url, {version:"1.0", session:"hi there"}, true);
SearchLayout.add('south', statusPanel);

// Set up the search input view and results view
var innerLayout = new YAHOO.ext.BorderLayout('content', {
//fitToFrame: true,
//autoScroll: true,
center: {
minSize: 100,
maxSize: 400,
//fitToFrame: true,
//autoCreate:true,
autoScroll:true,
titlebar:true,
//collapsible:true,
animate: true
},
south: {
split:true,
initialSize: 200,
//minSize: 100,
//maxSize: 400,
//autoScroll:true,
collapsible:true,
fitToFrame: true,
//autoCreate:true,
titlebar: true,
animate: true
}
});

// Set up search input view
var queryPanel = new YAHOO.ext.ContentPanel('inputParameters', {title: 'Input', closable: false});
queryPanel.getUpdateManager().update({version:"1.0", session:"hi there", url:searchInput_url, scripts:true, params: {param1:'SearchDialogEventHandler'}});
innerLayout.add('center', queryPanel);

// Set up resultset view
var resultPanel = new YAHOO.ext.ContentPanel('resultset', {title: 'Search Results', pinned:false, dynamic: true, closable: false});
resultPanel.getUpdateManager().update({version:"1.0", session:"hi there", url:searchResult_url, scripts:true, params: {param1:'SearchDialogEventHandler'}});
innerLayout.add('south', resultPanel);

//
SearchLayout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
SearchLayout.getRegion('west').showPanel('searchTree');
SearchLayout.endUpdate();
};

// return a public interface
return {
createWindow : function()
{
//
var cookieProvider = new YAHOO.ext.state.CookieProvider();
cookieProvider.clear();
cookieProvider.set("SearchDialogEventHandler", FormEventHandler.createDelegate(FormEventHandler));
YAHOO.ext.state.Manager.setProvider(cookieProvider);

//
initWindowLayout();
initSearchLayout();

// Create the Search window
m_SearchWindow = new YAHOO.ext.LayoutDialog("search-dialog", {
modal:false,
autoTabs:false,
width:800,
height:600,
shadow:true,
minWidth:300,
minHeight:250,
resizable:true,
proxyDrag: true,
center:{autoscroll:true}
});

// Create the layout
createLayout();

// Show dialog and return its handle.. this will be used by the calling application to identify who is who
m_SearchWindow.show();
return this;
},

destroyDialog : function()
{
destroyDialog();
},

getID : function()
{
return "search-dialog";
}
};
}();


searchInput.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<script type="text/javascript">

// Search Query initialization
InitializeSearch = function()
{
//
var pProvider = YAHOO.ext.state.Manager.getProvider();
var pEventHandler = pProvider.get("SearchDialogEventHandler")

//
var object = new searchInput();
pSearchObject = object.initializeObject();
pSearchObject.subscribeFormEvents(pEventHandler);
}

// Initialize and render when it is available in the DOM
YAHOO.ext.EventManager.onDocumentReady(InitializeSearch);
</script>
</head>


<body>
<div id="tdg_searchinput_location"></div>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1%"></td>
<td width="70%" align="left" nowrap><span class="style1">Enter your Search Text Here</span></td>
<td width="29%"></td>
</tr>
<tr>
<td width="1%"></td>
<td width="70%" align="left"><textarea name="searchText" id="searchText" tabindex="1" cols=40 rows=6/></textarea></td>
<td width="29%"></td>
</tr>
</table>
</body>
</html>

searchInput.js

var searchInput = function()
{
var formEvents = null;

// private methods
var initializeForm = function()
{
var dwrapped = new YAHOO.ext.Resizable('searchText', {
wrap:true,
pinned:false,
width:450,
height:150,
minWidth:200,
minHeight: 50,
dynamic: true
});

// Hook into the text box and post events when needed, back to parent..
var textInput = getEl('searchText');
textInput.on('keyup', notifyParent);
};

var initializeEvents = function()
{
try
{
formEvents = new YAHOO.util.CustomEvent("VDM_OBJECT_EVENTS");
}
catch(exception)
{
YAHOO.log(exception);
}
};

// Notify our parent that we have data available (or not)
var notifyParent = function(event)
{
if(document.getElementById("searchText").value.length == 0)
formEvents.fire({object_event:"data_unavailable"});
else if(document.getElementById("searchText").value.length > 0)
formEvents.fire({object_event:"data_available"});
};

// return a public interface
return {
// Form event handler
subscribeFormEvents : function(subscriber)
{
try
{
formEvents.subscribe(subscriber, this);
formEvents.fire({object_event:"object_initialization_success"});
}
catch(exception)
{
YAHOO.log(exception);
}
},

initializeObject : function()
{
try
{
// Initialize form and events
initializeForm();
initializeEvents();
}
catch(exception)
{
YAHOO.log(exception);
}

return this;
},

//
getData : function()
{
return document.getElementById("searchText").value;
},

putData : function(xmlData)
{
},

getID : function()
{
return "searchPanel";
}
};
};

[jack.slocum]

Wow that's a lot of code to digest. I wish I had a better understanding of what you are doing. I read the whole thread twice and I am still a little lost. Maybe the product of too much coding though. :)

[ericd]

Tell me about it!.. to much code... I think I should make up a smaller sample :) Somewhat overboard. Give me a few and I will post something new


Wow that's a lot of code to digest. I wish I had a better understanding of what you are doing. I read the whole thread twice and I am still a little lost. Maybe the product of too much coding though. :)