Background Color:
 
Background Pattern:
Reset
Search
Home Recent Changes Show All Pages

Panel, Div, Para, Pre, Span

Not Rated Yet

The Panel and it's sub-classes are all the basic container components
They have each been set up with their own specific styles so they render themselves and their child components differently

Article Contents

<pdf:Panel> Scryber.Components.PDFPanel

At the top level is the Panel. It inherits from the PDFVisualComponent and by default renders as a block of it inner content.

The panel fully supports all block level styling such as Padding, Margins, Borders, Backgrounds, along with the formatting styles of font, text, fill, etc.

When a style is applied to the Panel type it will also be applied to all the container subclasses - Div, Span, Pre, Para

Unlike the other containers the Panel's content is explicitly nested within a <Contents> element.

A simple Panel

    Content above the panel 
    <pdf:Panel id="QuickPanel" > 
        <Content> This is the content of the panel </Content> 
    </pdf:Panel> 
   Content below the panel
PDFDocument doc = new PDFDocument(); 
PDFPage page = new PDFPage(); 
doc.Pages.Add(page); 
page.Contents.Add(new PDFTextLiteral("Content above the panel")); 

PDFPanel panel = new PDFPanel(); 
panel.Contents.Add(new PDFTextLiteral("This is the content of the panel")); 
page.Contents.Add(panel); 
page.Contents.Add(new PDFTextLiteral("Content below the panel"));

Preview Image

The quick panel will be on it's own line within the page and push later content down after the required height


Adding margins, padding and a border

Because the panel is rendered as a block it fully supports the margins panels, borders, background styles.
It also becomes clear that as there is no explicit width or height, the size of the panel is driven entirely from the size of the content.

Content above the panel 
<pdf:Panel id="QuickPanelBordered" style:fill-color="lime" style:fill-opacity="0.5" style:border-color="aqua" style:border-width="2pt" style:padding="10pt" style:margins="10pt" > 
    <Content> This is the content of the panel </Content> 
</pdf:Panel> 
Content below the panel
PDFDocument doc = new PDFDocument(); 
PDFPage page = new PDFPage(); 
doc.Pages.Add(page); 
page.Contents.Add(new PDFTextLiteral("Content above the panel")); 

PDFPanel panel = new PDFPanel(); 
panel.FillColor = PDFColors.Lime; 
panel.FillOpacity = 0.5; 
panel.BorderColor = PDFColors.Aqua; 
panel.BorderWidth = 2; 
panel.Padding = new PDFThickness(10); 
panel.Margins = new PDFThickness(10); 
panel.Contents.Add(new PDFTextLiteral("This is the content of the panel")); 
page.Contents.Add(panel); 
page.Contents.Add(new PDFTextLiteral("Content below the panel"));

Preview Image

The quick panel will be on it's own line within the page and push later content down after the required height.
And because the fill style is inherited, child components (such as the text literal) also have the fill applied.


Explicit Positioning

When position information is provided on the style the panel will be rendered relatively positioned to its container.
As soon as a component is relatively positioned it is outside of the flow of later components, and it's size is not taken into account.

Content above the panel 
<pdf:Panel id="QuickPanelPositioned" style:x="30pt" style:y=0pt"  style:fill-color="lime" style:fill-opacity="0.5" style:border-color="aqua" style:border-width="2pt" style:padding="10pt" style:margins="10pt" >
    <Content> This is the content of the panel </Content> 
</pdf:Panel> 
Content below the panel
PDFDocument doc = new PDFDocument(); 
PDFPage page = new PDFPage(); 
doc.Pages.Add(page); 
page.Contents.Add(new PDFTextLiteral("Content above the panel")); 

PDFPanel panel = new PDFPanel(); 
panel.X = 30; 
panel.Y = 0; 
panel.FillColor = PDFColors.Lime; 
panel.FillOpacity = 0.5; 
panel.BorderColor = PDFColors.Aqua; 
panel.BorderWidth = 2; 
panel.Padding = new PDFThickness(10); 
panel.Margins = new PDFThickness(10); 
panel.Contents.Add(new PDFTextLiteral("This is the content of the panel")); 

page.Contents.Add(panel); 
page.Contents.Add(new PDFTextLiteral("Content below the panel"));

Preview Image

As the content above and below is not a block this will just continue on the same line ignoring the panel.


<pdf:Div> Scryber.Components.PDFDiv

The PDFDiv inherits from PDFPanel so inherits all the capabilities and styles from a panel, but has 2 significant differences.
  • The XML component content is specified directly within the Div element, rather than within a <Contents> child element. This makes a Div more concise and easier to read the XML.
  • The style of a Div is by default full-width, so it extends across the available width of the current block or column

Div vs Panel

<pdf:Panel id="QuickPanelPositioned" style:border-color="aqua" style:border-width="2pt" style:padding="10pt" style:margins="10pt" > 
    <Content> This is the content of the panel </Content> 
</pdf:Panel> 
<pdf:Div id="QuickDiv" style:border-color="aqua" style:border-width="2pt" style:padding="10pt" style:margins="10pt" > 
    This is the content of the div 
