[Nifty] Several layers inside a panel --Solved

[didialchichi]

Hello,

I wanted to know if it is possible.





I have a from with 3 layers :

• background of the frame
  
• image inside the frame
  
• frontground of the frame
  
  
  
  For now I do it like that :
  
  [xml]
  
  |!–
  
  Background of the portrait
  
  –|
  
  |layer id="backgroundLayer" childLayout="center" height="100%" width="100%" |
  
  |panel height="150px" width="150px" align="left" valign="bottom" childLayout="center" visibleToMouse="true"|
  
  |image height="100%" width="100%" filename="portraitBack.png" imageMode="normal" /|
  
  |/panel|
  
  |/layer|
  
  
  
  |!–
  
  Image layer
  
  –|
  
  |layer id="imageLayer" childLayout="center" height="100%" width="100%" |
  
  |panel height="150px" width="150px" align="left" valign="bottom" childLayout="vertical" visibleToMouse="true"|
  
  |panel heigth="10%" /|
  
  |panel height="80%" width="100%" align="center" valign="center" childLayout="horizontal" visibleToMouse="true"|
  
  |panel width="10%" /|
  
  |image id="imgCurrentPortrait" height="100%" width="80%" filename="empty.png" imageMode="normal" |
  
  |effect||onShow name="fade" start="#00" end="#ff" neverStopRendering="true" /||/effect|
  
  |/image|
  
  |/panel|
  
  |panel heigth="10%" /|
  
  |/panel|
  
  |/layer|
  
  
  
  |!–
  
  Fontground of the portrait
  
  –|
  
  |layer id="fontgroundLayer" childLayout="left" height="100%" width="100%" |
  
  |panel height="150px" width="150px" align="right" valign="bottom" childLayout="center" visibleToMouse="true"|
  
  |control id="btnStartBattle" type="button" style="portraitFrame" |
  
  |interact onClick="selectCharacter()" /|
  
  |/control|
  
  |/panel|
  
  |/layer|
  
  [/xml]
  
  
  
  I would like to have something like :
  
  [xml]
  
  |!–
  
  Parent layer
  
  –|
  
  |layer id="mainLayer" childLayout="center" height="100%" width="100%" |
  
  |panel id="mainPane" height="100%" width="100%" align="center" valign="center" childLayout="horizontal" visibleToMouse="true"|
  
  |!–
  
  Background layer
  
  –|
  
  |layer id="backgroundLayer" childLayout="center" height="100%" width="100%" |
  
  |panel height="150px" width="150px" align="left" valign="bottom" childLayout="center" visibleToMouse="true"|
  
  |image height="100%" width="100%" filename="portraitBack.png" imageMode="normal" /|
  
  |/panel|
  
  |/layer|
  
  
  
  |!–
  
  Image layer
  
  –|
  
  |layer id="imageLayer" childLayout="center" height="100%" width="100%" |
  
  |panel height="150px" width="150px" align="left" valign="bottom" childLayout="vertical" visibleToMouse="true"|
  
  |panel heigth="10%" /|
  
  |panel height="80%" width="100%" align="center" valign="center" childLayout="horizontal" visibleToMouse="true"|
  
  |panel width="10%" /|
  
  |image id="imgCurrentPortrait" height="100%" width="80%" filename="empty.png" imageMode="normal" |
  
  |effect||onShow name="fade" start="#00" end="#ff" neverStopRendering="true" /||/effect|
  
  |/image|
  
  |/panel|
  
  |panel heigth="10%" /|
  
  |/panel|
  
  |/layer|
  
  
  
  |!–
  
  Fontground of the portrait
  
  –|
  
  |layer id="fontgroundLayer" childLayout="left" height="100%" width="100%" |
  
  |panel height="150px" width="150px" align="right" valign="bottom" childLayout="center" visibleToMouse="true"|
  
  |control id="btnStartBattle" type="button" style="portraitFrame" |
  
  |interact onClick="selectCharacter()" /|
  
  |/control|
  
  |/panel|
  
  |/layer|
  
  |/panel|
  
  |/layer|
  
  [/xml]
  
  That way I can hide it with only one command :
  
  [java]
  
  Element element = screen.findElementByName( "mainPane" );
  
  element.hide();
  
  [/java]
  
  
  
  Is that possible ?

[rickard]

I believe a layer is a container for panels, and can’t be used the other way around.



Look up addLayer and removeLayer. They should do what you want to do.



Edit: another way of doing it:



[xml]|controlDefinition name=“portraitControl”|

… Your nifty elements here…

|/controlDefinition|



//Then you can access them as a single element with:



|control id=“portrait1” name=“portraitControl” /|[/xml]



WIth the added benefit of reducing the amount of xml if you have several portraits to choose from

[didialchichi]

Thank you for the answer.



I still don’t have use the controlDefinition. I think it can be a very good feature.

I will try to use it soon.



One question about it :

Can we add a layer inside a controlDefinition ?

[rickard]

Can we add a layer inside a controlDefinition ?

I'd assume, no, but try it! It can't more than crash.

In your case though, i see no reason why you couldn't strip away the layer tags if you keep it inside a controlDefinition.

[madjack]

You can nest panels though.



| panel1 …

---

| panel2

etc. You can hide panel 1, hiding panel2 at the same time since it contains panel2...

That's the way I set up my loading screen.

[didialchichi]

Perhaps there is something I don’t know.



My panel has three layer : the fontground of the portrait, the portrait itself and the frame around it

I can add all that in a controlDefinition?

[madjack]

I don’t think so.



AFAIK, a controlDefinition is another way to set up a definition for a single “thing”. It can be a button, a scrollbar, whatever you want. But, it’s only that, a definition. Or if you prefer, a shorthand (or a shortcut if you prefer) so it doesn’t take as much space inside the layout of the screen.

[void256]

yes, you can do that with nested panels or with a control definition. it should work with both.



there is a childLayout=“overlay” that just forwards the size of the parent element to all of its children. I think that might help

[didialchichi]

Excellent! ‘overlay’ was exacly what I needed !!



Here is the modified xml block with overlay method :

[xml]

|!–

Portrait layer

–|

|layer id=“portraitLayer” childLayout=“center” height=“100%” width=“100%” |

|panel height=“150px” width=“150px” align=“left” valign=“bottom” childLayout=“overlay” visibleToMouse=“true”|



|panel id=“backgroundPanel” height=“100%” width=“100%” align=“center” valign=“center” childLayout=“center” visibleToMouse=“true”|

|image height=“100%” width=“100%” filename=“portraitBack.png” imageMode=“normal” /|

|/panel|



|panel id=“portraitPanel” height=“100%” width=“100%” align=“center” valign=“center” childLayout=“vertical” visibleToMouse=“true”|

|panel heigth=“10%” /|

|panel height=“80%” width=“100%” align=“center” valign=“center” childLayout=“horizontal” visibleToMouse=“true”|

|panel width=“10%” /|

|image id=“imgCurrentPortrait” height=“100%” width=“80%” filename=“defaultPortrait.png” imageMode=“normal” |

|effect||onShow name=“fade” start="#00" end="#ff" neverStopRendering=“true” /||/effect|

|/image|

|/panel|

|panel heigth=“10%” /|

|/panel|



|panel id=“fontgroundPanel” height=“100%” width=“100%” align=“center” valign=“center” childLayout=“center” visibleToMouse=“true”|

|control id=“btnSelectCharacter” type=“button” style=“portraitFrame” |

|interact onClick=“selectCharacter()” /|

|/control|

|/panel|



|/panel|

|/layer|

[/xml]