Add VS icon pack to VS plugin, visual studio plug-ins development - plugins

I'm creating an add-in for VS, how to add icon getting from VS icon pack for the menu command button?
Getting icon from resource code example
<GuidSymbol name="testIcon" value="{00000000-0000-0000-0000-0000}">
<IDSymbol name="testIcon1" value="1" />
</GuidSymbol>
<Bitmap guid="testIcon" href="Resources\Icon.png" usedList="testIcon1"/>
<Button guid="guidAddIconCmdSet" id="cmdidMyCommand" priority="0x0100" type="Button">
<Parent guid="guidAddIconCmdSet" id="MyMenuGroup" />
<Icon guid="testIcon" id="testIcon1" />
<Strings>
<ButtonText>My Command name</ButtonText>
</Strings>
</Button>

Known Monikers - The set of image monikers contained in the Visual Studio Image Catalog and publicly consumable by any Visual Studio component or extension. This one is a good choice, let's try.
Firstly, include this library KnownImageIds.vsct in you .vsct file
Modify the code to add what icon you need around <Icon> tag
Add flag <CommandFlag>IconIsMoniker</CommandFlag>
For example, add VS "open folder" icon to your menu command
<Include href="KnownImageIds.vsct"/>
<Extern href="stdidcmd.h"/>
<Extern href="vsshlids.h"/>
<GuidSymbol name="testIcon" value="{00000000-0000-0000-0000-0000}">
<IDSymbol name="testIcon1" value="1" />
</GuidSymbol>
<Bitmap guid="testIcon" href="Resources\Icon.png" usedList="testIcon1"/>
<Button guid="guidAddIconCmdSet" id="cmdidMyCommand" priority="0x0100" type="Button">
<Parent guid="guidAddIconCmdSet" id="MyMenuGroup" />
<Icon guid="ImageCatalogGuid" id="OpenFolder" /> // icon id
<CommandFlag>IconIsMoniker</CommandFlag> // enable moniker
<Strings>
<ButtonText>My Command name</ButtonText>
</Strings>
</Button>
Browse Monkier icon id from here KnownMoniker id text
For more visualization, just install this VS add-in Moniker Browser

Related

Microsoft Word Add-In Failing Submission: Compatibility Issue with Desktop Versions on Windows and Mac

