REBOL Quick Start: Part 1 By Carl Sassenrath REBOL's Designer Revised: 3-Feb-2010 • Part 1: Start Here (below) • Part 2: REBOL Scripts • Part 3: Writing Scripts • Part 4: Help from the Console • Part 5: Files, Directories, and Playing Music • Part 6: GUI Form and Submit to Server Purpose So you want to learn REBOL, but where do you start? Yes, REBOL is unique in many ways. A lot has been written about REBOL, but right now you don't want to hear about REBOL's elegant design concepts or how it creates a whole new way of programming... you just want to try it out! Am I Right? Ok, I hear you. That's why I wrote this tutorial. Time is short. Let's get to it. You can return to the details later. Many other tutorials are available. Start Here Here's the plan... we will start by downloading REBOL, then we will check out a few demos, and finally look at their code to see how they work. Along the way, I will point out important concepts that you need to know. Step 1: Download For this tutorial (and most everything else) you will need to run REBOL/View, the graphical version of REBOL. You do not need REBOL/Core. That is the server (non-graphical/console) version of REBOL. Click here to download REBOL/View now. It is very small. Over DSL, it downloads in a few seconds. Step 2: Install Run the file that you downloaded and REBOL will install itself (on Windows). Don't worry. REBOL is not going to mess with your computer. It keeps installation to a minimum, creating key folders, icons, and file associations. If you want, when you are done, you can easily uninstall REBOL. (I should point out that the REBOL installer is written in REBOL itself. It's a good example in itself.) Step 3: Run You will now see a REBOL icon on your desktop. Click the icon to start REBOL. (On Linux, BSD, OS X, etc. you start by typing ./rebol in a shell.) The REBOL window will open, and you will see the REBOL Viewtop (a mini desktop). A requestor will pop up to tell you that you need to set your user settings. Click, ok. Now click the "User" link at the top of REBOL. This provides access to REBOL Viewtop preferences. You can set your user name (or leave it as is), email address, and Internet access proxy settings (if those are necessary to connect). The settings are not mandatory to run REBOL. See Proxy Setup for details. Step 4: Connect REBOL/View automatically connects to REBOL.com to download a few file folders and check for updates. If for some reason REBOL cannot connect to the Internet, you will not be able to see the necessary folders to try the demos, examples, and tools. After a minute or two, REBOL will give up. Look at the bottom of the REBOL window, and a progress bar should flash by, and you should see a line "Connected to the Internet at ..." If so, you are good to go. If not, and you see "Local", then you did not connect. Check your "User" preferences again. Set your proxy settings if needed. REBOL uses HTTP (web) on the regular port (80), so if your normal web browser works, so should REBOL. You can click "local" at the bottom of the window to try to connect again. If you cannot get it to work, please let me know! Browsing REBOL Scripts The REBOL Viewtop is a little micro desktop/browser. Yes, it is written in REBOL, and the source code is online, so when you get good enough, you can improve on it. The Viewtop provides an easy way to jump into the world of REBOL, so let's just do that. Click on the REBOL folder, and REBOL will load and open the "REBOL Central" folder. Click on the Demos folder. Now, have at it. Click on the various icons to see a variety of simple REBOL demos. For example, click on "Clock". You will see something like: Ok, simple enough, but not very impressive, right? Now, grab the lower right corner and drag it to see the clock resize as large as you want. Still pretty basic. But, here's the cool part. Go back to the Viewtop and right click on "Clock". You will see information about the clock demo: At this point you're supposed to say, "Wow! It's only 595 bytes!" So, go ahead and say that out loud right now. View the Source Code Next, let's look at the source code for "Clock". Click the Edit button in the icon information box above. The source code will open in REBOL's tiny built-in source editor. (Yep, that source code is available for you too.) You will see: REBOL [ Title: "Digital Clock" Version: 1.3.3 Author: "Carl Sassenrath" Purpose: {A simple digital clock.} ] f: layout [ origin 0 b: banner 140x32 rate 1 effect [gradient 0x1 0.0.150 0.0.50] feel [engage: func [f a e] [set-face b now/time]] ] resize: does [ b/size: max 20x20 min 1000x200 f/size b/font/size: max 24 f/size/y - 40 b/text: "Resize Me" b/size/x: 1024 ; for size-text b/size/x: 20 + first size-text b f/size: b/size show f ] view/options/new f 'resize resize insert-event-func [ if event/type = 'resize [resize] event ] do-events This is the code for the clock demo. Hey, I know that author. So, that's an important point to know: Just like the HTML source for the world wide web, you can see the source code for REBOL scripts. Now you have one of the main tools for learning REBOL: hundreds of examples to dissect. And, when you start to write your own code, the old cut and paste approach can be useful... just as it is in HTML. Browse around the source to a few of the other demos. Although all of them are quite small, many of them are fairly advanced. Don't worry, you'll figure them out as you learn more about REBOL... Next: Anatomy of a REBOL Script In the next part of this Quick Start, you will learn the basic ideas of REBOL scripts. We will modify the above script (and make it even smaller!), as well as create a couple other example scripts. Click here to go to Quick Start: REBOL Scripts REBOL Quick Start: Part 2 - REBOL Scripts The Plan In the prior REBOL Quick Start you downloaded REBOL/View and ran some demos. But most importantly, you learned that you can get the source code to REBOL scripts, just like you do for HTML web pages. So, you now have access to hundreds of examples for learning more about REBOL. In this article, let's look closer at the format for REBOL scripts and make a few custom changes to one. An Example Script Let's go back and look at the source code for the clock demo again. REBOL [ Title: "Digital Clock" Version: 1.3.3 Author: "Carl Sassenrath" Purpose: {A simple digital clock.} ] f: layout [ origin 0 b: banner 140x32 rate 1 effect [gradient 0x1 0.0.150 0.0.50] feel [engage: func [f a e] [set-face b now/time ] resize: does [ b/size: max 20x20 min 1000x200 f/size b/font/size: max 24 f/size/y - 40 b/text: "Resize Me" b/size/x: 1024 ; for size-text b/size/x: 20 + first size-text b f/size: b/size show f ] view/options/new f 'resize resize insert-event-func [ if event/type = 'resize [resize] event ] do-events In some ways, this is a fairly advanced script. Below, we'll trim it down to more of a beginner script, and make our own customizations for it. Chop Chop Let's chop that demo down to size. It turns out that most of the code is there to make the resize feature work, so let's remove that for now to make the example even simpler. If you closed REBOL, start it again and open the clock demo source code. (As described in the prior REBOL Quick Start.) You are now in the REBOL default editor. It's a really simple editor, but for this tutorial, it will do the job. Edit the above script to delete all the lines from resize on down. Then add one new line "view f" as shown below: REBOL [ Title: "Digital Clock" Version: 1.3.3 Author: "Carl Sassenrath" Purpose: {A simple digital clock.} ] f: layout [ origin 0 b: banner 140x32 rate 1 effect [gradient 0x1 0.0.150 0.0.50] feel [engage: func [f a e] [set-face b now/time ] view f Now press CTRL-E to run the script with your changes. You should see: If you mistyped something... let's say you typed: viewf you will see a REBOL error message pop up: ** Script Error: viewf has no value ** Near: viewf Don't worry. No harm done. Go back and check that the script is identical to that shown above, make the corrections, and run it again. Do that until you get it working properly. Just for now, while you are learning, if you get an error, go back and check that your code exactly matches the example. Pay attention to spaces and special characters. Customize It Let's customize the script, but first, let's change the top part of the script to make it truly yours. Change it to something like: REBOL [ Title: "My Clock" Version: 1.0.0 Author: "My Name" ] Verify your changes look similar to those above. Don't forget any of the [ ] : or " characters. Note that the version should be 1.0.0 (2 dots) not 1.0 - we'll talk about why a bit later. The Header This top part of the script is called the REBOL header. Every REBOL script contains a header. If there is no header, REBOL will not run the script. The header is important for a number of reasons. It identifies the text file to you, other users, and also to REBOL/View itself. It provides a title, a version, the name of the author, and you can add a lot more information as well, such as the date or copyright. Click here for more about REBOL Headers. Code Body Following the header is the actual code of the script. The code that begins with: f: layout [ tells REBOL to run the layout function to create a graphical user interface (a GUI). The contents of the block (inside the [ ]) describe the GUI (just ignore that part for now, it is another dialect of REBOL -- a special shorthand notation for creating GUIs). The f: in front is a variable. You will see below how it is used. At the bottom of the script, notice the line: view f This tells REBOL to display the GUI you created earlier. It calls the view function and passes to it the value of the f variable. That value is the GUI you created with the layout function. More on this later. Change Colors In the code above, change the line that looks like this: effect [gradient 0x1 0.0.150 0.0.50] to something like: effect [gradient 0x1 150.0.0 0.0.150] and run the script again (CTRL-E in the editor). You will see that the background colors have changed. What's 0.0.150? The 0.0.150 is used to specify an RGB color value. We call such values tuples in REBOL. Each numerical part can range from 0 to 255, and for color tuples, the order of the numbers is red, green, and blue (as you would expect). You may have noticed that RGB tuple value looks similar to the version number provided in the header. Good observation. Yes, version numbers are also tuples. Tuples are useful for a variety of purposes in programming. If you want, you can read more about tuples here: REBOL Tuple values. Change Effect Now, let's make another change to the line: effect [gradient 0x1 150.0.0 0.0.150] Make it: effect [gradient 1x1 150.0.0 0.0.150] Run it, and you will see that the color gradient changes direction (diagonal now). You can also try this change to make it horizontal: effect [gradient 1x0 150.0.0 0.0.150 invert] What are we changing anyway? It's called the effect dialect block. It specifies the type of effect you want for the graphics. A wide range of effects are possible. Later, once you are more familiar with REBOL, we'll talk more about the concept of dialects, and how we use them to make programs a lot more powerful. What's that 1x0 thing? You may also be asking yourself, what is that 1x0 number? In REBOL it is used for specifying X and Y values, such as graphics positions or sizes. In REBOL, such values are called a pairs. The first integer is the X, and the second is the Y. Here is more about REBOL Pair values. Oh No! What Have You Done? Did you notice... if you go back to the REBOL/View demos folder and click on the clock demo, you will see the clock with your changes. The original script is gone! However, the 64 bit question is: does everyone on the Internet see your new script? Sorry, nope. You're safe. You only changed the file locally, the copy downloaded on your computer. No one else sees it. This is useful to know. Just like HTML web pages. You can download some code, modify it, and view it again locally. So, how do you get back the original code? Right click on the clock icon to get the information panel: