Breaking up is hard to do.

Not really!

water1

JavaScript can be easily separated from  the HTML code.  To do this we just add a line of code  and your done.  Let look at an example in our example.  Here is the original code with some enhancement.

 <!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />

function init()
{
document.getElementById(“panel”).innerHTML =”this is my test”
document.getElementById(“panel2″).innerHTML =”this is my test2”
}
</head>
<body onload = “init()”>
<p id = “panel2”></p>
</body>
</html>

If you copy this into note pad and save it as an html file, then you should get this when you open itmyTest

As you can see it just print two lines to the screen.  If we separate the scrip we will get the same results. Lets try it, note I have added a “bgcolor” to make it easier to read:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />

</head>
<p id = “panel2”></p>
</body>
</html>

And for the JavaScript:

function init()
{
document.getElementById(“panel”).innerHTML =”this is my test”
document.getElementById(“panel2″).innerHTML =”this is my test2”
}

This should be saved  as “myTest.js” in the same folder as the html file.  Here is the results:

myTest2

So there you go.  Next post we will get back to the data and maybe some styling.

 

 

Advertisements

Let’s make it Confusing

 

PonyRide

Since the first time I heard the term JavaScript, I thought it had stupid name.  After all VBScript was based on Visual Basic syntax.  Why wouldn’t JavaScript be based on Java.  But that’s not the only issue I have with it.  Yes the names confusing, but the technologies and libraries that are used with it are also confusing.  jQuery for example the name makes you think it is a Java query language not a JavaScript extension library. But anyway lets see what we can do with it. Be for warned I am not proficient in JavaScript.  I’m OK with C#, or VB but have limited experience with JavaScript. My go to book for JavaScript is Mike McGrath’s book JavaScript in easy steps.  www.ineaysteps.com I like the way Mike McGrath presents the topic and have used several of his books. I wish I could say I liked JavaScript, I don’t.   I have never been a big fan of any kind of web development.  For an old desk top developer, web development seems so limiting. Especially the onset of WPF, in .NET.

Let’s start with the basics (like I have a choice). JavaScript is one part of the three parts that make up modern web development. The other two are HTML5(Hyper Text Markup Language) and CSS (Cascading Style Sheets). To write it you have the choice of including the script in the HTML Doc or referencing it from the HTML doc. Included JavaScript  is pretty easy to do.

In notepad create a simple html page:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />
</head>
<body>

Test

 

</body>
</html>

Save as myTest.html and then open in a browser.   The important thing here is to recognize you identified an area of the web page by using the id=  in the

portion of the HTML.  Note you could do the same with a <p></p> or any other element.  Doing this allows you to manipulate what shows up on the screen. . So how do we manipulate it?  We use the the page events change the page based on the function.  We identify where we want those changes to occur with “id=”

Here’s an example of how to do this.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
function init() {
document.getElementById(“panel”).innerHTML =”this is my test “
}

</body>
</html>

Ok lets break this down into its parts.  First of all why <!DOCTYPE html>, well honestly you don’t have worry about this in HTML5 but just don’t leave anything unsaid go here for full explanation. https://www.w3schools.com/tags/tag_doctype.asp

<Title></Title>

Is just the name of your page (not important).

<Head></Head>

This is area of the page where most people put information about the page (metadata).  It is also a good place to put your tags.  It is not the only place you can do this and most people will put the javascript into a separate file all together.  We look at that next time. You may wonder why we have the type = “text/javascript”, well in the old days we things like vbscript, which was Microsoft’ browser scripting language.   you don’t need to worry about this in modern browser, it just a relic of days gone by.

We put a function inside the script tags an use the function int(){} syntax.  I this case the name of the function is init, the parentheses is where we would pass parameters if we need too and code would go between the brackets{}.  So basically this is the code or set of instructions that we will call when the code is executed.  How do we execute the code well we do that with and event.  Here is the event:

A list of other types of events can be found here:  https://www.w3schools.com/tags/ref_eventattributes.asp