Update: I believe the issue was related to the 80x80 icons, which should have been 64x64.
I submitted a Microsoft Word Add-In to the Microsoft Partner Center (Store), but received the following failure messages:
Predictable Behavior - 1100.4.4.2 O365 Perpetual - Your offer is not working on Microsoft 365 on Windows, Word 16.0.13426.20352 64-bit. Your add-in is not available to be inserted.
Predictable Behavior - 1100.4.4.5 Office for Mac - Your offer is not working in Office for Mac connected to an M365 Subscription. macOS Version 10.15.4 Microsoft Word for Mac version 16.44. Your add-in is not available to be inserted.
The manifest file is below. It passes the npm install -g office-addin-manifest validation test, but apparently cannot be inserted.
If anyone can help, I'd really appreciate it.
<?xml version="1.0" encoding="UTF-8"?>
<!--Created:ce44715c-8c4e-446b-879c-ea9ebe0f09c8-->
<OfficeApp
xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
xsi:type="TaskPaneApp">
<!-- Begin Basic Settings: Add-in metadata, used for all versions of Office unless override provided. -->
<!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
<Id>eb4d03ca-1b89-47b9-9132-6e71b09788ef</Id>
<!--Version. Updates from the store only get triggered if there is a version change. -->
<Version>1.0.0.2</Version>
<ProviderName>Clib Law Ltd</ProviderName>
<DefaultLocale>en-UK</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="Clause Library" />
<Description DefaultValue="Clause Library"/>
<!-- Icon for your add-in. Used on installation screens and the add-ins dialog. -->
<IconUrl DefaultValue="https://cliblaw.co.uk/assets/icon-32.png" />
<HighResolutionIconUrl DefaultValue="https://cliblaw.co.uk/assets/icon-64.png" />
<SupportUrl DefaultValue="https://cliblaw.co.uk" />
<!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
<AppDomains>
<AppDomain>https://cliblaw.co.uk</AppDomain>
</AppDomains>
<!--End Basic Settings. -->
<!--Begin TaskPane Mode integration. This section is used if there are no VersionOverrides or if the Office client version does not support add-in commands. -->
<Hosts>
<Host Name="Document" />
</Hosts>
<DefaultSettings>
<SourceLocation DefaultValue="https://cliblaw.co.uk/app.html" />
</DefaultSettings>
<!-- End TaskPane Mode integration. -->
<Permissions>ReadWriteDocument</Permissions>
<!-- Begin Add-in Commands Mode integration. -->
<VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
<!-- The Hosts node is required. -->
<Hosts>
<!-- Each host can have a different set of commands. -->
<!-- Excel host is Workbook, Word host is Document, and PowerPoint host is Presentation. -->
<!-- Make sure the hosts you override match the hosts declared in the top section of the manifest. -->
<Host xsi:type="Document">
<!-- Form factor. Currently only DesktopFormFactor is supported. -->
<DesktopFormFactor>
<!--"This code enables a customizable message to be displayed when the add-in is loaded successfully upon individual install."-->
<GetStarted>
<!-- Title of the Getting Started callout. resid points to a ShortString resource -->
<Title resid="Contoso.GetStarted.Title" />
<!-- Description of the Getting Started callout. resid points to a LongString resource -->
<Description resid="Contoso.GetStarted.Description" />
<!-- Point to a url resource which details how the add-in should be used. -->
<LearnMoreUrl resid="Contoso.GetStarted.LearnMoreUrl" />
</GetStarted>
<!-- Function file is a HTML page that includes the JavaScript where functions for ExecuteAction will be called.
Think of the FunctionFile as the code behind ExecuteFunction. -->
<FunctionFile resid="Contoso.DesktopFunctionFile.Url" />
<!-- PrimaryCommandSurface is the main Office Ribbon. -->
<ExtensionPoint xsi:type="PrimaryCommandSurface">
<!-- Use OfficeTab to extend an existing Tab. Use CustomTab to create a new tab. -->
<OfficeTab id="TabHome">
<!-- Ensure you provide a unique id for the group. Recommendation for any IDs is to namespace using your company name. -->
<Group id="Contoso.Group1">
<!-- Label for your group. resid must point to a ShortString resource. -->
<Label resid="Contoso.Group1Label" />
<!-- Icons. Required sizes 16,32,80, optional 20, 24, 40, 48, 64. Strongly recommended to provide all sizes for great UX. -->
<!-- Use PNG icons. All URLs on the resources section must use HTTPS. -->
<Icon>
<bt:Image size="16" resid="Contoso.tpicon_16x16" />
<bt:Image size="32" resid="Contoso.tpicon_32x32" />
<bt:Image size="64" resid="Contoso.tpicon_64x64" />
</Icon>
<!-- Control. It can be of type "Button" or "Menu". -->
<Control xsi:type="Button" id="Contoso.TaskpaneButton">
<Label resid="Contoso.TaskpaneButton.Label" />
<Supertip>
<!-- ToolTip title. resid must point to a ShortString resource. -->
<Title resid="Contoso.TaskpaneButton.Label" />
<!-- ToolTip description. resid must point to a LongString resource. -->
<Description resid="Contoso.TaskpaneButton.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Contoso.tpicon_16x16" />
<bt:Image size="32" resid="Contoso.tpicon_32x32" />
<bt:Image size="64" resid="Contoso.tpicon_64x64" />
</Icon>
<!-- This is what happens when the command is triggered (E.g. click on the Ribbon). Supported actions are ExecuteFunction or ShowTaskpane. -->
<Action xsi:type="ShowTaskpane">
<TaskpaneId>ButtonId1</TaskpaneId>
<!-- Provide a url resource id for the location that will be displayed on the task pane. -->
<SourceLocation resid="Contoso.Taskpane.Url" />
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<!-- You can use resources across hosts and form factors. -->
<Resources>
<bt:Images>
<bt:Image id="Contoso.tpicon_16x16" DefaultValue="https://cliblaw.co.uk/assets/icon-16.png" />
<bt:Image id="Contoso.tpicon_32x32" DefaultValue="https://cliblaw.co.uk/assets/icon-32.png" />
<bt:Image id="Contoso.tpicon_64x64" DefaultValue="https://cliblaw.co.uk/assets/icon-64.png" />
</bt:Images>
<bt:Urls>
<bt:Url id="Contoso.DesktopFunctionFile.Url" DefaultValue="https://cliblaw.co.uk/Functions/FunctionFile.html" />
<bt:Url id="Contoso.Taskpane.Url" DefaultValue="https://cliblaw.co.uk/app.html" />
<bt:Url id="Contoso.GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812" />
</bt:Urls>
<!-- ShortStrings max characters==125. -->
<bt:ShortStrings>
<bt:String id="Contoso.TaskpaneButton.Label" DefaultValue="Open Clause Library" />
<bt:String id="Contoso.Group1Label" DefaultValue="Clause Library" />
<bt:String id="Contoso.GetStarted.Title" DefaultValue="Do more with the Clause Library add-in!" />
</bt:ShortStrings>
<!-- LongStrings max characters==250. -->
<bt:LongStrings>
<bt:String id="Contoso.TaskpaneButton.Tooltip" DefaultValue="Click to open Clause Libary" />
<bt:String id="Contoso.GetStarted.Description" DefaultValue="The add-in is loaded." />
</bt:LongStrings>
</Resources>
</VersionOverrides>
<!-- End Add-in Commands Mode integration. -->
</OfficeApp>
Thanks,
Dean

