Finding a WDK Component to customize
Posted by vermarohit on January 14, 2009
Abstract
When starting WDK customization, one of the challenges a WDK developer faces is trying to find out which component to customize. This tip looks at some options available in Firefox that can provide more information about the WDK Components.
DOM Inspector
Firefox comes with a Document (DOM) Inspector that allows a developer to look at a HTML documents model (DOM). Using this tool a developer can get information about the WDK components that have been loaded into the various browser frames. The ‘id’ of the ‘form’ HTML element within a frame is similar to a WDK component’s id. This is true for most cases. Thus, by looking at the ‘form’ id a developer can find out the component loaded in the browser. In addition, other information such as the current JSP page and NLS bundle name can also be obtained.
To open the DOM Inspector click on Tools->DOM Inspector.
The DOM inspector is not installed by the default Firefox installation. You need to select a custom option during installation and choose the ‘Document Inspector’ from the list of ‘Developer Tools’. If you don’t see the ‘DOM Inspector’ option in the ‘Tools’ menu, reinstall Firefox and follow the custom install option.
Page Info
If you don’t want to install the DOM inspector, you can see the various html ‘form’ elements by selecting the ‘Tools->Page Info’ option in Firefox. The ‘Forms’ tab on the ‘Page Info’ window shows the various forms available in a web page. The name of the form displayed here is not exactly the component name but gives a hint to the actual component name. The ‘Page Info’ option does not give a tree structure of the HTML document like the DOM inspector. However, it’s an option installed by default in Firefox and can be quick and convenient to use.
Conclusion
Once you have found the name of the component you can customize it by the regular WDK customization process or use the WDK Eclipse plugin to find more information about the component and customize it.
At the time of this writing, WDK is not supported on Firefox. However, the above tip can be used by developers customizing WDK based applications in a development environment.
Deepak Apte said
Hello Rohit,
Thought the way you suggest is ok, normally trace the component details but turn WDK tracing on for the seesion and checking the FORM related traces, you get the component details in the html source.
I think the Document (DOM) Inspector available in Firefox is more useful for tracking the css and images, It really is very useful for WDK Theme customization.
Deepak Apte said
lotsa typo there!!
what i meant was ….
Thought the way you suggest is ok, normally we trace the component details by turning WDK tracing on for the session and checking the FORM related traces, you get the component details in the html source.
vermarohit said
Deepak
You are right that DOM is more useful for tracking CSS and images. Other very easy way for finding the components is to configure iTrace tool available on EMC developer network.
Thanks