Could someone explain this YUI business to me like I'm 5?

Could someone explain this YUI business to me like I'm 5?

by Oliver Stearn -
Number of replies: 6

Ive been making an effort to learn a bit more about development, Ive got a very basic understanding of php and Ive had some exposure to jquery in other projects.
I went to make a few small tweaks to the look of my site through the css but a considerable amount of the stuff I want to alter has a baffling ID consisting of 'yui' and about 15 digits... whats causing this? is there some sort of javascript function which is masking the real IDs of divs? or have I got the wrong end of the stick with YUI all together?

It would be much appreciated if someone could give me an example of where YUI is used in moodle and generally layman it all up for me.

Thanks,

Oli.

Average of ratings: -
In reply to Oliver Stearn

Re: Could someone explain this YUI business to me like I'm 5?

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Oli,

YUI is the JavaScript framework that we use in Moodle. We have documentation for it on the developer wiki at http://docs.moodle.org/dev/YUI.

The ID is dynamically generated and added to any element manipulated by YUI if it doesn't already have an ID. This is to improve performance of subsequent CSS-based lookups.

Generally though, you shouldn't need to use the IDs at all - you should be able to modify most of Moodle with the appropriate classes. If there is a YUI-based ID, it wouldn't have had an ID in the first place for you to hook into.

We use YUI all over Moodle - as an example, take a look at the course page, and turn editing on. Things like the indentation of activites, drag/drop of activities and sections, renaming activities, deleting activities, and the activity chooser are all written using YUI.

If you want to get into Moodle JS, I'd highly recommend reading some of our docs:

Also, the JS Rosetta Stone is handy if you have some experience with jQuery: http://www.jsrosettastone.com/.

Good luck, and if you have any questions, then this is the best place to ask them.

Andrew

Average of ratings: Useful (3)
In reply to Andrew Lyons

Re: Could someone explain this YUI business to me like I'm 5?

by Oliver Stearn -

Thanks Andrew, theres lots of good info here smile

I was trying to change some aspects of the assignment grader table, so it works better on low resolution/small screens - hiding unnecessary columns, wrapping file submissions etc. As you suggested I got there with classes in the end.

I will need to look into some of the functions and spend some serious time on YUI tutorials but its always good to have something to work towards and I was testing subpages (an OU development) recently and found that they havent included the activity chooser, I assume this is because they dont use Ajax rather than due to any other difficulty. It was raised as an issue but they keep closing the tracker because the issue doesnt affect them.

Anyway, I would be feeling very smug if I managed to make the necessary tweaks in the not too distant future - Ill be sure to visit the forums more often!

Average of ratings: -
In reply to Oliver Stearn

Re: Could someone explain this YUI business to me like I'm 5?

by Alex Walker -

Moodle and YUI

A Short Play by Alex Walker

"We should make Moodle more user-friendly by using Javascript in more places, like file uploads etc."

"That's a good idea. Should we start building our own Javascript library?"

"No. Other people have made Javascript libraries we can build on. Let's pick one of those and make it a standard across all the parts of Moodle."

"It looks like YUI is the best one for us. We're going for that."

"Cool. I've added YUI to Moodle's core, so everybody can start using it."

"I've updated my plugin to use YUI."  "I've updated mine, too."  "And me."

"I'm a new plugin developer. I don't understand this horrible YUI stuff. jQuery is so much better. I'm going to use that. I know it's bad, because my Moodle essentially includes two big Javascript libraries."

"I didn't want to admit it, but I've been using jQuery too."

"You guys are silly. YUI isn't that difficult. Learn it!"

"Whoa, looks like there's a lot of demand for jQuery from plugin developers. It also looks like Moodle's going to move to Bootstrap for a lot of the front-end layout, and Bootstrap builds on top of jQuery. Maybe we should include jQuery in the core, too."

"Yep, we'll add it to Moodle 2.5. It's not 'the new standard' for Moodle, because Moodle will still be built on YUI. But jQuery will be available for developers too."

Average of ratings: Useful (6)
In reply to Alex Walker

Re: Could someone explain this YUI business to me like I'm 5?

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Heh - nice one Alex,

One minor point - we're using the YUI version of Bootstrap JS, not jQuery. The only reason we include jQuery is for third-party developers and we recommend that you use YUI in preference. One of the main reasons we have included it is because if we don't, people try and use it anyway, and multiple versions of jQuery on the same page do not coexist well.

Andrew

Average of ratings: Useful (4)
In reply to Andrew Lyons

Re: Could someone explain this YUI business to me like I'm 5?

by Oliver Stearn -

Thanks! thats interesting, I was secretly wondering if I could revert back to what i (kind of) know and use jquery instead. If its not best practise however, Ill just have to get to grips with YUI smile

Average of ratings: -
In reply to Alex Walker

Re: Could someone explain this YUI business to me like I'm 5?

by Oliver Stearn -

Alex, Ive never read anything that made so much sense! Hero.

Average of ratings: -