PDA

View Full Version : Help with yui, not yui-ext.



irishdunn
10 Oct 2006, 5:56 AM
Hello there, Jack has been giving me a ton of help to get my project off the ground and I have used all yui-ext components so far. I find that most of the documentation for yui-ext and examples from the blog much easier to read than the native yui material. I want to use some type of panel, for an inner window popup and I cannot get it to work on my page so far. If anyone with eyes for its use will look at my code and give me a pointer I would greatly appreciate it.

Single file to drive the page:


var application = function(){

var ssgUsers = [
['Andrew'],
['Gordon'],
['Jeff']
];

var mmbUsers = [
['KimJohn'],
['Boyd'],
['Kaleigh']
];

var ssgRoles = [
['Administrator'],
['Power User'],
['Master Investor'],
['Teh Clown']
];

var mmbRoles = [
['Destroyer'],
['Creator'],
['Black ball'],
['The Color Blue'],
['Useless'],
['Corruptor'],
['Insano'],
['Last One']
];

return {
init : function(){ // Everything drives off of the application grid
var myData = [ ['SSG'],['MMB'] ];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);

var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Application", width: 200, sortable: true, sortType: sort.asUCString}
]);

var sm = new YAHOO.ext.grid.SingleSelectionModel();
sm.addListener('selectionchange', this.loadUserAndRoleGrid, this, true);

this.appGrid = new YAHOO.ext.grid.Grid('application_grid', dataModel, colModel, sm);
this.appGrid.render();

// Call everything else on the page to render
this.initUserGrid();
this.initRoleGrid();
this.initUserTabs();
this.initUserToolbar();
this.initRoleToolbar();
this.initUserPanel();
}, // End application_grid

initUserGrid : function(){
this.userData = new YAHOO.ext.grid.DefaultDataModel([]);
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Application user List", width: 680, sortable: true, sortType: sort.asUCString}
]);
this.userGrid = new YAHOO.ext.grid.Grid('user_grid', this.userData, colModel);
this.userGrid.render();
}, // End user_grid

initRoleGrid : function(){
this.roleData = new YAHOO.ext.grid.DefaultDataModel([]);
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Application role List", width: 200, sortable: true, sortType: sort.asUCString}
]);
this.roleGrid = new YAHOO.ext.grid.Grid('role_grid', this.roleData, colModel);
this.roleGrid.render();

}, // End role_grid

initUserTabs : function(){
var tabs = new YAHOO.ext.TabPanel('user_tabs');
tabs.addTab('user', "User");
tabs.addTab('profile', "Profile");
tabs.addTab('roles', "Roles");
tabs.activate('user');
}, // End User Specific Tabs

initUserToolbar : function(){
var tb = new YAHOO.ext.Toolbar('user_edit');
tb.addButton({text: 'Create User', className: 'new-user', click: newUser});
tb.addSeparator();
deleteBtn = tb.addButton({text: 'Delete User', className: 'delete-user', click: deleteUser});
tb.addSeparator();
lookupUsr = tb.addButton({text: 'Lookup Selected User', className: 'lookup-user', click: lookupUser});

function newUser()
{alert("Popup should fire here to create a new user");}

function deleteUser()
{alert("should check for selectedRowIndex>0!=null\nthen make sure to ask if they are sure.");}

function lookupUser()
{alert("Make sure user selected, then popup window\nThis is the equivalent of double clicking on a user");}
}, // End User Toolbar

initRoleToolbar : function(){
var tb = new YAHOO.ext.Toolbar('role_edit');
tb.addButton({text: 'New Role', className: 'new-role', click: newRole});
tb.addSeparator();
deleteBtn = tb.addButton({text: 'Delete Role', className: 'delete-role', click: deleteRole}); // this is an object!

function newRole()
{alert("I bet you want to create a new role\ntoo bad for you.")
this.userPanel.show();}

function deleteRole()
{alert("Delete Role");}
}, // End Role Toolbar

initUserPanel : function(){
var userConfig = { width:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true};

this.userPanel = new YAHOO.widget.Panel("user_Panel", userConfig);
this.userPanel.setHeader("User Stats and Information");
this.userPanel.setBody("Here we will need to populate the stats");
}, // End User Popup

loadUserAndRoleGrid : function(){ // Loading function for the User Grid *FUNCTION*
var rowIndex = this.appGrid.getSelectedRowIndex();
if(rowIndex == -1) // NOTHING SELECTED
{/* Check for no selection*/}
else{
this.userData.removeAll();
this.roleData.removeAll();
if(rowIndex == 0)
{this.userData.addRows(ssgUsers);
this.roleData.addRows(ssgRoles);}
else if(rowIndex == 1)
{this.userData.addRows(mmbUsers);
this.roleData.addRows(mmbRoles);}
}
} // End dataload function for user and role grids
}
}();
YAHOO.util.Event.on(window, 'load', application.init, application, true);


the panel is the only thing that does not work at this point, I set an event to .show() the window in the above toolbar:


