PDA

View Full Version : Each components' javascript requirements.



eddyyanto
22 Dec 2006, 11:11 PM
How do I put it? Ehm, well.

How do I know which file to call or include when I am building yui-ext components?
Let's say I am building a splitbar, I have included/referenced yui-ext.js and SplitBar.js and done the initialization but it seemed that I am missing something.

In the documentation provided within the same package as yui-ext 0.33, I found there's no explaination about javascript dependencies when we are building specific components.

And from the give examples, I see that there's more javascript files inclusion and initialzation which make me to wonder which file is necessary and what are their job?

Can anybody give me a short explaination about this?

Thank you. :oops:

jack.slocum
23 Dec 2006, 4:22 AM
yui-ext.js includes all the JS in yui-ext. yui-ext.css includes all the css.

For individual components and their dependencies, the only reference currently is the "Build your own" tab on the download dialog.

eddyyanto
23 Dec 2006, 9:03 AM
yui-ext.js includes all the JS in yui-ext. yui-ext.css includes all the css.

For individual components and their dependencies, the only reference currently is the "Build your own" tab on the download dialog.

Thanks for head up. It seemed I am doomed to this beginner stuff.
Do we have any Getting Started section for beginner? I think I've been missing too much stuff here.
Frankly, I've just got to know YUI and later YUI-Ext for a few days, so pardon me for asking too much questions that might have been replied or discussed. It's just that I can't find them through a search.

What I am trying to achieve is something like this: http://www.jackslocum.com/blog/2006/08/16/better-yahoo-ui-code-with-the-element-object/



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>var getEl = YAHOO.ext.Element.get</title>
<script type="text/javascript" src="../yui-ext.js"></script>
<script type="text/javascript">
var getEl = YAHOO.ext.Element.get;
var el = getEl('box');
el.innerHTML = 'testing';
</script>
</head>

<body>
<div id="box">test</div>
</body>
</html>


From what you've explained, the above code should works fine but what I get are errors with the following message:



YAHOO is not defined
[Break on this error] var getEl = YAHOO.ext.Element.get;
getEl.html (line 8)

YAHOO is not defined
[Break on this error] YAHOO.namespace('ext','ext.util','ext.grid');YAHOO.ext.Strict=(document.compatMo...
yui-ext.js (line 7)

tryanDLS
23 Dec 2006, 9:39 AM
You are missing the base YUI library. You can include individual pieces, or utilities.js. Since you're new to this, I would say always include utilities.js and yui-ext.js (in that order). This will give you everything , which you may not need, but initially it will keep you from chasing dependency issues. You should also include yui-ext.css which is all the yui-ext css files combined.

Also, I would suggest that if you can't find something via search, at least read thru the sticky posts in the forum to get a heads up on things that can bite you. I would also suggest going back to jack's blog and reading posts from the beginning to get an a better feel of the thought process around the library's development.

Also you need to use a debugger either Firebug for FF or there's a free one for IE (or use Visual Studio). There's no substitute for stepping thru code to learn what's going on. When debugging you'll want to include some of the individual uncompressed js files (specific to what you're debugging), so you can actually read the code in the debugger.

eddyyanto
23 Dec 2006, 9:57 AM
You are missing the base YUI library. You can include individual pieces, or utilities.js. Since you're new to this, I would say always include utilities.js and yui-ext.js (in that order). This will give you everything , which you may not need, but initially it will keep you from chasing dependency issues. You should also include yui-ext.css which is all the yui-ext css files combined.

Also, I would suggest that if you can't find something via search, at least read thru the sticky posts in the forum to get a heads up on things that can bite you. I would also suggest going back to jack's blog and reading posts from the beginning to get an a better feel of the thought process around the library's development.

Also you need to use a debugger either Firebug for FF or there's a free one for IE (or use Visual Studio). There's no substitute for stepping thru code to learn what's going on. When debugging you'll want to include some of the individual uncompressed js files (specific to what you're debugging), so you can actually read the code in the debugger.

Thanks, tryanDLS for the informative reply. I have firebug beta installed and it does give me a very handy and detailed error messages.

I was just crawling through some of Jack's earliest blog posts and that's where I met with confusion. I will go through the other previous blog post and the stickies as you suggested. :)

Thanks you.

moraes
27 Dec 2006, 11:04 AM
Depending on the object config, some classes may be needed or not etc., which makes even the 'Build your own YUI-ext' dialog seems inaccurate in some cases (I may be wrong, but it happened to me once: I've checked all dependencies and then, something was still missing, MixedCollection if I remember well).

So I was thinking about how to better document the dependencies, and maybe we users could help to build a complete dependencies tree. How could we do it? I thought about digging the code and starting a list with class dependencies and optional dependencies. Something like:


BasicDialog
Dependencies:
Class1, Class2, Class3

Configuration dependencies:
configOption1: true - Class4
configOption2: true - Class5

What do you think? Any other ideas?

brian.moeskau
27 Dec 2006, 10:34 PM
I'm guessing that Jack's doc parser could be made to do this pretty easily. It can automatically link subclasses to superclasses, so I would think that kicking out a separate dependency tree automatically shouldn't be too much extra work (just assuming here since the doc parser source is still under wraps). Mapping CSS dependencies would still have to be manual though.

jack.slocum
28 Dec 2006, 3:32 AM
That's a good idea. I have a starting JSON object that is probably a little out of date. With that and a simple PHP script I should be able to generate it fairly easily.

It could also be in the docs, but the problem is catching outside dependencies (for example, YUI classes) is kind of tricky since each is in their own build process.

moraes
28 Dec 2006, 3:33 AM
I hope so. I guess looking for new class instances, YAHOO. or YAHOO.ext. could result in a list of classes used by each class. But perhaps the conditional dependencies would require some extra docs/flags in the source code to be documented effectively.

PS: this was an answer to bmoeskau. jack wrote another one while I was writing this one. :-)