How to provide a custom component in the existing Web page Editor Palette

Question

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 pr

Answer 1

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

Answer 2

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);

Answer 3

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",