So now yo have the code, and you have the event. Now al you need is a place to put the information indicated by the code (the “panel”).  We’ll need to add the

 So here’s the whole code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />

function init()
{
document.getElementById(“panel”).innerHTML =”this is my test”
}

</head>
<body onload = “init()”>

 

</body>
</html>

Take this and paste it into note pad, save it as an HTML file and start making changes.  To run the program just open it with a browser.  Next time we will talk more about JavaScript.

 

 

 

 

 

 

 

Losing a friend.

christ

Usually I write about writing code, but today I’m going to stray from that path.  Today I found out that someone I considered a friend past away tragically from a head on collision.  In my life many such losses have occurred.  Not all have been sudden but many unexpected.  The older you live the more you come to realize that life is fleeting.  I am deeply aware that the past is gone, the future is not certain and present is all we have.   No time to waste with silly regrets or worry about the future, live in the now.

First let me tell you about my friend.  He was one of the kindest people I had ever meet, helping people in need out the love he felt from his Christian belief.  Many people talk about their Christian walk, but my friend Trent wasn’t a talker he was a doer.   It wasn’t unusual find out someone who he had ran across that was in need, was living with him and his wife while they got back on their feet.   He went on mission trips to build churches, put roofs on house, and worked incredible amounts without a once ego coming through. When our local pregnancy support center needed dry wall, he was there.  When there was work to be done at the Church, he was there.   As a talented handyman/carpenter/plumber Trent was always in demand, you see God had given him a lot talent.  With a loving heart, Trent took that Talent and made a real change in our world, showing Christ’s love through his hands.  So many people in our community have been touched by his actions that I cannot even attempt to explain what we have lost.

Tragedy is hard to understand.  But as I have learned it is just part of life.  We all can’t be Trent Smith, but we can try to be the best and kindest version of our selves possible.

 

 

Putting it all together.

 

VS.png

In previous incarnations of this blog I have assume the person reading it would have some knowledge of C#, WPF, and Visual Studio.  But if you happen across this Blog and would like to get started in desktop programming.  I thought I’d break it down in more coordinated way. First of all let me mention a wonderful blog for WPF  https://wpf.2000things.com/.  In this is a great source of information on using WPF. C# sources are all over the internet, but if require more formal training I recommend Plural Sight  https://www.pluralsight.com/.  They have some course that are free.  If you can take a class from Debora Kurata,  Another course I would like to suggest is “Becoming an Outlier”, with Cory House.  This is a great course about excelling in your career.   https://app.pluralsight.com/library/courses/career-reboot-for-developer-mind/table-of-contents.  To get a free copy of Visual Studio (yes I did say free), try the community addition at https://www.visualstudio.com/downloads/.

Now for the details.

Step 1:

Download Visual Studio Community edition. Install it and open it up. Select file>new and select Visual C# > Widows Classic Desktop on the right select WPF App.  This will create a blank WPF  project in the default directory.  You name it any thing you like.

vs2

Step 2:

What you see next should get you started. with a blank MainWindow.xaml window. If you click the arrow beside MainWindow.xaml you see the code behind page.  Double click on it to open it up and copy the following code.

