pixijs: show and hide container with all elements in it - pixi.js

I have tab: PIXI.Container with a bunch of sprites on it.
I believe this should be so easy, I am new to Pixi, but have knowledge in JS.
I have button. Clicking on button should show/hide given container.
However, I cannot get it work.
btn.on('pointerdown',(event) => this.onClick(btn, tab));
How should I hide container with all sprites on it?
And then how can I show back container with all sprites on it?

Try using pixijs.download/dev/docs/PIXI.Container.html#visible
example: https://github.com/kittykatattack/learningPixi#displaying-sprites <- here sprite is hidden using anySprite.visible = false; , but you can do it similarily on container too.

you can use one of these :
anySprite.visible = false
or
anySprite.alpha = 0;

Related

I don't want to change color of JButton when pressed

Color newColor = new Color(197,222,90);
JButton newButton;
newButton = new JButton(icon);
newButton.setBacgroundColor(newColor);
When it is pressed it changes color. How can I keep it from changing color? I have multiple buttons, so if there is solution in one or two rows please help me, and keep in mind that I'm beginner, writing some huge classes won't help me, because I have multiple buttons with different names to be affected with this.
EDIT: Solution in one line is:
UIManager.put("Button.select", newColor);
But it changes all button colors but I need another to have different a color.
EDIT2: After some research I figured out there isn't an easy solution (but it should be). How I see it I have 2 solutions, 1. is to break buttons to separate classes and set UIManager for them, and second is to make custom buttons. It is just too much work for button.
I've found nothing that can change that particular behavior on a normal JButton. The problem being, that whatever you write in your actionlistener for the button, will occur AFTER you've let go of the mousebutton, and not "while clicking".
There are workarounds, however.
My preferred choice is, to remove all graphics from the button, and then add your own images to the button's regular and pressed states. You could take a screenshot of your GUI, cut out the button, and set that image to be both states.
JButton myButton = new JButton();
// Sets button x, y, width, height. Make the size match the image.
myButton.setBounds(5, 30, 100, 30);
// Remove border-graphics.
myButton.setBorder(null);
// Remove default graphics from the button
myButton.setContentAreaFilled(false);
// Remove the focus-indicating dotted square when focused (optional)
myButton.setFocusPainted(false);
// Here, myImage is a simple BufferedImage object.
// You can set one like this, provided you have an "images" package,
// next to your main class (ex: com.somecompany.someprogram.images),
// that contains an image:
BufferedImage myImage = ImageIO.read(getClass().getResource("images/myImage.png"));
// Then we simply apply our image to both states for the button, and we're done.
myButton.setIcon(new ImageIcon(myImage));
myButton.setPressedIcon(new ImageIcon(myImage));
Obviously there are many ways to retain and load an image, but since that's not the issue here, I'll leave additional methods out of it.
There's no need to go through it all countless times, though. It should be pretty easy to write your own custom implementation of the JButton class, in which a custom constructor takes a single parameter, being the BufferedImage, and then the constructor sets it up accordingly (changes the icons). Then all you have to do when you create a new JButton, is to use your own class, and pass it an image:
JButton btn = new MyCustomJButton(myImage);
You could also easily get along with very few images. All you need is a HashMap which holds all the images, with a String as a key. Imagine you need 4 OK-buttons. You make a single image of a button with the text "OK" written on it. Then you put that image into the HashMap, like so:
myMap.put("OK", myImage);
Then you could do this when creating a button, over and over again if you'd like more:
JButton btn = new MyCustomJButton(myMap.get("OK"));
Alternatively:
Another way of achieving this, which is pretty elaborate, but probably considered "the right way", is to use ButtonUI, as presented in this answer to another post.
If the OP is referring to the temporary change of background colour on a button with an icon at the moment the mouse is pressed, the following statement does the trick:
button.setContentAreaFilled(false);
"If you wish to have a transparent button, such as an icon only button, for example, then you should set this to false."
This took me a long time to figure out. It seems to be a little known technique, perhaps since its name gives little clue as to its effect.
With only first lane we can still see that it is clicked. You need to combine those two:
button1.setContentAreaFilled(false);
button1.setEnabled(false);
and if you don't wanna in grey color you put another button under him.
panelname.add(button1,+5,+5); \\(first not clicable, not visible button, notice +5)
panelname.add(button2,-5,-5); \(-5,-5 means it is 5 points under panel)

how to set lwuit textarea scrolling false

I want to add large string content to a container dynamically.
There are 60 different contents(strings) to be displayed in this container.
To add the string to container, I am adding a TextArea(empty border with 100% transparency).
The problem is that TextArea offers scroll and I do not want it to scroll. Instead I want to grow(increase height) according to content. I am unable to achieve this.
Can you help me out with this?
Or can I use any other component for the purpose?
I am using LWUIT with J2ME.
You can derive text area and return false for isScrollableY() although it should generally work seamlessly even if you don't do that (since your parent layout is scrollable). Is it possible you changed the text area and don't revalidate the parent form on the EDT?
There are problems with text area layout when it is modified by a separate thread (race condition with the layout code).
First put the TextArea.setSingleLineTextArea(false) , and grow by content true.

