Permalink
Browse files

even newer component structure, with init and input functions

  • Loading branch information...
1 parent ccdec0a commit e8a8a3cd13f5d44a50c11deaa7116f9a16470695 @nordenmark committed Dec 19, 2011
View
8 jsfw_docs/jsfw_docs.css
@@ -23,3 +23,11 @@ h2 {
h3 {
font-size: 12px;
}
+
+ul.dots {
+ margin-left: 20px;
+ list-style-type: disc;
+}
+ul.dots li {
+ margin-bottom: 10px;
+}
View
12 jsfw_docs/jsfw_docs.html
@@ -38,7 +38,15 @@
<h3>HTML template (COMPONENT.html)</h3>
<div class="box" id="htmltemplate"></div>
- <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>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>
+ <p>Support exists for a few special template tags and those are described below.</p>
+ <ul class="dots">
+ <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>
+
+ <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>
+ </ul>
+
+
<h3>Handle template (handle.html)</h3>
<div class="box" id="handletemplate"></div>
@@ -49,7 +57,7 @@
<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>
<h3>Erlang module (COMPONENT.erl)</h3>
<div class="box" id="erltemplate"></div>
- <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>
+ <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>
<h3>Config file (component.config)</h3>
<div class="box">
View
2 jsfw_pid/handle.html
@@ -1,6 +1,6 @@
<h1>Information about pid: <span id="pid"></span></h1>
-Send message to process: {{input}}
+<p>Send message to process: {{message}}</p>
<table id="argcontainer" class="console">
View
2 jsfw_pid/jsfw_pid.erl
@@ -25,4 +25,4 @@ get(Arg) ->
[ [Key, Value] || {Key, Value} <- Info ].
input(Input) ->
- io:format("Received input: ~p~n", [Input]).
+ io:format("JSFW_PID.erl received input: ~p~n", [Input]).
View
1 second/component.config
@@ -1 +0,0 @@
-[{displayname,"second"},{enabled,"true"}].
View
3 second/handle.html
@@ -1,3 +0,0 @@
-<h1>Handle template for component: second</h1>
-
-Argument given: <span id="argcontainer"></span>
View
8 second/second.erl
@@ -1,8 +0,0 @@
--module(second).
--export([get/0, get/1]).
-
-get() ->
- {'$link',<<"This is an example argument">>,<<"/second/3">>}.
-
-get(Arg) ->
- Arg.
View
1 simple/component.config
@@ -0,0 +1 @@
+[{displayname,"Simple"},{enabled,"true"}].
View
3 simple/handle.html
@@ -0,0 +1,3 @@
+<h1>Handle template for component: simple</h1>
+
+Argument given: <span id="argcontainer"></span>
View
0 second/second.css → simple/simple.css
File renamed without changes.
View
17 simple/simple.erl
@@ -0,0 +1,17 @@
+-module(simple).
+-export([get/0, get/1]).
+
+% -export([init/0]).
+% -export([input/1]).
+
+get() ->
+ [{'$link',<<"This is an example argument">>,<<"/simple/3">>}].
+
+get(Arg) ->
+ Arg.
+
+% init() ->
+% ok.
+%
+% input(Input) ->
+% io:format("Component ~p received input: ~p~n", [simple, Input]).
View
2 second/second.html → simple/simple.html
@@ -1,3 +1,3 @@
-<h2>second</h2>
+<h2>simple</h2>
Click this example argument link: <span id="jsoncontainer"></span>
View
6 second/second.js → simple/simple.js
@@ -1,8 +1,8 @@
-var second = new function() {
+var simple = new function() {
// This function is called when the component is clicked in the menu
this.init = function() {
- fill_json("/json/second", $("#jsoncontainer"));
+ fill_json("/json/simple", $("#jsoncontainer"));
}
// This function is called when the component is automatically refreshed
@@ -12,6 +12,6 @@ var second = new function() {
// This function is called when an argument is clicked on the component's page
this.handle = function(arg) {
- fill_json("/json/second/" + arg, $("#argcontainer"));
+ fill_json("/json/simple/" + arg, $("#argcontainer"));
}
}
View
64 users/users.erl
@@ -1,5 +1,8 @@
-module(users).
--export([get/0, get/1]).
+-export([init/0, input/1, get/0, get/1]).
+
+% INTERNAL
+-export([user_loop/1]).
-record(user, {
id,
@@ -8,37 +11,48 @@
age
}).
-add_user(ID, Name, Job, Age, Acc) ->
- [{ID, #user{name=Name,job=Job,age=Age}}|Acc].
-
-users() ->
-
- % Names = ["JOHNNY", "bill", "john", "eric", "kenneth", "mike"],
- % IDs = lists:seq(1, length(Names)),
- % Jobs = ["Carpenter", "Painter", "Bus driver", "Pilot", "Police", "Fire fighter"],
- % Ages = lists:seq(20,20+length(Names), 3),
- D1 = add_user(1, "Johnny", "Carpenter", 21, []),
- D2 = add_user(2, "Mike", "Police", 23, D1),
- D3 = add_user(3, "SARAH", "Student", 25, D2),
- D3.
-
+init() ->
+ io:format("Init called!~n"),
+ case whereis(userserver) of
+ undefined ->
+ register(userserver, spawn(?MODULE, user_loop, [[]]));
+ _ ->
+ already_registered
+ end.
+
+
+user_loop(Users) ->
+ receive
+ {From, listusers} ->
+ From ! Users,
+ user_loop(Users);
+ {_From, add, User} when is_atom(User) ->
+ BinUser = list_to_binary(atom_to_list(User)),
+ NewUsers = [BinUser|Users],
+ user_loop(NewUsers);
+ {_From, add, User} when is_list(User) ->
+ BinUser = list_to_binary(User),
+ NewUsers = [BinUser|Users],
+ user_loop(NewUsers)
+ end.
%% Table data is on the format
%% [[row1col1, row1col2, ...], [row2col1, row2col2, ...], ... ]
get() ->
- Users = users(),
- 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 ],
- Table.
+ userserver ! {self(), listusers},
+ receive
+ Users ->
+ Table = [[U] || U <- Users],
+ Table
+ end.
%% Here we are given a user id as argument
get(Arg) ->
io:format("Arg: ~p~n", [Arg]),
Arg.
-%% [[row1elem1, row1elem2], []]
-% get_json(Arg) ->
-% Pid = jsfw_utility:arg_to_pid(Arg),
-% Info = erlang:process_info(Pid),
-% TableData = [[Key, Value] || {Key, Value} <- Info],
-% Table = [{<<"table">>, TableData}],
-% jsfw_json:encode(Table).
+input(Input) ->
+ io:format("Received input:~p~n", [Input]),
+ userserver ! {self(), add, Input}.
+
+
View
3 users/users.html
@@ -1,3 +1,6 @@
<h1>Users</h1>
{{toggle_button}}
+
+<p>Send input to component: {{input}}</p>
+
<table id="jsoncontainer"></table>

0 comments on commit e8a8a3c

Please sign in to comment.