A sidebar accordion web menu with a desktop vfp application
this code builds a main form as desktop application stylised with web ingredients.
it uses transparency for creating a main text and a big changeable image as background.web can use the usefull rgba(red,gree,blue,opacity(0-1)) to set any color with transparency (as gdiplus or gdiplusx does!)
a menu grouped in a sidebar web object have many items.it works as a sidebar and as an accordion menu.
the form is a top level one and resizable (borderstyle=3).titlebar can be on/off.
each button mousedown is binded to a personal method as demo only.
this demonstrate how with vfp can create a desktop with modern look.
it can be used as a basic template to build more complex application.can customize all images and methods.
images are from my web site.can use local disk images.
See at the form left the element transparency applied on sidebar.
here no hwnd recquired and it renders the element concerned only (not all page)!
issue ESC on visible form area or click button exit to cancel application.
can make these operations from vfp here:
-change background color of sidebar
-change background color of the main div contents.
-change the background picture
-run a modal form and some modern UI apps as news..
-change form color
-minimize,maimize/restore/exit app
-make form alwaysontop on/off (if problem with taskbar)
-expand/collapse the sidebar from vfp.expand collapse accordion headers.
-run summary help from web to vfp or from web javascript only.
the code (+config.fpw) can build a project and compile to an exe desktop app.
internet must be connected to access to web images (otherwise make local images instead).
Warning: if you project to run here forms (because the olecontrol is alwaysonTop) ,must have modal forms mandatory with 2 properies:
ShowWindow = 1 and Desktop=. T.
Note: this code is rendered/tested on 32 pouces screen.
[Post 243]
Click on code to select [then copy] -click outside to deselect
*1* created on friday 11 of november2017
*rendered & tested on 32 pouces screen.
set date french && custom with your language
Publi oform
oform=Newobject("ysidebar_bootstrap")
oform.Show
Read Events
Retu
*
Define Class ysidebar_bootstrap As Form
Top = 0
Left = 0
Height = 671
Width = 1381
ShowWindow = 2
Caption = "Sidebar accordion menu on a vfp top level form"
WindowState = 2
ycl = 1
main_color = .F.
Name = "Form1"
Add Object olecontrol1 As OleControl With ;
oleclass="shell.explorer.2", ;
Top = 34, ;
Left = 0, ;
Height = 600, ;
Width = 1380, ;
Anchor = 15, ;
Name = "Olecontrol1"
Add Object image1 As Image With ;
Anchor = 768, ;
BackStyle = 0, ;
Height = 25, ;
Left = 12, ;
MousePointer = 15, ;
Top = 2, ;
Width = 25, ;
ToolTipText = "Expand/collapse menu", ;
Name = "Image1"
Add Object command1 As CommandButton With ;
AutoSize = .T., ;
Top = -1, ;
Left = 63, ;
Height = 27, ;
Width = 137, ;
FontBold = .T., ;
Anchor = 768, ;
Caption = "Change background", ;
MousePointer = 15, ;
BackColor = Rgb(128,0,64), ;
Name = "Command1"
Add Object command2 As CommandButton With ;
Top = 0, ;
Left = 219, ;
Height = 27, ;
Width = 103, ;
FontBold = .T., ;
Anchor = 0, ;
Caption = "MainBackcolor", ;
MousePointer = 15, ;
SpecialEffect = 2, ;
BackColor = Rgb(0,255,0), ;
Name = "Command2"
Add Object timer1 As Timer With ;
Top = 0, ;
Left = 288, ;
Height = 23, ;
Width = 23, ;
Enabled = .F., ;
Interval = 2000, ;
Name = "Timer1"
Add Object ylab As Label With ;
AutoSize = .T., ;
FontBold = .T., ;
FontSize = 14, ;
BackStyle = 0, ;
Caption = "", ;
Height = 25, ;
Left = 1145, ;
Top = 2, ;
Width = 2, ;
ForeColor = Rgb(255,0,0), ;
Name = "yLab"
Add Object yclock1 as yclock With ;
left=1145+200,;
top=3,;
name="yclock1"
Add Object combo1 As ComboBox With ;
FontBold = .T., ;
FontSize = 9, ;
Height = 24, ;
Left = 327, ;
SpecialEffect = 2, ;
ToolTipText = "Interact with accordion", ;
Top = 0, ;
Width = 73, ;
ForeColor = Rgb(128,0,64), ;
BorderStyle = 0, ;
Themes = .F., ;
Name = "Combo1"
Add Object timer2 As Timer With ;
Top = 0, ;
Left = 420, ;
Height = 23, ;
Width = 23, ;
Enabled = .F., ;
Interval = 2000, ;
Name = "Timer2"
Add Object shape1 As Shape With ;
Top = 7, ;
Left = 45, ;
Height = 14, ;
Width = 14, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Change sidebar backcolor", ;
SpecialEffect = 0, ;
BackColor = Rgb(255,128,0), ;
Name = "Shape1"
Procedure ybuild
Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codeply preview</title>
<base target="_self">
<meta name="description" content="This is a collapsible sidebar left that moves to the top as a dropdown on smaller screens." />
<meta name="google" value="notranslate">
<link rel="shortcut icon" href="/images/cp_ico.png">
<!--stylesheets / link tags loaded here-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
width :100%;
height:<<sysmetric(2)>>px; //100%;
overflow: hidden;
font-family: "Lato", sans-serif;
background:rgb(0,0,0);
background: url('http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg') ;
background-size: cover;
background-position: center;
}
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: rgba(46,53,61,0.9); //rgba(46,53,61,0.9); // #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 98%;
color: #e1ffff;
border: solid 4px black ;
overflow-x: hidden;
overflow-y: hidden; //hide scrollbar here
}
.nav-side-menu .brand {
background-color:#23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
color:lime;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } }*/
}
.nav-side-menu ul:not(collapsed) .arrow:before,
.nav-side-menu li:not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
#main {
width: calc(100% - 300px);
float: right;
}
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body oncontextmenu="return false;">
<div class="nav-side-menu" id="yb">
<div class="brand">My sidebar accordion menu</div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#"> <i class="fa fa-dashboard fa-lg"></i> Dashboard </a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active" id="ytog1"> <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a> </li>
<ul class="sub-menu collapse" id="products">
<li class="active"><a href="#">CSS3 Animation</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed" id="ytog2"> <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a> </li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed" id="ytog3"> <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a> </li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#"> <i class="fa fa-user fa-lg" id="ytog4"></i> Profile </a>
</li>
<li>
<a href="#"> <i class="fa fa-users fa-lg" id="ytog5"></i> Users </a>
</li>
<li>
<a href="yvfp://24" > <i class="fa fa-star fa-lg" id="ytog6"></i>Summary Help </a>
</li>
<li>
<a href="#" onclick="zhelp();"> <i class="fa fa-star fa-lg" id="ytog7"></i>Summary Help from Javascript</a>
</li>
</ul>
</div>
</div>
<div class="container" id="main" style="padding:40px 40px 40px 40px;" >
<div class="row" id="ytranspa" style="padding: 60px 10px 25px 25px; background:rgba(45,45,45,0.8);color:white;width:90%; background:rgba(51,0,26,.8);">
<div class="col-md-12" >
<a href="http://www.yousfi.over-blog.com" target="_blank"><img src="https://cdn3.iconfinder.com/data/icons/macosxstyle/macosxstyle_png/128/Earth.png" title="My blog" style="width:128px; height:128px;float:right;"></a>
<center><h2 style="color:white;">My main title here</h2> </center>
<h4 style="color:maroon;">This is suppose to be in the main content 1</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, <br>
euismod varius est. Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla.
Donec arcu leo, tempus adipiscing volutpat id, congue in purus. <a href="http://www.yousfi.over-blog.com" target="_blank">this VFP codes from my Blog</a> <br>
Pellentesque scelerisque mattis nibh vel semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim
elit vulputate nisl, a euismod diam metus eu enim. <br>
Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis. Nam neque tellus, tristique in est vel, <br>
sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus odio vitae, posuere volutpat magna. Nam pulvinar lacus in <br>
sapien feugiat, sit amet vestibulum enim eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla. <br>
<h4 style="color:lime;">This is suppose to be in the main content 2</h4>
Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor, est erat tempus neque,
pellentesque venenatis eros lorem vel quam. <br>
Nulla luctus malesuada porttitor. Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. <br>
Quisque facilisis risus in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor <br>
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed venenatis sodales, purus <br>
nibh ullamcorper quam, sit amet tristique justo velit molestie lorem. <br>
Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec tincidunt eu, lobortis vitae erat. <br>
Nullam ultricies fringilla ultricies. Sed euismod nibh quis tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, <br>
auctor fringilla elit. Donec convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus id <br>
suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. <br>
Pellentesque consequat libero id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor. <br>
Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque quam, nec lacinia libero. <br>
</div>
</div>
</div>
<script>
// sandbox disable popups
if (window.self !== window.top && window.name != "view1") {;
window.alert = function() { /*disable alert*/ };
window.confirm = function() { /*disable confirm*/ };
window.prompt = function() { /*disable prompt*/ };
window.open = function() { /*disable open*/ };
}
// prevent href=# click jump
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for (var i = 0; i < links.length; i++) {
if (links[i].href.indexOf('#') != -1) {
links[i].addEventListener("click", function(e) {
console.debug("prevent href=# click");
if (this.hash) {
if (this.hash == "#") {
e.preventDefault();
return false;
} else {
/*
var el = document.getElementById(this.hash.replace(/#/, ""));
if (el) {
el.scrollIntoView(true);
}
*/
}
}
return false;
})
}
}
}, false);
</script>
<!--scripts loaded here-->
<script>
function zhelp(){
var x="Summary help from javascript "+"\n" ;
x=x+"this code builds a main form as desktop application stylised with web ingredients."+ "\n" ;
x=x+"it uses transparency for creating a main text and a big image as background (2048x365)" + "\n" ;
x=x+"2 images are used as titles and link to my website" +"\n" ;
x=x+"a menu grouped in a commandgroup object have 10 items." +"\n" ;
x=x+"the form is a top level one and resizable (borderstyle=3).titlebar can be on/off."+ "\n" ;
x=x+"each button mousedown is binded to a personal method as demo only." +"\n" ;
x=x+"this demonstrate how with vfp can create a desktop with modern look." +"\n" ;
x=x+"it can be used as a basic template to build more complex application.can customize all images."+"\n" ;
x=x+"3 images are on my web site.can use local disk images." +"\n" ;
x=x+"See at the form left the element div transparency applied.here no hwnd recquired and it renders the element concerned only (not all page)!" +"\n";
x=x+"issue ESC on visible form area or click button exit to cancel application."+ "\n" ;
x=x+"the code (+config.fpw) can build a project and compile to an exe desktop app."+ "\n" ;
x=x+"internet must be connected to access to web images (otherwise make local images instead)." +"\n" ;
x=x+"Warning: if you project to run here forms (because the olecontrol is alwaysonTop) ,must have modal forms mandatory with 2 properies:"+ "\n" ;
x=x+"ShowWindow = 1 and Desktop=. T." +"\n" ;
alert(x);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
</script>
</body>
</html>
ENDTEXT
With Thisform.olecontrol1
.Navigate("about:blank")
Inke(0.5)
With .Document
.Open()
.Write(m.myvar)
.Close()
Endwith
Endwith
Thisform.timer2.Enabled=.T.
Endproc
Procedure yhelp
Local m.myvar
TEXT to m.myvar pretext 7 noshow
this code builds a main form as desktop application stylised with web ingredients.
it uses transparency for creating a main text and a big changeable image as background.
a menu grouped in a sidebar web object have many items.it works as a sidebar and as an accordion menu.
the form is a top level one and resizable (borderstyle=3).titlebar can be on/off.
each button mousedown is binded to a personal method as demo only.
this demonstrate how with vfp can create a desktop with modern look.
it can be used as a basic template to build more complex application.can customize all images and methods.
images are from my web site.can use local disk images.
See at the form left the element transparency applied on sidebar.
here no hwnd recquired and it renders the element concerned only (not all page)!
issue ESC on visible form area or click button exit to cancel application.
can make these operations from vfp here:
-change background color of sidebar
-change background color of the main div contents.
-change the background picture
-run a modal form and some modern UI apps as news..
-change form color
-minimize,maimize/restore/exit app
-make form alwaysontop on/off (if problem with taskbar)
-expand/collapse the sidebar from vfp.expand collapse accordion headers.
-run summary help from web to vfp or from web javascript only.
the code (+config.fpw) can build a project and compile to an exe desktop app.
internet must be connected to access to web images (otherwise make local images instead).
Warning: if you project to run here forms (because the olecontrol is alwaysonTop) ,must have modal forms mandatory with 2 properies:
ShowWindow = 1 and Desktop=. T.
Note: this code is rendered/tested on 32 pouces screen.
ENDTEXT
Local oshell
oshell = Createobject('WScript.Shell')
oshell.Popup(m.myvar,0, 'Summary help launched from web to vfp', 0+32+4096) &&4,16,48,64...
oshell=Null
Endproc
Procedure MouseMove
Lparameters nButton, nShift, nXCoord, nYCoord
Thisform.command1.SetFocus
Endproc
Procedure Init
*Original source sidebar accordion menu from : https://medium.com/wdstack/bootstrap-sidebar-examples-e363021395ff
_Screen.WindowState=1
*set proc to ycnt_imgs_bootstrap addi
With Thisform
.ShowTips=.F. &&(label ylab replace this)
.AddObject ("ycnt_imgs1","ycnt_imgs")
With .ycnt_imgs1
.Left=(.Parent.Width-.Width)/2 +80
.Top=-3
.Visible=.T.
Endwith
Endwith
*release procedure ycnt_imgs_bootstrap
Thisform.ycl=1
Thisform.ybuild()
Endproc
Procedure Load
Declare Integer Sleep In kernel32 Integer
Endproc
Procedure Destroy
Clea Events
Endproc
Procedure olecontrol1.BeforeNavigate2
*** Événement de contrôle ActiveX ***
Lparameters pdisp, url, Flags, targetframename, postdata, headers, Cancel
url=Allt(url)
Do Case
Case url="yvfp://24"
Thisform.yhelp()
Endcase
Cancel=.T.
Return .F.
Endproc
Procedure olecontrol1.Init
This.silent=.T.
Endproc
Procedure image1.MouseLeave
Lparameters nButton, nShift, nXCoord, nYCoord
Thisform.ylab.Caption=""
Endproc
Procedure image1.MouseEnter
Lparameters nButton, nShift, nXCoord, nYCoord
Thisform.ylab.Caption=This.ToolTipText
Endproc
Procedure image1.Click
With Thisform
.ycl=Iif(.ycl=1,0,1)
Do Case
Case .ycl=0
.olecontrol1.Document.getElementById("yb").Style.Width = "0px"
.olecontrol1.Document.getElementById("main").Style.Float="left"
.olecontrol1.Document.getElementById("main").Style.Width="100%"
Case .ycl=1
.olecontrol1.Document.getElementById("yb").Style.Width = "300px"
.olecontrol1.Document.getElementById("main").Style.Float="right"
.olecontrol1.Document.getElementById("main").Style.Width="calc(100% - 300px)"
Endcase
Endwith
Endproc
Procedure image1.Init
Local m.myvar
TEXT to m.myvar noshow
iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAACkSURBVEhLY/z48eN/BhoCPj4+BiYom6YA4pMPpxmWzj/C8AoqSDEQs2FIjDZlEAAyQT5hAFny8da8/94MDKBgow72nvf/FshcIAYBiE9ebmEoSJrOcBuogipANZNh3gQfBnEgE+ST4RPxo5aQBOhiCV3yCV18AsknPx4yXDr9iOEjVJBiwC/HYKonz8ABZI5mRpLB8LGELqlruGVGGgI65RMGBgDN/K+s1PzsiAAAAABJRU5ErkJggg==
ENDTEXT
This.PictureVal=Strconv(m.myvar,14)
Endproc
Procedure command1.Click
Local m.myvar
TEXT to m.myvar noshow
http://www.mulierchile.com/dubai-city-images/dubai-city-images-012.jpg
http://dubaicitytours.net/wp-content/uploads/2013/12/Dubai-City-Tour.jpg
http://www.almariahtravel.com/inc_img/57421394625421.jpg
http://www.zagygroup.com/web-images/cheap-hotel-dubai-ZAGY-Group-Internet-Marketing.png
https://www.tmb.ie/wp/wp-content/uploads/2017/01/dubai-travel-tips2.jpg
https://www.dubaieveningsafari.com/files/2016/08/Burj-Khalifa.jpg
http://glamazonsblog.com/wp-content/uploads/dubai-glamazons-blog.jpg
http://www.almariahtravel.com/inc_img/57421394625505.jpg
http://www.ahstatic.com/photos/6146_hodesti_00_p_1024x768.jpg
https://www.traditours.com/sliders/jordanie_croisiere/data1/images/04dubai.jpg
https://www.oneandonlyresorts.com/fr/-/media/oneandonly/the-palm/home-page/1440x900/the_palm_dubai_pool_beach_1440x900.jpg?v2
https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/dubai/06-route-detail/View-Of-Dubai-Marina-Big-Bus-Tours-01.17.jpg
ENDTEXT
Local N,m.x
N=Int((Memlines(m.myvar))*Rand( ) + 1)
m.x=["url(']+Allt(Mline(m.myvar,N))+[')"]
With Thisform.olecontrol1.Document
.body.Style.backgroundImage=Eval(m.x)
.body.Style.backgroundsize="cover"
.body.Style.backgroundposition="center"
Endwith
Endproc
Procedure command2.Click
Local m.xcolor
m.xcolor=Getcolor()
If m.xcolor=-1
Return .F.
Endi
Local RGBChr,xred,xgreen,xblue
m.RGBChr=Left(BinToC(m.xcolor,'R'),3)
xred=Asc(Substr(m.RGBChr,1,1)) && RED
xgreen=Asc(Substr(m.RGBChr,2,1)) && GREEN
xblue=Asc(Substr(m.RGBChr,3,1)) && BLUE
*thisform.Main_color="rgba("+trans(m.xred)+','+trans(m.xgreen)+","+trans(m.xblue)+",.7)"
*thisform.ybuild()
*thisform.timer1.enabled=.t.
****no need to rebuild***
Local m.x
m.x='"'+'rgba('+Trans(m.xred)+','+Trans(m.xgreen)+","+Trans(m.xblue)+',.7)"'
*messagebox(m.x,0+32+4096)
Thisform.olecontrol1.Document.getElementById("ytranspa").Style.background=Eval(m.x)
Endproc
Procedure timer1.Timer
Thisform.olecontrol1.Document.getElementById("yb").Style.Width = "250px"
This.Enabled=.F.
Endproc
Procedure combo1.MouseLeave
Lparameters nButton, nShift, nXCoord, nYCoord
Thisform.ylab.Caption=""
Endproc
Procedure combo1.MouseEnter
Lparameters nButton, nShift, nXCoord, nYCoord
Thisform.ylab.Caption=This.ToolTipText
Endproc
Procedure combo1.Init
With This
.AddItem("1.UI Elements")
.AddItem("2.Services")
.AddItem("3.New")
.AddItem("\4.Profile")
.AddItem("\5.Users")
.AddItem("\6.VFP Summary help")
.Additem("7.Javascript Help ")
.ListIndex=1
.Style=2
.Value=1
Endwith
Endproc
Procedure combo1.Click
Thisform.olecontrol1.Document.getElementById("ytog"+Trans(This.Value)).Click(.T.)
Endproc
Procedure timer2.Timer
*timer execute this action 1 once (its a better solution here)
*adapt timer2 interval function internet speed (here 2sec).
With Thisform.olecontrol1.Document
Try
.getElementById("ytog1").Click(.T.)
.getElementById("ytog2").Click(.T.)
Catch
Endtry
Endwith
This.Enabled=.F.
Endproc
Procedure shape1.MouseLeave
Lparameters nButton, nShift, nXCoord, nYCoord
Thisform.ylab.Caption=""
Endproc
Procedure shape1.MouseEnter
Lparameters nButton, nShift, nXCoord, nYCoord
Thisform.ylab.Caption=This.ToolTipText
Endproc
Procedure shape1.Click
Local m.xcolor
m.xcolor=Getcolor()
If m.xcolor=-1
Return .F.
Endi
Local RGBChr,xred,xgreen,xblue
m.RGBChr=Left(BinToC(m.xcolor,'R'),3)
xred=Asc(Substr(m.RGBChr,1,1)) && RED
xgreen=Asc(Substr(m.RGBChr,2,1)) && GREEN
xblue=Asc(Substr(m.RGBChr,3,1)) && BLUE
Local m.x
m.x='"'+'rgba('+Trans(m.xred)+','+Trans(m.xgreen)+","+Trans(m.xblue)+',.7)"'
*messagebox(m.x,0+32+4096)
Thisform.olecontrol1.Document.getElementById("yb").Style.background=Eval(m.x)
Endproc
Enddefine
*
*-- EndDefine: ysidebar_bootstrap
Define Class yCnt_imgs As Container
Top = 144
Left = 240
Width = 720
Height = 39
BackStyle = 0
BorderWidth = 2
BackColor = Rgb(0,255,0)
BorderColor = Rgb(0,0,0)
Name = "yCnt_Imgs"
Add Object image1 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 4, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
tooltiptext="Run modal form",;
Name = "Image1"
Add Object image2 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 40, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
tooltiptext="News", ;
Name = "Image2"
Add Object image3 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 76, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image3"
Add Object image4 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 111, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image4"
Add Object image5 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 147, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image5"
Add Object image6 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 184, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image6"
Add Object image7 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 220, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image7"
Add Object image8 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 256, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image8"
Add Object image9 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 291, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image9"
Add Object image10 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 327, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image10"
Add Object image11 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 362, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image11"
Add Object image12 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 398, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image12"
Add Object image13 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 434, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image13"
Add Object image14 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 471, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
Name = "Image14"
Add Object image15 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 507, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
tooltiptext="AlwaysOnTop on/off", ;
Name = "Image15"
Add Object image16 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 543, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
tooltiptext="Change backcolor", ;
Name = "Image16"
Add Object image17 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 578, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
tooltiptext="Minimize", ;
Name = "Image17"
Add Object image18 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 614, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
tooltiptext="Maximize/restore", ;
Name = "Image18"
Add Object image19 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 649, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
tooltiptext="Form titlebar on/off",;
Name = "Image19"
Add Object image20 As Image With ;
Stretch = 2, ;
Height = 32, ;
Left = 685, ;
MousePointer = 15, ;
Top = 4, ;
Width = 32, ;
tooltiptext="Exit",;
Name = "Image20"
Procedure Init
Set Memo To 8192
Local m.myvar
TEXT to m.myvar noshow
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_b0991a_icon1.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_ca4454_icon2.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_526d74_icon3.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_1b83ae_icon4.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_291f2c_icon5.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_0e2596_icon6.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_d82e5b_icon7.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_251e3e_icon8.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_4bda46_icon9.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_056b85_icon10.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_01db43_icon11.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_a7a07b_icon12.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_1eacea_icon13.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_a2051d_icon21.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_6f1ca8_icon15.gif
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_535181_icon16.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_57fd09_icon17.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_8d5bb6_icon18.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_92b681_icon19.png
http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_ce7e5e_icon22.png
ENDTEXT
With This
.Top=0
*.Parent.ShowTips=.T.
.BackStyle=0
.BorderWidth=0
.BorderColor=0
Local m.x,m.w
For i=1 To .ControlCount
m.w= Eval(".image"+Trans(i))
With m.w
m.x=Allt(Mline(m.myvar,i))
This.yrequest(m.x,m.w)
Inke(0.3)
.MousePointer=15
If Between(i,3,14) &&adapt images with filled codes
.ToolTipText="ImgMenu"+Trans(i) && not used
Endi
Endwith
Endfor
Endwith
For i=1 To This.ControlCount
Bindevent(This.Controls(i),"mousedown",This,"myI")
Bindevent(This.Controls(i),"mouseENTER",This,"myI1")
Bindevent(This.Controls(i),"mouseLeave",This,"myI2")
Endfor
Endproc
Procedure myI
Lparameters nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
Aevents( myArray, 0)
*--- reference the calling object
loObject = myArray[1]
N=Int(Val(Substr(loObject.Name,6))) &&"imageXX"
If Inlist(N,3,4,5,6,7,8,9,10,11,12,13,14) &&if control code not empty this is not needed)
Messagebox(loObject.Name+" clicked! can write some code from here!",0+32+4096,'',1500) &&only for not used buttons
Endi
Do Case && to customize
Case N=1
Local yf
yf=Newobject("oform")
yf.Show(1) &&modal (olecontrol is always on top !)
Case N=2
&&shellexecute
Declare Integer ShellExecute In SHELL32.Dll Integer nWinHandle,;
STRING cOperation,;
STRING cFileName,;
STRING cParameters,;
STRING cDirectory,;
INTEGER nShowWindow
Local m.x
m.x="shell:AppsFolder\Microsoft.BingNews_8wekyb3d8bbwe!AppexNews"
Try
Local m.result
m.result = ShellExecute(0, "open", "explorer.exe ",m.x,"",1)
If result<=32
Messagebox("Fail to run!",16+4096,'',1200)
Endi
Catch
Messagebox("An error was occured!",16+4096,"Error",1200)
Endtry
Case N=3
Case N=4
Case N=5
Case N=6
Case N=7
Case N=8
Case N=9
Case N=10
Case N=11
Case N=12
Case N=13
Case N=14
Case N=15
Thisform.AlwaysOnTop=Iif(Thisform.AlwaysOnTop=.F.,.T.,.F.)
Case N=16
Local m.xcolor
m.xcolor=Getcolor()
If m.xcolor=-1
Return .F.
Endi
Thisform.BackColor=m.xcolor
Case N=17
Thisform.WindowState=1
Case N=18
Thisform.WindowState=Iif(Thisform.WindowState=0,2,0)
Case N=18
Thisform.WindowState=Iif(Thisform.WindowState=0,2,0)
Case N=19
With Thisform
.TitleBar=Iif(.TitleBar=1,0,1)
If .TitleBar=0
.Height=.Height+31
Else
.Height=.Height-31
Endi
Endwith
Case N=20
Thisform.Release
Endcase
Endproc
Procedure yrequest
Lparameters xurl,xobj
xurl=Allt(xurl)
Try
Local loRequest
m.loRequest = Createobject('MsXml2.XmlHttp')
m.loRequest.Open("GET",xurl,.F.)
m.loRequest.Send()
Local m.oo
xobj.PictureVal= m.loRequest.ResponseBody
m.loRequest=Null
Catch
Endtry
Endproc
Procedure myI1
Lparameters nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
Aevents( myArray, 0)
*--- reference the calling object
loObject = myArray[1]
Thisform.ylab.Caption=loObject.ToolTipText
Endproc
Procedure myI2
Lparameters nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
Aevents( myArray, 0)
*--- reference the calling object
loObject = myArray[1]
Thisform.ylab.Caption=""
Endproc
Enddefine
*
*-- EndDefine:ycnt_Imgs
Define Class oform As Form
ShowWindow = 1
Desktop=.T.
AutoCenter = .T.
Caption = "Form1"
BackColor = Rgb(0,255,0)
Width=700
Height=400
Caption="Form modal with desktop=.t. (pb olecontrol alwaysonTop)"
Name = "Form1"
Add Object grid1 As Grid With ;
Anchor = 15,;
Height = 217,;
Left = 5,;
Top = 16,;
Width = 372,;
Name = "Grid1"
Procedure Init
Rand(-1)
This.BackColor=Rgb(255*Rand(),255*Rand(),255*Rand())
Endproc
Procedure Load
Sele * From Home(1)+"samples\data\customer" Into Cursor ycurs
Endproc
Procedure grid1.Init
With This
.RecordSource="ycurs"
.RecordSourceType=1
.Themes=.F.
.Left=20
.Top=20
.Width=Thisform.Width-40
.Height=Thisform.Height-40
.GridLines=0
.HeaderHeight=30
.RowHeight=25
.DeleteMark=.F.
.RecordMark=.F.
For i=1 To .ColumnCount
.Columns(i).header1.BackColor=Rgb(255*Rand(),255*Rand(),255*Rand())
Endfor
.SetAll("DynamicBackColor","IIF(MOD(RECNO( ), 2)=0,RGB(200,206,180),RGB(255,255,255))", "Column")
.SetAll("fontbold",.T.,"header")
.SetAll("fontsize",14,"header")
Endwith
Sele ycurs
Locate
Endproc
Enddefine
Define Class yclock As Container
Anchor = 256
Width = 48
Height = 23
BackStyle=0
BorderWidth=0
Name = "yclock"
Add Object label1 As Label With ;
AutoSize = .T., ;
FontBold = .T., ;
Anchor = 256, ;
Caption = "", ;
Height = 17, ;
Left = 0, ;
MousePointer = 15, ;
Top = 0, ;
Width = 2, ;
ForeColor = Rgb(0,255,0), ;
BackColor = Rgb(0,0,0), ;
Name = "Label1"
Add Object timer2 As Timer With ;
Top = 0, ;
Left = 25, ;
Height = 23, ;
Width = 23, ;
Interval = 30000, ;
Name = "Timer2"
Procedure label1.mouseEnter
Lparameters nButton, nShift, nXCoord, nYCoord
Messagebox(Cdow(Date())+" "+Ttoc(Datetime()),0+32+4096,'Date & time',2000)
Endproc
Procedure label1.Init
This.Caption=Substr(Time(),1,5)
This.ToolTipText=Cdow(Date())+" "+Ttoc(Datetime())
Endproc
Procedure timer2.Timer
This.Parent.label1.Caption=Substr(Time(),1,5)
Endproc
Enddefine
*
*-- EndDefine: yclock
*some remarks
-use always opaque colors to have better transparency
-form AlwaysOnTop can be effective (relative to taskbar) if titlebar is visible
-some combo items are grayed because dont participating to expand/collapse sidebar
-the form is resizable.can add properties as minWidth,maxWidth function of your custom screen to avoid controls to intersect.
-if you link to web pages ,fire them on new window in < a > element with target="_blank"
-can restrict the web page area (even with background picture) to sidebar only to free form space for vfp app.
-can also choose small icons in container class to free space.
-with this template can integer in your vfp app some beautiful web objects on forms
Click on code to select [then copy] -click outside to deselect
*2*
*created on 18 of november 2017
*this is a splash form.its needed when the application must load some data and consumes a certain time delay .
*its made to make the user waits to finish the loading before begin work
*a decorated form starts at first and after the timer interval (to adjust in function loading time) it releases and the application begins.
*this code shows also how to disable cursor on the browser olecontrol and disable the rightclick on.
Publi yform
yform=Newobject("ysplash")
yform.Show
Read Events
Retu
*
Define Class ysplash As Form
BorderStyle = 2
Height = 650
Width = 950
ShowWindow = 2
AutoCenter = .T.
Caption = "Form1"
WindowState = 0
Name = "Form1"
Add Object olecontrol1 As OleControl With ;
oleclass="shell.explorer.2", ;
Top = 0, ;
Left = 0, ;
Height = 660, ;
Width = 948, ;
Anchor = 15, ;
Name = "Olecontrol1"
Add Object timer1 As Timer With ;
Top = 36, ;
Left = 768, ;
Height = 23, ;
Width = 23, ;
Interval = 10000, ;
Name = "Timer1"
Procedure Init
_Screen.WindowState=1
With This
.TitleBar=0
.Height=.Height+31
.AutoCenter=.T.
Endwith
Endproc
Procedure Destroy
Clea Events
Endproc
Procedure olecontrol1.Init
This.silent=.T.
Local m.myvar
TEXT to m.myvar noshow
<!DOCTYPE html><html class=''>
<head>
<meta charset='UTF-8'>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<style class="cp-pen-styles">html {
background: url('http://www.vitaminedz.org/photos/205/205994-biskra-el-kantara.jpg') no-repeat center center fixed; // http://lorempixel.com/800/600/city
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-attachment:fixed;
cursor:none;
}
.your-text {
width:70%;
font-family:arial;
color:gold;
background:rgba(45,45,45,0.7);
text-shadow:1px 1px 0 #fff;
display:none;
overflow: auto;
padding:20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {color:tomato;]
</style>
</head>
<body oncontextmenu='return false;'>
<center><div class="your-text">
<h1>This is my SPlash screen template </h1>
<p>Bacon ipsum dolor sit amet sirloin jerky meatball tenderloin pork belly bacon pork chop turkey, strip steak kielbasa hamburger ribeye ground round frankfurter spare ribs. Prosciutto chuck short loin chicken leberkas filet mignon ball tip fatback ham sirloin. Flank shank capicola sausage sirloin spare ribs. Bresaola pork chop spare ribs boudin, sirloin turkey pastrami doner capicola meatball tongue tenderloin frankfurter. Jowl ham hock turkey frankfurter, andouille beef ribs pork tail.</p>
<p>Bacon ipsum dolor sit amet sirloin jerky meatball tenderloin pork belly bacon pork chop turkey, strip steak kielbasa hamburger ribeye ground round frankfurter spare ribs. Prosciutto chuck short loin chicken leberkas filet mignon ball tip fatback ham sirloin. Flank shank capicola sausage sirloin spare ribs. Bresaola pork chop spare ribs boudin, sirloin turkey pastrami doner capicola meatball tongue tenderloin frankfurter. Jowl ham hock turkey frankfurter, andouille beef ribs pork tail.</p>
<p>Bacon ipsum dolor sit amet sirloin jerky meatball tenderloin pork belly bacon pork chop turkey, strip steak kielbasa hamburger ribeye ground round frankfurter spare ribs. Prosciutto chuck short loin chicken leberkas filet mignon ball tip fatback ham sirloin. Flank shank capicola sausage sirloin spare ribs. Bresaola pork chop spare ribs boudin, sirloin turkey pastrami doner capicola meatball tongue tenderloin frankfurter. Jowl ham hock turkey frankfurter, andouille beef ribs pork tail.</p>
</div></center>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script language="JavaScript"> document.oncontextmenu =new Function("return false;")</script>
<script >$(window).load(function(){
$('.your-text').fadeIn();
});
</script>
</body></html>
ENDTEXT
This.Navigate("about:blank")
Inke(1)
With This.Document
.Open()
.Write(m.myvar)
.Close()
Endwith
inke(1)
Endproc
Procedure timer1.Timer
*Do Form ydummy
Publi oform
oform=Newobject("ydummy")
oform.Show
Read Events
Inke(0.2)
This.Enabled=.F.
Thisform.Release
Endproc
Enddefine
*
*-- EndDefine: ysplash
Define Class ydummy As Form
Height = 250
Width = 1185
ShowWindow = 2
borderstyle=0
AutoCenter = .T.
BackColor=Rgb(240,240,240)
mousepointer=0
Caption = "This is the main application form"
Name = "Form1"
Add Object image1 As Image With ;
Picture = "", ;
Height = 86, ;
Left = 48, ;
Top = 48, ;
Width = 1109, ;
Name = "Image1"
Add Object label1 As Label With ;
Autosize=.F.,;
caption="This is the application main form.....To continue.",;
top=160,;
left=200,;
fontsize=20,;
forecolor=255,;
fontbold=.T.,;
backstyle=0,;
visible=.F.,;
Name="label1"
Procedure Init
Local loRequest,lcUrl
m.lcUrl="http://img.over-blog-kiwi.com/1/43/54/07/20171108/ob_4b1b52_ylogorup.png"
m.loRequest = Createobject('MsXml2.XmlHttp')
m.loRequest.Open("GET",lcUrl,.F.)
m.loRequest.Send()
Thisform.image1.PictureVal=m.loRequest.ResponseBody
m.loRequest=Null
Endproc
Procedure Activate
inke(2)
Local m.x
With This
m.x=.Height
For i=m.x To 650 step 20
.Height=.Height+ 20
.Left=.Left-10
.Top=.Top-10
.image1.top=(.height-.image1.height)/2
.AutoCenter=.T.
Endfor
.Width=950
.Height=650
.AutoCenter=.T.
Rand(-1)
With .label1
.Width=600
.Height=600
.FontSize=14
.Visible=.T.
For i=0 To 350 Step 10
.Rotation=.Rotation+10
If Mod(i,30)=0
.Parent.BackColor=Rgb(255*Rand(),255*Rand(),255*Rand())
.FontSize=.FontSize+1
Endi
Inke(0.1,'h')
.Top=.Top-4
Endfor
.Rotation=0
.FontSize=20
.Top=160
.Left=200
.AutoSize=.T.
.Parent.BackColor=Rgb(212,210,208)
Endwith
Endwith
Endproc
Procedure Destroy
Clea Events
Endproc
Enddefine
*
*-- EndDefine: ydummy
of course can cutomize....
Important:All Codes above are tested on VFP9SP2 & windows 10 pro 64 bits version 1703 ( creator update) & IE11 emulation