protected override void OnStartDemo(SampleViewport viewport)
{
this.viewport = viewport;
this.htmlhost = HtmlHostCreatorHelper.CreateHtmlHost(viewport, null, null);
SetupHtmlMenuBox();
//==================================================
//box1 test area
//html box
this.testHtmlBox = new HtmlBox(htmlhost, 800, 400);
testHtmlBox.SetLocation(30, 50);
viewport.AddContent(testHtmlBox);
string html = @"<html><head></head><body><div id='div1'>OK1</div><div>OK2</div></body></html>";
testHtmlBox.LoadHtmlString(html);
//==================================================
}
protected override void OnStartDemo(SampleViewport viewport)
{
var htmlhost = HtmlHostCreatorHelper.CreateHtmlHost(viewport, null, null);
////==================================================
//html box
var htmlBox = new HtmlBox(htmlhost, 800, 400);
htmlBox.SetLocation(30, 30);
viewport.AddContent(htmlBox);
string html = @"<html><head></head><body><div>OK1</div><div>OK2</div></body></html>";
htmlBox.LoadHtmlString(html);
//==================================================
//textbox
var textbox = new LayoutFarm.CustomWidgets.TextBox(400, 100, true);
textbox.SetLocation(0, 200);
viewport.AddContent(textbox);
textbox.Focus();
}
protected override void OnStartDemo(SampleViewport viewport)
{
htmlHost = HtmlHostCreatorHelper.CreateHtmlHost(viewport, null, null);
////==================================================
//html box
{
HtmlBox lightHtmlBox = new HtmlBox(htmlHost, 800, 50);
lightHtmlBox.SetLocation(50, 450);
viewport.AddContent(lightHtmlBox);
//light box can't load full html
//all light boxs of the same lightbox host share resource with the host
string html = @"<div>OK1</div><div>OK2</div>";
//if you want to use full html-> use HtmlBox instead
lightHtmlBox.LoadHtmlFragmentString(html);
}
//==================================================
{
HtmlBox lightHtmlBox2 = new HtmlBox(htmlHost, 800, 50);
lightHtmlBox2.SetLocation(0, 60);
viewport.AddContent(lightHtmlBox2);
//light box can't load full html
//all light boxs of the same lightbox host share resource with the host
string html2 = @"<div>OK3</div><div>OK4</div>";
//if you want to use ful l html-> use HtmlBox instead
lightHtmlBox2.LoadHtmlFragmentString(html2);
}
//==================================================
{
HtmlBox lightHtmlBox3 = new HtmlBox(htmlHost, 800, 50);
lightHtmlBox3.SetLocation(0, 100);
viewport.AddContent(lightHtmlBox3);
//fragment dom
//create dom then to thie light box
lightHtmlBox3.LoadHtmlDom(CreateSampleHtmlDoc());
}
//==================================================
//textbox
var textbox = new LayoutFarm.CustomWidgets.TextBox(400, 150, true);
textbox.SetLocation(0, 200);
viewport.AddContent(textbox);
textbox.Focus();
}
void SetupHtmlMenuBox()
{
//==================================================
this.htmlMenuBox = new HtmlBox(htmlhost, 800, 40);
htmlMenuBox.SetLocation(30, 0);
viewport.AddContent(htmlMenuBox);
string html = @"<html><head></head><body>
<div id='menubox'>
<span id='test_dom1'>click to toggle!</span>
<span id='test_dom2'>test document fragment</span>
<span id='test_dom3'>test showdow dom</span>
</div>
</body></html>";
htmlMenuBox.LoadHtmlString(html);
//set event handlers
var htmldoc = htmlMenuBox.HtmlContainer.WebDocument as IHtmlDocument;
var div_menuBox = htmldoc.getElementById("menubox") as IHtmlElement;
if (div_menuBox == null) return;
//test set innerHTML
div_menuBox.attachEventListener("mousedown", (e) =>
{
var contextE = e.SourceHitElement as IHtmlElement;
switch (contextE.id)
{
case "test_dom1":
{
//test toggle with innerHTML
var testHtmlDoc = testHtmlBox.HtmlContainer.WebDocument as IHtmlDocument;
var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement;
if (div1 != null)
{
//test set innerHTML
div1.innerHTML = testToggle ?
"<div>11111</div>" :
"<div>22222</div>";
testToggle = !testToggle;
}
}
break;
case "test_dom2":
{
//test toggle with DocumentFragment
var testHtmlDoc = testHtmlBox.HtmlContainer.WebDocument as IHtmlDocument;
var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement;
if (div1 != null)
{
var docFragment = testHtmlDoc.createDocumentFragment();
if (testToggle)
{
var node1 = docFragment.createElement("div") as IHtmlElement;
node1.appendChild(
docFragment.createTextNode("3333"));//TODO: review this
docFragment.rootNode.appendChild(node1);
}
else
{
var node1 = docFragment.createElement("div") as IHtmlElement;
node1.appendChild(
docFragment.createTextNode("4444"));//TODO: review this
docFragment.rootNode.appendChild(node1);
}
div1.clear();
div1.appendChild(docFragment.rootNode);
testToggle = !testToggle;
}
}
break;
case "test_dom3":
{
//shadow dom!
var testHtmlDoc = testHtmlBox.HtmlContainer.WebDocument as IHtmlDocument;
var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement;
if (div1 != null)
{
var shadowRoot = testHtmlDoc.createShadowRootElement() as IHtmlElement;
if (testToggle)
{
var node1 = testHtmlDoc.createElement("div") as IHtmlElement;
node1.appendChild(
testHtmlDoc.createTextNode("XXX"));//TODO: review this
//add node1 to shadow root element
shadowRoot.appendChild(node1);
}
else
{
var node1 = testHtmlDoc.createElement("div") as IHtmlElement;
node1.appendChild(
testHtmlDoc.createTextNode("YYY"));//TODO: review this
//add node1 to shadow root element
shadowRoot.appendChild(node1);
}
div1.clear();
div1.appendChild(shadowRoot);
testToggle = !testToggle;
}
}
break;
}
});
}
