Navigation
SEARCH
TOOLBOX
LANGUAGES
modified on 19 May 2010 at 15:00 ••• 1,978 views

O2 Script - Quick HtmlCode Viewer - Version 2

From

Jump to: navigation, search

Contents


This is a new version of the O2 Script - Quick HtmlCode Viewer script with quite a number of powerful new features

new features

  • convert loaded Html code into XML
  • load local html and xml files (in addition to the already suported HTTP GET requests)
  • query the loaded HTML or XML object using XPath
  • view loaded HTML or XML in a browser
  • couple context menus:
    • sort and unsort
    • sample XPath queries

screenshots: view as XML, XPATH queries, Context Menu

  • load source code (included below) into O2's Simple Script Editor

Image:5_19_2010_3_18_45_PM_tmp5035.jpg

  • execute it (default first page loaded is www.google.com)

Image:5_19_2010_3_20_59_PM_tmp5039.jpg

  • check the 'View as Xml' CheckBox (bottom left) and reload the page (press enter on the top-level TextBox with the url)

Image:5_19_2010_3_20_32_PM_tmp5038.jpg

  • try a query on the bottom left TextBox (in this example searching for all links)

Image:5_19_2010_3_23_25_PM_tmp503B.jpg

  • right-click on the bottom-right TextBox will show a context menu with a couple sample XPath queries:

Image:5_19_2010_3_25_21_PM_tmp503F.jpg

  • right-click on the TreeView (middle-right) will show a context menu that allows the Sorting (or not) of the currently shown HtmlNodes

Image:5_19_2010_3_26_33_PM_tmp5040.jpg

screenshots: view in browser

  • click on 'view in browser' to see the current HtmlCode as rendered by a brower
  • example 1: with the 'View as Xml' option unchecked

Image:5_19_2010_3_32_36_PM_tmp507A.jpg

Image:5_19_2010_3_35_33_PM_tmp5080.jpg

  • example 2: with the 'View as Xml' option checked

Image:5_19_2010_3_33_33_PM_tmp507C.jpg

Image:5_19_2010_3_36_11_PM_tmp5082.jpg

screenshots: loading local file (using webinspect as an example)

  • find a locally available xml file:

Image:5_19_2010_3_42_28_PM_tmp5087.jpg

  • and load it by entering its address on the top-level TextBox and pressing enter

Image:5_19_2010_3_44_33_PM_tmp508A.jpg

  • search for the desired information (in the example below the 'fullurl' element)

Image:5_19_2010_3_45_51_PM_tmp508B.jpg

source code

var defaultPage = "http://www.google.com";
 
var sampleXPathQueries = new List<string> 
									{
										"//a",  
										"//img",
										"//a[contains(@href,'news')]",
										"//a[contains(text(),'S')]",
										"//a[text()='Blogs']"
									};
 
// create GUI 
var panel = O2Gui.open<Panel>("Quick HtmlCode Viewer",600,300);  
var groupBoxes = panel.add_1x1("Html Code", "TreeView", true, panel.width() /2 );
var htmlCodeViewer = groupBoxes[0].add_SourceCodeViewer(); 
var optionsPanel = htmlCodeViewer.insert_Below<Panel>(30);
var treeView =  groupBoxes[1].add_TreeView();
treeView.showSelection();
var pageToOpen = treeView.parent<SplitContainer>().insert_Above<Panel>(20).add_TextBox().fill();
var htmlNodeFilter = treeView.insert_Below<TextBox>(25).fill();
var sampleQueries_MenuItem = htmlNodeFilter.add_ContextMenu().add_MenuItem("Sample queries");
 
var treeView_ContextMenu = treeView.add_ContextMenu();
 
treeView_ContextMenu.add_MenuItem("Sort Nodes", ()=> treeView.sort());
treeView_ContextMenu.add_MenuItem("Don't Sort Nodes", ()=> treeView.sort(false));
treeView_ContextMenu.add_MenuItem("Show all nodes",()=> htmlNodeFilter.sendKeys("//*".line()));   
 
//optionsPanel
var viewAsXml = false;
optionsPanel.add_CheckBox("View as Xml",0,5, (value) => viewAsXml = value);
optionsPanel.add_Link("view in browser", 5,100,
						()=> O2Gui.open<Panel>("Browser view of HtmlCode",400,400)
								  .add_Browser()	
								  .silent(true)
								  .open(htmlCodeViewer.get_Text().save()))
			.bringToFront();
 
 
// setup Events 
treeView.beforeExpand<HtmlAgilityPack.HtmlNode>(
		(treeNode, htmlNode)=>{																
								 if (htmlNode.Attributes != null)
								 	 foreach(var attribute in htmlNode.Attributes)
									 	 treeNode.add_Node("a: {0}={1}".format(attribute.Name, attribute.Value)); 
								 treeNode.add_Node("v: {0}".format(htmlNode.InnerHtml));  	
								 if (htmlNode.ChildNodes != null)
								 	 foreach(var childNode in htmlNode.ChildNodes)
									 	 if (childNode.html().valid()) 
										 	 treeNode.add_Node("n: {0}".format(childNode.Name), childNode, true);  
							  });
 
treeView.afterSelect<HtmlAgilityPack.HtmlNode>(
				  (htmlNode)=>{ htmlCodeViewer.showHtmlNodeLocation(htmlNode);});
 
pageToOpen.onEnter(
		(text)=>{
					pageToOpen.backColor(Color.LightBlue);					
					O2Thread.mtaThread(()=> 
					{ 
						treeView.clear();													
						var htmlCode = text.fileExists() 
											? text.fileContents()
											: text.uri().getHtml();
						if (viewAsXml)
							htmlCodeViewer.set_Text(htmlCode.htmlToXml(),".xml");									
						else
							htmlCodeViewer.set_Text(htmlCode,".xml"); //could use ".html". but I don't like the use of green for <script> tags
						pageToOpen.backColor(Color.White); 					
						htmlNodeFilter.sendEnter();
					});
 
				});;
 
htmlNodeFilter.onEnter(
		(text)=>{
					treeView.clear();
					try
					{
						htmlNodeFilter.backColor(Color.White);
						var htmlDocument = htmlCodeViewer.get_Text().htmlDocument();  	
						if (text.valid())
							treeView.add_Nodes(htmlDocument.select(text));
						else
						{
							treeView.add_Node(htmlDocument);
							treeView.expand();
						}
 
					}
					catch(System.Exception ex)
					{
						ex.log("in htmlNodeFilter.onEnter");
						htmlNodeFilter.backColor(Color.Red);
					}
				});
 
// load default data			 
 
foreach(var xPathQuery in sampleXPathQueries)
	sampleQueries_MenuItem.add_MenuItem(xPathQuery , (text) => htmlNodeFilter.set_Text(text.str()));
 
pageToOpen.sendKeys(defaultPage.line());
Retrieved from "http://deploy.o2-ounceopen.com/wiki/O2_Script_-_Quick_HtmlCode_Viewer_-_Version_2"
MediaWiki Appliance - Powered by TurnKey Linux