Add big piece of HTML to the html-panel - html

I am new to GWT and I need to add a big piece of html code (contains a lot of included divs with id and classes) to the html-panel widget in my java file.
I have tried to add like this:
HTML html = new HTML("<div class=\"class1\">This is a class1.");
HTML html2 = new HTML("And it ends here</p>");
RootPanel.get().add(html);
RootPanel.get().add(html2);
But I have a problem with included divs. Is there any simpler way to this big piece of code. Thanks.

You, sir, are looking for UiBinder:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder
UiBinder is great when you are doing a lot in plain HTML.
However, UiBinder offers a lot once you get in deep so be careful. I recommend looking into CssResource and how it releates to UiBinder so you can share some Css or just embed Css in each UiBinder file. (Note programatic access to Css within UiBinder files)
Also not other features such as importing other custom UiBinder/Widgets with namespaces such as the built in (< g:Button> -> < mynamespace:MyCustomWidget>)
But you are probably just looking for laying everything out in UiBinder and defining the #UiField's in the java file
Hope this helps!
-Ashton

If your HTML is static, you must use UiBinder.
If your HTML is generated dynamically, you can use com.google.gwt.user.client.ui.HTML.
Your code is not working because you must give to the HTML constructor a valid html string.
I suggest you to read this guide:
https://developers.google.com/web-toolkit/doc/latest/DevGuideSecuritySafeHtml#Prefer_Plain_Text.

Related

common element in html

I am developing a project and find that there are elements that are common to all pages, I wonder if there is any way to define these elements generally and call them from your html to avoid having to define each of the pages. thank you very much for your help
test.html
<div>Menu</div>
When you need to have this menu, just call this code in your page:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
load()
Another option could be AngularJS, or just something like includes with PHP.
I don't know any way to do exactly this with pure HTML, but by mixing in a little server side script, you can. Just to give you an idea what it would look like:
This example uses PHP. If you are on a Microsoft server, you would need to translate this example into .NET or .aspx.
First, save the following to a file called "mytest.php" in the same folder as your other pages. (You can put it in a subfolder if you wish, but for this example I will keep it simple).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just one line for this test. A little useless, but you can see the point.
Now, in the <head> tag of your HTML, you can do this (I added the <head> tags just so you can see it... You would not want to have TWO sets of <head> tags.)
<head>
<?php include 'mytest.php'; ?>
</head>
Now, visit the page and display the HTML and you should see that line incorporated into your HTML. Note that any document that contains PHP code (as above) must end with a .php extension.
As #loops suggested, I would highly recommend AngularJS for the rescue.
It's a great MVC framework built with JavaScript and no external dependencies.
It offers the possibility to create custom elements using their Directives
So you could create a new element <mymenu></mymenu> and you can give this new tag some behaviour as well as bind events to it.
AngularJS takes care of all the rest and your new tag will be available across all the pages of your application.
And yes, you are correct thinking that should be done on the client side rather than server side.
I am happy to provide a full working example for you once you get your head around the framework first. Otherwise I think it will be too much information at once ;)

How to easily rewrap extracted part of HTML into new document

I use the XML::Twig Perl module to extract a div out of an HTML document, and would like to create a new HTML doc containing only this div, and the required HTML wrapping. I would then also add some CSS styles to the new document.
Extracting the div is easy, but I'm too lazy to write the HTML wrapping around it myself :-).
There surely must be a Perl module which would do that boring part for me. Or maybe even a method in XML::Twig itself, which I overlooked or didn't understand?
You should be able to create a (very, very!) minimal HTML twig by using my $html= XML::Twig->new->parse_html( '') and then paste your div in it. You may want to`replace the empty string by something a little more HTML-y though, or even load a better HTML template, which could have the CSS in it too.

NSXMLParser - modify the elements in iPhone

I have an HTML string that I need to modify its elements.
I looked into NSXMLParser, but didn't see any method to modify the elements while reading them.
I don't like the solution of creating a NSMutableString and adding strings to it.
Is there a way to read HTML string and modify its element in an elegant way?
e.g.,
<div style="color:grey"></div>
will be
<div style="color:black"></div>
Unfortunately I saw that one cannot use NSXMLDocument in an iPhone app.
see the github project KissXML which is a 'clone of NSXML library and works the same.
https://github.com/robbiehanson/KissXML
shameless self-advert: my fork of it works way better with html that's not real xml
https://github.com/Daij-Djan/KissXML

HTML + CSS dynamic render in flash?

I have HTML + CSS text. I need some lib with simple function like "Render String Var conteining HTML" So no external files (like in flash lib called HTMLwraper you just have to play your SWF on top of HTML). dinamic! I give it string it renders It into some conteiner (not as a bitmab but as if it was real HTML dynamically rendered in flash). (And I need real HTML + CSS support not what normal rich text block gives us)
I am going to use it in with Flex (Flash Builder) so I like MXML component model but even pure flash AS3 will workout.
It should be Free and Opensource (any license like GPL, LGPL etc will be ok).
So Is out there such flash\flex library for HTML + CSS dynamic rendering (rfom given String or XML)?
Sounds like you're asking for quite a lot ;-)
The only thing that springs to mind that might be able to help is F*CSS
Take a look here: http://fcss.flashartofwar.com/
HTH
Jolyon

parse html in adobe air

I am trying to load and parse html in adobe air. The main purpose being to extract title, meta tags and links. I have been trying the HTMLLoader but I get all sort of errors, mainly javascript uncaught exceptions.
I also tried to load the html content directly (using URLLoader) and push the text into HTMLLoader (using loadString(...)) but got the same error. Last resort was to try and load the text into xml and then use E4X queries or xpath, no luck there cause the html is not well formed.
My questions are:
Is there simple and reliable (air/action script) DOM component there (I do not need to display the page and headless mode will do)?
Is there any library to convert (crappy) html into well formed xml so I can use xpath/E4X
Any other suggestions on how to do this?
thx
ActionScript is supposed to be a superset of JavaScript, and thankfully, there's...
Pure JavaScript/ActionScript HTML Parser
created by Javascript guru and jQuery creator John Resig :-)
One approach is to run the HTML through HTMLtoXML() then use E4X as you please :)
Afaik:
No :-(
No :-(
I think the easiest way to grab title and meta tags is writing some regular expressions. You can load the page's HTML code into a string and then read out whatever you need like this:
var str:String = ""; // put HTML code in here
var pattern:RegExp = /<title>(.+)<\/title>/i;
trace(pattern.exec(str));