You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by Ajay Bhat <a....@gmail.com> on 2013/08/27 19:21:03 UTC

Coloring similar UI components

Hi,

Suppose I have a set of different panes (like Table Pane, Label etc) in
different tabs. Would it be possible to color all the panes of same type
across the different tabs using the method as shown in Pivot tutorial [1]

function onColorChange() {
    var color = colorChooser.selectedColor;
    sampleBorder.styles.put("backgroundColor", color);
}

[1] http://pivot.apache.org/tutorials/color-choosers.html

-- 
Thanks and regards,
Ajay Bhat

Re: Coloring similar UI components

Posted by Sandro Martini <sa...@gmail.com>.
Hi,
probably in future we should be able to simplify this with Java 8 and
Lambda Expressions (
http://docs.oracle.com/javase/tutorial/java/javaOO/lambdaexpressions.html
), or maybe today using something like Scala Functions ...

For Pivot 2.1 I'm thinking to add some utility classes to simulate
Scala-like Functions (for simple cases) in Java, I hope to be able
soon to add something ... or maybe someone of us using Pivot from
Scala could already use this feature (but I didn't tried up to now).
This is the related issue:
https://issues.apache.org/jira/browse/PIVOT-799


For comments, suggestions, etc tell to us.

Bye,
Sandro


2013/8/29 Ajay Bhat <a....@gmail.com>:
> Just a quick question. Is there any way I could do to make the following
> code defining various actions somewhat cleaner and more compact?
>
>    Action.getNamedActions().put("something", new Action() {
>          public void perform(Component source) {
> System.out.println("Default");
>                  //more stuff
> }
> });
>        //defined many more actions in similar format for options in the menu
>
>
>

Re: Coloring similar UI components

Posted by Ajay Bhat <a....@gmail.com>.
Just a quick question. Is there any way I could do to make the following
code defining various actions somewhat cleaner and more compact?

   Action.getNamedActions().put("something", new Action() {
         public void perform(Component source) {
System.out.println("Default");
                 //more stuff
}
});
       //defined many more actions in similar format for options in the menu

RE: Coloring similar UI components

Posted by "Roger L. Whitcomb" <Ro...@actian.com>.
Anything that can be set via a style (using "getStyles().put("xxx",
blah)") can be done this way.  Labels have "color", "backgroundColor"
and "disabledColor", Buttons have "color", "borderColor",
"backgroundColor", "disabledColor", "disabledBorderColor", and
"disabledBackgroundColor".  TextArea has "color", "inactiveColor", etc.
You can see all these in the Component Explorer demo
(http://pivot.apache.org/demos/component-explorer.html), by clicking on
the Styles tab at the upper right for each component.

 

Dialogs themselves are windows that are containers for other components
or containers.  But, they do have a background color style that can be
set this same way.  None of these color settings affect any other (that
I know of), so yes, you can set the foreground individually and not
change the background (for instance).  You can play around with this
using the Component Explorer demo program.

 

HTH,

~Roger

 

From: Ajay Bhat [mailto:a.ajay.bhat@gmail.com] 
Sent: Wednesday, August 28, 2013 11:17 AM
To: user@pivot.apache.org
Subject: Re: Coloring similar UI components

 

Great, thanks for the help. 

 

There's a few more doubts I have. Can I color all the text across
different Buttons, TextAreas, Dialogs, Labels, disabled components etc
and <only> the text to different color, while keeping other (prev
mentioned) changes to color intact using this method?

 

What about text cursor in the text areas?


Re: Coloring similar UI components

Posted by Ajay Bhat <a....@gmail.com>.
Great, thanks for the help.

There's a few more doubts I have. Can I color all the text across different
Buttons, TextAreas, Dialogs, Labels, disabled components etc and <only> the
text to different color, while keeping other (prev mentioned) changes to
color intact using this method?

What about text cursor in the text areas?

Re: Coloring similar UI components

Posted by Roger and Beth Whitcomb <Ro...@rbwhitcomb.com>.
Yes.  The point is to recursively traverse whatever hierarchy of 
components you have, starting from the top-most one and going down 
through all the containers (using the appropriate children) and then 
setting the style (be it color, font, etc.) on the "leaf" or individual 
components.

A dialog box wouldn't be a child of anything else, so you would have to 
start with that separately.  But, it is just a subclass of Window/Frame 
so you can start with it and navigate down through its children.

This code was just an example -- your mileage may vary....

HTH,
~Roger

On 8/27/13 6:23 PM, Ajay Bhat wrote:
> Can this be done for dialog boxes and buttons as well?
>
>
> On Tue, Aug 27, 2013 at 11:11 PM, Roger L. Whitcomb 
> <Roger.Whitcomb@actian.com <ma...@actian.com>> wrote:
>
>     No problem.  But, you would have to write a little loop (possibly
>     a recursive method) to navigate through all the children of the
>     TabPane and set the style. Here is some sample code I wrote for
>     doing a similar thing (only with a new font):
>
>     /**
>
>     * Recursively set the font on all necessary subcomponents
>
>     * of the given component (which initially should be the
>
>     * {@link #resultsPane}.  Traverse the hierarchy appropriately.
>
>     */
>
>     private void setOutputFont(Component component) {
>
>         if (component instanceof TabPane) {
>
>     TabPane tabPane = (TabPane)component;
>
>     for (Component tab : tabPane.getTabs()) {
>
>         setOutputFont(tab);
>
>     }
>
>         }
>
>         else if (component instanceof ScrollPane) {
>
>     ScrollPane scrollPane = (ScrollPane)component;
>
>     setOutputFont(scrollPane.getView());
>
>     if (scrollPane.getColumnHeader() != null)
>
>         setOutputFont(scrollPane.getColumnHeader());
>
>         }
>
>         else if (component instanceof Border) {
>
>     setOutputFont(((Border)component).getContent());
>
>         }
>
>         else if (component instanceof Container) {
>
>     for (Component child : (Container)component) {
>
>         setOutputFont(child);
>
>     }
>
>         }
>
>         else if (component instanceof TableView ||
>
>          component instanceof TableViewHeader ||
>
>          component instanceof ListView) {
>
>     component.getStyles().put("font", outputFont);
>
>         }
>
>     }
>
>     ~Roger
>
>     *From:*Ajay Bhat [mailto:a.ajay.bhat@gmail.com
>     <ma...@gmail.com>]
>     *Sent:* Tuesday, August 27, 2013 10:21 AM
>     *To:* user@pivot.apache.org <ma...@pivot.apache.org>
>     *Subject:* Coloring similar UI components
>
>     Hi,
>
>     Suppose I have a set of different panes (like Table Pane, Label
>     etc) in different tabs. Would it be possible to color all the
>     panes of same type across the different tabs using the method as
>     shown in Pivot tutorial [1]
>
>     function onColorChange() {
>
>         var color = colorChooser.selectedColor;
>
>     sampleBorder.styles.put("backgroundColor", color);
>
>     }
>
>     [1] http://pivot.apache.org/tutorials/color-choosers.html
>
>     -- 
>
>     Thanks and regards,
>
>     Ajay Bhat
>
>
>
>
> -- 
> Thanks and regards,
> Ajay Bhat


Re: Coloring similar UI components

Posted by Ajay Bhat <a....@gmail.com>.
Can this be done for dialog boxes and buttons as well?


On Tue, Aug 27, 2013 at 11:11 PM, Roger L. Whitcomb <
Roger.Whitcomb@actian.com> wrote:

> No problem.  But, you would have to write a little loop (possibly a
> recursive method) to navigate through all the children of the TabPane and
> set the style.  Here is some sample code I wrote for doing a similar thing
> (only with a new font):****
>
>                 /******
>
>                 * Recursively set the font on all necessary subcomponents*
> ***
>
>                 * of the given component (which initially should be the***
> *
>
>                 * {@link #resultsPane}.  Traverse the hierarchy
> appropriately.****
>
>                 */****
>
>                 private void setOutputFont(Component component) {****
>
>                     if (component instanceof TabPane) {****
>
>                                 TabPane tabPane = (TabPane)component;****
>
>                                 for (Component tab : tabPane.getTabs()) {*
> ***
>
>                                     setOutputFont(tab);****
>
>                                 }****
>
>                     }****
>
>                     else if (component instanceof ScrollPane) {****
>
>                                 ScrollPane scrollPane =
> (ScrollPane)component;****
>
>                                 setOutputFont(scrollPane.getView());****
>
>                                 if (scrollPane.getColumnHeader() != null)*
> ***
>
>
> setOutputFont(scrollPane.getColumnHeader());****
>
>                     }****
>
>                     else if (component instanceof Border) {****
>
>
> setOutputFont(((Border)component).getContent());****
>
>                     }****
>
>                     else if (component instanceof Container) {****
>
>                                 for (Component child :
> (Container)component) {****
>
>                                     setOutputFont(child);****
>
>                                 }****
>
>                     }****
>
>                     else if (component instanceof TableView ||****
>
>                                      component instanceof TableViewHeader
> ||****
>
>                                      component instanceof ListView) {****
>
>                                 component.getStyles().put("font",
> outputFont);****
>
>                     }****
>
>                 }****
>
> ** **
>
> ~Roger****
>
> ** **
>
> *From:* Ajay Bhat [mailto:a.ajay.bhat@gmail.com]
> *Sent:* Tuesday, August 27, 2013 10:21 AM
> *To:* user@pivot.apache.org
> *Subject:* Coloring similar UI components****
>
> ** **
>
> Hi,****
>
> ** **
>
> Suppose I have a set of different panes (like Table Pane, Label etc) in
> different tabs. Would it be possible to color all the panes of same type
> across the different tabs using the method as shown in Pivot tutorial [1]*
> ***
>
> ** **
>
> function onColorChange() {****
>
>     var color = colorChooser.selectedColor;****
>
>     sampleBorder.styles.put("backgroundColor", color);****
>
> }****
>
> ** **
>
> [1] http://pivot.apache.org/tutorials/color-choosers.html
> ****
>
> ** **
>
> -- ****
>
> Thanks and regards,****
>
> Ajay Bhat****
>



-- 
Thanks and regards,
Ajay Bhat

RE: Coloring similar UI components

Posted by "Roger L. Whitcomb" <Ro...@actian.com>.
No problem.  But, you would have to write a little loop (possibly a
recursive method) to navigate through all the children of the TabPane
and set the style.  Here is some sample code I wrote for doing a similar
thing (only with a new font):

                /**

                * Recursively set the font on all necessary
subcomponents

                * of the given component (which initially should be the

                * {@link #resultsPane}.  Traverse the hierarchy
appropriately.

                */

                private void setOutputFont(Component component) {

                    if (component instanceof TabPane) {

                                TabPane tabPane = (TabPane)component;

                                for (Component tab : tabPane.getTabs())
{

                                    setOutputFont(tab);

                                }

                    }

                    else if (component instanceof ScrollPane) {

                                ScrollPane scrollPane =
(ScrollPane)component;

                                setOutputFont(scrollPane.getView());

                                if (scrollPane.getColumnHeader() !=
null)

 
setOutputFont(scrollPane.getColumnHeader());

                    }

                    else if (component instanceof Border) {

 
setOutputFont(((Border)component).getContent());

                    }

                    else if (component instanceof Container) {

                                for (Component child :
(Container)component) {

                                    setOutputFont(child);

                                }

                    }

                    else if (component instanceof TableView ||

                                     component instanceof
TableViewHeader ||

                                     component instanceof ListView) {

                                component.getStyles().put("font",
outputFont);

                    }

                }

 

~Roger

 

From: Ajay Bhat [mailto:a.ajay.bhat@gmail.com] 
Sent: Tuesday, August 27, 2013 10:21 AM
To: user@pivot.apache.org
Subject: Coloring similar UI components

 

Hi,

 

Suppose I have a set of different panes (like Table Pane, Label etc) in
different tabs. Would it be possible to color all the panes of same type
across the different tabs using the method as shown in Pivot tutorial
[1]

 

function onColorChange() {

    var color = colorChooser.selectedColor;

    sampleBorder.styles.put("backgroundColor", color);

}

 

[1] http://pivot.apache.org/tutorials/color-choosers.html


 

-- 

Thanks and regards,

Ajay Bhat


Re: Coloring similar UI components

Posted by ajaybhat <a....@gmail.com>.
Thanks for the help.



--
View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Coloring-similar-UI-components-tp4022706p4022728.html
Sent from the Apache Pivot - Users mailing list archive at Nabble.com.

Re: Coloring similar UI components

Posted by Ajay Bhat <a....@gmail.com>.
Thanks for the help.

Re: Coloring similar UI components

Posted by Sandro Martini <sa...@gmail.com>.
Hi,
in the JavascriptConsoleTest (under tests subproject) we put different
ways to interact between Java code and JavaScript code (interpreted by
the JVM inside bxml files) ... you should find something useful for
your case:

package org.apache.pivot.tests
JavascriptConsoleTest.java , the main class of the test
and similar files are javascript_console_test.*, in the same folder.

Bye,
Sandro


2013/8/29 Ajay Bhat <a....@gmail.com>:
> Okay, is it possible to pass arguments through the BXML script itself? Like
>
> <Menu.Item buttonData="Default"
> ButtonPressListener.buttonPressed="myClass.colorChange(colors)">
> <buttonData />
> </Menu.Item>
> //defined colorChange(int[]) to accept array of hex values.

Re: Coloring similar UI components

Posted by Ajay Bhat <a....@gmail.com>.
Okay, is it possible to pass arguments through the BXML script itself? Like

<Menu.Item buttonData="Default"
ButtonPressListener.buttonPressed="myClass.colorChange(colors)">
<buttonData />
</Menu.Item>
//defined colorChange(int[]) to accept array of hex values.

RE: Coloring similar UI components

Posted by "Roger L. Whitcomb" <Ro...@actian.com>.
This is a "style" (not an "attribute").  So, the corresponding Java code
would be:

 

Color color = colorChooser.getSelectedColor();

initComp.getStyles().put("backgroundColor", color);

 

~Roger

 

From: Ajay Bhat [mailto:a.ajay.bhat@gmail.com] 
Sent: Thursday, August 29, 2013 10:10 AM
To: user@pivot.apache.org
Subject: Re: Coloring similar UI components

 

On Tue, Aug 27, 2013 at 10:51 PM, Ajay Bhat <a....@gmail.com>
wrote:

	Hi,

	 

	function onColorChange() {

	    var color = colorChooser.selectedColor;

	    sampleBorder.styles.put("backgroundColor", color);

	}

 

The above code is for Javascript. Is there a way I can do it in Java
code? I tried using setAttributes(T key, Object value) by using

 

Component initComp = Window.getActiveWindow();

System.out.println(initComp.getName());

Integer keyValue;

if (initComp instanceof Window) {

    initComp.setAttribute("backgroundColor", toHex());

     System.out.println("Window painted");

}

 

But its not working.

 

-- 

Thanks and regards,

Ajay Bhat


Re: Coloring similar UI components

Posted by Ajay Bhat <a....@gmail.com>.
On Tue, Aug 27, 2013 at 10:51 PM, Ajay Bhat <a....@gmail.com> wrote:

> Hi,
>
> function onColorChange() {
>     var color = colorChooser.selectedColor;
>     sampleBorder.styles.put("backgroundColor", color);
> }
>

The above code is for Javascript. Is there a way I can do it in Java code?
I tried using setAttributes(T key, Object value) by using

Component initComp = Window.getActiveWindow();
System.out.println(initComp.getName());
Integer keyValue;
if (initComp instanceof Window) {
initComp.setAttribute("backgroundColor", toHex());
 System.out.println("Window painted");
}

But its not working.

-- 
Thanks and regards,
Ajay Bhat