Liferay portlet + Single page html, css, javascript - javascript

I have a static Single Page - html, css and javascript files. I have tested by deploying it into apache-tomcat and it works.
I would like to convert this html, css and javascript as Porlet.
So far, I have done the followings,
Created the liferay - maven project (Through eclipse) [I have build and tested, this porlet is working when i deploy as war in LifeRay)
In liferays maven project: ..src/main/webapp/ folder i have created a new folder called myapp
Have pasted all the html, css, javascripts inside the myapp folder
In the view.jsp file, i have included the myapp/index.html file.
Build the war and deployed into liferay.
Here, it is successfully picking the myapp/index.html in liferay porlet. However, it is not picking any resources inside the index.html (css, javascript).
Here, how can i make this porlet up and working correctly. Please assist. Kindly note that, i have tested this static page in independent tomcat server, it works fine. So that means, all the resource path that I have given is correct in index.html

Related

React VS Code external scripts

I'm using VS Code with React and I wanted to try this: codepen.io/andystent/pen/GRgjBdJ?editors=0010
In the settings at codepen appear 5 links to 5 external scripts which this pen is using so it can work. I downloaded the JS from this pen, saved it in a file and imported it in /src folder, but I do not know how and where to add those 5 external scripts so my script could work. Can you please help me? How can I add external scripts to my react project? And where to add them (index.html/App.js/index.js etc)?

Laravel files/folders not showing up in Public directory

I want to integrate TradingView's charting library in my Laravel project.
I have copied the charting_library folder to the Public folder of Laravel.
After that, I have referenced the charting_library.min.js file from Blade files in view and the other resources related to it.
<script type="text/javascript" src="{{ asset('tradingview/charting_library/charting_library.min.js') }}">
All js files loads successfully, but the problem is that this charting_library.min.js calls an HTML file from a subdirectory where it returns a 404 Not Found error.
http://localhost:8000/charting_library/static/fa-tv-chart.37***ee.html 404 (Not Found)
Here is the file/folder structure:
I have checked loaded resources from chrome's dev tools.
Laravel loads these referenced JS files, but it doesn't load any other files which these files have requested and just returns 404.
The charting_library folder exists in the directory, it's just something related to Laravel. I think it can't see the directory's contents.
I have tried to modify the .htaccess file but still no luck.
I even tried to mix charting_library.min.js via Webpack, changing autoload, but still, nothing happens.
I solved this issue by:
Moving the project to wamp's www folder.
Moving charting_library and datafeeds folder to the root of laravel's public. It seems
tradingview's widget constructor uses relative path's for building
whole chart. So when you place the charting_library inside a folder,
it doesn't resolve other assets. These folders should be exactly in
the root.

Is there a way to define a new directory for files in Oracle

When using Angular the output creates files in folders such as "dist", "src", etc.
Is there a way in Apex 4.1 to tell the system to look for and use files within sub-directories [inside the images folder?]?
Reason being, I want to create a Dashboard App in Apex 4.1 that integrates an Angular App built using node.
So build the App using Node.js and Angular, then output to Production.
Then take those output files (HTML, CSS, JS) and incorporate them into an Apex 4.1 Theme that uses Oracle database to populate widgets in the dashboard.
This has been easy when using jQuery mobile, but getting Angular to work has been an issue so far due to the directory structure of the output files.
I have been able to get the <body ng-app="app"> code into the <body> tag, just haven't figured out how to tell Apex to use a new folder path in the theme editor.
So far all I can do is use #WORKSPACE_IMAGES# and call files within the images folder:
<script src="#WORKSPACE_IMAGES#jquery.mobile-1.3.0-beta.1.js"></script>
I need to be able to call files like this:
<script src="#WORKSPACE_IMAGES#/dist/index.html"></script>
<script src="#WORKSPACE_IMAGES#/src/index.html"></script>
etc. etc., which doesn't work.
Older versions of Angular seem to create only one output folder: src; and inside that folder is only one .html file, one .css file and one .js file.
Newer angular versions don't seem to support one folder with all the files in it?

serving static content in code structure generated by yeoman for angular fullstack

I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.

Error with smartGWT

With smart gwt 4 when I run the application I get the following error
Core SmartClient JavaScript libraries appear not to be loaded.
If inheriting the NoScript SmartGWT modules, verify that the HTML file includes tags to load the SmartClient module .js files from the appropriate location within the WAR.
By default these files are present under [GWT app name]/sc/modules/.
com.smartgwt.client.core.JsObject$SGWT_WARN: Core SmartClient JavaScript libraries appear not to be loaded.
If inheriting the NoScript SmartGWT modules, verify that the HTML file includes tags to load the SmartClient module .js files from the appropriate location within the WAR.
By default these files are present under [GWT app name]/sc/modules/.
I have set the following jar in my classpath
smartgwt.jar
smartgw-skin.jar
and add the inhert in my .gwt.xml file
And in my jps file i add the script
Thanks in advance
Make sure all of the paths are correct and the files are there in your WAR. It's also important to understand how the GWT directory structure works inside WAR files (the relative paths are not always what you think they should be).
Have you tried using GWT.getModuleBaseURL() or GWT.getHostPageBaseURL() for your paths?
Check these other posts for more info:
Path for images folder in GWT project
https://groups.google.com/forum/#!topic/google-web-toolkit/PxdjqjMIlVY

Categories

Resources