Thursday, May 10, 2007

BASIC and CSS

One of the important aspects of integrating a programming language with web development is page layout. Until recently this would have meant inserting lots of HTML tags into your source code. You can do this with Run BASIC.

However there is a better way. It is called CSS (Cascading Style Sheets). This provides a way to wrap the things on your web page with tags that you give your own names to, and you defined the appearance of the stuff wrapped in those tags somewhere else. This way your program's code has very little extra stuff in it to clutter up your code. If there is too much clutter it can be very hard to understand what code means, and this can slow you down and lead to bugs.

So, Scott McLaughlin and I have begun to integrate CSS with Run BASIC. We added a CSSID statement (originally this blog entry had this as CSS, but we changed the command), a DIV statement, and an END DIV statement. Here's a very short example:

cssid #myTag, "{ background: #FFDDDD; font-family: tahoma }"

div myTag
print "count to ten"
for x = 1 to 10
print x
next x
end div

Okay, so this displays all the text printed between the DIV and the END DIV with a light red background, and using the tahoma font. The #myFont token isn't a handle like the ones used for files and GUI controls. The # is simply part of CSS syntax.

DIV statements can be nested, and the contents of one DIV block will be rendered on the page nested inside of each other.

There is a lot more that can be done with CSS, and we're trying to explore what are the simplest and most useful things to include in Run BASIC.

We will be posting a screencast in the next few days that shows how this works.

4 comments:

Unknown said...

Awesome. That is what I was alluding to in an earlier comment. Certainly, one could do web programming by spitting out raw HTML (appending a bunch of strings together), and this would be old style CGI. However, I think that would go against the philosophy of Basic. Instead, simple, easy-to-use objects need be accessible from the basic code - textboxes, comboboxes, etc. That is the challenge I would think. If this brings things closer to that point, then hurrah!

Unknown said...

I love this!

This is just an idea, I'm not sure how doable it would be, though. Why not allow divs and spans to be manipulated, like graphics? For instance, say you had this:

'start of code
css #myDiv, "background-color: #FF0000;"
div #myDiv
print "Woohoo!"
end div

link #aLink, "Do It", [doIt]
wait

[doIt]
#myDiv changeStyle("background-color", "#0000FF")
print #myDiv, "Did it!"
wait
'end of code

It'd certainly make it more AJAX-y. It could be used to make a very cool real-time chat application, at least in the Home and Pro versions.

Even if this isn't possible, RB still rules AJAX programming. Much, much, much easier then PHP and JavaScript and XML. :)

Carl Gundel said...

As far as AJAX is concerned, there is no support for this yet.

So what we plan to implement (though probably not for RB 1.0) is:

- A way to specify partial page updating. This is the most important part of AJAX.
- A way to do streaming HTTP. This is what you would need to do a real time chat application. Of course you could also do a timed redirect, but this isn't as nice. ;-)

Carl Gundel said...

Tom,

I agree. The way to make web programming accessible is to provide the simplest small command set that does the most. We are going to push very hard against building a BASIC with a huge web vocabulary.

Small, simple and powerful. Complexity is the enemy. ;-)