namespace WpfApp1
{
public partial class MainWindow : Window
{
public int MyMode = 0;
public MainWindow()
{
InitializeComponent();
MakeDataSet();
}

public void MakeDataSet()
{
DataTable table1 = new DataTable(“StateCapitals”);
table1.Columns.Add(“STATE”);
table1.Columns.Add(“Capital”);
table1.Columns.Add(“LAT”);
table1.Columns.Add(“LOG”);
table1.Rows.Add(“Alabama”, “Montgomery”, “32.361538”, “-86.279118”);
table1.Rows.Add(“Alaska”, “Juneau”, “58.301935”, “-134.419740”);
table1.Rows.Add(“Arizona”, “Phoenix”, “33.448457”, “-112.073844”);
table1.Rows.Add(“Arkansas”, “Little Rock”, “34.736009”, “-92.331122”);
table1.Rows.Add(“California”, “Sacramento”, “38.555605”, “-121.468926”);
table1.Rows.Add(“Colorado”, “Denver”, “39.7391667”, “-104.984167”);
table1.Rows.Add(“Connecticut”, “Hartford”, “41.767”, “-72.677”);
table1.Rows.Add(“Delaware”, “Dover”, “39.161921”, “-75.526755”);
table1.Rows.Add(“Florida”, “Tallahassee”, “30.4518”, “-84.27277”);
table1.Rows.Add(“Georgia”, “Atlanta”, “33.76”, “-84.39”);
table1.Rows.Add(“Hawaii”, “Honolulu”, “21.30895”, “-157.826182”);
table1.Rows.Add(“Idaho”, “Boise”, “43.613739”, “-116.237651”);
table1.Rows.Add(“Illinois”, “Springfield”, “39.783250”, “-89.650373”);
table1.Rows.Add(“Indiana”, “Indianapolis”, “39.790942”, “-86.147685”);
table1.Rows.Add(“Iowa”, “Des Moines”, “41.590939”, “-93.620866”);
table1.Rows.Add(“Kansas”, “Topeka”, “39.04”, “-95.69”);
table1.Rows.Add(“Kentucky”, “Frankfort”, “38.197274”, “-84.86311”);
table1.Rows.Add(“Louisiana”, “Baton Rouge”, “30.45809”, “-91.140229”);
table1.Rows.Add(“Maine”, “Augusta”, “44.323535”, “-69.765261”);
table1.Rows.Add(“Maryland”, “Annapolis”, “38.972945”, “-76.501157”);
table1.Rows.Add(“Massachusetts”, “Boston”, “42.2352”, “-71.0275”);
table1.Rows.Add(“Michigan”, “Lansing”, “42.7335”, “-84.5467”);
table1.Rows.Add(“Minnesota”, “Saint Paul”, “44.95”, “-93.094”);
table1.Rows.Add(“Mississippi”, “Jackson”, “32.320”, “-90.207”);
table1.Rows.Add(“Missouri”, “Jefferson City”, “38.572954”, “-92.189283”);
table1.Rows.Add(“Montana”, “Helana”, “46.595805”, “-112.027031”);
table1.Rows.Add(“Nebraska”, “Lincoln”, “40.809868”, “-96.675345”);
table1.Rows.Add(“Nevada”, “Carson City”, “39.160949”, “-119.753877”);
table1.Rows.Add(“New Hampshire”, “Concord”, “43.220093”, “-71.549127”);
table1.Rows.Add(“New Jersey”, “Trenton”, “40.221741”, “-74.756138”);
table1.Rows.Add(“New Mexico”, “Santa Fe”, “35.667231”, “-105.964575”);
table1.Rows.Add(“New York”, “Albany”, “42.659829”, “-73.781339”);
table1.Rows.Add(“North Carolina”, “Raleigh”, “35.771”, “-78.638”);
table1.Rows.Add(“North Dakota”, “Bismarck”, “46.813343”, “-100.779004”);
table1.Rows.Add(“Ohio”, “Columbus”, “39.962245”, “-83.000647”);
table1.Rows.Add(“Oklahoma”, “Oklahoma City”, “35.482309”, “-97.534994”);
table1.Rows.Add(“Oregon”, “Salem”, “44.931109”, “-123.029159”);
table1.Rows.Add(“Pennsylvania”, “Harrisburg”, “40.269789”, “-76.875613”);
table1.Rows.Add(“Rhode Island”, “Providence”, “41.82355”, “-71.422132”);
table1.Rows.Add(“South Carolina”, “Columbia”, “34.000”, “-81.035”);
table1.Rows.Add(“South Dakota”, “Pierre”, “44.367966”, “-100.336378”);
table1.Rows.Add(“Tennessee”, “Nashville”, “36.165”, “-86.784”);
table1.Rows.Add(“Texas”, “Austin”, “30.266667”, “-97.75”);
table1.Rows.Add(“Utah”, “Salt Lake City”, “40.7547”, “-111.892622”);
table1.Rows.Add(“Vermont”, “Montpelier”, “44.26639”, “-72.57194”);
table1.Rows.Add(“Virginia”, “Richmond”, “37.54”, “-77.46”);
table1.Rows.Add(“Washington”, “Olympia”, “47.042418”, “-122.893077”);
table1.Rows.Add(“West Virginia”, “Charleston”, “38.349497”, “-81.633294”);
table1.Rows.Add(“Wisconsin”, “Madison”, “43.074722”, “-89.384444”);
table1.Rows.Add(“Wyoming”, “Cheyenne”, “41.145548”, “-104.802042”);

DataSet set = new DataSet(“StateCapitals”);
set.Tables.Add(table1);
GetPush(set);
}
private void GetPush(DataSet Ds)
{

int rcount = Ds.Tables[0].Rows.Count;
for (int i = 0; i < rcount; i++)
{
string strLat = Ds.Tables[0].Rows[i].Field<string>(“Lat”);
string strLong = Ds.Tables[0].Rows[i].Field<string>(“Log”);
string strCap = Ds.Tables[0].Rows[i].Field<string>(“Capital”);
string strState = Ds.Tables[0].Rows[i].Field<string>(“STATE”);
string locT1 = strState + “\n”;
string locT2 = strCap + “\n”;
string locT3 = strLat + “\n”;
string locT4 = strLong;
Double results1, results2;
results1 = Convert.ToDouble(strLat);
results2 = Convert.ToDouble(strLong);
Pushpin pushpin6 = new Pushpin();
pushpin6.PositionOrigin = PositionOrigin.Center;
pushpin6.ToolTip = locT1 + locT2 + locT3 + locT4;
pushpin6.Content = strCap;
pushpin6.Height = 55;
pushpin6.FontSize = 8;
pushpin6.Background = new SolidColorBrush(Colors.Red);
pushpin6.Foreground = new SolidColorBrush(Colors.Black);
MapLayer.SetPosition(pushpin6, new Location(results1, results2));
myMap.Children.Add(pushpin6);

}
}
private void btMode_Click(object sender, RoutedEventArgs e)
{
if (MyMode == 0)
{
myMap.Mode = new AerialMode();
MyMode = 1;
}
else
{
myMap.Mode = new RoadMode();
MyMode = 0;
}
}
}
}

