Creating custom UIComponent

Hello

I want to create a custom user interface controls. What I need is not only the counting or changing the appearance but creating new types of controls (these controls can possibly be skinnable components).

What I aim to is to have, for example, controls such as a vertical sliders or knobs. I wonder if these could be achieved by a cursor skinning.

Finally, I would like to a Jog-Wheel or the wheel, with a button in the Center, something like the old ipod.

I did several searches on custom components or controls interface user etc but so far could not find info on the count.

Anyone has any experience on the creation of new UIComponents reusable or you know some good examples or tutorials?

Thank you!

I'm not sure of the qnx.ui.slider. Personally, I tend to avoid the libs qnx for portability reasons, and as I skinned my components anyway there is little reason to use them.

Here is my code for the knob on base. Its value is from 0 (completely to the left) to 100 (all the right way). It is not customizable and probably not usable in design mode, but it should help you get started.

Cheers, - Jon-

/**
 * TKnob
 * Rotary knob component
 *
 * @author Jon Webb, http://www.webbsites.nl
 * @version 1.0.0 * @date 06-apr-2011
 *
 * Licensed under MPL - Mozilla Public License - http://www.mozilla.org/MPL/
 */
package components
{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.filters.DropShadowFilter;
    import flash.geom.Point;

    import mx.core.UIComponent;
    import mx.managers.IFocusManagerComponent;

    [Event(name="change", type="flash.events.Event")]

    public class TKnob extends UIComponent implements IFocusManagerComponent
    {

        private const DEGTORAD:Number = Math.PI/180; // used for angle conversion
        private const _maxAngle:Number = 180; // maximum angle
        private const _minAngle:Number = 0; // minimum angle
        private var   _currentAngle:Number = 0; // current angle
        private var   _value:Number = 0; // current value
        private var   _valueChanged:Boolean; // track when value is changed

        // constructor
        public function TKnob()
        {
            super();
            this.buttonMode=true;
            this.filters = [new DropShadowFilter(5,70,0, 0.66,4,4,3,3)];
            this.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
        }
        // value property setter
        public function set value(v:Number):void {
            if(v != _value) { // if changed
                if(!isNaN(v)) { // if valid
                    _value = v;
                    _valueChanged = true;
                    invalidateProperties();
                    invalidateDisplayList();
                    dispatchEvent(new Event(Event.CHANGE, true, false));
                }
            }
        }
        // value property getter
        public function get value():Number {
            return _value;
        }
        // mouse event handlers
        protected function handleMouseDown(e:MouseEvent):void {
            stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
            stage.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        }
        protected function handleMouseMove(e:MouseEvent):void {
            _currentAngle = calculateAngle(e);
            value = (calculateValue (_currentAngle)); // use setter
        }
        protected function handleMouseUp(e:MouseEvent):void {
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
            stage.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        }
        // calculate angle of mouse relative to center point
        private function calculateAngle(e:MouseEvent):Number {
            var cp:Point;
            var mp:Point;
            // get center point
            cp = new Point (this.x+this.width/2, this.y+this.height/2);
            // convert to global
            cp = this.parent.localToGlobal(cp)
            // get mouse point
            mp = new Point(e.stageX, e.stageY);
            // freedom of movement is limited to top half of knob, similar to mixer
            if(mp.y _maxAngle || r < -90) {
                    r = _maxAngle;
                } else if (r < _minAngle && r > -90) {
                    r = _minAngle;
                }
                return r;
            } else {
                return _currentAngle;
            }
        }
        // convert angle to value
        private function calculateValue(rotation:Number):Number {
            return (_currentAngle - _minAngle) / (_maxAngle - _minAngle) * 100;
        }
        // convert value to angle
        override protected function commitProperties():void {
            if (_valueChanged) {
                _currentAngle = _value/100 * (_maxAngle - _minAngle);
                _valueChanged = false;
            }
            super.commitProperties();
        }
        // redraw component
        override protected function updateDisplayList(uw:Number, uh:Number):void {
            super.updateDisplayList(uw, uh);

            var hw:Number = this.width/2; // half width
            var hh:Number = this.height/2; // half height
            var sx:Number = Math.cos(_currentAngle*DEGTORAD); // indicator x
            var sy:Number = Math.sin(_currentAngle*DEGTORAD); // indicator y

            graphics.clear();
            // draw the knob
            graphics.lineStyle(0,0);
            graphics.beginFill(0xDCDEE7, 1);
            graphics.drawCircle(hw, hh, hw*0.9);
            graphics.endFill();
            // draw the indicator
            graphics.lineStyle(2,0);
            graphics.moveTo(hw-(sx*hw/2), hh-(sy*hh/2));
            graphics.lineTo(hw-(sx*hw), hh-(sy*hh));

        }
    }
}

Tags: BlackBerry Developers

Similar Questions

Create a personalized and Custom UIComponent are the same in Flex?

