in my xul file:
<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="browserOverlay.js"/>
<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- button details -->
<toolbarbutton id="custom-button-1"
label="Custom"
tooltiptext="My custom toolbar button"
oncommand="xyz.showPanel()"
class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>
<panel id="thepanel">
<hbox align="start">
<image src="warning.png"/>
<vbox>
<description value="You have 6 new messages."/>
<hbox>
<button label="Read Mail"/>
<button label="New Message"/>
</hbox>
</vbox>
</hbox>
</panel>
</overlay>
when calling the function "xyz.showPanel()" which has the following code:
var xyz = {
showPanel: function (e)
{
var button = document.getElementById('custom-button-1');
var panel = document.getElementById('thepanel');
panel.openPopup(button, 'after_start', 0, 0, false, false);
}
}
it gives me error in the error console that says:
Error: TypeError: panel is null
I want to show a panel like "Downloads" toolbar button in Firefox
I am new to Firefox addons,
so how to show a panel when clicking on toolbar button ??
In overlays, the first level of nested elements must refer to something already in the DOM (the element stuff will be added to), or else these elements will be ignored. (Some exceptions to that rule, like <script>.)
Your panel definition basically says (contrary to what you want it to say)
Find an existing panel with id "thepanel"
If found, add a hbox and its children to the panel
If not, ignore the subtree.
You need to change your XUL to provide a container for your panel, e.g. #mainPopupSet, like you did with #BrowserToolbarPalette for your toolbarbutton.
<overlay ...>
...
<popupset id="mainPopupSet">
<panel id="thepanel">
...
</panel>
</popupset>
</overlay>
Related
I have setup a custom tab view defined as the following :
main.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded"
xmlns:t1="partial-views/explore"
xmlns:t2="partial-views/community">
<!--ACTION BAR-->
<ActionBar title="Haloose">...</ActionBar>
<StackLayout>
<!-- TABS -->
<StackLayout id="sl_main">
<t1:explore id="tab_explore" visibility="{{ currentActive == 'explore' ? 'visible' : 'collapsed' }}" />
<t2:community id="tab_community" visibility="{{ currentActive == 'community' ? 'visible' : 'collapsed' }}"/>
</StackLayout>
<-- FIXED MENU -->
<GridLayout id="menu">
<Image tap="changeVisibleTab"/>
<Image tap="changeVisibleTab" />
</GridLayout>
</StackLayout>
</Page>
Let's call this file main.xml . It's associated to a main.js where I've defined a binding context:
main.js
exports.loaded = function(args){
page = args.object;
//Set Up page view model
mainObservable = new Observable({
currentActive:"explore",
menuItemsArray:[
new MenuItem("explore"),
new MenuItem("community")
]
});
//Bind page to view model
page.bindingContext = mainObservable;
}
For each tab I have a folder containing a js , css and xml file.
A sample tab.xml file would look like this :
tab.xml
<StackLayout loaded="tabLoaded" > <looots of stuff /> </StackLayout>
Everything works as expected, however if I try to bind the stack layout to an object , all of the UI elements are hidden.
If I remove binding, I can see them again.
not working tab.js
var Observable = require("data/observable").Observable;
var profile;
exports.tabLoaded = function(args){
profile = args.object;
var profileBinding = {
username : "Aaron Ullal"
}
profile.bindingContext = profileBinding; //removing this line makes elements visible
}
What is causing this? Perhaps multi level binding is not supported?
When you use custom XML components, like your tabs, and add bindings to them (in your case the visibility binding, those bindings are basically applied to the root tag in your XML component. So when you change the binding context in your tab.js the visibility binding starts looking for a currentActive property in profileBinding. In order to achieve what you want you have to wrap your tab XML in another layout, like this:
<StackLayout>
<StackLayout loaded="tabLoaded" >
<!--looots of stuff -->
</StackLayout>
</StackLayout>
It should work as expected then.
I m bulding an app and i have a problem with rendering the title in the ActionBar after navigating to that page. Since the ActionBar cannot have an id i m using an observable viewModel in wich i set the title property.
-----xml-----
<Page.actionBar>
<ActionBar title="{{ name }}">
</ActionBar>
</Page.actionBar>
-------------
------js-----
exports.pageLoaded = function(args) {
page = args.object;
var navData = page.navigationContext;
viewModel.set("name",navData.name);
page.bindingContext = viewModel;
};
What i have seen so far debugging this problem is that when i close the phone screen and after that open it (refreshing the app) the action bar title will render.
Found the answer (a workaround) ,
<ActionBar>
<ActionItem ios.systemIcon="12" android.systemIcon="ic_menu_search" tap="showSearch" />
<ActionItem android.systemIcon="ic_menu_moreoverflow" tap="logout" text="Logout" android.position="popup" />
<ActionBar.titleView>
<StackLayout orientation="horizontal">
<Label text="{{ name }}" />
<Image src="res://app_icon" />
</StackLayout>
</ActionBar.titleView>
You need to set the title in a different page event, fairly certain you should do this in the navigatedTo event for the page.
For more info on the page navigation events, check out this blog post Nathanael Anderson - FluentReports - page navigating order of events
I have a small Question about setting Tab Names Dynamically.
I am Thinking to create an options.js and I want my tab names to gather data from options.js
<Alloy>
<TabGroup>
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window class="tab1" title="Tab 1">
<Label>I am Window 1</Label>
<Button class="exampleBut">Button </Button>
</Window>
</Tab>
</TabGroup>
</Alloy>
I would like to set Tab 1 Title from another JS file.
How to solve it ?
Regards
You have to identify the tab by a unique id
<Tab title="Tab 1" id='tab1' icon="KS_nav_ui.png">
in the same js file for exemple index.js (the tab is defined in index.xml) you can use :
$.tab1.title="my title"
if you would set title from another js file you can use application events:
in index file you define an application event listener :
Ti.App.addEventListener("app:changeTabTitlle",function(e){
$.tab1.title=e.title;
});
and from the other js file you have to send the tab title using fireEvent:
Ti.App.fireEvent("app:changeTabTitlle",{title:"My tab title"});
i dev a Firefox extension and i try to add a tabpanel in a tabbox (xul).
The tabbox:
<tabbox id="tbDashboard" selectedIndex="0" >
<tabs><!-- list of tabs -->
<tab label="Overview"/> <!-- default tab -->
<tab label="test"/>
</tabs>
<tabpanels><!-- list of contents -->
<tabpanel ><!-- default tab's content -->
<box orient="horizontal" flex="1">
<description style="font-size: 24pt;">overview</description>
</box>
</tabpanel>
<tabpanel ><!-- test tab's content -->
<box orient="horizontal" flex="1">
<description style="font-size: 24pt;">test</description>
</box>
</tabpanel>
</tabpanel>
</tabpanels>
</tabbox>
I can add a new tab in JS with:
document.getElementById("tbDashboard")["tabs"].appendItem("popo");
The tab is appears but the tab page is empty, i tried to:
use appendItem with a second parameter => don't work
document.getElementById("tbDashboard")["tabpanels"].appendItem(...) => fail
Someone have an idea to create the tab page (a tabpanel) ??
thx
tabs.appendItem() is merely a convenient helper to create a tab element. It is essentially the same as:
var tabbox = document.getElementById("tbDashboard");
var tab = document.createElement("tab");
tab.textContent = "popo";
tabbox.tabs.appendChild(tab);
You can create and add a tabpanel element in the same way (here with a text box as only contents):
var panel = document.createElement("tabpanel");
panel.appendChild(document.createElement("textbox"));
tabbox.tabpanels.appendChild(panel);
For a tutorial on DOM manipulation see https://developer.mozilla.org/en/XUL_Tutorial/Modifying_a_XUL_Interface.
You'll need to create the panel using the DOM API and then append it to your XUL document, e.g.:
let newPanel = document.createElement("tabpanel");
let panelContent = document.createElement("hbox");
// Add more content here
newPanel.appendChild(panelContent);
document.getElementById("tbDashboard").tabPanels.appendChild(newPanel);
i've developed a firefox addon with a simple button on the status bar. Now i want to get the right and the left click.
Mi code look like this below
<popupset>
<menupopup id="intransContextMenu" position="overlap">
<menuitem label="settings" onclick="alert('test');" type="checkbox"/>
<menuitem label="test" onclick="alert('test nr 2');" type="checkbox"/>
</menupopup>
</popupset>
<statusbar id="status-bar">
<statusbarpanel id="2" label="test" tooltip="savetip" context="intransContextMenu"/>
</statusbar>
Right click on test label open the menu popup.
It seems working, but the left click is triggered before the right click on the label TEST.
Is there any way that provide me isolating the right and the left click? Triggering left click when left click occours and right click when right click occurs.
Thanks
You should create custom event handler, not just inline alert call, and inside that handler, you can recognize which button was pressed:
function whichButton(e)
{
var btnCode = e.button;
switch (btnCode){
case 0 : alert('Left button clicked');
break;
case 1 : alert('Middle button clicked');
break;
case 2 : alert('Right button clicked');
break;
default : alert('Unexpected code: ' + btnCode);
}
}
<popupset>
<menupopup id="intransContextMenu" position="overlap">
<menuitem label="settings" onclick="alert('test');" type="checkbox"/>
<menuitem label="test" onclick="whichButton(event);" type="checkbox"/>
</menupopup>
</popupset>
Also, to prevent appearing of context menu you can use oncontextmenu event handler:
<menuitem label="test" onclick="whichButton(event);" type="checkbox" oncontextmenu="event.preventDefault();"/>