how to show Screen within MainScreen in application - blackberry

My application have one screen below the detail of that. Screen name EventList . This screen have designed full. There are two ButtonField Next and Previous . At the bottom of these two Button ListField is placed in this screen.
When i click on Next or Previous my ListField will update . It is updated successfully using updateListField() method which is created in this screen. All is working fine up to this. But my concern is that when i click on these Button ListField will take time (around 3 or 4 second)to update new data. During my data updating in background i want to show Massage like Please wait.../Loading.... How can i show this without using PopupScreen.
i had tried the below code but not working properly.
VerticalFieldManager manager = new VerticalFieldManager();
manager.add(new LabelField("Please Wait..."));
Screen popup = new PopupScreen(manager);
If i will done this using PopupScreen my full logic will be change for that screen and it will time consuming task.
Please suggest me how can we add FieldManager on existing MainScreen.
Thanks in Advance !!!

The MainScreen class includes a status field that you can use for this. In your class extending MainScreen add:
setStatus(new LabelField("Please wait..."));
to remove that status:
setStatus(null);
However, you need to do this on the event thread and then return so the OS can update the user interface. If you are performing the update of your list on the event thread (the thread that will call your code when the button is pressed) then you should perform that work on a spearate thread and use UiApplication.invokeLater() or hold the event lock to perform updates on the user interface.

Application.getApplication().invokeLater(
new Runnable() {
public void run() {
GIFEncodedImage image;
EncodedImage encodedImage = EncodedImage
.getEncodedImageResource("spiral.gif");
byte data[] = new byte[3000];
data = encodedImage.getData();
image = (GIFEncodedImage) EncodedImage
.createEncodedImage(
data, 0,
data.length);
AnimatedGIFField animatedGIF = new AnimatedGIFField(
image);
PopupScreen popup = new PopupScreen(
new VerticalFieldManager());
popup.add(animatedGIF);
Border border = BorderFactory
.createSimpleBorder(
new XYEdges(),
Border.STYLE_SOLID);
popup.setBorder(border);
UiApplication
.getUiApplication()
.pushScreen(popup);
Timer timer = new Timer();
timer.schedule(new CountDown(),
3000);
}
});

Related

Horizontally centering a popup window in Vaadin

I have added a popup window to my main UI as follows:
Window component = new Window();
UI.getCurrent().addWindow(component);
Now, I want my popup to be centered horizontally and e.g. 40 pixels from the top of the screen. As far as I can see Vaadin has 4 methods for positioning my window.
component.center()
component.setPosition(x, y)
component.setPositionX(x)
component.setPositionY(y)
None of these are really what I want. I was hoping at first that setPositionY might help me. This does allow me to get the right distance from the top, but the x-position is now set to 0, where I wanted it to be centered.
The setPosition might have helped if I was able to calculate what the x-position should be, but this would require me to know the width of the component in pixels, but component.getWidth just tells me 100%.
Next I tried to use CSS styling on the component, writing and explicit css rule and adding it to the component with addStyleName. It seems though that Vaadin overrides whatever I wrote in my css with its own defaults...
Any ideas how to get my Window component positioned correctly?
I used the methods getBrowserWindowWidth() and getBrowserWindowHeight() from the com.vaadin.server.Page class for this.
I centered my "log" window horizontally in the lower part of the browser window with
myWindow.setHeight("30%");
myWindow.setWidth("96%");
myWindow.setPosition(
(int) (Page.getCurrent().getBrowserWindowWidth() * 0.02),
(int) (Page.getCurrent().getBrowserWindowHeight() * 0.65)
);
Solution 1: Use SizeReporter
Indeed, setPositionY() will reset the window's centered property to false. As the width of your pop-up and that of your browser window are not know before they appear on the screen, the only way I know to get those values is to use the SizeReporter add-on. Its use is quite straightforward:
public class MyUI extends UI {
private Window popUp;
private SizeReporter popUpSizeReporter;
private SizeReporter windowSizeReporter;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
addWindow(popUp);
popUpSizeReporter = new SizeReporter(popUp);
popUpSizeReporter.addResizeListenerOnce(this::centerPopUp);
windowSizeReporter = new SizeReporter(this);
windowSizeReporter.addResizeListenerOnce(this::centerPopUp);
}
private void centerPopUp(ComponentResizeEvent event) {
int popUpWidth = popUpSizeReporter.getWidth();
int windowWidth = windowSizeReporter.getWidth();
if (popUpWidth == -1 || windowWidth == -1) {
return;
}
popUp.setPositionX((windowWidth - popUpWidth) / 2);
}
}
This piece of code will be okay as long as you don't resize the pop-up. If you do, it will not be automatically recentered. If you replace addResizeListenerOnce() by addResizeListener() then it will automatically recenter the pop-up but you'll get some "UI glitches" as the add-on sends resize events almost continually while you're resizing your pop-up...
You could try to do it using CSS, but I personally avoid CSS as much as I can with Vaadin :).
You'll need to recompile the widgetset after you've added the add-on as a dependency.
Solution 2: Use com.vaadin.ui.JavaScript
I won't vouch for the portability of this solution but I guess it will work on most modern browsers.
public class MyUI extends UI {
private Window popUp;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
popUp.addStyleName("window-center");
addWindow(popUp);
// Add a JS function that can be called from the client.
JavaScript.getCurrent().addFunction("centerWindow", args -> {
popUp.setPositionX((int) ((args.getNumber(1) - args.getNumber(0)) / 2));
});
// Execute the function now. In real code you might want to execute the function just after the window is displayed, probably in your enter() method.
JavaScript.getCurrent().execute("centerWindow(document.getElementsByClassName('window-center')[0].offsetWidth, window.innerWidth)");
}
}

