Unclear how to start tutorial example

[ysangkok]

After removing the n (#20) I start the server using stack runghc app/Main.hs. I open my browser at localhost:8081, and it says it can't find Index.html (I wrote a comment on a commit for that). How do I launch the example from the bottom of the tutorial?

[geraldus]

You need to compile code with GHCJS first and copy produced Main.jsexe folder to <project root>/static/out.jsexe. Then build your project with GHC as usual.

To make this work with stack you may need something similar in your stack.yaml configuration:

setup-info:
  ghcjs:
    source:
      ghcjs-0.2.0.20160414_ghc-7.10.3:
         url: https://s3.amazonaws.com/ghcjs/ghcjs-0.2.0.20160414_ghc-7.10.3.tar.gz
         sha1: 6d6f307503be9e94e0c96ef1308c7cf224d06be3

If I'm not mistaken with this config you'll be able to install GHCJS first by running stack setup --compiler=ghcjs-0.2.0_ghc-7.10.3 from project root and after GHCJS will be booted you can build your project with GHCJS via stack build --compiler=ghcjs-0.2.0_ghc-7.10.3.

To ease the development process I usually write a shell script to build project with GHCJS first, update (move) resulting JSEXE folder to static directory, then build project with GHC and finally run the application. Note, that application should ask you what to do and which port to use, to avoid manual typing you can pass -p start/<port number> as argument to your executable.

Hope this helps.

[ysangkok]

I tried that, but now I get this error:

    /home/janus/Skrivebord/transient-test/app/Main.hs:31:19:
        No instance for (Typeable a7) arising from a use of ‘wlink’
        In the first argument of ‘fire’, namely
          ‘wlink "Hi!" (toElem "This link say Hi!")’
        In the second argument of ‘(++>)’, namely
          ‘wlink "Hi!" (toElem "This link say Hi!") `fire` OnClick’
        In a stmt of a 'do' block:
          r <- br ++> wlink "Hi!" (toElem "This link say Hi!") `fire` OnClick

This is my app/Main.js: https://gist.github.com/ysangkok/60d57e67713ac67427306230532a472c

I don't know how to proceed. Thanks for your help.

[agocorona]

Hi,
The problem is with OverloadedStrings:

   r <- br ++> wlink "Hi!" (toElem "This link say Hi!")`fire` OnClick
   rawHtml . b  $ " returns "++ r

Due to the overloadedString all literal string has now a polimorphic type.

"Hi!" is disambiguated to String, since the second line concatenate with (++) what was returned by wlink, which is the first parameter "Hi!"

But

   (toElem "This link say Hi!")    

is ambiguous, since toElem belongs to a class that has many types.

to disambiguate avoid OverloadedString, and use fromString (from Data.String) for conversion from String to another type.

or use

   (toElem  ("This link say Hi!" :: String))

[ysangkok]

Ok, I got it running by removing OverloadedStrings, changing fromStr to fromString and adding the import. But when I browser the page on localhost:8081, the JavaScript console reports <stdin>: hGetLine: end of file and there are no input elements. Here is my code: https://github.com/ysangkok/transient-test/blob/6b610b3ac6593bdf4297cd486e2d24bae22a88b8/app/Main.hs

[agocorona]

Hi Janus:

the reason is because unlike haplayground, that renders the widgets using his own monad,, ghcjs-hplay need to use a "render" primitive explicitly: Note the render additions in the code below:

main= simpleWebApp 8081 $ local $  buttons  <|> linksample
  where
  linksample= do
      r <- render $ br ++> wlink "Hi!" (toElem "This link say Hi!")`fire` OnClick
      render $ rawHtml . b  $ " returns "++ r

  buttons= do
       render . rawHtml $ p "Different input elements:"
       radio
           **> br ++> br
           ++> select
           <++ br

  checkButton=do
       rs <- render $ getCheckBoxes(
                       ((setCheckBox False "Red"    <++ b "red")   `fire` OnClick)
                    <> ((setCheckBox False "Green"  <++ b "green") `fire` OnClick)
                    <> ((setCheckBox False "blue"   <++ b "blue")  `fire` OnClick))
       render $ wraw $ fromString " returns: " <> b (show rs)

  radio= do
         r <- render $ getRadio [fromString v ++> setRadioActive v | v <- ["red","green","blue"]]

         render $ wraw $ fromString " returns: " <> b ( show r )

select= do
       r <- render $ getSelect (   setOption "red"   (fromString "red")

                      <|> setOption "green" (fromString "green")
                      <|> setOption "blue"  (fromString "blue"))
              `fire` OnClick

       render $ wraw $ fromString " returns: " <> b ( show r )

Note that I do not include checkButtons in the example. I verfied that there is some problem that I´m trying to solve.

render must be put in each monadic sentence that has widgets to produce dynamic updates when events happens. For static rendering, a single render at the beginning may suffice. But this is rarely the case.

[ysangkok]

Nice, thanks, finally works!