>>>>>>>(Actually just this week I attempted to create one using HTML5 and material design but came empty, because the browser in VFP (Shell.Explorer) cannot handle it :( )
>>>>>
>>>>>Cetin, to show thanks for interesting posts about upper BETWEEN limit in VFP:
>>>>>
>>>>>While the browser control appears stuck in IE7 mode, you can provoke more recent versions with a HTTP tag in the header. E.g.
>>>>>
>>>>>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
>>>>>
>>>>>Or to always use the latest:
>>>>>
>>>>>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
>>>>>
>>>>>Make this the first tag so it's processed before anything else.
>>>>
>>>>John,
>>>>Thanks for this valuable information again. Since then, although I need to find workarounds for some and may still be using harder ways than it might be, I can now use Google Material Design based HTML5 UI in my VFP forms :)
>>>>Thank you.
>>>
>>>Is it possible to change the VFP9 native UI with HTML5 UI just lie Google's Material Design? Where can I learn that?
>>>
>>>TIA
>>
>>There are tons of material < g > on the internet:
>>
>>
https://material.io/develop/>>
https://materializecss.com>>
https://getmdl.io>>...
>
>Thanks, but after visiting those links, it looks they only are oriented to web pages. No example on using them on VFP9 appliactions.
So you are saying you know that part, then all you need is to host the HTML in a web browser activex within VFP. Just as a basic example:
Local lcHTML
lcHTML = Forcepath('Sample.html', Sys(2023))
If !Directory(ForcePath('images',Sys(2023)))
Md (ForcePath('images',Sys(2023)))
endif
If !File(m.lcHTML)
Strtofile( GetSampleHTML(), m.lcHTML)
Endif
Public o
o = Createobject('MyHTMLViewer', m.lcHTML)
o.Show
Define Class MyHTMLViewer As Form
Caption = "HTML sample"
Height = 768
Width = 1024
Add Object htmlviewer As OleControl With ;
anchor = 15, Left=216, Top=43, Height=685, Width = 793, OleClass = 'Shell.Explorer'
Procedure Init
Lparameters tcHTML
With Thisform.htmlviewer
.Navigate2(m.tcHTML)
Endwith
Endproc
Procedure htmlviewer.Refresh
Nodefault
Endproc
Procedure htmlviewer.BeforeNavigate2
Lparameters pdisp, url, Flags, targetframename, postdata, headers, Cancel
If Atc('#',m.url) > 0
Local lcVals, lcCurrentValue
lcVals = m.url + Chr(13)+Chr(10)
If This.Object.Document.Forms.Length > 0
For Each oFrm In This.Object.Document.Forms
lcVals = lcVals + oFrm.Name + Chr(13)
If oFrm.elements.Length > 0
For Each oElem In oFrm.elements
If !Empty(oElem.Name)
If oElem.Type = "select-multiple"
lcList=''
For ix=0 To oElem.Length-1
If oElem.Item(ix).Selected
lcList = lcList + Iif(Empty(lcList),'',',')+oElem.Item(ix).Value
Endif
Endfor
m.lcCurrentValue = m.lcList
Else
m.lcCurrentValue = oElem.Value
Endif
lcVals = lcVals + Textmerge("<< oElem.Name >>: << m.lcCurrentValue >> << Chr(13) + Chr(10) >>")
oElem = .Null.
Endif
Endfor
Endif
oFrm = .Null.
Endfor
Endif
Cancel = .T.
Messagebox(m.lcVals)
Endif
Endproc
Enddefine
Procedure GetSampleHTML
Local lcCarouselImages, lcMyHtml
Set Textmerge To Memvar m.lcCarouselImages On Noshow
For ix=1 To Adir(laImages, _samples+'data\graphics\*.*')
Copy File (_samples+'data\graphics\'+laImages[m.ix,1]) to ForcePath(laImages[m.ix,1],Addbs(Sys(2023))+'images')
\<a class="carousel-item" href="#<< chrtran(JustFname(laImages[m.ix,1]),'.','_') >>">
\\<img src="images/<< JustFname(laImages[m.ix,1]) >>"/></a>
Endfor
Set Textmerge To
Set Textmerge Off
TEXT to m.lcMyHtml textmerge noshow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Materialize Sandbox</title>
</head>
<body>
<div>
<div class="row">
<form action="" method="POST" name="MyForm">
<div class="col s6">
<input type="text" class="datepicker" placeholder="Start date" name="fromDate">
</div>
<div class="col s6">
<input type="text" class="timepicker" placeholder="Time" name="fromTime">
</div>
<div class="col s6">
<input type="text" class="datepicker" placeholder="End date" name="toDate">
</div>
<div class="col s6">
<input type="text" class="timepicker" placeholder="Time" name="toTime">
</div>
<a href="#runItem"
class="btn-floating btn-small green darken-1 waves-effect waves-light tooltipped"
data-position="top" data-tooltip="Run report">
<i class="material-icons">play_arrow</i>
</a>
</form>
<div class="carousel">
<< m.lcCarouselImages >>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
<script>
$(document).ready(function () {
$('.tooltipped').tooltip();
$('.carousel').carousel();
$('.datepicker').datepicker({format: 'mm/dd/yyyy'});
$('.timepicker').timepicker({twelveHour: false});
});
</script>
</html>
ENDTEXT
Return m.lcMyHtml
Endproc
