Use ajax to display the Lotus Notes view's javasript class library-notesview2

I. Introduction

Notesview2 is an open-source Ajax component developed using JavaScript. It allows the Lotus Notes view to be displayed in the form of Ajax. It not only provides a beautiful interface, but also provides a good user experience, next we will start to study her.

You can download to her http://www.openntf.org/projects/pmt.nsf/ProjectLookup/NotesView2 here

The latest version is 2.1.7. There are two files after the download, one is the NSF database and the other is the document corresponding to the version. The document briefly introduces how to use the library, he didn't explain his principles too much.

The following is the view style displayed by the database.

II:Notesview2Library-like Analysis

There are three JS script libraries, notesview2lang_en, jsutility, and jsnotesview2.1.7.

1. notesview2lang_en mainly defines the notesview2lang object in JSON format, mainly providing the status bar, tooltip, prompt, and some message prompts.CodeAs follows:

VaR notesview2lang = {

Status_ready: "ready ",

Status_loading_data: "retrieving data ...",

Status_selected_documents: "$ document (s) selected ",

Status_jumpto_fail: "cocould not find '$ '",

Status_jumpto_success: "found '$ '",

Tooltip_remove_sort: "Remove sort ",

Tooltip_sort_ascending: "Sort Ascending ",

Tooltip_sort_descending: "Sort Descending ",

Tooltip_expand_category: "Expand entry ",

Tooltip_collapse_category: "collapse entry ",

Tooltip_page_up: "page up ",

Tooltip_page_down: "Page down ",

Tooltip_scroll_up: "scroll up ",

Tooltip_scroll_down: "scroll down ",

Prompt_jumpto: "Enter the text to jump :",

Prompt_search_input: "Search :",

Prompt_search_go: "Go ",

Prompt_clear_search: "clear results ",

Prompt_query_builder: "Query Builder ",

Msg_search_results: "$ result (s) found ",

Msg_db_not_indexed: "database is not full-text indexed (search may be slow )",

Msg_db_is_indexed: "database is full-text indexed ",

Msg_index_test_failed: "cannot determine status of full-text index ",

Msg_startkey_and_restricttocategory_error: "A Start key cannot be set when the view is restricted to a single category"

}

2. jsutility mainly includes converting XML files into JS objects and some native JavaScript type extensions. The following functions are available.

// Mainly converts XML documents to JS objects

1). Function loadxmlrequest (URL, callback, callbackcontext, type, postdata );

2). Function xmltoobject (xmldoc, getattributes, tolowercase );

// Extensions of JavaScript native types

3). String. Prototype. Trim = function (C, T );

4). String. Prototype. Left = function (v );

5). String. Prototype. leftback = function (s );

6). String. Prototype. Right = function (v );

7). String. Prototype. rightback = function (s );

8). array. Prototype. Contains = function (v );

9). Date. Prototype. Adjust = function (yr, Mn, Dy, HR, mi, SE );

// Mainly for non-ie browsers such as Firefox

10). htmlelement. Prototype. insertadjacentelement = function (where, parsednode );

11). htmlelement. Prototype. insertadjacenthtml = function (where, htmlstr );

12). htmlelement. Prototype. insertadjacenttext = function (where, txtstr );

13). Function isnotanumber (V)

14). Sleep = function (secs, agenturlbase );

3. jsnotesview2.1.7 this library is the core library, and most of the functions are in this library. The library contains these four objects, each of which has some functions.

1). Function notesview2 (dB, name );

2). Function notesviewnavigator2 (View );

3). Function notesviewentry2 (XML, view );

4). Function notesviewcolumn2 (COL );

 

Iii. Application and Principle Analysis

1. Copy design elements such as the database proxy, script library, and CSS.

2. A Div ("viewholder") container must be added to the $ viewtemplatedefault form to render the attempt.

3. Add the following information to the HTML header: db_name and view_name

"<SCRIPT>" +

"Var db_name = '/" + @ replacesubstring (@ webdbname; "'"; "\ '") + "';" +

"Var view_name = '" + @ replacesubstring (@ subset (@ viewtitle; 1 );"'":"\\";"\\'": "\\\\") + "';" +

"Var restrict_to = '" + @ replacesubstring (restricstring; "'": "\"; "\ '": "\") + "';" +

"</SCRIPT>" +

"<LINK rel = \" stylesheet \ "type = \" text/CSS \ "href = \"/"+ @ webdbname +"/"+ sheet +" \ ">"

4. In the JS header, the main purpose is to use the switching sample and define the oview

VaR oview;

Function changestyle (){

VaR I = Document. getelementbyid ('stylechanger'). selectedindex;

VaR sheets = new array ("none.css", "plain.css", "pretty.css ");

Document. Cookie = "viewstyle =" + sheets [I];

VaR S = Document. Location. href;

If (S. indexof ("& cache = ")! =-1) S = S. Left ("& cache = ");

Document. Location = S + "& cache =" + math. Random ();

}

Function changecategory (){

VaR o = Document. getelementbyid ('catchanger ');

VaR cat = O. Options [O. selectedindex]. text;

If (O. selectedindex = 0) cat = "";

If (CAT ){

Document. Location. href = db_name + '/' + view_name + '? OpenView & restricttocategory = '+ escape (CAT );

} Else {

Document. Location. href = db_name + '/' + view_name + '? Openview ';

}

}

5. Add the following code to onload:

// Create a noteview2 object

Oview = new notesview2 (db_name, view_name );

// Set some basic settings

Oview. hideselectionmargin = true;

Oview. OpenDocument = function (viewentry ){

VaR cnow = new date ();

VaR urlstring = "jushtnm2 /? Openagent & jmdocid = 0000 "+ viewentry. noteid +" '); & "+ cnow. valueof ();

VaR winname = "win" + newwinname;

VaR winwidth = eval (screen. availWidth-10 );

VaR winheight = eval (screen. availHeight-50 );

VaR jwfdoc = Window. open (urlstring, winname, 'top = 1, Left = 1, fullscreen = No, menubar = No, status, scrollbars = Yes, toolbar = No, resizable, height = '+ winheight +', width = '+ winwidth );

Jwfdoc. Focus ();

}

Oview. actionbuttondisplay = 3;

Oview. linestoshow = 31;

Oview. linestoget = 36;

Oview. restricttocategory = restrict_to;

// Add the button above the attempt. You can customize the button to add it here

Oview. addaction ("show all", function () {oview. expandallentries ()});

Oview. addaction ("", function () {oview. collapseallentries ()});

Oview. addaction ("refresh", function () {oview. Refresh ()});

Oview. addaction ("Jump to", function () {oview. jumpto ()});

Oview. addaction ("", function () {oview. togglesearchbar ();});

Create_object_array ()

// Use the render method to render the attempt. In the render method, use? The readdesign command is used to obtain the attempted XML document, and then call loadxmlrequest, xmltoobject, and other methods for parsing. After parsing, The drawview () method is used to dynamically draw the attempt.

Oview. Render (document. getelementbyid ('viewholder '));

6. Operation on the object attempted

Use O. Navigator. Selected to obtain an array of selected notesviewentry2 objects

Use the methods O. Refresh (), O. expandallentries (), O. collaspseallentries (), O. jumpto (), O. togglesearchbar () to operate buttons on the corresponding view.

7. notesviewentry2 class:

Attribute (both are read-only)

. Unid: the document's unid

. Position: string, the position of the object in the view, EX: 1.2.3.1

. Noteid: string, the Note ID of the object

. Children: String, number of children of the object

. Descendants: String, number of object descendants

. Siblings: String, number of physical brothers

. Isresponse: String, whether it is a document

. Indent: the level of the document in the view. Use the getlevel () function to obtain accurate results.

. Columnvalues: a hash of all column values for this entry, access using column number as a string (0 based) EX: var columnthreevalue = entry. columnvalues ['2']

. Iscategory: Boolean indicates the classification tag when the object is being created.

. View: a handle to the notesview2 object this entry is a part

. Isexpanded: Boolean indicates whether the object is expanded currently.

Function:

Getlevel (): Number, returns the level of the document in the attempt

8. If you want to use the search function, you can run the agtsearchview and agtisdbindexed proxies.

9. The above is only a preliminary study. I will write it later.

Download notesview2

I. Introduction

Notesview2 is an open-source Ajax component developed using JavaScript. It allows the Lotus Notes view to be displayed in the form of Ajax. It not only provides a beautiful interface, but also provides a good user experience, next we will start to study her.

You can download to her http://www.openntf.org/projects/pmt.nsf/ProjectLookup/NotesView2 here

The latest version is 2.1.7. There are two files after the download, one is the NSF database and the other is the document corresponding to the version. The document briefly introduces how to use the library, he didn't explain his principles too much.

The following is the view style displayed by the database.

II:Notesview2Library-like Analysis

There are three JS script libraries, notesview2lang_en, jsutility, and jsnotesview2.1.7.

1. notesview2lang_en mainly defines the notesview2lang object in JSON format, mainly providing the status bar, tooltip, prompt, and some message prompts. The Code is as follows:

VaR notesview2lang = {

Status_ready: "ready ",

Status_loading_data: "retrieving data ...",

Status_selected_documents: "$ document (s) selected ",

Status_jumpto_fail: "cocould not find '$ '",

Status_jumpto_success: "found '$ '",

Tooltip_remove_sort: "Remove sort ",

Tooltip_sort_ascending: "Sort Ascending ",

Tooltip_sort_descending: "Sort Descending ",

Tooltip_expand_category: "Expand entry ",

Tooltip_collapse_category: "collapse entry ",

Tooltip_page_up: "page up ",

Tooltip_page_down: "Page down ",

Tooltip_scroll_up: "scroll up ",

Tooltip_scroll_down: "scroll down ",

Prompt_jumpto: "Enter the text to jump :",

Prompt_search_input: "Search :",

Prompt_search_go: "Go ",

Prompt_clear_search: "clear results ",

Prompt_query_builder: "Query Builder ",

Msg_search_results: "$ result (s) found ",

Msg_db_not_indexed: "database is not full-text indexed (search may be slow )",

Msg_db_is_indexed: "database is full-text indexed ",

Msg_index_test_failed: "cannot determine status of full-text index ",

Msg_startkey_and_restricttocategory_error: "A Start key cannot be set when the view is restricted to a single category"

}

2. jsutility mainly includes converting XML files into JS objects and some native JavaScript type extensions. The following functions are available.

// Mainly converts XML documents to JS objects

1). Function loadxmlrequest (URL, callback, callbackcontext, type, postdata );

