Source Code

This module allows you to write HTML templates for both server and client using only Ceylon.

By: Daniel Rochetti
Packages
ceylon.html
ceylon.html.layout
ceylon.html.serializer
Aliases
BlockOrInlineSource Code
shared BlockOrInline=> BlockElement|InlineElement

An useful alias to indicate that an element can be either of block or inline type.

CssClassSource Code
shared CssClass=> String|String[]

Alias to represent a collection of CSS classes.

DataContainerSource Code
shared DataContainer=> <String->Object>[]

Useful alias to indicate that a sequence of Key->Item can be used to add data- prefixed attributes tto he element.

HeadElementsSource Code
shared HeadElements=> Title|Meta|Link|Script
NonstandardAttributesSource Code
shared NonstandardAttributes=> <String->Object>[]

Useful alias to indicate that a sequence of Key->Item can be used to add any nonstandard attribute to the element.

Values
allDoctypesSource Code
shared {Doctype+} allDoctypes
autoDirectionSource Code
shared autoDirection autoDirection

Indicates that the contents of the element are explicitly embedded text, but that the direction is to be determined programmatically using the contents of the element.

blockTagSource Code
shared blockTag blockTag

Block tags are often represented by an opening and a closing tag, with content/children between.

See also: Div
copySource Code
shared copy copy

Indicates that dropping an accepted item on the element will result in a copy of the dragged data.

cssSource Code
shared css css
emptyTagSource Code
shared emptyTag emptyTag

Empty tags are self-contained. They open and close with no text content nor children.

See also: Meta
externalSource Code
shared external external
html4FramesetSource Code
shared html4Frameset html4Frameset
html4StrictSource Code
shared html4Strict html4Strict
html4TransitionalSource Code
shared html4Transitional html4Transitional
html5Source Code
shared html5 html5
javascriptSource Code
shared javascript javascript
leftToRightSource Code
shared leftToRight leftToRight

Indicates that the contents of the element are explicitly directionally embedded left-to-right text.

Source Code
shared link link

Indicates that dropping an accepted item on the element will result in a link to the original data.

moveSource Code
shared move move

Indicates that dropping an accepted item on the element will result in the dragged data being moved to the new location.

rightToLeftSource Code
shared rightToLeft rightToLeft

Indicates that the contents of the element are explicitly directionally embedded right-to-left text.

Source Code
shared search search
stylesheetSource Code
shared stylesheet stylesheet
tagSource Code
shared tag tag
xhtml11Source Code
shared xhtml11 xhtml11
xhtml11BasicSource Code
shared xhtml11Basic xhtml11Basic
xhtml1FramesetSource Code
shared xhtml1Frameset xhtml1Frameset
xhtml1StrictSource Code
shared xhtml1Strict xhtml1Strict
xhtml1TransitionalSource Code
shared xhtml1Transitional xhtml1Transitional
xhtmlDoctypesSource Code
shared {Doctype+} xhtmlDoctypes
Interfaces
BlockElementSource Code

Block level elements normally start (and end) with a new line when displayed in a browser.

DocumentSource Code
shared Document

Represents the entire HTML document, this means that it holds the entire configuration and content. Conceptually, it is the root of the document tree.

ElementTypeSource Code

Enumerated type used to group elements with common behavior about how they are rendered and how they relate to each other. This interface is useful to empower proper and semantic HTML writing by API design, enforcing constraints at compile time:

