user interface - Diseño de interfaz de usuario de Blackberry: interfaz de usuario personalizable

user-interface custom-controls

Question

Estoy tratando de diseñar una aplicación Blackberry y me pregunto si hay recursos sobre cómo crear elementos de interfaz de usuario personalizados, sobre los existentes y qué otras posibilidades hay.

He desarrollado algunas aplicaciones de iPhone con interfaz de usuario personalizada y otras cosas, por lo que no estoy seguro de lo que BB World ofrece en términos de desarrollo de la interfaz de usuario.

Cualquier consejo, sugerencia o idea sería genial.

Answer 1

Ejemplo de máscara de aplicación de medios estándar en Bold 9000

eliminado el enlace ImageShack muerto - aplicación multimedia en rodajas

eliminado el enlace de ImageShack muerto - Imágenes en rodajas

Utilice la extensión de ButtonField para asignar imágenes con botones:

class BitmapButtonField extends ButtonField {
    Bitmap mNormal;
    Bitmap mFocused;
    Bitmap mActive;

    int mWidth;
    int mHeight;

    public BitmapButtonField(Bitmap normal, Bitmap focused, 
        Bitmap active) {
        super(CONSUME_CLICK);
        mNormal = normal;
        mFocused = focused;
        mActive = active;
        mWidth = mNormal.getWidth();
        mHeight = mNormal.getHeight();
        setMargin(0, 0, 0, 0);
        setPadding(0, 0, 0, 0);
        setBorder(BorderFactory
                    .createSimpleBorder(new XYEdges(0, 0, 0, 0)));
        setBorder(VISUAL_STATE_ACTIVE, BorderFactory
                .createSimpleBorder(new XYEdges(0, 0, 0, 0)));
    }

    protected void paint(Graphics graphics) {
        Bitmap bitmap = null;
        switch (getVisualState()) {
        case VISUAL_STATE_NORMAL:
            bitmap = mNormal;
            break;
        case VISUAL_STATE_FOCUS:
            bitmap = mFocused;
            break;
        case VISUAL_STATE_ACTIVE:
            bitmap = mActive;
            break;
        default:
            bitmap = mNormal;
        }
        graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(),
                bitmap, 0, 0);
    }

    public int getPreferredWidth() {
        return mWidth;
    }

    public int getPreferredHeight() {
        return mHeight;
    }

    protected void layout(int width, int height) {
        setExtent(mWidth, mHeight);
    }
}

• poner HorizontalFieldManagers dentro de VerticalFieldManagers y viceversa
• use diferentes imágenes para estados normales, enfocados y activos
• si necesita botones con formas personalizadas, puede dibujarlos en el método manager paint () anular, después de super.paint ()

Resto parte del código:

