New html_writer shortcut functions

New html_writer shortcut functions

by sam marshall -
Number of replies: 8
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

I have proposed a change MDL-31833 (see issue for details and patch). The summary is that it adds functions to html_writer for div and span, so that you can do:

html_writer::span($str, 'accesshide');

where you currently have to do

html_writer::tag('span', $str, array('class' => 'accesshide');

I.e. it calls the same underlying functions but is just a shortcut so the code can be shorter and easier to read. There are over a thousand uses of html_writer::tag for div and span in the code (and also lots more uses of plain strings with <div> in that really ought to be using html_writer).

Some arguments against this, and my responses:

  • It will add to the complexity of the code
    I disagree, I think it simplifies code by reducing clutter and making it easier to read in some common cases.
  • A renderer method such as container should be used
    I think div and span are low-level primitives that it should be OK to use directly when implementing renderer methods, rather than calling another renderer method.
    Putting a div around something is too generic an activity to benefit significantly from being able to override it in themes, it's not like 'create a formatted box for display of notifications to users' (which should be a renderer method), it's just 'this is a div, could be anything'.

Comments welcome. smile

--sam

Average of ratings: -
In reply to sam marshall

Re: New html_writer shortcut functions

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

The correct issue number is MDL-38133

For me, it might cut down on the number of times my IDE complains at me because I've tried to write html_writer::div and or html_writer::span - certainly has my +1

Average of ratings: -
In reply to Davo Smith

Re: New html_writer shortcut functions

by sam marshall -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

thanks. smile And sorry for getting the issue number wrong. DOH!

--sam

Average of ratings: -
In reply to sam marshall

Re: New html_writer shortcut functions

by Danny Wahl -

Why just div and span? would be my question - at least other forward-facing tags like article, section, aside, header, footer, etc... should be included but I don't see why any encapsulating tag couldn't be included (lists, etc...)

Also what would be cool would be the same thing for start_tag and end_tag

otherwise, kudos - I haven't hidden the fact that I think html_writer went a little overboard...

Average of ratings: -
In reply to Danny Wahl

Re: New html_writer shortcut functions

by sam marshall -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Thanks for reply.

By the way, I did implement start_div and end_div (and span) as well as the whole 'tag' equivalent.

The reason for only doing div/span tags is that they're the most common, 'meaningless' tags. I did consider lists, because I use those a lot, but:

  • you get the most benefit from these shortcuts when you want to use an HTML class, which is common with div but hopefully a lot less common with list items. The 'tag' function only really sucks when you need to include attributes.
  • there is already a shortcut function in html_writer to write out a list (from an array).

As this is a shortcut it only really needs doing for very common tags imo...

--sam

Average of ratings: -
In reply to Danny Wahl

Re: New html_writer shortcut functions

by tim st.clair -
Picture of Plugin developers

div and span are tags you mostly use when throwing a small string down, so I can see the benefit there. Others like article and section would need to follow the tag_open and tag_close type rtules because you don't want to be comcatenating / building arrays for string dumping if at all possible, and most other tags are tag buckets not single-liners. This is a +1 from me too.

Average of ratings: -
In reply to tim st.clair

Re: New html_writer shortcut functions

by Raymond Mlambo -

Hi guys,


Can I please have a small demo code on how this html_writer functionality? Below is what I've written for my code,and while it does display the table well, I would like to make some significant changes to it, such as coloring the top section, making borders for rows, and perhaps make different colorings for each row of data.

I would really need your assistance on this.

$table = new html_table();
$table->width = '100%';
$table->size = array('30%', '10%', '10%', '10%', '10%', '10%', '10%', '10%');

$table->head = array(
    'Module Name',
    'Assignment',
    'Exam',
    'Groupwork',
    'Digital Assessments',
    'Final',
    'Symbol',
    'Result'
);

/*

I AM CALLING A BUNCH OF METHODS AND CONDITIONS HERE TO DISPLAY DATA

*/

 $table->data[] = new html_table_row(array(
        $value->shortname,
        ($assignmentmark->finalgrade),
        ($exammark->finalgrade),
        ($groupworkmark->finalgrade),
        ($ddmark->finalgrade),
        ($finalmark->finalgrade),
        $symbol,
        $result
            )
    );
}
echo '<br /><br />';

echo html_writer::table($table);


echo $OUTPUT->footer();

Average of ratings: -
In reply to Raymond Mlambo

Re: New html_writer shortcut functions

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Make sure you use get_string() for the labels, instead of hard-coding the text strings.

$row = new html_table_row([ ... ]); // Insert your data here.
$row->attributes['class'] = 'nameofcssclass'; // Choose a name for the CSS class.
$table->data[] = $row;

Then, in your styles.css file you can write:

.nameofcssclass {
  background-color: #f00;
}

You can similarly add extra CSS classes to your whole table (all tables have 'generaltable' by default, unless you override it). If you examine the output, you also get a number of generic classes added, which can also be used for styling.


Average of ratings: -
In reply to Davo Smith

Re: New html_writer shortcut functions

by Raymond Mlambo -

Hi Davo,


You're awesome. I just used what you mentioned and it its working well. How can I put vertical borders in my table though?

The table in the screenshot attached is outputting the rows beautifully, but I need vertical borders to separate the items and make things look neat. How can I accomplish? I have specified borders in my css class, and I'm not getting the results that I want.

Here is a sample of the code for this table:

// Display the course rubric so that the students know what they'll be graded on
$courserubric = $DB->get_record('rubric', array('courseid' => $course->id));

$table = new html_table();
$table->head = array($courserubric->h11, $courserubric->h12, $courserubric->h13, $courserubric->h14, $courserubric->h15);

$row = new html_table_row(array($courserubric->n11, $courserubric->n12, $courserubric->n13, $courserubric->n14, $courserubric->n15));
$row->attributes['class'] = 'courserubric-tablerow';
$table->data[] = $row;

$row = new html_table_row(array($courserubric->n21, $courserubric->n22, $courserubric->n23, $courserubric->n24, $courserubric->n25));
$row->attributes['class'] = 'courserubric-tablerow';
$table->data[] = $row;

echo html_writer::table($table);

Average of ratings: -