2). Function xmltoobject (xmldoc, getattributes, tolowercase );

// Extensions of JavaScript native types

3). String. Prototype. Trim = function (C, T );

4). String. Prototype. Left = function (v );

5). String. Prototype. leftback = function (s );

6). String. Prototype. Right = function (v );

7). String. Prototype. rightback = function (s );

8). array. Prototype. Contains = function (v );

9). Date. Prototype. Adjust = function (yr, Mn, Dy, HR, mi, SE );

// Mainly for non-ie browsers such as Firefox

10). htmlelement. Prototype. insertadjacentelement = function (where, parsednode );

11). htmlelement. Prototype. insertadjacenthtml = function (where, htmlstr );

12). htmlelement. Prototype. insertadjacenttext = function (where, txtstr );

13). Function isnotanumber (V)

14). Sleep = function (secs, agenturlbase );

3. jsnotesview2.1.7 this library is the core library, and most of the functions are in this library. The library contains these four objects, each of which has some functions.

1). Function notesview2 (dB, name );

2). Function notesviewnavigator2 (View );

3). Function notesviewentry2 (XML, view );

4). Function notesviewcolumn2 (COL );

 

Iii. Application and Principle Analysis

1. Copy design elements such as the database proxy, script library, and CSS.

2. A Div ("viewholder") container must be added to the $ viewtemplatedefault form to render the attempt.

3. Add the following information to the HTML header: db_name and view_name

"<SCRIPT>" +

"Var db_name = '/" + @ replacesubstring (@ webdbname; "'"; "\ '") + "';" +

"Var view_name = '" + @ replacesubstring (@ subset (@ viewtitle; 1 );"'":"\\";"\\'": "\\\\") + "';" +

