i have a developed gwt application and have it in production.
i would like to continue development in dart as developing/debugging
seems way better to me than with gwt.
i already have written some modules in pure dart and am able to integrate the compiled js in the gwt app. communication between gwt<->dart via json also works fine.
now i would like to integrate some dart/polymer elements but did not have any success doing it.
is anybody doing this? is it possible? any hints?
this is my gwt host page. how do i get polymer imported/initialised/started?
<!doctype html>
<html>
<script type="text/javascript" src="app/app.nocache.js"></script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<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 id="cwm" 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>
<!-- DART integration-->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="dart_application/web/dart_plain.dart" type="application/dart"></script>
<script src="dart_application/web/packages/browser/dart.js" type="text/javascript"></script>
</body>
</html>
my original setup as posted was to include the dart main file into the entry point html file of the gwt project.
script src="dart_application/web/dart_plain.dart" type="application/dart"></script>
in this setup i copied the outpout from pub build into a subdirectory of the gwt web app tree (dart_applikation)
this worked fine for plain dart.
what I do now is:
1) make the entry point html file of the dart/polymer app the entry point file for the gwt
app. (this is done by a script copying the dart2js/pub build output to the gwt tree)
2) include the gwt js file in the main html file of the dart polymer project at the very beginning of the file.
<script type="text/javascript" src="app/app.nocache.js"></script>
3) include also all the additional js files gwt needs in the main dart html file.
following are the steps top produce a app.war file that includes my gwt and dart-polymer app:
a) pub build the dart-polymer project
b) compile the gwt project
c) copy the "build/web" directory to the root of the webapps directory of the gwt project.
d) zip all together to one war file.
a bit hacky, but it seems to work.
Related
I am writing a simple application in Web IDE Personal Edition which is to be deployed on On-Premise ABAP system.
App.view.xml
<mvc:View
controllerName="databinding1.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
>
<Button text="Submit"/>
<Input
value=""
placeholder="Full Name"
width="50%"
/>
</mvc:View>
Application Name : DataBinding1
Application is stored in "workspace" folder.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Data Binding1</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"databinding1": "./"
}'
></script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.ui.core.ComponentContainer({
"name":"databinding1"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
Error Message in Console:
If I remove the controllerName from App.view.xml, then the view loads successfully.
You try to use the sdk provided by the sapui5 page, this is a request to another server which is not within the same system. The Error is a typical behaviour of the browser to prevent cross site scripting.
You can fix your issue with the sapui5 proxy resource servlet for your sap resource (also works for odata, but this is another servlet => simple proxy servlet).
You should setup a resource servlet. Within your application you have to distinguish if you should use the proxy or not, check out the link:
https://sapui5.hana.ondemand.com/#docs/guide/2d3f5fb63a2f4090942375df80abc39f.html
Remote path for sapui5 sdk stored within sap:
http://<yourdomain>/sap/public/bc/ui5_ui5/resources/sap-ui-core.js
Make sure to activate the repository in TA: SICF
default_host>public>bc>ui5_ui5 right click and press activate
For those who actually want to handle cross-origin resources while developing: Web IDE offers a proxy mechanism which we can leverage by adding destination files:
Connect Remote Systems in SAP Web IDE Personal Edition
Example of odata.org Destination File
For the question author:
[...] cannot load https://sapui5.hana.ondemand.com/resources/sap.ui.core.mvc.Controller.
That error message shows that the browser tried to load a file named sap.ui.core.mvc.Controller.js which doesn't exist (404). The main cause is not the same-origin policy here.
In the App.controller.js file, you must have defined the dependencies with an invalid syntax. Instead of dots (.), use slashes (/) in between as the API sap.ui.define awaits an array of module paths (not module names).
sap.ui.define([
"sap/ui/core/mvc/Controller" // instead of "sap.ui.core.mvc.Controller"
], function(Controller) {
...
});
I've recently stumbled upon an annoying problem and can't figure out what could be the cause. I'm working on a ionic hybrid app and since yesterday everything worked fine: I was able to deploy it on my android phone, I could debug it on my browser. Today I open up my project, fire the ionic serve and the browser greets me with a blank screen.
I get the address: localhost:8100/, but it really should be localhost:8100/#/app/sessions
The console log report no errors neither the net log.
This is the source code of the index.html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular/angular.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
I tried to start a new ionic project but the outcome is the same: I get a blank page.
I've set the ionic serve address to localhost; I,ve tried to load all angular and ionic module but to no avail. Do you have any suggestions?
On a closer inspection I found this error (I've skimmed the log):
"Error: [$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module starter.controllers due to:
[$injector:modulerr] Failed to instantiate module starter.services due to:
[$injector:modulerr] Failed to instantiate module ngResource due to:
**[$injector:nomod] Module 'ngResource' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.**
I wasn't really sure why but angular coudn't find the ngResource module. A quick check show me spelling wasn't the real problem.
For some reason (on whitch I'm still investigating) publishing the app destroyed angular-resource.js and the resulting .min was lacking the code.
Anyway, when I tried to reload the whole thing, I was loading ngResource version 1.3.15 and angular.js version 1.3.14, making them not working.
So, I was failing Computer Science 101: "always check the versions".
I've set all the version to 1.3.15 and all is working like a charm.
For what it is worth, we had a very similar problem: ionic serve -c had no negative behavior, no error output, simply loaded a blank screen.
The problem in our case was that there was a "!" in the full path of the working directory.
Changing the working directory to a path without a "!" solved this issue.
Original solution here
I have built a new project using GWT. If I run the project from the Intellij IDEA IDE after a few seconds the 'clickme' control appears in the browser and everything works as expected.
I have created an artifact for a application war file, which is created in the expected ../out/artifact folder.
When I deploy the .war file to apache tomcat, and click on the webapp in the apache tomcat manager I just get the list of files under the webapps/MySampleApplication file location.
If I select the MySampleAppliacation.html file I see the text in that html file but the 'clickme' button never appears.
I have done a lot of googling but have not solved the problem. I checked and the gwt-user.jar file is in the lib folder of the webapp.
This is the GWT control file
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
"http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src /gwt-module.dtd">
<module rename-to="MySampleApplication">
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.mySampleApplication.client.MySampleApplication'/>
<!-- Specify the app servlets. -->
<servlet path='/MySampleApplicationService' class='com.mySampleApplication.server.MySampleApplicationServiceImpl'/>
</module>
This is the project html page
<html>
<head>
<title>Wrapper HTML for App</title>
<link type="text/css" rel="stylesheet" href="MySampleApplication.css">
<!-- -->
<!-- This script is required bootstrap stuff. -->
<!-- -->
<script type="text/javascript" language="javascript"
src="MySampleApplication/MySampleApplication.nocache.js"></script>
</head>
<body>
<h1>Sample Application</h1>
<p>
This is an example of a host page for the App application.
You can attach a Web Toolkit module to any HTML page you like,
making it easy to add bits of AJAX functionality to existing pages
without starting from scratch.
</p>
<table align="center">
<tr>
<td id="slot1"></td>
<td id="slot2"></td>
</tr>
</table>
</body>
</html>
For good measure, here are all the files under webapps for this project
MySampleApplication\index.html
MySampleApplication\MySampleApplication
MySampleApplication\MySampleApplication.css
MySampleApplication\MySampleApplication.html
MySampleApplication\WEB-INF
MySampleApplication\MySampleApplication\0651E8A6D149EEF5E6386F087426CF0A.cache.html
MySampleApplication\MySampleApplication\0CE0D511D927FEB65BA6F6D96F24D2D4.cache.html
MySampleApplication\MySampleApplication\3C8C88AE707243315A0D688BD60B8CCA.cache.html
MySampleApplication\MySampleApplication\4A4AEE91A97252CBA376B9B27863F6ED.cache.html
MySampleApplication\MySampleApplication\644584634D68B773C08A73FA726669A5.gwt.rpc
MySampleApplication\MySampleApplication\clear.cache.gif
MySampleApplication\MySampleApplication\D003F7646BFEF3B8BE562132E77EFE59.cache.html
MySampleApplication\MySampleApplication\hosted.html
MySampleApplication\MySampleApplication\MySampleApplication.nocache.js
MySampleApplication\WEB-INF\classes
MySampleApplication\WEB-INF\web.xml
MySampleApplication\WEB-INF\classes\com
MySampleApplication\WEB-INF\classes\com\mySampleApplication
MySampleApplication\WEB-INF\classes\com\mySampleApplication\client
MySampleApplication\WEB-INF\classes\com\mySampleApplication\MySampleApplication.gwt.xml
MySampleApplication\WEB-INF\classes\com\mySampleApplication\server
MySampleApplication\WEB-INF\classes\com\mySampleApplication\client\MySampleApplication$1.class
MySampleApplication\WEB-INF\classes\com\mySampleApplication\client\MySampleApplication$MyAsyncCallback.class
MySampleApplication\WEB-INF\classes\com\mySampleApplication\client\MySampleApplication.class
MySampleApplication\WEB-INF\classes\com\mySampleApplication\client\MySampleApplicationService$App.class
MySampleApplication\WEB-INF\classes\com\mySampleApplication\client\MySampleApplicationService.class
MySampleApplication\WEB-INF\classes\com\mySampleApplication\client\MySampleApplicationServiceAsync.class
MySampleApplication\WEB-INF\classes\com\mySampleApplication\server\MySampleApplicationServiceImpl.class
About the only other thing would be the IDEA project module settings......
I am VERY appreciative or your help Andy.
I'm having trouble using the GWT-Grails plugin. I tried to follow this example exactly, but I end up having this error:
| Error 2012-10-28 00:25:49,567 [http-bio-8080-exec-2] ERROR resource.ResourceMeta - Resource not found: /gwt/g3wt.Application/g3wt.Application.nocache.js
I get this error after I enter these commands: ( I am simply following this guide here )
>grails create-app g3wt
>cd g3wt
>grails install-plugin gwt
>grails create-gwt-module g3wt.Application
>grails create-gwt-page main/index.gsp g3wt.Application
>grails run-app
>grails run-gwt-client
this is the index.gsp code (which is autogenerated anyway):
<html>
<head>
<!-- Integrate with Sitemesh layouts -->
<meta name="layout" content="main" />
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Example title (change this!)</title>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" src="${resource(dir: 'gwt/g3wt.Application', file: 'g3wt.Application.nocache.js')}"></script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic ui -->
<!-- -->
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
<!-- Add the rest of the page here, or leave it -->
<!-- blank for a completely dynamic interface. -->
</body>
</html>
I understand that the nocache.js cannot be found, so I thought I could try to see where exactly it is. However, using the eclipse search function, it shows that the file is not created at all. Although there is a file named application.js.
Why is the nocache.js not created, and how do I fix this? I've been stumped for a while now, and it's frustrating.
I'm using gwt plugin 0.7.1 and grails 2.1.1, with eclipse 4.2 and a Linux machine.
I was having the same problem and found the answer here.
buildconfig.groovy is in the conf folder. Just comment out the plugin where the runtime is ":resouces..."
Okay, so I got the error to disappear by first running
grails> compile-gwt-modules
Now a different problem occurs. The front-end gwt codes I made, aren't displayed.
You can add in you Confing.groovy:
grails.resources.adhoc.excludes = ['**/gwt/**']
This will solve the problem. But if you use plugin version 0.8 this issue should be resolved.
I just created a new IceFaces application and I'm trying to include a navigation bar in all of the pages. When I use the jsp:directive.include tag the file is included, but when I use jsp:include it does not seem to be loaded. In fact, when I check the HTML source code in my browser, it's like the included file was completely empty. I do not want to use jsp:directive.include because it will not automatically show any updates to the included file.
My environment: Eclipse 3.5, Tomcat 6, JSF 1.2, IceFaces 1.8.
Steps to reproduce the problem and pieces of code:
create a new Dynamic Web Project with the following options:
Target runtime: Apache tomcat v6.0
Dynamic web module version: 2.5
Configuration: ICEfaces project
create a new ICEFaces JSPX file -- the home file. Some code:
<jsp:directive.page contentType="text/html;charset=ISO-8859-1" />
<f:view >
<ice:outputDeclaration doctypeRoot="HTML"
doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN"
doctypeSystem="http://www.w3.org/TR/html4/loose.dtd" />
<html>
<head>
<title>test file</title>
<link rel="stylesheet" type="text/css"
href="./xmlhttp/css/rime/rime.css" />
</head>
<body>
<jsp:directive.include file="./vertical_navigation.jsp" /> <!-- working -->
<jsp:include page="./vertical_navigation.jsp" /> <!-- not working, no error though -->
</body>
</html>
</f:view>
create the file to be included, also as a new ICEFaces JSPX file. Simplified code:
<ice:form>
<ice:panelGrid columns="1" width="152">
<ice:graphicImage url="./img/image.jpg"></ice:graphicImage>
<ice:panelCollapsible expanded="true">
<f:facet name="header">
<ice:panelGroup>
<ice:outputText value="Customer"/>
</ice:panelGroup>
</f:facet>
<ice:panelGrid columns="1">
<ice:commandLink action="customer"><ice:outputText value="Customer name" /></ice:commandLink>
</ice:panelGrid>
</ice:panelCollapsible>
</ice:panelGrid>
</ice:form>
</body>
</html>
</f:view>
Some remarks:
I'm completely new to JSF, so forgive me for any obvious mistake.
In the home file (the first one) I'm not using both tags at the same time. I pasted both here just to show that I am trying both options.
I created both files as "ICEFaces JSPX file", but the second one was assigned the .jsp extension.
When I use the directive.include tag, the included file is loaded. But if I change it, it's not automatically republished.
To start, you have to separate and distinguish several technologies:
JSP is a Java based view technology which allows you to write HTML/CSS/JS in and use taglibs to call backend Java code and/or control the output flow.
JSPX is the same as JSP, but forces you to write code in XML format. JSP-specific tags are replaced by tags in XML format. JSPX is also called "JSP Document". Here is a basic tutorial which outlines the differences in tags.
JSF is a component based MVC framework which provides components in flavor of taglibs which outputs HTML/CSS/JS.
You cannot use <jsp:include> in a JSPX page. You have to transform the JSPX page into a JSP page. You need to rename the file .jspx to .jsp and replace JSPX specific tags by JSP tags. Here's a kickoff example for JSP with JSF/IceFaces:
<%# page pageEncoding="ISO-8859-1" %>
<%# taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%# taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%# taglib uri="http://www.icesoft.com/icefaces/component" prefix="ice"%>
<!DOCTYPE html>
<f:view>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<jsp:include page="include.jsp" />
</body>
</html>
</f:view>