Introduction
The purpose of this article is to introduce you to a new way of loading and
viewing content from your filesystem (and in subsequent articles, downloading
and viewing web pages in a web browser). This article discusses an approach for
creating and viewing file content that uses web-based content for saving,
viewing, and retrieving.
Background
This tutorial will show you how to use a new file type with your filesystem
and web pages (if you have a webserver). You should have a basic understanding
of the way web pages work and have some experience with a markup language (HTML
or XML).
Creating a file.
Let's get started by creating a simple file to display data. The file will
contain a markup language called GordonRhodes Markup Language or GRML. This
example will be used to define content that describes data for a movie that I
saw this year, The Matrix.
First, open up notepad (or your favorite text editor) and type the following
(or just cut and paste it).
<a class=rslt_13 type=item>Matrix Image 1</>
This line is called a tag pair and is the way GRML file viewers and web
browsers read and display content from the file or web page. All tag pairs
consist of an open tag and a close tag, with the content sitting between the two
tags. The first tag describes the content, with class determining the
location of the content, name associating the content into groups, and
type providing the attribute of the content.
For the purposes of this article, the name attribute will not be used.
The rslt_13 command tells the GRML file viewer or web browser that the
content in the tag pair should be displayed in the control or window that uses
rslt_13 data. The GRML file viewer and web browser that is shown in the
screenshot is called Pioneer. It displays GRML file and web pages and will
demonstrate all the capabilities that will be covered in this tutorial.
The item attribute of type tells the GRML file viewer that this
content is an item of the rslt_13 control (or window). However, to display the
content, it needs to be attached to a descriptive column. So, let's add one.
<a class=column_13 type=item>Title</>
This tag pair describes a column used to display items for rslt_13. In this
case, the tag pair has defined one column, called "Title". So, now we have a
column and result. Before it can be viewed, document tags must be added. These
are the same as HTML except they say GRML. Once you add a document open and
document close tag, the code should like this:
<grml>
<a class=column_13 type=item>Title</>
<a class=rslt_13 type=item>Matrix Image 1</>
</grml>
You have just created your first GRML file. This is the way all GRML files
should look. Some have more tag pairs, others fewer. However, they all have a
document open tag, a series of tag pairs, and a document close tag.
Save the file and open it in Pioneer. To open a file in Pioneer, just hit
Ctrl+O or right-click in the Workspace window and select Open. Find the file you
just saved and open it. This is what you should see:
Adding Content
Let's add some more content. Add the following tag pairs between the document
tags and save the file.
<grml>
<a class=rslt_13 type=item>Matrix Image 2</>
<a class=rslt_13 type=item>Matrix Image 3</>
<a class=rslt_13 type=item>Matrix Image 4</>
<a class=rslt_13 type=item>Matrix Image 5</>
<a class=rslt_13 type=item>Matrix Image 6</>
<a class=rslt_13 type=item>Matrix Image 7</>
<a class=rslt_13 type=item>Matrix Image 8</>
<a class=rslt_13 type=item>Matrix Image 9</>
</grml>
Once you have saved the file, click the 'Refresh' button or press 'F5'. You
should now see the following:
Adding Hyperlinks
Okay, this a basic way to add content. What about web items such as
hyperlinks. Well, to add a hyperlink to one of your results, add the following
tag pairs.
<a class=rslt_13 type=link>http:
<a class=rslt_13 type=link>http:
<a class=rslt_13 type=link>http:
<a class=rslt_13 type=link>http:
<a class=rslt_13 type=link>http:
<a class=rslt_13 type=link>http:
<a class=rslt_13 type=link>http:
<a class=rslt_13 type=link>http:
<a class=rslt_13 type=link>http:
Once again, save the file and hit the 'Refresh' button or press 'F5'. The
window should now look like this:
Try clicking on one of the items in the window. If you are connected to the
internet, it will launch a web browser and take you to that link. That is
because the content attribute is a 'link'. Link items are used to describe
hyperlinks in a GRML file or web page.
Adding Images
Now, let's add a non-text item to the window. Since The Matrix has a lot of
great visual scenes, we will add some images to this file. Add the following
lines to your file and save it.
<a class=rslt_13 type=image>http:
<a class=rslt_13 type=image>http:
<a class=rslt_13 type=image>http:
<a class=rslt_13 type=image>http:
<a class=rslt_13 type=image>http:
<a class=rslt_13 type=image>http:
<a class=rslt_13 type=image>http:
<a class=rslt_13 type=image>http:
<a class=rslt_13 type=image>http:
The type for these tag pairs describe the content as an image. When you have
the above tag pairs included in your file, save it and reload the file. You
should see this:
Now, to see the images, you need to right-click in the window where the
content (results) are displayed and select the Picture menu item (in the context
menu). Or, you could just press Ctrl+J or Ctrl+K until you see the images. It
should look as follows:
The images are kind of small and hard to see. The way to fix that is by
setting the height and width of the images so that they are easier on the eyes.
Add the following lines to your file.
<a class=rslt_13 type=imageheight>60</>
<a class=rslt_13 type=imagewidth>90</>
Once you have saved the file, refresh it. The images are much larger and
easier to see. Guess what, it looks the same as in the screenshot above.
Conclusion
Congratulations! You have completed your first GRML file. If you want, you
can save this file as a web page and download it from a URL if you are so
inclined. However, one step at a time, and in this article you have learned the
tags of a GRML file, what they do, and how to access the hyperlinks and view the
images. In the next article, you will learn how to create more advanced GRML
files and learn how to download GRML files over the web.
Until then, have fun experimenting with GRML and Pioneer.
Related Articles
An alternative to HTML
and current web browsers Code
Project/ASP.NET - HTML, XML, RML -- making a better markup language for the
web