Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

[doc] book/hello_chat: improved version with author choice

  • Loading branch information...
commit 4ea614c31c33f83c605cf1a8a32c81dcde7730c9 1 parent 1b04fa6
François-Régis Sinot authored
View
1  doc/book/Makefile
@@ -9,6 +9,7 @@ ADOCDIR=/opt/local/etc/asciidoc/
EXAMPLES= \
hello_chat/hello_chat.exe \
+ hello_chat/hello_chat_author.exe \
hello_wiki/hello_wiki.exe \
hello_web_services/hello_wiki_rest.exe \
hello_web_services/hello_wiki_rest_client.exe \
View
83 doc/book/hello_chat/hello_chat_3.opa
@@ -1,83 +0,0 @@
-/**
- * {1 Network infrastructure}
- */
-
-/**
- * The type of messages sent by a client to the chatroom
- */
-type message = {author: string /**The name of the author (arbitrary string)*/
- ; text: string /**Content entered by the user*/}
-
-/**
- * The chatroom.
- */
-@publish room = Network.cloud("room"): Network.network(message)
-
-/**
- * {1 User interface}
- */
-
-/**
- * Update the user interface in reaction to reception of a message.
- *
- * This function is meant to be registered with [room] as a callback.
- * Its sole role is to display the new message in [#conversation].
- *
- * @param x The message received from the chatroom
- */
-user_update(x: message) =
- line = <div class="line">
- <div class="user">{x.author}:</div>
- <div class="message">{x.text}</div>
- </div>
- do Dom.transform([#conversation +<- line ])
- Dom.scroll_to_bottom(#conversation)
-
-/**
- * Broadcast text to the [room].
- *
- * Read the contents of [#entry], clear these contents and send the message to [room].
- *
- * @param author The name of the author. Will be included in the message broadcasted.
- */
-broadcast(author) =
- do Network.broadcast({~author text=Dom.get_value(#entry)}, room)
- Dom.clear_value(#entry)
-
-start(name) =
- Dom.transform([#body <-
- <div id=#conversation onready={_ -> do Network.add_callback(user_update, room); Dom.give_focus(#entry)}></div>
- <div id=#footer>
- <input id=#entry onnewline={_ -> broadcast(name)}/>
- <div class="button" onclick={_ -> broadcast(name)}>Post</div>
- </div>])
-
-/**
- * Ask the client to pick a name.
- *
- * @return The user interface, ready to be sent by the server to the client on connection.
- */
-init() =
- <>
- <div id=#header><div id=#logo></div></div>
- <div id=#body>
- Please pick a name:
- <input id=#name onnewline={_ -> start(Dom.get_value(#name))} />
- <button onclick={_ -> start(Dom.get_value(#name))}> Join </button>
- </div>
- </>
-
-/**
- * {1 Application}
- */
-
-/**
- * Main entry point.
- *
- * Construct an application called "Chat" (users will see the name in the title bar),
- * embedding statically the contents of directory "resources", using the global stylesheet
- * "resources/css.css" and the user interface defined in [start].
- */
-server = Server.one_page_bundle("Chat",
- [@static_resource_directory("resources")],
- ["resources/css.css"], init)
View
45 doc/book/hello_chat/hello_chat_2.opa → doc/book/hello_chat/hello_chat_author.opa
@@ -34,30 +34,49 @@ user_update(x: message) =
Dom.scroll_to_bottom(#conversation)
/**
- * Broadcast text to the [room].
+ * Inserts a small graphical component that displays an input and a button.
*
- * Read the contents of [#entry], clear these contents and send the message to [room].
+ * Reads the content of [#entry], clear this content, and call the [action] function on it.
*
- * @param author The name of the author. Will be included in the message broadcasted.
+ * @param title The text on the button.
+ * @param action The function called when clicking on the button (or pressing enter).
*/
-broadcast(author) =
- do Network.broadcast({~author text=Dom.get_value(#entry)}, room)
- Dom.clear_value(#entry)
+insert_input(title, action) =
+ f() = _ = action(Dom.get_value(#entry)); Dom.clear_value(#entry)
+ do Dom.transform([#footer <-
+ <input id=#entry onnewline={_ -> f()}/>
+ <div class="button" onclick={_ -> f()}>{ title }</div> ])
+ Dom.give_focus(#entry)
+
+/**
+ * Inserts the input that allows to post messages, broadcasting them to other clients.
+ */
+insert_post_input(author) =
+ broadcast(text) = Network.broadcast(~{author text}, room)
+ insert_input("Post", broadcast)
+
+/**
+ * Inserts the initial input that allows to choose the author's name.
+ *
+ * When the name is chosen, it inserts the normal post input,
+ * specialized to the given author name.
+ *
+ */
+insert_author_input() =
+ insert_input("Please pick a name", insert_post_input)
/**
* Build the user interface for a client.
*
- * Pick a random author name which will be used throughout the chat.
+ * Note: [onready] events are triggered on the browser when the elements are inserted in the page.
*
* @return The user interface, ready to be sent by the server to the client on connection.
*/
start() =
- <div id=#header><div id=#logo></div>Your name: <input id=#name /></div>
- <div id=#conversation onready={_ -> Network.add_callback(user_update, room)}></div>
- <div id=#footer>
- <input id=#entry onnewline={_ -> broadcast(Dom.get_value(#name))}/>
- <div class="button" onclick={_ -> broadcast(Dom.get_value(#name))}>Post</div>
- </div>
+ <div id=#header><div id=#logo></div></div>
+ <div id=#conversation onready={_ -> Network.add_callback(user_update, room)}></div>
+ <div id=#footer onready={_ -> insert_author_input()}>
+ </div>
/**
* {1 Application}
View
2  doc/book/hello_chat/resources/css.css
@@ -176,6 +176,7 @@ pre {
margin:5px 0;
padding:5px 15px;
font-size:1.2em;
+ cursor: pointer;
}
.button {display: inline-block;}
@@ -206,7 +207,6 @@ input#entry {
#conversation {
background: none repeat scroll 0% 0% transparent;
margin: 5px 5px 60px 5px;
- width: 100%;
}
.line {
Please sign in to comment.
Something went wrong with that request. Please try again.