I have to create an extension for firefox which has a dropdown menu . The look of the button is similar to firebug.Here is the code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://sendtoie/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://sendtoie/locale/sendtoie.dtd">
<overlay id="sendtoie-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="overlay.js"/>
<toolbarpalette id="BrowserToolbarPalette">
<menulist id="sendtoie-toolbar-button">
<menupopup>
<menuitem label="check" oncommand="ButtonCommand();"/>
<menuitem label="list1" oncommand="com2();" />
</menupopup>
</menulist>
</toolbarpalette>
</overlay>
This code create a dropdown menu with a text and icon, but when I right click on the firefox toolbar->go to Customize -> Select "Only icons" in "Show"option, the text "check" remains and also I cannot drag this extension to the "Customize" drop box.
How can I get a behaviour similar to Firebug extension?
A toolbar button should always be a <toolbarbutton>, see https://developer.mozilla.org/en/XUL/toolbarbutton for documentation on it. You can use type="menu" or type="menu-button" to show a drop-down menu:
<toolbarbutton id="sendtoie-toolbar-button" type="menu" label="My button">
<menupopup>
<menuitem label="check" oncommand="ButtonCommand();"/>
<menuitem label="list1" oncommand="com2();" />
</menupopup>
</toolbarbutton>
Related
I am trying to create an app with NativeScript with the following layout:
On top, action bar
Content Area in the center (about 80% of screen height)
Fixed menu on bottom with 4 buttons
I know that NativeScript provides a TabView, however this view puts the menu on top for the android version of the app,and doesn't allow to use images as "ItemTitle".
So (I think) this leaves me with two options :
Create 4 different pages and load them when a user taps on the menu
buttons
Create one single page and change content according to user
selection
The first approach is great because I get to separate all xml , js and css files. However navigating between pages can take some time and doesn't give ideal user experience.
The second approach probably will have a better user experience but code will be very hard to maintain.
Which option should I use? Have any of you dealt with a similar layout?
Thank you for your time!
In my app I use the TabView with partial-views in each tab-item. So for each tab-view the content is separated in their own xml,js,css files.
So why not just take this approach and combine it with your option 2?
You could create a main-view with:
ActionBar
Centered main-content for partial-views (Stack- og GridLayout)
SegmentedBar at the bottom for navigation buttons
When the user taps a button on the SegmentedBar, you change the visibility of the corresponding partial-view.
You can use any font-icons as "images" for your title in the SegmentedBar also.
UPDATE: Added examples below.
How to create and reference partial-views
In your main-view Page-element add the references to each partial view, like here:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
xmlns:t1="partial-views/tab1"
xmlns:t2="partial-views/tab2"
xmlns:t3="partial-views/tab3">
Each partial view consists of a .xml, .js and perhaps a .css file. I like to place each partial view in separate folders: tab1, tab2, tab3 as an example.
The partial-view xml file would contain only the view-modules, no page-modules. So don't add any Page or ActionBar here. Example of a partial view .xml:
<GridLayout loaded="viewLoaded">
<ListView items="{{ someItemList }}">
<ListView.itemTemplate>
...
</ListView.itemTemplate>
</ListView>
</GridLayout>
How to use partial-views
Now, it's up to you how you want to use the partial-views. Here is an example on how to use them together with a TabView component. This is placed in the same page-view where you added the references from the first example.
<TabView>
<TabView.items>
<TabViewItem title="Tab 1" iconSource="res://tab1">
<TabViewItem.view>
<t1:tab1 />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2" iconSource="res://tab2" >
<TabViewItem.view>
<t2:tab2 />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 3" iconSource="res://tab3" >
<TabViewItem.view>
<t3:tab3 />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
Or, you could do it without the TabView, and create something custom:
<StackLayout>
<t1:tab1 id="tab1" visibility="visible" />
<t2:tab2 id="tab2" visibility="collapsed" />
<t3:tab3 id="tab3" visibility="collapsed" />
</StackLayout>
<SegmentedBar selectedIndex="0" selectedIndexChanged="segBarSelected">
<SegmentedBar.items>
<SegmentedBarItem title="Tab 1" />
<SegmentedBarItem title="Tab 2" />
<SegmentedBarItem title="Tab 3" />
</SegmentedBar.items>
</SegmentedBar>
So here would selectedIndexChangedcontrol the visibility of each partial view.
I'm using NetOffice developing an MS Outlook AddIn, and I want to add a custom context menu item in the calendar, to allow users add a new custom appointment for the selected time range.
So as written in this article I define my additional item in the RibbonUI.xml following way:
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="OnLoadRibonUI">
<ribbon>
<tabs>
<tab idMso="TabAppointment">
<group id="Group0" label="Addin" insertBeforeMso="GroupShow">
<button id="convertButton" label="Convert" getImage="ConvertImage" size="large" onAction="ConvertButton_Click" />
</group>
</tab>
<tab idMso="TabCalendar">
<group id="Group1" label="Addin" insertBeforeMso="GroupGoto">
<button id="aboutButton" label="New Custom Meeting" getImage="GetNewImage" size="large" onAction="NewMeetingButton_Click" />
<dialogBoxLauncher>
<button id="settingsButton" screentip="Addin Settings" onAction="SettingsButton_Click"/>
</dialogBoxLauncher>
</group>
</tab>
</tabs>
</ribbon>
<contextMenus>
<contextMenu idMso="ContextMenuCalendarView">
<button id="MyContextMenuCalendarView"
label="ContextMenuCalendarView"
onAction="OnMyButtonClick"/>
</contextMenu>
</contextMenus>
</customUI>
But as soon as I add the <contextMenus> node, the xml isn't working anymore, not the add in doesn't add any context menu, but it also doesn't add any buttons anymore - whereas the buttons are added when the <contextMenus> node is not defined.
Any tips how to debug this issue?
EDIT:
thanks to the tip from Dmitry I found the issue the xmlns namespace was an old one, so instead of:
xmlns="http://schemas.microsoft.com/office/2006/01/customui"
it should be:
xmlns="http://schemas.microsoft.com/office/2009/07/customui"
I can't see anything wrong off the top of my head, but enable the dev mode in Outlook - this way Outlook will report all problems in your XML. Click File | Options | Advanced | Developers | Show add-in user interface errors.
How to add some element in this menu (showned below)?
http://i.stack.imgur.com/UIaS5.png
I found how add element to toolbar menu and contex menu, but way to add something in this menu I could not find.
<!- Toolbar: -->
<menupopup id="menu_ToolsPopup">
<menuitem label="Test" oncommand="test.somefunction();"/>
</menupopup>
<!- Contex menu: -->
<popup id="contentAreaContextMenu">
<menuitem label="Test" oncommand="test.somefunction();"
insertafter="context-selectall"/>
</popup>
I found solution.
<popup id="placesContext">
<menuitem label="Test;" oncommand="test.somefunction();" />
</popup>
I installed DOM-inspector, to find solution. After it I investigated URL chrome://browser/content/browser.xul and went to #document -> #window -> popupset (mainPopupSet), where I by guess found needed element.
There is very good option "Copy XML" at DOM-inspector. It help me to find out what one or the other element to do.
I'm using XUL to write my firefox toolbar. I use that xul code to do simple label button:
<?xml version="1.0"?>
<overlay id="Sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script type="application/x-javascript" src="chrome://sample/content/sample.js" />
<toolbox id="toolbox">
<toolbar id="Sample" toolbarname="Sample" >
<label value="Lable Button "/>
</toolbar>
</toolbox>
</overlay>
My question is how to add logo image, image button and button menu...also how to add submenu. Please somebody submit a quick sample of code, so I will understand better.
What you have there isn't a button - it is a static label.
To add a logo use image tag (see example in the documentation).
To add an image button use toolbarbutton tag (see example in the documentation).
To add a submenu use toolbarbutton tag with type="menu" and put a menupopup tag inside (again, there is an example in the documentation).
Note: You can use src attribute to specify the image source for an image element and image attribute to specify the image source for a toolbarbutton element. However, it is preferable to set the images in CSS, you can use list-style-image property for that:
#myToolbarButton
{
list-style-image: url(chrome://myextension/skin/toolbar.png);
}
I'm working on a Firefox extension. I'd like to make it auto-install in the far right position on the nav bar when a user installs it. As it stands, a user has to go to View > Toolbars > Customize... and drag the extension to the nav bar once it's installed. I'd like to eliminate this step.
The extension is here: http://madan.org/tickertool
The XUL for my extension looks basically like this and it overlays browser.xul:
<overlay id="my-ext-overlay" ... >
<toolbarpalette id="BrowserToolbarPalette">
<toolbaritem id="my-ext-container" ... >
<toolbarbutton id="my-ext-customize-image" ... />
<textbox id="my-ext-textbox" ... />
<hbox id="my-ext-buttons">
<image id="my-ext-button1" ... />
<image id="my-ext-button2" ... />
<image id="my-ext-button3" ... />
</hbox>
</toolbaritem>
</toolbarpalette>
</overlay>
I've seen code here ( https://developer.mozilla.org/en/Code_snippets/Toolbar ) that supposedly does what I'm looking for, but this code is if your extension is just a single button and I can't get it to work for me. The answer to my question is likely some modification of this code, but I haven't figured it out.
I think I got it. It's basically spelled out in the link I mentioned in the original post. I'm not sure why I thought there was more to it than that.