</pdf:Div> 
PDFDocument doc = new PDFDocument(); 
PDFPage page = new PDFPage(); 
doc.Pages.Add(page); 
PDFPanel panel = new PDFPanel(); 
panel.BorderColor = PDFColors.Aqua; 
panel.BorderWidth = 2; 
panel.Padding = new PDFThickness(10); 
panel.Margins = new PDFThickness(10); 
panel.Contents.Add(new PDFTextLiteral("This is the content of the panel")); 
page.Contents.Add(panel); 

PDFDiv div = new PDFDiv(); 
div.BorderColor = PDFColors.Aqua; 
div.BorderWidth = 2; 
div.Padding = new PDFThickness(10); 
div.Margins = new PDFThickness(10); 
div.Contents.Add(new PDFTextLiteral("This is the content of the panel")); 
page.Contents.Add(div);

Preview Image

As can be seen in the preview image, the Div automatically stretches horizontally to fill all the available width, no matter what the required content width is

<pdf:Para> Scryber.Components.PDFParagraph

A paragraph is logically exactly the same as a Div. It is a full-width block component with content defined directly within the element.

Conceptually it is intended to separate textual and graphical content.
It also has a default top margin of 5 points, so lines appear with a greater separation from their previous content. (v8.6 plus)

Paragraph spacing

Content above the paragraph 
<pdf:Para id="QuickPanel" style:bg-color="aqua" > This is the content of the paragraph </pdf:Para> 
<pdf:Para id="QuickPara" style:bg-color="aqua" > This is the content of the second paragraph </pdf:Para> 
Content below the paragraph 
PDFDocument doc = new PDFDocument();
PDFPage page = new PDFPage(); 
doc.Pages.Add(page); 
page.Contents.Add(new PDFTextLiteral("Content above the paragraph")); 
PDFParagraph para = new PDFParagraph(); 
para.BackgroundColor = PDFColors.Aqua; 
para.Contents.Add(new PDFTextLiteral("This is the content within the paragraph")); 
page.Contents.Add(para); 

para = new PDFParagraph(); 
para.BackgroundColor = PDFColors.Aqua; 
para.Contents.Add(new PDFTextLiteral("This is the content within the second paragraph")); 
page.Contents.Add(para); 

page.Contents.Add(new PDFTextLiteral("Content below the paragraph"));

Preview Image

<pdf:Pre> Scryber.Components.PDFPreformatted

Pre-formatted content is intended to be laid out as within the file. Carriage returns and whitespace is normally ignored by the layout engine, however the Pre component explicitly sets the style of preserve-whitespace to true, word wrapping to None and to never split on overflow.
It also sets the font to be used for rendering to Courier, and the width will be just enough to encapsulate the contents.

Pre block

Content above the pre-formatted text 
<pdf:Pre id="QuickPanel" style:bg-color="aqua">This is the content within the paragraph that will retain lines and spacing.</pdf:Pre> 
Content below the pre-formatted text 
PDFDocument doc = new PDFDocument(); 
PDFPage page = new PDFPage(); 
doc.Pages.Add(page); 
page.Contents.Add(new PDFTextLiteral("Content above the pre-formatted text")); 
PDFPreformatted pre = new PDFPreformatted(); 
pre.BackgroundColor = PDFColors.Aqua; 
pre.Contents.Add(new PDFTextLiteral(@"This is the content within the paragraph that will retain lines and spacing")); 
page.Contents.Add(pre); 

page.Contents.Add(new PDFTextLiteral("Content below the pre-formatted text"));

Preview Image

<pdf:Span> Scryber.Components.PDFSpan

A standard span is actually laid out completely differently to any of the other containers, as it's default style is set to 'inline'.
This means that all the content within the component flows on from any previous content, and is not forced onto a new line.
It also means that padding, margins, backgrounds etc. do not have any effect on the contents (these are only applied at block level).


Span layout

Content before the Span 
<pdf:Span id="QuickPanel" style:bg-color="aqua" style:fill-color="red" >This is the content within the Span</pdf:Span> 
Content after the Span 
PDFDocument doc = new PDFDocument(); 
PDFPage page = new PDFPage(); 
doc.Pages.Add(page); 
page.Contents.Add(new PDFTextLiteral("Content before the Span")); 
PDFSpan span = new PDFSpan(); 
span.FillColor = PDFColors.Red; 
span.BackgroundColor = PDFColors.Aqua; //This will be ignored 
span.Contents.Add(new PDFTextLiteral("This is the content within the Span ")); 
page.Contents.Add(span); 

page.Contents.Add(new PDFTextLiteral("Content after the Span"));

Preview Image

As the content is inline it simply flows as part of the existing content

Container component review

Each of the containers detailed here act with slightly different behaviour out of the box. But all this behaviour is driven by the default styles applied. They can all act and layout content in the same way as each other, simply by applying a different style.

  • Need to make a Div act like a Span - change it to inline position mode
  • Want your Panels to stretch across the page then just set their style of full-width to true
  • It is simple to change a Span to mimic a Panel layout, simply by styling it with a Position mode of Block if required.

And of course these can be applied with the same targeting as any other style using the applied-type and applied-class attributes of the style items

See Also



  Rating
Rate This Page: Poor Great   |  Rate Content |
Average rating:  No Ratings Yet   
Number of Ratings : 0
  Comments
Add Comment
No Comments Yet