At the top of the form you’ll need to add using “Microsoft.Maps.MapControl.WPF;” If you have not referenced the bing map control you will see an error. Use proceedures in: “Creating the Map: WPF Bing Map Part 2” earlier post.  That should get the back-end taken care of.

Now for the XAML:

Step 3:

Open up the xaml window and past the following code:

<Window x:Class=”StateCaps.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;
xmlns:m=”clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF”
xmlns:local=”clr-namespace:StateCaps”
mc:Ignorable=”d”
Title=”MainWindow” Height=”450″ Width=”625″>
<Window.Resources>
<Style x:Key=”CustomInfoboxStyle” TargetType=”ToolTip”>
<Setter Property=”Background” Value=”Transparent” />
<Setter Property=”BorderBrush” Value=”Transparent” />
<Setter Property=”BorderThickness” Value=”2″ />
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate>
<Border CornerRadius=”5″>
<Border.Background>
<SolidColorBrush Color=”Black” Opacity=”0.5″/>
</Border.Background>
<ContentPresenter Margin=”5″>
<ContentPresenter.Content>
<StackPanel Margin=”5″ >
<TextBlock Text=”{Binding Title}” FontWeight=”Bold” FontSize=”26″ Foreground=”White” Height=”120″/>
<TextBlock Text=”{Binding Description}” Foreground=”White” TextWrapping=”Wrap”/>
</StackPanel>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Margin=”0,0,0,0″ Background=”#FF43B08B”>
<Grid.RowDefinitions>
<RowDefinition Height=”24*”/>
<RowDefinition Height=”395*”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”62*”/>
<ColumnDefinition Width=”555*”/>
</Grid.ColumnDefinitions>
<Button x:Name=”btMode” Content=”Mode” Margin=”1,1,0,5″ Click=”btMode_Click” />
<m:Map x:Name=”myMap” CredentialsProvider=”Your Key Here” Mode=”Road” Center=”35.665600,-95.469700″ ZoomLevel=”3″ Grid.ColumnSpan=”2″ Grid.Row=”1″/>
</Grid>
</Window>