...
initRoleToolbar : function(){
var tb = new YAHOO.ext.Toolbar('role_edit');
tb.addButton({text: 'New Role', className: 'new-role', click: newRole});
tb.addSeparator();
deleteBtn = tb.addButton({text: 'Delete Role', className: 'delete-role', click: deleteRole}); // this is an object!

function newRole()
{alert("I bet you want to create a new role\ntoo bad for you.")
this.userPanel.show();}

function deleteRole()
{alert("Delete Role");}
}, // End Role Toolbar

initUserPanel : function(){
var userConfig = { width:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true};

this.userPanel = new YAHOO.widget.Panel("user_Panel", userConfig);
this.userPanel.setHeader("User Stats and Information");
this.userPanel.setBody("Here we will need to populate the stats");
}, // End User Popup...

My original thoughts were that i wasnt using a namespace and that was an essential component to the native yui material, in which case I really would like to reference the window like the grids are set up at this point becasue the inner data for the window is going to have to be dynamic when I integrate the true backend. this is just a proof of concept.

jack.slocum
10 Oct 2006, 7:27 AM
It's the this reference in an inner function. It doesn't point to the object you think it does (it points to window).

Solution:

Move newRole to top of initRoleToolbar so it is available when creating the toolbar and use createDelegate (available on every function, defined in yutil.js) to bind the function to the correct this.



initRoleToolbar : function(){
function newRole()
{alert("I bet you want to create a new role\ntoo bad for you.")
this.userPanel.show();}

function deleteRole()
{alert("Delete Role");}

var tb = new YAHOO.ext.Toolbar('role_edit');
tb.addButton({text: 'New Role', className: 'new-role', click: newRole.createDelegate(this)});
tb.addSeparator();
deleteBtn = tb.addButton({text: 'Delete Role', className: 'delete-role', click: deleteRole}); // this is an object!
}

irishdunn
10 Oct 2006, 7:45 AM
I did get it to work, but jack you are correct. I have such a hard time with scope, I have only programmed for like 2 months in java and everything I did for that was begginer CS stuff at my university. Now that I am working at this software firm I really need to learn object scope... here is how I finally got it to work... only seconds before you posted back to me :roll:



... function newRole()
{alert("I bet you want to create a new role\ntoo bad for you");
YAHOO.user.panel.panel.show();}

function deleteRole()
{alert("Delete Role");}
}, // End Role Toolbar

initUserPanel : function(){
var userConfig = { width:"400px", height:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true};
/*
this.userPanel = new YAHOO.widget.Panel("userPanel", userConfig);
this.userPanel.render();
*/
YAHOO.namespace("user.panel");
YAHOO.user.panel.panel = new YAHOO.widget.Panel("userPanel", userConfig);
YAHOO.user.panel.panel.render();
//YAHOO.user.panel.panel.show();
}, // End User Popup...


thanks jack for the quick replies as allways, im sure I will be hitting you with more questions.

jack.slocum
10 Oct 2006, 8:08 AM
createDelegate is there especially for this purpose. I used it everywhere.

irishdunn
10 Oct 2006, 8:31 AM
where can I find this in the api? I fear that I am looking in the wrong place.

jack.slocum
10 Oct 2006, 11:33 AM
It's available on every function. Here's the docs page:

http://www.jackslocum.com/docs/Function.html

irishdunn
10 Oct 2006, 11:57 AM
So I have almost everything on the skeleton of my page working so far, except I want to put forms inside my panel window.


// POPUP WINDOW //
//-----------------------------------------------------------------------------------//
initUserPanel : function(){
var userConfig = { modal: false, width:"400px", height:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true, effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}]};

YAHOO.namespace("user.panel");
YAHOO.user.panel.popup = new YAHOO.widget.Panel("userPanel", userConfig);
YAHOO.user.panel.popup.render();
}, // End User Popup


as you can see i am using a generic widged.Panel.... does this object not support html forms?

kovtik
26 Oct 2006, 10:24 AM
Jack, I suppose that you are very busy and this forum exists to help people with yahoo yui extention, but I really don't know where I can find the answers on my questions concerning yahoo yui library. If you have not enough time to answer me you can give me the links where I'll be able to find answers without distracting you :)

So, I have the following question:

I want to implement a draggable dialog which contains several buttons and input fields. The design (html and css) of the dialog was provided to me and I placed it into the <div> tag on my page. After that I splitted the content of my dialog into 3 div with class attribute "hd", "bg" and "ft" (as I understand, I MUST do this if I want to use drag features of YAHOO.widget.Panel or YAHOO.widget.Dialog).
1. What class (Panel, Dialog) should I choose in this case?
2. How can I keep the style of my dialog (it was changed by "hd", "bg" and "ft" classes)?
3. What is the correct way to add event handlers for standard buttons like 'Submit', 'Cancel' and my custom buttons? Should I use elem.addListener() method or may be there is specific methods? I found that I can write:
YAHOO.example.container.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:handleSubmit } ]);but I don't see the function which accepts HTMLElement or id as parameter.

jack.slocum
26 Oct 2006, 7:36 PM
To be honest I'm not as well versed with the dialogs as many other people. Did you try ydn-javascript? It's the official YUI group.

http://tech.groups.yahoo.com/group/ydn-javascript/