Hello all,
Most my experience using Gwt was via Ext-Gwt. I wanted to try plain
vanilla Gwt. It wasn't a very difficult transition. I was looking
for a form validator much like the native Ext one. My google hits
lead me to a simple jQuery form validator:
http://docs.jquery.com/Plugins/Validation#Isn.27t_that_nice_and_easy.3F.
I generated code to match the jQuery window via GWT but alas the
plugin didn't work. I view the generated HTML and created a simple
html page containing the generated code and the plugin worked. Does
anyone know if what I'm trying to do is possible. Am I overlooking
something?
Thanks,
Shannon
Gwt Code:
public void onModuleLoad()
{
VerticalPanel pnlContent = new VerticalPanel();
DOM.setStyleAttribute(pnlContent.getElement(), "padding",
"20px");
Element elemBrandImg = DOM.createElement("img");
elemBrandImg.setAttribute("border", "0");
elemBrandImg.setAttribute("src", "images/CCNewLogo.jpg");
elemBrandImg.setAttribute("width", "250");
elemBrandImg.setAttribute("height", "36");
HTMLPanel pnlBrand = new HTMLPanel(DOM.toString(elemBrandImg));
DOM.setStyleAttribute(pnlBrand.getElement(), "marginBottom",
"20px");
frmLookup.getElement().setId("commentForm");
frmLookup.setStyleName("cmxform");
frmLookup.setAction("");
FlowPanel pnlSectionOne = new FlowPanel();
pnlContent.add(pnlBrand);
Element elemFieldset = DOM.createElement("fieldset");
Element elemLegend = DOM.createElement("legend");
elemLegend
.setInnerText("A simple comment form with
submit validation and
default messages");
elemFieldset.appendChild(elemLegend);
Element elemParaName = DOM.createElement("p");
Element elemLabelName = DOM.createElement("label");
elemLabelName.setAttribute("for", "cname");
elemLabelName.setInnerText("Name");
Element elemEmName = DOM.createElement("em");
elemEmName.setInnerText("*");
TextBox txtName = new TextBox();
txtName.setName("name");
txtName.getElement().setId("cname");
txtName.getElement().setAttribute("size", "25");
txtName.getElement().setAttribute("class", "required");
txtName.getElement().setAttribute("minlength", "2");
elemParaName.appendChild(elemLabelName);
elemParaName.appendChild(elemEmName);
elemParaName.appendChild(txtName.getElement());
elemFieldset.appendChild(elemParaName);
Element elemParaEmail = DOM.createElement("p");
Element elemLabelEmail = DOM.createElement("label");
elemLabelEmail.setAttribute("for", "cemail");
elemLabelEmail.setInnerText("E-Mail");
Element elemEmEmail = DOM.createElement("em");
elemEmEmail.setInnerText("*");
TextBox txtEmail = new TextBox();
txtEmail.setName("email");
txtEmail.getElement().setId("cemail");
txtEmail.getElement().setAttribute("size", "25");
txtEmail.getElement().setAttribute("class", "required email");
elemParaEmail.appendChild(elemLabelEmail);
elemParaEmail.appendChild(elemEmEmail);
elemParaEmail.appendChild(txtEmail.getElement());
elemFieldset.appendChild(elemParaEmail);
Element elemParaURL = DOM.createElement("p");
Element elemLabelURL = DOM.createElement("label");
elemLabelURL.setAttribute("for", "curl");
elemLabelURL.setInnerText("URL");
Element elemEmURL = DOM.createElement("em");
elemEmURL.setInnerHTML(" ");
TextBox txtURL = new TextBox();
txtURL.setName("url");
txtURL.getElement().setId("curl");
txtURL.getElement().setAttribute("size", "25");
txtURL.getElement().setAttribute("class", "url");
elemParaURL.appendChild(elemEmURL);
elemParaURL.appendChild(elemLabelURL);
elemParaURL.appendChild(txtURL.getElement());
elemFieldset.appendChild(elemParaURL);
Element elemParaComments = DOM.createElement("p");
Element elemLabelComments = DOM.createElement("label");
elemLabelComments.setAttribute("for", "ccomments");
elemLabelComments.setInnerText("Your comment");
Element elemEmComments = DOM.createElement("em");
elemEmComments.setInnerText("*");
TextArea txtComments = new TextArea();
txtComments.setName("comment");
txtComments.getElement().setId("ccomment");
txtComments.getElement().setAttribute("cols", "22");
txtComments.getElement().setAttribute("class", "required");
elemParaComments.appendChild(elemLabelComments);
elemParaComments.appendChild(elemEmComments);
elemParaComments.appendChild(txtComments.getElement());
elemFieldset.appendChild(elemParaComments);
Element elemParaSubmit = DOM.createElement("p");
Element elemInputSubmit = DOM.createElement("input");
elemInputSubmit.setAttribute("class", "submit");
elemInputSubmit.setAttribute("type", "button");
elemInputSubmit.setAttribute("value", "Submit");
elemInputSubmit.setAttribute("onclick", "$wnd.$(\"#commentForm
\").validate()");
elemParaSubmit.appendChild(elemInputSubmit);
elemFieldset.appendChild(elemInputSubmit);
pnlSectionOne.add(new InlineHTML(DOM.toString(elemFieldset)));
frmLookup.add(pnlSectionOne);
pnlContent.add(frmLookup);
RootPanel.get().add(pnlContent);
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration--><!-- above set
at the top of the file will set --><!-- the browser's rendering
engine into --><!-- "Quirks Mode". Replacing this
declaration --><!-- with a "Standards Mode" doctype is supported,
--><!-- but may lead to some differences in layout. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<link type="text/css" rel="stylesheet"
href="SalesTaxLookup.css">
<title>Sales Tax Lookup</title>
<script type="text/javascript" language="javascript"
src="salestaxlookup/salestaxlookup.nocache.js">
</script>
<script src="http://code.jquery.com/jquery-latest.js";>
</script>
<script type="text/javascript" src="http://dev.jquery.com/view/
trunk/plugins/validate/jquery.validate.js">
</script>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame"
tabIndex='-1' style="position:absolute;width:0;height:0;border:0">
</iframe>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