class Scr extends MainScreen implements FieldChangeListener {
    Bitmap mBmpHeader = Bitmap.getBitmapResource("header.png");
    Bitmap mBmpCover = Bitmap.getBitmapResource("cover.png");
    Bitmap mBmpTitle = Bitmap.getBitmapResource("title.png");
    Bitmap mBmpTimeline = Bitmap.getBitmapResource("timeline.png");
    Bitmap mBmpLeftside = Bitmap.getBitmapResource("leftside.png");
    Bitmap mBmpPrevNrm = Bitmap.getBitmapResource("btn_prev_normal.png");
    Bitmap mBmpPlayNrm = Bitmap.getBitmapResource("btn_play_normal.png");
    Bitmap mBmpPauseNrm = Bitmap.getBitmapResource("btn_pause_normal.png");
    Bitmap mBmpStopNrm = Bitmap.getBitmapResource("btn_stop_normal.png");
    Bitmap mBmpNextNrm = Bitmap.getBitmapResource("btn_next_normal.png");
    Bitmap mBmpPrevFcs = Bitmap.getBitmapResource("btn_prev_focused.png");
    Bitmap mBmpPlayFcs = Bitmap.getBitmapResource("btn_play_focused.png");
    Bitmap mBmpPauseFcs = Bitmap.getBitmapResource("btn_pause_focused.png");
    Bitmap mBmpStopFcs = Bitmap.getBitmapResource("btn_stop_focused.png");
    Bitmap mBmpNextFcs = Bitmap.getBitmapResource("btn_next_focused.png");
    Bitmap mBmpRightside = Bitmap.getBitmapResource("rightside.png");
    VerticalFieldManager mMainManager;
    HorizontalFieldManager mHeaderManager;
    HorizontalFieldManager mCoverManager;
    HorizontalFieldManager mTitleManager;
    HorizontalFieldManager mTimelineManager;
    HorizontalFieldManager mToolbarManager;
    BitmapField mHeader;
    BitmapField mCover;
    BitmapField mTitle;
    BitmapField mTimeline;
    BitmapField mLeftside;
    BitmapField mRightside;
    BitmapButtonField mBtnPrev;
    BitmapButtonField mBtnPlay;
    BitmapButtonField mBtnPause;
    BitmapButtonField mBtnStop;
    BitmapButtonField mBtnNext;
    public Scr() {
        add(mMainManager = new VerticalFieldManager());
        addHeader();
        addCover();
        addTitle();
        addTimeline();
        addToolbar();
    }
    private void addHeader() {
        mMainManager.add(mHeaderManager = new HorizontalFieldManager());
        mHeaderManager.add(mHeader = new BitmapField(mBmpHeader));
    }
    private void addCover() {
        mMainManager.add(mCoverManager = new HorizontalFieldManager());
        mCoverManager.add(mCover = new BitmapField(mBmpCover));
    }
    private void addTitle() {
        mMainManager.add(mTitleManager = new HorizontalFieldManager());
        mTitleManager.add(mTitle = new BitmapField(mBmpTitle));
    }
    private void addTimeline() {
        mMainManager.add(mTimelineManager = new HorizontalFieldManager());
        mTimelineManager.add(mTimeline = new BitmapField(mBmpTimeline));
    }
    private void addToolbar() {
        mMainManager.add(mToolbarManager = new HorizontalFieldManager());
        mToolbarManager.add(mLeftside = new BitmapField(mBmpLeftside));
        mToolbarManager.add(mBtnPrev = new BitmapButtonField(mBmpPrevNrm,
                mBmpPrevFcs, mBmpPrevFcs));
        mToolbarManager.add(mBtnPlay = new BitmapButtonField(mBmpPlayNrm,
                mBmpPlayFcs, mBmpPlayFcs));
        mBtnPlay.setChangeListener(this);
        mBtnPause = new BitmapButtonField(mBmpPauseNrm, mBmpPauseFcs,
                mBmpPauseFcs);
        mBtnPause.setChangeListener(this);
        mToolbarManager.add(mBtnStop = new BitmapButtonField(mBmpStopNrm,
                mBmpStopFcs, mBmpStopFcs));
        mToolbarManager.add(mBtnNext = new BitmapButtonField(mBmpNextNrm,
                mBmpNextFcs, mBmpNextFcs));
        mToolbarManager.add(mRightside = new BitmapField(mBmpRightside));
    }
    public void fieldChanged(Field field, int context) {
        if (mBtnPlay == field)
            play();
        else if (mBtnPause == field)
            pause();
    }
    private void pause() {
        mToolbarManager.replace(mBtnPause, mBtnPlay);
    }
    private void play() {
        mToolbarManager.replace(mBtnPlay, mBtnPause);
    }
}

Answer 2

No hay máscaras en Blackberry, hay dos formas que conozco para lograr el efecto de la piel

• crear su propio tema
• crear controles personalizados

Crear un tema de BlackBerry

eliminado el enlace muerto de Imageshack - BlackBerry Theme Builder

¿Qué puedes hacer con Theme Builder? Algunas de sus características principales le permiten:

• Personaliza los íconos de la aplicación BlackBerry
• Cambiar la imagen del banner de la pantalla de inicio y los colores del icono / indicador
• Crea tus propios botones
• Personalice el aspecto de las pantallas emergentes y de diálogo
• Personaliza una pantalla inactiva
• Personaliza el aspecto de los menús y listas
• Personaliza las pantallas de la aplicación del teléfono
• Personalice las fuentes utilizadas en el dispositivo BlackBerry

Cómo crear sus propios temas personales de Blackberry por BrileyKenney
diario de desarrollo bb - ¡Just Theme It!
Temas de BlackBerry y gráficos animados

Malas noticias: el tema se aplica a todo el sistema operativo del dispositivo y a cada aplicación
Aunque el tema creado puede ser un producto de diseño de software independiente, no creo que sea una buena idea crear un tema propio para una aplicación desarrollada.

Diseño de maqueta

La programación de la interfaz gráfica de usuario puede llevar algo de tiempo y, en caso de que desee resolver algunas preguntas en la planificación de la GUI sin codificación, es posible que desee dibujar la maqueta de la GUI.

Puede utilizar plantillas de Visio de creación de prototipos de UI de BlackBerry gratuitas - v1.0 de ArtfulBits.

eliminado el enlace muerto de Imageshack
eliminado el enlace muerto de Imageshack

Creando control personalizado

Al crear control personalizado, puede configurar

• tamaño de control
• forma de control
• fondo de control (color, imagen)
• fuente de control (tamaño, estilo, color)
• borde de control (tamaño, estilo, color)

Todo esto para los estados

• discapacitado
• normal
• centrado
• activo (hecho clic)

Al final, simplemente puedes personalizar tu control configurando la imagen de fondo

Lo esencial

devsushi.com: Blackberry JDE API: la referencia de campo de la interfaz de usuario básicamente dará la idea de los controles de blackberry ui existentes, con códigos de cifrado y capturas de pantalla.

SO: Agregar elementos a un ListField (BlackBerry)
SO: ¿Control HTML incorporado para Blackberry?
SO: Blackberry: ¿cómo obtener el valor de fecha y hora de DateField?
SO: Diseñando una aplicación BlackBerry para que parezca un iPhone

Gerentes, diseño

Incluso usando controles estándar, tenemos que diseñar y agrupar de la manera que queramos, por lo tanto, necesitamos administradores personalizados:
Thinking BlackBerry: UI de BlackBerry: creación de un administrador de campo básico
Thinking BlackBerry: gestor de diseño simple de la red de BlackBerry
Thinking BlackBerry: creación de una pantalla personalizada, desplazamiento vertical y más
SO: Problema de desplazamiento en la aplicación Blackberry
SO: ¿Cómo configurar una ScrollBar para VerticalFieldManager en Blackberry?
Inalámbrico: cree un administrador de diseño personalizado para una pantalla
SO: Blackberry: obtenga todos los campos de control secundarios
SO: Cancelar el desplazamiento en el Administrador de diseño
SO: Creación de diseños personalizados en BlackBerry
SO: Blackberry configura la posición de un RichtextField en FullScreen
SO: Diversión con los administradores de campo
SO: BlackBerry - Barra de herramientas del menú personalizado
SO: BlackBerry - HorizontalCield HorizontalFieldManager centrado personalizado

Controles personalizados

Conjunto de artículos sobre cómo escribir controles personalizados:
Thinking BlackBerry: BlackBerry UI - Un campo personalizado simple
Coderholic: Blackberry Custom Button Field
Inalámbrico: cree su propio VirtualKeyboard para BBStorm
Inalámbrico: ListField con casillas de verificación
CodeProject: Creación de un gráfico / trazado XY como un campo personalizado de BlackBerry
SO: Blackberry - Tamaño personalizado EditField
SO: Blackberry - ¿Cómo agregar borde a BasicEditField?
SO: Blackberry: configuración del color de fondo de LabelField
SO: Blackberry cambia el color de los campos secundarios en el enfoque del administrador horizontal
SO: configuración de fondo y colores de fuente para RichTextField, TextField
SO: Blackberry Java: TextField sin el cursor?
SO: Image-like Blackberry Control - Aplicación CLDC
SO: Blackberry - línea única BasicEditField con texto grande
SO: Blackberry - Custom BubbleChartField
SO: Blackberry: obtenga elementos marcados de la lista con casillas de verificación
SO: BlackBerry: creación de un campo de fecha personalizado
SO: BlackBerry - ¿Cómo crear un sub menú?
SO: BlackBerry - ¿Cómo puedo mostrar una etiqueta con emoticones?
SO: BlackBerry - Muestra el indicador de modo de escritura mediante programación

Gráficos, animación

SO: BlackBerry - dibujar imagen en la pantalla
SO: Blackberry - imagen de fondo / animación RIM OS 4.5.0
SO: Blackberry: pantalla de carga con animación
SO: ¿Cómo configurar Anti Aliasing en Blackberry Storm?
SO: Blackberry configura una región / área de recorte
SO: ¿Es mejor usar Bitmap o EncodedImage en BlackBerry?
SO: Blackberry: animación de diseño de campos

Fuentes

Inalámbrico: cambie las fuentes en una aplicación BlackBerry
Revistas de desarrollador: fuentes
SO: ¿Cómo creo una fuente personalizada para una aplicación de blackberry?
SO: ¿Cómo configurar una fuente para el texto de LabelField en Blackberry?
SO: ¿Cómo hacer que la interfaz de usuario de Blackberry sea más atractiva?
SO: ¿Cómo cambiar el color de la fuente del campo de la etiqueta de Blackberry dinámicamente?
SO: BlackBerry - pantalla de texto Unicode

Answer 3

The resources no son muy buenos, lamentablemente. La mejor fuente de información suele ser Google vinculando a los blogs con el tema específico que está buscando.

Si recién está empezando a escribir código BB GUI, le recomiendo encarecidamente que conozca las clases Manager y Field , ya que probablemente tenga que escribir muchas extensiones personalizadas de ellas.