Блог

Главная - Вопросы по программированию - Создание простой формы, безопасной для типов

Создание простой формы, безопасной для типов

#haskell #ihp

Вопрос:

Контекст

У меня есть простое приложение IHP, которое преобразует градусы Фаренгейта в градусы Цельсия.

Я удалил многие файлы, так что основная часть приложения находится в следующем файле:

https://github.com/dharmatech/ConvertTemperatureIhp/blob/003-type-safe-form-generation/Web/FrontController.hs

Содержимое этого файла показано здесь:

 module Web.FrontController where

import IHP.RouterPrelude

import Application.Helper.Controller
import IHP.ControllerPrelude

import IHP.ViewPrelude
import Generated.Types
import Application.Helper.View

data Temperature = Temperature { val :: Float } deriving (Show)

-- renderForm :: Temperature -> Html
-- renderForm temp = formFor temp [hsx|
--     abc
-- |]

instance CanRoute TemperatureController where
    parseRoute' = do
        let form   = string "/Temperature/Form"   <* endOfInput >> pure FormAction
        let result = string "/Temperature/Result" <* endOfInput >> pure ResultAction
        form <|> result

instance HasPath TemperatureController where
    pathTo FormAction   = "/Temperature/Form"
    pathTo ResultAction = "/Temperature/Result"

data WebApplication = WebApplication deriving (Eq, Show)

data TemperatureController
    = FormAction
    | ResultAction
    deriving (Eq, Show, Data)

instance Controller TemperatureController where
   
    action FormAction = respondHtml [hsx|
        <form action={pathTo ResultAction} method="post">
            <label>Farenheit</label>
            <input type="text" name="farenheit"/>
        </form>
    |]

    action ResultAction = 
        let
            farenheit = IHP.ControllerPrelude.param @Float "farenheit"
            celsius = (farenheit - 32.0) * 5.0 / 9.0
        in
            respondHtml [hsx| 
                <p>Celsius: {celsius}</p>
            |]

instance FrontController WebApplication where
    controllers = 
        [ 
          parseRoute @TemperatureController 
        ]

instance InitControllerContext WebApplication where
    initContext = do
        initAutoRefresh

Если я перейду http://localhost:8000/Temperature/Form , я получу следующую страницу:

введите описание изображения здесь

После отправки этой формы отображается следующая страница:

введите описание изображения здесь

Код формы

Вот код, который генерирует форму:

 action FormAction = respondHtml [hsx|
    <form action={pathTo ResultAction} method="post">
        <label>Farenheit</label>
        <input type="text" name="farenheit"/>
    </form>
|]

Этот код является строчным; то есть мы ссылаемся на параметр поля "farhenheit" по имени в строке.

Я хотел бы использовать formFor для генерации кода формы, безопасного для типов, как описано здесь:

https://ihp.digitallyinduced.com/Guide/form.html

Поэтому я добавил следующее определение записи для представления значения температуры:

 data Temperature = Temperature { val :: Float } deriving (Show)

Однако, когда я пошел создавать renderForm функцию:

 renderForm :: Temperature -> Html
renderForm temp = formFor temp [hsx|
    ...
|]

результатом была следующая ошибка:

введите описание изображения здесь

Текст ошибки на консоли:

 [5 of 6] Compiling Web.FrontController ( Web/FrontController.hs, interpreted )

Web/FrontController.hs:15:19: error:
    • Could not deduce (HasField "id" Temperature id0)
        arising from a use of ‘formFor’
      from the context: ?context::ControllerContext
        bound by the type signature for:
                   renderForm :: Temperature -> Html
Failed, four modules loaded.
        at Web/FrontController.hs:(15,1)-(17,2)
      The type variable ‘id0’ is ambiguous
    • In the expression: formFor temp (mconcat [])
      In an equation for ‘renderForm’:
          renderForm temp = formFor temp (mconcat [])
   |
