Chapter 2 - Basic coding
If you are unfamiliar with XHTML (HTML works as well), you should learn the basics, although you probably can manage without them in this tutorial. You may feel that you allready know HTML, if that's the case, you could skip this chapter and and look at the example widget code.
I must point out that I comment the XHTML code with "//", this does not work in reality, XHTML comments look like this: <!-- comment -->. However, in CSS, one uses "//" to comment.
A widget is basically a website, you make it with the same scripting language, that is; xhtml, css and javascript. There are also other methods you can use for certain things that are more advanced and/or talk to the system itself.
But, we will concentrate on the basics, XHTML and CSS in this tutorial, I will also introduce some javascript later.
This is the elements required for the html: (the slash ends html tags)
<html> // defines HTML
<head> // defines the header of the widget, in here you will put the CSS code (Stylesheet, it's purpose is to design the structure you build with html)
<script type='text/javascript' src='javascript.js' /> //Tells the widget that you want t import Javascript code from the file "javascript.js" (every widget needs some javascript code to work properly)
<style type="text/css"> // defines start of CSS code
@import "stylesheet.css"; //tells the widget that I want to import CSS code from the file "stylesheet.css"
</style>
</head>
<body> //defines the body selection, between <body> and </body>, you will build the widgets visible parts.
</body>
</html>
Save this file as name.html and remember, the plist file I talked about in the first chapter needs to find this file.
Now, this widget does not work yet, there is one more thing you must implement, and that is the background image named "Default.png", you do this by creating a file named "stylesheet.css" and write the following code in the file:
body { // Tells the widget that you want to put the following CSS functions into your document's body tag
background-image: url('Default.png'); //inserts the image Default.png as background
}
You widget should work now. To start your widget, name the folder containing the files to "name.wdgt" and OS X makes a widget bundle out of it.
To complete this chapter, you'll need to write "Hello World" :). It's done this way:
<html> // defines HTML
<head> // defines the header of the widget, in here you will put the CSS code (Stylesheet, it's purpose is to design the structure you build with html)
<script type='text/javascript' src='javascript.js' /> //Tells the widget that you want t import Javascript code from the file "javascript.js" (every widget needs some javascript code to work properly)
<style type="text/css"> // defines start of CSS code
@import "stylesheet.css"; //tells the widget that I want to import CSS code from the file "stylesheet.css"
</style>
</head>
<body> //defines the body selection, between <body> and </body>, you will build the widgets visible parts.
Hello World! //To write text in a widget, just write it :)
</body>
</html>
But, you may want to change the font, this is done by using CSS. Look at the example beneeth:
body { // Again, we add our functions to "body" which makes them apply to the document.
background-image: url('Default.png'); //inserts the image Default.png as background
font-family: Lucida grande; //sets the standard font of the document to "Lucida grande"
font-size: 14px; //Font Size 14
font-weight: bold; //Makes the text bold
color: #000033; //Set the color of the text, this is done using Hex-code
}
Now, you may choose which of the elements you want to apply and the value of them, for further study of CSS, visit w3schools.com