Está en la página 1de 25

FOXRIBBON

Autor: Guillermo Carrero

Documentacin: Walter R. Ojeda Valiente

Abril de 2012
INDICE
Qu es FoxRibbon? ................................................ 1

Qu es un men de tipo ribbon? ................................... 1

Quin desarroll FoxRibbon? ...................................... 1

Quin escribi esta documentacin? ............................... 1

Cunto cuesta FoxRibbon? ......................................... 1

Qu necesito descargar para poder utilizar FoxRibbon? ............ 1

Cmo hago para ver un demo de FoxRibbon? ......................... 1

Qu necesito conocer para poder usar FoxRibbon? .................. 1

Cules son las libreras de clases que usa FoxRibbon? ............ 2

Qu debo escribir en mi programa principal, MAIN.PRG o similar? .. 2

Cules son las clases visuales que puedo utilizar? ............... 3

Cmo agrego FoxRibbon a mi formulario? ........................... 4

Cmo se ve lo que hemos hecho hasta aqu? ........................ 6

Cmo le agrego una barra de ttulos al men ribbon? .............. 7

Por qu usar una barra de ttulos propia y no usar simplemente


la que tienen los formularios? .................................... 9

Cmo hago para cambiar el color del texto y el tipo de letra? .... 10

Cmo le agrego una barra de estado a mi formulario? .............. 11

Cmo le agrego un botn de inicio a mi formulario? ............... 13

Cmo le agrego pestaas al men Ribbon? .......................... 15

Cmo le muestro las opciones al usuario cuando hace click sobre


una pestaa? ...................................................... 18

Cmo creo mis propias clases visuales para mostrar las opciones? . 19

Cules seran los pasos a seguir? ................................ 19

Para qu sirve cada una de las clases de FoxRibbon? .............. 20

Un consejo final? ................................................ 23

Y si tengo dudas o consultas? .................................... 23


Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Qu es FoxRibbon?
Es una librera de clases .VCX que puede ser utilizada por los programadores de
Visual FoxPro y que fue realizada 100% en este lenguaje. Sirve para mostrar en las
aplicaciones mens de tipo ribbon y adems provee una serie de herramientas para
mejorar el aspecto visual de las aplicaciones.

Qu es un men de tipo ribbon?


Los mens de tipo ribbon (o de cinta, en castellano) son los utilizados en las
ltimas versiones de los programas de Microsoft Office, como se ve a continuacin:

Quin desarroll FoxRibbon?


Guillermo Carrero, de Barcelona, Espaa.

Quin escribi esta documentacin?


Walter R. Ojeda Valiente, de Asuncin, Paraguay

Cunto cuesta FoxRibbon?


Es gratis.

Qu necesito descargar para poder utilizar FoxRibbon?


El archivo FoxRibbon.rar, el cual debes descomprimir en cualquier carpeta que
desees, por ejemplo en:
C:\FoxRibbon\
Podrs descargar a FoxRibbon.rar desde:
http://sites.google.com/site/foxribbonclass/
Importante: FoxRibbon utiliza a System.app

Cmo hago para ver un demo de FoxRibbon?


Ejecuta el programa FoxRibbon.exe

Qu necesito conocer para poder usar FoxRibbon?


1. Visual FoxPro en general
2. Creacin de clases visuales

Si no tienes un conocimiento al menos regular de Visual FoxPro no es mucho lo


que podrs obtener de FoxRibbon ya que te trancars a cada rato.

Si no sabes crear clases visuales en Visual FoxPro, entonces solamente podrs


utilizar las clases que ya estn diseadas (que son muy pocas) y no podrs
disear tus propias clases, personalizadas a tu propio gusto.

En otras palabras, si no conoces bastante bien los dos puntos anteriores,


FoxRibbon no es para ti.

-1-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cules son las libreras de clases que usa FoxRibbon?


Si entras en la carpeta \VCX vers que hay dos libreras de clases:
FoxRibbon
MyDesigns

La primera (FoxRibbon) es la que debes usar siempre, s o s, cuando quieras


crear un men de tipo ribbon. La segunda (MyDesigns) contiene las diversas opciones
que le mostrars a los usuarios. Su nombre no es obligatorio, o sea que puedes
renombrarla o crear tu propia librera de clases, por ejemplo llamndola: MisClases

Qu debo escribir en mi programa principal, MAIN.PRG o similar?

SET CLASS TO FOXRIBBON ADDITIVE


SET CLASS TO MYDESIGNS ADDITIVE

