DynaWorks Tutorial

How to write applications with the DynaWorks framework

User widgets: Table Of Content

DynaWorks custom widgets

DynaWorks includes two new widgets that you can use for your own applications. The first one is a replacement for the build-in Slider control. The second control is named Tree and is a tree control.

You can find more controls in the User Contribution Section.

DySlider

The DySlider control is a horizontally aligned scrollbar with a triangular mover. The user drags the mover with the pen to change the position of the mover.

In your application you can set the minimum and maximum value for the range and the mover position. The control generates VALUE_CHANGED events that you can handle in the appropriate method in your Page class.

The picture below shows the control on a Palm screen. The text below the slider does not belong to the control; the text is displayed in the event handler of the page.

DyTree

The DyTree control can display tree-like hierarchical structures of any depth (almost ;-). The user can select an entry by tapping on the label and expand or collapse a branch by tapping the icon in front of the branch. To scroll through larger trees the user drags the tree with the pen to display the requested section.

The control generates VALUE_CHANGED events for any selection change (user selects new tree item as current), DyTree.EXPAND if a branch is expanded and DyTree.COLLAPSE if a branch is collapsed. All functionality can also be "kicked" by method calls.

Back to top of page ...

Creating your own user interface widget

The following user interface elements that come with KVM can be used to setup the user interface for a page:

  • Button
  • CheckBox
  • RadioButton
  • ScrollTextBox
  • Slider
  • TextBox
  • TextField
  • UserWidget
  • ValueSelector
  • VerticalScrollBar

You can create your own widget by implementing the UserWidget interface from the DynaPage framework. You have to implement all the methods of the interface:

public class MyWidget implements UserWidget {

   // check if point is inside the widget
   public boolean contains (int x, int y) {
      // find out, if the point lays within our bounds...
   }
:
}
Look at the full source code

All the event handlers of a user widget that process kjava level events (like handlePenMove()) can pass back an ActionEvent object that is passed to the event handler of the container page object.

This approach is very helpful if you want to create a more 'abstract' behaviour of a UserWidget. Instead of dealing with low-level events the widget you can now handle events like VALUE_CHANGED or INVOKED that better fit into the 'application logic'.

Back to top of page ...

Writing a custom slider control

As an example of a custom widget we will create a new slider control. Our new slider will be able to trigger VALUE_CHANGE events whenever the user moves the marker.

Of course this is just a 'quick-and-dirty' implementation with raw functionality; you will probably include more methods (like drawing ticks) or the like if you write your own slider. The only speed improvement is the use of an 'update()' method that is only redrawing the marker instead of the complete control.

Here's the implementation:
(Note: you will find the source for the slider control in the directory examples/DynaPage/custom widgets)

package brf.j2me.dynaworks.ui;

import brf.j2me.dynaworks.*;

public class DySlider implements UserWidget {
:
}
Look at the full source code

As you can see, there is no magic in writing your own custom user interface control with DynaWorks.

Let's see how you would use the slider in your application:

public class SliderPage extends Page {

   private Button exitButton;
   private DySlider slider;
	
   public ViewPage (String name) {
:
}
Look at the full source code

Back to top of page ...

Copyright © 2000, Bernd R. Fix. All Rights Reserved.