Ionic 4 + FCM - How to customize Firebase Cloud Messaging (FCM) Notification Icon and Color?

A very frustrating issue while building an Ionic 4 app along with FCM plugin , is the inability to set a custom Notification Icon, with custom color. I figured out how to achieve this, so just wanted to share the solution with our beautiful StackOverflow community :)
So check out the solution to customize Firebase Cloud Messaging (FCM) Notification Icon and it's Color for Android platform, in my answer below.
I am using Ionic 4 + FCM plugin and here is what worked for me (November 2019). Please note that this solution is Android specific, i.e. the settings shown in this solution will help customize the Notification Icon look and feel on Android platform.
So let's begin in a series of steps:
1. In config.xml located in the root folder of your app: Example: (yourapp/config.xml)
Add the following to the <widget id=""...> tag at the end:
xmlns:android="http://schemas.android.com/apk/res/android"
It should look something like this now:
<widget id="com.mydomain.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
Or simply, copy the above line, replace the value of widget id, with your own.
2. In the same config.xml file:
Within the tags: <platform name="android"> and </platform>, add this:
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
<resource-file src="res/drawable-hdpi/fcm_push_icon.png" target="platforms/android/res/drawable-hdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-mdpi/fcm_push_icon.png" target="platforms/android/res/drawable-mdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxxhdpi/fcm_push_icon.png" />
<resource-file src="colors.xml" target="app/src/main/res/values/colors.xml" />
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="#color/colorPrimary" />
</config-file>
3. Visit the following link:
Notification Icon Generator
Upload a White version (single color) of your logo on a Transparent background. If you upload a colored version, you will get a dark gray icon, which would look nasty. If you don't have a white version of your logo, get it designed. Leave the rest of the settings as they are. For the Name textbox value, enter: fcm_push_icon. Then click on the Blue colored round shaped button to download the zip file.
4. Unzip the zip file and copy contents to your app root folder:
Unzip the zip file that you just downloaded in the step above and extract its contents to a folder. You will notice that it contains a res folder. If you open this folder, it will contain other folders with the following names:
drawable-hdpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi
Each of those folders will contain a PNG icon by the name "fcm_push_icon.png". The only difference between the icons in those different folders is their size.
5. Copy the res folder to project root:
Copy the res folder from the Point 4 above, to the root folder of your app. So it should look like this now:
yourApp/res/drawable-hdpi/fcm_push_icon.png
yourApp/res/drawable-mdpi/fcm_push_icon.png
yourApp/res/drawable-xhdpifcm_push_icon.png
yourApp/res/drawable-xxhdpi/fcm_push_icon.png
yourApp/res/drawable-xxxhdpi/fcm_push_icon.png
6. Create colors.xml in the root folder of your app:
Now create a new file called colors.xml in the root folder of your app. So it should look like this now:
yourApp > colors.xml
7. Copy following content into colors.xml:
Copy the following content into the file colors.xml that you created in the Step 6 above and save it.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3880ff</color>
<color name="colorAccent">#3880ff</color>
<color name="white">#FFFFFF</color>
<color name="ivory">#FFFFF0</color>
<color name="orange">#FFA500</color>
<color name="navy">#000080</color>
<color name="black">#000000</color>
</resources>
8. Change the value of colorPrimary:
Change the value inside the tags: <color name="colorPrimary"></color> to any color you like. For example, you can use:
<color name="colorPrimary">#eedd33</color>
9. Build your App:
That's it! Now just build your app. When the build runs, it will copy all the files from the src directory to the target directory and the app will read the contents from the target directory.
So from now on, whenever you send a notification on your Ionic based Android app, the receiver will see your Colored App icon in the notifications.
10. Enjoy!!!
AndroidManifest.xml duplicate line issue resolved!
I resolved this issue by adding a variable in package.json file.
Step 1: Visit the following link: Notification Icon Generator to generate your notification logo.
Step 2: If you open the zip file, you will get a "res" folder. Place the folder into your root directory
Step 3: "ANDROID_DEFAULT_NOTIFICATION_ICON": "#drawable/fcm_push_icon" - Add this line in your package.json file.
For example:
"cordova-plugin-fcm-with-dependecy-updated": {
"ANDROID_DEFAULT_NOTIFICATION_ICON": "#drawable/fcm_push_icon",
"ANDROID_FIREBASE_BOM_VERSION": "26.0.0",
"ANDROID_GOOGLE_SERVICES_VERSION": "4.3.4",
"ANDROID_GRADLE_TOOLS_VERSION": "4.1.0"
}
Step 4:
Add these lines in your config.xml Inside platform name="android"
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
<resource-file src="res/drawable-hdpi/fcm_push_icon.png" target="platforms/android/res/drawable-hdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-mdpi/fcm_push_icon.png" target="platforms/android/res/drawable-mdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxxhdpi/fcm_push_icon.png" />
That's it!
I followed Denver's solution too but I kept getting duplicate error in AndroidManifest while building the app so I removed this line from config.xml
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="#color/colorPrimary" />
</config-file>
and replaced it with
<config-file parent="./application" target="AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
</config-file>
The app builds and the notification icon works.
Denver's solution worked for me greatly, but in compile time it gave AndroidManifest.xml duplicate line issues.
If anyone facing same issue like me:
Just delete
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
</config-file>
In step 2: In my case, I am not bother about colors.
Add this in config.xml:
<plugin name="cordova-plugin-fcm-with-dependecy-updated" spec="^7.3.1">
<variable name="ANDROID_DEFAULT_NOTIFICATION_ICON" value="#drawable/fcm_push_icon" />
</plugin>
I know this is old, but just in case someone faces the same error, with the latest version of IONIC (I´m using 6.12.2), I kept on having the same issue and looking in the file (AndroidManifest) which is located in PathToYourProject\platforms\android\app\src\main\AndroidManifest.xml
I had found that the "build" creates 2 metas with the same value
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
&&
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#someOtherName" />
So, what you have to do is:
Add to your AndroidManifest, above the 2 meta-data:
Delete the other 2 meta-data
open the AndroidManifest with VSCode and when you build your project keep an eye on the build process. When you see "cordova.cmd build android", bring to the front your VSCode and wait until you see the 2 meta-data added again.
As soon as you see them, delete the one with a name different than "#drawable/fcm_push_icon".
Wait until the process finishes and test it. You are going to have the color push notification icon with the desired color as explained by #Devner.

