Create a tree in my block

Create a tree in my block

by Olga Leonova -
Number of replies: 10

Hello! I fased with the problem in Moodle 2.0. I need to set up tree structure with links (similar to the Navigation block) in my new block. I tried to create a class that inherits from block_tree, but I don't know how to add items to the tree.

That I found in the documentation:

  1. items This is an array of tree_item objects, representing the top level of the tree to be displayed. Each tree_item::children property may contain more tree_item objects for the next level down, which in turn contain more tree_item objects, and so on. Note that the tree block type has no footer.
I'm new to Moodle and PHP. 
Thank you in advance for your help! 
Average of ratings: -
In reply to Olga Leonova

Re: Create a tree in my block

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

If this is just a matter of creating a list of links, with sublinks you can do this quite simply using HTML and CSS. Examples of how can be found HERE.

Mary

Average of ratings: -
In reply to Mary Evans

Re: Create a tree in my block

by Olga Leonova -

Hi, Mary! Thank you for your reply and links!

But the problem is that I need to some parent elements in the list can fold and unfold.
 

Average of ratings: -
In reply to Olga Leonova

Re: Create a tree in my block

by Nicolas Dery -

Hi Olga,

I am also trying to accomplish the same thing. Currently I generate the list myself and  apply all the classes required (following either the Navigation or Settings block) to the appropriate item. What is not working is the fold and unfold thing.

I have found this page, which is not of any help, documentation for it has not been written yet. http://docs.moodle.org/dev/Blocks#Trees 

Have you by chance found a way ?

Thanks,

Nicolas

Average of ratings: -
In reply to Mary Evans

Re: Create a tree in my block

by Kevin Burton -

It is probably due to my ignorance of CSS but these links bring up three questions that I hope you can help me with.

1) How do I modify the CSS shown so that Moodle will recognize them? In looking through the documentation I see that the node ID's and CLASS'es somehow need to be modified with the name of the module (like block_foo) but I am not sure how to apply this to the CSS given on this site. For example there is #navcontainer, should this be modified as #block_foo.navcontainer? The name of the CSS file should be styles.css, right?

2) I do not see any examples of how to implement a tree (collapseing, expanding, etc.) Again I am not up on CSS to know how to modify the examples to implement a tree.

3) This is all assuming that the block PHP  class derives from block_base. Are there examples or documentation on how to implement a tree when the class is derived from block_tree?

Thank you.

Average of ratings: -
In reply to Mary Evans

Re: Create a tree in my block

by Kevin Burton -

Is block_tree unsupported? I don't see any examples of its use. Particularly showing populating the items/nodes of the tree. Are there any?

Average of ratings: -
In reply to Olga Leonova

Re: Create a tree in my block

by Rosario Carcò -

As Hubert correctly says, you need a JavaScript Library for DHTML Objects to behave dynamically depending on the users clicks and states of the objects. And that's where it becomes complicated.

In Moodle 1.9 I am using HTML-Tree-Menu (see my two blocks siteNavigation and myCourses). You can take them as examples:

http://moodle.org/mod/forum/discuss.php?d=67494

http://moodle.org/mod/forum/discuss.php?d=103703

But in Moodle 2.x you'd better use YUI as suggested by Hubert.

Unfortunately there is no need for the moment to port my two blocks to Moodle 2.x as the built in navigation block does already what I was missing in 1.9, so that my plans to port everything to YUI are vain at present.

But you can take the built in navigation block as an example on how to program your own block with collapsing and expanding objects.

Rosario

Average of ratings: -
In reply to Rosario Carcò

Re: Create a tree in my block

by Nicolas Dery -

Hi,

thank you all for the quick replies, comming from the WordPress world, I am quite used to using jQuery as my Javascript framework. YUI is still a big question mark for me (it does look really powerful - but complicated). I know how to make this work with jQuery (a simple .toggle() or .hide()) but have no idea how to do this with YUI.

From my readings from the links Hubert provided, I assume I could create my tree with HTML (which is currently done), wrap it all in a div with a unique ID, and add the following JS somehow on the page:

myTree = new YAHOO.widget.TreeView("myWrapperDivID");

myTree.render();

I replaced YAHOO by M since all scripts I looked at from within Moodle have that (there is a global M(oodle) JS variable ?)

Also, I am not too sure how to add script from within blocks, the example I've seen said that JS had been moved to theme after Moodle 2.0.

Any input is appreciated,

Thanks,

Nicolas 

Average of ratings: -
In reply to Nicolas Dery

Re: Create a tree in my block

by Rosario Carcò -

This is what I have already set up:

https://moodle.fhnw.ch/lib/yui/treeview/tv_tooltip5100PreserveWithCookies.html

I can post you that sample html code here. But it is roughly what I learned from the YUI tutorials. Now the big challenge is to dynamically built up this code with elements you retrieve from Moodle's database, like I do in my siteNavigation and myCourses block.

Rosario

Average of ratings: -