Nitrogen, an Erlang web application library/framework Part 3

Slide 28: What is a Nitrogen Action?

I'm feeling increasingly perturnbed by these form elements used outside a form. Can you tell I'm an HTML newbie? After implementing the example and refreshing the page, the alert fires immediately, which surprised me some. I'm going to guess that the submit button will be effectively a refresh.

Nope. Apparently it's a no-op. The alert didn't fire on clicking Submit. I'm going to try wireshark on the loopback interface to see if there was any browser traffic.

OK; it seems neither the submit button nor the alert generates any activity from the browser.

Slide 29: What is a Nitrogen Action?

So "alert('hello');" is the same thing as #alert { text="hello" }.

Does page source differ? Except for generated names, no. Something I didn't know before: when Firefox does a "save page as" it stores the referenced javascript files and alters the page to refer to the store version. Very useful.

Slide 30: Wiring an action

First use of #effect. pulsate fades the element in and out four times, then fades it in permanently.

Slide 31: Conditional Actions with #event{}

I infer that if I wanted the alert to occur when "Submit" in the previous examples was clicked, then it should have been attached to a click event. First, the example as shown.

OK, let's associate the alert with the click:

body() ->
 wf:wire(mybutton, #event {
 type=click,
 actions=#alert { text="hello" }
 }),
 [
 #button { id = mybutton, text = "Submit" }
 ].

Yup, that worked.

Slide 32: Triggers and Targets

I found this opaque until running the example. Here's how I think of it:

• Events Have Types, e.g., "click"


• Event Types Have Triggers


• Triggers Refer to Elements

Thus, an event of a specific type must happen within a specific element.

• Events Have Actions


• Actions Have Targets


• Targets Refer to Elements

Slide 33: Triggers and Targets

Important summary.

Slide 37: My First postback

Message sent back to ("queued") to server.

Slide 38: Postback Shortcuts

Different elements, different implicit events.

Slide 40: More Event Examples

"OtherEvent" is misspelled as "MyEvent" in the example. Should look like:

event(my_click_event) ->
    ?PRINT({click, now()});
event(OtherEvent) ->
    ?PRINT({other, OtherEvent, now()}).

PROBLEM: only the mouseout event is generating a postback? Examining the page source, only the mouseout event appears to be defined. What am I doing wrong?

%% -*- mode: nitrogen -*-
-module (my_page).
-compile(export_all).
-include_lib("nitrogen/include/wf.hrl").
-include("records.hrl").

main() -> #template { file="./site/templates/bare.html" }.

title() -> "Hello from my_page.erl!".

body() ->
    wf:wire(mybutton, [
 #event { type=mouseover, postback=my_mouseover_event }
 #event { type=click, postback=my_click_event }
 #event { type=mouseout, postback=my_mouseout_event }
    ]),
    [
 #button { id=mybutton, text="Submit" }
    ].

event(my_click_event) ->
    ?PRINT({click, now()});
event(OtherEvent) ->
    ?PRINT({other, OtherEvent, now()}).