Customize maqetta palette.

[piyush kumar]

Hi everyone ,

I am new to maqetta and loving its features.

I have integrated maqetta with my Eclipse as per the guide. Now I want to customize the code.

Before that I want to know which package or file in project has side palette(after login). So that i I can change the functionality of palette.

Thank you.

[Jon Ferraiolo]

The file that controls what appears (and the grouping and ordering) in the widget palette is:

releng/davinci.releng/orion/builder/rootfiles/siteConfig/widgetPalette.json

As I remember, most of the logic that processes that file is in:

maqetta.core.client/WebContent/davinci/ve/palette/Palette.js

--
You received this message because you are subscribed to the Google Groups "Maqetta Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to maqetta-user...@googlegroups.com.
To post to this group, send email to maqett...@googlegroups.com.
Visit this group at http://groups.google.com/group/maqetta-users.
For more options, visit https://groups.google.com/d/optout.

[piyush kumar]

Thank you Jon Ferraiolo. Can you please me where is the home page that is .html page after loging into mequetta. This home page has pallete , workbench, widget divs. 

[Jon Ferraiolo]

Piyush,

My memory is getting fuzzy, but I'm pretty sure that if the browser goes to http://localhost:5000/maqetta, then the Java server logic delivers a skeleton HTML page, and I think the logic is in maqetta.core.server/src/maqetta/core/server/DavinciPageServlet.java in function writeMainPage(), but I don't understand what's going on with constants EXTENSION_POINT_MAIN_PAGE and EP_TAG_MAIN_PAGE. But the server either delivers an empty HTML page or a very minimal HTML page, and the real content of the "home page" is built via client-side logic. 

Most (all?) of the client-side page setup logic is in maqetta.core.client/WebContent/davinci/ve/Context.js. One particularly interesting function is _setSourcePostLoadRequires(), especially the line that looks like this:

