custom control in blackberry using jde - blackberry-jde

I want to make custom control which consists of a LabelField and Textbox.
How can i make a custom control using jde as IDE for blackberry.
Thanks in advance.

In Blackberry you can create a custom component by extending from Field
public class MyField extends Field {
public void layout(int width, int height){
setExtent( width, height ); //set the field size
}
public void pain(Graphics g){
//do your own paint here
//g.drawText ("Test", 0, 0 );
}
}
in case you want to create consist of a LabelField and TextField, I suggest you extend from TextField
public class InputField extends TextField {
private String _label;
private TextField _text;
public InputField(String label){
_label = label;
}
public void layout(int width, int height ){
setExtend( width + 200, height ); //just an example, i add 200 pixel for width
//you can get the width of the _label too
//need other functions to get width based on the String
}
//you override how to paint in screen
public void paint(Graphics g){
super.paint(g);
g.drawText (getLeft()-200, getTop(), _label);
}
}
See more examples here
http://supportforums.blackberry.com/t5/Java-Development/Custom-Control/td-p/159699

Related

Xamarin.Forms MVVM WebView not Loading

We use the Xamarin.Forms WebView to display content of a certain object, but this content won't be displayed in the WebView until we rotate the Device twice.
The .xmal-File Code:
<WebView x:Name="WebView" HeightRequest="{Binding Height}" WidthRequest="{Binding Width}">
<WebView.Source>
<HtmlWebViewSource Html="{Binding Code}"/>
</WebView.Source>
</WebView>
And the ModelView:
private double _height;
private double _width;
public ICommand ItemTappedCommand { get; private set; }
public string SearchBarLabelText { get; private set; }
public object LastTappedItem { get; set; }
public int ColumnCount { get; private set; } = 2;
public string CodeName { get; private set; }
public string CodeContent { get; private set; }
public string Code { get; private set; }
public double Height
{
get => _height;
private set
{
if (_height == value)
return;
_height = value;
OnPropertyChanged(nameof(Height));
}
}
public double Width
{
get => _width;
private set
{
if (_width == value)
return;
_width = value;
OnPropertyChanged(nameof(Width));
}
}
public ErrorcodeDetailPageViewModel(Errorcode code)
{
Device.Info.PropertyChanged += DevicePropertyChanged;
DevicePropertyChanged(null, null);
Code = code.Content;
CodeName = code.Label;
CodeContent = code.Content;
}
private void DevicePropertyChanged(object sender, PropertyChangedEventArgs e)
{
switch (Device.Info.CurrentOrientation)
{
case DeviceOrientation.Portrait:
Height = Device.Info.PixelScreenSize.Height - 150; // 120 is the Height of the ControlTemplate used on this Page + the top row on uwp; only required in portrait mode
Width = Device.Info.PixelScreenSize.Width;
break;
case DeviceOrientation.Landscape:
Height = Device.Info.PixelScreenSize.Height - 50;
Width = Device.Info.PixelScreenSize.Width;
break;
}
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
So, als already described, if we rotate the Device twice the content will be displayed, otherwise it won't. I think the problem is related to our bindings...
I should mention that we have some kind ob banner/headline on top of the WebView.
Code should also have a backing notification so that the view is aware of when its value changes.
Like
private string code;
public string Code {
get => code;
private set {
if (code == value)
return;
code = value;
OnPropertyChanged(nameof(Code));
}
}
If you walk through the step of why you have to turn twice, you will see that is why you have to do that.
When the value is first set it is blank.
On first turn the value is set by the event handler not since no notification is sent to the view it is not visibly changed.
On second turn the value is already set and when the view redraws, the value is shown in the view.

How to smoothly animate an ImageView with effects applied

I have created a CollapsablePane which shows an EffectImageView as collapsableContent, and a Node as mainContent. The EffectImageView consists of two layered ImageViews, the bottom one having an BoxBlur effect applied on it.
When there is a ScrollEvent on the mainContent the collapsableContent will be animated accordingly by setTranslateY.
With a BoxBlur effect applied, the translation of the lower part of the collapsableContent is very unsmooth, while it is absolutely smooth without the effect.
Is there a possibility to improve the transition performance?
public class EffectImageView extends Pane {
private ImageView img;
private ImageView imgEffect;
private Rectangle clipTop;
private Rectangle clipBottom;
private DoubleProperty imageEffectHeight = new SimpleDoubleProperty();
private double effectOffset;
public EffectImageView() {
img = createCachedImageView();
imgEffect = createCachedImageView();
imgEffect.imageProperty().bind(img.imageProperty());
imgEffect.fitWidthProperty().bind(img.fitWidthProperty());
imgEffect.fitHeightProperty().bind(img.fitHeightProperty());
clipTop = new Rectangle();
clipTop.widthProperty().bind(img.fitWidthProperty());
clipTop.heightProperty().bind(img.fitHeightProperty().subtract(imageEffectHeight).subtract(translateYProperty()));
clipBottom = new Rectangle();
clipBottom.widthProperty().bind(img.fitWidthProperty());
clipBottom.heightProperty().bind(imageEffectHeight);
clipBottom.translateYProperty().bind(heightProperty().subtract(imageEffectHeight).subtract(translateYProperty()));
img.setClip(clipTop);
imgEffect.setClip(clipBottom);
getChildren().addAll(img, imgEffect);
}
private ImageView createCachedImageView() {
ImageView img = new ImageView();
img.setCache(true);
img.setCacheHint(CacheHint.SPEED);
return img;
}
public final ObjectProperty<Image> imageProperty() {
return img.imageProperty();
}
public final Image getImage() {
return img.getImage();
}
public final void setImage(Image image) {
img.setImage(image);
}
public void setImageEffect(Effect effect) {
imgEffect.setEffect(effect);
}
public final DoubleProperty imageEffectHeightProperty() {
return imageEffectHeight;
}
public void setEffectOffset(double offset) {
effectOffset = offset;
}
#Override
protected void layoutChildren() {
double w = getWidth();
double h = getHeight();
img.relocate(-effectOffset, 0);
imgEffect.relocate(-effectOffset, 0);
img.setFitWidth(w + effectOffset * 2);
img.setFitHeight(h);
}
}

javafx textfield value to label in other view

I got an asignment from school where i have to read in two names in one view, then we have to press a button that goes to another view and then the two names have to come in a label there. i have been trying to do this for some time but for some reason i can't figure it out.
Here is my code on the first view
public class Startview extends GridPane {
private TextField txtplayer1;
private TextField txtplayer2;
private Button play;
this.txtplayer1 = new TextField();
this.txtplayer2 = new TextField();
this.add(txtplayer1,2,1);
this.add(txtplayer2, 2, 2);
this.add(play, 2, 3);
public Button getplay() {
return play;
}
this is the code on my presenter where i write the actions
private void eventHandlers() {
view.getplay().setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
Gameview gameview = new Gameview();
Gamepresenter presenter3 = new Gamepresenter(model, gameview);
view.getScene().setRoot(gameview);
gameview.getScene().getWindow().sizeToScene();
gameview.getScene().getWindow().centerOnScreen();
}
});
and the gameview where the labels are on(which is also on a gridpane)
private Label name1;
private Label name2;
public Label getname1() {
return Name1;
}
public Label getName2() {
return Name2;
}
all help or tips are appreciated
Just like #James_D said, just use the functions in your model. In your startview use the setName from your player-class and in gameview use the getName from your player class.

