I'm trying to create a very simple Spring Boot 1.3.3 Web application with Thymeleaf and embedded Tomcat using OpenUI5 as the client-side javascript UI library... but I can't seem to get OpenUI5 to load the data-sap-ui-resourceroots. Is this supposed to be possible?
I started by going to start.spring.io and generating a maven project with Web and Thymeleaf dependencies and then added in a basic OpenUI5 structure with an XML view. I followed the following tutorials:
Serving Web Content with Spring MVC
OpenUI5 Walkthrough - Step 4: XML Views
I ended up with the following project structure:
root
├── src
│ ├── main
│ │ ├── java
│ │ │ └── myPackage
│ │ │ ├── controllers
│ │ │ │ └── LandingPageController.java
│ │ │ └── Application.java
│ │ └── resources
│ │ ├── application.properties
│ │ ├── static
│ │ │ └── webapp
│ │ │ └── view
│ │ │ └── App.view.xml
│ │ └── templates
│ │ └── landingPage.html
│ └── test
│ └── java
│ └── myPackage
│ └── ApplicationTests.java
│
└── pom.xml
Even though it's all basically standard from those tutorials, for completeness, I'll include my source code:
Application.java:
package myPackage;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
#SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
LandingPageController.java:
package myPackage.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
#Controller
#RequestMapping("/")
public class LandingPageController {
#RequestMapping(method=RequestMethod.GET)
public String redirect() {
return "landingPage";
}
}
landingPage.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({
viewName : "sap.ui.demo.wt.view.App"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
App.view.xml:
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text text="Hello World"/>
</mvc:View>
My application.properties file is empty and the pom.xml is exactly what was generated by the Spring Initializr.
I believe the issue is with this line in the landingPage.html, but I don't know what else to put other than "./":
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}
I was able to get this to work up to step 3 in the OpenUI5 tutorial; however, it seems that once I have to define the view in an XML file, the OpenUI5 library cannot locate it. I don't know where else to put the App.view.xml file, I would have thought that anywhere under the static folder would be fine...
I'm not sure if this has to do with the fact that I'm using an embedded Tomcat, but I'd like this to work using embedded Tomcat.
Any suggestions on how I can make this work?
I am not familiar with Spring or any of the mentioned Java frameworks, but I can try to help you with the resourceRoots.
With that setting, you can tell the OpenUI5 framework, where to find certain resources.
A setting of "sap.ui.demo.wt": "./" means that everything starting with sap.ui.demo.wt can be found in the same directory as the current page / file. Any further .<something> means a subfolder with that name.
You can define the resourceRoots relative to your html file or absolute by using for example:
"sap.ui.demo.wt": "/resources/static/webapp"
In that case your view with the name sap.ui.demo.wt.view.App will be found (or at least looked for) at /resources/static/webapp/view/App.view.xml.
Related
My Airflow's Git repository has the following structure:
├── dags/
│ └── example-dag1.py
│ └── example-dag2.py
├── include/
│ ├── operators/
│ │ └── my_operator.py
│ └── sensors/
│ └── my_sensor.py
│ └── dag_utils.py
└── tests/
I know I can sync DAGs from a Git repository as described here in the following way:
dags:
gitSync:
enabled: true
repo: git#github.com/<username>/<private-repo-name>.git
branch: <branch-name>
subPath: ""
sshKeySecret: airflow-ssh-secret
extraSecrets:
airflow-ssh-secret:
data: |
gitSshKey: '<base64-converted-ssh-private-key>'
What if I also want to sync custom operators, sensors and generally any other custom, reusable code from the include folder? How can I do it? Seems to be impossible right now but that's hard to believe as writing custom operators is standard in Airflow.
I'm developing a micro frontend, for this I use Webpack 5 Module Federation and ngx-build-plus builder on an Angular 14 application.
When I build my project I get the following files:
dist
├── my-webco
│ ├── 106.js
│ ├── 136.js
│ ├── 497.js
│ ├── .
│ ├── .
│ ├── .
│ ├── icon-font.woff
│ ├── icon-font.woff2
│ ├── index.html
│ ├── main.js
│ ├── remoteEntry.js
│ ├── style.css
So I want to import the main.js file into another application this way:
<script src="https://my-host/my-webco/main.js" type="text/javascript"></script>
<my-web-component></my-web-component>
The webcomponent works well but I have a 404 error on the font because my font is on the path "https://my-host/my-webco/font-icons.woff" and my application will load it on the path "https://my-host/font-icons.woff".
do you know where I can set up this path?
R blogdown is super convenient to publish Rmarkdown report using netlify.
In order to build a private blog and control access, I found netlify identity widget could be a solution. Useful reference are:
Authenticate users with Netlify Identity
netlify identity widget
From the README file in netlify identity widget
"You can add controls for the widget with HTML:
<!DOCTYPE html>
<html>
<head>
<title>A static website</title>
<!-- include the widget -->
<script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
<!-- Add a menu:
Log in / Sign up - when the user is not logged in
Username / Log out - when the user is logged in
-->
<div data-netlify-identity-menu></div>
<!-- Add a simpler button:
Simple button that will open the modal.
-->
<div data-netlify-identity-button>Login with Netlify Identity</div>
</body>
</html>
You can use this global object like this:
// Open the modal
netlifyIdentity.open();
// Get the current user:
// Available after on('init') is invoked
const user = netlifyIdentity.currentUser();
// Bind to events
netlifyIdentity.on('init', user => console.log('init', user));
netlifyIdentity.on('login', user => console.log('login', user));
netlifyIdentity.on('logout', () => console.log('Logged out'));
netlifyIdentity.on('error', err => console.error('Error', err));
netlifyIdentity.on('open', () => console.log('Widget opened'));
netlifyIdentity.on('close', () => console.log('Widget closed'));
// Unbind from events
netlifyIdentity.off('login'); // to unbind all registered handlers
netlifyIdentity.off('login', handler); // to unbind a single handler
// Close the modal
netlifyIdentity.close();
// Log out the user
netlifyIdentity.logout();
// Refresh the user's JWT
// Call in on('login') handler to ensure token refreshed after it expires (1hr)
// Note: this method returns a promise.
netlifyIdentity.refresh().then((jwt)=>console.log(jwt))
// Change language
netlifyIdentity.setLocale('en');
Which blogdown file should I add above code into?
How to integrate netlify identity widget into R blogdown?
Thanks a lot!
UPDATE:
I found two approaches might be helpful:
netlify-plugin-password-protection, which applies staticrypt.
Another tutorial: Password-protected pages on Netlify.
For reproducible example, the Hugo Theme I used in blogdown is pulp theme, the file structure is the following:
.
└── pulp
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── assets
│ ├── css
│ │ ├── markdown-dark.css
│ │ ├── markdown.css
│ │ ├── style-dark.css
│ │ ├── style.css
│ │ └── syntax-highlight.css
│ └── js
│ ├── jquery-3.3.1.min.js
│ ├── jquery.mark.es6.min.js
│ ├── lunr.js
│ └── search.js
├── exampleSite
│ ├── .gitignore
│ ├── config.toml
│ ├── content
│ │ └── blog
│ │ ├── emoji-support.md
│ │ ├── markdown-syntax.md
│ │ ├── math-typesetting.mmark
│ │ ├── placeholder-text.md
│ │ └── rich-content.md
│ └── static
│ ├── css
│ │ └── custom.css
│ ├── img
│ │ ├── avatar.jpg
│ │ └── favicon.ico
│ └── js
│ └── custom.js
├── images
│ ├── logo.png
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ ├── list.json
│ │ ├── single.html
│ │ └── terms.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ ├── head.html
│ └── header.html
├── package.json
├── resources
│ └── _gen
│ └── assets
│ ├── css
│ │ ├── style0.css_d11fe7b62c27961c87ecd0f2490357b9.content
│ │ └── style0.css_d11fe7b62c27961c87ecd0f2490357b9.json
│ └── js
│ ├── bundle0.js_d11fe7b62c27961c87ecd0f2490357b9.content
│ └── bundle0.js_d11fe7b62c27961c87ecd0f2490357b9.json
├── static
│ ├── .DS_Store
│ ├── categories
│ │ └── img
│ │ ├── avatar.png
│ │ ├── clear.png
│ │ ├── favicon.ico
│ │ └── search.png
│ └── img
│ ├── avatar-border.svg
│ ├── avatar.jpg
│ ├── bu.png
│ ├── clear.png
│ ├── favicon.ico
│ └── search.png
├── theme.toml
└── yarn.lock
I have this project currently running on ASP.NET MVC and using AngularJS for the front end.
I am using bower and gulp but want to migrate away to use new tooling, if possible webpack.
I have started the migration process, where all bower packages have been moved to package.json.
I need help figuring out how to set up webpack. And how the changes will affect the .NET Bundle.Config.cs file in App_Start.
Basic Project structure:
MyApp/
├── App_Start/
│ └── BundleConfig.cs
│
├── Controllers/
│ └── HomeController.cs
│
├── Content/
│ └── node_modules/
│ └── package.json
│
├── ng-app/
│ └── app.js
│ └── run.js
│ └── routes.js
│ └── controllers/
│ └── homeCtrl.js
│
├── ng-views/
│ └── home.html
│
└── Views/
├── Home/
│ └── Index.cshtml
│
└── Shared/
└── _Layout.cshtml
If anyone has some pointers/ articles/ guides, whatever help is welcomed.
If you need more info on my setup please ask.
Question:
How do I set up Typescript with Symfony with the minimum amount of configurations changes to Symphony’s configuration files?
Here are the points that this solution should solve:
Typescript MVC Pattern in a private typescript directory:
src > XBundle > Resources > private > typescript
Javascript bundles compiled in :
src > XBundle > Resources > public > js
the private directory should consist of multiple apps for different pages. (If an app requires it's own tsconfig.json file, that's fine)
an app is simply (for example) home.app.ts that imports (for example) a search.component.ts and a chat.component.ts
Compiled "apps" should be located in the public > js repository mentioned in point (2) and should be named (example taken from point (4)) home.bundle.js
In the public > js folder, there should only be x.bundle.js files
Adding the bundles to my twig files, and calling my view should immediately run the bundle. I should not have to add an extra script to call the "module" (this is the reason why I want to avoid AMD / System )
What I'm not looking for:
I'm not looking for a solution with react and angular but a general solution using the /web directory (or even the Resources directory in a bundle) at the root of a symfony project.
Most articles regarding this talk about symfony2 and try integrating react and angular.
I'm not looking for an installation tutorial for npm and tsc.
I don't need an automatic compile. I use Phpstorm so it does it automatically anyway.
I ended up using webpack for this to work. Props to #zerkms.
This is a work in progress, and could be better optimized.
Installation:
Install webpack, I personally installed it globally. (Unsure how to configure Phpstorm to use webpack, there doesn't seem to be a direct built in system for it)
Go to src > XBundle > Resources > private > typescript
npm init -y
Install the dev dependencies: npm install --save-dev awesome-typescript-loader and npm install --save-dev typescript
Side note:
#Morgan Touverey Quilling, recommends installing webpack locally, your choice:
npm install --save-dev webpack
Configuration:
Here is my folder structure:
├── XBundle/
│ ├── Controller
│ ├── Resources
│ │ ├── config
│ │ ├── private
│ │ │ ├── typescript
│ │ │ │ ├── components
│ │ │ │ │ ├── auth
│ │ │ │ │ │ ├── auth.component.ts
│ │ │ │ │ ├── search
│ │ │ │ │ │ ├── search.component.ts
│ │ │ │ ├── services
│ │ │ │ │ ├── http.service.ts
│ │ │ │ ├── node_modules
│ │ │ │ ├── package.json
│ │ │ │ ├── webpack.config.js
│ │ │ │ ├── tsconfig.json
│ │ ├── public
│ │ │ ├── js
│ │ │ │ ├── build
│ │ │ │ │ ├── auth.bundle.js
webpack.config.js
This config could probably be simplified much further.
For every bundle, a new config should be created pointing to the main file. Remember to rename the output bundle.
There shouldn't be more than one bundle per page. If you need (for example) the auth.bundle.js and the search.bundle.js on the home page, you should probably create a home.component.ts that uses auth.component.ts and search.component.ts and create a config in webpack.config.js to create the home.bundle.js
const path = require('path');
//Common configurations
let config = {
module: {
loaders: [
{ test: /\.ts$/, loader: 'awesome-typescript-loader' }
]
},
resolve: {
extensions: ['.ts']
}
};
//Copy and paste this for as many different bundles
//as required
let authConfig = Object.assign({}, config, {
entry: path.join(__dirname, 'components/auth','auth.component.ts'),
output: {
path: path.join(__dirname, '../../public/js/build'),
filename: 'auth.bundle.js',
library: 'XApp'
}
});
//Add each config here.
module.exports = [
authConfig
];
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"sourceMap": true,
"moduleResolution": "node",
"lib": ["dom", "es2015", "es2016"]
},
"exclude": [
"node_modules"
]
}
Run
Type webpack in the directory where webpack.config.js resides.
Adding JS to your Twig file
Somewhere in one of your templates.
{% block javascripts %}
{# More stuff here #}
{% javascripts
'#XBundle/Resources/public/js/build/auth.bundle.js'
%}
{# More stuff here #}
{% endjavascripts %}
{% endblock %}
And run the following commands for any new bundles.js created for the first time in the root directory of your symfony project:
php bin/console assets:install
php bin/console assetic:dump