DO SYSTEM.APP

if VarType(_Screen.oRibbon) == "O"
_Screen.RemoveObject("oRibbon")
endif

_Screen.NewObject("oRibbon", "RibbonSettings")

with _Screen.oRibbon
.Language = "Espaol"
*--Calendario
.c_FirstDayWeek = 2
*--Das feriados de la semana
.c_1SunHoli = .T.
.c_2MonHoli = .F.
.c_3TueHoli = .F.
.c_4WedHoli = .F.
.c_5ThuHoli = .F.
.c_6FriHoli = .F.
.c_7SatHoli = .T.
endwith

FoxRibbon es la librera de clases que necesitars s o s para que puedas tener


en tu formulario un men de tipo ribbon. MyDesigns es la que contiene tus propios
diseos e inclusive es conveniente que la renombres o que crees tu propia librera, para
no interferir con versiones futuras que vayan surgiendo de FoxRibbon.

-2-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cules son las clases visuales que puedo utilizar?


El nombre de cada una de ellas y su utilidad lo encontrars al final de este
documento, algunas de ellas puedes verlas a continuacin:

-3-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cmo agrego FoxRibbon a mi formulario?


1. Crea un formulario en blanco
2. En Form Controls elige Add

3. Agrgale la librera de clases FoxRibbon.vcx

4. A tu formulario agrgale la clase Ribbon

-4-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

5. Y vers algo como esto:

Tranquilo, no te desesperes, ya s que parece chino, pero enseguida lo


entenders.

6. Si ahora haces click sobre esa clase con el botn derecho, eliges
Properties y luego Other, vers lo siguiente:

Si miras las ltimas lneas vers las propiedades:


FirstTabClick
YourStartButton
YourStatusBar
YourTitleBar

De las cuatro, la nica obligatoria es FirstTabClick, que servir para indicarle


cual ser la pestaa que estar habilitada al iniciar el programa.

YourStartButton sirve para indicar el nombre de la clase que llama el botn de


inicio (si hay un botn de inicio, claro)

YourStatusBar sirve para indicar el nombre de la clase que muestra una barra de
estado (si hay una barra de estado, por supuesto)

-5-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

YourTitleBar sirve para indicar el nombre de la clase que muestra la barra de


ttulo (si hay una barra de ttulo, desde luego)

Cmo se ve lo que hemos hecho hasta aqu?


Si ejecutas tu formulario vers algo como esto:

O sea, nada muy til hasta ahora, pero iremos avanzando hasta tener un men
totalmente funcional.

-6-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cmo le agrego una barra de ttulos al men ribbon?

Tienes dos formas, debes elegir UNA de ellas, no ambas:

Desde afuera del men Ribbon

1. Haces click sobre el formulario


2. En la ventanita de Form Controls haces click sobre la opcin _titlebar

3. Haces click sobre el formulario (arriba de l, pero NO en la barra de ttulos)

Y vers algo como:

Donde en la parte superior apareci una barra con el texto Label1

4. Ahora, para ponerle un ttulo a nuestro men lo que hacemos es cambiar la


propiedad Caption de nuestro formulario.

-7-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Recuerda: es la propiedad Caption del formulario la que cambias.

Queremos ver como nos est quedando, as que ejecutamos el formulario y


vemos esto:

Bueno, bueno, bueno, ya est tomando forma, al menos ya tenemos el ttulo y


los botones de Minimizar, Maximizar y Cerrar el formulario

Y si no quiero tener los botones de Minimizar, Maximizar y Cerrar?

Muy simple, esos botones son los que tienes definidos en las propiedades de tu
formulario, si no quieres verlos entonces simplemente les colocas el valor .F.

Recuerda: los botones que sern visibles los determinas en las propiedades de tu
formulario.

5. Para cambiar la apariencia de la barra de ttulos:


1. Para cambiar alguna de las propiedades de la barra de ttulo (el color
de fondo, si es transparente o no, el tamao, etc.), debes:
a. Hacer click con el botn derecho sobre _titlebar1
b. Elegir la opcin Edit
c. Hacer click sobre Ribbonlabel1
d. En la ventana Properties cambiarle los valores a las
propiedades
2. Para cambiar la ubicacin de la barra de ttulo (ponerla ms arriba,
ms abajo, ms a la derecha, ms a la izquierda) debes:
a. Hacer click con el botn derecho sobre _titlebar1
b. Elegir la opcin Edit
c. Hacer click sobre Ribbonlabel1
d. Colocarlo en la ubicacin deseada

