pocketview.md

PocketView

PocketView is an API for concisely writing HTML, in the terminology of HTML, using C# code. Just like the HTML method, it returns an object that implements IHtmlContent, so the output will be assumed to be valid HTML and rendered into your notebook. Here's an example:

Let's consider what's happening in this code.

• We're calling a span method and passing in the results of three other methods: img, HTML, and a.
• The img method is being invoked with an indexer that has a couple of named parameters being passed to it, src and style.
• The HTML method has a string containing the   HTML element.
• The a method has another indexer parameter (href) as well as an argument, in this case a call to an i method.

This makes a reasonable amount of sense if you understand HTML but perhaps less sense if you consider that this is valid C# code. What is going on here?

You can see the actual HTML that this produces by converting a PocketView to a string, which will be shown in plain text rather than as HTML:

Because HTML is hard to represent concisely using a statically-typed language, PocketView makes use of dynamic. This is what allows you to use arbitrary indexer names to specify HTML attributes.

The PocketView methods that are available can be found on the PocketViewTags class in the Microsoft.DotNet.Interactive.Formatting package. You can call them directly, without the class name qualifier, because dotnet-interactive preconfigures your C# session with using static Microsoft.DotNet.Interactive.Formatting. Each of the methods on PocketViewTags returns a PocketView as dynamic. Let's take a closer look at some of the things you can do with a PocketView.

As we saw above, you can use square bracket-delimited indexers to specify HTML attributes:

If you pass a string to PocketView, it will be HTML encoded for you:

This is where the HTML method can be useful. If you want to pass a string to a PocketView but you don't want it to be HTML encoded, you can simply wrap that string in a call to HTML:

HTML simply captures a string into an instance a type implementing IHtmlContent. This interface is used to signal that the value should not be HTML-encoded but rather treated as valid HTML and rendered directly.

Seeing how that works, it might not come as a surprise to know that PocketView itself implements IHtmlContent.

You can pass other types of objects of into a PocketView as well. When you do this, they're formatted using the plain text formatter, which by default expands the object's properties.

Since .NET Interactive's formatter API doesn't currently support generating formatters for nested HTML fragments, PocketView falls back to a formatter for text/plain to describe the properties of the passed object.

You can also pass lists of objects to a PocketView. This can be useful for creating HTML from data: