Fox Ribbon

25
  FOXRIBBON Autor: Guillermo Carrero Documentación: Walter R. Ojeda Valiente Abril de 2012

Transcript of Fox Ribbon

FOXRIBBONAutor: Guillermo Carrero

Documentacin: Walter R. Ojeda Valiente

Abril de 2012

INDICEQu es FoxRibbon? ................................................ Qu es un men de tipo ribbon? ................................... Quin desarroll FoxRibbon? ...................................... Quin escribi esta documentacin? ............................... Cunto cuesta FoxRibbon? ......................................... Qu necesito descargar para poder utilizar FoxRibbon? ............ Cmo hago para ver un demo de FoxRibbon? ......................... Qu necesito conocer para poder usar FoxRibbon? .................. Cules son las libreras de clases que usa FoxRibbon? ............ Qu debo escribir en mi programa principal, MAIN.PRG o similar? .. Cules son las clases visuales que puedo utilizar? ............... Cmo agrego FoxRibbon a mi formulario? ........................... Cmo se ve lo que hemos hecho hasta aqu? ........................ Cmo le agrego una barra de ttulos al men ribbon? .............. Por qu usar una barra de ttulos propia y no usar simplemente la que tienen los formularios? .................................... 1 1 1 1 1 1 1 1 2 2 3 4 6 7

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 Carrero5. Y vers algo como esto:

Documentacin: Walter R. Ojeda Valiente

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 CarreroDesde dentro del men Ribbon

Documentacin: Walter R. Ojeda Valiente

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: I

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 contenedoraCREATE 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 propiedadesHeight Width = 92 (la altura debe ser 92, no la cambies) = 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 propiedadesLeft = 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 Carreroribbontextbox Similar a un TextBox

Documentacin: Walter R. Ojeda Valiente

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: [email protected] [email protected]

- 23 -