-8-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Desde dentro del men Ribbon

En este caso, haces click con el botn derecho sobre el control Ribbon1, luego
en su propiedad YourTitleBar colocas el nombre de una clase que muestra la barra de
ttulos. Si usas la librera de clases que se entrega con FoxRibbon entonces podras usar
MyTitleBar, como se ve en la siguiente captura de pantalla:

O podras usar tu propia clase que muestre una barra de ttulos. Puedes revisar
justamente la clase MyTitleBar para tener una idea clara de cmo hacerla.

Por qu usar una barra de ttulos propia y no usar simplemente la que tienen los
formularios?
Porque a tu propia barra de ttulos la puedes PERSONALIZAR a tu propio
gusto, ponindole todas las opciones y los iconos que desees.

En un programa que estticamente deseas que sea bello (por eso justamente usas
la clase FoxRibbon) tener en cuenta todos los detalles es importante. Y una barra de
ttulos personalizada ayuda mucho.

Y aqu tenemos una barra de ttulo normal

-9-
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cmo hago para cambiar el color del texto y el tipo de letra?


Si has probado cambiar las propiedades de RibbonLabel1 posiblemente habrs
notado que puedes cambiar el valor de todas las propiedades y funcionan excepto
FontName y ForeColor. Esas no cambian, hagas lo que hagas.

Por qu no funcionan?

Porque sus valores estn definidos dentro del mtodo ReDraw() de la clase
RibbonLabel. As que si quieres cambiarlos tendrs que escribir en el mtodo ReDraw()
de RibbonLabel1 lo siguiente:
DODEFAULT()

WITH THIS
.FORECOLOR = IIF(.lFontAlternate, _SCREEN.oRibbon.FontColorAlternate, RGB(x,x,x))
.FONTNAME = "Tahoma"
ENDWITH

Donde reemplazaras RGB(x, x, x) por los colores que te plazcan, por ejemplo:
RGB(255, 255, 0)

Y FontName = Tahoma por el tipo de letra que te gusta, por ejemplo:


FontName = Times New Roman

- 10 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cmo le agrego una barra de estado a mi formulario?

De forma muy similar a como le has agregado una barra de ttulo, tambin tienes
dos formas:

Desde afuera del men Ribbon

1. Haces click sobre el formulario


2. En la ventanita de Form Controls haces click sobre la opcin _statusbar

3. Haces click sobre el formulario (abajo de l, en un lugar libre por supuesto)


4. Haces click con el botn derecho sobre la barra de estado que acabas de
agregar (la cual tendr por nombre: _statusbar1)
5. Eliges la opcin Edit
6. Haces click sobre RibbonLabel1
7. Y en la ventana de Properties, en la propiedad Caption escribes el texto
que deseas que se muestre en la barra de estado, por ejemplo:

- 11 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

8. Ejecutas tu formulario y vers algo como:

9. Al igual que como hiciste con la barra de ttulos, le puedes cambiar el tipo de
letra, el color de las letras, el tamao, etc.
10. Si quieres cambiar el texto desde un mtodo de tu formulario, entonces
puedes escribir algo como:
ThisForm._statusbar1.RibbonLabel1.Caption = "Mensaje en la Barra de Estado"

O como:
ThisForm._statusbar1.RibbonLabel1.Caption = DtoC(Date())

Desde dentro del men Ribbon

En este caso:
1. Click sobre Ribbon1
2. En la propiedad YourStatusBar escribir el nombre de una clase que
muestre una barra de estado. Puedes usar MyStatusBar o alguna otra
de tu propia creacin.

- 12 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cmo le agrego un botn de inicio a mi formulario?


Los botones de inicio son muy tiles para mostrarle al usuario las opciones ms
utilizadas, para que las tenga fcilmente a mano. Una posibilidad sera llevar un
contador de las veces que utiliza cada opcin y aquellas que ms utiliza colocarlas en el
botn de inicio, para que pueda acceder rpidamente a ellas.

Para agregar un botn de inicio:


1. Click sobre Ribbon1
2. En la propiedad YourStartButton poner el nombre de una clase que muestre el
botn de inicio, por ejemplo: MyStartButton

Adems, para que cada una de las pginas de MyStartButton puedan ser
mostradas tendrs que agregarlas a tu clase, si es que ya no estn en ella.

Supongamos que en lugar de usar la librera de clases MyDesigns.vcx utilizas tu