"Var restrict_to = '" + @ replacesubstring (restricstring; "'": "\"; "\ '": "\") + "';" +

"</SCRIPT>" +

"<LINK rel = \" stylesheet \ "type = \" text/CSS \ "href = \"/"+ @ webdbname +"/"+ sheet +" \ ">"

4. In the JS header, the main purpose is to use the switching sample and define the oview

VaR oview;

Function changestyle (){

VaR I = Document. getelementbyid ('stylechanger'). selectedindex;

VaR sheets = new array ("none.css", "plain.css", "pretty.css ");

Document. Cookie = "viewstyle =" + sheets [I];

VaR S = Document. Location. href;

If (S. indexof ("& cache = ")! =-1) S = S. Left ("& cache = ");

Document. Location = S + "& cache =" + math. Random ();

}

Function changecategory (){

VaR o = Document. getelementbyid ('catchanger ');

VaR cat = O. Options [O. selectedindex]. text;

If (O. selectedindex = 0) cat = "";

If (CAT ){

Document. Location. href = db_name + '/' + view_name + '? OpenView & restricttocategory = '+ escape (CAT );

} Else {

Document. Location. href = db_name + '/' + view_name + '? Openview ';

}

}

5. Add the following code to onload:

// Create a noteview2 object

Oview = new notesview2 (db_name, view_name );

// Set some basic settings

Oview. hideselectionmargin = true;

Oview. OpenDocument = function (viewentry ){

VaR cnow = new date ();

VaR urlstring = "jushtnm2 /? Openagent & jmdocid = 0000 "+ viewentry. noteid +" '); & "+ cnow. valueof ();

VaR winname = "win" + newwinname;

VaR winwidth = eval (screen. availWidth-10 );

VaR winheight = eval (screen. availHeight-50 );

VaR jwfdoc = Window. open (urlstring, winname, 'top = 1, Left = 1, fullscreen = No, menubar = No, status, scrollbars = Yes, toolbar = No, resizable, height = '+ winheight +', width = '+ winwidth );

Jwfdoc. Focus ();

}

Oview. actionbuttondisplay = 3;

Oview. linestoshow = 31;

Oview. linestoget = 36;

Oview. restricttocategory = restrict_to;

// Add the button above the attempt. You can customize the button to add it here

Oview. addaction ("show all", function () {oview. expandallentries ()});

Oview. addaction ("", function () {oview. collapseallentries ()});

Oview. addaction ("refresh", function () {oview. Refresh ()});

Oview. addaction ("Jump to", function () {oview. jumpto ()});

Oview. addaction ("", function () {oview. togglesearchbar ();});

Create_object_array ()

// Use the render method to render the attempt. In the render method, use? The readdesign command is used to obtain the attempted XML document, and then call loadxmlrequest, xmltoobject, and other methods for parsing. After parsing, The drawview () method is used to dynamically draw the attempt.

Oview. Render (document. getelementbyid ('viewholder '));

6. Operation on the object attempted

Use O. Navigator. Selected to obtain an array of selected notesviewentry2 objects

Use the methods O. Refresh (), O. expandallentries (), O. collaspseallentries (), O. jumpto (), O. togglesearchbar () to operate buttons on the corresponding view.

7. notesviewentry2 class:

Attribute (both are read-only)

. Unid: the document's unid

. Position: string, the position of the object in the view, EX: 1.2.3.1

. Noteid: string, the Note ID of the object

. Children: String, number of children of the object

. Descendants: String, number of object descendants

. Siblings: String, number of physical brothers

. Isresponse: String, whether it is a document

. Indent: the level of the document in the view. Use the getlevel () function to obtain accurate results.

. Columnvalues: a hash of all column values for this entry, access using column number as a string (0 based) EX: var columnthreevalue = entry. columnvalues ['2']

. Iscategory: Boolean indicates the classification tag when the object is being created.

. View: a handle to the notesview2 object this entry is a part

. Isexpanded: Boolean indicates whether the object is expanded currently.

Function:

Getlevel (): Number, returns the level of the document in the attempt

8. If you want to use the search function, you can run the agtsearchview and agtisdbindexed proxies.

9. The above is only a preliminary study. I will write it later.

Download notesview2