Adding background image to blackberry app not working

i am new to blackberry development and want to add an image to a sample blackberry application. I have tried multiple tutorials, but the image is not displaying in the background
can any one kindly tell me what is the problem?
/**
* This class extends the UiApplication class, providing a graphical user
* interface.
*/
public class Diverse extends UiApplication {
private Bitmap backgroundBitmap;
private Bitmap fieldBitmap;
public static void main(String[] args) {
Diverse diverse = new Diverse();
diverse.enterEventDispatcher();
}
/**
* Creates a new MyApp object
*/
public Diverse() {
//The background image.
backgroundBitmap = Bitmap.getBitmapResource("background.png");
MainScreen mainScreen = new MainScreen();
HorizontalFieldManager horizontalFieldManager = new HorizontalFieldManager(HorizontalFieldManager.USE_ALL_WIDTH | HorizontalFieldManager.USE_ALL_HEIGHT){
//Override the paint method to draw the background image.
public void paint(Graphics graphics)
{
//Draw the background image and then call paint.
graphics.drawBitmap(0, 0, 240, 240, backgroundBitmap, 0, 0);
super.paint(graphics);
}
};
//The LabelField will show up through the transparent image.
LabelField labelField = new LabelField("This is a label");
//A bitmap field with a transparent image.
//The background image will show up through the transparent BitMapField image.
BitmapField bitmapField = new BitmapField(Bitmap.getBitmapResource("field.png"));
//Add the manager to the screen.
mainScreen.add(horizontalFieldManager);
//Add the fields to the manager.
horizontalFieldManager.add(labelField);
horizontalFieldManager.add(bitmapField);
// Push a screen onto the UI stack for rendering.
pushScreen(new DiverseScreen());
}
}
and DiverseScreen class is
package diverse;
import net.rim.device.api.ui.container.MainScreen;
/**
* A class extending the MainScreen class, which provides default standard
* behavior for BlackBerry GUI applications.
*/
public final class DiverseScreen extends MainScreen
{
/**
* Creates a new MyScreen object
*/
public DiverseScreen()
{
// Set the displayed title of the screen
setTitle("Diverse");
}
}
The problem is that you have set the background image for one screen, but you never displayed that screen. Then, you displayed a different screen that did not have a background image set.
First, it helps to understand the BlackBerry UI framework. It allows you to create a hierarchy of objects on screen. At the top level, you have a Screen (or subclass of Screen), and then inside of the Screen, you have Managers, and inside them are Fields. But, each level must be added to a container of some kind, and finally, the top-level Screen must be displayed with something like pushScreen().
See a little more description on this hierarchy in a recent answer here
In your situation, you should change this line
MainScreen mainScreen = new MainScreen();
to
DiverseScreen mainScreen = new DiverseScreen();
and then change this line
pushScreen(new DiverseScreen());
to
pushScreen(mainScreen);
since mainScreen is the instance where you added a horizontal field manager that draws your background image.

create popup screen in blackBerry