propia librera de clases llamada MisOpciones.vcx, en ese caso tendras que agregar las
clases Page1, Page2, Page3, Page4 (o el nombre que les quieras dar) a MisOpciones.vcx

Naturalmente, a las pginas Page1, Page2, etc., las personalizas a tu gusto.

Lo podemos ver mejor en la siguiente captura:

- 13 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Aqu est el men de inicio, an sin las pginas personalizadas:

Esta es la clase Page2 en modo de diseo:

Y aqu la vemos en modo de ejecucin:

- 14 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cmo le agrego pestaas al men Ribbon?


1. Click con el botn derecho sobre el control Ribbon1
2. Opcin Edit
3. Click sobre RibbonTab

4. Click sobre Ribbon1

5. Click con el botn derecho sobre RibbonTab1 (el control que acabamos de
agregar)
6. Opcin Edit
7. Click sobre RibbonLabel1 (la etiqueta que est dentro de ese control)
8. Cambiarle la propiedad Caption. En este ejemplo se puso la palabra
Archivos

- 15 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Al ejecutar el formulario veremos algo as:

Como podemos ver, nuestro men ya est tomando forma, de a poco va siendo
ms til.

Ahora, le agregaremos ms opciones, para que se parezca ms a un men que


pueda ser utilizado por los usuarios de nuestras aplicaciones.

Al ejecutar el formulario veremos esto:

- 16 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Si queremos que las pestaas tengan un pequeo iconito a su izquierda, entonces


se lo agregamos, como vemos a continuacin:

En la propiedad Picture de Image1 especificamos el archivo grfico que all


ser mostrado. Al ejecutar el formulario podremos ver algo as:

En este caso se coloc un smbolo de interrogacin pero por supuesto puede


elegirse cualquier otro grfico que uno desee.

IMPORTANTE: El tamao del archivo grfico debe ser de 16 x 16 pixeles.

- 17 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cmo le muestro las opciones al usuario cuando hace click sobre una pestaa?
Para conseguir eso necesitars dos cosas:
1. Disear la clase que usars para mostrar tus opciones
2. Escribir el nombre de esa clase en la propiedad PageClass del control
RibbonTab, por ejemplo:

En este caso estamos usando una clase llamada DesignerTab que se encuentra
en la librera de clases MyDesigns.vcx

Al ejecutar nuestro formulario veremos algo como esto:

Al hacer click sobre la pestaa Archivos automticamente aparecieron las


opciones que se haban puesto en la clase DesignerTab.

- 18 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Cmo creo mis propias clases visuales para mostrar las opciones?
Para eso, puedes utilizar todas las clases que te provee la librera FoxRibbon.vcx
ya que all encontrars todo lo que necesitas.

Cules seran los pasos a seguir?


1. Crear una clase contenedora
CREATE CLASS TabArchivos OF MisOpciones AS RIBBONPAGE

NOTA: Podramos tambin haber escrito:


CREATE CLASS TabArchivos OF MisOpciones AS CONTAINER

Y funcionara bien despus de ajustar las propiedades BackStyle = 0,


BorderWidth = 0, Height = 92. Sin embargo usar la clase RibbonPage tiene una
ventaja: ella se encarga de ajustar las propiedades Top de los grupos contenidos
y de refrescar (ReDraw()) si se cambia el estilo o el idioma.

2. Establecer las propiedades


Height = 92 (la altura debe ser 92, no la cambies)
Width = 900 (el ancho por supuesto que puede variar)

3. Agregarle los controles deseados:


a. Un control RibbonGroup con las propiedades:
Left = 5
Top = 0
RibbonLabel1.Caption = Maestros
b. Dentro de RibbonGroup1 un control RibbonButtonV con las propiedades
Left = 3
Top = 3
Image1.Picture = Carita01.ico
RibbonLabel1.Caption = Empresa

En lugar de Carita01.ico puedes colocar cualquier otro grfico con


dimensiones de 32 x 32 pixeles

Y en el evento Click() de RibbonButtonV escribimos el cdigo deseado,


por ejemplo:

EVENTO CLICK
=MessageBox(Hiciste click aqu)

4. En la propiedad PageClass del control RibbonTab escribir el nombre de la


clase que ser mostrada (en este ejemplo la clase se llama: TabArchivos)

A partir de este momento, ya todo depende de tu creatividad

- 19 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

Para qu sirve cada una de las clases de FoxRibbon?

_bandmenu
Es la banda vertical de los mens desplegables. Es utilizada en
RibbonFormMenu y se puede verla en los formularios Menu1 y Menu2

