TeamDev Support: Tree table ...

Up to Discussions in QuipuKit Components

This Question is Possibly Answered

1 "correct" answer available (4 pts) 2 "helpful" answers available (2 pts)

35 Replies Last post: Nov 7, 2007 4:48 PM by Tatyana Matveyeva 1 2 3 Previous Next

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

Sep 20, 2007 2:08 AM

Tree table

Hi there,

I want to create a menu on the left side the page.

control

monitor

profile

edit profile

change pasword

help&support

administration

I want the sub menu items 'edit profile' and 'change password' to appear in a different color than the mail menu items.

I tried to use tree table to do that but the + sign comes up which we don't want.

Please let me know if i can use any of your componenst to do this.

Thanks,

Jaya

Tatyana Matveyeva

873 posts since
Aug 16, 2006

Currently Being Moderated

1. Sep 20, 2007 2:12 PM

in response to: Jaya Saluja

Re: Tree table

Hello Jaya,

You can change the appearance of +/- sign in the TreeTable component by using the expandedToggleImageUrl and collapsedToggleImageUrl attributes. You can even change them to blank images. However, when you click on this blank image, the node is collapsed/expanded anyway. If you don't want the rows to be collapsed/expanded, you can use the DataTable component instead. You can use padding to simulate hierarchical structure. One of the possible ways to specify different paddings to the different rows is to use conditional styles. You can specify different colors for the sub menu items using conditional styles as well.

Feel free to contact us if you have any further questions.

Regards,

Tatyana

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

2. Sep 21, 2007 12:20 AM

in response to: Tatyana Matveyeva

Re: Tree table

Tatyana,

How do i use the conditional styles? The code below did not work.

<q:rowStyle condition="#{level == 0}"

style="font-weight: bold; background: silver"/>

<q:singleNodeSelection/>

Please advice.

Thanks,

Jaya

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

3. Sep 21, 2007 12:21 AM

in response to: Jaya Saluja

Re: Tree table

This is complete code.

<q:treeTable id="menuTreeTable" var="message"

expansionState="#{MenuTreeTableBean.menuTreeTableExpansionState}" style="width: 100%;"

columnIdVar="columnId"

<q:rowStyle condition="#{level == 0}"

style="font-weight: bold; background: silver"/>

<q:singleNodeSelection/>

<q:dynamicTreeStructure nodeChildren="#{MenuTreeTableBean.nodeChildren}"/>

<q:treeColumn id="subject1"

style="text-align: left;" expandedToggleImageUrl="#{message.image}" collapsedToggleImageUrl="#{message.image}">

<h:graphicImage value="#{message.image}" />

<h:outputLink value="#{message.URL}">

<h:outputText value="#{message.subject}" style="border-width: 0px"/>

</h:outputLink>

</q:treeColumn>

</q:treeTable>

Thanks,

Jaya

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

4. Sep 21, 2007 12:23 AM

in response to: Jaya Saluja

Re: Tree table

There is a type error in the previous code. Please see this code.

<q:treeTable id="menuTreeTable" var="message"

expansionState="#{MenuTreeTableBean.menuTreeTableExpansionState}" style="width: 100%;"

columnIdVar="columnId">

<q:rowStyle condition="#{level == 0}" style="font-weight: bold; background: silver"/>

<q:singleNodeSelection/>

<q:dynamicTreeStructure nodeChildren="#{MenuTreeTableBean.nodeChildren}"/>

<q:treeColumn id="subject1"

style="text-align: left;" expandedToggleImageUrl="#{message.image}" collapsedToggleImageUrl="#{message.image}">

<h:graphicImage value="#{message.image}" />

<h:outputLink value="#{message.URL}">

<h:outputText value="#{message.subject}" style="border-width: 0px"/>

</h:outputLink>

</q:treeColumn>

</q:treeTable>

Tatyana Matveyeva

873 posts since
Aug 16, 2006

Currently Being Moderated

5. Sep 21, 2007 6:22 PM

in response to: Jaya Saluja

Re: Tree table

Hello Jaya,

To use node level in the binding expression for the condition attribute, you should specify the nodeLevelVar attribute of the TreeTable component. Here's an example:

Regards,

Tatyana

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

6. Sep 21, 2007 9:01 PM

in response to: Tatyana Matveyeva

Re: Tree table

Tatyana,

Please find attached a screen shot of the page i am trying to built. Please give your suggestions. Also, Please suggest how do i add colors to the menu on the left side. Once one of our pages have been implemented we would like to buy your product.

Thanks,

Jaya

Attachments:

homepagereports.jpg (357.1 K)

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

7. Sep 21, 2007 9:54 PM

in response to: Jaya Saluja

Re: Tree table

Tatyana,

We want a scroll bar for the sub-menu if it becomes too big so that the mail menu still stays in the same page. Do you think your tool kit provides a way to do it.

Thanks,

Jaya

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

8. Sep 22, 2007 1:41 AM

in response to: Jaya Saluja

Re: Tree table

Hi Tatyana,

