用Eclipse中的Browser显示html页面,因为"just small thing.. browser in the studio is light browser.. it can not support as many things as other browser"
所以一些看上去很普通的html设置通过Eclipse中的Browser类显示都异常的困难(一些高级的特新都显示不出来).在其中Html中写的CSS和JS也是支持的非常少.
所以解决法基本上就是利用现有Browser类支持的一些html和js来实现本该可以直接用一些属性来实现的效果.
总结几个Eclipse中的Browser类中支持与不支持的事项,以及对应的解决办法.
要做成的目标大体上是这样的:
然后这个画面对应的HTML代码和JS代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Connect to TalendForge-->
<style type="text/css">
b.rtop, b.rbottom{display:block;background: #F5F5F5}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #b4c401}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.r4{margin: 0 1px}
b.rtop b.r5, b.rbottom b.r5{margin: 0 1px;height: 2px}
.sharp{width:100%;margin:0px auto 0;float:left;margin-right:0%;}
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.inputContent {border-right:1px solid;border-left:1px solid;overflow:hidden;}
.color2 .b2,.color2 .b3,.color2 .b4,.color2 .b5,.color2 .b6,.color2 .b7,.color2 .inputContent{border-color:#909090;}
.color2 .b1,.color2 .b8{background:#909090;}
.color2 .b2,.color2 .b3,.color2 .b4,.color2 .b5,.color2 .b6,.color2 .b7,.color2 .inputContent{background:#F5F5F5;}
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .inputContent{border-color:#909090;}
.color1 .b1,.color1 .b8{background:#909090;}
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .inputContent{background:white;}
body{
background:white;
}
a:link,a:visited,a:hover{
text-decoration:none;
}
font{
font-family:Arial;
}
.textfield{
width:100%;
align:center;
color:#999999;
font-size:14px;
height:20px;
line-height:20px;
border-style:none 0;
background:white;
border:none 0;
}
.selectField {
width:100%;
align:center;
color:#999999;
font-size:14px;
height:26px;
border-style:none 0;
background:white;
border:none 0;
}
.checkboxclass{
padding-left:145px;
}
.formHeaderClass{
}
.formHeaderClass td{
height: 30px;
}
.formBackgroundClass {
width: 100%;
}
table.formBackgroundClass {
background-color:#F5F5F5;
}
.formTable{
width: 85%;
}
.formClass {
width: 55%;
}
.formClass td{
border:0;
}
.errorInfoClass {
width: 100px;
align:center;
color:red;
}
#container {width: 100%;}
#image {width="30%"}
#text {float: left; width="70%"}
.button {
background:none repeat scroll 0 0 #b4c401;
color: white;
padding:0 0 0 0;
display: inline-block;
font-size: 1.0em;
font-weight: 600;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: center;
width: 100%;
font-family: Arial;
}
.bottomButton {
background:none repeat scroll 0 0 #F5F5F5;
color: gray;
padding:0 0 0 0;
display: inline-block;
font-size: 1.0em;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: center;
width: 100%;
height:18px;
font-family: Arial;
}
.checkBoxStyles {
padding: 8px 0px 0px 0px;
}
.navTopLine {
border-bottom:1px solid #909090;
}
.navRightLine {
border-right:1px solid #909090;
}
#background {
border-style:solid;
background-color: #E1DEDB;
z-index: -100;
width: 95%;
height: 70%;
margin: 10px;
}
input,select{
vertical-align:center;
font-family:Arial;
}
.bottom{
border-left :solid;
border-top :solid;
border-width:1px;
alignment-adjust:auto;
text-align:center;
}
</style>
<script type="text/javascript">
var i18nMsg = [
'<internationalization id="TalendForgeDialog.userNameLabel.tooltip"/>'
,'<internationalization id="TalendForgeDialog.emailLabel.tooltip"/>'
,'<internationalization id="TalendForgeDialog.passwordLabel.tooltip"/>'
,'<internationalization id="TalendForgeDialog.passwordAgainLabel.tooltip"/>'
,'<internationalization id="TalendForgeDialog.form.userName.hint" />'
,'<internationalization id="TalendForgeDialog.form.password.hint" />'
,'<internationalization id="TalendForgeDialog.form.passwordAgain.hint" />'
,'<internationalization id="TalendForgeDialog.form.email.hint" />'
]
var textHintUserName=i18nMsg[4];
var textHintPassword=i18nMsg[5];
var textHintPasswordAgain=i18nMsg[6];
var textHintEmail=i18nMsg[7];
var isCreateAccountUserNameOK = false;
var isCreateAccountPasswordOK = false;
var isCreateAccountPasswordAgainOK = false;
var isCreateAccountEmailOK = false;
var isLoginAccountUserNameOK = false;
var isLoginAccountPasswordOK = false;
function getCreateAccountUrl(){
var urlPartConstant = "http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CREATE_ACCOUNT&";
var urlPartName = "USER_NAME="+document.getElementById("name1").value+"&";
var urlPartEmail = "EMAIL="+document.getElementById("email").value+"&";
var urlPasswrod = "PASSWORD="+document.getElementById("password1").value+"&";
var urlCountry = "COUNTRY="+document.getElementById("countrylistid").value+"&";
var urlImporve = "IS_HELP_IMPROVE="+document.getElementById("improve").checked;
var url = urlPartConstant+urlPartName+urlPartEmail+urlPasswrod+urlCountry+urlImporve;
return url;
}
function getLoginAccountUrl(){
var urlPartConstant = "http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=USE_EXSITING_ACCOUNT&";
var urlPartName = "USER_NAME="+document.getElementById("name2").value+"&";
var urlPasswrod = "PASSWORD="+document.getElementById("password3").value+"&";
var urlImporve = "IS_HELP_IMPROVE="+document.getElementById("improve2").checked;
var url = urlPartConstant+urlPartName+urlPasswrod+urlImporve;
return url;
}
function switchToView(viewId) {
if (viewId == 'useExsitingAccountDiv') {
document.getElementById('useExsitingAccountDiv').style.display = 'block';
document.getElementById('createAccountDiv').style.display = 'none';
} else {
document.getElementById('useExsitingAccountDiv').style.display = 'none';
document.getElementById('createAccountDiv').style.display = 'block';
}
}
function checkUsername() {
var value = document.getElementById('name1').value;
var isOK = false;
if (value != "") {
if (value.replace(/^\w+$/g, "") == "" ){
isOK = true;
}
}
if (isOK){
document.getElementById('userNameCreateErrorHint').style.display = 'none';
document.getElementById('userNameCreateOKImage').style.display = 'block';
isCreateAccountUserNameOK = true;
} else {
document.getElementById('userNameCreateErrorHint').style.display = 'block';
document.getElementById('userNameCreateOKImage').style.display = 'none';
isCreateAccountUserNameOK = false;
}
refreshCreateAccountButtton();
}
function checkPassword() {
var password = document.getElementById('password1');
var pwd1ErrorHint = document.getElementById('pwd1ErrorHint');
var pwd1OKImage = document.getElementById('pwd1OKImage');
var regex = /^.+$/;
if (regex.test(password.value)){
pwd1ErrorHint.style.display = 'none';
pwd1OKImage.style.display = 'block';
isCreateAccountPasswordOK = true;
} else {
pwd1ErrorHint.style.display = 'block';
pwd1OKImage.style.display = 'none';
isCreateAccountPasswordOK = false;
}
refreshCreateAccountButtton();
}
function checkConfirm() {
var passwordValue = document.getElementById('password1').value;
var confirmValue = document.getElementById('password2').value;
var isOK = false;
if (passwordValue != '') {
if (passwordValue == confirmValue) {
isOK = true;
}
}
if (isOK){
document.getElementById('pwd2OKImage').style.display = 'block';
document.getElementById('pwd2ErrorHint').style.display = 'none';
isCreateAccountPasswordAgainOK = true;
}else{
document.getElementById('pwd2OKImage').style.display = 'none';
document.getElementById('pwd2ErrorHint').style.display = 'block';
isCreateAccountPasswordAgainOK = false;
}
refreshCreateAccountButtton();
}
function checkEmail() {
window.location.href="http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CHECK_EMAIL&EMAIL=" + document.getElementById('email').value;
}
function checkLoginUsername() {
var value = document.getElementById('name2').value;
var isOK = false;
if (value != "") {
if (value.replace(/^\w+$/g, "") == "" ){
isOK = true;
}
}
if (isOK){
document.getElementById('userNameLoginErrorHint').style.display = 'none';
document.getElementById('userNameLoginOKImage').style.display = 'block';
isLoginAccountUserNameOK = true;
} else {
document.getElementById('userNameLoginErrorHint').style.display = 'block';
document.getElementById('userNameLoginOKImage').style.display = 'none';
isLoginAccountUserNameOK = false;
}
refreshLoginAccountButtton();
}
function checkLoginPassword() {
var password = document.getElementById('password3');
var passwordLoginErrorHint = document.getElementById('passwordLoginErrorHint');
var passwordLoginOKImage = document.getElementById('passwordLoginOKImage');
var regex = /^.+$/;
if (regex.test(password.value)){
passwordLoginErrorHint.style.display='none';
passwordLoginOKImage.style.display='block';
isLoginAccountPasswordOK = true;
} else {
passwordLoginErrorHint.style.display='block';
passwordLoginOKImage.style.display='none';
isLoginAccountPasswordOK = false;
}
refreshLoginAccountButtton();
}
function manageCreatePasswordField(isOnFocus) {
managePasswordField(document.getElementById('password1Text'),document.getElementById('password1'), isOnFocus);
}
function manageCreatePasswordAgainField(isOnFocus) {
managePasswordField(document.getElementById('password2Text'),document.getElementById('password2'), isOnFocus);
}
function manageLoginPasswordField(isOnFocus) {
managePasswordField(document.getElementById('password3Text'),document.getElementById('password3'), isOnFocus);
}
function managePasswordField(textInput, pwdInput, isOnFocus) {
if (pwdInput.style.display == 'block') {
if (isOnFocus == false) {
if(pwdInput.value == '') {
pwdInput.style.display = 'none';
textInput.style.display = 'block';
}
}
} else if (textInput.style.display == 'block') {
pwdInput.style.display = 'block';
textInput.style.display = 'none';
pwdInput.focus();
}
}
function refreshCreateAccountButtton() {
if (isCreateAccountInfoOK()) {
document.getElementById('createAccountButton').disabled=false;
} else {
document.getElementById('createAccountButton').disabled=true;
}
}
function isCreateAccountInfoOK() {
if (document.getElementById('agree').checked == false) {
return false;
}
if (isCreateAccountUserNameOK == false) {
return false;
}
if (isCreateAccountPasswordOK == false) {
return false;
}
if (isCreateAccountPasswordAgainOK == false) {
return false;
}
if (isCreateAccountEmailOK == false) {
return false;
}
return true;
}
function refreshLoginAccountButtton() {
if (isLoginAccountInfoOK()) {
document.getElementById('loginAcccountButton').disabled = false;
} else {
document.getElementById('loginAcccountButton').disabled = true;
}
}
function isLoginAccountInfoOK() {
if (isLoginAccountUserNameOK == false) {
return false;
}
if (isLoginAccountPasswordOK == false) {
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="">
<table align="center"><tbody>
<tr>
<td colspan="2"><font style="font-size:20px;"><span><internationalization id="TalendForgeDialog.labelTitle.Ver1" /> <b><internationalization id="TalendForgeDialog.labelTitle.Ver2" /></b></span></font></td>
</tr>
<tr>
<td>
<ul>
<li style="font-size:12px;font-family:Arial"><internationalization id="TalendForgeDialog.labelMessageOnePart1" /><b><internationalization id="TalendForgeDialog.labelMessageOnePart2" /></b><internationalization id="TalendForgeDialog.labelMessageOnePart3" /></li>
<br/><br/>
<li style="font-size:12px;font-family:Arial"><internationalization id="TalendForgeDialog.labelMessageTwo1" /> <b><internationalization id="TalendForgeDialog.labelMessageTwo2" /></b> <internationalization id="TalendForgeDialog.labelMessageTwo3" /></li>
<br/><br/>
<li style="font-size:12px;font-family:Arial"><internationalization id="TalendForgeDialog.labelMessageThreeVer1" /> <b><internationalization id="TalendForgeDialog.labelMessageThreeVer2" /></b></li>
<br/>
</ul>
</td>
<td>
<contentProvider id="TALEND_FORGE_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</td>
</tr>
<tr>
<td colspan="2" style="align:center;">
<table class="formTable" align="center"><tbody><tr><td>
<div class="sharp color2" >
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<table align="center" id="createAccountDiv" border="0" cellspacing="0" cellpadding="0" class="formBackgroundClass" style="display:block;"><tbody>
<tr><td colspan="2" class="navTopLine">
<table align="center" class="formClass">
<tbody>
<tr class="formHeaderClass"><td colspan="3" ></td></tr>
<tr><td class="errorInfoClass"></td><td width="100%">
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" style="font-family:Arial" type="text" name="Username" id="name1" alt="" onfocus="if(this.value==textHintUserName){this.value='';}" onkeyup="checkUsername();" onblur="if(this.value==''){this.value=textHintUserName;}" value="Username"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td><td class="errorInfoClass">
<div id="userNameCreateErrorHint" style="display:block">*</div>
<div id="userNameCreateOKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</td></tr>
<tr><td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" style="font-family:Arial" type="text" id="email" name="Email" onkeyup="checkEmail();" onfocus="if(this.value==textHintEmail){this.value='';}" onblur="if(this.value==''){this.value=textHintEmail;}" value="Email"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td><td class="errorInfoClass">
<div>
<div id="emailErrorHint" style="display:block">*</div>
<div id="emailOKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</div>
</td></tr>
<tr><td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" id="password1Text" onfocus="manageCreatePasswordField(true)" style="display:block;font-family:Arial" type="text" value="Password"/>
<input class="textfield" id="password1" onblur="manageCreatePasswordField(false)" name="Password" onkeyup="checkPassword();checkConfirm();" style="display:none;font-family:Arial" type="password"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div></td>
<td class="errorInfoClass">
<div>
<div id="pwd1ErrorHint" style="display:block">*</div>
<div id="pwd1OKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</div>
</td></tr>
<tr><td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" id="password2Text" onfocus="manageCreatePasswordAgainField(true)" style="display:block;font-family:Arial;" type="text" value="Password again"/>
<input class="textfield" id="password2" onblur="manageCreatePasswordAgainField(false)" name="Password" onkeyup="checkConfirm();" style="display:none;font-family:Arial;" type="password"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td><td class="errorInfoClass">
<div>
<div id="pwd2ErrorHint" style="display:block">*</div>
<div id="pwd2OKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</div>
</td></tr>
<tr><td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<select class="selectField" id="countrylistid" style="width:100%;margin:-2px -18px -2px -2px;" name="select" >
<contentProvider id="INSERT_DATA" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</select>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td><td></td></tr>
<tr><td></td><td colspan="2" class="checkBoxStyles">
<input type="checkbox" class="checkbox" name="checkbox1" id="agree" onclick="refreshCreateAccountButtton();" ><font style="font-size:12px;"><internationalization id="TalendForgeDialog.agreeButtonVer1" /><a href="http://www.talendforge.org/Talend_Contributor_Agreement.txt" target="_blank"><internationalization id="TalendForgeDialog.agreeButtonVer2" /></a></font></input>
</td></tr>
<tr><td></td><td colspan="2">
<input type="checkbox" class="checkbox" name="checkbox2" id="improve" checked="checked" /><font style="font-size:12px;"><internationalization id="TalendForgeDialog.improveButton" /></font>
</td></tr>
<tr><td class="errorInfoClass"></td><td style="width:100%">
<div style="width:100%">
<b class="rtop">
<b class="r1"> </b>
<b class="r2"> </b>
<b class="r3"> </b>
<b class="r4"> </b>
<b class="r5"> </b>
</b>
<a id="createAccountButton" class="button" style="text-align:center;width:350px;" onClick="window.location.href=getCreateAccountUrl()" disabled="disabled" href="#"><internationalization id="TalendForgeDialog.createAccountButton.v1" /></a>
<b class="rbottom">
<b class="r5"> </b>
<b class="r4"> </b>
<b class="r3"> </b>
<b class="r2"> </b>
<b class="r1"> </b>
</b>
</div>
</td><td class="errorInfoClass"></td></tr>
</tbody>
</table>
</td></tr>
<tr><td width="50%" class="navRightLine">
<a style="text-align:center;" href="#" class="bottomButton" onClick="switchToView('useExsitingAccountDiv')"><internationalization id="TalendForgeDialog.ConnectExistingButton" /></a>
</td>
<td widht="50%">
<a style="text-align:center;" class="bottomButton" href="http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=SKIP"><internationalization id="TalendForgeDialog.skipButton.version1" /></a>
</td>
</tr>
</tbody>
</table>
<table id="useExsitingAccountDiv" border="0" cellspacing="0" cellpadding="0" align="center" class="formBackgroundClass" style="display:none;" ><tbody>
<tr class="formHeaderClass"><td colspan="2" ></td></tr>
<tr><td colspan="2" class="navTopLine">
<table align="center" class="formClass">
<tbody>
<tr><td class="errorInfoClass"></td>
<td style="width:100%">
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" style="font-family:Arial" type="text" name="Username" id="name2" onfocus="if(this.value==textHintUserName){this.value='';}" onkeyup="checkLoginUsername();" onblur="if(this.value==''){this.value=textHintUserName;}" value="Username"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td>
<td class="errorInfoClass">
<div id="userNameLoginErrorHint" style="display:block">*</div>
<div id="userNameLoginOKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</td>
</tr>
<tr>
<td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" id="password3Text" onfocus="manageLoginPasswordField(true)" style="display:block;font-family:Arial" type="text" value="Password"/>
<input class="textfield" id="password3" onblur="manageLoginPasswordField(false)" name="Password" onkeyup="checkLoginPassword();" style="display:none;font-family:Arial" type="password"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td>
<td class="errorInfoClass">
<div id="passwordLoginErrorHint" style="display:block">*</div>
<div id="passwordLoginOKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</td>
</tr>
<tr>
<td></td><td colspan="2" class="checkBoxStyles">
<input type="checkbox" id="improve2" class="checkbox" name="checkbox1" checked="checked" /><font style="font-size:12px;"><internationalization id="TalendForgeDialog.improveButton" /></font>
</td>
</tr>
<tr><td class="errorInfoClass"></td>
<td style="width:100%">
<div style="width:100%">
<b class="rtop">
<b class="r1"> </b>
<b class="r2"> </b>
<b class="r3"> </b>
<b class="r4"> </b>
<b class="r5"> </b>
</b>
<a id="loginAcccountButton" class="button" style="text-align:center;width: 325px;" disabled="disabled" onClick="window.location.href=getLoginAccountUrl()" href="#"><internationalization id="TalendForgeDialog.connectButton.v1" /></a>
<b class="rbottom">
<b class="r5"> </b>
<b class="r4"> </b>
<b class="r3"> </b>
<b class="r2"> </b>
<b class="r1"> </b>
</b>
</div>
</td><td class="errorInfoClass"></td>
</tr>
</tbody>
</table></td></tr>
<tr>
<td width="50%" class="navRightLine">
<a style="text-align:center;" href="#" class="bottomButton" onClick="switchToView('createAccountDiv')"><internationalization id="TalendForgeDialog.CreateNewButton" /></a>
</td>
<td width="50%">
<a style="text-align:center;" class="bottomButton" href="http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=SKIP"><internationalization id="TalendForgeDialog.skipButton.version1" /></a>
</td>
</tr>
</tbody></table>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td></tr></tbody></table>
</td>
</tr></tbody>
</table>
</form>
<script type="text/javascript">
document.getElementById('userNameCreateErrorHint').setAttribute('title', i18nMsg[0]);
document.getElementById('emailErrorHint').setAttribute('title', i18nMsg[1]);
document.getElementById('pwd1ErrorHint').setAttribute('title', i18nMsg[2]);
document.getElementById('pwd2ErrorHint').setAttribute('title', i18nMsg[3]);
document.getElementById('userNameLoginErrorHint').setAttribute('title', i18nMsg[0]);
document.getElementById('passwordLoginErrorHint').setAttribute('title', i18nMsg[2]);
document.getElementById('name1').value=textHintUserName;
document.getElementById('name2').value=textHintUserName;
document.getElementById('password1Text').value=textHintPassword;
document.getElementById('password3Text').value=textHintPassword;
document.getElementById('password2Text').value=textHintPasswordAgain;
document.getElementById('email').value=textHintEmail;
</script>
</body>
</html>
一.Browser类中不支持<span>标签.只支持<div>标签.
在浏览器中<span>标签和<div>标签的区别:
简单的说<span>和<div>标签就是一个区别.两个<div>标签在一起会自动换行.但是两个<span>在一起就是文字内容有多宽，就占用多宽距离，使用<span>标签和不使用一样效果。
大体上是<span>+<br>=<div>这种效果.
所以在HTML页面上本 应该用<span>标签的地方都用了<div>标签.刚开始进行布局设置的时候我没有想到Browser类是那么的弱,用了挺多的<span>标签.加上按照经验,form表单中使用<table>可能会整个table加载完才在网页中显示(我记得当时老师是这么说过,但是在网上没有在找到这种说法)....总之开始没有用<table>进行布局.
造成了布局上的很多混乱,后来还是用到了<table>才整的十分的规整.对网页设计布局不清楚还是建议用<table>标签.
在其中用到了<tbody>标签.其实这个<tbody>标签不用也是可以的,而且<tbody>标签和<thead>和<tfoot>标签经常一起使用.
下面是带有 thead、tbody 以及 tfoot 元素的 HTML 表格：
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<tbody> 标签仅得到所有主流浏览器的部分支持。
定义和用法
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
详细描述
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
提示和注释：
注释：<thead> 内部必须拥有 <tr> 标签！
注释：<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。
2.关于HTML中的专一字符:
| No. | 文字表記 | 10進表記 | 16進表記 | 文字 | Comment | |
|---|---|---|---|---|---|---|
| 001 | " | " | " | """ | quotation mark = APL quote | |
| 002 | & | & | & | "&" | ampersand | |
| 003 | < | < | < | "<" | less-than sign | |
| 004 | > | > | > | ">" | greater-than sign | |
| 005 | | " " | no-break space = non-breaking space |
<p><a href=http://localhost/output3.asp?name=例子&sex=男>显示的字符串1</a></p>
这里面的&是什么意思?
"&"就是'&' 因为&是转义符号,没有什么特别的意思.
& = &
在HTML中的&用&来表示.比如你要得到' '的字符串,而不是空格,那就用&nbsp
二.
Browser类对JS的支持.
在HTML中内嵌了一些常规的JS对表单的校验,但是实在是太弱了,连一些基本的对DOM的操作都有很多不支持.
我们利用仅仅支持的几个JS动作完成了对表单的校验.(这确实是唯一能够利用的方法.)
三.
RCP中对对特定的方法的访问方法:
这个地方我再特例总结了一个博客关于location.href几个方法的使用方法:
详见博客:
http://www.cnblogs.com/DreamDrive/p/4390842.html
window.location.href="http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CHECK_EMAIL&EMAIL=" + document.getElementById('email').value;
和
var urlPartConstant = "http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CREATE_ACCOUNT&";
以前从没有想到过http:这种超文本传输协议中会这么写....
以往的一个form表单用get的方式提交之后,对应的的url地址大都是这样的
file:///C:/Users/kongxiaohan/Desktop/biaodan/link/success.html?gender=male&interest=on&interest=on&interest=on
http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CREATE_ACCOUNT&