Hi everyone,
Guess what, JavaScript is hot again, if you wanna be a cool kid, you got use it, do some and let everybody know
You’re on it. Lucky you’all I’ve been checking out what
you have to do to be a fashionable BSP developer.
First you want a JavaScript to be easiest to program, and
you want more advanced functions. Then you just need
prototype (http://prototype.conio.net/).
It brings JavaScript shortcuts and function
like $(myId) instead of document. getElementbyId(myId),
iterator functions, full browser independant Ajax handler and more….
Another good one would be script.aculo.us more UI oriented (http://script.aculo.us/).
If you want light pages you got a problem, those library
can be as big as 60 k, that’s when JSMIN comes handy
(http://www.crockford.com/javascript/jsmin.html ).
It can divide your script size by at least 2. And if it is
still too big, some clients like IE, Firefox or Opera
handle gzip compression for your js and css files.
Now you have to forget everything about XML, XML is bad.
Satan is behind anyway. Look at JSON then, because you
always wanted, to have a way to describe an object in a
text and parse directly into a javaScript Object right
???
A JSON is like :
{
“myobject” : { “id” : ”0000”, “name” : “john”}
}[/code]
In XML you would do :
[/code]
With the JSON parser script (http://www.json.org/json.js),
you will just do as simple as :
Var json_txt = '{';
json_txt += '"myobject" : { "id" : "0000", "name" : "john"}';
json_txt += '}';
if you use the parser, it will and you will have a nice
JavaScript object.
Here is a little sample from what you can do with all that
(very basic, but it shows you how it works) :
Create 2 pages in a BSP application.
Display.htm et data.htm.
In display.htm just do a basic page
[/code]
json.js is the json parser script http://www.json.org/json.js
prototype.js http://prototype.conio.net/dist/prototype-1.4.0.tar.gz
my_handler.js (script to handle the page that you will do
later)
in data.htm
Gather some data from a random table and create some json
text like this :
<%@page language="abap" %>
<%
DATA I_dude TYPE zdude.
data w_dude type line of Zdude.
data w_str type string.
CLEAR I_dude.
*get data from the table I_dude
select * into table i_dide
from zdude.
*create the json text into the string w_str
concatenate
w_str '{ "dude": ['
into w_str.
data i type i.
i = 0.
loop at i_bdude into w_dude.
if i gt 0.
concatenate
w_str ','
into w_str.
endif.
concatenate
w_str '{'
'"objid":"' w_dude-objid '",'
'"name":"' w_dude-name '"'
'}'
into w_str.
i = i + 1.
endloop.
concatenate
w_str '] }'
into w_str.
*display the string w_str
%>
<%= w_str%>
You will construct a text that describe an object dude
from the table zdude .
Now create a mime object called my_handler.js
// a controller object that help us with a nice window to display a log
var Controller =
Controller.console.innerHTML += (message + "
");
}
};
// what you execute when you run the page display.htm (look at the body tag)
function Initialise() {
var url = 'data.htm';
var pars=””;
//call the data.htm page to get our json object Ajax object comes from prototype
var myAjax = new Ajax.Request( url, { method: 'post', parameters: pars, onComplete: showResponse });
}
function showResponse(req) {
var myObject = JSON.parse(req.responseText);
displayDude(myObject);
}
function displayDude(dude) {
//$ is cool isn’t it
var divDude = $(“dudeid”);
divDude.innerHtml = « » ;
//each comes from prototypes too
dude.besoin.each(function(d){ divDude.innerHtml += d.name})
}[/code]
Save everything and you will have to your first AJAX JSON
application
Hope you enjoyed the ride and that I’ve been clear enough
!!
Read, comment, say something
Have great Day
Quentin.
Web site the I use to build that post :
AJAX tutorials :
http://snyke.net/blog/2006/03/25/site-design-using-prototype/
http://snyke.net/blog/2006/02/05/ajax-design-patterns/
JSON related :
www.json.org
http://www.sergiopereira.com/articles/prototype.js.html
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.