Hello
I make confusion in the terminology of words regarding the custom components.
Please let me know if creating a component custom and Custom UIComponent are same in Flex?
Because I created some custom components based on the container shape based on the screens of my company.
They both Custom Component and Custom UIComponent means the same thing?

Please tell me.
Thanks in advance

Yes, it's okay...

Creating custom controls

Hi guys,.

I use labview to control test, but normally predispose the user interface as a windows with buttons, indicators, graphic controls program etc...

But "they" want to be a process diagram that can be used to control and monitor the user interface stuff. Fine. However, I created custom controls by changing true/false images on radio buttons.

They work great when the program currently does not work, IE real gives an image, click on it and the image changes, great. But when I run the software as soon as I move my mouse over the control, on what it shows default image for example a radio button, if I click and then move the mouse, it shows the picture its supposed to, but how can I stop it showing the radio button on a mouse?

See the attached images.

Thanks, Zac

You can find a great video tutorial on how to create a system of buttons on the forums of JKI. For your particular purpose, you might want to look at the DSC Module, which has the commands you seem to be wanting to use.

This program is best used to create custom, forms to say double surveys and networks, etc.

This program is best used to create custom, forms to say double surveys and networks, etc.

http://answers.Microsoft.com/en-us/Office

Cannot create custom themes - change the wallpaper on the evolution of a theme the wallpaper on the other themes without apparent reason.

Hi all

I am trying to create a bunch of different themes, with various wallpapers and color schemes.

I use right click on desktop-> personalization.

At first, it seemed possible to create different themes by going to the image I want, right click on 'set as wallpaper', then enter right-click-on - desktop-> personalization, right click on the theme "non-registered" now watch the wallpapers, I just chose, then selecting "save us." This appeared to save the theme under personalization-> my themes.

I got up to 5 different themes under "My themes" by doing this.

But now, #5 theme, it works all of a sudden is no longer like that.

Now, when the value a new picture as a wallpaper, it does not change only "Unsaved theme" for new wallpaper, it changes at the same time theme #5 to this wallpaper as well. When I save the new theme theme #6 and then go to change theme #5 to the wallpaper I had originally, it replaces theme #6 as well. It is impossible to change a wallpaper without changing both of them.

I don't understand why it ehaves in this way. Why can't save just a theme and then not have to worry that it will be crushed randomly if I do something else with a completely different theme?

Th information in this link can help you.
http://www.maketecheasier.com/create-custom-Windows-8-themes/

can I create custom context menus? Can I use Push technology? With the browser?

Anyone know if I can create custom context menus? Also, can I use Push technology? I vibrate the device? With the browser?

