Let's take a TODO app as example, there is a Main window - A, that will list all of the TODO items and a button 'Add Item'. So when click on the 'Add Item' , it will open up a second window - B, where there is a form for adding item. After the form is submitted, the newly added item will be append to the list in WIndow A.
So the problem here is, how can I update the Item list in WIndow A when when WIndow B form is submitted? I am using react js for the renderer. So, how can react component listen to the changes?
Ok, got the answer.
Turn out we can use webContents to send the message to the desired window. And that message can be listened in the window.
#main.js
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.webContents.send('addingitem','...blahblah balh ');
and in render
ipc.on("addingitem", (event, arg)=>{
//doing the update DOM here.
}
Related
I need to modify classical Notes Web UI application. In the UI, it shows mail data. If the data has attachments, they are shown as links in the body field.
I'd like to detect when a user clicks the links, and enable "next" button so that the user can move to the next screen. Is it possbile?
Yes, and this has nothing to do with Domino specifically: put a div around your next button, that initially has the style display: none or give itself an ID and put the display: none directly in the properties box of the button on the html tab, fields ID and style.
Then write a little JavaScript that runs in the onLoad event, selects all a tags with attachments in it (they all have $FILE in the href) and add a function to the click- event to set the style of the button to display: block or something else.
You can prevent the default event (open the attachment) by using preventDefault():
var list = document.getElementsByTagName("a");
for (el of list) {
if (el.href.includes("$FILE")) {
el.addEventListener("click", function(event){
var yourNextDiv = document.getElementById("IDOfDivWithNextButton")
yourNextDiv.style.display = "block"
event.preventDefault()
});
}
}
In my electron app, a user can open different windows.
I have the menu initialized when the main window is created like so:
const menuContents = Menu.buildFromTemplate(menuTemplate(mainWindow))
Menu.setApplicationMenu(menuContents)
However, when a user clicks a link and opens a new window, this same menu bar still appears in that window. I would like to change it and/or completely remove it.
How would I do that?
It's possible:
Example for Menus
In Renderer or Main Proccess make two functions with menu templates like this:
main menu
function createMenu(){
var menu = Menu.buildFromTemplate([
{
//your menu items
}
])
Menu.setApplicationMenu(menu);
}
second menu
function createMenuwin(){
var menu = Menu.buildFromTemplate([
{
//your other window menu items
}
])
Menu.setApplicationMenu(menu);
}
when you call the second window : Example open an image
function openIMG(path){
win = new BrowserWindow({
width: 800,
height: 550,
frame: true,
vibrancy: 'medium-light',
});
win.loadFile(path);
createMenuwin();
win.on('close', () =>{
createMenu();
})
}
when the second window is open create an app menu with
createmenuwin()
when the second window is closed call the event:
win.on('close', () =>{})
inside the close event of the second window, call:
createMenu();
I developed an app using Xamarin forms that has side menu see this url.
But I couldn't use this in my current project, so I made my custom component for side menu.
How to implementing feature that hide menu when I tap range out of side menu?
It is hard to give you any help without seeing your code, but generally I tackle this issue by adding a ContentView that covers the screen when ever your menu opens. The menu would be displayed on top of the ContentView. Then you add a TapGestureRecognizer to the ContentView which closes the menu when clicked.
You could add some color to the ContentView but make it opaque so it is see-through, something like this color: #74787878
ContentView backgroundView = new ContentView {
BackgroundColor = Color.FromHex("#74787878"),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Content = //Your menu
}
backgroundView.GestureRecognizers.Add(new TapGestureRecognizer {
Command = new Command(() => {
//Remove the background and hide the menu
})
});
I am using menu using dijit.menu and Its work with right click and left click.
How I open the menu on mouse over and close on onmouseout?
dijitActionMenu = new dijit.Menu({
targetNodeIds:[actionMenuId],
leftClickToOpen:"true"
});
Have you tried something like
// Create a new Tooltip
var tip = new dijit.Tooltip({
// Label - the HTML or text to be placed within the Tooltip
label: '<div class="myTipType">This is the content of my Tooltip!</div>',
// Delay before showing the Tooltip (in milliseconds)
showDelay: 250,
// The nodes to attach the Tooltip to
// Can be an array of strings or domNodes
connectId: ["myElement1","myElement2"]
});
More details are here dialogs_tooltips.Even dijit.Menu have onMouseOver even.
onMouseOver Event
I am able to get the dijit/Menu onmouseover.
Create an element which will invoke onmouseover event.
Element
show() will call custom widget which will create menu for you.
E.g.,
show = function() {
var roll = new rollover()
}
And rollover.js will be the custom widget.
From the constructor of it, you can invoke the function and create the menu.
pMenu = new Menu({ class: "rollovermenu", id: "rolloverid" });
Using YUI, I want to create a menu button, passing in the menu widget instance.
Result is what looks like a menu button, but the menu doesn't show.
test case: http://sandbox.kluger.com/menu_test.html
// key code section:
var D = YAHOO.util.Dom,
menu = new YAHOO.widget.Menu(D.generateId(), {lazyload: true});
menu.addItems(params.menu);
var t = new YAHOO.widget.Button({
type: "menu",
label: params.label,
menu: menu,
container: el
});
Do I need to render the menu before giving it to the Button?
If you want to see the params.menu, check the test case. The params.menu object is correct, it creates a menu when directly supplied to widget.Button. That's tested in the test case.
Any ideas appreciated.
Yes, you need to render. Add menu.render(document.body); after menu.addItems(params.menu); and it should work fine.