A CSS web menu on vfp form

Published on by Yousfi Benameur

Nowadays modern styles such as CSS, HTML5 ... are fully on the worldwide  web and make  great attraction by users.
Why not use them  with Visual fox browser (
mandatory emulated (as  ie11 for ex.) )!

I made a small css menu on a web page navigated from the vfp browser and use it as a real  vfp menu.

All the trick resides in the beforenavigate2 method where can prevent the default url to navigate on the web (as it returns error because no valid url) and force it to  redirect toward working on discAll the sample consists with a sigle top level form.

The css buttons created with cool gradients colors  are customizable (see the menu item change style).can change colors at runtime.

See the code in Befornavigate2() and its parameters

olecontrol1.Befornavigate2
LPARAMETERS pdisp, url, flags, targetframename, postdata, headers, cancel

then each li.menu can link to a vfp.action.Just make the vfp actions to do as a classic menu and this sample  is a good demo with this concept.

You can see  menus (vertical or horizontal) with nice colors on the web(there is tons for free) and adapt them for beautifying your applications.That recquires no javascript nor other adds.

Usually this kind of menus on vfp is  obtained  with images as resources.
Good, the way is now indicated.You can test other accodions (horizontal, vertical) or even other types of CSS menus and see the added value that it gives to your applications.

-*you can even select gif animated images to integrate.

-see some screenshots below.

*Begin code