Office Add-in show warning - unsupported features by its add-in catalog (SharePoint App Catalog)

I'm trying to deploy a Word Add-in.
I've deployed the backend on an onpremises server to IIS. And I've checked it's accessible.
I've created an app catalog in Office365 and uploaded the manifest file to the catalog. The catalog shows that the Add-in is valid
I've added the Office365 app catalog to the trusted catalog sites
I can add the app, I see that it shows part of my design, but it gives an info text and the Add-in doesn't work:
Info text:
ADD-IN INFORMATION
This Add-in uses features not supported by its add-in catalog.
The manifest:
<?xml version="1.0" encoding="UTF-8"?>
<!--Created:ce44715c-8c4e-446b-879c-ea9ebe0f09c8-->
<OfficeApp
xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
xsi:type="TaskPaneApp">
<!-- Begin Basic Settings: Add-in metadata, used for all versions of Office unless override provided. -->
<!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
<Id>e4a1b6ce-9333-44b5-bf03-59435dbf66ac</Id>
<!--Version. Updates from the store only get triggered if there is a version change. -->
<Version>1.0.0.0</Version>
<ProviderName>Name</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="Name" />
<Description DefaultValue="Name"/>
<!-- Icon for your add-in. Used on installation screens and the add-ins dialog. -->
<IconUrl DefaultValue="~remoteAppUrl/Images/Button32x32.png" />
<!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
<AppDomains>
<AppDomain>AppDomain1</AppDomain>
<AppDomain>AppDomain2</AppDomain>
<AppDomain>AppDomain3</AppDomain>
</AppDomains>
<!--End Basic Settings. -->
<!--Begin TaskPane Mode integration. This section is used if there are no VersionOverrides or if the Office client version does not support add-in commands. -->
<Hosts>
<Host Name="Document" />
</Hosts>
<DefaultSettings>
<SourceLocation DefaultValue="~remoteAppUrl/" />
</DefaultSettings>
<!-- End TaskPane Mode integration. -->
<Permissions>ReadWriteDocument</Permissions>
<!-- Begin Add-in Commands Mode integration. -->
<VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
<!-- The Hosts node is required. -->
<Hosts>
<!-- Each host can have a different set of commands. -->
<!-- Excel host is Workbook, Word host is Document, and PowerPoint host is Presentation. -->
<!-- Make sure the hosts you override match the hosts declared in the top section of the manifest. -->
<Host xsi:type="Document">
<!-- Form factor. Currently only DesktopFormFactor is supported. -->
<DesktopFormFactor>
<!--"This code enables a customizable message to be displayed when the add-in is loaded successfully upon individual install."-->
<GetStarted>
<!-- Title of the Getting Started callout. resid points to a ShortString resource -->
<Title resid="Name.GetStarted.Title"/>
<!-- Description of the Getting Started callout. resid points to a LongString resource -->
<Description resid="Name.GetStarted.Description"/>
<!-- Point to a url resource which details how the add-in should be used. -->
<LearnMoreUrl resid="Name.GetStarted.LearnMoreUrl"/>
</GetStarted>
<!-- Function file is a HTML page that includes the JavaScript where functions for ExecuteAction will be called.
Think of the FunctionFile as the code behind ExecuteFunction. -->
<FunctionFile resid="Name.DesktopFunctionFile.Url" />
<!-- PrimaryCommandSurface is the main Office Ribbon. -->
<ExtensionPoint xsi:type="PrimaryCommandSurface">
<!-- Use OfficeTab to extend an existing Tab. Use CustomTab to create a new tab. -->
<OfficeTab id="TabHome">
<!-- Ensure you provide a unique id for the group. Recommendation for any IDs is to namespace using your company name. -->
<Group id="Name.Group1">
<!-- Label for your group. resid must point to a ShortString resource. -->
<Label resid="Name.Group1Label" />
<!-- Icons. Required sizes 16,32,80, optional 20, 24, 40, 48, 64. Strongly recommended to provide all sizes for great UX. -->
<!-- Use PNG icons. All URLs on the resources section must use HTTPS. -->
<Icon>
<bt:Image size="16" resid="Name.tpicon_16x16" />
<bt:Image size="32" resid="Name.tpicon_32x32" />
<bt:Image size="80" resid="Name.tpicon_80x80" />
</Icon>
<!-- Control. It can be of type "Button" or "Menu". -->
<Control xsi:type="Button" id="Name.TaskpaneButton">
<Label resid="Name.TaskpaneButton.Label" />
<Supertip>
<!-- ToolTip title. resid must point to a ShortString resource. -->
<Title resid="Name.TaskpaneButton.Label" />
<!-- ToolTip description. resid must point to a LongString resource. -->
<Description resid="Name.TaskpaneButton.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Name.tpicon_16x16" />
<bt:Image size="32" resid="Name.tpicon_32x32" />
<bt:Image size="80" resid="Name.tpicon_80x80" />
</Icon>
<!-- This is what happens when the command is triggered (E.g. click on the Ribbon). Supported actions are ExecuteFunction or ShowTaskpane. -->
<Action xsi:type="ShowTaskpane">
<TaskpaneId>ButtonId1</TaskpaneId>
<!-- Provide a url resource id for the location that will be displayed on the task pane. -->
<SourceLocation resid="Name.Taskpane.Url" />
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<!-- You can use resources across hosts and form factors. -->
<Resources>
<bt:Images>
<bt:Image id="Name.tpicon_16x16" DefaultValue="~remoteAppUrl/App_Data/img/Name_logo_16.png" />
<bt:Image id="Name.tpicon_32x32" DefaultValue="~remoteAppUrl/App_Data/img/Name_logo_32.png" />
<bt:Image id="Name.tpicon_80x80" DefaultValue="~remoteAppUrl/Images/Button80x80.png" />
</bt:Images>
<bt:Urls>
<bt:Url id="Name.DesktopFunctionFile.Url" DefaultValue="~remoteAppUrl/Functions/FunctionFile.html" />
<bt:Url id="Name.Taskpane.Url" DefaultValue="~remoteAppUrl/" />
<bt:Url id="Name.GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812" />
</bt:Urls>
<!-- ShortStrings max characters==125. -->
<bt:ShortStrings>
<bt:String id="Name.TaskpaneButton.Label" DefaultValue="Templates" />
<bt:String id="Name.Group1Label" DefaultValue="Name" />
<bt:String id="Name.GetStarted.Title" DefaultValue="Name templates" />
</bt:ShortStrings>
<!-- LongStrings max characters==250. -->
<bt:LongStrings>
<bt:String id="Name.TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane" />
<bt:String id="Name.GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started." />
</bt:LongStrings>
</Resources>
</VersionOverrides>
<!-- End Add-in Commands Mode integration. -->
</OfficeApp>
I'm assuming it's the manifest file that's causing this. I'm not sure what's wrong with this file, as I followed the default tutorials and file -> new project in Visual Studio.
Add-in command annotations are not supported in the SharePoint add-in Catalog. The only deployment option that will support add-in commands in the short term (other than the store) is our new Office 365 Centralized Deployment Tool, who is in preview right now. Check out the documentation here. (Note that the preview is for now only available on these geographies: US,CA,GB,AU,Ireland and NZ. )
That said, you can still use the SP-Based catalog, but you will need to remove the add-in commands annotations from the manifest (all the overrides), and users will need to go to the insertion dialog to insert your add-in.
Please make sure to consult this page for all the deployment options for add-ins and important remarks about each of them.

