pivot-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Roger L. Whitcomb" <Roger.Whitc...@actian.com>
Subject RE: Determining Pivot component attributes and styles
Date Mon, 20 Aug 2012 18:22:43 GMT
Hi Greg,

                Sandro has done some reorganization of the FAQ page to
point the Component Explorer, so maybe this will help a little .  But,
let me explain a bit more about some of your questions.

                Here are a couple of examples of both attributes and
styles so you can see the potential uses, and I guarantee that you will
use both at some point.


<TextArea bxml:id="consoleLogDisplay" enabled="true" editable="false"
styles="{wrapText:false, font:'Monospaced 12'}" />


So, the attributes here are:  enabled and editable

The styles are (obviously): wrapText and font


Both can be set via BXML.


So, when the BXMLSerializer reads this piece of markup if it is an
attribute (say XXX), then it will look for the corresponding "setXXX"
method in the component with a single parameter corresponding to the
type of the data.  So, in this case both values are Boolean values, so
it will be looking for the "setEnabled(boolean)" and
"setEditable(boolean)" methods in TextArea.  The former happens to be
defined on Component and inherited by TextArea, while the second is
defined for TextArea itself.  This markup is equivalent to this piece of
Java code, which you could write and execute yourself instead of using

TextArea textArea = new TextArea();




Now, styles are similar but more complicated.  "styles" is another
attribute of a Component, so the styles are set via a call to
"setStyles(String)" on the component.  What the component will do is get
the current skin attached to the component and decompose the style
string according to JSON rules, and call corresponding "setXXX" methods
on the installed skin with the parsed values.  So, here is what this
markup is equivalent to:

textArea.setStyles("{wrapText:false, font:'Monospaced 12'}");

which in turn calls:


textArea.getSkin().setFont("Monospaced 12");


Now, skins are a whole thing in themselves.  Pivot currently has only
one skin defined and implemented:  the "Terra" skin.  This skin handles
all the painting and keyboard/mouse interactions on behalf of its
attached component.  So, the skin pieces can be fairly complicated.
That's one reason there is only one skin implemented so far.  And the
Terra skin has a lot of customization available, so there is not that
much need for another at the moment.


There is no reason you could not subclass the existing skin classes and
add styles (and the associated processing) for your own use.


So, since there is just one existing skin, it is easy to find the
"setXXX" methods that correspond to the styles, just look in the
TerraXXXSkin class that corresponds to the XXX component (in this case
TerraTextAreaSkin for TextArea).  But note that many methods are set in
superclasses (also in this case, "setWrapText" is implemented in
TextAreaSkin, and "setFont" is also implemented there, although there is
a "decodeFont" method in ComponentSkin which would also be called during
this process).


HTH with your understanding.


~Roger Whitcomb


From: Greg Brannon [mailto:greg.d.brannon@gmail.com] 
Sent: Sunday, August 19, 2012 2:54 PM
To: user@pivot.apache.org
Subject: Re: Determining Pivot component attributes and styles


Roger (representing many),

As I said, it's only been a few days, but in that short, often
frustrating time, the good fortune to find the Component Explorer was
not mine.  After your response, a simple Google search led me here:


I see its potential, though somewhat indirect, to answer many of my
questions about attributes and styles, and I thank you for taking the
time to respond to my plea for help and for the encouragement.  I'm
often blind to the obvious, but the value and location of the Component
Explorer should be more prominently displayed for explorers wandering
off the beaten path like me.

I understand the connection to the bean methods, but I don't yet know
how to exploit that and wonder why I'd want to, hoping I'll never have
to.  I'm completely mystified by skins and how I'll use them to my
advantage, but I think I understand their importance to tailoring the
Pivot experience, and I hope I figure them out someday.

Back to the tutorials with a new and improved perspective . . .


On 08/19/2012 05:25 PM, Roger Whitcomb wrote:

	Hi Greg, 
	   First of all, thanks for using Pivot!  And I sympathize with
you -- I am always on the Component Explorer looking at things. 
	   Anyway, the short answer to your question is:  the component
properties correspond to the "bean" methods in the components
themselves. These would be the "getXXX" and "setXXX" methods of (for
instance) PushButton, while the style attributes are the "bean" methods
for the skin, which (in my example) would be TerraPushButtonSkin (and
all their superclasses).  Some of the multi-value things are a bit
tricky, but most have several ways to set them. Playing around with the
ComponentExplorer demo is one of the best ways to start, as are all the
various demo and tutorial applications on the website (and of course the
	   And you can always ask here if you get stumped -- we're
fairly responsive because we've been where you are ;) 
	~Roger Whitcomb 
	Sent from my iPhone 
	On Aug 19, 2012, at 11:25 AM, GregBrannon
<greg.d.brannon@gmail.com> <mailto:greg.d.brannon@gmail.com>  wrote: 

	Sorry to be the slow guy in the group, but I find the bxml
document approach 
	to UI definition difficult.  I'm much more confident with it
today than I 
	was a few days ago when I first picked up Pivot, but I'm still
unsure how to 
	know what attributes and styles are available for specific
components.  The 
	FAQ says: 
	". . . So, you can simply refer to the Javadoc for the component
to identify 
	the supported attributes. . . " 
	I then go to the API page for PushButton, and I see the
buttonData default 
	property but no mention of 'x', 'y', 'width', 'height', and the
	who-knows-what attributes that can be used to define this
	What am I doing wrong?  I want to like this GUI framework, and I
do so far, 
	but I'm still struggling a bit with the actual implementation. 
	Thanks for your help and your great work! 
	View this message in context:
	Sent from the Apache Pivot - Users mailing list archive at


View raw message