////
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
////

== Definitions

The scaffolding classes provided by this module use words that have special meaning in the context of rendering HTML.

=== Input

Input is defined as a means for a user to input data. Typically this will come in the form of HTML elements like select or textarea. The definition is not limited to input elements because all facets of rendering inputs can be changed to include whatever makes sense for your plugin.

=== Output

Output is defined as a means for a user to view data. How this is represented is entirely based on whatever template rendering technology you are using. For Groovy pages it may look like `${domain.property}`. For Angular templates it may look like `{{domain.property}}`.

=== Context

Context is defined as the markup that surrounds or is rendered alongside domain properties. There are several different contexts this module defines. All contexts are rendered by the link:{api}org/grails/scaffolding/markup/ContextMarkupRenderer.html[ContextMarkupRenderer].

==== List Output Context

The markup surrounding the display of a list of domain classes. Examples are a table or a grid.

==== Output Context (Domain)

The markup surrounding the display of a domain class. An example is a container or ordered list.

==== Output Context (Property)

The markup surrounding the display of an individual domain class property. An example is a row in a grid or a list item.

==== Input Context (Domain)

The markup surrounding where a domain class will be created or modified. An example is a form.

==== Input Context (Property)

The markup surrounding the input of a domain class property. An example is a cell in a grid.

==== Embedded Output Context

The markup surrounding the input of the properties of an embedded domain class property. An example is a header.

==== Embedded Input Context

The markup surrounding the display of the properties of an embedded domain class property. An example is a fieldset.

=== Examples

[source,xml,indent=1]
----
<form class="form-inline"> <1>
    <div class="form-group"> <2>
        <label for="exampleName2">Name</label>
        <input type="text" class="form-control" id="exampleName2"> <3>
    </div>
    <div class="form-group"> <2>
        <label for="exampleEmail2">Email</label>
        <input type="email" class="form-control" id="exampleEmail2"> <3>
    </div>
    <fieldset> <4>
        <legend>Address</legend>
        <div class="form-group"> <2>
            <label for="city">City</label>
            <input type="text" class="form-control" id="city"> <3>
        </div>
    </fieldset>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>
----
<1> Input Context (Domain)
<2> Input Context (Property)
<3> Rendered Domain Property
<4> Embedded Input Context


[source,xml,indent=1]
----
<div class="container"> <1>
    <div class="row">
        <div class="col-sm-2">Name</div> <2>
        <div class="col-sm-10">
            ${user.name} <3>
        </div>

        <div class="col-sm-2">Age</div>
        <div class="col-sm-10">
            ${user.age} <3>
        </div>

        <div class="col-sm-2">Address</div> <4>
        <div class="col-sm-10">
            <div class="row-fluid">
                <div class="col-sm-2">City</div> <2>
                <div class="col-sm-10">
                    ${user.address.city} <3>
                </div>
            </div>
        </div>
    </div>
</div>
----
<1> Output Context (Domain)
<2> Output Context (Property)
<3> Rendered Domain Property
<4> Embedded Output Context