I'm using Dojo 1.6.1 on JSP pages.
<html>
<%#include file="includes/head.jsp" %>
<body class="tundra">
<div
id="appLayout"
class="demoLayout"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'headline'"
style="width: 100%; height: 100%">
<div
class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
<%#include file="includes/headline.jsp" %>
</div>
<div
class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center'">
.........
contents of head.jsp
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/dojo.1.6.1/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/dojo.1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css">
<style type="text/css">
</style>
<script src="<%=request.getContextPath()%>/dojo.1.6.1/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true">
</script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
When deployed, I get javascript error.
Could not load class 'dijit/layout/ContentPane'
when inspected with firebug.
Seems that dijit.layout.ContentPane is not in the classpath. Try to add it or try to change the require for a define to see if fix.
Here is the example.
Related
I am creating an email using Spring Boot and Apache FreeMarker. Is it possible to include CSS in the email without needing to have a huge tag in the header?
Here is an example .ftl file that I would like to link a .css file to:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="style-in-css-doc">
Some text to be styled
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can simply include the css file into your template by putting css code in another ftl file and then include it to your main template with include directive
<#include path>
Previously I have worked just with JSP and Apache Tiles and now I'm trying to create Thymeleaf template for the first time. The problem I faced is that I have no idea how to insert custom header, footer and other sections into default.html. Here is the code example.
default.html:
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<title>Default template</title>
<link rel="stylesheet" type="text/css" href="../static/css/app.css" th:href="#{/css/app.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" th:href="#{/css/bootstrap.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myCss.css" th:href="#{/css/myCss.css}"/>
</head>
<body>
<header id="header" layout:fragment="header">
HEADER
</header>
<section id="sidemenu" layout:fragment="sideMenu">
SIDE_MENU
</section>
<section id="site-content" layout:fragment="siteContent"></section>
<footer id="footer" layout:fragment="footerTemplate"></footer>
</body>
</html>
In default.html I have 'siteContent' which is provided for inserting all of application's html files, and 'header', 'sideMenu' and 'footer' sections that have to be implemented in separate corresponding html files (templates) and inserted into default.html.
index.html:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<title>Index</title>
</head>
<body>
<div layout:fragment="siteContent">
<h1>Hello world!</h1>
</div>
</body>
</html>
footer.html:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{default}">
<head>
<title>Footer Template</title>
</head>
<body>
<div layout:fragment="footer">
Copyright © 2017
</div>
</body>
</html>
This is an example of footer.
SiteContent area works fine. Footer's 'Copyright © 2017' is supposed to be imported into default.html's footer area, but it doesn't.
The solution is found: I should have used
'footer id="footer" layout:include="footerTemplate"'
instead of
'footer id="footer" layout:fragment="footerTemplate"'
By the way, the examples, listed on thymeleaf's website never worked, but the correct decision wasn't there.
Why bootstrap does not work ? I download the folders from site and I add it in the root of the WebContent like WebContent/bootstrap/css..js..fonts
The jsp looks like this
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto'
rel='stylesheet' type='text/css'>
<title>Comment Box</title>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div class="row" id="featuresheading">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table ta................etc
but why the table does not appear as it suposed? please help
Try a full publish to get your bootstrap files into your application server.
I got bootstrap to work in a .jsp in Eclipse. Here's my configuration:
Here's the markup in the .jsp...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Bootstrap</title>
<link href="bootstrap-3.3.6/dist/css/bootstrap.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div class="container">
<h1>Test Bootstrap</h1>
<table class="table table-striped">
<tr>
<td>Bootstrap</td>
</tr>
<tr>
<td>is working</td>
</tr>
</table>
</div>
</body>
</html>`
`You don't need to reference bootstrap two times. Just pick the full or the minified version. Good luck.
I've tried everything to select this facebook button, by css, by partial link, by xpath. Can someone show me the syntax? HTML Code is below, the element is highlighted in blue.
This is the html for facebook Iframe login
<html>
<head>
<style type="text/css">
<title>My Photo Tab</title>
<base href="/">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=signin_annotation/exm=client,plusone/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_2" async="">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=plusone/exm=client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_1" async="">
<script type="text/javascript" async="" src="//assets.pinterest.com/js/pinit_main.js">
<script id="adblade-sdk" src="http://web.adblade.com/js/ads/async/show.js">
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/sdk.js">
<script id="google-platform-js" src="http://apis.google.com/js/platform.js" gapi_processed="true">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script async="" src="//www.google-analytics.com/analytics.js">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_0" async="">
<script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/jquery.simplecolorpicker.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/style.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/shared.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/home.index.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/home.modals.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/languageSize.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/chosen/chosen.min.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/lp2.css?gb=0.0.3">
<meta content="http://myphototab.com" property="og:url">
<meta content="Your social photos on your new tab page!" property="og:title">
<meta content="http://cdn.myphototab.com/content/images/social.jpg" property="og:image">
<meta content="My Photo Tab" property="og:site_name">
<meta content="Turn your browser's boring new tab page into your personalized photo gallery!" property="og:description">
<meta content="summary_large_image" name="twitter:card">
<meta content="MyPhotoTab" name="twitter:site">
<meta content="MyPhotoTab" name="twitter:creator">
<meta content="Your social photos on your new tab page!" name="twitter:title">
<meta content="Turn your browser's boring new tab page into your personalized photo gallery!" name="twitter:description">
<meta content="http://cdn.myphototab.com/content/images/social.jpg" name="twitter:image:src">
<link type="text/css" rel="stylesheet" href="http://staticd.cdn.adblade.com/css/zones/zone1101.css">
<style type="text/css">
<script type="text/javascript" async="" src="http://edge.quantserve.com/quant.js">
<script type="text/javascript" async="" src="http://b.scorecardresearch.com/beacon.js?c1=8&c2=6864322&c3=&c4=&c5=&c6=&c10=&c15=">
<link type="text/css" rel="stylesheet" href="http://staticd.cdn.adblade.com/css/zones/zone1101.css">
<style type="text/css">
<script type="text/javascript" async="" src="http://edge.quantserve.com/quant.js">
<script type="text/javascript" async="" src="http://b.scorecardresearch.com/beacon.js?c1=8&c2=6864322&c3=&c4=&c5=&c6=&c10=&c15=">
<style type="text/css">
<style type="text/css">
</head>
<body class="isFF isWindows loggedout page-loaded modal-open Large en" style="background-image: none; background-color: rgb(192, 192, 192); overflow-y: auto;" data-twttr-rendered="true">
<input id="IsFromExtension" type="hidden" value="true">
<div class="pageWrapper" ng-view="">
<section id="homeView">
<div class="container body-content" style="">
<div id="myModal" class="modal fade in" data-backdrop="static" data-keyboard="false" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: block; visibility: visible;">
<div onload="showModal()" ng-include="partialUrl.Base">
<div id="modalWelcome" class="modal-dialog" style="display: block;">
<div class="modal-content gray-border">
<button class="close" ng-click="welcomeClose({trackingData: ['2', 'index-welcome', 'welcome-popup-close', '']})" data-dismiss="modal" type="button">
<div class="modal-body" style="">
<div class="modal-body-inner">
<div class="language">
<div class="title center langDir" style="direction: ltr;">
<div class="subtitle2 center langDir" translate="" style="direction: ltr;">My Photo Tab allows you to see your social and other photos on your browser's new tab page - FREE!</div>
<div class="socialButtons">
<div class="socialButtonsInner">
<div class="fblogin">
<fblogin>
<div class="fbLoginInner">
<fb:login-button class=" fb_iframe_widget" onlogin="FacebookLoginState();" scope="public_profile,email,user_photos,user_friends,publish_actions" size="xlarge" login_text=" Login with Facebook " fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=860682337328409&container_width=147&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20Login%20with%20Facebook%0A%20%20%20%20&scope=public_profile%2Cemail%2Cuser_photos%2Cuser_friends%2Cpublish_actions&sdk=joey&size=xlarge">
<span style="vertical-align: bottom; width: 290px; height: 39px;">
<iframe class="" width="1000px" height="1000px" frameborder="0" name="f138e5757ce176" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" style="border: medium none; visibility: visible; width: 290px; height: 39px;" src="http://www.facebook.com/v2.1/plugins/login_button.php?app_id=860682337328409&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F6Dg4oLkBbYq.js%3Fversion%3D41%23cb%3Df135579120b2446%26domain%3Dmyphototab.com%26origin%3Dhttp%253A%252F%252Fmyphototab.com%252Ff21d55794e16b1c%26relation%3Dparent.parent&container_width=147&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20Login%20with%20Facebook%0A%20%20%20%20&scope=public_profile%2Cemail%2Cuser_photos%2Cuser_friends%2Cpublish_actions&sdk=joey&size=xlarge">
<!DOCTYPE html>
<html id="facebook" class="" lang="en">
<head>
<body class="plugin gecko win x1 Locale_en_US" dir="ltr">
<div class="_li">
<div class="pluginSkinLight pluginFontHelvetica">
<div id="u_0_0" class="pluginLoginButton pluginLoginButtonXlarge" style="width: 300px;">
<div>
<div id="u_0_1" class="_4z_b _4z_8 _4z_c" tabindex="0" role="button">
<table class="uiGrid _51mz" cellspacing="0" cellpadding="0">
<tbody>
<tr class="_51mx">
<td class="_51m-">
<td class="_51m- _51mw">
<span class="_4z_9">
<span class="_4z_f fwb">Login with Facebook</span>
First switch to the iframe using: (As Saifur told name seems to be dynamic hence identifying element based on title)
driver.switchTo().frame(driver.findElement(By.xpath("//iframe[contains(#title,'Facebook Social Plugin')]")));
then click on the span as
new WebDriverWait(driver, 10).until(ExpectedConditions.presenceOfElementLocated(By.xpath("//span[contains(.,'Login with Facebook')]"))).click();
That's no button, that's a span.
Try: //span[text()='Login with Facebook']
Try xpath text based search
//span[contains(text(),'Login with Facebook')]
However, depending on the element load time you may need to add some explicit wait as well.
By xpath = By.xpath("//span[contains(text(),'Login with Facebook')]");
WebElement myDynamicElement = (new WebDriverWait(driver, 10))
.until(ExpectedConditions.presenceOfElementLocated(xpath));
myDynamicElement.click();
Edit
Just saw that page contains iframe. So, you need to use switchTo() to set focus into iframe before start looking for the element. See the API doc
//Looks like the name of ifame is also dynamic
//driver.switchTo().frame("fbf1ab674");
//assuming that's the only iframe on
driver.switchTo().frame(driver.findElement(By.cssSelector('iframe')));
driver.findElement(By.xpath("//span[contains(text(),'Login with Facebook')]")).click();
//switch back to default content when done working inside iframe
driver.switchTo().defaultContent();
I suspect for the same reason linkText and cssSelector you have used did not work.
Also, please try to post html instead of image for future reference which is much easier to read and find possible issues.
With Firefox (firebug) and Chrome (chromebug), u can copy the xpath of each selected item. Very useful when developing with Selenium!
Check out this wikihow page and u will like it!
http://m.wikihow.com/Find-XPath-Using-Firebug
Meanwhile it should also be available in Firefox inspector.
I have a GWT application that need to set html field from java code(GWT)
i tried this but element is always null
Element element = Document.get().getElementById("elementID");
if (element != null)
{
GWT.log("found element with id:" + "elementID");
// some code....
}
Project structure:
|---Main.html: page that loads compiled module
|---page.html: the page that need to be updated from GWT
So my question, is it possible to set field in page.html from GWT code, if so how??
Note: page.html is show after clicking anchor defined like this:Anchor
anchor = new Anchor(
"message",
false,
"page.html",
"_blank");
EDIT:
Page.html:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">
<div align="center" width="100%" height="80%">
<table height="80%" width="40%">
<tr valign="bottom">
<td align="center">
<div id="progressbar"></div>
</td>
<td><a id="cancel" href="#"><img src="close_icon_x.png" height="32px" width="32px"/></a></td>
</tr>
<tr><td valign="top"><div id ="elementID"></div>
</td><td></td></tr>
</table>
</div>
</body>
</html>
Main.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" language="javascript" src="project/MyProject.nocache.js"></script>
<link media="all" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
type="text/javascript" charset="utf-8"></script>
<link type="text/css" rel="stylesheet" href="Style.css">
</head>
-->
<body>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
I think the solution is similar to one in this post:
GWT: DOM.getElementById doesn't work!
Indeed Riley is correct, where did you define the elementId ?
You can set the field. The problem solution is in why you do get a null pointer.
UPDATE: Are you sure the actual page.html code has been rendered before the invocation of getElementID else you will always get Null.