IHP Api Reference
Safe HaskellSafe-Inferred

IHP.View.Types

Synopsis

Documentation

data SubmitButton Source #

Constructors

SubmitButton 

Instances

Instances details
ToHtml SubmitButton 
Instance details

Defined in IHP.View.Form

Methods

toHtml :: SubmitButton -> Html #

data FormContext model Source #

Constructors

FormContext 

Fields

Instances

Instances details
SetField "cssFramework" (FormContext record) CSSFramework Source # 
Instance details

Defined in IHP.View.Types

Methods

setField :: CSSFramework -> FormContext record -> FormContext record Source #

SetField "disableJavascriptSubmission" (FormContext record) Bool Source # 
Instance details

Defined in IHP.View.Types

Methods

setField :: Bool -> FormContext record -> FormContext record Source #

SetField "formAction" (FormContext record) Text Source # 
Instance details

Defined in IHP.View.Types

Methods

setField :: Text -> FormContext record -> FormContext record Source #

SetField "formClass" (FormContext record) Text Source # 
Instance details

Defined in IHP.View.Types

Methods

setField :: Text -> FormContext record -> FormContext record Source #

SetField "formId" (FormContext record) Text Source # 
Instance details

Defined in IHP.View.Types

Methods

setField :: Text -> FormContext record -> FormContext record Source #

SetField "model" (FormContext record) record Source # 
Instance details

Defined in IHP.View.Types

Methods

setField :: record -> FormContext record -> FormContext record Source #

SetField "customFormAttributes" (FormContext record) [(Text, Text)] Source # 
Instance details

Defined in IHP.View.Types

Methods

setField :: [(Text, Text)] -> FormContext record -> FormContext record Source #

data CSSFramework Source #

Render functions to render with Bootstrap, Tailwind CSS etc. We call this functions with the cssFramework passed to have late binding (like from OOP languages). Here's an explanation breaking it down, step by step

renderedHtml = styledPagination theCSSFramework theCSSFramework paginationView

Can also be written using get:

renderedHtml = (get #styledPagination theCSSFramework) theCSSFramework paginationView

That's important to understand here. We get a $sel:styledPagination:CSSFramework function using 'get #styledPagination theCSSFramework'. Next, we apply theCSSFramework to that function. We do that so because the $sel:styledPagination:CSSFramework function internally might want to call other functions of the CSSFramework type. But we might want to override some functions of the CSSFramework.

Here's an example of how it would look if we don't pass this a second time, and it's shortcomings. Let's assume $sel:styledPagination:CSSFramework is calling a styledButton:

data CSSFramework = CSSFramework { styledPagination :: Html, styledButton :: Html }

bootstrapCSS = CSSFramework { styledPagination, styledButton }
   where
       styledPagination = [hsx|<div>{styledButton}</div>|]
       styledButton = [hsx|<button style="color: red">button</button>|]]

myPage = [hsx|{styledPagination bootstrapCSS}|]

So far all seems fine. But now let's say we would like to override the button styling, and change the button to green instead of red:

customCSS = bootstrapCSS { styledButton = [hsx|<button style="color: green">button</button>|]]  }

myPage = [hsx|{styledPagination customCSS}|]

Now, when we render the myPage we will get 'divstyle="color: red"button/button/div' (a red button, while our customCSS specified it should be green).

Our way to fix this is to "late-bind" the calls, by manually passing around a CSSFramework. Here we added that second CSSFramework to all functions. Notice how $sel:styledPagination:CSSFramework is getting the correct styledButton by calling 'get #styledButton cssFramework':

data CSSFramework = CSSFramework { styledPagination :: CSSFramework -> Html, styledButton :: CSSFramework -> Html }

bootstrapCSS = CSSFramework { styledPagination, styledButton }
   where
       styledPagination cssFramework = [hsx|<div>{get #styledButton cssFramework}</div>|]
       styledButton cssFramework = [hsx|<button style="color: red">button</button>|]]

myPage = [hsx|{styledPagination bootstrapCSS bootstrapCSS}|]

Now, with this second CSSFramework in place we can customize it again:

customCSS = bootstrapCSS { styledButton = \cssFramework -> [hsx|<button style="color: green">button</button>|]]  }

myPage = [hsx|{styledPagination customCSS customCSS}|]

Constructors

CSSFramework 

Fields

Instances

Instances details
Default CSSFramework Source #

Provides an unstyled CSSFramework

This way we can later add more properties to the CSSFramework without having update all the CSS Frameworks manually

Instance details

Defined in IHP.View.CSSFramework

Methods

def :: CSSFramework #

SetField "cssFramework" (FormContext record) CSSFramework Source # 
Instance details

Defined in IHP.View.Types

Methods

setField :: CSSFramework -> FormContext record -> FormContext record Source #

data BreadcrumbsView Source #

Constructors

BreadcrumbsView 

Fields

type HtmlWithContext context = (?context :: context) => Html Source #

type Layout = Html -> Html Source #

A layout is just a function taking a view and returning a new view.

Example: A very basic html layout.

myLayout :: Layout
myLayout view = [hsx|
    <html>
        <body>
            {view}
        </body>
    </html>
|]