HTML Tags

rendering all supported html tags

Description

_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

<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

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:

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

iframe tag

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

pe_text.create

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

pe_simple_styles.create

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

pe_simple_styles.GetValue

get the MCML value on the node

syntax

function pe_simple_styles.GetValue(mcmlNode)

parameters

pe_simple_styles.SetValue

set the MCML value on the node

syntax

function pe_simple_styles.SetValue(mcmlNode, value)

parameters

pe_iframe.create