_borderform
Remarca an ms los bordes de un formulario y se ajusta
automticamente a ste

_calendar
Calendario

_container
Contenedor de otros objetos

_datepicker
Muestra y permite cambiar la fecha

_datetimepicker
Muestra y permite cambiar la fecha y la hora

_day
Muestra el nmero del da

_menubar
Es un contenedor (de botones o de lo que necesites)

_menutabs
Es un contenedor para colocar en l las opciones que se mostrarn en un
men vertical, como el de MyStartButton

_menutabsbutton
Utilizado en MyStartButton para mostrar opciones

_pageframeh
Es un contenedor de RibbonPage que simula un PageFrame. Ejemplos
de su uso se pueden ver en Acerca de y en Open a form example

_panel
Es un contenedor de diversos objetos que tiene una mejor apariencia. Un
ejemplo de su uso puede verse al hacer click en el botn Propiedades del
estilo.

_progressbar
Barra de progreso que tambin muestra un porcentaje

_statusbar
Barra de estado que se muestra en la parte inferior del formulario

- 20 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

_titlebar
Barra de ttulos que puede ser personalizada

_titlebarmax
Barra de ttulos que puede ser personalizada

ribbon
Men de tipo ribbon (o cinta, en castellano) que puede ser personalizado.
Inicialmente est vaco, se le deben agregar las distintas opciones.

ribbonbuttongroup
Muestra un formulario asociado a un grupo

ribbonbuttonh
Similar a un botn de comando que se muestra en forma horizontal y
puede tener un icono de 16 x 16 pixeles

ribbonbuttonv
Similar a un botn de comando que se muestra en forma vertical y puede
tener un icono de 32 x 32 pixeles

ribboncheck
Similar a un checkbox

ribboncombo
Similar a un ComboBox

ribboncommandbutton
Similar a un botn de comandos, puede tener un icono de 16 x 16 pixeles
a la izquierda

ribboneditbox
Similar a un EditBox

ribbonformbase
Es un formulario base, utilizado en Acerca de, Ver cdigo y es la
clase padre de RibbonFormCalendar, RibbonFormDateTime y de todas
las dems RibbonFormxxx

ribbonformcalendar
Formulario que muestra y permite cambiar una fecha

ribbonformdatetime
Formulario que muestra y permite cambiar la fecha y la hora

ribbonformmenu
Clase base para crear mens. Se puede ver un ejemplo de su uso en la
pestaa de Ejemplos, el botn Edit y los tres botones horizontales
Label1 que estn a su derecha.

- 21 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

ribbonformmsgbox
Similar a MessageBox() pero no hay interaccin con el usuario.

ribbonformwait
Similar a Wait Window y con una barra de progresos opcional

ribbongroup
Contenedora de un grupo de opciones

ribbon_groupseparator
Separa los grupos cuando se emula a Office 2010. Eso se hace mediante
la propiedad _Screen.oRibbon.SeeOutlineGroup. Cuando est en .T. est
visible, cuando est en .F. est invisible.

ribbonhelp
Ventanita para mostrar mensajes de ayuda que tiene un ttulo y un
mensaje, el cual puede tener hasta tres lneas

ribbonlabel
Similar a las etiquetas (label)

ribbonlistbox
Similar a un ListBox

ribbonmenuseparator
Barra horizontal para separar las opciones del men

ribbonoptiongroup
Grupo de botones de radio

ribbonpage
Contenedora de las clases visibles, que automticamente alinea a los
objetos que tiene contenidos

ribbonseparator
Muestra una barra para separar a un ribbonbuttonv de otro

ribbonsettings
Configuracin de FoxRibbon. En lugar de usar variables pblicas o
propiedades del objeto _Screen, se usan propiedades de esta clase

ribbonspinner
Similar a un Spinner

ribbonstartbutton
Contenedora de todas las opciones que puede mostrar el botn de inicio

ribbontab
Pestaa de ttulo, que adems puede tener un icono

- 22 -
Autor: Guillermo Carrero Documentacin: Walter R. Ojeda Valiente

ribbontextbox
Similar a un TextBox

Un consejo final?
Revisa cada una de las clases que se encuentran en la librera MyDesigns.vcx,
as podrs conocer como fueron hechas y te resultar muy fcil crear tus propias clases.

Y si tengo dudas o consultas?

Ante cualquier duda, consulta o sugerencia, puedes contactarte con:


foxribbonclass@gmail.com
wrov@hotmail.com

- 23 -

También podría gustarte