Your done! If you followed the instructions you should have a working program.   Now the way you learn is but messing with it have fun.  Next time let’s talk java script.

 

 

Adding a Mode Button

Lets add a button:

<Button x:Name=”btMode” Content=”Mode”  Margin=”1,1,0,5″ Click=”btMode_Click” />

Missouri

To do this we first need to make some changes to the xaml.   Here’s the code:

<Grid Margin=”0,0,0,0″ Background=”#FF43B08B”>
<Grid.RowDefinitions>
<RowDefinition Height=”24*”/>
<RowDefinition Height=”395*”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”62*”/>
<ColumnDefinition Width=”555*”/>
</Grid.ColumnDefinitions>
<Button x:Name=”btMode” Content=”Mode” Margin=”1,1,0,5″ Click=”btMode_Click” />

We now need the the code behind to make it work .  First we are going to have to add a variable to let us know what state our map is currently in.  So why don’t we just add this:

public partial class MainWindow : Window
{
public int MyMode = 0;
to the top MainWindow method.  That will give us a variable to use to keep track of our current mode.  Now in the click event we just created for the button. We will add the following code.
private void btMode_Click(object sender, RoutedEventArgs e)
{
if (MyMode == 0)
{
myMap.Mode = new AerialMode();
MyMode = 1;
}
else
{
myMap.Mode = new RoadMode();
MyMode = 0;
}
}

That will give us the ability to switch back and forth.

NashvilleRoadNashville

 

 

Lets Make it Cool!

Up until now we have just been making a map. Now lets add some features.  First let’s make it display data when you hover over one of the pins. To do that we are going to use the ToolTip property of the pushpin.  We do this by setting the pushpin1.ToolTip = “Some text”.  In our case we will show
the state, capital, latitude, longitude. SouthCar

string strLat = Ds.Tables[0].Rows[i].Field<string>(“Lat”);
string strLong = Ds.Tables[0].Rows[i].Field<string>(“Log”);
string strCap = Ds.Tables[0].Rows[i].Field<string>(“Capital”);
string strState = Ds.Tables[0].Rows[i].Field<string>(“STATE”);
string locT1 = strState + “\n”;
string locT2 = strCap + “\n”;
string locT3 = strLat + “\n”;
string locT4 = strLong;

pushpin6.ToolTip = locT1 + locT2 + locT3 + locT4;

So now put this together and …

private void GetPush(DataSet Ds)
{
int rcount = Ds.Tables[0].Rows.Count;
for (int i = 0; i < rcount; i++)
{
string strLat = Ds.Tables[0].Rows[i].Field<string>(“Lat”);
string strLong = Ds.Tables[0].Rows[i].Field<string>(“Log”);
string strCap = Ds.Tables[0].Rows[i].Field<string>(“Capital”);
Double results1, results2;
results1 = Convert.ToDouble(strLat);
results2 = Convert.ToDouble(strLong);
//string iconStyle = 16;
Pushpin pushpin1 = new Pushpin();
//pushpin1.Style.Resources = Application.Current.Resources[“pushpin”];
pushpin1.PositionOrigin = PositionOrigin.Center;
//pushpin1.Location = new Location(45, -90);
pushpin1.Content = strCap;
pushpin1.Height = 55;
pushpin1.FontSize = 8;
pushpin1.Background = new SolidColorBrush(Colors.Red);
pushpin1.Foreground = new SolidColorBrush(Colors.Black);
MapLayer.SetPosition(pushpin1, new Location(results1, results2));
myMap.Children.Add(pushpin1);
}

That should give us the a pretty cool working map.  So next let’s look a making it useful!

 

Add The Pins

bingmap2

Now we have the data and the map we need to start  putting it all together. First lets look a xaml to display the map.

<Window x:Class=”StateCaps.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;
xmlns:m=”clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF”
xmlns:local=”clr-namespace:StateCaps”
mc:Ignorable=”d”
Title=”MainWindow” Height=”450″ Width=”625″>
<Window.Resources>
</Window.Resources>
<Grid>
<m:Map x:Name=”myMap” CredentialsProvider=”YOUR KEY HERE” Mode=”Road” Center=”35.665600,-95.469700″ ZoomLevel=”3″>
</m:Map>
</Grid>
</Window>

This  will give you a very simple map of the us.  To add the pus pin we need write some code in c#. So in the mainwindow.xaml.cs add the following method.

private void GetPush(DataSet Ds)
{
int rcount = Ds.Tables[0].Rows.Count;
for (int i = 0; i < rcount; i++)
{
string strLat = Ds.Tables[0].Rows[i].Field<string>(“Lat”);
string strLong = Ds.Tables[0].Rows[i].Field<string>(“Log”);
string strCap = Ds.Tables[0].Rows[i].Field<string>(“Capital”);
Double results1, results2;
results1 = Convert.ToDouble(strLat);
results2 = Convert.ToDouble(strLong);
//string iconStyle = 16;
Pushpin pushpin1 = new Pushpin();
//pushpin1.Style.Resources = Application.Current.Resources[“pushpin”];
pushpin1.PositionOrigin = PositionOrigin.Center;
//pushpin1.Location = new Location(45, -90);
pushpin1.Content = strCap;
pushpin1.Height = 55;
pushpin1.FontSize = 8;
pushpin1.Background = new SolidColorBrush(Colors.Red);
pushpin1.Foreground = new SolidColorBrush(Colors.Black);
MapLayer.SetPosition(pushpin1, new Location(results1, results2));
myMap.Children.Add(pushpin1);
}

We need to then call the method in Make Dataset() method. (I know there are better ways of doing this bear with me.)

public void MakeDataSet()
{
DataTable table1 = new DataTable(“StateCapitals”);
table1.Columns.Add(“STATE”);
table1.Columns.Add(“Capital”);
table1.Columns.Add(“LAT”);
table1.Columns.Add(“LOG”);
table1.Rows.Add(“Alabama”, “Montgomery”, “32.361538”, “-86.279118”);
table1.Rows.Add(“Alaska”, “Juneau”, “58.301935”, “-134.419740”);
table1.Rows.Add(“Arizona”, “Phoenix”, “33.448457”, “-112.073844”);
table1.Rows.Add(“Arkansas”, “Little Rock”, “34.736009”, “-92.331122”);
table1.Rows.Add(“California”, “Sacramento”, “38.555605”, “-121.468926”);
table1.Rows.Add(“Colorado”, “Denver”, “39.7391667”, “-104.984167”);
table1.Rows.Add(“Connecticut”, “Hartford”, “41.767”, “-72.677”);
table1.Rows.Add(“Delaware”, “Dover”, “39.161921”, “-75.526755”);
table1.Rows.Add(“Florida”, “Tallahassee”, “30.4 …
DataSet set = new DataSet(“StateCapitals”);
set.Tables.Add(table1);
GetPush(set);}

At this point we have meet our goal of making a map.  But it is important to understand the method. First of all awe pushed the data as an object.  Where did we get the data.  In the previous code we created it using:

DataSet set = new DataSet(“StateCapitals”);
set.Tables.Add(table1);

We go into detail in the next post.