How to create a filter tree in GWT using CellTree, a filter tree is some Tree which has an filter(TextBox) where we can enter values for the leaf node. Once we start entering values we get the tree branches along with leaf nodes reflected on the Tree panel(we have our tree inside a panel). For reference : http://www.sencha.com/examples/explorer.html#filtertree
We can develop such FilterTree easily in GXT, but we have an requirement to develop it in GWT, not in GXT. Can I have some replies with a short and simple sample code on FilterTree in GWT, or at least any links to refer to.
This doesn't exist natively in GWT.
You'll have to write some code! You can achieve this with a TextBox with a KeyUpHandler.
I would suggest implementing your own Tree, because the Tree that comes with GWT isn't good for your use case. It's API won't allow you to hide and show leaves easily.
Related
We are develpoing a web-based automation solution for a web application that is built using ExtJs.
Currently i am testing various different object identification techniques that identify web elements in the best way.
We'd like to use the IE developer tools (F12) to highlight and select DOM objects on the page, and (somehow) get their corresponding ExtJs component (along with its corresponding properties, such as itemId).
Is this possible to do through code or through some other technique?
I am unfamiliar with IE Dev tools for such things, however I can attempt to answer targeting specific components and their elements.
You can target Ext components via several ways:
Ext.ComponentQuery.query(CQselector) method (see docs for examples)
Ext.getCmp(componentID) if you know component ID
up() and down() methods from any container/component. these also take CQselector expressions
Any of these methods are accessible from the page since Ext library is loaded. In browsers like FF and Chrome you can execute these methods directly from the console. I am guessing similarly they should be available in IE Dev tools.
Once you have reference to the Ext component you can get HTML elements through .dom or .el or similar properties. Or you could use Dom query directly.
I believe that if you set the id property rather than the itemId, you can achieve the desired result as this is passed through as the html id property of the top level container for the component (I think!). It's a little complicated to get that to work with accuracy though given the amount of nested divs/tables that are used in most of the extjs components. Good luck!
Hard to tell what you're looking for, but if you're trying to get a reference to an Ext.Component that is rendered, you can look for the wrapper node for your component in the HTML structure. The HTML id is the same as the component id. If you run var comp = Ext.getCmp('some-id-12345') and if that returns something, you've found the wrapper for an Ext.Component.
You could then use
comp.itemId
To retrieve the itemId
You should look into http://www.illuminations-for-developers.com/ A plugin for firebug that shows Ext.Components.
You can also use the Sencha Page Analyzer to see the entire component tree
I'm investigating Adobe CQ5 and would like any advice on how to integrate its drag-and-drop UI to create a responsive website. It seems as if it works on a concept of fairly bland templates with components that can be dropped in pretty much anywhere, including things like "three-column control" - which would make designing a responsive grid structure very hard (as it would be hard to prevent users from dropping in a control that could ruin the layout).
Does anyone have any experience or advice on this? I'm really looking for deep technical details on the structure of templates vs components (paragraphs), and where/how to manage to the CSS.
CQ5 offers ways to control what can be done within a template, so thinking that components "can be dropped in pretty much anywhere" may be misleading. Page templates are designed and configured so that you control which components can be added to a certain area of a page. This allows you to only make those components available that will work with the template layout, excluding components that would wreck the layout. Then authors are only allowed to use things that will work. If they attempt to drag a component onto a paragraph (parsys) where that component has not been configured as available, the UI will not allow them to use it there. So CQ actually makes it easy to prevent users from dropping a control somewhere that would ruin the layout.
This is outlined a bit here:
http://dev.day.com/docs/en/cq/current/howto/components_develop.html#Adding%20a%20new%20component%20to%20the%20paragraph%20system%20%28design%20%20%20%20%20mode%29 which states that
"The components can be activated (or deactivated) to determine which
are offered to the author when editing a page."
When it comes to CSS and JavaScript, you can create a client library and then include the relevant client library on the page. Backend CQ functionality will take care of combining multiple CSS (or JavaScript) files into a single minified file to allow for a single HTTP request of an optimized file. This it outlined a bit here:
http://dev.day.com/docs/en/cq/current/developing/widgets.html#Including%20the%20Client-Sided%20Code%20in%20a%20Page as well as
http://dev.day.com/docs/en/cq/current/howto/taglib.html#%3Ccq:includeClientLib%3E
So you might develop several components that share a client library, then when any of the components is added to a paragraph the client library will be included on the page. You may also want a CSS library that applies to all the templates to give a common look and feel, yet allow components to add their own when they are used.
These guidelines for using templates and components outline how you provide control, yet flexibility:
http://dev.day.com/docs/en/cq/5-5/developing/developing_guidelines_bestpractices.html#Guidelines%20for%20Using%20Templates%20and%20Components
I'll document our successful WIP experience with RWD and CQ5
Assumptions:
A well documented style guide.
Our First Steps:
Modified existing column control component css to utilize twitter bootstrap grid css.
Create a base page property allowing two different classes on the grid container to be set and inherited by child pages. (container||container-fluid).
Leverage out-of-the-box components where ever possible.
All component widths inherit the width of their parent container allowing for components to be dropped into any location within a template.
Issues:
The out-of-the-box column control component can not be nested.
We are looking into building a custom column control component.
Takeaways: this is an evolutionary project and we are constantly iterating.
With the recent launch of AEM 6.0, they have an example website called as Geomatrixx Media. This website is responsive.
You can take this example as reference and start building on top of it.
I have a Wizard with two pages: pageone extending WizardNewProjectCreationPage, and pagetwo is extending WizardPage. I want the user to be able to create the project first, and then add files to the project on the second page.
For the latter I want to use a SWT Table (?) like when you pick an interface in the Java Class Wizard in Eclipse IDE (cf. picture here). Also the "Add" button next to it.
How can I achieve this? Do I have to use Eclipse Forms API for this? Or simply add a SWT Table? I have used the Plug-In Spy but the source code given in NewClassWizardPage and NewTypeWizardPage seems to be very specific to this example and I cannot make sense of it.
I've also had a look at vogella's tutorial for JFace table, but I can't get my head around it.
Just some basic steps would be great, or maybe somebody has done this before?
I can easily understand why you're confused... there are indeed many ways to do this. You even left out Data Binding which provides you with yet another way to populate and decorate the table in question.
To sum up the usage of the different APIs:
SWT provides the basic widgets and controls. Often these have a rather irregular low-level interface - especially compared with Swing - but you need to access the SWT controls to lay them out (an exercise that can be complicated in itself). Also many of the listeners are on the controls.
JFace provides a set of viewers on top of the corresponding structured SWT controls - e.g. TableViewer on top of Table. These viewers provides a high-level interface to the functionality of the underlying control - e.g. with models, label providers, sorting, filtering and more. (The viewers can easily be compared with the Swing counterparts...)
Eclipse Forms provides a (relatively) simple way to create views, dialogs, etc that looks like web pages. Examples of this are the various PDE editors.
Data Binding provides a (somewhat complicated) way to bind controls (including Tables) to a data structure (Bean, EMF or POJO based).
So... you have to decide on whether to use the model facet of JFace and Data Binding, but the rest of the APIs are often combined in the same view or dialog.
NewClassWizardPage and NewTypeWizardPage are both particular complicated examples of wizards - don't base your own work on these!
For your particular case - as I understand it - I would use a simple JFace TableViewer to hold the list of interfaces... (I use a TableViewer rather than a ListViewer as the later cannot have an image as part of the label provider.) The "Add" and "Remove" buttons will manipulate the model of the viewer and then update the viewer. You don't need Eclipse Forms as the wizards usually don't look like web pages. And Data Binding is also an overkill here given the very, very simple data for the wizard.
Please note that the function of a wizard is only performed after all the wizard pages has been shown and the "Finish" button is pressed.
I apologize in advance as this is one of those "how does this work" type questions. I am a newbie to GWT MVP and I am trying to create a project similar to this one here:
where basically I have a menu of widgets/components that I can drag and drop onto a panel and doing so changes the properties shown in the Property disclosurepanel.
I have been reading about the official GWT MVP framework and they its described it seems like it expects each application state to represented by a whole new page (a View with an associated Place).
I am confused as to how this would work this type of application. That is, an application that has 1 basic screen that never entirely changes (i.e. user never navigates to a whole new screen) with sections that need to communicate to each other (i.e. dropping a widget loads a different set of properties).
I am sure I am misunderstanding something about MVP so if someone can just offer some advice on how to wrap my brain around this that would be great.
It's not impossible to utilize the MVP paradigm with more than one on-screen regions.
You can read about a possible solution in this article. It's the last post of a four-part series. I suggest reading also the preceeding posts from the author with the same tags.
I have been using UIBinder on SmartGWT widgets rather successfully.
However, I have to extend each SmartGWT widget that I use to comply with UIBinder's requirement. Occasionally, I have to masquerade a SmartGWT widget into com.google.gwt namespace, or masquerade a non-GWT-widget as a GWT widget. I extend widgets on as-needed basis.
So, I am starting to wonder, may be SmartGWT already has a UI XML format and I might be doing all this UIBinder acclimatization just to reinvent SmartGWT's wheel.
I have read and reread source codes of the showcase and delved into some of the SmartGWT source code, as well as reading the javadocs.
All I found is XML or Json for communication between server and client.
Is there any UI def XML available for SmartGWT whether gwt-compiled to client-side javascript or like Vaadin's server-side generated UIDL?
And if you happen to be an Isomorphic agent, could you tell us if there are any plans to let SmartGWT play with UIBinder (to preclude me from having to massage SmartGWT widgets on my own anymore)?
Yes, there is a SmartGWT XML component definition - the one used by Visual Builder and Reify, and which you can also write directly. See these docs and this FAQ item:
http://www.smartclient.com/smartgwtee-latest/javadoc/com/smartgwt/client/docs/ComponentXML.html
http://forums.smartclient.com/showthread.php?t=8159#loadVBScreen
As the FAQ clarifies, we recommend using this XML format for a set of use cases that heavily overlaps with what UIBinder is for, that is, keeping your layout and basic component definitions in a declarative format that designers can edit and which can be edited by visual tools, and having your actual Java event handling and other programmatic code separate.
However we strongly recommend against having that declarative format be HTML (as UIBinder does it) because that introduces lots and lots of cross-browser layout issues.
We are likely to eventually support UIBinder as well for the few use cases where it is not redundant with our own XML format. If you need that to happen sooner, consider Feature Sponsorship:
http://www.smartclient.com/services/index.jsp#features
For XML smartclient has the componentxml which is XML based ui design and use JavaScript to have client side logics. You need not compile your app every time in development environment and just reloading of the browser will have the change included and you can test it.