Difference between revisions of "MyPortal Development guide"
m |
Wikicatglobe (talk | contribs) |
||
| (21 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | == Introduction == | + | <accesscontrol>Main:MyGroup</accesscontrol> |
| + | [[Category:Personalization]] | ||
| + | |||
| + | == Introduction == | ||
The My Portal page is your own personalized view of what goes on in the Catglobe system that is interesting to you. | The My Portal page is your own personalized view of what goes on in the Catglobe system that is interesting to you. | ||
| − | + | More information about My Portal is available [[My_portal|here]]. | |
| − | == How to make user defined elements<br> == | + | == How to make user defined elements<br> == |
A user defined element as its name is the one you can put anything you want. | A user defined element as its name is the one you can put anything you want. | ||
| − | [[Image:MyPortal - User-defined.jpg]] <br> | + | [[Image:MyPortal - User-defined.jpg]] <br> |
An element contains 2 features: | An element contains 2 features: | ||
*HTML content: input inside Detailed decsription tab's HTML editor. It is required to show the element in MyPortal page (empty content will end up in not displaying anything) | *HTML content: input inside Detailed decsription tab's HTML editor. It is required to show the element in MyPortal page (empty content will end up in not displaying anything) | ||
| − | *Javascript: input inside Detailed description tab's script mode. It is used to manipulate the way the element will act, it can connect to registered web services or change the HTML content dynamically. jQuery is also supported, which | + | *Javascript: input inside Detailed description tab's script mode. It is used to manipulate the way the element will act, it can connect to registered web services or change the HTML content dynamically. jQuery is also supported, which makes it even more powerful. |
| − | == Script - Supported features<br> == | + | == Script - Supported features<br> == |
| − | === Events === | + | === Events === |
| − | *''onload'': called | + | *''onload'': called after loading the element |
| − | *''onadd'': called | + | *''onadd'': called once after adding the element to MyPortal page (Insert) |
| − | *''onminimize'': when | + | *''onminimize'': called when minimizing the element |
| − | *''onmaximize'': when | + | *''onmaximize'': called when maximizing the element |
| − | *''onremove'': when element is removed from MyPortal | + | *''onremove'': called when the element is removed from MyPortal page |
| − | *''onmouseover'': when mouse is over | + | *''onmouseover'': called when mouse is over the element (Currently, this event does not work - CHECK ME) |
| − | *''onmouseout'': when mouse is out of | + | *''onmouseout'': called when mouse is out of the element (Currently, this event does not work - CHECK ME) |
| − | |||
| − | === | + | === Functions === |
| − | |||
| + | *''set_title(titleText)'': change the title of element | ||
| + | *''get_contentDiv()'': get the content of "div" element, used for manipulating the HTML content | ||
| + | *''getManager().updateElementOrdination()'': automatically re-arrange MyPortal page (used when the HTML content is updated dynamically) | ||
| + | |||
| + | === Sample code === | ||
| + | |||
| + | <source lang="javascript"> | ||
this.onload = function() | this.onload = function() | ||
{ | { | ||
| − | + | // use "this" keyword to access the element itself. | |
| − | + | alert("onload"); | |
| − | + | } | |
| + | this.onadd = function() { | ||
| + | alert("onadd"); | ||
| + | } | ||
| + | this.onminimize = function() { | ||
| + | alert("onminimize"); | ||
| + | } | ||
| + | this.onmaximize = function() { | ||
| + | alert("onmaximize"); | ||
| + | } | ||
| + | this.onremove = function() { | ||
| + | alert("onremove"); | ||
} | } | ||
</source> | </source> | ||
| − | == | + | == Potential problems == |
| − | |||
| − | |||
| − | + | It can sometimes be quite problematic when displaying portal elements.Be careful when adding the HTML content, no validation is supported inside the editors. | |
| − | == | + | === Tips === |
| − | + | *Flash objects might be placed on top of others. To fix that problem, these parameters should be added into the flash:<br>''IE: "<param name='wmode' value='transparent' />"<br>FF: 'wmode="transparent" '''<br> | |
| − | + | == Examples == | |
| − | + | <u>[[Display a questionnaire's answers in real time]]</u> | |
| − | + | <u>[[Movie player element]]</u> | |
Latest revision as of 08:57, 18 October 2013
<accesscontrol>Main:MyGroup</accesscontrol>
Contents
Introduction
The My Portal page is your own personalized view of what goes on in the Catglobe system that is interesting to you.
More information about My Portal is available here.
How to make user defined elements
A user defined element as its name is the one you can put anything you want.
An element contains 2 features:
- HTML content: input inside Detailed decsription tab's HTML editor. It is required to show the element in MyPortal page (empty content will end up in not displaying anything)
- Javascript: input inside Detailed description tab's script mode. It is used to manipulate the way the element will act, it can connect to registered web services or change the HTML content dynamically. jQuery is also supported, which makes it even more powerful.
Script - Supported features
Events
- onload: called after loading the element
- onadd: called once after adding the element to MyPortal page (Insert)
- onminimize: called when minimizing the element
- onmaximize: called when maximizing the element
- onremove: called when the element is removed from MyPortal page
- onmouseover: called when mouse is over the element (Currently, this event does not work - CHECK ME)
- onmouseout: called when mouse is out of the element (Currently, this event does not work - CHECK ME)
Functions
- set_title(titleText): change the title of element
- get_contentDiv(): get the content of "div" element, used for manipulating the HTML content
- getManager().updateElementOrdination(): automatically re-arrange MyPortal page (used when the HTML content is updated dynamically)
Sample code
this.onload = function()
{
// use "this" keyword to access the element itself.
alert("onload");
}
this.onadd = function() {
alert("onadd");
}
this.onminimize = function() {
alert("onminimize");
}
this.onmaximize = function() {
alert("onmaximize");
}
this.onremove = function() {
alert("onremove");
}
Potential problems
It can sometimes be quite problematic when displaying portal elements.Be careful when adding the HTML content, no validation is supported inside the editors.
Tips
- Flash objects might be placed on top of others. To fix that problem, these parameters should be added into the flash:
IE: "<param name='wmode' value='transparent' />"
FF: 'wmode="transparent" '
