Difference between revisions of "MyPortal Development guide"

From Catglobe Wiki
Jump to: navigation, search
(New page: Here comes with full information about MyPortal module. Of course, i am not going to mention about what it is.<br> To see how it works, visit helpfiles at [http://vietnamhelpfiles.catglo...)
 
 
(25 intermediate revisions by 4 users not shown)
Line 1: Line 1:
Here comes with full information about MyPortal module. Of course, i am not going to mention about what it is.<br>  
+
<accesscontrol>Main:MyGroup</accesscontrol>
 +
[[Category:Personalization]]
  
To see how it works, visit helpfiles at [http://vietnamhelpfiles.catglobe.com/ vietnamhelpfiles.catglobe.com/] under Persionalization/MyPortal.<br>
+
== Introduction  ==
  
<u>'''How to make an user defined element?'''</u><br>
+
The My Portal page is your own personalized view of what goes on in the Catglobe system that is interesting to you.
  
An user defined element as its name is the one you can put anything you want. You have 2 sections to make it real.<br>
+
More information about My Portal is available [[My_portal|here]].  
  
- Use Detailed decsription tabs ( one for default, one for specific): They are just a HTML editor. It is required not empty to show on your portal page.<br>  
+
== How to make&nbsp;user defined elements<br> ==
  
- Script editor: Available from version 5.5. Comes from the need to show data in real time using webservice to collect data. It is really a powerful feature which makes MyPortal more alive.<br>
+
A user defined element as its name is the one you can put anything you want.  
  
<u>'''Use Script Enabled Feature'''</u>:<br>  
+
[[Image:MyPortal - User-defined.jpg]]&nbsp;<br>  
  
<u>Events supported</u>:<br>
+
An element&nbsp;contains 2 features:  
  
''onload'': called when element finished loading<br>''onadd'': called when it is added to MyPortal for the first time ( by Insert dialog)<br>''onminimize'': when minimize<br>''onmaximize'': when maximize<br>''onremove'': when element is removed from MyPortal<br>''onmouseover'': when mouse is over an element.<br>''onmouseout'': when mouse is out of an element.  
+
*HTML content: input inside Detailed decsription tab's HTML editor. It is&nbsp;required to show the element in MyPortal page&nbsp;(empty content will end up in not displaying anything)  
 +
*Javascript: input inside Detailed description tab's script mode. It&nbsp;is used&nbsp;to manipulate the way the element will act, it can connect to registered web services or&nbsp;change the HTML content dynamically. jQuery is also supported, which makes it even more powerful.
  
''set_title(titleText)'': Change the title of element to the new one.
+
== Script - Supported features<br>  ==
  
How to write code?<br>
+
=== Events  ===
  
this.onload = function()  
+
*''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&nbsp;when the&nbsp;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  ===
  
// use "this" keyword to access the element itself.  
+
*''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  ===
  
<u>Call a webservice</u>:
+
<source lang="javascript">
 
+
this.onload = function()
[Help from Mai]
+
{
 +
  // 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>
  
<u>Play a movie clip using CGFlashPlayer</u>:
+
== Potential problems  ==
  
[Help from Mai]
+
It can sometimes be quite problematic when displaying portal elements.Be careful when adding the HTML content, no validation is supported inside the editors.
  
<u>'''Problems'''</u>:<br>
+
=== Tips  ===
  
Even though it is quite simple to make an element but people usually get problems with using something. First, i want to mention some problems with HTML editor:<br>  
+
*Flash objects might be placed on top of others. To fix that problem, these parameters should be added&nbsp;into the flash:<br>''IE: "&lt;param name='wmode' value='transparent' /&gt;"<br>FF: 'wmode="transparent" '''<br>
  
- <u>Using flash object</u>: You are free to add a flash object. Problem is that it is places on top of others, thus, you cannot see the menu opening from tools. To cover it, you need to add these parameters into flash:<br>
+
== Examples  ==
  
''IE: "&lt;param name='wmode' value='transparent' /&gt;"<br>FF: 'wmode="transparent" '''<br>  
+
<u>[[Display a questionnaire's answers in real time]]</u>  
  
- Be careful with the HTML you made. There is no checking or warrantee from MyPortal framework.<br>
+
<u>[[Movie player element]]</u>

Latest revision as of 08:57, 18 October 2013

<accesscontrol>Main:MyGroup</accesscontrol>

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.

MyPortal - User-defined.jpg 

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" '

Examples

Display a questionnaire's answers in real time

Movie player element