Can you tell me if you something to group the components. I have send you the mockup. The page has 3 sections. Then we have menu in the first one, datatables in the second one and clock,calendar etc in the last one. Do you any component like panelGrid and panelGroup to creat those 3 sections.

Thanks,

Jaya

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

9. Sep 24, 2007 8:22 PM

in response to: Jaya Saluja

Re: Tree table

Tatyana,

I haven't got a response to my mail. Infact we wanted to set up a call with you guys so that we can know more about your JSF components and how your JSF toolkit can help us in developing the web page. We would like to buy your product after that so that we can email you directly for any questions.

Please let me know if that can happen.

Thanks,

Jaya

Tatyana Matveyeva

873 posts since
Aug 16, 2006

Currently Being Moderated

10. Sep 25, 2007 4:27 PM

in response to: Jaya Saluja

Re: Tree table

Hello Jaya,

Sorry for the delay with replying to your messages.

First, I'd like to clarify the requirements as I understood them from the screenshot that you have attached. As I understand, you need the whole menu in the left side of the page to be one TreeTable component. The main items of the menu (Control, Monitor, Analysis, Reports, etc) should be the root nodes. And if the branch with child nodes is too big, there should be a scroll-bar, so the main items are always displayed. The +/- sign should not be displayed next to the main items.

Unfortunately, there are two restrictions for implementing this use case directly using the single TreeTable component. The first one is that you cannot add scroll for the part of the TreeTable component. The second one is that the +/- sign should be the same for the all TreeTable nodes, so it's not currently possible to display them only for some of the nodes.

However, we can recommend you another implementation for the left-side menu. The main items (Control, Monitor, etc.) can be made using the standard JSF CommandButton components with any style applied to them. The sub-menu for each of these items should be organized as a separate TreeTable component. The scrolling feature for each of the sub-menu can be implemented by placing TreeTables in the scrollable component. This will work unless you require that the vertical separator between these sections should be draggable. Unfortunately there is currently no component for this in QuipuKit. We'll consider including it in one of the future versions of QuipuKit.

As to the contents of the right panel, it's possible to embed FoldingPanel components inside of the main right-side FoldingPanel. The Market Summary chart can be displayed using the Chart component of QuipuKit library. You'll just need to provide the appropriate market data for displaying in the Chart component.

Regarding your last post in the forum. We didnÂ’t receive any e-mails from you. Please contact us directly at quipukit-support AT temdev DOT com.

Feel free to ask us if you have any further questions.

Regards,

Tatyana

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

11. Sep 27, 2007 1:31 AM

in response to: Tatyana Matveyeva

Re: Tree table

Tatyana,

I have a clock on the right side of the screen. The clock is basically a set of images put together and it is refreshed every second. Can i tell me how can I put this image in the FoldingPanel dynamically using java script.

Thanks,

Jaya

Tatyana Matveyeva

873 posts since
Aug 16, 2006

Currently Being Moderated

12. Sep 27, 2007 3:37 PM

in response to: Jaya Saluja

Re: Tree table

Hello Jaya,

The FoldingPanel component is just a container. The content of the FoldingPanel component should be specified as a child component of the q:foldingPanel tag. Here is an example:

<q:foldingPanel>

<f:facet name=Â”captionÂ”>

<h:outputText value=Â”FoldingPanelÂ’s captionÂ”/>

</f:facet>

<h:outputText value=Â”FoldingPanelÂ’s contentÂ”/>

<h:graphicImage src=Â”image.gifÂ”/>

</q:foldingPanel>

You should update the child components of the FoldingPanel component using JavaScript in the same way as components placed right on the page.

Note that if you use an ajaxable FoldingPanel component in Facelets, you should not use inline text as the content of the FoldingPanel component. You should use the h:outputText component instead.

Feel free to ask us if you have any further questions.

Regards,

Tatyana

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

13. Oct 5, 2007 11:44 PM

in response to: Tatyana Matveyeva

Re: Tree table

Tatyana,

I see in the sample tree table code that you import the following.

import teamdev.jsf.component.treetable.ExpansionState;

import teamdev.jsf.component.treetable.SeveralLevelsExpanded;

import teamdev.jsf.component.util.FacesUtil;

Can you send me the link to these api's?

Thanks,

Jaya

Jaya Saluja

34 posts since
Feb 2, 2007

Currently Being Moderated

14. Oct 6, 2007 12:43 AM

in response to: Jaya Saluja

Re: Tree table

Tatyana,

Another question for you.

I have finally decided to use the Treetable to the menu on the left side of the page. Lets say i want to build something like this

control

-> edit control

-> show control

administration

profile

->edit profile

->change pasword

help

reports

alarm

I would like to use the same tree table for the all the pages. But i want the submenu for control or any other menu items to be collapsed when i am in profile page. When i am in the profile page i want only the submenu for profile to show up. Similarly when in the control page i want only the submenu for control to show up and the submenu for profile to be collapsed.

Is it possible to do this using the same treetable.

Thanks,

Jaya

Go to original post 1 2 3 Previous Next

Go to original post

This Question is Possibly Answered

Sep 20, 2007 2:08 AM

Tree table

Actions

More Like This