Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

even newer component structure, with init and input functions

  • Loading branch information...
commit e8a8a3cd13f5d44a50c11deaa7116f9a16470695 1 parent ccdec0a
nordenmark authored
8 jsfw_docs/jsfw_docs.css
@@ -23,3 +23,11 @@ h2 {
23 23 h3 {
24 24 font-size: 12px;
25 25 }
  26 +
  27 +ul.dots {
  28 + margin-left: 20px;
  29 + list-style-type: disc;
  30 +}
  31 +ul.dots li {
  32 + margin-bottom: 10px;
  33 +}
12 jsfw_docs/jsfw_docs.html
@@ -38,7 +38,15 @@
38 38
39 39 <h3>HTML template (COMPONENT.html)</h3>
40 40 <div class="box" id="htmltemplate"></div>
41   - <p>This is the template used when creating a new component. <span class="code">%%COMPONENT%%</span> is then replaced by the name of the new component.
  41 + <p>This is the template used when creating a new component. <span class="code">%%COMPONENT%%</span> is then replaced by the name of the new component.</p>
  42 + <p>Support exists for a few special template tags and those are described below.</p>
  43 + <ul class="dots">
  44 + <li><code>&#123;&#123;toggle_button&#125;&#125;</code> - will be converted to a toggle button to pause/resume the automatic refreshing of a component (refreshing only happens if the javascript file implements the <code>refresh</code> function).</li>
  45 +
  46 + <li><code>&#123;&#123;input&#125;&#125;</code> - will be converted to a text input that allows you to send arbitrary Erlang terms to your component. These terms will eventually be handled by the component's Erlang module, more specifically, the <code>input/1</code> function. This text input should allow most Erlang terms.</li>
  47 + </ul>
  48 +
  49 +
42 50
43 51 <h3>Handle template (handle.html)</h3>
44 52 <div class="box" id="handletemplate"></div>
@@ -49,7 +57,7 @@
49 57 <p>This is the template used when creating a new component. <code>%%COMPONENT%%</code> is then replaced by the name of the new component. The JavaScript file needs to uphold this basic structure, with the variable declaration on the top level as well as the <code>init</code> function declaration and the (optional) <code>refresh</code> function declaration for automatic refreshing of the component. See how jQuery selectors are used to define where to put the JSON data?</p>
50 58 <h3>Erlang module (COMPONENT.erl)</h3>
51 59 <div class="box" id="erltemplate"></div>
52   - <p>This is the template used when creating a new component. <span class="code">%%COMPONENT%%</span> is then replaced by the name of the new component. Note how Erlang modules should return data that can be encoded to JSON (see more information further down).</p>
  60 + <p>This is the template used when creating a new component. <span class="code">%%COMPONENT%%</span> is then replaced by the name of the new component. Note how <code>get/0</code> and <code>get/1</code> should return data that can be encoded to JSON (see more information further down). <code>init/0</code> and <code>input/1</code> are optional. <code>init/0</code> is called when the module is loaded the first time or recompiled and is used for setup (such as registering a spawned process etc.). <code>input/1</code> is called whenever input is sent to the module with the help of the <code>&#123;&#123;input&#125;&#125;</code> template tag (see HTML documentation).</p>
53 61
54 62 <h3>Config file (component.config)</h3>
55 63 <div class="box">
2  jsfw_pid/handle.html
... ... @@ -1,6 +1,6 @@
1 1 <h1>Information about pid: <span id="pid"></span></h1>
2 2
3   -Send message to process: {{input}}
  3 +<p>Send message to process: {{message}}</p>
4 4
5 5
6 6 <table id="argcontainer" class="console">
2  jsfw_pid/jsfw_pid.erl
@@ -25,4 +25,4 @@ get(Arg) ->
25 25 [ [Key, Value] || {Key, Value} <- Info ].
26 26
27 27 input(Input) ->
28   - io:format("Received input: ~p~n", [Input]).
  28 + io:format("JSFW_PID.erl received input: ~p~n", [Input]).
1  second/component.config
... ... @@ -1 +0,0 @@
1   -[{displayname,"second"},{enabled,"true"}].
3  second/handle.html
... ... @@ -1,3 +0,0 @@
1   -<h1>Handle template for component: second</h1>
2   -
3   -Argument given: <span id="argcontainer"></span>
8 second/second.erl
... ... @@ -1,8 +0,0 @@
1   --module(second).
2   --export([get/0, get/1]).
3   -
4   -get() ->
5   - {'$link',<<"This is an example argument">>,<<"/second/3">>}.
6   -
7   -get(Arg) ->
8   - Arg.
1  simple/component.config
... ... @@ -0,0 +1 @@
  1 +[{displayname,"Simple"},{enabled,"true"}].
3  simple/handle.html
... ... @@ -0,0 +1,3 @@
  1 +<h1>Handle template for component: simple</h1>
  2 +
  3 +Argument given: <span id="argcontainer"></span>
0  second/second.css → simple/simple.css
File renamed without changes
17 simple/simple.erl
... ... @@ -0,0 +1,17 @@
  1 +-module(simple).
  2 +-export([get/0, get/1]).
  3 +
  4 +% -export([init/0]).
  5 +% -export([input/1]).
  6 +
  7 +get() ->
  8 + [{'$link',<<"This is an example argument">>,<<"/simple/3">>}].
  9 +
  10 +get(Arg) ->
  11 + Arg.
  12 +
  13 +% init() ->
  14 +% ok.
  15 +%
  16 +% input(Input) ->
  17 +% io:format("Component ~p received input: ~p~n", [simple, Input]).
2  second/second.html → simple/simple.html
... ... @@ -1,3 +1,3 @@
1   -<h2>second</h2>
  1 +<h2>simple</h2>
2 2
3 3 Click this example argument link: <span id="jsoncontainer"></span>
6 second/second.js → simple/simple.js
... ... @@ -1,8 +1,8 @@
1   -var second = new function() {
  1 +var simple = new function() {
2 2
3 3 // This function is called when the component is clicked in the menu
4 4 this.init = function() {
5   - fill_json("/json/second", $("#jsoncontainer"));
  5 + fill_json("/json/simple", $("#jsoncontainer"));
6 6 }
7 7
8 8 // This function is called when the component is automatically refreshed
@@ -12,6 +12,6 @@ var second = new function() {
12 12
13 13 // This function is called when an argument is clicked on the component's page
14 14 this.handle = function(arg) {
15   - fill_json("/json/second/" + arg, $("#argcontainer"));
  15 + fill_json("/json/simple/" + arg, $("#argcontainer"));
16 16 }
17 17 }
64 users/users.erl
... ... @@ -1,5 +1,8 @@
1 1 -module(users).
2   --export([get/0, get/1]).
  2 +-export([init/0, input/1, get/0, get/1]).
  3 +
  4 +% INTERNAL
  5 +-export([user_loop/1]).
3 6
4 7 -record(user, {
5 8 id,
@@ -8,37 +11,48 @@
8 11 age
9 12 }).
10 13
11   -add_user(ID, Name, Job, Age, Acc) ->
12   - [{ID, #user{name=Name,job=Job,age=Age}}|Acc].
13   -
14   -users() ->
15   -
16   - % Names = ["JOHNNY", "bill", "john", "eric", "kenneth", "mike"],
17   - % IDs = lists:seq(1, length(Names)),
18   - % Jobs = ["Carpenter", "Painter", "Bus driver", "Pilot", "Police", "Fire fighter"],
19   - % Ages = lists:seq(20,20+length(Names), 3),
20   - D1 = add_user(1, "Johnny", "Carpenter", 21, []),
21   - D2 = add_user(2, "Mike", "Police", 23, D1),
22   - D3 = add_user(3, "SARAH", "Student", 25, D2),
23   - D3.
24   -
  14 +init() ->
  15 + io:format("Init called!~n"),
  16 + case whereis(userserver) of
  17 + undefined ->
  18 + register(userserver, spawn(?MODULE, user_loop, [[]]));
  19 + _ ->
  20 + already_registered
  21 + end.
  22 +
  23 +
  24 +user_loop(Users) ->
  25 + receive
  26 + {From, listusers} ->
  27 + From ! Users,
  28 + user_loop(Users);
  29 + {_From, add, User} when is_atom(User) ->
  30 + BinUser = list_to_binary(atom_to_list(User)),
  31 + NewUsers = [BinUser|Users],
  32 + user_loop(NewUsers);
  33 + {_From, add, User} when is_list(User) ->
  34 + BinUser = list_to_binary(User),
  35 + NewUsers = [BinUser|Users],
  36 + user_loop(NewUsers)
  37 + end.
25 38
26 39 %% Table data is on the format
27 40 %% [[row1col1, row1col2, ...], [row2col1, row2col2, ...], ... ]
28 41 get() ->
29   - Users = users(),
30   - Table = [ [{'$link', list_to_binary(integer_to_list(ID)), list_to_binary("/users/" ++ integer_to_list(ID))}, list_to_binary(Rec#user.name)] || {ID, Rec} <- Users ],
31   - Table.
  42 + userserver ! {self(), listusers},
  43 + receive
  44 + Users ->
  45 + Table = [[U] || U <- Users],
  46 + Table
  47 + end.
32 48
33 49 %% Here we are given a user id as argument
34 50 get(Arg) ->
35 51 io:format("Arg: ~p~n", [Arg]),
36 52 Arg.
37 53
38   -%% [[row1elem1, row1elem2], []]
39   -% get_json(Arg) ->
40   -% Pid = jsfw_utility:arg_to_pid(Arg),
41   -% Info = erlang:process_info(Pid),
42   -% TableData = [[Key, Value] || {Key, Value} <- Info],
43   -% Table = [{<<"table">>, TableData}],
44   -% jsfw_json:encode(Table).
  54 +input(Input) ->
  55 + io:format("Received input:~p~n", [Input]),
  56 + userserver ! {self(), add, Input}.
  57 +
  58 +
3  users/users.html
... ... @@ -1,3 +1,6 @@
1 1 <h1>Users</h1>
2 2 {{toggle_button}}
  3 +
  4 +<p>Send input to component: {{input}}</p>
  5 +
3 6 <table id="jsoncontainer"></table>

0 comments on commit e8a8a3c

Please sign in to comment.
Something went wrong with that request. Please try again.