yesod-form-1.7.9: Form handling support for Yesod Web Framework

Safe Haskell | None
Language | Haskell2010

Yesod.Form.Bootstrap3

Contents

- Example: Rendering a basic form
- Example: Rendering a horizontal form
- Rendering forms
- Field settings
- Submit button

Description

Helper functions for creating forms when using Bootstrap 3.

Synopsis

- renderBootstrap3 :: forall (m :: Type -> Type) a. Monad m => BootstrapFormLayout -> FormRender m a
- data BootstrapFormLayout
  - = BootstrapBasicForm
  - | BootstrapInlineForm
  - | BootstrapHorizontalForm {
    - bflLabelOffset :: !BootstrapGridOptions
    - bflLabelSize :: !BootstrapGridOptions
    - bflInputOffset :: !BootstrapGridOptions
    - bflInputSize :: !BootstrapGridOptions
    }
- data BootstrapGridOptions
  - = ColXs !Int
  - | ColSm !Int
  - | ColMd !Int
  - | ColLg !Int
- bfs :: RenderMessage site msg => msg -> FieldSettings site
- withPlaceholder :: Text -> FieldSettings site -> FieldSettings site
- withAutofocus :: FieldSettings site -> FieldSettings site
- withLargeInput :: FieldSettings site -> FieldSettings site
- withSmallInput :: FieldSettings site -> FieldSettings site
- bootstrapSubmit :: forall site msg (m :: Type -> Type). (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m) => BootstrapSubmit msg -> AForm m ()
- mbootstrapSubmit :: forall site msg (m :: Type -> Type). (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m) => BootstrapSubmit msg -> MForm m (FormResult (), FieldView site)
- data BootstrapSubmit msg = BootstrapSubmit {
  - bsValue :: msg
  - bsClasses :: Text
  - bsAttrs :: [(Text, Text)]
  }

# Example: Rendering a basic form

`<input>` tags in Bootstrap 3 require the `form-control` class, and so they need modified `FieldSettings` to display correctly.

When creating your forms, use the `bfs` function to add this class:

    personForm :: AForm Handler Person
    personForm = Person
           <$> areq textField (bfs ("Name" :: Text)) Nothing
           <*> areq textField (bfs ("Surname" :: Text)) Nothing

That form can then be rendered into a widget using the `renderBootstrap3` function. Here, the form is laid out vertically using `BootstrapBasicForm`:

    (formWidget, formEnctype) <- generateFormPost $ renderBootstrap3 BootstrapBasicForm personForm

And then used in Hamlet:

     <form role=form method=post action=@{ActionR} enctype=#{formEnctype}>
       ^{formWidget}
       <button type="submit" .btn .btn-default>Submit

# Example: Rendering a horizontal form

Yesod.Form.Bootstrap3 also supports horizontal, grid based forms. These forms require additional markup for the submit tag, which is provided by the `bootstrapSubmit` function:

    personForm :: AForm Handler Person
    personForm = Person
           <$> areq textField MsgName Nothing
           <*> areq textField MsgSurname Nothing
           <*  bootstrapSubmit (BootstrapSubmit MsgSubmit "btn-default" [("attribute-name","attribute-value")])
           -- Note: bootstrapSubmit works with all BootstrapFormLayouts, but provides the additional markup required for Bootstrap's horizontal forms.

That form can be rendered with specific grid spacing:

    (formWidget, formEnctype) <- generateFormPost $ renderBootstrap3 (BootstrapHorizontalForm (ColSm 0) (ColSm 4) (ColSm 0) (ColSm 6)) personForm

And then used in Hamlet. Note the additional `form-horizontal` class on the form, and that a manual submit tag isn't required:

     <form .form-horizontal role=form method=post action=@{ActionR} enctype=#{formEnctype}>
       ^{formWidget}

# Rendering forms

renderBootstrap3 :: forall (m :: Type -> Type) a. Monad m => BootstrapFormLayout -> FormRender m a Source #

Render the given form using Bootstrap v3 conventions.

Since: yesod-form 1.3.8

data BootstrapFormLayout Source #

The layout used for the bootstrap form.

Since: yesod-form 1.3.8

Constructors

BootstrapBasicForm | A form with labels and inputs listed vertically. See http://getbootstrap.com/css/#forms-example
BootstrapInlineForm | A form whose `<inputs>` are laid out horizontally (displayed as `inline-block`). For this layout, `<label>`s are still added to the HTML, but are hidden from display. When using this layout, you must add the `form-inline` class to your form tag. See http://getbootstrap.com/css/#forms-inline
BootstrapHorizontalForm |

Fields

- bflLabelOffset :: !BootstrapGridOptions

  The left offset of the `<label>`.

- bflLabelSize :: !BootstrapGridOptions

  The number of grid columns the `<label>` should use.

- bflInputOffset :: !BootstrapGridOptions

  The left offset of the `<input>` from its `<label>`.

