Magnolia app which runs in frame - magnolia

I'd like to create a magnolia app which will show content from extra page in the frame. I think it's possible, but cannot find any example how to do it.

Yes, it is indeed possible. What you are looking for is creation of custom app using EmbeddedPageSubApp. More details at documentation
If you want simple example, try to import and start this app. It should start simple JS game within your subapp.
Remember that any page you try to load in iframe will need to use same protocol as the main Magnolia app does or browser will most likely block it. In the example I gave, it would work only over http, but not over https, if you want to show something while people are connecting to your Magnolia over https, you would need to set url to be https too.
HTH,
Jan

Related

Alternative to iframes to make a split screen admin area

I am developing an admin dashboard where I want to have a files navigation system that shall be always available from the main admin area and stay independently loaded from the main admin area.
What's the problem?
While interacting with the dashboard, since the approach is SSR with PHP, the user will be executing page requests to update a post, go to a different view, etc. So the files navigation area will have to be reloaded on every request and I don't want that, since the backend PHP will have to fetch all files and build the files tree over and over again for each request.
I though about doing the following:
The wrapper page (admin dashboard) contains two iframes in a split viewport:
iframe MAIN
iframe FILE-NAVIGATOR
The user can use and navigate on each side of the viewport without affecting the other area.
For example, navigate through files and folders without moving away from an open editor on the main iframe.
Or save the editor contents and go do something else without having to constantly refresh and re-render the files navigation area.
Both iframe contents will be hosted under the same domain, so communication between them won't be an issue.
I want to go the SSR route via PHP, since this project does not deserve the effort of building a modern SPA and I need to reuse a lot of already existing PHP code.
But still, I want to do it as good as possible.
So the question is:
Do you know if there is a cleaner/better way to achieve this, better than iframes?
I am a bit worried about all browsers supporting iframes since it's in fact an old thing.
I think your best bet would be to go with a single page application; like React or Angular. This would somehow force you to build your backend system as an API server and letting most of the heavy UI lifting to JavaScript running in the client.
Some time ago I started working on a side project that would be an Amazon S3 Browser. The application runs in the browser, the main entrypoint is here but you'd be interested in looking at the Browser part itself.
You'll notice the BucketBrowser component accessible here is composed of 2 parts: the BucketList and the BucketContent, similarly to what you want to achieve.
The main advantage of working it as React (or Angular) and a neat Backend API is the separation of concerns and the opportunity to create also a Mobile or native client for other platforms that would leverage your Backend API.
I'm not a React expert, the links I've shared are part of an experiment not ready for production usage; but will help you visualize how you could achieve your idea by leveraging React.
Use SingleSPA https://single-spa.js.org/ framework and create Container app using React. Then keep your PhP code as it is and display it as child page inside Container app page. All new modules you can create as separate module. It is kind of FE microservices. We tried it using React and Vue js but I am sure it will work for PHP too.
You can open your admin releated stuff on own workspace = virtual desktop
Thats supported on Linux, on Window and perhaps on other OS too
The follow some hints how to to some thing on Linux:
Check how many workspaces are configured on your system:
wmctrl -d
You can set a different count of workspaces if you like:
wmctrl -d | wc -l
# or on follow way:
wmctrl -n 1
Open a program in foreground on current active workspace and move to 2`nd workspace:
wmctrl -s 1 ; xed & sleep 3; wmctrl -s 0;
Open a program in background on current active workspace and move to what ever your prefered workspace is:
Thats possible too.
You can display what you want on your background picture of your screen:
on Linux systems you can use p.e. Conky
Conky: http://conky.sourceforge.net/
Conky-Optionen: http://conky.sourceforge.net/config_settings.html
Conky-Variablen: http://conky.sourceforge.net/variables.html
Conky-colors: http://helmuthdu.deviantart.com/art/CONKY-COLORS-244793180?
Wettercodes: http://edg3.co.uk/snippets/weather-location-codes/germany/
https://www.linuxmintusers.de/index.php?topic=33952.0
https://www.linuxmintusers.de/index.php?topic=11139.0
on Windows systems, you can use p.e. bginfo
It can be they are like this on other OS too.

Programmaticaly spoofing an http script request in an iframe

I'm building a backend admin system which edits json files that control the look and feel of the main site. I want to add a 'preview' button before the user hits save. To do that, I want to use the main site, but instead of calling the actual json file in production, save a temp version of it and redirect this user's traffic for that file to the temp file - from the original site code.
i've considered both chrome pluggins, configuring iframe somehow or, in worst case scenario, grabbing the production front-end, parsing out the call to the prod json file and replacing with new temp json file. That is obviously not ideal as it would entail a lot of work and if anything changes on the prod site, this will have to be updated.
I would love your ideas!
Do you have access to the main site's source code? You could implement a preview option from the main site which accepts a GET parameter and uses a temporary JSON setting based on this GET parameter.
From the backend admin system's point of view, it's just a matter of adding the JSON as part of the ajax GET request.
Unfortunately though, there is no easy way of doing this if you don't have access to the main site's source code or if you can't reach out to whoever maintains that main site.
Your cleanest option might be to recreate the main site's look and feel instead and pass it off as a "preview".

Flex mobile wrap html page

I'm trying to write an AIR application to be deployed on a mobile device.
I have an HTTPS website that I go to and log in using a browser. I can view things in my account, etc.
I want to use my AIR app instead of the HTTPS website. Can I "wrap" or "skin" an html site using AIR?
So I'm looking at StageWebView, URLRequest, URLLoader.
I need to POST things like username, password, and other things.
How can I do it?
See ExternalInterface on AS3 reference that you can use to call Javascript-functions on your site.
You can show HTML content with mx:HTML
If all you need to do is POST or GET, look into HTTPService
You might wanna have a look at the StageWebViewBridge, it has some extended features compared to the default StageWebView
http://code.google.com/p/stagewebviewbridge/
We wanted to use it in a project but ended up in implementing the URL based communication on our own. BUt you should give it a try, mabye it works for you.

Meteor.js - Template Permissions

This has been asked in similar forms here and here but it seems pretty important, and the framework is under rapid development, so I'm going to raise it again:
Assuming your login page needs to face the public internet, how do you prevent Meteor from sending all of the authenticated user templates to a non-authenticated client?
Example use case: You have some really unique analytics / performance indicators that you want to keep secret. You've built templates to visualize each one. Simply by visiting the login page, Meteor will send any rando the templates which, even unpopulated, disclose a ton of proprietary information.
I've seen two suggestions:
Break admin into a separate app. This doesn't address the issue assuming admin login faces the public internet, unless I'm missing something.
Put the templates in the public folder or equivalent and load them dynamically. This doesn't help either, since the file names will be visible from other templates which will be sent to the client.
The only thing I can think of is to store the template strings in the server folder and have the client call a Meteor.method after login to retrieve and render them. And if you want them to behave like normal client templates, you'd have to muck around with the internal API (e.g., Meteor._def_template).
Is there any more elegant way to do this?
I asked a similar question here:
Segmented Meteor App(s) - loading only half the client or two apps sharing a database
Seems to be a common concern, and I certainly think it's something that should be addressed sometime.
Until then, I'm planning on making a smaller "public" app and sharing the DB with an admin app (possibly in Meteor, possibly in something else, depending on size/data for my admin)
These 2 packages try to address this issue:
https://atmospherejs.com/numtel/publicsources
https://atmospherejs.com/numtel/privatesources
It uses an iron-router plug-in to load your specific files on every route.
The main drawback I see here is that you must change your app structure, as the protected files need to be stored in /public or /private folder.
Also you are supposed to use iron-router.

Running Canvas app in a Tab

This is my first Facebook app and I'm on quite a tight deadline so forgive me if any of this is a dumb question.
I've set up a Canvas app, I've got it to authenticate by passing the parameters to the facebook URL:
https://www.facebook.com/dialog/oauth?client_id=1234&redirect_uri=MY_APP_URI
I can then get the user_id and name of the user, which for this particular app is all I need. It runs fine in the Canvas page.
Problem is I can't get it to run in a tab, it always redirects to the Canvas, which is not what I want - I need it to run within the context of my client's Facebook page. I've been trying to find examples of setting it up but everything seems to be out of date compared to what I'm seeing in the App settings.
My settings at the moment are:
App on Facebook
Canvas URL: http://localhost/facebook/
Canvas Page: http://apps.facebook.com/MYAPP
Page Tab
Page Tab Name: My test app
Page Tab URL: http://localhost/facebook/
I presume I'm missing something obvious, so if someone can advise I'd be grateful. For what it's worth I'm using .Net webforms and have the C# SDK installed, but don't think I'll need to really use it for this example.
EDITED TO ADD
I'm sure its to do with the authorization - I've followed the guide here developers.facebook.com/docs/appsonfacebook/tutorial on how to redirect the page back with the authorization payload, but obviously doing that has kicked it out of the tab and into the main Canvas again. I need to to stay where it is, if such a thing is possible.
localhost points from your local machine to itself. Facebook does not know what localhost relates to and cannot load the app. You need to make your app accessible from outside of your machine.
It was the fact that I was still redirecting the url, when you run in a tab you don't need to redirect to another url to get the user data, it's just there waiting.

Resources