Using one event handler for multiple actions

I was doing some homework today and I've accomplished all of the goals of the assignment, which I'm sure will get me full points.
In an earlier class, however, we used the same Event Handler for more than one action (in this example, you either type a color in the text field, or click a button to change the background color of the box).
I can't figure out how I would do that in this case... do I have to choose a Type in the constructor? If the first parameter could be a button or a textfield then I think that would help.
I'm just trying to figure out how to apply DRY (Don't Repeat Yourself), where ever I can.
public class ColorChooserApplication extends Application
{
#Override
public void start(Stage stage)
{
// Create all UI components
VBox backgroundBox = new VBox(10);
backgroundBox.setPadding(new Insets(10));
HBox topBox = new HBox(10);
HBox bottomBox = new HBox(10);
TextField colorPrompt = new TextField();
colorPrompt.setOnAction(new ColorHandler(colorPrompt, backgroundBox));
Button redButton = new Button("Red");
redButton.setOnAction(new ButtonHandler(redButton, backgroundBox));
Button whiteButton = new Button("White");
whiteButton.setOnAction(new ButtonHandler(whiteButton, backgroundBox));
Button blueButton = new Button("Blue");
blueButton.setOnAction(new ButtonHandler(blueButton, backgroundBox));
// Assemble
topBox.getChildren().add(colorPrompt);
bottomBox.getChildren().addAll(redButton, whiteButton, blueButton);
backgroundBox.getChildren().addAll(topBox, bottomBox);
backgroundBox.setAlignment(Pos.CENTER);
topBox.setAlignment(Pos.CENTER);
bottomBox.setAlignment(Pos.CENTER);
// Set scene and show
stage.setScene(new Scene(backgroundBox));
stage.show();
}
class ColorHandler implements EventHandler<ActionEvent>
{
TextField colorTf;
VBox bgVbox;
public ColorHandler(TextField colorTf, VBox bgVbox)
{
this.colorTf = colorTf;
this.bgVbox = bgVbox;
}
#Override
public void handle(ActionEvent event)
{
String color = colorTf.getText();
bgVbox.setStyle("-fx-background-color:" + color);
}
}
class ButtonHandler implements EventHandler<ActionEvent>
{
Button colorButton;
VBox bgVbox;
public ButtonHandler(Button colorButton, VBox bgVbox)
{
this.colorButton = colorButton;
this.bgVbox = bgVbox;
}
#Override
public void handle(ActionEvent event)
{
String color = colorButton.getText();
bgVbox.setStyle("-fx-background-color:" + color);
}
}
public static void main(String[] args)
{
launch(args);
}
}
If you're using Java 8, you can do
class ColorHandler implements EventHandler<ActionEvent> {
Supplier<String> colorSupplier ;
VBox bgVbox ;
public ColorHandler(Supplier<String> colorSupplier, VBox bgVbox) {
this.colorSupplier = colorSupplier ;
this.bgVbox = bgVbox ;
}
#Override
public void handle(ActionEvent event) {
String color = colorSupplier.get();
bgVbox.setStyle("-fx-background-color: "+color);
}
}
and then
colorPrompt.setOnAction(new ColorHandler(colorPrompt::getText, backgroundBox));
redButton.setOnAction(new ColorHandler(redButton::getText, backgroundBox));
Note that all you need to provide for the first parameter is some function that returns the correct string for use in the css. So you can do things like
whiteButton.setOnAction(new ColorHandler(() -> "#ffffff", backgroundBox));
blueButton.setOnAction(new ColorHandler(() -> "cornflowerblue", backgroundBox));
etc.