window["loading" + this._id] = function(parser, htmlUtil) {

Within that block you'll see some logic that sets the 'id' and width/height properties on the BODY.

After _setSourcePostLoadRequires(), processing continues with function _continueLoading(). 

As I remember, there are 5 of 6 different functions that get invoked *ASYNCHRONOUSLY* to build up the initial page content. The logic is complex (and fully asynchronous) to deal with browser timing issues in loading various resources (e.g., loading Dojo JavaScript modules, loading styling sheets, loading Maqetta's various widget metadata files, etc). There were changes in the startup logic to fix some remaining bugs just before my team quit working on Maqetta, and I'm not sure I ever fully grasped the revised startup logic. If I were in your boots, I would get in the debugger, trace through things and take a bunch of notes to figure out how things work.

Best of luck.

Jon

[Jon Ferraiolo]

Piyush,

Actually, my last response was wrong. Sorry, but it's been a long time since I worked on Maqetta. My previous response was relative to how the inner IFRAME is built which holds the editable page content of an HTML5 page you are editing.

The logic that builds the outer frame for the Maqetta application is centered in maqetta.core.client/WebContent/davinci/Workbench.js. In that routine, a "view" is one of the palettes (e.g., widget palette, outline palette, properties palettes) that appears on the left or right side of the application, and an "editor" can be a text editor, theme editor or a HTML5 visual editor, which appears in the middle of the app (for the HTML5 visual editor, it's in an IFRAME).

Hope that helps.

Jon

Jon

[piyush kumar]

kudos to you jon , Thank you so much for quick response. I will look at the pages suggested by you.

Thank you once again
Piyush

[piyush kumar]

Hi jon,

i need to ask one more thing.

could you please hel[p me with the following.

When I drag and drop an element from the palette menu , which file generates the source code for that particular element.

For example I dragged and dropped the HTML FORM tag to my workbench then which file   generates the relative HTML code for the same.

Thanks & Regards

[piyush kumar]

Hi jon,

i need to ask one more thing.

could you please hel[p me with the following.

When I drag and drop an element from the palette menu , which file generates the source code for that particular element.

For example I dragged and dropped the HTML FORM tag to my workbench then which file   generates the relative HTML code for the same.

Thanks & Regards

[Jon Ferraiolo]

Piyush,

There is actually some documentation for how widgets are specified. Look at this wiki pages:

(1) https://github.com/maqetta/maqetta/wiki

(2) https://github.com/maqetta/maqetta/wiki/Widget-Libraries

(3) https://github.com/maqetta/maqetta/wiki/Widget-Metadata

(4) https://github.com/maqetta/maqetta/wiki/widgets.json-spec

(5) https://github.com/maqetta/maqetta/wiki/OpenAjax-Metadata

Search the last page above (5) (OpenAjax Metadata) for the string "content". The example on that page shows the initial HTML content in the form of a string (i.e., "<input type='button'></input>"). This holds the simple element that is to be inserted into the document immediately upon adding a new widget. But any children (the innerHTML) that go inside of that element are defined by the "children" property in (4) (widgets.json). 

Therefore, for FORM, the OpenAjax Metadata file (https://github.com/maqetta/maqetta/blob/master/davinci.html/WebContent/metadata/html/form_oam.json) shows the initial content as "<form></form>" and the widgets.json file (https://github.com/maqetta/maqetta/blob/master/davinci.html/WebContent/metadata/widgets.json) does not have a "children" property for FORM, so the "<form></form>" will have no children when it is created initially.

However, if you look at FIELDSET, he OpenAjax Metadata file (https://github.com/maqetta/maqetta/blob/master/davinci.html/WebContent/metadata/html/fieldset_oam.json) shows the initial content as "<fieldset></fieldset>" and the widgets.json file (https://github.com/maqetta/maqetta/blob/master/davinci.html/WebContent/metadata/widgets.json) has a "children" property for FIELDSET that looks like this:

"children": [
	{
	"type": "html.legend",
	"children": "Legend"
	}
	],

so the initial HTML content for a FIELDSET will be:

<fieldset><legend>LEGEND</legend></fieldset>

Much of the code that makes all of the above happen is in these two files:

(6) https://github.com/maqetta/maqetta/blob/master/maqetta.core.client/WebContent/davinci/ve/widget.js

(7) https://github.com/maqetta/maqetta/blob/master/maqetta.core.client/WebContent/davinci/ve/metadata.js

The key function in widget.js is createWidget().

metadata.js processes widgets.json files and all of the *_oam.json files.

Hope that helps!

Jon

[piyush kumar]

Thank you Jon. I will go through these documents. 

[piyush kumar]

Hi Jon thanks, I am not getting where are the DOJO tags for different container elements. When we drag and drop the container element say accordian pane. Then is dojo tags for that already defined if yes where are these tags written. please help.

[Jon Ferraiolo]

Are you asking what are the default children of the Accordion widget? If that's your question, look at the AccordionContainer entry in this file: https://github.com/maqetta/maqetta/blob/master/davinci.dojo_1_8/WebContent/metadata/widgets.json. The 'children' property shows two ContentPane as the children, with tab labels of 'Pane 1' and 'Pane 2'. As a result, when you add an Accordion to a page, the Accordion will have two ContentPane elements by default.

But I'm pretty sure that Maqetta puts up a prompt when you add an Accordion. That prompt is what's call "inlineEdit" or "SmartInput" in the code base, where the user can enter what he wants as the content of the widget. For Accordion, each line on the prompt represents a new tab for the Accordion. If the user replaces the default strings ('Pane 1\nPane 2') with something else (e.g., 'abc\ndef\nghi'), then the Maqetta code will create 3 ContentPanes with tabs 'abc', 'def' and 'ghi'. Most of the logic to do this is in https://github.com/maqetta/maqetta/blob/master/maqetta.core.client/WebContent/davinci/ve/input/SmartInput.js. The metadata to control the SmartInput feature are the 'inlineEdit*' properties documented in https://github.com/maqetta/maqetta/wiki/widgets.json-spec.

Good luck!

Jon