Introduction
<html>
<head>
<title>F# Graphical Applications</title>
<style>
.pseudocode
{
overflow: auto;
height: 150pt;
width: 450pt;
background: Navy;
}
.msgbox
{
overflow: auto;
height: auto;
width: 450pt;
background: Maroon;
}
.GUI
{
overflow: auto;
height: 200pt;
width: 450pt;
background: DarkGreen;
}
#main-title
{
color: #F00;
font: bold, 24pt, Bodoni MT Black, Georgia, Garamond, serif;
}
.description
{
color: #000;
font: 12pt, Times New Roman, Garamond, Georgia, serif;
}
.preformatted
{
white-space: pre;
font-size: 12pt;
color: Aqua;
font-family: Courier New, Georgia, serif;
}
</style>
</head>
<body>
<h1 id="main-title">F# Graphical Applications</h1>
<p class="description">The F# language supports various types of applications,
including graphical applications. In Microsoft Windows, applications used to
be created in the Win32 library. The basic pseudocode to create a Win32
application is as follows:</p>
<section class="pseudocode">
<p class="preformatted">Load the necessary libraries
Include the header files
Create a callback procedure
Handle the events using a switch statement
Create a WinMain function
Create a WNDCLASS/WNDCLASSEX variable
Specify the characteristics of the variable
Assign the callback function to the <i>lpfnWndProc</i> member
Call the RegisterClass/RegisterClassEx() function
Call the CreateWindow/CreateWindowEx() function
Find out if the window was created
Present the window
Handle the operating system messages
End the application</p>
</section>
<p class="description">When it comes to <abbr title="Graphical User Interface">
GUI</abbr> applications in F#, the easiest type to create is to simply
display a message box. Here is an example:</p>
<section class="msgbox">
<p class="preformatted">open System
open System.Windows.Forms
MessageBox.Show("Remember to sign your time sheet before leaving for your annual leave.",
"Bosco Corporations", MessageBoxButtons.OK, MessageBoxIcon.Information) |> ignore</p>
</section>
<p class="description">This would produce:</p>
<img alt="F# Graphical Applications" height="145" src="msgboxes/timesheet.gif" width="414">
<p class="description">For a more functioning GUI application, the .NET
Framework provides the <b>Form</b> class that includes various properties
and methods that can be used to enhance the application's functionality.
Here is an example of a <b>Form</b>-based application:</p>
<section class="GUI">
<p class="preformatted">open System
open System.Drawing
open System.Windows.Forms
// Form: Picture Viewer
let pictureViewer = new Form(MaximizeBox = false, Text = "Picture Viewer", ClientSize = new System.Drawing.Size
(780, 570), StartPosition = FormStartPosition.CenterScreen)
// Picture Box: Viewer
let pbxViewer = new PictureBox(Size = new Size(760, 505), Location = new Point(12, 12), SizeMode = PictureBoxSizeMode.Zoom,
BorderStyle = BorderStyle.FixedSingle)
pictureViewer.Controls.Add pbxViewer
// Button: Picture Selection
let btnSelectPicture = new Button(Width = 135, Text = "Select Picture...", Location = new Point(12, 534))
pictureViewer.Controls.Add btnSelectPicture
let ofdPictureSelection = new OpenFileDialog(Filter = "Joint Photographic Experts Group (*.jpg;.jpeg)|*.jpg;*.jpeg|
Bitmap Files (*.bmp)|*.bmp|Graphical Interchange Format (*.gif)|*.gif|Portable Network
Graphics (*.png)|*.png|All Files (*.*)|*.*")
let btnSelectPictureClick _ =
if ofdPictureSelection.ShowDialog() = DialogResult.OK then
pbxViewer.Image <- Image.FromFile ofdPictureSelection.FileName
btnSelectPicture.Click.Add btnSelectPictureClick
// Button: Close
let btnClose = new Button(Text = "Close", Location = new Point(697, 534))
pictureViewer.Controls.Add btnClose
let btnCloseClick _ = pictureViewer.Close()
btnClose.Click.Add btnCloseClick
[<EntryPoint>]
[<STAThread>]
let main argv =
Application.Run pictureViewer
0</p>
</section>
<p class="description">This would produce:</p>
<img alt="Picture Viewer" height="597" src="forms/viewer.gif" width="797">
<p class="description">You see? Programming is Fun!</p>
</body>
</html>
This would produce:
Showing Borders Around a Picture As done on any webpage object, a picture can display a border on 1, 2, 3, or all 4 sides. This is done using the border style or one of its sub-types. Here are examples:
<!DOCTYPE html>
<html>
<head>
<title>The Metric System - Time</title>
<style type="text/css">
body {
margin: 0;
background: #F0EBE1; /* rgb(240, 235, 225); */
}
#common-container {
width: 600px;
margin: auto;
border: 1pt solid Black;
background: RGB(220, 215, 195);
box-shadow: 0.28em 0.28em 0.28em Black;
}
#title-box {
right: auto;
bottom: auto;
width: 600px;
top: 0.05em;
margin-left: 0.00em;
height: 3.65em;
line-height: 1.25em;
position: absolute;
border-bottom: 3pt solid #643200;
}
#bottom-banner {
left: 0;
right: 0;
bottom: 0;
top: 32.10em;
width: 100%;
height: auto;
border-top: 3pt solid Maroon;
}
#pict-container { margin-top: 5.00em; }
#title {
color: #400;
text-align: center;
text-shadow: 0.15em 0.15em 0.28em rgb(255, 190, 0);
font: bold 24pt Georgia, Garamond, serif;
line-height: 0.15em;
}
p {
margin-left: 4pt;
margin-right: 4pt;
text-align: justify;
}
.picture {
margin: 0;
border-top: 2pt solid black;
border-bottom: 2pt solid black;
}
#copyright {
color: Maroon;
text-align: center;
line-height: 1.15em;
}
</style>
</head>
<body>
<div id="common-container">
<div id="title-box">
<p id="title">The Metric System - Time</p>
</div>
<div id="pict-container">
<img class="picture" alt="Metric System - Date and Time" height="260"
src="images/time2.png" width="600" />
</div>
<p>In the metric system, time is used to deal with values and operations related
to days, months, years, hours, minutess, and seconds. The metric system deals with
dates. A date is a combination of a day, a month, and a year, each expressed as a
numeric value. Depending on the language or the scenario in which it is used,
there are different ways to express a date, or rather there are different date
formats used by different languages or different policies.</p>
<p>The metric system also deals with time values. A time value is a combination
of the hour, the minute, and the second. As mentioned for dates, there are different
ways to present a time value. One technique is to present a date in hours from 0
to 23. Another technique is to consider a time occurring before midday, referred
to as AM, or time occurring after midday, referred to as PM.</p>
<footer id="bottom-banner">
<p id="copyright">Copyright ©, 2015</p>
</footer>
</div>
</body>
</html>
This would produce:
Aligning a Picture Aligning a picture is the ability to position it on a side or a corner of a box or an object. You have many options. The traditional technique consists of putting in a cell of a table, with the cell positioned where you want. If you put the picture in a box that has a fixed width and you want to display the picture in the middle of the box, you can set the margin style of the box to auto. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
body
{
margin: 0;
background: #375f91;
}
#top-banner {
top: 0;
left: 0;
right: 0;
bottom: auto;
width: 100%;
height: 4.15em;
position: absolute;
background-color: #192E46;
border-bottom: 1pt solid rgb(255, 190, 0);
}
#central {
left: 0;
right: 0;
margin: auto;
height: auto;
overflow: auto;
width: 600px;
bottom: 3.15em;
top: 4.25em;
background-color: #00F;
position: absolute;
border-top: 1px solid #0000FF;
border-right: 1px solid #00FF00;
border-bottom: 1px solid #0000FF;
border-left: 1px solid #00FF00;
}
#picture
{
margin: auto;
width: 251px;
border: 0px solid #00FF00;
}
#bottom-banner {
left: 0;
right: 0;
bottom: 0;
top: auto;
width: 100%;
height: 3.15em;
position: absolute;
background-color: DarkBlue;
border-top: 3pt solid rgb(255, 190, 0); }
#top-title {
text-align: center;
color: WhiteSmoke;
font: bold 24pt Georgia, Garamond, serif;
line-height: 0.15em;
}
.sub-title {
color: White;
font: bold 12pt Georgia, Garamond, serif;
}
.description {
margin: 0.58em;
color: Chartreuse;
text-align: justify;
font: bold, 12pt, Times New Roman, Garamond, Georgia, serif;
}
#bottom-part {
bottom: 0;
border-top: 5pt solid Bisque;
background-color: rgb(25, 55, 95);
padding-left: 1.15em;
}
.description {
padding-right: 1.15em;
color: #F5F032;
text-align: justify;
font: 12pt Times New Roman, Garamond, serif;
}
#copyright {
text-align: center;
color: Pink;
line-height: 1.15em; }
</style>
</head>
<body>
<header id="top-banner">
<p id="top-title">Earth Science</p>
</header>
<section id="central">
<div id="picture">
<p><img alt="Earth: This picture came from the NASA Website" height="252"
src="images/earth.png" width="250"></p>
</div>
<p class="description">Earth science is the group of studies that explore all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the the biosphere, the
hydrosphere, etc.</p>
<p class="description">Earth science is not confined to just the physical planet
but also to its environment. To start, its history first considers what might
have happened before the current time. Part of studying the earth is to consider
other planets and stars in order to evaluate its relationships and differences
with other places and objects.</p>
</section>
<footer id="bottom-banner">
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
Floating a Picture CSS provide a means of aligning a picture inline. This is done using a style named float. In order to use the float style, the picture and the text that accompanies it must be enclosed in a box with a fixed width. The float style can take one of two numeric values. They are:
A Picture as Background A picture can be used as the background of either the whole webpage or a box or HTML element. To support this, CSS provides a style named background-image. The value of this style is passed to a function named url. The function must receive the name of the file of the picture. The name must also be accompanied by its extension. If the picture file is located in the same folder as the page that needs it, you can simply provide the name of the file (and its extension). If the file is located in another folder, provide the complete path. If the names of folders and the name of the file are each in one word, you don't need to include them in quotes. Otherwise, you can provide the file and its path in eight single-quotes or double-quotes. You can use any picture you want. Here are different examples of a picture used as the background of a webpage and other pictures used as backgrounds of boxes:
<!DOCTYPE html>
<html>
<head>
<title>Biology</title>
<style type="text/css">
body {
margin: 0;
background-image: url(images/bg3.png);
}
#top-part {
margin: 0;
width: 100%;
height: 6.50em;
position: absolute;
border-bottom: 4pt solid Black;
background-image: URL(images/bg2.png);
}
#central {
left: 0;
margin: auto;
width: 550px;
height: 400px;
top: 2.75em;
position: relative;
border: 1pt solid Black;
backgroundimage: url(images/bg4.png);
}
#animal1 {
margin-left: 12.50em;
background-image: url("images/animal1.png");
}
#animal2 {
margin-left: 19.05em;
background-image: url("images/animal2.png");
}
#animal3 {
margin-left: 25.75em;
background-image: url("images/animal3.png");
}
#animal1, #animal2, #animal3 {
height: 60px;
width: 90px;
top: 20.00em;
position: absolute;
border: 1pt solid black;
}
#chem-title {
color: Blue;
font-size: 24pt;
font-weight: bold;
width: 428px;
line-height: 0.85em;
margin-left: 2.25em;
border-bottom: 2pt solid Black;
text-shadow: 0.12em 0.12em 0.18em White;
font-family: Georgia, "Times New Roman", Times, serif;
}
.description {
color: Navy;
padding-left: 0.50em;
padding-right: 0.50em;
text-align: justify;
font: 12pt Times New Roman, Garamond, serif;
}
</style>
</head>
<body>
<div id="top-part"></div>
<div id="central">
<div id="bio-box"> <p id="chem-title">Biology</p></div>
<p class="description">Biology is the study of the existence of living
organisms. Biologiy studies how the organisms start (such as how the organism
is born), how they grow (or how they change from one state or phase to
another), how they live, how they function, where they dwell, and how their
existence ends (such as how they die). Biology also study the environment in
which an organism lives, how it interacts with other organisms, how it
influences its environment, and how other organisms affect its beginning, its
existence, its environment, and its end.</p>
<p class="description">Biology can be divided in various fields of sudies such
as biochemistry, biophysics, and biotechnology. Biology helps to understand
other scientific areas of studies and other study fields influence biology.
These include agriculture, botany, ecology, etc.</p>
<div id="animal1"></div>
<div id="animal2"></div>
<div id="animal3"></div>
</div>
</body>
</html>
This would produce:
You can design a picture for the background using any application of your own. Here is an example of a graphic that was designed in Microsoft Word, imported in Corel PaintShop Pro for better section before being saved:
<html>
<head>
<title>Binary Classification</title>
<style>
body { background-image: url(images/bg1.png); }
#introduction {
color: Black;
font-size: 0.54cm;
}
p.classification { color: Blue; }
#description, p.classification { font-family: Garamond, Times New Roman, serif; }
li.classification {
font-size: 10pt;
font-family: Comic Sans MS;
}
p.title {
color: Maroon;
font-size: xx-large;
font-family: Rockwell, serif;
}
li > p.title {
color: Magenta;
font-family: Georgia, serif;
font-size: large;
}
td.title {
color: Navy;
font-family: Forte, sans-serif;
font-size: 1.05pc;
}
</style>
</head>
<body>
<p class="title">Binary Classification</p>
<p id="description">Binary classification consists of classifying the outcomes
of two sets of measures. The classification is made to find out whether
something that was supposed to happen actually happened as it was predicted,
or to make a conclusion about the resultant of something that was, or was not,
supposed to happen. Binary classification is widely used in various disciplines:</p>
<ul>
<li class="classification">Medicine: Used to evaluate pregnancies, to study
diseases, to monitor cancer evolution on patients, etc</li>
<li class="classification">Statistics: Used to evaluate the outcomes of an
experiment</li>
<li class="classification">Sociology: Used to study people's (a person in
society, a crowd in a riot, the employees of a company, etc) behavior</li>
<li class="classification">Etc:</li>
</ul>
<p id="description">Binary classification is applied to many types
of studies and sometimes the results gotten in one discipline can
directly used in another discipline.</p>
<p class="description">The classification uses four expressions as:</p>
<ul>
<li><b>True Positive</b>: This condition indicates that something that
was supposed to happen actually happened</li>
<li><b>True Negative</b>: This condition indicates that something that was
supposed to happen did not happen</li>
<li><b>False Positive</b>: This condition indicates that something that was
not supposed to happen happened</li>
<li><b>False Negative</b>: This condition indicates that something that was
not supposed to happen did not happened</li>
</ul>
<p>These expressions can be classified in a table as follows:</p>
<table border=6>
<tr>
<td> </td>
<td class="title">True</td>
<td class="title">False</td>
</tr>
<tr>
<td class="title">Positive</td>
<td>True Positive</td>
<td>False Positive</td>
</tr>
<tr>
<td class="title">Negative</td>
<td>False Negative</td>
<td>True Negative</td>
</tr>
</table>
<p>Depending on the disciple, the classification can also be made follows:</p>
<table border=6>
<tr>
<td> </td>
<td class="title">Positive (+)</td>
<td class="title">Negative (-)</td>
</tr>
<tr>
<td class="title">Positive (+)</td>
<td>True Positive</td>
<td>False Positive</td>
</tr>
<tr>
<td class="title">Negative (-)</td>
<td>False Negative</td>
<td>True Negative</td>
</tr>
</table>
<p>Because binary classification is used in different disciples (medicine,
mathematics, statistics, social sciences, etc), the formualtion of the
conclusion depends on the subject being addressed.</p>
</body>
</html>
This would produce:
By the way, instead of background-image, you can use the background style. |
|
||||||||||
|
|
|||||||||||
