From bb17b109843c3ba71d5e33583ec1a483243fd752 Mon Sep 17 00:00:00 2001 From: Vincent Balat Date: Thu, 21 Dec 2023 16:40:00 +0100 Subject: [PATCH] Update version 7 from dev --- tutos/7.1/manual/basics.wiki | 58 +- .../manual/files/tutorial/client-server.svg | 684 ++++++++++++++++++ 2 files changed, 735 insertions(+), 7 deletions(-) create mode 100644 tutos/7.1/manual/files/tutorial/client-server.svg diff --git a/tutos/7.1/manual/basics.wiki b/tutos/7.1/manual/basics.wiki index 6b15fd05..3765508c 100644 --- a/tutos/7.1/manual/basics.wiki +++ b/tutos/7.1/manual/basics.wiki @@ -536,10 +536,24 @@ PPX annotations allow to split the code into these two programs: Same for {{{module%shared}}}, {{{open%shared}}}, {{{type%shared}}} etc. +@@class="centered"@@{{@@class="img-col-width-400"@@files/tutorial/client-server.svg|Client-server build system}} + ===Client values=== -Client values can be declared within server or shared code as - {{{[%client[ ( : ) ]}}}. -The type annotation is almost always required. +Fragments of client code can be included in server (or shared) sections. + +Example: + +< ... ]] [ ... ] +>> + +The syntax is {{{[%client ( : ) }}}. +Type annotation is almost always required. + +These client fragments can be manipulated as server side OCaml values: +<> If such section is reached while generating a page on server side, the client-side code will be executed once the page is displayed. @@ -554,14 +568,13 @@ If such section is reached during module initialization on the server (global client section), it will be executed on client side everytime a new client side program is launched. - The tutorial [[tutowidgets|Client-Server Widgets]] shows how client values can be manipulated -on client side. +on server side. ===Injections=== -Server side variables can be accessed (injected) in client code by prefixing +Server side values can be injected in client code by prefixing them with {{{~%}}} as in this example: <> The value will automatically be sent with the page by Eliom. +It is possible to combine injections and client-values: +<> +<> + +<
> + ===Example=== This section shows a typical example of client-server code: call a function when user clicks on a page element. @@ -735,7 +779,7 @@ Attributes like {{{a_onclick}}} in module {{{Eliom_content.Html.D}}} or {{{F}}} take a client side function as parameter: < ... ]] [ ... ] +button ~a:[a_onclick [%client fun ev -> ... ]] [ ... ] >> Module {{{Lwt_js_events}}} of Js_of_ocaml defines a way to bind browser events diff --git a/tutos/7.1/manual/files/tutorial/client-server.svg b/tutos/7.1/manual/files/tutorial/client-server.svg new file mode 100644 index 00000000..559552e2 --- /dev/null +++ b/tutos/7.1/manual/files/tutorial/client-server.svg @@ -0,0 +1,684 @@ + + + + + + + + + + + + + + + + + + + + + + + + + let%server + + + + + + + + let%client + + + + + + + + let%shared + + + + + + + + + let%server + + + + + + + + let%shared + + + + + + + + + let%client + + + + + + + + let%shared + + + + + + + + + + + + + + + ppx + ppx + + client-server type-checking + ocamlopt + js_of_ocaml + .cmxs + .js + .eliom + +