2016-06-04 8 views
0

Мне нужна помощь, чтобы добавить BootStrap в My YesodForm Project. Вы можете мне помочь, ребята?Как добавить бутстрап в YesodForm

Это мой код. Я просто хочу добавить стили BootStrap для добавления в мои компоненты html. Я уже читал учебники aloot, но сложные, я новичок в Haskell. Мне нужна простая вещь только для этого простого проекта. Thank.s

{-# LANGUAGE OverloadedStrings, TypeFamilies, QuasiQuotes, 
      TemplateHaskell, GADTs, FlexibleInstances, 
      MultiParamTypeClasses, DeriveDataTypeable, 
      GeneralizedNewtypeDeriving, ViewPatterns, EmptyDataDecls #-} 
import Yesod 
import Database.Persist.Postgresql 
import Data.Text 
import Text.Lucius 
import Control.Monad.Logger (runStdoutLoggingT) 

data Pagina = Pagina{connPool :: ConnectionPool} 

share [mkPersist sqlSettings, mkMigrate "migrateAll"] [persistLowerCase| 
Animals json 
    nome Text 
    idade Int 
    deriving Show 

Users json 
    nome Text 
    login Text 
    senha Text 
    deriving Show 
|] 

mkYesod "Pagina" [parseRoutes| 
/HomeR GET 
/animal/cadastro AnimalR GET POST 
/animal/checar/#AnimalsId ChecarAnimalR GET 
/erro ErroR GET 

/login LoginR GET POST 
/usuario UsuarioR GET POST 
/perfil/#UsersId PerfilR GET 
/admin AdminR GET 
/logout LogoutR GET 
|] 

instance Yesod Pagina where 
    authRoute _ = Just LoginR 

    isAuthorized LoginR _ = return Authorized 
    isAuthorized ErroR _ = return Authorized 
    isAuthorized HomeR _ = return Authorized 
    isAuthorized UsuarioR _ = return Authorized 
    isAuthorized AdminR _ = isAdmin 
    isAuthorized _ _ = isUser 

isUser = do 
    mu <- lookupSession "_ID" 
    return $ case mu of 
     Nothing -> AuthenticationRequired 
     Just _ -> Authorized 

isAdmin = do 
    mu <- lookupSession "_ID" 
    return $ case mu of 
     Nothing -> AuthenticationRequired 
     Just "admin" -> Authorized 
     Just _ -> Unauthorized "Acesso Restrito para Administrador" 

instance YesodPersist Pagina where 
    type YesodPersistBackend Pagina = SqlBackend 
    runDB f = do 
     master <- getYesod 
     let pool = connPool master 
     runSqlPool f pool 

type Form a = Html -> MForm Handler (FormResult a, Widget) 

instance RenderMessage Pagina FormMessage where 
    renderMessage _ _ = defaultFormMessage 
------------------------ 

formAnimal :: Form Animals 
formAnimal = renderDivs $ Animals <$> 
      areq textField "Nome: " Nothing <*> 
      areq intField "Idade: " Nothing 

formUser :: Form Users 
formUser = renderDivs $ Users <$> 
      areq textField "Nome: " Nothing <*> 
      areq textField "Login: " Nothing <*> 
      areq passwordField "Password: " Nothing 

formLogin :: Form (Text,Text) 
formLogin = renderDivs $ (,) <$> 
      areq textField "Login: " Nothing <*> 
      areq passwordField "Senha: " Nothing   

getAnimalR :: Handler Html 
getAnimalR = do 
      (widget, enctype) <- generateFormPost formAnimal 
      defaultLayout $ do 
      toWidget [cassius| 
       label 
        color:blue; 
      |] 
      [whamlet| 
       <form .form-horizontal method=post enctype=#{enctype} [email protected]{AnimalR}> 
        ^{widget} 
        <input type="submit" value="Cadastrar Animal"> 
      |] 

getPerfilR :: UsersId -> Handler Html 
getPerfilR uid = do 
     user <- runDB $ get404 uid 
     defaultLayout $ do 
      toWidget $ $(luciusFile "templates/perfil.lucius") 
      $(whamletFile "templates/perfil.hamlet") 

getUsuarioR :: Handler Html 
getUsuarioR = do 
      (widget, enctype) <- generateFormPost formUser 
      defaultLayout [whamlet| 
       <form method=post enctype=#{enctype} [email protected]{UsuarioR}> 
        ^{widget} 
        <input type="submit" value="Enviar"> 
      |] 

postAnimalR :: Handler Html 
postAnimalR = do 
      ((result, _), _) <- runFormPost formAnimal 
      case result of 
       FormSuccess anim -> (runDB $ insert anim) >>= \piid -> redirect (ChecarAnimalR piid) 
       _ -> redirect ErroR 

postUsuarioR :: Handler Html 
postUsuarioR = do 
      ((result, _), _) <- runFormPost formUser 
      case result of 
       FormSuccess user -> (runDB $ insert user) >>= \piid -> redirect (PerfilR piid) 
       _ -> redirect ErroR 

getHomeR :: Handler Html 
getHomeR = defaultLayout [whamlet|Hello World!|] 

addStyle :: Widget 
addStyle = addStylesheetRemote "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" 

getAdminR :: Handler Html 
getAdminR = defaultLayout [whamlet| 
    <b><h1><font size="11"> Bem vindo ao Painel Administrativo</font></h1></b> 
|] 

getLoginR :: Handler Html 
getLoginR = do 
      (widget, enctype) <- generateFormPost formLogin 
      defaultLayout [whamlet| 
       <form method=post enctype=#{enctype} [email protected]{LoginR}> 
        ^{widget} 
        <input type="submit" value="Login"> 
      |] 

postLoginR :: Handler Html 
postLoginR = do 
      ((result, _), _) <- runFormPost formLogin 
      case result of 
       FormSuccess ("admin","eitapleuga") -> setSession "_ID" "admin" >> redirect AdminR 
       FormSuccess (login,senha) -> do 
        user <- runDB $ selectFirst [UsersLogin ==. login, UsersSenha ==. senha] [] 
        case user of 
         Nothing -> redirect LoginR 
         Just (Entity pid u) -> setSession "_ID" (pack $ show $ fromSqlKey pid) >> redirect (PerfilR pid) 

getChecarAnimalR :: AnimalsId -> Handler Html 
getChecarAnimalR pid = do 
    animal <- runDB $ get404 pid 
    defaultLayout [whamlet| 
    <font size="10">Perfil do Pet</font><br> 
     <p><b> Nome do Pet:</b> #{animalsNome animal} 
     <p><b> Idade do Pet:</b> #{show $ animalsIdade animal} Anos 
    |] 

getErroR :: Handler Html 
getErroR = defaultLayout [whamlet| 
    <h1>Falha no Cadastro !</h1> 
|] 

getLogoutR :: Handler Html 
getLogoutR = do 
    deleteSession "_ID" 
    defaultLayout [whamlet| 
     <h1> <b>Logout</b> efetuado com sucesso! </h1> 
    |] 

connStr = "dbname=d4673as0stmsm7 host=ec2-54-221-225-242.compute-1.amazonaws.com user=nzjfptmglfomng password=fyYms4A9T8gkP4_Go8GswcfIiE port=5432" 

главная :: IO() основной = runStdoutLoggingT $ withPostgresqlPool connStr 10 $ \ бассейн -> liftIO $ сделать runSqlPersistMPool (runMigration MigrateAll) бассейн перекос 8080 (Pagina бассейн)

ответ

1

вы можете добавить его в Handler функции, как это:

getUsuarioR :: Handler Html 
getUsuarioR = do 
     (widget, enctype) <- generateFormPost formUser 
     defaultLayout $ do 
      addStylesheetRemote "http://remote-bootstrap-path.css" 
      [whamlet| 
       <form method=post enctype=#{enctype} [email protected]{UsuarioR}> 
        ^{widget} 
        <input type="submit" value="Enviar"> 
      |] 

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

+0

Hi, Sibi. Спасибо за ответ, но когда я попробую добавить это, что вы отправили, и попробуйте сделать сборку, я получаю эту ошибку: последний оператор в блоке «do» должен быть выражением (widget, enctype) <- generateFormPost formUser defaultLayout $ do {addStylesheetRemote "http: //remote-bootstrap-path.css"; [whamlet | <метод формы = пост ENCTYPE = # {} ENCTYPE действие = @ {UsuarioR}> ^ {виджет} <входного типа = "Отправить" значение = "Enviar"> |]} –

+0

@JonasF Нечто подобное работает me: http://lpaste.net/165359 – Sibi

+0

Спасибо, Сиб. Он работал, не знаю, почему, никаких ошибок. Теперь, чтобы использовать BootStrap, мне просто нужно установить .class bootstrap в моих элементах, правильно? –

0

Специально для первого проекта я бы посоветовал использовать строительные леса. Вы можете получить его, следуя краткому руководству по началу работы на домашней странице Yesod. Вы не только получаете разумные настройки по умолчанию, но также имеете встроенный bootstrap css.

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

Что вам нужно сделать дальше, так это добавить соответствующие классы к вашим элементам html. Есть два способа сделать это, в зависимости от контекста. В ваших собственных виджетах вы просто добавляете их, как и любой другой класс (с точкой перед ним). Если вы используете код, который генерируется, например, для форм или для Yesod-таблицы, у вас часто есть выбор между различными функциями рендеринга. Например, вы можете отображать формы в двух столбцах, используя функцию рендеринга renderTable. Но почти всегда есть другая функция с именем вроде renderBootstrap, который будет отображать содержимое как простые divs с классами начальной загрузки.

Итак, в целом, Йесод очень хорошо интегрирован с бутстрапом. Даже слишком много в моем личном мнении. Но в вашем случае это должно сделать вашу задачу сравнительно легкой после путаницы первоначальной настройки.