Just try to clarify to make sure I understood the question. The browser does not support the menu adding items to the BlackBerry menu (I don't know how tell - the menu that is displayed when you press the menu key on the BlackBerry). Java applications are. You could build something in JavaScript (on 4.6 and later) who gave you menus, but it does not fire when the menu button has been pushed.

Create custom Armors

Hello

I just started to use the fuse (yesterday) and ask yourself how to create custom example Stormtrooper armor / Ironman armour SciFi stuff.
I looked quickly the .net and all I can find tutorials to create a shirt, sort the UV stuff and how to customize existing clothing.

If someone can point me in the direction of a workflow tutorial?
I appreciate the help of people and ideas on that.
See you soon,.
NIC Calvert

Hi Nic! At the moment we have three tutorials for custom content that go on the body, the clothes and the hair. The tutorial of clothing is an example of the shirt, but the theory applies to any content that you want to create. I recommend reading this first overview article, and then the links to individual courses are downstairs.

Prerequisites and recommendations for the creation of content customized for fuse.

Creating content for fuse is designed for 3D artists who have access to programs for 3D modeling, sculpture, hob and other knowledge and skills to configure, just like a head! If you have any questions let me know.

create custom when installing ESXi 5.5 partitions

Hello
How to create custom when installing ESXi 5.5 partitions?
I wish I had the rest of the partitions:
# df h
Size of filesystem used Avail use % mounted on
/ dev/sde1 9.7 G 1.5 G 7.7 G 16%.
/ dev/sdc1 1.1 G 99 M 928 M 10% / Boot
/ dev/sde6 4.9 G 138 M 4.5 G 3% / Home
/ dev/sde7 4.9 G 182 M 4.4 G 4% / opt
/ dev/sde8 2% 36 M 1.8 G 2.0 G/tmp
/ dev/sde5 39G 5.3 G / 32G 15% var

Specifying the size of the partition was something that was done with the classic ESX 3.x or 4.x. With ESXi (installable) there is neither the need nor the ability to define individual partition sizes.

André

Creating custom roles autonomous ESXi4 host

How can I create a custom role in a stand-alone ESXi4 host (no vCenter)?

You don't see you home screen under Administration roles?

See also http://www.virtuallyghetto.com/2011/06/how-to-create-custom-roles-on.html

Essential support for creating custom reports on "Openmanage" using "Essentials" command line Interface

Good afternoon

Please can you help to create custom reports in "Essential Openmanage" using "Essentials" command line Interface

The default reports are not feasible.

Hi there Oswaldo and thank you for the question.

Currently, OME 1.3 doesn't have a custom report generator. I don't think that the CLI help as it is mainly used to set up from the beaches of discovery and things like that.

There is a REST API that _may_ allow to return by the data of the database of the MEO program. The REST API guide is in the section of the Documentation on the Dell TechCenter for OME page.

www.delltechcenter.com/ome.

Thank you

Rob

Create custom workflows in virtual machine

Hello
I use a native workflow 'Create custom virtual machine', but it does not deploy a machine of the ntemplate.
He built a raw with personalised VM. Some other workflow to deploy the VM from the model but without customization.
Is it possible to include an option to model the workflow "Create custom virtual machine"?
Thanks in advance

Use several workflow and actions as building blocks to build one that meets your needs... For example, suppose you want to deploy a Windows VM with customization...

Create a new workflow called "deploy Windows VMS"

Inside of this workflow, add the following workflow:

Clone, windows with a single NETWORK card and credential<-- this="" will="" clone="" a="" vm="" windows="" vm="" from="" template,="" perform="" sysprep="" (change="" unique="" id,="" guest="" os="" name,="" set="" administrator="" password,="" join="" domain="" if="" specified,="" and="" set="" ip="" address="" as="">

Take the exit (a new virtual machine) this workflow and send it to each flow of work following:
- Change of RAM (Workflow)
- Add the disk (Workflows)
- changeVMvCPU (Action)
should look a bit like this:

Once you have linked all together correctly and all attachments, you'll probably want to adjust the presentation so that the CPU/Mem are in the correct section, as well as additional info on the disk... Here's a quick example:

This process could be replicated, but using a Linux workflow specific to meet the same needs deployment clone custom Linux virtual machines.

Need help to create custom legends

Hello smart people.
I'm trying to create custom text captions, but having a problem encouraging them to behave properly.
Here is my method:
1 created a legend in photoshop. Saved as a bmp in the Gallery folder using the appropriate naming convention. (I did great: 400 x 600)
My problem:
The legend arises and seems ok. But it's the size, I have created (great!) and does not allow me to scale down. In addition, the text has no margin, and he pushed up against the top left margin.
I suspect it has something to do with the FCM files that I see in the Gallery folder - but how do I create one? And with what program?
Thank you!

Hello

The issue of size is exactly why when you look at the legends feeding by Captivate, they are quite small. In addition, you cannot move them is less than the size, they are. Take-away from this is that you must create them from the beginning to the smallest size that you want them to be.

Indeed, the. File FCM, is what regulates the margins. In fact, the extension of the FCM provides a clue about the history of Captivate. (He was originally known as FlashCam and FCM is the FlashCam file margins). You can use Notepad of Windows (or equivalent if Mac on a Mac) to make changes to the files of the FCM.

See you soon... Rick

Useful and practical links

Captivate wish form/Bug report form

Certified Adobe Captivate training

SorcerStone blog

Captivate eBooks

How to create custom underscore and make a style that will not change the style of text when it is applied?

Hi, I just want to know how can I create custom underscore and make a style, so that when I apply it to the text it right to point out that the article selected

As long as no other character style is applied, you can create and apply a character style that is completely empty except for underscores. That will add an underline without affecting the text in any other way. If a different character style is already you must either add an underscore to this style definition (which will add an underline to all text formatted with this style) or make a copy of the style and add the underline, and then apply the new style.

How can I create custom DAC execution plan
Hello

I need to create custom DAC execution plan to load data into tables. in fact schema we build with 2 custom tables Sun, 8 tables OOTB (fact and Sun). So I need to copy the OOTB existing execution plan, delete unwanted tables, stains ect and rebuild. But I do not know the exact process to do could you please provide step by step details?

We use 10.1.3.4.1 OBIEE, BI Apps 7.9.6.1 and customer DAC is on windows XP.

Grateful for your help!

Thank you
Jay.
Visit this link...

DAC-> Execute-> implementation plans-> click New and add your domains, settings, etc. see this link which details

http://download.Oracle.com/docs/CD/E12104_01/books/DAC/DADesignETL16.html

Creating custom Flashhelp skin
Does anyone know how to create custom skins for Flashelp? I've been to the adobe archives but what I want to do, it's actually make a skin. Any information would be greatly appreciated - and also, excuse me accidentally double display under Webhelp by mistake.
Hi dioinarms

Take a look at the Developer Center article: click here

If all goes well, it offers what you are looking for.

See you soon... Rick

Creating custom UIComponent

Similar Questions

Maybe you are looking for