I am trying to install SAPUI5 on my local machine using XAMPP.
I copied the files to htdocs.
Starting localhost in Chrome I get the SAPUI5 SDK - Demo Kit Overview page.
After that I copied a sample code of the "HowTo in 20 seconds" code to notepad and saved it as HTML-Document.
Running this file in the browser only brings a white page.
I looked for the developer tools in Chrome and saw something like this:
"failed to preload 'sap.ui.core.library-preload': Not Found - sap.ui.ModuleSystem"
I hope you can help me fix this problem, so I can start with SAPUI5
Useful links regarding this topic, which I could recommend:
Describes how to run UI5 App locally: http://scn.sap.com/community/developer-center/front-end/blog/2014/01/13/ui5-mobile-splitapp-boilerplate
Describes to local Development with Eclipse: http://blog.mypro.de/2014/01/14/ui5-boilerplate-with-eclipse/
They both use the UI5 SplitApp Boilerplate from Github, which is an example app, with a base application structure: https://github.com/6of5/UI5SplitApp-Boilerplate
Perhaps this helps you to start local developement
Open a new notepad file. Save below code with html extension, eg: helloworld.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SAPUI5 in 20 Seconds</title>
<!- 1.) Load SAPUI5, select theme and control library ->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
<!- 2.) Create a UI5 button and place it onto the page ->
<script>
// create the button instance
var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function() { $("#btn").fadeOut(); });
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
// an alternative, more jQuery-like notation for the same is:
/*
$(document).ready(function() {
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press: function(){ $("#btn").fadeOut(); }
});
});
*/
</script>
</head>
<body class="sapUiBody">
<!- This is where you place the UI5 button ->
<div id="uiArea"></div>
</body>
</html>
Now open the file with any modern browser. FYI, We don't need any server to test this
You can configure Eclipse to work with SAPUI5 and use Apache Tomcat to run your application when working in a local environment.
Install Eclipse - http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/lunasr2
Install the Java Runtime Enviromnet - http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html
Install Apache Tomcat - http://tomcat.apache.org/download-80.cgi
Install SAPUI5 tools in Eclipse
Eclipse > Help > Install New Software
Add a new site in the "Available Software Sites" with the url:https://tools.hana.ondemand.com/luna
Select the new site in the Work with selection.
Expand the UI Development Toolkit for HTML5 & Select UI Development Toolkit for HTML5 (Developer Edition)
Next & Install (An Eclipse restart may be required)
Now that you have the SAPUI5 Tools installed. If you create a new Project, you now get a SAPUI5 Application Development option available.
Configure Apache Tomcat in the Servers
Add a Server, Window > Preferences > Server > Runtime Environment > Add
Select Apache Tomcat 8.0( or whichever version you are using) & select Next.
Select Tomcat installation directory & Finish.
Now you are all set to go. Create a new SAPUI5 Project(say myProject), add some code. To run it on tomcat, right-click on the Project, Run As > Run On Server. Select your Tomcat server, Next & Finish. You project will be up & running on your server at http://localhost:8080/myProject/
The "failed to preload" messges should not be fatal errors; the library preload files are an optional bundled optimization in order to reduce the number of HTTP requests.
https://github.com/SAP/openui5/issues/119
I think you can just ignore this warning. And I encounter Cross origin requests problem when loading Component.js, solved this problem using python -m SimpleHTTPServer. What you need is just a server , choose whatever you like.
Daniel I recommend you SAPUI Walkthrough as a starting point. This is a step by step guide / tutorial on how to build SAPUI5 applications, contains explanation about the cornerstones and best practices. For the basics you will only need an editor and a browser (no webserver). This git repo contains all the Walkthrough steps as separate branches.
SAP UI5 is only bunch of UI libraries that are used to develop your front end, just like other libraries like jQuery. Now, the question is how do you configure your Apache to serve these files? This is a basic Apache configuration to serve files, this page might be a good starting point.
Related
I have set a cache-control in the neo-app.json and it's working fine on production but I want to disable on dev mode (SAP Web IDE) without opening Chrome DevTools and enabling "disable cache".
Can someone help ?
Thanks
I guess the default run configuration itself has this in URL parameter ...&sap-ui-appCacheBuster=..%2F..%2F&sap-ui-xx-componentPreload=off&sap-ui-xx-viewCache=false#Shell-home
Not sure if I understand what your problem is, but we usually define separate launch-html pages, like one index.html for production and one index-webIDE.html for launching the app from the webIDE.
You can set up the configs like this:
Right-click the project -> Run -> Run Configurations
Then define your alternate starting html page for bootstrapping the app.
After compiler my application in GWT Super Dev Mode,
Run: "http://localhost:9876/" in IE 11,
see the followings,
GWT Code Server
1.Drag these two bookmarklets to your browser's bookmark bar:
Dev Mode On Dev Mode Off
................
3.Click "Dev Mode On" to start development mode.
when click "Dev Mode On", is shows "Can't find any GWT Modules on this page."
Anyone knows how to debug GWT in IE 11?
Thanks!
Phase 1
Compile your project
Host it in some webserver
Test it by surfing to this URL
Now phase 2
Run as superdevmode
The SuperDevMode page opens
Surf to the website you created in phase 1
Click the DevMode on bookmarklet you placed in your bookmarks bar
The app should compile
You are missing point 2 (which you left out here):
Visit a web page that uses one of these modules: [your_module_name]
So probably you didn't define a startup url for your run configuration (which IDE are you using?). You can do this with the argument -startupUrl index.html. The index.html should be placed in your output war directory.
Depeding on the port you configured (default 8888) you have to visit this html-page (with the module.js injected of course) to start the compilation. An example url would be:
127.0.0.1:8888/index.html
To debug your application in IE 11 you have to set breakpoints with GWT.debugger() for the client code. For the server code you can use the breakpoints of your IDE. To use the clientside-breakpoints you have to open the Developer Tools of your browser (F12 in case of IE11). There go to debugger/sources or however the tab is called in the case of your browser and debug your application client code directly in the browser. Keep in mind to use source maps to map your Java source code to the generated JS file.
I am trying to start debugging session using built-in WebStorm server after I created a new JavaScript debug configuration. I am using this project:
https://github.com/pauldessert/SeedTip.git
I am experiencing this weird problem that all of my locally referenced .css and .js files:
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/map.js"></script>
<script src="js/search.js"></script>
...could not be found/loaded by the browser. I show this in bellow image when I pressed F12 to see Chrome Dev tools (this action seems to disconnect WebStorm IDE support extension) and you can see failed requests.
You can see in the console tool window in WebStorm that there were get request for .css and .js local files. When I press any of these links it opens ok in my Chrome browser.
E.g. this file does exist:
http://localhost:63342/SeedTip/css/style.css
When I use an external node server e.g. grunt-serve and create JS debug configuration with URL: http://localhost:9000/index.html pointing to:
F:\Projects\Angular\v2\SeedTip and run this debug it works.
Note: I have the same problem with enabling Angular 2 apps to load with systemjs.
I tried setting but it doesn't help.
I was a known bug, that was fixed in the latest build.
So far the documentation doesn't include the set up of GWT project in IDEA, and my limited google skill can't find the solution. Is it possible?
If you generated your libgdx project using the gdx-setup.jar file, then you should import your project by using the following link: https://github.com/libgdx/libgdx/wiki/Gradle-and-Intellij-IDEA
HTML: View -> Tool Window -> Terminal, in the terminal, make sure you are in the root folder of your project. Then execute gradlew.bat html:superDev (Windows) or ./gradlew html:superDev (Linux, Mac OS X). This will take a while, as your Java code is compiled to Javascript.
Once you see the message The code server is ready, fire up your browser and go to http://localhost:8080/html. This is your app running in the browser! When you change any of your Java code or assets, just click the SuperDev refresh button while you are on the site and the server will recompile your code and reload the page! To kill the process, simply press CTRL + C in the terminal window.
Once this bug in the Gradle tooling API is fixed, we can simplify running the HTML5 by using the Gradle integration. At the moment, the Gradle process will run forever even if canceled.
Also just a heads up, after you have run the gradle command it might say something like this:
The code server is ready.
Next, visit: http://localhost:9876/
Building 91% > :html:superDev
Even though it says 91%, don't worry it will still work, just go here to run it: http://localhost:8080/html/, NOT the url mentioned in the log.
Also to deploy you need to run ./gradlew html:dist to generate production code, you want to copy everything inside ./html/build/dist/ to your server. Running that command produces the code in that directory. https://gamedev.stackexchange.com/a/82588/54396
I was able to make GWT work with libgdx simply by:
downloading (http://www.gwtproject.org/download.html) the GWT SDK,
extracting it,
then in the project structure -> project-name-html -> dependencies,
just press the + and add the extracted GWT directory
A dialog appears and I just unticked all the samples
The "Dependencies Storage Format" needed to be "Intellij IDEA", not Eclipse for this to work for me.
Currently I am developing a GWT project by using GWT 2.4.0 in eclipse 3.7. I deploy the app inside Tomcat 7. It run perfectly for the past 2 months.
However, now I am running into a problem which I unable to trace the problem. Here is the source code for "welcomeGWT.html".
<!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 name='gwt:module' content='com.haircare101.cesapp.Main=com.haircare101.cesapp.Main'>
<title>101 HairCare: Customer Excellence System</title>
</head>
<body>
<script type="text/javascript" src="com.haircare101.cesapp.Main/com.haircare101.cesapp.Main.nocache.js"></script>
</body>
</html>
As the tomcat started, I type the corresponding URL into browser and it shows me this page with no error (no error shows inside Tomcat log files). But it unable to direct me to the specified GWT Main Entry Point (I saw this source file when I can "View Source" of browser).
** I have no compilation error, no deployment error or no runtime error.
Can anybody tells me the reason why it stuck in this page? Many thanks and appreciate!
Cheers,
Ryan C.
Besides using google chrome, enable firebug to debug your javascript and find out what's wrong. Apparently you have an array acess problem.
Most probably, it is in your GWT entry point and not in javascript (don't forget that all the client package code is transformed into javascript)