How to highlight focused custom buttonfield (ImageButtonField) on Blackberry?

I made a custom ButtonField class where I have an image as a button. However, I would like to be able to select this image and to know it is selected, either by partially highlighting it or putting a square around it, whatever. I have a BitmapField in my UI that highlights itself in blue when I select it, but my other images that use ImageButtonField, do not have the blue highlight. I do not want the bitmap to disappear completely when selected.
here is the code :
package mypackage;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Characters;
import net.rim.device.api.ui.component.BitmapField;
public class ImageButtonField extends BitmapField{
public ImageButtonField(Bitmap image) {
super(image);
}
public boolean isFocusable() {
return true;
}
protected boolean navigationClick(int status, int time) {
fieldChangeNotify(0);
return true;
}
protected boolean trackwheelClick(int status, int time) {
fieldChangeNotify(0);
return true;
}
protected boolean keyChar(char character, int status, int time) {
if(Characters.ENTER == character || Characters.SPACE == character) {
fieldChangeNotify(0);
return true;
}
return super.keyChar(character, status, time);
}
}
Any help modifying this class so it works would help immensely. I have had no success trying to make this work!
To remove default styling attributes you can add following methods:
protected void applyTheme(Graphics arg0, boolean arg1) {
}
protected void drawFocus(Graphics graphics, boolean on) {
}
You can override paint method and do paint whatever you want by checking focus status, e.g. following code will paint a red transparent layer over the bitmap image.
protected void paint(Graphics graphics) {
super.paint(graphics);
if (isFocus()) {
graphics.setGlobalAlpha(128);
graphics.setColor(0xFF0000);
graphics.fillRect(0, 0, getWidth(), getHeight());
}
}
Actually I didn't understand your question well :).

Resources