I want to create a popup screen in BlackBerry like the screen appear on long click (see the picture)
My screen contain 3 items
image description
image description
image description
Can any one help me by an example or link to do this popup?
Use the below code and call the GetPopup wherever you want to show the pop up screen
final class Getpopup extends PopupScreen
{
EditField edf;
AutoTextEditField edf1;
HorizontalFieldManager hfm;
public Getpopup()
{
super( new VerticalFieldManager());
LabelField lf = new LabelField("Contact Info", LabelField.FIELD_HCENTER);
SeparatorField sf = new SeparatorField();
edf1= new AutoTextEditField("Name:","" ,20,EditField.NO_NEWLINE);
edf = new EditField("Number:",ThirdScreen.get3);
edf.setEditable(false);
VerticalFieldManager vfm =new VerticalFieldManager(VerticalFieldManager.FIELD_HCENTER);
hfm=new HorizontalFieldManager(HorizontalFieldManager.FIELD_HCENTER);
ButtonField bf1 = new ButtonField("Save", ButtonField.FIELD_HCENTER);
ButtonField bf2 = new ButtonField("Cancel", ButtonField.FIELD_HCENTER);
hfm.add(bf1);
hfm.add(bf2);
vfm.add(lf);
vfm.add(sf);
vfm.add(edf1);
vfm.add(edf);
vfm.add(hfm);
add(vfm);
}
}
Find the code here to create creating-borderless-transparent-popup screen in blackberry
If your looking for custmizing the Buttons as appeared in image then visit custom-image-buttonfield-in-blackberry
You have to make use of GridFieldManager.java for the layout you have used, Also you can customize your own layout.
Create a PopupDialog class which extends Dialog and then in the constructor, add the Buttons. If you would like your buttons to look like the above image, extend a field or button field and in paint method, draw the button and then the button text below the button. Add this custom button control in the PopupDialog.

Loading Screen wheel with using Blackberry JAVA SDK 6.0 Activity Indicator UI element

In my project,I want to show a loading screen with a rolling wheel image(possibly with a .gif file) while my http connection occured.
My code is below. It extends a class which extends MainScreen. I show this screen when the user clicked login button.
public class MSWheelScreen extends MSScreen{
//Constructor
public MSWheelScreen(){
super();
add(new SeparatorField());
add(new LabelField("Loading...", Field.FIELD_HCENTER));
add(new SeparatorField());
add(new LabelField());
ActivityIndicatorView myview = new ActivityIndicatorView(Field.USE_ALL_WIDTH);
ActivityIndicatorModel mymodel = new ActivityIndicatorModel();
ActivityIndicatorController mycontroller = new ActivityIndicatorController();
myview.setController(mycontroller);
myview.setModel(mymodel);
mycontroller.setModel(mymodel);
mycontroller.setView(myview);
mymodel.setController(mycontroller);
Bitmap mybitmap = Bitmap.getBitmapResource("img/wheel.gif");
myview.createActivityImageField(mybitmap, 5, Field.FIELD_HCENTER);
add(myview);
}
}
Anyway; my problem is that, I cant show the wheel image as i wanted. I can only see the part of the wheel, i am not able to see the whole .gif file as i open it in a browser. So i want to adjust the .gif file that i have added on the loading screen. I want to know some built in methods that i can use with activity indicator UI elements to adjust my gif.
The link for my sample run screenshot:
http://imageshack.us/photo/my-images/191/9800j.jpg/
The link for original gif.
http://imageshack.us/photo/my-images/810/ajaxloaderw.gif/
It is difficult to implement loading screen with .gif bcz it required one more thread that handle .gif image
So i always implement Loading screen in blackberry like this :
This is simple code for loading screen ....
HorizontalFieldManager popHF = new HorizontalFieldManager();
popHF.add(new CustomLabelField("Pls wait..."));
final PopupScreen waitScreen = new PopupScreen(popHF);
new Thread()
{
public void run()
{
synchronized (UiApplication.getEventLock())
{
UiApplication.getUiApplication().pushScreen(waitScreen);
}
//Here Some Network Call
synchronized (UiApplication.getEventLock())
{
UiApplication.getUiApplication().popScreen(waitScreen);
}
}
}.start();

Container is taking event of Button in blackberry

I have a grid container wchich consist two button.and i add this container in the form.
When i click on the button it is working fine but when i click outside the buttons then the event fired by those button which have the focus at that time.
GridFieldManager startStopButtonContainer = new GridFieldManager(2,Field.FIELD_HCENTER);
startStopButtonContainer.add(slideRestart);
startStopButtonContainer.add(slideStop);
add(startStopButtonContainer);
now i click on the slideRestart it works fine but when i click outside the button then also it is taking event.
Please help me out...:)
Add nullfield at starting & ending at each row of the gridfieldManager.And set style Field.Non_FOCASABLE to that nullfields.And set the default focus at buttonfield.
Note: nullfields must cover the remaining part of gridfieldManager.
you can use
LabelField field = new LabelField(" ",Field.NON_FOCUSABLE)
{
protected void layout(int width, int height)
{
// TODO Auto-generated method stub
super.layout(width, height);
setExtent((Display.getWidth()-(buttonField.getPreferredWidth()+buttonField.getPreferredWidth())/2, height);
}
};
as nullfield.

Resources