Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 128 lines (122 sloc) 5.386 kb
d00622b1 »
2012-03-12 Very basic demo of using SELECT tag in Opa.
1 import stdlib.themes.bootstrap
2
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
3 /**
4 * This is the core function here. It takes a list of options and let's the user
5 * select one of them. Upon selecting any item it calls the supplied callback
6 * with the selected value.
7 *
8 * @param id The id of the selection element; you can provide either [{id: value}]
9 * to generate an element with the given [value] id, or [{autogen}],
10 * in which case a (random) id will be generated by this function.
11 * @param options A list of values of an arbitrary type. Those will be the values
12 * that the user can choose from.
13 * @param callback A callback that will be called every time user makes selection.
14 * It has a single argument, which is the selected value.
15 * @return The function returns XHTML snippet with the selection among given options.
16 *
925c57e6 »
2012-03-12 Added README.
17 * EXERCISES:
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
18 * - As it is this function just renders the options with a default conversion
19 * to xhtml (which btw. can be customized with xmlizer functions!); what would
20 * you do if you need more control over the XHTML generated for every option?
21 * Try implementing it!
22 * - The callback is called every time the user changes his selection. Another
23 * useful interface would be to be able at any time to learn what's the user's
24 * selection. How would you provide this functionality?
25 *
26 * HINT: Opa is fully type-safe, however interacting with DOM/user is not.
27 * Writing proper auxiliary functions, such as this one, to hide this
28 * fact from the rest of the program and provide type-safe abstraction
29 * is crucial (and one day will probably be accomplished by a UI library
30 * for Opa).
31 */
32 function select( // HINT: Such variants arguments are great way to make functions
33 // more flexible and reduce the number of variants of functions
34 ({string id} or {autogen}) id,
35 list('a) options,
36 ('a -> void) callback
37 )
38 {
39 // the final id of this element
40 sel_id =
a28c6d71 »
2012-03-12 Adding selection callback.
41 match (id) {
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
42 case {id: user_id}: user_id; // take user provided value
43 case {autogen}: Dom.fresh_id() // take a fresh DOM value
a28c6d71 »
2012-03-12 Adding selection callback.
44 }
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
45 // this function renders a single option; it also assigns to it a given value
a28c6d71 »
2012-03-12 Adding selection callback.
46 function render_option(i, o) {
47 <option value={i}>{o}</>
d00622b1 »
2012-03-12 Very basic demo of using SELECT tag in Opa.
48 }
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
49 // this function will be called on every selection change
a28c6d71 »
2012-03-12 Adding selection callback.
50 function changed(_evt) {
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
51 // when rendering we gave options successive numerical values, so to learn
52 // which one was selected we just take the value of the selection, convert
53 // it to numerical value 'n' and take n'th element from the provided list of
54 // options
55 sel_val = List.unsafe_get(String.to_int(Dom.get_value(#{sel_id})), options);
a28c6d71 »
2012-03-12 Adding selection callback.
56 callback(sel_val);
57 }
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
58 // Finally the <select> itself, with [onchange] event and the list of options
59 <select id={sel_id} onchange={changed}>
a28c6d71 »
2012-03-12 Adding selection callback.
60 {List.mapi(render_option, options)}
61 </>
62 }
63
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
64 /**
65 * Callback function for favorite number choice
66 *
67 * @param number Selected number
68 * @return Nothing, but as a side-effect changes the help text for the selection
69 * informing which number was chosen
70 */
71 // HINT: we will use those as callback functions to select function above.
72 // However, beware of putting those function inside the page function itself;
73 // page is used to generate the HTML response to the client and hence will
74 // live on the server. However, this callback function will be called every
75 // time selection is changed so we better make sure it's on the client
76 // (otherwise a round-trip to the server will occur with every selection
77 // change). To do that we can annote it with the 'client' keyword, however
78 // in this case it's not neccessary as Opa will put it on the client anyway.
79 function selected_num(int number) {
80 #selectNumMsg = <>You selected number: {number}</>
d00622b1 »
2012-03-12 Very basic demo of using SELECT tag in Opa.
81 }
82
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
83 /**
84 * Callback function for favorite color choice
85 *
86 * @param color Selected color
87 * @return Nothing, but as a side-effect changes the help text for the selection
88 * informing which color was chosen
89 */
90 function selected_color(string color) {
91 #selectColorMsg = <>You selected color: {color}</>
92 }
93
94 /**
95 * This is the main page. It's just a bunch of Bootstrap compatible XHTML markup,
96 * using the [select] function that we defined above.
97 */
d00622b1 »
2012-03-12 Very basic demo of using SELECT tag in Opa.
98 function page() {
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
99 list(int) numbers = [2, 3, 4, 5, 6, 7, 8, 9];
100 list(string) colors = ["Red", "Purple", "Pink", "Orange", "Yellow", "Green", "Blue"];
d00622b1 »
2012-03-12 Very basic demo of using SELECT tag in Opa.
101 <div class=container>
102 <form class=form-horizontal>
103 <legend>Simple selection demo with Opa</>
104 <fieldset>
105 <div class=control-group>
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
106 <label class=control-label for=select01>Your favorite number?</>
107 <div class=controls>
108 {select({id: "selectNum"}, numbers, selected_num)}
109 <p id=#selectNumMsg class=help-block>You did not make any selection</>
110 </>
111 </>
112 <div class=control-group>
113 <label class=control-label for=select01>Your favorite color?</>
d00622b1 »
2012-03-12 Very basic demo of using SELECT tag in Opa.
114 <div class=controls>
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
115 {select({id: "selectColor"}, colors, selected_color)}
116 <p id=#selectColorMsg class=help-block>You did not make any selection</>
d00622b1 »
2012-03-12 Very basic demo of using SELECT tag in Opa.
117 </>
118 </>
119 </>
120 </>
121 </>
122 }
123
3d2e2c1a »
2012-03-12 Adding docs for the Select HOWTO.
124 /**
125 * Finally, a simple one-page server
126 */
a28c6d71 »
2012-03-12 Adding selection callback.
127 Server.start(Server.http, {title: "Form selection in Opa", ~page});
Something went wrong with that request. Please try again.