How to quickly copy the current editing file name or full file path in Eclipse (Luna)?

This 'solution' doesn't look to work any longer in the Luna version:
Copy path/file name in Eclipse to clipboard
This is actually a must have feature for a rich IDE!
You can use start explorer (alternate link) or Copy path plugin.
Short cut key to copy path to clipboard in star explorer is : Ctrl+Alt+
C
Standard eclipse eclipse doest have such key. You can select resource in Package/Project/Navigator view and press Alt+Enter to open property dialog and then copy path from here.
I am using Eclipse Java EE IDE for Web Developers.Version: Luna Release (4.4.0)
Build id: 20140612-0600
You can right mouse click on the file and select "Copy Qualified Name".
For this particular example, the path in clipboard is
/TestingProject/src/com/website/testing/App1.java
Use the EasyShell plugin
If using Eclipse 4.14 or later, from Dec 2019 or later, neither StartExplorer nor Path Tools nor Copy as Path works.
Instead, use EasyShell, which works great!
Instructions:
Unsure no text or code is selected.
Right-click anywhere in your open Eclipse file editor, including on empty space near your code, or in the Project Explorer pane.
Go to "EasyShell" --> "Copy Full Path to Clipboard", or "Copy Qualified Name to Clipboard" (see screenshot below).
You now have the file path copied. Paste it wherever you want.
Totally unrelated aside
Additional note: as far as good Ecliplse plugins go in general, I also highly recommend the DevStyle plugin, set to "Dark Gray (Darkest Dark)" Workbench theme, with the DevStyle "Editor theme" (syntax highlighting) set to Sublime Text 3 (Monokai), by Jeremy Shepherd <-- Update Feb 2020: dead links. Instead, I've copied and pasted the contents of Jeremy Shepherd's .xml file at the bottom of this answer.
Sublime Text 3 (Monokai) - by Jeremy Shepherd--theme-25808.xml:
<?xml version="1.0" encoding="utf-8"?>
<colorTheme id="25808" name="Sublime Text 3 (Monokai)" modified="2014-04-11 19:52:55" author="Jeremy Shepherd">
<searchResultIndication color="#757575" />
<filteredSearchResultIndication color="#757575" />
<occurrenceIndication color="#000000" />
<writeOccurrenceIndication color="#000000" />
<findScope color="#111111" />
<deletionIndication color="#D25252" />
<sourceHoverBackground color="#000000" />
<singleLineComment color="#75715E" italic="false" />
<multiLineComment color="#75715E" italic="false" />
<commentTaskTag color="#CCDF32" italic="false" underline="true" strikethrough="false" />
<javadoc color="#76725E" italic="false" />
<javadocLink color="#76725E" italic="false" underline="true" strikethrough="false" />
<javadocTag color="#FD2971" italic="false" />
<javadocKeyword color="#C2BFA6" italic="false" />
<class color="#56D8F0" bold="false" underline="false" strikethrough="false" />
<interface color="#D197D9" />
<method color="#FFFFFF" />
<methodDeclaration color="#7BE12A" />
<bracket color="#D8D8D8" />
<number color="#7FB347" />
<string color="#E7DD6C" />
<operator color="#D8D8D8" />
<keyword color="#F12971" bold="false" />
<annotation color="#FFFFFF" />
<staticMethod color="#BED6FF" />
<localVariable color="#E7F8F2" />
<localVariableDeclaration color="#F12971" />
<field color="#7BE12A" />
<staticField color="#EFC090" />
<staticFinalField color="#EFC090" />
<deprecatedMember color="#D25252" underline="false" strikethrough="true" />
<enum color="#7BE12A" />
<inheritedMethod color="#BED6FF" />
<abstractMethod color="#BED6FF" />
<parameterVariable color="#79ABFF" />
<typeArgument color="#BFA4A4" />
<typeParameter color="#BFA4A4" />
<constant color="#EFB571" />
<background color="#272822" />
<currentLine color="#3E3D32" />
<foreground color="#F8F8F2" />
<lineNumber color="#72736A" />
<selectionBackground color="#757575" />
<selectionForeground color="#D0D0D0" />
</colorTheme>
Sublime Text 3 (Monokai) - by Jeremy Shepherd--theme-25808.epf:
Too long to post here. See my dotfiles project to download it instead.

