How to embed JPro App in html (outside javafx project) or php file?

ctoabidmaqbool commented 1 year ago

Hi! My JPro app is listening on the URL: http://localhost:8070.

I want to embed this app to my index.html or index.php file. (Note: this web page is not included in my java project, it's located on some other web server e.g. Apache)

I tried the code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My JPro App</title>
        <link href="http://localhost:8070/layout/image/pos.png" rel="icon">

        <link rel="manifest" href="http://localhost:8070/manifest.json">
        <link rel="apple-touch-icon" href="http://localhost:8070/layout/image/pos.png">
        <meta name="theme-color" content="#014473">

        <meta charset="UTF-8">
        <meta name="description" content="My embeded JPro App.">
        <meta name="keywords" content="jpro, app, php, javafx, apache">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <link rel="stylesheet" type="text/css" href="http://localhost:8070/jpro/css/jpro.css">
        <script src="http://localhost:8070/jpro/js/jpro.js" type="text/javascript"></script>
    </head>

    <body>
        <div>
            <jpro-app href="ws://localhost:8070/app/default" fxContextMenu="false" fullscreen="true" nativeScrolling="true" snapshot="auto" userSelect="true"></jpro-app>
        </div>
    </body>

</html>

ctoabidmaqbool commented 1 year ago

Currently JPro App not started on new HTML or PHP page outside of JPro. Only loading is happening, some litte errors on console windows is showing!

FlorianKirmaier commented 1 year ago

It should be working the way you've described it. The index.html should also work. Are the ports are correct? At one point you mention that jpro runs on 8080, but then you are using 8070.

If you are getting an error in the console, I assume it's somehow connecting. So maybe the error is related? Does the application work, when you open it directly on 8070?

ctoabidmaqbool commented 1 year ago

It should be working the way you've described it. The index.html should also work. Are the ports are correct? At one point you mention that jpro runs on 8080, but then you are using 8070.

If you are getting an error in the console, I assume it's somehow connecting. So maybe the error is related? Does the application work, when you open it directly on 8070?

Ah! Sorry, I forget that my jpro app is listening on 8070 not 8080, I have corrected the question.

Yes if I open this url on browser, it's working fine without any error: e.g. http://localhost:8070

ctoabidmaqbool commented 1 year ago

I have tried this in sample project HelloJPro, it's working fine as expacted.

But the the case of routing sample e.g. jpro-routing-sample it's working but little bit tricky.

For example something like this works:

addRoute((s) -> { switch(s) {
            case "":
            case "/":
            //     return new Redirect("/landing");
            // case "/landing":
                return new LandingPage(WebAPI.isBrowser() ? WebAPI.getWebAPI(stage) : null);
            case "/info":
                return new InfoPage(WebAPI.isBrowser() ? WebAPI.getWebAPI(stage) : null);
            case "/fxml":
                return new FXMLPage(WebAPI.isBrowser() ? WebAPI.getWebAPI(stage) : null);
            default:
                return new LandingPage(WebAPI.isBrowser() ? WebAPI.getWebAPI(stage) : null);
        }});

HelloJProApp.java

Note: How to open some page by default when embed jpro app in external page, e.g. /info page must be open by default in info.html external page and /fxml must be open in external fxml.html page???

FlorianKirmaier commented 1 year ago

You can create a file named "defaultpage" -> https://github.com/JPro-one/jpro-routing-sample/blob/master/src/main/resources/jpro/html/defaultpage

This file is basically used for all paths, then it works in all cases.

ctoabidmaqbool commented 1 year ago

I know that defaultpage is used for common setting of all pages (effects all pages).

But I have different case Let these are pages within jpro app eg. `,/,/landing,/info,default:`,

addRoute((s) -> { switch(s) {
    case "":
    case "/":
        return new Redirect("/landing");
    case "/landing":
        return new LandingPage(WebAPI.isBrowser() ? WebAPI.getWebAPI(stage) : null);
    case "/info":
        return new InfoPage(WebAPI.isBrowser() ? WebAPI.getWebAPI(stage) : null);
    case "/fxml":
        return new FXMLPage(WebAPI.isBrowser() ? WebAPI.getWebAPI(stage) : null);
    default:
        return new LandingPage(WebAPI.isBrowser() ? WebAPI.getWebAPI(stage) : null);
}});

And these are external html pages: index.html, landing.html, info.html

How can I the the JPro, that when external index.html page is opened it show / page of JPro and so on, when external landing.html page is opened then show /landing jpro's page and when info.html page is opened then show /info by default?

ctoabidmaqbool commented 1 year ago

More over links on JPro app only works internal jpro links, is it's possible that link within jpro app affects external pages links?

I mean just like Ifram jpro apps works internally on jpro apps container. can jpro app works outside of jpro contaner on html page especially linking side?

Or external html page within jpro container?

In simple words integrate external and jpro apps container...

FlorianKirmaier commented 1 year ago

More over links on JPro app only works internal jpro links, is it's possible that link within jpro app affects external pages links? No, JPro doesn't influence external links. When setting index.html etc., it only affects when opening the JPro Server directly.

What you can do, is open an IFrame of the JPro Server - but that is usually not what's wanted.

If you have an external Server, you can either mirror the logic by creating the same index.html pages. Or you can write a script that asks the JPro Server what it's serving for a given HTML URL.

JPro-one / JPro-Tickets

How to embed JPro App in html (outside javafx project) or php file? #139