HTML Tags

Contents:

rendering all supported html tags

Title rendering all supported html tags
Author(s) LiXizhi
Date 2008/2/16
File script/kids/3DMapSystemApp/MCML/pe_html.lua

Description

support formatting to the following tag and their attributes:
_text_, h1, h2,h3, h4, li, p, div, hr, font, span, strong, a(href), img(attr: src,height, width, title), form, label
__anyTag__(style="float:left;color: #006699; text-align: right;background:url;background-color:#FF0000;
   font-family: Arial; font-size: 14pt;font-weight: bold;text-shadow:true;
   left: -60px; position: relative|absolute; top: 30px;width: 100px;height: 100px;
   class:"box";margin:5;margin-top:5;padding:5;" onload="MyOnLoadFunc" display="none"),
   _Note_: MyOnLoadFunc(mcmlNode) is called immediately after the mcml node UI is created. This is usually used in <pe:mcml onload="MyClass.MyFunc()"></pe:mcml>
<input type="text|radio|checkbox|submit|button|hidden|reset|password" name="", value=""/> <textarea name="music" rows="4"></textarea>
By default: text, span, font,a(href) will be inline controls, i.e. they float around previous control, allowing content to automatically wrap to the next line. 

div tag

Div is one of the most frequently used display blocks. It is a container of other tags.

PropertySorted ascending Descriptions
align nil or "center", "right" is supported. it is only used when css:max-width is specified
background same as css style property background
background2 the mouse over background
class some prefined css style name. such as "box", "defaultbutton"
display if this is "none", the node will be skipped during rendering.
enabled "true" or "false", if "false", all inner nodes will be locked. ccs.background will be displayed as an overlay image.
height it can be like "100px" or "90%", it will override settings in style attribute
onclick when this is set, the inner nodes are rendered but not interactive, clicking on the client area of div will trigger the onclick(name, mcmlNode) call back function
style string: css style string most css properties are supported.
tooltip mouse over tooltip.Only valid when onclick is not empty.
trans for any div style tags, including the pe:mcml page, we can use the trans attribute to specify how the child nodes are translated. if this is "no" or "none", no translation of the child nodes are used. otherwise, it is the translation file's base name, such as "IDE", "ParaWorld", "OfficialMCML"
width it can be like "100px" or "90%", it will override settings in style attribute
Special css property
background-rotation [-3.14, 3.14]
max-width if the max-width is specified, content will have a maximum width. if the align property is "center", content will be centered. this is usually used on the pe:mcml tag such as
<pe:mcml style="max-width:400px" align="center">text</pe:mcml>

background property: the css background can be of following. e.g.

  1. background:a.jpg; This is an image relative to the current page's directory.
  2. background:url(a.jpg: 4 4 4 4); we can specify a sub region like in NPL control's background property
  3. background:url(a.jpg# 0 0 32 32); where # stands for ; in standard NPL UI background property, since css does not allow ; in string.

a tag

it is similar to html a tag except that the href property recoginizes the following url.

href property
if href begins with "open://filepath", it will try to open the file using ShellExecute("open", "explorer.exe",rootDir..filepath). It will automatically append paraengine root directory prior to filepath. if href begins with "http://filepath" and target property is not specified, it will ask the user whether to open the link using an external or internel Internet web browser. if href is just a file without any sub directory, it will be considered a relative path and will automatically append the current page directory before opening it. if href is a file with sub directory, it will be regarded as a local file relative to the root of paraengine directory.

target property
It may be "_self", "_blank", "_mcmlblank", "[iframename]". if this property is specified, the href will be regarded as mcml page file even if it begins with http. iframename can be any iframe control name, where the href mcml page will be opened. if it is "_self", it will be opened in the current page control. if it begins with "_mcmlblank", it will be opened in a new popup mcml window. "framewidth" and "frameheight" property can be used to specify newly opened window size.

onclick property
if there is an onclick property and href is not specified, the onclick function will be called with parameters specified in param1, param2, ... property of the node. Please note that: unlike button onclick, the function is not executed in page scoping and therefore must be a global function. However if the type property is button or name or id property is not nil, page scoping is enabled. Example

   without page scoping: <a onclick="Map3DSystem.App.profiles.ProfileManager.AddAsFriend" param1='<%=Eval("uid")%>'>Add as friend</a>
   with page scoping: <a type="button" onclick="Map3DSystem.App.CCS.AvatarRegPage.UpdateAvatar" param1='<%=Eval("index")%>'>select</a>

other properties:

tooltip mouse over text to display
height forcing a given height, such as in chat pe:name

   <a onclick="Map3DSystem.App.profiles.ProfileManager.AddAsFriend" param1='<%=Eval("uid")%>'>Add as friend</a>

iframe tag

properties:
src empty or the url of mcml page to load by default
cachepolicy cache policy to use with the default src url. such as "access plus 10 days"

TIP Sample Code

NPL.load("(gl)script/kids/3DMapSystemApp/mcml/pe_html.lua");

Member Functions

pe_html.create

-----------------------------------
 pe_html: pure text
-----------------------------------
local pe_html = {};
Map3DSystem.mcml_controls.pe_html = pe_html;

pe_html.css = {
   ["h1"] = {
      ["margin-top"] = 3,
      ["margin-left"] = 0,
      ["margin-bottom"] = 5,
      ["font-weight"] = "bold",
      ["font-size"] = "13",
      headimage = "Texture/unradiobox.png",
      headimagewidth = 16,
   },
   ["h2"] = {
      ["margin-top"] = 3,
      ["margin-left"] = 0,
      ["margin-bottom"] = 3,
      ["font-weight"] = "bold",
      ["font-size"] = "12",
      headimage = "Texture/unradiobox.png",
      headimagewidth = 14,
   },
   ["h3"] = {
      ["margin-top"] = 3,
      ["margin-left"] = 0,
      ["margin-bottom"] = 2,
      ["font-weight"] = "bold",
      headimage = "Texture/unradiobox.png",
      headimagewidth = 12,
   },
   ["h4"] = {
      ["margin-top"] = 3,
      ["margin-left"] = 0,
      ["margin-bottom"] = 1,
      ["font-weight"] = "bold",
      headimage = "Texture/unradiobox.png",
      headimagewidth = 10,
   },
   ["li"] = {
      ["margin-top"] = 0,
      ["margin-left"] = 0,
      ["margin-bottom"] = 0,
      headimage = "Texture/unradiobox.png",
      headimagewidth = 8,
   },
   ["ul"] = {
      ["margin-top"] = 3,
      ["margin-left"] = 5,
      ["margin-bottom"] = 3,
   },
   ["p"] = {
      ["margin-top"] = 1,
      ["margin-left"] = 0,
      ["margin-bottom"] = 1,
   },
   ["span"] = {
   },
   ["font"] = {
      ["font-family"] = Map3DSystem.DefaultFontFamily,
      ["font-size"] = Map3DSystem.DefaultFontSize,
      ["font-weight"] = Map3DSystem.DefaultFontWeight,
   },
   ["b"] = {
      ["font-weight"] = "bold",
   },
   ["strong"] = {
      ["font-weight"] = "bold",
   },
   ["img"] = {
      ["width"] = 200,
      ["height"] = 150,
   },
   ["hr"] = {
      ["margin-top"] = 2,
      ["margin-left"] = 5,
      ["margin-right"] = 5,
      ["margin-bottom"] = 2,
      ["height"] = 1,
      background = "Texture/whitedot.png",
      ["background-color"] = "150 150 150 255",
   },
   ["a"] = {
      color = "#1940be", --"#006699",
      ["padding"] = 1,
      -- TODO: use a small image with a 1 pixel bright border. 
      background = "Texture/3DMapSystem/common/href.png:2 2 2 2"
   },
   ["iframe"] = {
      ["padding"] = 0,
      ["margin"] = 0,
   },
   ["div"] = {
      -- whether this object allows surrounding controls to floating around(either before or after) it. 
      -- Note: the css.width can be explicitly specified or not, in order for this control to float after previous control. 
      -- float = "left",
   },
   ["pe:mcml"] = {
   },
   
   -- HTML extension
   ["pe:a"] = {
      color = "#006699",
      ["padding"] = 10,
      ["margin"] = 0,
      --["margin-top"] = 32,
      --["margin-bottom"] = 32,
      --["margin-left"] = 32,
      --["margin-right"] = 32,
      -- TODO: use a small image with a 1 pixel bright border. 
      background = "Texture/3DMapSystem/common/href.png:2 2 2 2",
   },
   ["pe:world"] = {
      color = "#1940be", --"#006699",
      ["padding"] = 1,
      background = "Texture/3DMapSystem/common/href.png:2 2 2 2",
   },
   -- social tags
   ["pe:avatar"] = {
      ["width"] = 256,
      ["height"] = 256,
   },
   ["pe:name"] = {
      --["color"] = "#006699",
      float="left",
   },
   ["pe:profile-photo"] = {
      float="left",
   },
   -- map related tags
   ["pe:map"] = {
      ["width"] = 256,
      ["height"] = 256,
   },
   
   ["pe:minimap"] = {
      ["width"] = 128,
      ["height"] = 128,
   },
   
   -- HTML related tags
   ["pe:editor"] = {
      ["padding"] = 5,
   },
   ["pe:editor-button"] = {
      ["margin-top"] = 2,
      ["margin-bottom"] = 2,
      ["height"] = 22,
   },
   ["pe:editor-text"] = {
      ["margin-top"] = 0,
      ["margin-bottom"] = 2,
      ["lineheight"] = 20,
   },
   ["pe:treeview"] = {
   },
   ["pe:treenode"] = {
   },
   ["pe:filebrowser"] = {
   },
   ["pe:canvas3d"] = {
   },
   ["pe:GridView"] = {
   },
   ["pe:pager"] = {
   },
   ["pe:download"] = {
      background = "Texture/3DMapSystem/common/href.png:2 2 2 2",
   },
   ["pe:label"] = {
      height = 18,
   },
   ["pe:fileupload"] = {
   },
   ["pe:progressbar"] = {
   },
   ["pe:sliderbar"] = {
   },
   ["pe:numericupdown"] = {
      width=120,
      height=20,
   },
   ["pe:colorpicker"] = {
      width=182,
      height=50,
   },
   ["pe:slide"] = {
      width=300,
      height=50,
      background="",
   },
   ["input-select"] = {
      --["margin-top"] = 0,
      ["margin-bottom"] = 2,
      ["lineheight"] = 20,
   },
   ["pe:tabs"] = {
      ["padding-left"] = 10,
      ["ItemSpacing"] = 2,
      ["padding-right"] = 0,
      -- this is used as the tab button height
      ["padding-top"] = 18, 
      ["padding-botom"] = 5,
      --["background"] = "Texture/3DMapSystem/common/ThemeLightBlue/tabview_body.png: 5 5 5 5",
      --["background"] = "Texture/3DMapSystem/common/ThemeLightBlue/container_bg.png: 4 4 4 4",
      ["background"] = "Texture/Aquarius/Common/Container_32bits.png: 5 5 5 5",
      ["TextColor"] = "0 0 0",
      ["SelectedTextColor"] = "0 0 0",
      -- please note that: MouseOverItemBG does not support 9 tile ":" texture name yet.
      -- ["MouseOverItemBG"] = "Texture/Aquarius/Common/Tabitem_Selected_32bits.png; 0 0 16 18: 6 15 6 2",
      ["UnSelectedMenuItemBG"] = "Texture/Aquarius/Common/Tabitem_Unselected_32bits.png; 0 0 16 18: 6 15 6 2",
      ["SelectedMenuItemBG"] = "Texture/Aquarius/Common/Tabitem_Selected_32bits.png; 0 0 16 18: 6 15 6 2",
   },
   ["pe:tab-item"] = {
      -- the tab button height plus some space, such as 20+1
      ["padding-top"] = 5, 
      ["padding-botom"] = 5,
   },
   ["pe:ribbonbar"] = {
      -- the tab button bottom height plus some space, such as 16+4
      float="left",
      margin=1,
      ["padding"] = 2, 
      ["padding-bottom"] = 16,
      --["color"] = "#000000", -- text color
      ["background"] = "Texture/3DMapSystem/common/ThemeLightBlue/ribbonbar.png: 5 5 5 20",
      ["background2"] = "Texture/3DMapSystem/common/ThemeLightBlue/ribbonbar_hl.png: 5 5 5 20",
   },
   ["pe:command"] = {
      ["margin"] = 4, 
      ["margin-left"] = 2, 
      ["margin-right"] = 2,
      -- button width
      ["width"] = 20, -- 28 is good
   },
   ["pe:asset"] = {
      -- button width
      ["width"] = 48,
   },
   ["pe:bag"] = {
      ["padding"] = 2, 
   },
}
;

syntax

function pe_html.create(rootName,mcmlNode, bindingContext, _parent, left, top, width, height)

parameters

rootName  
mcmlNode  
bindingContext  
parent  
left  
top  
width  
height  

pe_text.create


pe_text: pure text
local pe_text = {}; Map3DSystem.mcml_controls.pe_text = pe_text;

it will create text in available position as single lined, or as multilined in new line position. the control takes up whatever vertical space needed to display the text as a paragraph,

  • param mcmlNode : is a text
  • param css : nil or a table containing css style, such as {color=string, href=string}. This is a style object to be associated with each node.

syntax

function pe_text.create(rootName,mcmlNode, bindingContext, _parent, left, top, width, height, css, parentLayout)

parameters

rootName  
mcmlNode is a text
bindingContext  
parent  
left  
top  
width  
height  
css  
parentLayout  

pe_simple_styles.create


pe_simple_styles: it handles HTML tags of h1, h2,h3, h4, li, p, div, each supporting css style property. it supports "display" attribute, it is similar to css.display property, except that it only recognize "none" as input
local pe_simple_styles = {}; Map3DSystem.mcml_controls.pe_simple_styles = pe_simple_styles;

always create the control on a new line and use up all available horizontal space. the control takes up whatever vertical space needed to display its inner content,

  • param mcmlNode : is a text

syntax

function pe_simple_styles.create(rootName,mcmlNode, bindingContext, _parent, left, top, width, height, style, parentLayout)

parameters

rootName  
mcmlNode is a text
bindingContext  
parent  
left  
top  
width  
height  
style  
parentLayout  

pe_simple_styles.GetValue

get the MCML value on the node

syntax

function pe_simple_styles.GetValue(mcmlNode)

parameters

mcmlNode  

pe_simple_styles.SetValue

set the MCML value on the node

syntax

function pe_simple_styles.SetValue(mcmlNode, value)

parameters

mcmlNode  
value  

pe_iframe.create


pe_iframe: it handles HTML tags of