- bflInputSize :: !BootstrapGridOptions

  The number of grid columns the `<input>` should use.

#### Instances

Instances details

Show BootstrapFormLayout Source # |
Instance details Defined in Yesod.Form.Bootstrap3 Methods showsPrec :: Int -> BootstrapFormLayout -> ShowS Source # show :: BootstrapFormLayout -> String Source # showList :: [BootstrapFormLayout] -> ShowS Source #

data BootstrapGridOptions Source #

How many bootstrap grid columns should be taken (see `BootstrapFormLayout`).

Since: yesod-form 1.3.8

Constructors

ColXs !Int |
ColSm !Int |
ColMd !Int |
ColLg !Int |

#### Instances

Instances details

Show BootstrapGridOptions Source # |
Instance details Defined in Yesod.Form.Bootstrap3 Methods showsPrec :: Int -> BootstrapGridOptions -> ShowS Source # show :: BootstrapGridOptions -> String Source # showList :: [BootstrapGridOptions] -> ShowS Source #
Eq BootstrapGridOptions Source # |
Instance details Defined in Yesod.Form.Bootstrap3 Methods (==) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool Source # (/=) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool Source #
Ord BootstrapGridOptions Source # |

Instance details

Defined in Yesod.Form.Bootstrap3

Methods

compare :: BootstrapGridOptions -> BootstrapGridOptions -> Ordering Source #

(<) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool Source #

(<=) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool Source #

(>) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool Source #

(>=) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool Source #

max :: BootstrapGridOptions -> BootstrapGridOptions -> BootstrapGridOptions Source #

min :: BootstrapGridOptions -> BootstrapGridOptions -> BootstrapGridOptions Source #

# Field settings

This module comes with several methods to help customize your Bootstrap 3 `<input>`s. These functions can be chained together to apply several properties to an input:

    userForm :: AForm Handler UserForm
    userForm = UserForm
           <$> areq textField nameSettings Nothing
         where nameSettings = withAutofocus $
                              withPlaceholder "First name" $
                              (bfs ("Name" :: Text))

bfs :: RenderMessage site msg => msg -> FieldSettings site Source #

Create a new `FieldSettings` with the `form-control` class that is required by Bootstrap v3.

Since: yesod-form 1.3.8

withPlaceholder :: Text -> FieldSettings site -> FieldSettings site Source #

Add a placeholder attribute to a field. If you need i18n for the placeholder, currently you'll need to do a hack and use `getMessageRender` manually.

Since: yesod-form 1.3.8

withAutofocus :: FieldSettings site -> FieldSettings site Source #

Add an autofocus attribute to a field.

Since: yesod-form 1.3.8

withLargeInput :: FieldSettings site -> FieldSettings site Source #

Add the `input-lg` CSS class to a field.

Since: yesod-form 1.3.8

withSmallInput :: FieldSettings site -> FieldSettings site Source #

Add the `input-sm` CSS class to a field.

Since: yesod-form 1.3.8

# Submit button

bootstrapSubmit :: forall site msg (m :: Type -> Type). (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m) => BootstrapSubmit msg -> AForm m () Source #

A Bootstrap v3 submit button disguised as a field for convenience. For example, if your form currently is:

    Person <$> areq textField "Name"    Nothing
           <*> areq textField "Surname" Nothing

Then just change it to:

    Person <$> areq textField "Name"    Nothing
           <*> areq textField "Surname" Nothing
           <*  bootstrapSubmit ("Register" :: BootstrapSubmit Text)

(Note that `<*` is not a typo.)

Alternatively, you may also just create the submit button manually as well in order to have more control over its layout.

Since: yesod-form 1.3.8

mbootstrapSubmit :: forall site msg (m :: Type -> Type). (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m) => BootstrapSubmit msg -> MForm m (FormResult (), FieldView site) Source #

Same as `bootstrapSubmit` but for monadic forms. This isn't as useful since you're not going to use `renderBootstrap3` anyway.

Since: yesod-form 1.3.8

data BootstrapSubmit msg Source #

How the `bootstrapSubmit` button should be rendered.

Since: yesod-form 1.3.8

Constructors

BootstrapSubmit |

Fields

- bsValue :: msg

  The text of the submit button.

- bsClasses :: Text

  Classes added to the `<button>`.

- bsAttrs :: [(Text, Text)]

  Attributes added to the `<button>`.

#### Instances

Instances details

IsString msg => IsString (BootstrapSubmit msg) Source # |
Instance details Defined in Yesod.Form.Bootstrap3 Methods fromString :: String -> BootstrapSubmit msg Source #
Show msg => Show (BootstrapSubmit msg) Source # |
Instance details Defined in Yesod.Form.Bootstrap3 Methods showsPrec :: Int -> BootstrapSubmit msg -> ShowS Source # show :: BootstrapSubmit msg -> String Source # showList :: [BootstrapSubmit msg] -> ShowS Source #