b'\n_START_ARTICLE_\nElm (llenguatge de programaci\xc3\xb3)\n_START_SECTION_\nDescripci\xc3\xb3\n_START_PARAGRAPH_\nLa implementaci\xc3\xb3 d\'Elm compila a JavaScript i HTML, amb \xc3\xbas d\'estils CSS._NEWLINE_A Elm, la programaci\xc3\xb3 reactiva funcional, basada en objectes variables i relacions de depend\xc3\xa8ncia, relleva l\'usuari de programar gestors d\'esdeveniments (ang: event handlers) i rutines en mode d\'inversi\xc3\xb3 de control (ang:callbacks). Tamb\xc3\xa9 actualitza autom\xc3\xa0ticament els objectes en pantalla._NEWLINE_La presentaci\xc3\xb3 gr\xc3\xa0fica funcional pura relleva d\'actualitzar el model de document DOM._NEWLINE_Elm tamb\xc3\xa9 permet incloure plantilles en llenguatge de marques Markdown.\n_START_SECTION_\nSintaxi i sem\xc3\xa0ntica\n_START_PARAGRAPH_\nElm adopta una sintaxi a l\'estil del Haskell amb influ\xc3\xa8ncies d\'OCaml i F Sostingut. Per exemple l\'operador "t\xc3\xa9 tipus" s\'escriu amb un \xc3\xbanic car\xc3\xa0cter \':\'; els operadors d\'aplicaci\xc3\xb3 directa (<|) i aplicaci\xc3\xb3 revessa (|>) s\xc3\xb3n tals que (f x) \xc3\xa9s igual que (f |> x) i igual que (x |> f)._NEWLINE_Les definicions de tipus segueixen l\'esquema del Haskell. Els tipus dels par\xc3\xa0metres se separen amb (->) i la repetici\xc3\xb3 de variables de tipus indica requeriment de coincid\xc3\xa8ncia._NEWLINE_Elm t\xc3\xa9 registres extensibles que forneixen un \xc3\xbas segur de la flexibilitat del model d\'objectes de Javascript._NEWLINE_El sistema de tipus suporta tipus primitius com Enters i Coma flotant, dades estructurades com ara tuples i registres, i tamb\xc3\xa9 tipus abstractes de dades personalitzats._NEWLINE_La implementaci\xc3\xb3 de la programaci\xc3\xb3 reactiva funcional \xc3\xa9s moguda per esdeveniments (event-driven), volent dir que les actualitzacions s\xc3\xb3n autom\xc3\xa0tiques i nom\xc3\xa9s en cas de necessitat. Comparteix la m\xc3\xa0xima semblan\xc3\xa7a amb l\'"Event-driven FRP" i l\'"Arrowized FRP"._NEWLINE_El seg\xc3\xbcent programa mostra la posici\xc3\xb3 del ratol\xc3\xad en moure\'l per la pantalla._NEWLINE_main = lift asText Mouse.position_NEWLINE_El valor de main es mostra en pantalla. La funci\xc3\xb3 asText converteix qualsevol valor en un valor textual representable. La funci\xc3\xb3 lift assegura que asText ser\xc3\xa0 aplicada al senyal Mouse.position a cada canvi del valor._NEWLINE_Elm t\xc3\xa9 un petit per\xc3\xb2 expressiu conjunt de construccions de llenguatge i tractament de llistes. Tamb\xc3\xa9 t\xc3\xa9 un sistema de m\xc3\xb2duls i un model d\'interfase amb funcions foranes (FFI) per al JavaScript._NEWLINE_Les funcions predefinides s\xc3\xb3n al m\xc3\xb2dul Prelude.\n_START_SECTION_\nSenyals (variabilitat)\n_START_PARAGRAPH_\n(Signal tipusDelValor) \xc3\xa9s el tipus de les variables o expressions que canvien de valor, amb el temps (continus) o per l\'efecte d\'esdeveniments (discrets)._NEWLINE_-- obtenir el temps actual, actualitzat cada tTime.every : Time -> Signal Time-- obtenir la posici\xc3\xb3 del ratol\xc3\xadMouse.position : Signal (Int,Int)_NEWLINE_Els elements de formularis HTML poden variar en estil i en estat. Les funcions que els generen tornen majorit\xc3\xa0riement un parell de senyals (senyal_de_l\'element, senyal_de_l\'estat) com a_NEWLINE_-- crear una casella de marcar, amb el valor inicial indicat.-- retorna el parell (senyal de l\'estructura, senyal de l\'estat)checkbox : Bool -> (Signal Element, Signal Bool)\n_START_SECTION_\nSenyals dependents\n_START_PARAGRAPH_\nEls senyals dependents s\xc3\xb3n com les cel\xc2\xb7les d\'un full de c\xc3\xa0lcul que contenen una f\xc3\xb3rmula, i el seu valor es recalcula per reacci\xc3\xb3 als canvis dels seus operands._NEWLINE_Es defineixen, o b\xc3\xa9 amb una expressi\xc3\xb3 de filtre de senyals, o b\xc3\xa9 per l\'aplicaci\xc3\xb3 d\'una funci\xc3\xb3 de valors, que per aplicar-la a senyals cal elevar-ne el tipus amb lift._NEWLINE_Per emprar un valor en un par\xc3\xa0metre de senyal, cal elevar-ne el tipus convertint-lo a senyal amb la funci\xc3\xb3 Signal.constant._NEWLINE_Si la funci\xc3\xb3 arrel (d\'engegada), anomenada main, \xc3\xa9s un senyal, llavors s\'exploraran les depend\xc3\xa8ncies entre senyals per obtenir-ne els independents i incloure\'n els generadors en el bucle de despatx inicial._NEWLINE_Cada senyal mant\xc3\xa9 una llista dels senyals que en depenen i que far\xc3\xa0 recalcular en cas que se li actualitzi el valor. No hi pot haver cicles en la relaci\xc3\xb3 de depend\xc3\xa8ncia.\n_START_SECTION_\nSenyal com a inst\xc3\xa0ncia de la classe Functor\n_START_PARAGRAPH_\nVegeu signatura de la classe Functor a Haskell. De la biblioteca Signal d\'Elm:_NEWLINE_-- elevar una funci\xc3\xb3 de \'\'valors\'\' a una funci\xc3\xb3 de \'\'senyals\'\'lift : (a -> b) -> Signal a -> Signal b-- (<~) \xc3\xa9s un \xc3\xa0lies per a lift\n_START_SECTION_\nSenyal com a inst\xc3\xa0ncia de la classe Applicative\n_START_PARAGRAPH_\nVegeu signatura de la classe Applicative a Haskell. De la biblioteca Signal d\'Elm:_NEWLINE_-- elevar un valorconstant : a -> Signal a-- aplicaci\xc3\xb3 seq\xc3\xbcencial de funci\xc3\xb3 de senyals(~) : Signal (a -> b) -> Signal a -> Signal b-- mostreja el segon senyal seq\xc3\xbcencialment a un canvi de valor del primer.sampleOn : Signal a -> Signal b -> Signal b------------------------ per elevar una funci\xc3\xb3 de valors de N par\xc3\xa0metres (definides lift2 a lift8)senyal_resultant = liftN fun_N_\xc3\xa0ria senyal1 senyal2 ... senyalN-- equivalent amb operadors binaris en infixsenyal_resultant = fun_N_\xc3\xa0ria <~ senyal1 ~ senyal2 ~ ... ~ senyalN\n_START_SECTION_\nTransformadors de senyals componibles. Aut\xc3\xb2mats\n_START_PARAGRAPH_\n\xc3\x89s un tipus quina finalitat \xc3\xa9s possibilitar definir una seq\xc3\xbc\xc3\xa8ncia de transformacions en cadena (amb possibles efectes col\xc2\xb7laterals)._NEWLINE_El concepte \xc3\xa9s originari del TAD Fletxa de Haskell que descriu la seq\xc3\xbcenciaci\xc3\xb3 d\'efectes col\xc2\xb7laterals mitjan\xc3\xa7ant l\'encadenament de morfismes._NEWLINE_La baula d\'aquest encadenament \xc3\xa9s el tipus Automaton, que designa una aplicaci\xc3\xb3 de valors (amb possibles efectes col\xc2\xb7laterals) amb un par\xc3\xa0metre d\'origen i un resultat. El tipus \xc3\xa9s polim\xc3\xb2rfic amb dos par\xc3\xa0metres, el tipus de l\'entrada i el de la sortida (Automaton input output)._NEWLINE_Per encadenar-ne dues, el tipus de la sortida de l\'aut\xc3\xb2mata precedent ha de coincidir amb el tipus de l\'entrada del seg\xc3\xbcent._NEWLINE_Podem generar-ne a partir d\'una funci\xc3\xb3 pura (que nom\xc3\xa9s dep\xc3\xa8n dels par\xc3\xa0metres) o d\'una amb mem\xc3\xb2ria. De la biblioteca Automaton d\'Elm:_NEWLINE_-- generador des d\'una funci\xc3\xb3 purapure : (a -> b) -> Automaton a b _NEWLINE__NEWLINE_-- generadors a partir d\'un estat inicial i una funci\xc3\xb3 de l\'entrada i de l\'estatstate : b -> (a -> b -> b) -> Automaton a b   _NEWLINE_hiddenState : s -> (a -> s -> (s,b)) -> Automaton a b_NEWLINE_En podem fer un transformador de senyals amb la funci\xc3\xb3 Automaton.run i un valor per defecte._NEWLINE_run : Automaton a b -> b -> Signal a -> Signal b-- cal aportar un resultat per defecte, per al cas de manca de senyal d\'entradasenyalResultant = run elMeuAut\xc3\xb2mata resultatPerDefecte senyalD\'entrada_NEWLINE_Els Automatons s\xc3\xb3n componibles:_NEWLINE_-- Compon dos aut\xc3\xb2mats mitjan\xc3\xa7ant l\'encadenament(>>>) : Automaton a b -> Automaton b c -> Automaton a c..._NEWLINE_En realitat aquests aut\xc3\xb2mats componibles s\xc3\xb3n una versi\xc3\xb3 particular del concepte de les Fletxes de Haskell.\n_START_SECTION_\nText estilitzat\n_START_PARAGRAPH_\nimport Graphics.Element as Elem    -- importaci\xc3\xb3 qualificada_NEWLINE_ _NEWLINE_unstyledText : TextunstyledText = Text.toText "test1"_NEWLINE_ _NEWLINE_styleIt : Text -> TextstyleIt = (Text.typeface "serif"). (Text.color red) _NEWLINE_ _NEWLINE_-- (f <| x = f x), evita l\'\xc3\xbas de par\xc3\xa8ntesis_NEWLINE_ _NEWLINE_alignTest : Int -> ElementalignTest commonWidth = _NEWLINE_   let elem1 = Elem.width commonWidth <| Text.text <| styleIt unstyledText_NEWLINE_       elem2 = Elem.width commonWidth <| Text.centered <| styleIt <| Text.toText "test2" _NEWLINE_       elem3 = Elem.width commonWidth <| Text.righted <| styleIt <| Text.toText "test3"_NEWLINE_ _NEWLINE_   in flow down [elem1, elem2, elem3]   _NEWLINE_ _NEWLINE_main : Elementmain = alignTest 200_NEWLINE_Podeu provar-ho a l\'editor online amb compilaci\xc3\xb3 i execuci\xc3\xb3.\n_START_SECTION_\nParametritzant un programa Elm\n_START_PARAGRAPH_\nLa cl\xc3\xa0usula port per a la interf\xc3\xadcie FFI (Foreign function interface) amb Javascript es pot aprofitar per proporcionar par\xc3\xa0metres a nivell de html._NEWLINE_module ElmMain whereport arg1 : Stringport arg2 : Intport arg3 : [String]implode : [String] -> Stringimplode = concat. intersperse ", "main = asText <| implode [arg1, show arg2, implode arg3]_NEWLINE_<!DOCTYPE HTML><html><head><meta charset="UTF-8">_NEWLINE_  <title>Title</title>_NEWLINE_  <!-- elm-runtime.js i els m\xc3\xb2duls compilats js      (si es compila amb --make el ElmMain.js contindr\xc3\xa0 els m\xc3\xb2duls d\'usuari que s\'importin -->_NEWLINE__NEWLINE_  <script type="text/javascript" _NEWLINE_          src="/your-install-directory/cabal-dev/share/Elm-N.N.N.N/elm-runtime.js"></script>_NEWLINE_  <script type="text/javascript" src="ElmMain.js"></script></head><body>_NEWLINE_  <div id="myId" style="width:100;height:100;"></div><!-- Elm container must be a "div" element and must be empty -->_NEWLINE_  <script type="text/javascript">var myPorts = {arg1: "do re mi",   // de la lletra de la can\xc3\xa7\xc3\xb3 "abc" dels "Jackson\'s 5"_NEWLINE_               arg2: 123,_NEWLINE_               arg3: ["abc", "you and me"]  _NEWLINE_               } ;var myContainer = document.getElementById(\'myId\'); _NEWLINE__NEWLINE_Elm.embed(Elm.ElmMain, myContainer, myPorts) ;_NEWLINE_  </script>_NEWLINE_  <noscript>Javascript is not enabled</noscript></body></html>\n_START_SECTION_\nGr\xc3\xa0fics que varien al Tictac\n_START_PARAGRAPH_\nFent servir la biblioteca Graphics.Collage_NEWLINE_myShape : ShapemyShape1 = circle 30myShape2 = rect 60 60_NEWLINE_ _NEWLINE_myForm1 : FormmyForm1 = outlined (dashed green) myShape1myForm2 = outlined (solid red) myShape2_NEWLINE_ _NEWLINE_formes : [Form] _NEWLINE_formes = [myForm1 |> move (10, -10)_NEWLINE_                   , myForm2 |> move (30, -30) _NEWLINE_                                 |> rotate (degrees 45)_NEWLINE_                                 |> scale 1.5_NEWLINE_ _NEWLINE_                   , plainText "mytext"_NEWLINE_                                 |> toForm_NEWLINE_                                 |> move (20, -20)_NEWLINE_                                 |> rotate (degrees 30)_NEWLINE_                                 |> scale 2_NEWLINE_                       ]mapRotate : Float -> [Form] -> [Form]mapRotate t = let f = rotate <| degrees <| t * 10_NEWLINE_              in map f _NEWLINE_ _NEWLINE_f >> g = g. f _NEWLINE_ _NEWLINE_-- senyal de temps en segons, sense decimals tictac : Signal Floattictac = let f = inSeconds >> truncate >> Prelude.toFloat_NEWLINE_         in every (2 * second) _NEWLINE_              |> lift fmain : Signal Elementmain = constant formes_NEWLINE_          |> lift2 mapRotate tictac_NEWLINE_          |> lift3 collage (constant 200) (constant 200)\n_START_SECTION_\nComprovador de contrasenya en camp doblat, amb confirmaci\xc3\xb3 per canvi de color\n_START_PARAGRAPH_\nimport Graphics.Input as Inputimport Graphics.Element as Elemimport String as Str_NEWLINE_ _NEWLINE_-- comprovador amb modificador de colorpasswdOkColour : String -> String -> Element -> ElementpasswdOkColour passwd1 passwd2 = _NEWLINE_  if passwd1 == passwd2 && Str.length passwd1 >= 6 _NEWLINE_     then Elem.color green _NEWLINE_     else Elem.color red_NEWLINE_ _NEWLINE_display field1Elem field2Elem submitButtonElem =_NEWLINE_  field1Elem `above` field2Elem `above` submitButtonElemdynamicElement : Signal ElementdynamicElement = _NEWLINE_       let (field1ElemSignal, fld1StateSignal) = Input.password "Type password (min. 6 characters)!"_NEWLINE_           labeledField1Signal = let prependLabel = beside (plainText "passwd: ")_NEWLINE_                                 in lift prependLabel field1ElemSignal_NEWLINE_ _NEWLINE_ _NEWLINE_           (field2ElemSignal, fld2StateSignal) = Input.password "Retype password!"_NEWLINE_           labeledField2Signal = let prependLabel = beside (plainText "control: ")_NEWLINE_                                 in lift prependLabel field2ElemSignal_NEWLINE_ _NEWLINE_           (submitButton, pressedSignal) = Input.button "Submit"_NEWLINE_ _NEWLINE_           coloredButSignal = constant submitButton _NEWLINE_                                 |> lift3 passwdOkColour fld1StateSignal fld2StateSignal _NEWLINE_ _NEWLINE_       in  lift3 display labeledField1Signal labeledField2Signal coloredButSignal_NEWLINE_ _NEWLINE_main = dynamicElement'