Publi yform
yform=Newobject("ymenu_class")
yform.Show
Read Events
Return
*
Define Class ymenu_class As Form
    Height = 600
    Width = 874
    ShowWindow = 2
    DoCreate = .T.
    AutoCenter = .T.
    Caption = "Web CSS accordions Applied to vfp"
    KeyPreview = .T.
    BackColor = Rgb(0,0,0)
    yurl = .F.
    ycolorstyle = ""
    Name = "Form1"

    Add Object olecontrol1 As OleControl With ;
        Oleclass="shell.explorer.2", ;
        Top = 0, ;
        Left = 0, ;
        Height = 559, ;
        Width = 620, ;
        Name = "Olecontrol1"

    Add Object olecontrol2 As OleControl With ;
        Oleclass="MSComCtl2.MonthView.2",;
        Top = 48, ;
        Left = 348, ;
        Height = 216, ;
        Width = 215, ;
        Visible = .F., ;
        Name = "Olecontrol2"

    Add Object olecontrol3 As OleControl With ;
        oleclass="MSComCtl2.DTPicker.2",;
        Top = 84, ;
        Left = 570, ;
        Height = 73, ;
        Width = 229, ;
        Visible = .F., ;
        Name = "Olecontrol3"

    Add Object olecontrol4 As OleControl With ;
        oleclass="shell.explorer.2",;
        Top = 252, ;
        Left = 324, ;
        Height = 289, ;
        Width = 409, ;
        Visible = .F., ;
        Anchor = 15, ;
        Name = "Olecontrol4"

    Procedure yactions
        #Define yerror "An error was ccured"
        If !Thisform.yurl==[yvfp:/29]  &&Exit
            Try
                For i=1 To Thisform.ControlCount
                    If !( Lower(Thisform.Controls(i).Name)=="olecontrol1" Or Lower(Thisform.Controls(i).Name)=="olecontrol2" Or Lower(Thisform.Controls(i).Name)=="olecontrol3" Or Lower(Thisform.Controls(i).Name)=="olecontrol4")
                        Thisform.RemoveObject(Thisform.Controls(i).Name)
                        DoEvent
                    Endi
                Endfor
            Catch
            Endtry
            With Thisform
                .olecontrol2.Visible=.F.   &&iif(.olecontrol2.visible=.t.,.t.,.f.)
                .olecontrol3.Visible=.F.   &&iif(.olecontrol3.visible=.t.,.t.,.f.)
                .olecontrol4.Visible=.F.   &&iif(.olecontrol4.visible=.t.,.t.,.f.)
            Endwith
        Endi
        Thisform.Refresh


        Do Case

            Case Thisform.yurl==[yvfp:/1]
                Select * From (Home(1)+"samples\data\customer.dbf") Into Cursor ycurs
                Thisform.AddObject("grid1","grid")
                With Thisform.grid1
                    .RecordSource="ycurs"
                    .Left=Thisform.olecontrol1.Left+Thisform.olecontrol1.Width+5
                    .Top=10
                    .Width=630
                    .Height=400
                    .Themes=.F.
                    .Anchor=15
                    .GridLines=0
                    .DeleteMark=.F.
                    .HeaderHeight=22
                    .SetAll("DynamicBackColor", "IIF(MOD(RECNO( ), 2)=0, RGB(255,255,255), RGB(216,252,218))", "Column")
                    .SetAll("fontsize",12,"header")
                    For i=1 To .ColumnCount
                        .Columns(i).header1.BackColor=Rgb(255*Rand(),255*Rand(),255*Rand())
                    Endfor
                    .Visible=.T.
                    .Refresh
                    Locate
                Endwith

            Case Thisform.yurl==[yvfp:/2]
                Thisform.AddObject("edit1" ,'editbox')
                With Thisform.edit1
                    .Top=10
                    .Left=Thisform.olecontrol1.Left+Thisform.olecontrol1.Width+5
                    .Width=670
                    .Height=350
                    .ForeColor=Rgb(0,255,0)
                    .BackColor=Rgb(10,100,95)
                    .FontSize=11
                    .Alignment=0
                    .Anchor=15
                    TEXT to .value noshow
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
        fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
        nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
        Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
        auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
        Cras vitae felis venenatis, egestas sem quis, sodales neque. Donec venenatis hendrerit odio, non
        pellentesque metus scelerisque ac. Suspendisse aliquet rhoncus odio id viverra. Vestibulum feugiat
        lectus a nisl pulvinar, in tempor metus eleifend. Nunc id odio quam. Praesent egestas lorem ut
        sollicitudin consectetur. Vestibulum id bibendum est. Ut vel lacus sapien. Quisque eget molestie
        sem. Integer eget purus eu orci molestie aliquam quis in ante. Integer a magna eget lectus finibus
        porttitor. Donec fringilla sapien a quam aliquet, pellentesque blandit nisl placerat. Nam hendrerit
        velit vel ex aliquam, eget convallis ante mollis.
                    ENDTEXT
                    .Visible=.T.
                Endwith

            Case Thisform.yurl==[yvfp:/3]
                Thisform.AddObject("image1" ,'image')
                With Thisform.image1
                    .Picture=Getpict()
                    If Empty(.Picture)
                        Return .F.
                    Endi
                    .Stretch=2
                    .Left=Thisform.olecontrol1.Width+1
                    .Top=10
                    .Width=Thisform.Width-Thisform.olecontrol1.Width-20
                    .Height=Thisform.Height-20
                    .Anchor=15
                    .Visible=.T.
                Endwith

            Case Thisform.yurl==[yvfp:/4]
                Thisform.olecontrol2.Visible=.T.

            Case Thisform.yurl==[yvfp:/5]
                Thisform.olecontrol3.Visible=.T.
                Thisform.olecontrol3.SetFocus
                Local oshell
                oshell=Newobject("wscript.shell")
                oshell.sendkeys("%{DOWN}")

            Case Thisform.yurl==[yvfp:/6]
                With Thisform.olecontrol4
                    Try
                        .Navigate("www.foxite.com")
                        .Visible=.T.
                    Catch
                    Endtry
                Endwith

            Case Thisform.yurl==[yvfp:/7]
                With Thisform.olecontrol4
                    Try
                        .Navigate("http://yousfi.over-blog.com/")
                        .Visible=.T.
                    Catch
                    Endtry
                Endwith

            Case Thisform.yurl==[yvfp:/8]
                With Thisform.olecontrol4
                    Try
                        .Navigate("www.google.com")
                        .Visible=.T.
                    Catch
                    Endtry
                Endwith

            Case Thisform.yurl==[yvfp:/9]
                Run /N explorer

            Case Thisform.yurl==[yvfp:/10]
                Run /N mspaint


            Case Thisform.yurl==[yvfp:/11]

                If  ! ShellExecute(0, "open", "firefox.exe","","",1)>32
                    Messagebox(yerror,16+4096,1000)
                Endi

            Case Thisform.yurl==[yvfp:/12]
                If !ShellExecute(0, "open", "acroRd32.exe","","",1)>32
                    Messagebox(yerror,16+4096,1000)
                Endi

            Case Thisform.yurl==[yvfp:/13]
                Try
                    Run/N snippingtool
                Catch
                    Messagebox(yerror,16+4096,1000)
                Endtry


            Case Thisform.yurl==[yvfp:/28]
                TEXT to m.myvar textmerge noshow
        the web is full off new objects and can found accordions with beautiful
        designs and in very short code..
        these can be embed as html file on the classic vfp olecontrol  if compatible.
        this one  uses javascript/jQuerry/css and is compatible with the vfp browser and
        can be coupled usefully with vfp objects.
        the browser have the method "beforenavigate" to intercept the url linked,cancel
        its running action  and instead can run any vfp object with classic commands....
        can arrange menu items names and number as your convenience.
        these web objects can be menus,web treeview,menu images,accordions,videos,web pages ...
        the same method can be applied to.
        original web accordion  code is from :http://www.vandelaydesign.com/vertical-accordion/

        Yousfi Benameur  El Bayadh Algeria.
        Foxite 21 October 2014

                ENDTEXT
                Try
                    Set Bell To (Addbs(Getenv('windir')))+"MEDIA\notification.WAV"
                    ?? Chr(7)
                Catch
                Endtry
                Messagebox(m.myvar,0+32+4096,"Help")

                Try
                    Set Bell To (Addbs(Getenv('windir')))+"MEDIA\Windows Notify Email.WAV"
                    ?? Chr(7)
                Catch
                Endtry


            Case Thisform.yurl==[yvfp:/33]
                With Thisform
                    Do Case
                        Case  .TitleBar=1
                            .TitleBar=0
                            .Height=.Height+Sysmetric(9)+Sysmetric(4)
                        Case  .TitleBar=0
                            .TitleBar=1
                            .Height=.Height-Sysmetric(9)-Sysmetric(4)
                    Endcase
                Endwith

            Case Thisform.yurl==[yvfp:/34]
                Local m.xcolor
                m.xcolor=Getcolor()
                If m.xcolor=-1
                    Return  .F.
                Endi
                Thisform.ycolorstyle=m.xcolor

                Local m.ycolor
                If Empty(Thisform.ycolorstyle) Or Thisform.ycolorstyle=-1
                    Thisform.ycolorstyle=Rgb(0,230,0)
                Endi
                m.ycolor=Thisform.yhtmlcolor(Thisform.ycolorstyle)
                Thisform.yinit(m.ycolor)

            Case Thisform.yurl==[yvfp:/341]
                Local m.myvar
                TEXT to m.myvar noshow
 This is a demo how you can embed a web menu (made only with css, no javascript or other adds) on a vfp browser  and use it usefully as real menu, beautifying your application
