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

Safe Haskell | None
Language | Haskell98

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 :: 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 :: (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m) => BootstrapSubmit msg -> AForm m ()
- mbootstrapSubmit :: (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 :: Monad m => BootstrapFormLayout -> FormRender m a #

Render the given form using Bootstrap v3 conventions.

Since: yesod-form 1.3.8

data BootstrapFormLayout #

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 | A form laid out using the Bootstrap grid, with labels in the left column and inputs on the right. When using this layout, you must add the `form-horizontal` class to your form tag. Bootstrap requires additional markup for the submit button for horizontal forms; you can use `bootstrapSubmit` in your form or write the markup manually. See http://getbootstrap.com/css/#forms-horizontal
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

Show BootstrapFormLayout # |
Methods showsPrec :: Int -> BootstrapFormLayout -> ShowS # show :: BootstrapFormLayout -> String # showList :: [BootstrapFormLayout] -> ShowS #

data BootstrapGridOptions #

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

Eq BootstrapGridOptions # |
Methods (==) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool # (/=) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool #
Ord BootstrapGridOptions # |
Methods compare :: BootstrapGridOptions -> BootstrapGridOptions -> Ordering # (<) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool # (<=) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool # (>) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool # (>=) :: BootstrapGridOptions -> BootstrapGridOptions -> Bool # max :: BootstrapGridOptions -> BootstrapGridOptions -> BootstrapGridOptions # min :: BootstrapGridOptions -> BootstrapGridOptions -> BootstrapGridOptions #
Show BootstrapGridOptions # |
Methods showsPrec :: Int -> BootstrapGridOptions -> ShowS # show :: BootstrapGridOptions -> String # showList :: [BootstrapGridOptions] -> ShowS #

# 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 #

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 #

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 #

Add an autofocus attribute to a field.

Since: yesod-form 1.3.8

withLargeInput :: FieldSettings site -> FieldSettings site #

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

Since: yesod-form 1.3.8

withSmallInput :: FieldSettings site -> FieldSettings site #

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

Since: yesod-form 1.3.8

# Submit button

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

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 :: (RenderMessage site msg, HandlerSite m ~ site, MonadHandler m) => BootstrapSubmit msg -> MForm m (FormResult (), FieldView site) #

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 #

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

Show msg => Show (BootstrapSubmit msg) # |
Methods showsPrec :: Int -> BootstrapSubmit msg -> ShowS # show :: BootstrapSubmit msg -> String # showList :: [BootstrapSubmit msg] -> ShowS #
IsString msg => IsString (BootstrapSubmit msg) # |
Methods fromString :: String -> BootstrapSubmit msg #