Hide tabbar and navigationbar when view is tapped in monotouch

I need to be able to hide the navbar and tabbar when I tap on the view and show it again when tapped again. Is this possible in Monotouch?
Anything that is possible with the native platform is possible with MonoTouch.
There are dozens of ways of achieving this. Perhaps the simplest thing to do is to create your own UIViewController that will host only the information you want and calling:
var myNewController = new MyNewController ()
myNewController.View.TouchDown += delegate {
myNewController.DismissViewControllerAnimated (false);
};
PresentModalViewController (yourNewController, false);
Then your myNewController must contain some code to add the actual contents that you want to show in full screen.

How place the components the front of another one?

I want to place the components A and B over component with List. I need that would text of list will be to visible. I can not find which layout can do it.
How this behavior is in lwuit? What solutions exist?
The question is somewhat unclear, jmunoz answer is correct if you want component's A and B to reside at the bottom of the screen and the list to scroll above. However from the drawing it seems you want an "always on top" effect which you can achieve either via a glass pane (for non-interactive components) or via the LayeredLayout class.
This is actually quite simple using the following:
myForm.setLayout(new LayeredLayout());
myForm.setScrollable(false);
// will occupy the entire area of the form but should be scrollable
myForm.addComponent(componentUnderneath);
Container south = new Container(new BorderLayout());
myForm.addComponent(south);
south.addComponent(BorderLayout.SOUTH, whateverYouWantToPlaceOnTopInTheSouth);
You must do the following:
The Form must not do scroll. Use Form.setScrollable(false). Set the layout of the ´Form´ to BORDER_LAYOUT, myForm.setLayout(new BorderLayout()) . Ok in BorderLayoutyou can put the components in the Form as you want.
Put the Listcomponent in the center of the BorderLayout with myForm.addComponent(BorderLayout.CENTER, List) and the other two elements in the south of the layout using
Container southContainer = new Container();
southContainer.addComponent(A);
southContainer.addComponent(B);
myForm.addComponent(BorderLayout.SOUTH, southContainer)
With this you can get a scrollable Listand two elements always visible.

How to set background image for Dialog?

I am trying to do this:
public class DialogMenuHawaii extends Dialog {
Style s = UiFactory.getBaseStyle();
s.setBgTransparency(0);
s.setBgImage( <my image >);
this.setUnselectedStyle(s);
}
but it doesn't work.
First, I suggest you use a theme. We constantly change small implementation details e.g. customizations like the one you are doing will not be portable between LWUIT 1.4 and 1.5. There is no reason whatsoever not to use a theme for something like this.
If you are interested in the pain and suffering of manually coding view logic into your application you can use several methods such as getDialogComponent() to get the style from them and manipulate that. Dialog is a complex beast due to the fact that its really a form padded away from the edges.
Open your '.res' file in resource Editor and select your preferred theme,
Under 'Unselected' tab open the DialogContentPane style, if you don't have one create it look at the end of this answer on HOW TO DO IT?, and set the background image to the image you need to show as Dialog bg
Under 'Unselected' tab open the DialogBody style, if you don't have one create it look at the end of this answer on HOW TO DO IT?, and set the background transparency as '0' and also make sure the background image type is NONE
NOTE: The above code will reflect for all the Dialogs in your application. If you want a particular dialog with background image than derive new styles from these default styles, and follow the above steps to apply it to your DialogMenuHawaii or any runtime Dialogs.
HOW TO: I would recommend you to go through the Shai's blog posts LWUIT Resource Editor Tutorial Part 1 till part 10. To better understand the Resouce Editor its features and capabilities.
:
:
:
PS: Programmatic-ally i haven't been able to achieve it using TextArea which is the case for default Dialog's. If you replace the dialog body component with Label if works fine, the code sample is given below. I haven't delved much into why is it so ? maybe will do it in my free time. Hence i have proposed a working alternative solution which is scripted above using Resource Editor and below using the code
class MyDialog extends Dialog {
public void show() {
Container octnPane = this.getDialogComponent();
octnPane.getUnselectedStyle().setBgTransparency(0, false);
Container ctnPane = (Container)((BorderLayout)octnPane.getLayout()).getCenter();
ctnPane.getUnselectedStyle().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED, false);
ctnPane.getUnselectedStyle().setBgImage(myImage, false);
Label t = new Label("Dialog");
t.setUIID("DialogBody");
t.getUnselectedStyle().setBgTransparency(0, false);
ctnPane.addComponent(t);
super.show();
}
}
This is for Dialog background.
Dialog dialog = new Dialog();
dialog.getDialogStyle().setBgImage(Image.createImage("/image/image.png"));
If you want to set transparency of Dialog with image.
dialog.getStyle().setBgImage(Image.createImage("/image/image.png");

Resources