Eclipse won't reckognize and validate JSP tag dir attributes

I'm currently using Spring Source Tools 2.9.1 - but I had the same issue with standard Eclipse J2EE distribution.
I'm writing java web application with jsp views.
To better reuse code I have created some tags - *.tag files in WEB-INF\tags folder
Example of enum.tag file:
<jsp:root version="2.0"
xmlns:form="http://www.springframework.org/tags/form"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:spring="http://www.springframework.org/tags"
xmlns:tags="urn:jsptagdir:/WEB-INF/tags"
xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<jsp:directive.tag pageEncoding="UTF-8" />
<jsp:directive.attribute name="value" required="true" rtexprvalue="true" type="Object" />
<jsp:directive.attribute name="cssClass" required="false" rtexprvalue="true" />
<span class="enum ${value.cssClass} ${cssClass}">
<span class="message">
<spring:message code="${value.name}" />
</span>
</span>
</jsp:root>
If I use this tag in my jsp the tag is reckognized by validator, but the tag attributes are not.
so I get warning for this line of jsp
<tags:enum value="${t.state}" />
warning:
Undefined attribute name "value"
tag nemaspace is initialized with:
xmlns:tags="urn:jsptagdir:/WEB-INF/tags
How to setup eclipse to properly validate tagdir's tags?
I use XML version of jsps (and tags) - all teh fiels are valid XML documents, it uses syntax like
<jsp:directive.tag pageEncoding="UTF-8" body-content="scriptless" />
<jsp:directive.attribute name="caption" required="false" rtexprvalue="true" />
<jsp:directive.attribute name="labelInfix" required="false" rtexprvalue="true" />
I now realized and checked that I need to use tagx extension (alongside jspx). With this change Eclispe validation works well.
Yes, as of the time of this writing, using Eclipse Luna, Eclipse's JSP tag validation for custom tags in JARs (called 'packaged tag files' by Oracle) is still horrible. I have two Java projects, one which contains the JAR which has my .tags and TLD (the TLD has elements). I managed to get the JSP tag validation e.g. <t:customTag /> working but Eclipse still marks all attributes in yellow as "undefined attribute name".
I was able to get the tag validation working in my dependent project by:
Adding the tag project to Build path->Projects->"Required projects
on the build path"
In my JAR/tag project itself, under Java build path->Order and
export, I marked the JAR file itself as exported.