This is a vertical accordion with bars and menu items (add as you want, change as you want).
 the navigation,instead to be oriented towards the web is trapped to redirect on the disc and used    with normal vfp commands.
 this menu can be customized and the buttons can be added or removed-the menu items  can added   or removed.
        The style of buttons (colors) can be changed at runtime.
        the title bar can cut/retored.
        the fullscreen is possible with maximize+cut titlebar

        Author Yousfi Benameur  El Bayadh Algeria
                    Tuesday 10 februrary 2015
                ENDTEXT
                Messagebox(m.myvar,"summary help",0+32+4096)


            Case Thisform.yurl==[yvfp:/35]
                Thisform.Release

            Otherwise

                Thisform.AddObject("command1" ,'commandbutton')
                With Thisform.command1
                    .Picture=Home()+"graphics\bitmaps\assorted\beany.bmp"
                    .PicturePosition=7
                    .SpecialEffect=0
                    .Width=320
                    .Height=200
                    .Caption="add some codes and some actions with "+Thisform.yurl +" in form.yactions method!"
                    .WordWrap=.T.
                    .FontSize=20
                    .ForeColor=Rgb(255*Rand(),255*Rand(),255*Rand())
                    .FontBold=.T.
                    .MousePointer=15
                    Local gnUpper,gnLower
                    gnUpper=Thisform.Width-Thisform.olecontrol1.Width
                    gnLower=Thisform.olecontrol1.Width+1
                    .Left=Int((gnUpper - gnLower + 1) * Rand( ) + gnLower)
                    gnUpper=Thisform.Height-.Height
                    gnLower=1
                    .Top=Int((gnUpper - gnLower + 1) * Rand( ) + gnLower)
                    .AutoSize=.T.
                    .Visible=.T.
                    .SetFocus
                    .Click()
                Endwith

        Endcase
    Endproc

    Procedure yhtmlcolor
        *convert RGB colot to HTML color
        Lparameters xcol
        If xcol=-1
            Return .F.
        Endi

        xhtml_color=Chrtran("123456","563412",Right(Trans(m.xcol  ,"@0"),6))
        Return "#"+xhtml_color
    Endproc

    Procedure yinit
        Lparameters ycolor

        Local m.myvar
        TEXT to m.myvar textmerge noshow
        <style>
        #menu-accordeon {
          padding:0;
          margin:0;
          list-style:none;
          text-align: center;
          width: 180px;
        }
        #menu-accordeon ul {
          padding:0;
          margin:0;
          list-style:none;
          text-align: center;
        }
        #menu-accordeon li {
           background-color:#729EBF;
           background-image:-webkit-linear-gradient(top, <<m.ycolor>> 0%, #333A40 100%);
           background-image: linear-gradient(to bottom,<<m.ycolor>> 0%, #333A40 100%);
           border-radius: 6px;
           margin-bottom:2px;
           box-shadow: 3px 3px 3px #999;
           border:solid 1px #333A40
        }
        #menu-accordeon li li {
           max-height:0;
           overflow: hidden;
           transition: all .5s;
           border-radius:0;
           background: #444;
           box-shadow: none;
           border:none;
           margin:0
        }
        #menu-accordeon a {
          display:block;
          text-decoration: none;
          color: #fff;
          padding: 8px 0;
          font-family: verdana;
          font-size:1em
        }
        #menu-accordeon ul li a, #menu-accordeon li:hover li a {
          font-size:0.8em
        }
        #menu-accordeon li:hover {
           background: #729EBF
        }
        #menu-accordeon li li:hover {
           background: #999;
        }
        #menu-accordeon ul li:last-child {
           border-radius: 0 0 6px 6px;
           border:none;
        }
        #menu-accordeon li:hover li {
          max-height: 15em;
        }
        </style>

        <body bgcolor=gold oncontextmenu="return false;" scroll="no" >

        <ul id="menu-accordeon">
           <li><a href="#">Run applications</a>
              <ul>
                 <li><a href="yvfp:/1">Run a grid sample</a></li>
                 <li><a href="yvfp:/2">Editbox</a></li>
                 <li><a href="yvfp:/3">get an image</a></li>
                 <li><a href="yvfp:/4">Calendar Olecontrol</a></li>
              </ul>
           </li>
            <li><a href="#">web links</a>
              <ul>
                 <li><a href="yvfp:/5">Datepicker olecontrol</a></li>
                 <li><a href="yvfp:/6">Foxite</a></li>
                 <li><a href="yvfp:/7">My Blog</a></li>
                 <li><a href="yvfp:/8">Google</a></li>
              </ul>
           </li>
           <li><a href="#">Common Applications</a>
              <ul>
                 <li><a href="yvfp:/9">Run explorer</a></li>
                 <li><a href="yvfp:/10">Run mspaint</a></li>
                 <li><a href="yvfp:/11">Run firefox</a></li>
                 <li><a href="yvfp:/12">Run acrobat</a></li>
              </ul>
           </li>
           <li><a href="#">Your bar menu here</a>
              <ul>
                 <li><a href="yvfp:/13">SnippingTool</a></li>
                 <li><a href="yvfp:/14">Lien sous menu 3</a></li>
                 <li><a href="yvfp:/15">Lien sous menu 3</a></li>
                 <li><a href="yvfp:/16">Lien sous menu 3</a></li>
              </ul>
           </li>

           <li><a href="#">Searches</a>
              <ul>
                 <li><a href="yvfp:/17">Lien sous menu 3</a></li>
                 <li><a href="yvfp:/18">Lien sous menu 3</a></li>
                 <li><a href="yvfp:/19">Lien sous menu 3</a></li>
                 <li><a href="yvfp:/20">Lien sous menu 3</a></li>
              </ul>
           </li>
           <li><a href="#">Classes</a>
              <ul>
                 <li><a href="yvfp:/21">Lien sous menu 4</a></li>
                 <li><a href="yvfp:/22">Lien sous menu 4</a></li>
                 <li><a href="yvfp:/23">Lien sous menu 4</a></li>
                 <li><a href="yvfp:/24">Lien sous menu 4</a></li>
              </ul>
           </li>
           <li><a href="#">prgs and forms</a>
              <ul>
                 <li><a href="yvfp:/25">Lien sous menu 5</a></li>
                 <li><a href="yvfp:/26">Lien sous menu 5</a></li>
                 <li><a href="yvfp:/27">Lien sous menu 5</a></li>
                 <li><a href="yvfp:/28">Lien sous menu 5</a></li>
              </ul>
           </li>
           <li><a href="#">Reports</a>
              <ul>
                 <li><a href="yvfp:/25">Lien sous menu 6</a></li>
                 <li><a href="yvfp:/26">Lien sous menu 6</a></li>
                 <li><a href="yvfp:/27">Lien sous menu 6</a></li>
                 <li><a href="yvfp:/28">Lien sous menu 6</a></li>
              </ul>
           </li>
           <li><a href="#">Misc</a>
              <ul>
                 <li><a href="yvfp:/29">lien sous menu 7</a></li>
                 <li><a href="yvfp:/30">Lien sous menu 7</a></li>
                 <li><a href="yvfp:/31">Lien sous menu 7</a></li>
                 <li><a href="yvfp:/32">Lien sous menu 7</a></li>
              </ul>
           </li>

           <li><a href="#">Others</a>
              <ul>
                 <li><a href="yvfp:/33">Form Titlebar on/off</a></li>
                 <li><a href="yvfp:/34">Change menu style</a></li>
                 <li><a href="yvfp:/341">Summary help</a></li>
              </ul>
           </li>

            <li><a href="#">Exiting...</a>
              <ul>
                 <li><a href="yvfp:/35">Close form</a></li>
              </ul>
           </li>


        </ul>
        </body>
        ENDTEXT
        Strtofile(m.myvar,m.yrep+"yindex1.html")

        Thisform.olecontrol1.Navigate(m.yrep+"yindex1.html")
    Endproc


    Procedure Load
        Declare Integer Sleep In kernel32 Integer

        Declare Integer ShellExecute In SHELL32.Dll Integer nWinHandle,;
            STRING cOperation,;
            STRING cFileName,;
            STRING cParameters,;
            STRING cDirectory,;
            INTEGER nShowWindow
    Endproc

    Procedure KeyPress
        Lparameters nKeyCode, nShiftAltCtrl
        If nKeyCode=27
            Thisform.Release
        Endi
        If nKeyCode=96
            Thisform.olecontrol1.Visible=.T.
        Endi
    Endproc


    Procedure Resize
        With This.olecontrol1
            .Left=-5
            .Height=.Parent.Height-1
            .Top=0
            .Width=200
        Endwith
    Endproc

    Procedure Init
        Close Data All
        Set Safe Off

        Publi  m.yrep
        m.yrep=Addbs(Justpath(Sys(16,1)))

        With Thisform.olecontrol2
            .monthbackcolor=65280
            .titlebackcolor=65535
            .titleforecolor=255
        Endwith

        With Thisform.olecontrol3
            .calendarBackColor=16711680
        Endwith

        Local m.ycolor
        If Empty(Thisform.ycolorstyle) Or Thisform.ycolorstyle=-1
            Thisform.ycolorstyle=Rgb(0,230,0)
        Endi
        m.ycolor=Thisform.yhtmlcolor(Thisform.ycolorstyle)
        Thisform.yinit(m.ycolor)
    Endproc


    Procedure Destroy
        Clea Events
    Endproc

    Procedure olecontrol1.BeforeNavigate2
        *** Événement de contrôle ActiveX  ***
        Lparameters pdisp, url, Flags, targetframename, postdata, headers, Cancel
        Nodefault
        Thisform.yurl=url

        If Lower(Substr(url,1,4))="yvfp"
            Thisform.yactions()
            Cancel=.T. &&this prevent the browser to do the default action .
            Return .F.
        Endi
    Endproc

    Procedure olecontrol1.Init
        With This
            .Left=-5
            .Height=.Parent.Height-1
            .Top=0    &&-55
            .Width=200
        Endwith
    Endproc

    Procedure olecontrol3.Init
        With This.Font
            .Size=12
            .bold=.T.
        Endwith
    Endproc

    Procedure olecontrol4.Init
        With This
            .Left=Thisform.olecontrol1.Width+1
            .Top=0
            .Width=Thisform.Width-Thisform.olecontrol1.Width-2
            .Height=Thisform.olecontrol1.Height
        Endwith
    Endproc

