Hey guys, I'm just starting out with GWT and am getting the following error when I run the project in Eclipse
19:36:16.084 [ERROR] [adaptivgwt]
Warning:
com.google.gwt.user.client.ui.RootPanel
descendants will be incorrectly
positioned, i.e. not relative to their
parent element, when
'position:static', which is the CSS
default, is in effect. One possible
fix is to call
'panel.getElement().getStyle().setPosition(Position.RELATIVE)'.
java.lang.IllegalStateException:
com.google.gwt.user.client.ui.RootPanel
is missing CSS
'position:{relative,absolute,fixed}'
at com.google.gwt.user.client.ui.AbsolutePanel.verifyPositionNotStatic(AbsolutePanel.java:279)
at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:118)
at com.ivstel.adaptiv.client.AdaptivGWT.loadLogin(AdaptivGWT.java:29)
at com.ivstel.adaptiv.client.AdaptivGWT.onModuleLoad(AdaptivGWT.java:21)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native
Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown
Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown
Source)
at java.lang.reflect.Method.invoke(Unknown
Source)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:183)
at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:510)
at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352)
at java.lang.Thread.run(Unknown Source)
This is what my entry point looks like:
public class AdaptivGWT implements EntryPoint {
private static AdaptivGWT singleton;
public static AdaptivGWT get() {
return singleton;
}
public void onModuleLoad() {
singleton = this;
loadLogin();
}
public void loadLogin() {
RootPanel.get("login").clear();
RootPanel.get("main").clear();
LoginGWT login = new LoginGWT();
RootPanel.get("login").add(login, 10, 10);
}
public void loadMain(User user) {
RootPanel.get("login").clear();
MainGWT main = new MainGWT();
RootPanel.get("main").add(main, 10, 10);
}
}
The HTML file.
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype 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="AdaptivGWT.css">
<title>Adaptiv</title>
<script type="text/javascript" language="javascript" src="adaptivgwt/adaptivgwt.nocache.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<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>
<div id="login"></div>
<div id="main"></div>
</body>
</html>
Using the position arguments (i.e. 10, 10) with the add method requires the elements you want to add the GWT widgets to as child element, also be positioned elements (i.e. they must have a property: position:). In your case the div's (both with id main and login) have no position. Better use add(main) instead. If you want to position your element 10 pixels to left/top use css margin or padding (depending on your use case).
On a side note, it's not necessary to have both a 'login' and 'main' div's, you could simply use one div, or directly add it to the body, i.e. use get(). That way you have the full control in GWT, instead having part of the structure in the html file.
Related
I'm getting plain text while displaying the code from the codemirror textarea and I want to that in the form of code highlighted format. Any plz help me.
I want to print highlighted code which was highlighted in the codemirror editor I'm getting that code from codemirror editor by using editor.getValue();:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo_Format</title>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="lib/util/formatting.js"></script>
<script src="lib/css.js"></script>
<script src="lib/xml.js"></script>
<script src="lib/javascript.js"></script>
<script src="lib/htmlmixed.js"></script>
<link rel="stylesheet" href="lib/docs.css">
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
}
td {
padding-right: 20px;
}
</style>
</head>
<body>
<h1></h1>
<form>
<textarea id="code" name="code">
package org;import java.io.IOException;import javax.servlet.http.*;#SuppressWarnings("serial")
public class BasicChatServlet extends HttpServlet{public void doGet(HttpServletRequest req,HttpServletResponse resp)
throws IOException{resp.setContentType("text/plain");resp.getWriter().println("Hello, world");}}
</textarea>
</form>
<table>
<tr>
<td>
<a href="javascript:autoFormatSelection()">
<button> Format </button>
</a>
<button id="copy_button">copy</button>
<button id="show">show</button>
</td>
<div id="code_show">
</div>
</tr>
</table>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#copy_button").click(function(){
$("textarea").select();
document.execCommand('copy');
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: false,
indentUnit: 4
});
CodeMirror.commands["selectAll"](editor);
function getSelectedRange() {
return { from: editor.getCursor(true), to: editor.getCursor(false) };
}
function autoFormatSelection() {
var range = getSelectedRange();
var x=editor.autoFormatRange(range.from, range.to);
}
$("#show").click(function(){
var program=editor.getValue();
$("#code_show").text(program);
});
</script>
</body>
</html>
(Not sure if this answers your question because it's not very clear -- it would be helpful if you only provided the necessary code for the question)
Each mode (which styles your CodeMirror instance) lives in a subdirectory of the mode/ directory, and typically defines a single JavaScript file that implements the mode. Loading such file will make the language available to CodeMirror through the mode option, which you declare while creating your CodeMirror instance:
CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: false,
indentUnit: 4,
mode: 'text/css'
});
You'll need to ensure your different mode files are added to a mode folder in your library. In your case the css.js, xml.js, javascript.js and htmlmixed.js files need to be in a new folder called lib/mode (so css.js has a filepath of lib/mode/css.js for example).
You can inspect each mode's demo to see what string you must pass to the mode: option in order for it to be called. Here's the css demo for example
You can go one step further and change the mode on the fly for editing multiple text file-types: Multiple modes Codemirror
I am having problems figuring out how to handle events when using Vue together with Electron. It may seem stupid, but I have spent time reading the docs, testing Vue instances and directives in the browser which works fine but the same principles won't work in my electron desktop app (this is so much different then Php OOP).
I use the electron-vue boilerplate, set it up, works like a charm. Created a template and a component (TopMenu), now I need to handle the click event of the menu buttons placed into my TopMenu component, but no matter how I try, I get:
[Vue warn]: Property or method "say" is not
defined on the instance but referenced during render. Make sure to
declare reactive data properties in the data option. (found in
component )
[Vue warn]: Handler for event "click" is undefined.
./LandingPageView/TopMenu.vue:
<template>
<div>
<button type="button" name="button" v-on:click="say">BUTTON</button>
</div>
</template>
main.js:
import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'
import App from './App'
import routes from './routes'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true
const router = new Router({
scrollBehavior: () => ({ y: 0 }),
routes
})
/* eslint-disable no-new */
new Vue({
methods: {
say: function () {
alert()
}
},
router,
...App
}).$mount('#app')
App.vue:
<style>
#import url(https://fonts.googleapis.com/css?family=Lato:400,700);
* {
margin: 0;
padding: 0;
}
html,
body { height: 100%; }
body {
align-items: center;
background:
radial-gradient(
ellipse at center,
rgba(255, 255, 255, 1) 0%,
rgba(229, 229, 229, .85) 100%
);
background-position: center;
font-family: Lato, Helvetica, sans-serif;
}
</style>
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import store from 'src/vuex/store'
export default {
store
}
</script>
index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- webpack builds are automatically injected -->
</body>
</html>
Hello you need to put the methods in the same component that the template:
<template>
<div class="example" #click="say">say method</div>
</template>
<script>
export default {
methods: {
say () {
console.log('Hello world!')
}
}
}
</script>
Take a look in the vue documents: https://v2.vuejs.org/v2/guide/
I am trying to run the admin console but I click on the admin button a blank browser opens without anything in it. What am I missing? I have looked at the FAQs and the forum but still could not solve the issue. I have the server.properties file and I have added the sqlserver.jar to the lib
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='mysgwt'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User' />
<inherits name="com.smartgwt.tools.SmartGwtTools" />
<inherits name="com.smartgwtpower.SmartGwtPower" />
<inherits name="com.smartgwtpower.tools.Tools" />
<!-- Specify the app entry point class. -->
<entry-point class='org.kai.client.MySGWT' />
<!-- Specify the paths for translatable code -->
<source path='client' />
<source path='shared' />
Code:
public class MySGWT implements EntryPoint {
private HLayout hLayout;
public void onModuleLoad() {
if (!GWT.isScript()) {
KeyIdentifier debugKey = new KeyIdentifier();
debugKey.setCtrlKey(true);
debugKey.setKeyName("D");
Page.registerKey(debugKey, new KeyCallback() {
public void execute(String keyName) {
SC.showConsole();
}
});
}
GWT.log("init OnLoadModule()...", null);
hLayout = new HLayout();
IButton adminButton = new IButton("Admin Console");
adminButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
com.smartgwtpower.tools.client.SCPOWER.openDataSourceConsole ();
}
});
IButton visualButton = new IButton("Visual Console");
visualButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
com.smartgwtpower.tools.client.SCPOWER.openVisualBuilder();
}
});
hLayout.setMembersMargin(20);
hLayout.addMember(adminButton);
hLayout.addMember(visualButton);
hLayout.draw();
}
}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="MySGWT.css">
<title>MySGWT Project</title>
<script> var isomorphicDir = "mySGWT/sc/"; </script>
<script type="text/javascript" language="javascript" src="mysgwt/mysgwt.nocache.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<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>`
This is the eclipse logging
log4j:WARN No appenders could be found for logger (org.apache.jasper.compiler.JspRuntimeContext).
log4j:WARN Please initialize the log4j system properly.
[WARN] Aliased resource: file:/C:/myworkspace/mySGWT/war/mySGWT/sc/skins/Enterprise/images/button/button_Over_stretch.png==fil e:/C:/myworkspace/mySGWT/war/mysgwt/sc/skins/Enterprise/images/button/button_Over_stretch.png
[WARN] Aliased resource: file:/C:/myworkspace/mySGWT/war/mySGWT/sc/skins/Enterprise/images/button/button_Over_stretch.png==fil e:/C:/myworkspace/mySGWT/war/mysgwt/sc/skins/Enterprise/images/button/button_Over_stretch.png
[WARN] 404 - GET /mySGWT/sc/skins/Enterprise/images/button/button_Over_stretch.png (127.0.0.1) 1450 bytes
I have a html, say A.html. I am invoking A.html inside of A.html inside an IFRAME.
A.html
<html>
.....
<IFRAME>
A.html (same domain, etc as A.html)
</IFRAME>
</html>
This is a GWT app. This IFRAME is a popup, and when the user closes (clicks a close button) this popup (which is also loading the A.html as you can see above), I want to
fire an event to display some message on the outer A.html which means I need an access to codes outside of IFRAME. How can I achieve this?
Thanks
Since your iframe contents are being loaded from the same domain, you can call javascript functions on the containing page. I'm assuming that you're asking about calling the code outside the iframe from GWT. If so, then you can use JSNI.
For example, given the JSNI method:
private final native void postClosedEvent()
/*-{
$wnd.functionDefinedOutside();
}-*/
You could call the method within a GWT ClickHandler:
closeButton.addClickHandler(new ClickHandler()
{
public void onClick(ClickEvent e)
{
postClosedEvent()
}
});
This assumes a function defined using javascript in the containing page, for instance:
<script type="text/javascript">
var functionDefinedOutside =
function()
{
alert("GOT MESSAGE FROM iframe");
};
</script>
Note: If the iframe contents are loaded from a different domain, you can achieve the same result using postMessage.
IFRAME in the GWT module is defined as:
<iframe src="/temp.jsp"></iframe>
GWT module (Outer class):
public class Test implements EntryPoint {
public void onModuleLoad() {
registerMethod();
}
private static native void registerMethod() /*-{
$wnd.mt = $entry(#test.client.Test::show(Ljava/lang/String;));
}-*/;
public static void show(String value){
Window.alert("Calling from inside IFRAME " + value);
}
}
JSP inside the IFRAME: temp.jsp
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>temp</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<div id="content">
Holla commo estas from the iframe!
</div>
<script type="text/javascript">
window.alert("inside iframe");
window.parent.mt("passing a value to a parent!!!");
</script>
</body>
</html>
I'm using Eclipse for the first time, wondering which way to go about templating it? I know a little about tiles and jsp's, zero about databases.
the site:
static header, nav, sidebar, and footer
a few different content jsp's
main question is --> I have one content section with one layout but 100's of varying jsp's...how should I go about this?
thanks
I'm not sure how Struts and databases are related to this, but basically, <jsp:include> is the best what you can get in JSP.
Basic kickoff example of /WEB-INF/template.jsp
<!DOCTYPE html>
<html lang="en">
<head>
<title>${title}</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="header">
header
</div>
<div id="menu">
menu
</div>
<div id="content">
<jsp:include page="/WEB-INF/${view}.jsp" />
</div>
<div id="footer">
footer
</div>
</body>
</html>
And the controller Servlet:
#WebServlet(urlPatterns={"/pages/*"})
public class Controller extends HttpServlet {
#Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String view = request.getPathInfo().substring(1);
String title = titles.get(view); // Imagine that it's a map or something.
request.setAttribute("view", view);
request.setAttribute("title", title);
request.getRequestDispatcher("/WEB-INF/template.jsp").forward(request, response);
}
}
Invoke it by
http://localhost:8080/contextname/pages/foo
and provide a /WEB-INF/foo.jsp file which should represent the content. E.g.
/WEB-INF/foo.jsp
<h1>This is Foo!</h1>
<p>Lorem ipsum</p>