I have created a TreeDataProvider and populated it with TreeItem s. I would like to be able to set the TreeItem that is selected based on the current editor window, like happens in the Explorer/Open Editors view.
I have looked through the API but cannot find any way to do this.
You can use the reveal() API that was added in VSCode 1.21.0 (February 2018) for this.
This requires you to first obtain a TreeView instance using createTreeView():
const treeView = vscode.window.createTreeView("viewId", {treeDataProvider: provider});
treeView.reveal(item, {select: true});
Related
I've been searching non-stop for this on the documentation but haven't been able to find any sort of information. I would like to know how to add checkboxes in my custom view container, similar to the breakpoints' checkboxes.
You can simulate the checkbox by playing with the icon, create a new TreeItem with a different icon when clicked.
Somehow they have knowledge on where on the TreeItem you click.
Looking with the dev tools, it is an <input type="checkbox"/>.
This means that you can do more with TreeItems than the docs explain.
Looking at the source code the BreakpointView is not implemented with a TreeItemProvider, it extends the ViewPane class and uses some kind of templates to render an item. Beside a checkbox it is also possible to have a combobox (SelectBox class).
I have added a feature request (101175) to extend the vscode API so extension developers can write Views with ViewItems that have additional UI-Elements like the Breakpoint view.
You can do this in the proposed api: treeItemCheckbox in Insiders v1.72 now and since it is a fairly simple new api I suspect it will be released with Stable 1.72.
You can play with this now, see using the proposed apis.
Instead of extending TreeItem you will extend TreeItem2 (which extends TreeItem) if you want to use checkboxes. Here is some sample code I put together:
export class TreeTab extends vscode.TreeItem2 {
...
if (tab.isActive) {
this.iconPath = new vscode.ThemeIcon("arrow-small-right", new vscode.ThemeColor("tab.unfocusedActiveBackground"));
this.checkboxState = vscode.TreeItemCheckboxState.Checked;
// this.checkboxState = {state: vscode.TreeItemCheckboxState.Checked, tooltip: "my nifty checkbox tooltip"};
}
...
and elsewhere in your code if you want to detect when that checkbox is clicked/unclicked:
// use your TreeView variable instead of 'tabView'
// from this.tabView = vscode.window.createTreeView(...);
const checkBoxListener = this.tabView.onDidChangeCheckboxState(async event => {
// event = {item: Array(n)}, which TreeItem's checkbox was clicked and its state after clicking:0/1 = on/off
console.log(event);
});
Hi I am developing an extension for VSCode. I am decorating the text editor and hovering some items. Is it possible to make clickable items at hoverMessage and modify the range according to it.
The extension is at:
https://marketplace.visualstudio.com/items?itemName=serayuzgur.crates
You can see the hoverMessage from the GIF
Yes, using markdown you can then create a command link that will execute a command when a user clicks on it:
import * as vscode from 'vscode';
const myContent = new vscode.MarkdownString('[link](command:myCommand?arg1)');
// Command Uris are disabled by default for security reasons.
// If you set this flag, make sure your content is not constructed
// using untrusted/unsanitized text.
myContent.isTrusted = true;
const myHover = new Hover(myContent);
This command can perform whatever action you want
I made a combobox using sap.m library:
var oSelection = new sap.m.ComboBox({
name: <name>,
id: <id>,
items: {
<items here>
})
},
});
Now, how do I make this field kind of read only, so when I tap it on mobile, it wouldn't bring up the mobile's keyboard, but it would bring up the selection options?
I've tried to use editable: false, but it disables the selection together with keyboard.
Thank you.
From what I could find out there's no method that allows such behaviour.
One option, that I personally would not advice, is to access the HTML DOM and disable the input field that composes the sap.m.Combobox component.
Keep in mind that if the development SAPUI5 changes the inner workings of the Combobox component your code could be broken if you update the SAPUI5 libraries.
This being said, to use this option you could do something like:
oSelection.onAfterRendering = function() {
if (sap.m.ComboBox.prototype.onAfterRendering) {
sap.m.ComboBox.prototype.onAfterRendering.apply(this);
}
document.getElementById("<id>-inner").disabled=true;
}
replace the < id>-inner by the correct id given to your component.
This was tested using version 1.22.8 of SAPUI5 development toolkit.
Use sap.m.Select instead of sap.m.ComboBox.
Select does not provide the ability to edit the field content.
In many instances the Select control can directly replace a ComboBox without any other changes to the properties or the items aggregation!
I want to add a new custom component in the Web page Editor Palete named "myHTMLComponent".
So, as soon as user opens any html page with WPE, myHTMLComponentM should be present there.
How can I do the needful, moreover this component will as well need to generate the code changes accordingly. How to achieve the desired result.
Is there any input I can get for this.
I already created standardmetadata tag, but what next!
Finally, I found the solution of the problem.
For adding new categories in the palette, we need to use pagedesignerextension in plugin.xml as following -
<extension
point="org.eclipse.jst.pagedesigner.pageDesignerExtension">
<paletteFactory
class="com.comp.myeditor.palette.CustomEditorPaletteFactory">
</paletteFactory>
</extension>
Where CustomEditorPaletteFactory will be extending AbstractPaletteFactory. Here in createPaletteRoot(), we can add our category.
public PaletteRoot createPaletteRoot(IEditorInput editorInput){
PaletteRoot paletteRoot = new PaletteRoot();
paletteRoot.add(createStandardComponents());
return paletteRoot;
//return null;
}
private static PaletteContainer createStandardComponents() {
PaletteDrawer componentsDrawer = new PaletteDrawer("CustomHTMLComponent");
TagToolPaletteEntry paletteEntry = new TagToolPaletteEntry(
new FormPaletteComponent(".....);
componentsDrawer.add(paletteEntry);
return componentsDrawer;
}
This will create the component category in the palette and we can add as many components as needed using the componentsdrawer.
For adding a new category in the existing one -
Add this in the constructor -
super();
this._paletteContext = PaletteItemManager.createPaletteContext(file);
this._manager = PaletteItemManager.getInstance(_paletteContext);
Then use Palette Grouping like this -
PaletteGroup controls = new PaletteGroup("CUST HTML");
super.add(controls);
ToolEntry tool = new SelectionToolEntry("CUST Cursor",
"Cursor DESCRIPTION");
controls.add(tool);
setDefaultEntry(tool);
//Custom Marquee
controls.add(new MarqueeToolEntry("Marquee", "Marquee Desc"));
controls.add(new PaletteSeparator());
//This class maintins or load all categories features
controls.add(new CustomComponentToolEntry("Custom Component", "Custom Component Descrition",
This really is a good start but I can't find any tutorial or book that get deeper in this matter. For instance, I don't want to replace the default palette but this code does with "new PaletteRoot()" and I lost my HTML tags. Also I want that my new custom components behave as HTML Tags using Drag and Drop, but I don't know how?????????
More Info:
I discovered this code, that was very helpful, whereas file come from ((FileEditorInput)editorInput).getFile()
PaletteRoot paletteRoot = DesignerPaletteRootFactory.createPaletteRoot(file);
This is very interesting topic and I think we are pioneer documenting this feature of eclipse. Here other good point, I want to personalize the tag... e.g. something similiar what I want to achieve is add a tag like "MY TRUEFALSE TAG" and then when is selected and place it in the HTML Designer, I want to become something like <select><option>YES</option><option>NO</option></select> and I guess that I can achieve it by doing something with the tagTransformOperation extension... if you know how to implement it, please let me know. also there is others extensions(tagConverterFactory, elValueResolver). I am guessing here! please I would like your help.
<extension point="org.eclipse.jst.pagedesigner.pageDesignerExtension">
<paletteFactory ...>
<tagTransformOperation id="plugin.tagTransformOperation1XXXXXX">...
SOLUTION?? (Chinese) -solved with tagConverterFactory
http://www.blogjava.net/reloadcn/archive/2007/11/08/webeditor1.html
I'm looking for a Combo(Viewer) in SWT/JFace which supports autocomplete / type-ahead, i.e. the user can enter a couple of characters and the drop down list should show all matching elements.
You can also check out the org.eclipse.jface.fieldassist.AutoCompleteField class. It's not a combo, just a text field, but it adds auto complete functionality as if it were a combo very easily. You can do something as simple as this:
Text textField = new Text(parentComposite, SWT.BORDER);
new AutoCompleteField(textField, new TextContentAdapter(), new String[]
{"autocomplete option 1", "autocomplete option 2"});
I don't think there is anything like this built into either Combo or ComboViewer.
As thehiatus suggests org.eclipse.jface.fieldassist.AutoCompleteField is probably the best place to look for this, however, there is support for Combos:
new AutoCompleteField(combo, new ComboContentAdapter(), new String[]
{"item0", "item1"});
You may be interested in Eclipse's "Content Assist" feature. You can see it in action when using the Eclipse IDE's Java editor. As you edit source code, you will sometimes see a drop-down menu with phrases that complete what you were typing. (Note that you can press Ctrl+Space to force the drop-down menu to be displayed.)
You can implement this in your own SWT/JFace application as well. The "Java Developer's Guide to Eclipse" has an sample application that implements Content Assist. The sample application is a SQL editor, and it is described in Chapter 26, "Building a Custom Text Editor with JFace Text." There's actually an online overview of the chapter here. The sample SQL editor project, com.ibm.jdg2e.editor.jfacetext.sql, can be found here.
On the other hand, if you want to create your own Combo widget and auto-populate it based on input that is being entered, then this might not be very applicable. I'm thinking the org.eclipse.jface.viewers.ComboViewer might be helpful (though I'm not positive).
Check out: http://sourceforge.net/projects/swtaddons/
I use it in my project (with a little tweak).
It's really dead easy to set this up.
As thanks to paz117's comment, thought I'd share the code to make this work:
String[] proposals = new String[controller.model().size()];
for (int i = 0; i < controller.model().size(); i++)
proposals[i] = controller.model().get(i).getAppropriateName();
comboViewer = new ComboViewer(parent, SWT.NONE);
comboViewer.setContentProvider(new ArrayContentProvider());
comboViewer.setLabelProvider(new AppropriateLabelProvider());
comboViewer.setInput(_controller.model());
// additionally, configure the comboViewer arbitrary
new AutoCompleteField(comboViewer.getCombo(), new ComboContentAdapter(), proposals);
The only minor nuisance is that you have to separately populate the model of ComboViewer and AutoCompleteField separately, but that can be at least automated via a static utility method or something similar.
As reference for future visitors, the AutocompleteComboInput (SWT Add-on), can also be a way to achieve this.
Code snippet for screenshot (refer to documentation link above for the code template):
import net.sf.swtaddons.autocomplete.combo.AutocompleteComboInput;
...
subjectCodeCombo = new Combo(tab3Composite, SWT.DROP_DOWN);
// other code modifying Combo appearance here...
// returns a String[] of items retrieved from database
String[] subjectCodeArray = dbQuery.subjectsToArray();
subjectCodeCombo.setItems(subjectCodeArray);
subjectCodeCombo.setText("- SELECT -");
new AutocompleteComboInput(subjectCodeCombo);
The add-on requires all JARs below to be added to the Library: (more info)
eclipse-equinox-common-3.5.0.jar
net.sf.swtaddons_0.1.1_bin_src.jar (sourceforge)
org.eclipse.core.commands.jar
org.eclipse.jface-3.6.0.jar
Click here for JAR pack.