15 | renderForm temp = formFor temp [hsx|
   |                   ^^^^^^^^^^^^^^^^^^...

Сообщение звучит так id , как будто ожидается, что поле будет присутствовать.

Вопрос

Есть ли хороший способ formFor сгенерировать этот простой код формы безопасным для типов способом?

В документации в разделе Расширенные формы упоминается следующее:

Вы можете далеко продвинуться с помощью встроенных помощников формы. Но иногда вам может понадобиться очень настраиваемая функциональность, которую нелегко выполнить с помощью помощников формы. В этом случае мы настоятельно рекомендуем не использовать помощники формы для этого конкретного случая. Не сражайтесь с инструментами.

Это сценарий, который не подходит для помощников формы? 🙂

Обновить — добавить id поле

Основываясь на сообщении об ошибке, в котором упоминается id поле, я добавил id поле:

 data Temperature = Temperature { id :: Int, val :: Float } deriving (Show)

Теперь сообщение об ошибке:

 [5 of 6] Compiling Web.FrontController ( Web/FrontController.hs, interpreted )

Web/FrontController.hs:15:19: error:
    • Could not deduce (HasField "meta" Temperature MetaBag)
        arising from a use of ‘formFor’
Failed, four modules loaded.
      from the context: ?context::ControllerContext
        bound by the type signature for:
                   renderForm :: Temperature -> Html
        at Web/FrontController.hs:(15,1)-(17,2)
    • In the expression: formFor temp (mconcat [])
      In an equation for ‘renderForm’:
          renderForm temp = formFor temp (mconcat [])
   |
15 | renderForm temp = formFor temp [hsx|
   |                   ^^^^^^^^^^^^^^^^^^...

Update — meta field

Based on the message regarding the meta field, I added a meta field to Temperature :

 data Temperature = Temperature { id :: Int, val :: Float, meta :: MetaBag  } deriving (Show)

Now the error message is as follows:

 [5 of 6] Compiling Web.FrontController ( Web/FrontController.hs, interpreted )

Web/FrontController.hs:15:19: error:
    • Could not deduce (KnownSymbol (GetModelName Temperature))
        arising from a use of ‘formFor’
      from the context: ?context::ControllerContext
Failed, four modules loaded.
        bound by the type signature for:
                   renderForm :: Temperature -> Html
        at Web/FrontController.hs:(15,1)-(17,2)
    • In the expression: formFor temp (mconcat [])
      In an equation for ‘renderForm’:
          renderForm temp = formFor temp (mconcat [])
   |
15 | renderForm temp = formFor temp [hsx|
   |                   ^^^^^^^^^^^^^^^^^^...

Update — GetModelName

Since the last error message mentioned GetModelName , I added the following based on code I saw in the example blog application from the IHP guide:

 data Temperature = Temperature { 
    id :: Int, 
    val :: Float, 
    meta :: MetaBag 
} deriving (Show)

type instance GetModelName Temperature = "Temperature"

and now it compiles.

Update — renderForm

So now that the project compiles, I updated renderForm as follows:

 renderForm :: Temperature -> Html
renderForm temp = formFor temp [hsx|
    {textField #val}
|]

The next step is, how to actually generate the form code given this new renderForm function. Any suggestions are welcome.

Update — it’s working!

The Temperature record definition is now:

 data Temperature = Temperature { 
    id :: Int, 
    farenheit :: Float, 
    meta :: MetaBag 
} deriving (Show)

renderForm является:

 renderForm :: Temperature -> Html
renderForm temp = formFor' temp "/Temperature/Result" [hsx|
    {textField #farenheit}
|]

И, наконец, FormAction это:

     action FormAction = 

        let temp = Temperature { id = 0, farenheit = 100.0, meta = def }

        in
                
        respondHtml [hsx| {renderForm temp} |]

И, похоже, это работает.

Примечания

Немного неудобно добавлять неиспользуемые id meta поля и Temperature только для удовлетворения кода генерации формы:

 data Temperature = Temperature { 
    id :: Int, 
    farenheit :: Float, 
    meta :: MetaBag 
} deriving (Show)

В идеале мы могли бы их исключить.

Если у кого-нибудь есть какие-либо предложения о том, как сделать это более идиоматичным, не стесняйтесь отвечать ниже.

Последний код, отраженный в приведенных выше примечаниях, находится по адресу:

https://github.com/dharmatech/ConvertTemperatureIhp/blob/004-renderForm/Web/FrontController.hs

Ответ №1:

Вот полный рабочий пример, основанный на обновлениях, показанных выше:

 module Web.FrontController where

import IHP.RouterPrelude

import Application.Helper.Controller
import IHP.ControllerPrelude

import IHP.ViewPrelude
import Generated.Types
import Application.Helper.View

data Temperature = Temperature { 
    id :: Int, 
    farenheit :: Float, 
    meta :: MetaBag 
} deriving (Show)

type instance GetModelName Temperature = "Temperature"

renderForm :: Temperature -> Html
renderForm temp = formFor' temp "/Temperature/Result" [hsx|
    {textField #farenheit}
|]

instance CanRoute TemperatureController where
    parseRoute' = do
        let form   = string "/Temperature/Form"   <* endOfInput >> pure FormAction
        let result = string "/Temperature/Result" <* endOfInput >> pure ResultAction
        form <|> result

instance HasPath TemperatureController where
    pathTo FormAction   = "/Temperature/Form"
    pathTo ResultAction = "/Temperature/Result"

data WebApplication = WebApplication deriving (Eq, Show)

data TemperatureController
    = FormAction
    | ResultAction
    deriving (Eq, Show, Data)

instance Controller TemperatureController where
   
    action FormAction = 

        let temp = Temperature { id = 0, farenheit = 100.0, meta = def }

        in
                
        respondHtml [hsx| {renderForm temp} |]

    action ResultAction = 
        let
            farenheit = IHP.ControllerPrelude.param @Float "farenheit"
            celsius = (farenheit - 32.0) * 5.0 / 9.0
        in
            respondHtml [hsx| 
                <p>Celsius: {celsius}</p>
            |]

instance FrontController WebApplication where
    controllers = 
        [ 
          parseRoute @TemperatureController 
        ]

instance InitControllerContext WebApplication where
    initContext = do
        initAutoRefresh

Не стесняйтесь публиковать другие ответы, которые демонстрируют другие, возможно, более идиоматические подходы.

Метки: