AngularJS UI Rendering issue in custom plugin of vSphere web client - javascript

We are developing user custom for vmware's vSphere web client with the help of vSphere client SDK 6.0.
We have use html-bridge (AngularJS) to develop a UI for plugin and we are facing rendering issue of UI for one specific scenario.
Image 1: This window belongs to vCenter. If I select any drop down it will not impacting the remaining part of the screen.
Image 2: This window we have created in AngularJS with the help of html-bridge.
Image 3: If I am working on our custom window and selecting any drop own which is not a part of our custom window (They belongs to component of vCenter and I have highlighted with arrow). Then all content of our window will get disappeared.
Can we avoid this issue?
Please advice.

This is an inherent problem of how Flash player shows HTML content. The HTML content you are showing in your plugin's view is nested in an IFrame which is essentially a native OS window in which your content is drawn. The Flash content of the web client is drawn in a separate native window that has a lower z-index than the IFrame window.
Since Flash popups (the menu in your screenshot, for example) is not drawn in its dedicate window but in the Flash player's one, it cannot float on top of the IFrame window (your content). Thus if the IFrame is not hidden, you'll "see" the pull-down menu going behind your plugin's view.
There is no proper workaround to this limitation.

Related

UI5 Opening new Window that is always on top

I'm trying to open a new window with a specific content e.g. it is displaying another view that i've created. The opened window/popup/dialog has to always on top and draggable. While it is on top I want to edit and work on the background window.
Is this possible? If it is, how can I let the opened window/popup/dialog display another view or add some conent to it?
I've tried to open a new window with a simple js function window.open(),
but I cannot let it be on top and edit some background window content.
Maybe there are other ways to do so? Maybe some UI5 methods will accomplish what I'm looking for?
I am sorry to say, but there is no standard way to do so.
Windows are managed by your browser, so you can open it in a new window, but it is not part of the initial application if you do so. If you want to use windows you could open a new app in the new window. here is a post on how the communication between those apps can work: Communication between tabs or windows
Popovers allow you to access the rest of the app while they are open, but once you do the popover closes. There is a property, that stops it from closing, but this property also blocks the wished for interaction. (the property is named modal check here: https://ui5.sap.com/#/api/sap.m.Popover/) Like every UI5 Element it can be made draggable, refer to https://ui5.sap.com/#/api/sap.ui.core.dnd.DragDropBase.
Dialogs do not allow any interaction with the rest of the app and i did not find a way to bypass it. Its has a build in feature for drag and drop though.
However
If you can do without the draggable part there is a way you can make it kind of work. It will only work as intended on desktops or large enough tablets.
You can use the FlexibleCollumnLayout and open your content in a new column. That allows you to interact with the "Dialog" Content at the same time as the content of you main page. Like this the "Dialog" will always be to the side, so it is not draggable.
If you really want to have the draggable part you would have to create a custom control. Read up on the topic here: https://ui5.sap.com/#/topic/8dcab0011d274051808f959800cabf9f
I hope I could help you,
Eric
Thanks for you answer, but I found a solution in the meantime with this help:
https://github.com/SAP/openui5/issues/1022
By setting oDialog.oPopup.setModal(false); it is able to even set a sap.m.Dialog non-modal. Then I set draggable: true resizable: true and gave it a styleclass with a very high z-Index and got exactly what I was looking for. A non-modal sap.m.Dialog, that is draggable and always on top of everything while the background can still be edited.

Enter full screen whenever page is loaded

I'm working on asp.net quiz application. The mandatory requirement of this application is: when the application starts (page is requested), it automatically enters into full screen.
Now I tried dozen of solutions (JS & Jquery's plugins)
JS Solution
Mozila's
Jquery Plugins
a number of different jquery's plugins, but Chrome & Firefox are not allowing me to do so. Because it states that it needs user interaction for that.
Can somebody please help me out of this situation? Solution can be browser dependent.
Details about application:
Total 5 aspx pages.
One page is an iframe/frame in another page.
Quick and dirty solution. Let's create another page which will be our container page. Put an Iframe there, calculate Iframe height width attribute based on the screen size. make the first page as iframe source. on the iframe put frameborder=0, so from user perspective it will look like single page
For full screen check this link http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

THREE.js Editor: How to access main script in an example

I can open the THREE.js editor at http://threejs.org/editor/.
I can open an example app e.g. PONG.
I can activate interactive animation by clicking on Play in the menu bar.
I can deactivate the animation by clicking on Stop in the menu bar.
I wish to edit the Main Script (the "Scene/Game logic" script) using the Editor as per this illustration:- https://plus.google.com/photos/+ricardocabello/albums/6104607340192211937/6104607354618509202?pid=6104607354618509202&oid=113862800338869870683
I can access Script controls for graphical objects. But how do I access the Main Script?
I am using
Opera version 28.0.1750.51
Laptop System: Windows 7 32-bit.
Go on the Pong project. From there you can click on file-> Publish. Unzip the file then you can see app.js in js folder. It's the script that is controlling the animation. It's the only way I know to view the source. Hope this help! :)
Aha. Got it.
Within the "SCENE" panel on the RHS of the Editor it is necessary to select the "Scene" object. This will add another panel called "SCENE" and below that there will be added another panel called "SCRIPT". (May need to scroll down to see it). The loaded "Game logic" script will be indicated. Just click on the "Edit" button to display the javascript in the main window of the Editor.

When opening a 'child window' from the main site do i have to create an HTML page for each child window or is there a way to make it generate its own?

I am programming a website that has products for sale and need to know how to specifically set up child windows. Do i have to create a child window for EACH image or is there a standard page that the code can assign it to?
Using "popup" windows can be troublesome.. some browsers will not open them properly due to their internal "popup blockers"
but to answer your question. if you set the URL of the window to the image itself it should load in the window without the need for a page.
i.e. http://www.example.com/img/myimage.jpg
A better way to do this would be using a javascript library such as jQuery and jQuery-UI to open modal overlays.

iFrame is not fixing correctly in android device

i made a android app using it's web view. there contain a lot of functions. payment integration etc. i integrate this payment method using a third party tool. This tool provide an external html page. when i load this page directly in to my web view it's work nicely.
but after i got a requirement that there need a back button in the payment page. after then i add this page using an IFRAME. after there is number of issues came related to the design. the content is not fitting in the IFRAME also there is not displaying the scroll bars.
i tried differant kind of javascript method but no output.
If any solution present for this
Answer to the iframe scrolling problem
1.Zoom in until the iframe portion of the page completely fills the screen.
Tes might activiate the scrollbar and allow you to scroll the iframe.
2.Try double-touching the screen. This means you use two fingers to scroll on the iframe area.
3.If neither #1 or #2 work, try a different browser such as Dolphin, xScope, or Opera.
If none of those three work, try out Firefox. I listed Firefox separately and last because it is slow and resource-intensive on Android, but if it's your only recourse, then use it only when you must.
Can you provide more information on the content not fitting inside the iframe?

Categories