---++!! Getting Started With MCML %TOC% The MCML is an XML format describing profile and other display items in ParaWorld, such as task, quick action, action feed, tradableitem, etc. One can think of it as the HTML counterpart in 3D social networking world for describing renderable objects in both 2D and 3D ---+++ Mapping MCML use similar architecture as java,html or ajax, if you are familiar with these technic, following mapping table may help you learn MCML, Java---> NPL HTML--->MCML AJax --> ParaWorldAPI+NPL+MCML ---+++ Code Behind ---++++ Inline Script | script/kids/3DMapSystemUI/Desktop/LoginPage.html | <verbatim> <script type="text/npl"> <![CDATA[ function OnInit() local self = document:GetPageCtrl(); self:SetNodeValue("username", Map3DSystem.User.Name); self:SetNodeValue("password", Map3DSystem.User.Password); end OnInit() ]]> </script> </verbatim> Inline Code Scoping (Page). Compiled each time the page is loaded or refreshed. Function Invoke: Page scope ---++++ External Script To a clean separation of MCML from presentation logic, one can put logic code in a separate lua file. We call this file as External Script. Use following code to set external script in MCML file: <verbatim> <script type="text/npl" src="script/myExternalScirpt.lua"></script> </verbatim> The code above equivalent to NPL.load(), so, code in external script is only compiled once. ---+++ Page Instance MCML file and corresponding external script file define the a templet of page. One can create many instance with same templet . As long as your mcml page is derived from PageCtrl, one can use PageCtrl:Create(name, _parent, alignment, left, top, width, height), to create a new instance of this page. ---+++ Page API Reference Access to node , value and UI in MCML page NPL.load("(gl)script/kids/3DMapSystemApp/mcml/mcml_base.lua"); NPL.load("(gl)script/kids/3DMapSystemApp/mcml/PageCtrl.lua"); ---+++ Form Form is for data binding for a group of input nodes. the callback contains values, which name and value pairs. ---+++ Document Object Model (DOM) ---++++ Availability document is a context containing the page node and page instance. Where is document? When can you use document object? ---++++ PageCtrl document:GetPageCtrl(): NPL.load("(gl)script/kids/3DMapSystemApp/mcml/PageCtrl.lua"); ---++++ Write Method <verbatim> <span style="font-weight:bold;color:#66000"> <script type="text/npl"><![CDATA[ local releaseYear, releaseMonth, releaseDay = 2008, 6, 19; local _,_, year, month, day = string.find(ParaGlobal.GetDateFormat("yyyy M d"), "(%d+)%s+(%d+)%s+(%d+)") if(year and month and day) then year = tonumber(year) month = tonumber(month) day = tonumber(day) local daysLeft = (releaseYear-year)*365+(releaseMonth-month)*30+(releaseDay-day); document:write(tostring(daysLeft)); end ]]></script> </span> </verbatim> ---++++ NodeValue v.s. UIValue page:SetNodeValue page:SetUIValue ---+++ CSS and Page Layout Traditional desktop application user interface development is mostly based on absolute positioning of visual elements, namely setting properties on controls to affect their location and size. There are some higher-level concepts one can use to make it easier to create UIs that adapt to a changing Window size, such as docking and anchoring of controls to their respective containers. MCML addresses those issues very well, in many cases by borrowing some of the better layout concepts from the world of HTML. css style inheritance order: parent-->Class-->tag style <verbatim> <div style="margin:5px;float:left;background:;" class="defaultbutton">some inner text<br/> </verbatim> ---+++ Test your page Only modified mcml (html) code : no need to restart ParaEngine Keep the Engine window open, and fine tune your UI. modified external script code: needs to restart ParaEngine ---+++ Asynchronous page pattern Page build pipeline (process): 1. read MCML to tree node instructure. 1. Per Instance: Create UI process (including document:write()) * SetUIValue of a tag node is only available when that node's UI is created. 1. Page refresh (Asynchronous): Page:Refresh() ---+++ Localisation php POEdit base mothor template, and many translation. Rule: Use Chinese ---+++ Misc 1. Use Path replaceables like !%WIKI% 1. query parameter (query string): script/kids/3DMapSystemApp/profiles/FriendsPage.html?tab=everyone ---+++ Examples ---++++ DOM example inline script, etc. script/kids/3DMapSystemApp/Login/StartPage.html
E
dit
|
A
ttach
|
P
rint version
|
H
istory
: r3
<
r2
<
r1
|
B
acklinks
|
V
iew topic
|
Ra
w
edit
|
M
ore topic actions
Topic revision: r3 - 2008-05-27
-
LiXizhi
Home
Site map
CCWeb web
HaqiTeen web
Main web
ParaEngine web
TWiki web
Main Web
Users
Groups
Index
Search
Changes
Notifications
RSS Feed
Statistics
导航页WebTopMenu
Preferences
开发指南
Getting Started
ParacraftSDK
NPL
MCML
NPL Reference Manual
美术Mod
Account
Log In
English
简体中文
簡體中文
E
dit
A
ttach
Copyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki?
Send feedback