I record a Kata as I write a Xamarin.Forms app from scratch:
Xamarin.Forms: ListView with Images Kata
Leave a comment
Elm: Styling a Form
Intro
This post attempts to document my current understanding of Elm and how to render a form with it.
Implementing the Form
I took an HTML form example from a reference book and decided to port it to Elm.
The following form has been coded:
view model =
div []
[ h1 [] [ text "Poetry Workshops" ]
, p [] [ text "We will be conducting a number of poetry workshops and symposiums throughout the year." ]
, p [] [ text "please note that the following events are free to members:" ]
, ul []
[ li [] [ text "A Poetic Perspective" ]
, li [] [ text "Walt Witman at Work" ]
, li [] [ text "Found Poems and Outsider Poetry" ]
]
, table []
[ tr [ class "head" ] [ th [] [], th [] [ text "New York" ], th [] [ text "Chicago" ], th [] [ text "Sanfrancisco" ] ]
, tr [] [ th [] [ text "A Poetic Perspective" ], td [] [ text "Sat, 4 Feb 2012" ], td [] [ text "Sat, 3 Feb 2012" ], td [] [ text "Sat, 17 Feb 2012" ] ]
, tr [ class "even" ] [ th [] [ text "Walt Witman at Work" ], td [] [ text "Sat, 7 Feb 2012" ], td [] [ text "Sat, 5 Feb 2012" ], td [] [ text "Sat, 19 Feb 2012" ] ]
, tr [] [ th [] [ text "Found Poems and Outsider Poetry" ], td [] [ text "Sat, 9 Feb 2012" ], td [] [ text "Sat, 7 Feb 2012" ], td [] [ text "Sat, 21 Feb 2012" ] ]
]
, Html.form []
[ fieldset []
[ legend [] [ text "Register Your Interest" ]
, p []
[ label [ class "title", for "name" ] [ text "Your name:" ]
, input [ type_ "text", name "name", id "name" ] []
, br [] []
, label [ class "title", for "email" ] [ text "Your email:" ]
, input [ type_ "text", name "email", id "email" ] []
, br [] []
]
, p []
[ label [ class "title", for "location" ] [ text "Your closest center" ]
, Html.select [ name "location", id "location" ]
[ option [ value "ny" ] [ text "New York" ]
, option [ value "il" ] [ text "Chicago" ]
, option [ value "ca" ] [ text "San Francisco" ]
]
]
, span [ class "title" ] [ text "Are you a member?" ]
, label [] [ text "Yes", input [ type_ "radio", name "member", value "yes" ] [] ]
, label [] [ text "No", input [ type_ "radio", name "member", value "no" ] [] ]
]
]
, div [ class "submit" ]
[ input [ type_ "submit", value "Register" ] [] ]
]
Implementing the CSS
Here’s the corresponding CSS file:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
color: #666666;
background-color: #f8f8f8;
}
li {
line-height: 1.6em;
}
table {
border-spacing: 0px;
}
th, td {
padding: 5px 30px 5px 10;
border-spacing: 0px;
font-size: 90%;
margin: 0px;
}
th, td {
text-align: left;
background-color: #e0e9f0;
border-top: 1px solid #f1f8fe;
border-bottom: 1px solid #cbd2d8;
border-right: 1px solid #cbd2d8;
}
tr.head th {
color: #ffffff;
background-color: #90b4d6;
border-bottom: 2px solid #547ca0;
border-right: 1px solid #749abe;
border-top: 1px solid #90b4d6;
text-align: center;
text-shadow: -1px -1px 1px #666666;
letter-spacing: 0.15em;
}
td {
text-shadow: 1px 1px 1px #ffffff;
}
tr.even td, tr.even th{
background-color:#e8eff5;
}
tr.head th:first-child{
-webkit-border-top-left-radius: 5px;
-moz-border-radius-top-left: 5px;
border-top-left-radius: 5px;
}
tr.head th:last-child{
-webkit-border-top-left-radius: 5px;
-moz-border-radius-top-right: 5px;
border-top-right-radius: 5px;
}
fieldset{
width:310px;
margin-top: 20px;
border: 1px solid #d6d6d6;
background-color: #ffffff;
line-height: 1.6em;
}
legend{
font-style: italic;
color: #666666;
}
input[type="text"]{
width: 120px;
border: 1px solid #d6d6d6;
padding: 2px;
outline: none;
}
input[type="text"]:focus , input[type="text"]:hover{
background-color: #d0e2f0;
border: 1px solid #999999;
}
input[type="submit"] {
border: 1px solid #006633;
background-color: #009966;
color: #ffffff;
border-radius: 5px;
padding: 5px;
margin-top: 10px;
}
input[type="submit"]:hover{
border: 1px solid #006633;
background-color: #00cc33;
color: #ffffff;
cursor: pointer;
}
.title {
float: left;
width: 160px;
clear: left;
}
.submit {
width: 310px;
text-align: right;
}
Displaying the Form
Here’s the result:
Conclusion
In conclusion, this post attempts to document my current understanding of Elm and how to render a form with it.
Elm: Building a Form
Intro
This post is meant to document my current understanding of how to build a form using the Elm programming language.
Select a File
The following code shows a form for selecting a file:
view : Model -> Html Msg
view model =
Html.form []
[ p [] [ text "Upload your song in MP3 format:" ]
, input [ type_ "text" ] []
, input [ type_ "file", name "user-song" ] []
, br [] []
, input [ type_ "submit", value "Upload" ] []
]
Here’s the result:
Label and Textbox
The following code demonstrates one way to associate a textbox to a label:
view model =
Html.form []
[ label [] [ text "Age:", input [ type_ "text", name "age" ] [] ]
]
Here’s the result:
Labels and Radio Buttons
The following is an example of labels associated to radio buttons:
view model =
Html.form []
[ label [] [ text "Gender:" ]
, input [ id "female", type_ "radio", name "gender", value "f" ] []
, label [ for "female" ] [ text "Female" ]
, input [ id "male", type_ "radio", name "gender", value "m" ] []
, label [ for "male" ] [ text "Male" ]
]
Here’s the result:
Grouping Form Elements
The following code leverages an HTML fieldset to group elements:
view model =
fieldset []
[ legend [] [ text "Contact Details" ]
, label [] [ text "Email:", br [] [], input [ type_ "text", name "email" ] [], br [] [] ]
, label [] [ text "Mobile:", br [] [], input [ type_ "text", name "mobile" ] [], br [] [] ]
, label [] [ text "Telephone:", br [] [], input [ type_ "text", name "telephone" ] [] ]
]
Here’s the result:
Validation
The following code demonstrates validation on required inputs for a form:
view model =
Html.form []
[ label [ for "username" ] [ text "UserName:" ]
, input [ type_ "text", name "username", required True ] []
, br [] []
, label [ for "password" ] [ text "Password:" ]
, input [ type_ "text", name "password", required True ] []
, input [ type_ "submit", value "Submit" ] []
]
Here’s the result:
Conclusion
In conclusion, this post attempts to document my current understanding of how to build a form using the Elm programming language.
Elm: Inline Formatting
This post documents an example of inline formatting using Elm:
Oh… And by the way, this video discusses how to simplify verbose syntax by using functions:
Look at the following code:
p [] [ span [] [ text "This text might be an " ], b [] [ text "introduction" ], text " to the rest of the page." ]
The following html is rendered from the code above:
Note:
When doing inline formatting, I learned to use the span element and pass-in individual elements that can be for either text or formatting. Just be aware that these elements are delimited by commas.
Elm-Live: Automatic Browser Refresh
Intro
This post is meant to document my understanding for supporting auto-refresh behavior for a browser when updating Elm files.
Steps
Given that the elm file that I’m working on is named “Main.elm”, the following needs to be done:
1: create/update index.html with the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<script>
Elm.Main.fullscreen();
</script>
</body>
</html>
2: Enter the following command on whatever command-line interface
elm-live Main.elm --open --output=main.js
Note:
After performing the steps above, every time a save operation occurs, an automatic refresh should also occur on the browser displaying the webpage (i.e. index.html)
Conclusion
In conclusion, I have documented the two steps required for auto refresh support when saving updates to an Elm file.