Enddefine
*

*End code

 

The beautiful fox with black eyes is a fennec and lives in  algerian sahara .its large ears allow him a very fine hearing.
The beautiful fox with black eyes is a fennec and lives in  algerian sahara .its large ears allow him a very fine hearing.
The beautiful fox with black eyes is a fennec and lives in  algerian sahara .its large ears allow him a very fine hearing.
The beautiful fox with black eyes is a fennec and lives in  algerian sahara .its large ears allow him a very fine hearing.
The beautiful fox with black eyes is a fennec and lives in  algerian sahara .its large ears allow him a very fine hearing.

The beautiful fox with black eyes is a fennec and lives in algerian sahara .its large ears allow him a very fine hearing.

Published on Visual foxpro, menu, css

To be informed of the latest articles, subscribe:
Comment on this post
J
gracias.
Reply
J
Muchas gracias.
Reply
H
hello mr yousfi<br /> with win7+ IE 11 the CSS web menu on vfp form works well<br /> but with win XP + IE 8 it dosn't even thouh i have as mentioned modified the register key with the correct value.<br /> needs helps<br /> thinks.
Reply
Y
Execute as administrator regedit.exe<br /> search for this key<br /> HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION<br /> if dont exists create it manually (can delete it after if you want)<br /> add a new value (rightclick in right pannel of regedit)<br /> you fire a dialog box and then write:vfp9.exe as dword32bits (mandatory)<br /> in the value write this (for IE8 as MSDn documentation tells): 0x1F140 (you get 8000 at the right side of the value)<br /> and thats all.<br /> I tried only on my win8.1 and IE11.I dont tested on other IE versions.Good luck!
H
Bonjour mr yousfi<br /> j'ai essayé ce programme, mais l'effet accordéon n'est pas appliqué, aussi le menu [change menu style] ne répond pas.
Reply
Y
Il faut modifier ton registre conformément à cet article pour permettre l'émulation du IE browser (regarde la version Internet explorer que tus as et applique la modification correspondante à la clé indiquée).Autrement cela ne marche pas..<br /> http://yousfi.over-blog.com/2015/01/who-said-that-vfp-ie-browser-died.html
V
Awesome! I am impressed.
Reply