P {
    Span("Paragraph elements can have inline elements
          as children, like a span..."),
    Div("But not block elements, like a div!") // compilation error
};
InlineElementSource Code

Inline elements are normally displayed without starting a new line. Note: if you want to properly customize inline elements' sizing properties you must style them with display: inline-block;

NodeSource Code
shared Node

Represents a single node in the Document tree. This is the base type for the entire Document Object Model. More detailed info can be found at DOM Level 2 Specification

ParentNodeSource Code
shared ParentNode<out Child>

Marks a Node implementation as a possible parent of other nodes.

SnippetSource Code
shared Snippet<out Result>

It's basically a factory of Node. Implement this interface to create reusable HTML fragments.

For example a snippet to build a modal dialog, like this:

shared class Dialog(String title, Boolean closeable = true,
             Div body, Button* buttons = {})
         satisfies Snippet<Div> {

     content => Div {
         classNames = "modal";
         Aria {
             role = dialog;
         };
         Div {
             classNames = "modal-header";
             H4(title),
             closeable then Button {
                 "&times;";
                 classNames = "close";
             }
         },
         Div {
             classNames = "modal-body";
             body
         },
         Div {
             classNames = "modal-footer";
             buttons
         }
     }
}
TableElementSource Code

An special type of element that's available only as Table child nodes.

TextNodeSource Code
shared TextNode

Marks a Node implementation as a text container.

Classes
ASource Code
shared A

Represents a hyperlink, which is used to link from one page to another through the A.href attribute.

Technical details about this element can be found on the Official W3C reference

AriaSource Code
shared Aria
BSource Code
shared B

Represents a span of text to be stylistically offset from the normal prose without conveying any extra importance. Examples are key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold.

Technical details about this element can be found on the Official W3C reference

BaseElementSource Code
shared abstract BaseElement

A default Element implementation that represents a full featured HTML element. It defines all common HTML attributes and event handling.

BlockquoteSource Code
shared Blockquote

Represents a section that is quoted from another source.
Technical details about this element can be found on the Official W3C reference

BodySource Code
shared Body

Represents the main content of the ceylon.html::Document.

Technical details about this element can be found on the Official W3C reference

BrSource Code
shared Br

Represents a line break. Must be used only for line breaks that are actually part of the content, don't use in paragraphs.

Technical details about this element can be found on the Official W3C reference

CharsetMetaSource Code

Utility class to easily express a charset metadata for the Document.

CodeSource Code
shared Code

The code element represents a fragment of computer code.

Technical details about this element can be found on the Official W3C reference

Source Code
shared CssLink

Utility Link extension representing an CSS resource.

DdSource Code
shared Dd

Represents the description, definition, or value, part of a term-description group in a description list.

Technical details about this element can be found on the Official W3C reference

DivSource Code
shared Div

This element has no special meaning, but it's very useful for semantic element grouping as a block. Basically a div represents its children, using CSS classes to mark up semantics common to a group of consecutive elements (like a gallery of image thumbs, for example):

Div {
    classNames = "gallery";
    Div {
        classNames = "thumb";
    },
    // ... more thumbs
    Div {
        classNames = "thumb";
    }
}

If you want to group elements in a inline manner, see [[Span]]

Technical details about this element can be found on the Official W3C reference

DlSource Code
shared Dl

Represents a description list consisting of zero or more name (Dt) and value (Dd) groups.

Technical details about this element can be found on the Official W3C reference

DoctypeSource Code
shared abstract Doctype

The document type. It provides information about how the Document shall be defined and serialized.

DropZoneSource Code
shared abstract DropZone

Defines the behavior of a drop zone element.

DtSource Code
shared Dt

Represents the term, or name, part of a term-description group in a description list.

Technical details about this element can be found on the Official W3C reference

ElementSource Code
shared abstract Element

Implementations of this class represents a concrete element used to display formatted content, to define metadata or to import external resources of a Document. This base class defines the id, common to all elements.

EmSource Code
shared Em

Represents stress emphasis of its contents.

Technical details about this element can be found on the Official W3C reference

H1Source Code
shared H1

This is the highest level heading.

H2Source Code
shared H2

This is the level two heading.

H3Source Code
shared H3

This is the level three heading.

H4Source Code
shared H4

This is the level four heading.

H5Source Code
shared H5

This is the level 5 heading.

H6Source Code
shared H6

This is the lowest level heading.

Source Code
shared Head

Groups the metadata of the Html document, such as page description, links to resources, stylesheets and scripts.

HeadingSource Code
shared abstract Heading

Base class for heading (h1-6) elements. They represent headings and subheadings in a Document. These elements rank in importance according to the number in their name (Heading.level).

Technical details about this element can be found on the Official W3C reference

HrSource Code
shared Hr

Represents a paragraph-level thematic break. The 'paragraph-level' bit means between blocks of text, so it shouldn't be used to separate sections of a site.

Technical details about this element can be found on the Official W3C reference

HtmlSource Code
shared Html
ISource Code
shared I

Represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.

Technical details about this element can be found on the Official W3C reference

ImgSource Code
shared Img

Represents an image. The image given by the Img.src attribute, and the value of the Img.alt attribute is the img element's fallback text content in case the source is not found.

Technical details about this element can be found on the Official W3C reference

LiSource Code
shared Li

Represents a list item.

Technical details about this element can be found on the Official W3C reference

Source Code
shared Link

Defines a relationship between the Html and an external resource.

LinkRelSource Code
shared abstract LinkRel

The relationship kind between the current document and the linked document.

LinkTypeSource Code
shared LinkType
MetaSource Code
shared Meta

The meta element represents various kinds of metadata expressed through pairs of ceylon.html::Meta.name and ceylon.html::Meta.content.

Technical details about this element can be found on the Official W3C reference

OlSource Code
shared Ol

Represents a list of items, where the items (Li) have been intentionally ordered. Also known as numbered-list.

Technical details about this element can be found on the Official W3C reference

PSource Code
shared P

Represents a paragraph. Technical details about this element can be found on the Official W3C reference

PreSource Code
shared Pre

Represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

Technical details about this element can be found on the Official W3C reference

QSource Code
shared Q

Represents some phrasing content quoted from another source.

Technical details about this element can be found on the Official W3C reference

SSource Code
shared S

Represents contents that are no longer accurate or no longer relevant.

Technical details about this element can be found on the Official W3C reference

SampSource Code
shared Samp

Represents (sample) output from a program or computing system.

Technical details about this element can be found on the Official W3C reference

ScriptSource Code
shared Script
ScriptTypeSource Code
shared abstract ScriptType
SmallSource Code
shared Small

Represents side comments such as small print. It is not intended to be presentational. It is only intended for short runs of text.

Technical details about this element can be found on the Official W3C reference

SpanSource Code
shared Span

This element has no special meaning, but it's very useful for semantic element grouping in a inline manner. Basically a span represents its children, using CSS classes to mark up semantics common to a group of consecutive elements (like a gallery of image thumbs, for example):

Span {
    "Text";
    classNames = "label";
    Img {
        src = "images/close.png";
    }
}

If you want to group elements in a block, see Div

Technical details about this element can be found on the Official W3C reference

StrongSource Code
shared Strong

Represents strong importance for its contents.

Technical details about this element can be found on the Official W3C reference

StyledElementSource Code
shared abstract StyledElement

Implementations of this class represents an element that can be styled using CSS.

SubSource Code
shared Sub

Represents a subscript of its contents.

Technical details about this element can be found on the Official W3C reference

SupSource Code
shared Sup

Represents a superscript of its contents.

Technical details about this element can be found on the Official W3C reference

TableSource Code
shared Table

Represents tabular data. It is advised against the use of tables for layout purposes (use Div instead).

Technical details about this element can be found on the Official W3C reference

TagSource Code
shared Tag

Represents a tag, which is the actual text representation of a Node. For example: <div></div> is the tag for the Div element.

TagTypeSource Code
shared abstract TagType

The Tag type, which can be blockTag or emptyTag.

TdSource Code
shared Td

Represents a data cell in a Table.

Technical details about this element can be found on the Official W3C reference

TextDirectionSource Code
shared abstract TextDirection

The text directionality. For details, check Official W3C Specification

ThSource Code
shared Th

Represents a header cell in a Table.

Technical details about this element can be found on the Official W3C reference

TitleSource Code
shared Title

Represents the title node, present only on the head of the document.

TrSource Code
shared Tr

Represents a row of cells (Td) in a Table.

Technical details about this element can be found on the Official W3C reference

USource Code
shared U

Represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in a foreign language.

Technical details about this element can be found on the Official W3C reference

UlSource Code
shared Ul

Represents a list of items (Li), where the order of the items is not important. Also known as bullet-list.

Technical details about this element can be found on the Official W3C reference

WbrSource Code
shared Wbr

Represents a line break opportunity. Any content inside must not be considered part of the surrounding text.

Technical details about this element can be found on the Official W3C reference

autoDirectionSource Code

Indicates that the contents of the element are explicitly embedded text, but that the direction is to be determined programmatically using the contents of the element.

blockTagSource Code
shared blockTag

Block tags are often represented by an opening and a closing tag, with content/children between.

copySource Code
shared copy

Indicates that dropping an accepted item on the element will result in a copy of the dragged data.

cssSource Code
shared css
emptyTagSource Code
shared emptyTag

Empty tags are self-contained. They open and close with no text content nor children.

externalSource Code
shared external
html4FramesetSource Code
html4StrictSource Code
html4TransitionalSource Code
html5Source Code
shared html5
javascriptSource Code
shared javascript
leftToRightSource Code

Indicates that the contents of the element are explicitly directionally embedded left-to-right text.

Source Code
shared link

Indicates that dropping an accepted item on the element will result in a link to the original data.

moveSource Code
shared move

Indicates that dropping an accepted item on the element will result in the dragged data being moved to the new location.

rightToLeftSource Code

Indicates that the contents of the element are explicitly directionally embedded right-to-left text.

Source Code
shared search
stylesheetSource Code
shared stylesheet
tagSource Code
shared tag
xhtml11Source Code
shared xhtml11
xhtml11BasicSource Code
xhtml1FramesetSource Code
xhtml1StrictSource Code
xhtml1TransitionalSource Code