Hello World

Flex is the Flash SDK from Adobe, you can download a open source command line compiler from adobe (Flex open source page ). The Free SDK link is here.

Once you have downloaded the free SDK, you will need to place into the system. I have placed mine into /opt directory called flex_sdk_3, so something like (you will need to be root to do this!)

cd /opt
mkdir flex_sdk_3
cd flex_sdk_3
unzip <place where your free sdk is)

and then create a place for where you are going to be creating your flex scripts, I placed mine into my home directory under my programming/flex sturcture, so this is where I am

mkdir -p ~/Programming/flex/

The -p will create any directories that are not present there already, and also the ~ is for the home directory that user.

I then copied the flex-config.xml from the /opt/flex_sdk_3/frameworks directory into the Programming/flex directory and edited it to the new values.
The full differences between the standard flex-config.xml and the one that I have altered is below, but basically I have added into the xml elements values the new directory for where flex-sdk is (e.g. /opt/flex_sdk_3/) so that flex’s command line environment will know where to get the libraries to compile and create the swf (ShockWave Flash), but here are the elements that I have altered.

<external-library-path>
     <path-element>/opt/flex_sdk_3/frameworks 
<library-path>
     all the <path-element's>/opt/flex_sdk_3/frameworks
<namespaces>
   the <manifest>/opt/flex_sdk_3/frameworks path to the framework directory file.

Because the class structure follows the directory structure of the directories below the compiling environment, I created the following directory structure com/codingfriends/helloworld with

mkdir -p com/codingfriends/helloworld

which will create the whole structure if there is no directories there already.

Then you can place these two files into the helloworld directory

This is the class Greeter that is created and turned into a object within the swf file save this as Greeter.as

// the directory structure of where the class is.
package com.codingfriends.helloworld
{
	public class Greeter
	{
		private var name:String;
 
		// constructor
		public function Greeter(initialName:String="Ian")
		{
			name = initialName;
		}
 
		// sayHello returns a String
		public function sayHello():String
		{
			var result:String;
			// if the class private name is present
			if (name!=null && name.length >0)	
			{
				result = "Hello there, "+name+".";
			}
			// should never reach here on a basic run.
			else 
			{
				result="Hello there.";
			}
 
			return result;
		}
	}
}

var = variable and the type of variable or return variable is at the end of the definition e.g.

public var name:String; // this is a variable named "name" and it is of type String
public function sayHello():String // this is a function named "sayHello" and returns a String type

save this as Greeter_mx.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp();">
<mx:Script>
<![CDATA[
import com.codingfriends.helloworld.Greeter;
// the initialize application .. the start
private function initApp():void
{
	// create a new Greeter object with no passing in name
	var myGreeter:Greeter = new Greeter();
	// and say hello world 
	output.text+=myGreeter.sayHello();
	// create a new greeter with the name = genux instead
	var newGreeter:Greeter = new Greeter("genux");
	output.text+=newGreeter.sayHello();
}
]]>
</mx:Script>
 
<mx:Text id="output" width="100%" textAlign="center"/>
</mx:Application>

The is the place where the code starts, the rest is just the adobe application settings, within the code there is a reference to “output”, which is defined in the

PATH=$PATH:/opt/flex_sdk_3/bin

and then to compile up the source code

mxmlc -load-config flex-config.xml -source-path=~/Programming/flex/actionscript/ ./com/codingfriends/helloworld/Greeter_mx.mxml -output ./bin/Greeter_mx.swf

the -load-config will load the one in the present directory which I altered, and -source-path is there so that the base directory is used for compiling so the compiler will know where to get the com/codingfriends/helloworld/Greeter.as and Greeter_mx.mxml, and the -output is what the output flash file is/placed.

Here is the output of the Greeter.swf file.


Here is the difference (diff) between the flex-config.xml from the one that I edited and the one that was in the /opt/flex_sdk_3/frameworks directory.

53c53
<           <path-element>/opt/flex_sdk_3/frameworks/libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element>
---
>           <path-element>libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element>
70c70
<          <path-element>/opt/flex_sdk_3/frameworks/libs</path-element>
---
>          <path-element>libs</path-element>
72,74c72,74
<          <path-element>/opt/flex_sdk_3/frameworks/libs/player</path-element>
<          <path-element>/opt/flex_sdk_3/frameworks/libs/player/{targetPlayerMajorVersion}</path-element>
<            <path-element>/opt/flex_sdk_3/frameworks/locale/{locale}</path-element>
---
>          <path-element>libs/player</path-element>
>          <path-element>libs/player/{targetPlayerMajorVersion}</path-element>
>            <path-element>locale/{locale}</path-element>
82c82
<             <manifest>/opt/flex_sdk_3/frameworks/mxml-manifest.xml</manifest>
---
>             <manifest>mxml-manifest.xml</manifest>

Java applet – hello world

A java applet is a web object that allows you to do some funky things within a web page, you could even have a game on the screen with a java applet. But as normal you have to start from the start as such, the most used starts are the classic “hello world” example.

In a java applet, it is basically a class called Applet that you extend from and this has all of base code inside it so you only need to implement the virtual functions

  1. init
  2. start
  3. paint
  4. destory
  5. stop

And these are the basic functions that allow you to call other classes of your choice. The init – (initialize), setups up the environment of your choice, start is where the application (GUI interface) will run within, paint is what is painted to the applet screen, destory is when you destory the applet you may need to clean up some code, stop is when the application/applet is stopped.

The main basic class will extend from a applet (java.applet.Applet) so you will need to import that class library

import java.applet.Applet;
 
// basic class extends the applet
public class HelloWorld extends java.applet.Applet {

and then implement the functions start,init,stop,destory and paint if required. Below is more code that will resize the basic applet object and display (paint) the words Hello World using the Graphics class object drawString method.

import java.awt.Graphics;		// need this for the Graphics part of the paint function
import java.applet.Applet;		// to extend from.
 
public class HelloWorld extends java.applet.Applet {
 
    // resize the screen 
    public void init()
    {
	resize(150,25);
    }
 
    public void start()
    {
    }
 
    // draw with the Graphics class object a string on the canvas, point 50, 25
    public void paint(Graphics graphicsObj)
    {
	graphicsObj.drawString("Hello World!", 50,25);
    }
 
    public void stop()
    {
    }
 
    public void destroy()
    {
    }
}

Is you save that as “HelloWorld.java” and then you need to compile it into a class file (which is a common object file that java can read to run within the virtual machine).

javac HelloWord.java

which will output the HelloWorld.class file, which you will need to include into the html code applet tag, below is the HTML code

<HTML>
<head>
<title>A hello world</title>
</head>
<body>
Test output of the program
<applet code="HelloWorld.class" width=150 height=25>
</applet>
</body>
</HTML>

The output would be

Test output of the program

Note: If you look at the source code of this page, it will say

<applet code="HelloWorld.class" codebase="/Appletsexamples/"  archive="HelloWorld.jar" width="150" height="25"></applet>

I had to add in the codebase and archive because of the hosting, to create a jar file you just need to do

jar cf <tarname> <file(s) name>
 
jar cf HelloWorld.jar HelloWorld.class

The jar file is basically a zipped archive.

const – constants in functions

Const is a constant type, it makes what is talking to a constant value. The value cannot be altered in anyway, a good reason for this could be for a constant string for error codes or if the value of a variable needs to be checked but not altered in anyway.

Pointers can be constants too and also there are many places that you can put the const type. Here are some examples

// constant integer value
const int constValue = 3;
// normal value.
int Value = 10;
 
//pointers can be constants too
const int * pConst = &constValue;
//the pConst is a pointer to a const int value, the value pointed to cannot be altered, but the pConst memory location can to where it is pointing to.
int * const pConst = &Value;
// here the pConst value pointed to can be altered, but the memory location for the pConst for where it is pointing to cannot be altered (always pointing to the same place).
// of course you can have both.
const int * const pConstConst = &constValue;
// here it is a const int value that has a const pointer that is not allow to change.

You can also place const around the function definition as well, there are three places where you can place the const type.

const int returnValue(const int value1) const;

In the order of the const on the function definition list

  1. constant return type, cannot alter the returned value (unless you place it in a another variable)
  2. constant parameter passed, you cannot alter the value1 in this case
  3. constant “this”, this is the class that it is placed in and you cannot alter any values within that class

I have placed below some code that will hopefully explain more for the different types and also the error codes that come if you try and compile up if you are not obeying const rules and I placed the code below for what caused the error.

#include 

using namespace std;

// there are 3 different places you can put a const (constant)
// restriction on a function definition line.
// const int returnConstInt(const int value1) const
// {
// }
// in order of placement in the function definition line
// 1: cannot alter the returning value
// 2: cannot alter the passing value
// 3: cannot alter the values of "this" as being the class this

class constTest {
private :
int value;
public:
constTest() { value = 0;};

int returnIntConst(int passingValue) const;
};

// cannot alter any value for the class variables e.g. value in this case.
// of course you could do a const_cast.. which takes off the constant (const) type
int constTest::returnIntConst(int passingValue) const
{
// cannot alter any value inside the function
// assignment of data-member

Pointers and references – part 2

As a follow on from the part 1 – pointers and references – this tutorial is all about how to pass pointers and references, with usage in functions.

As shown in the previous tutorial, a pointer is just a point to another memory location where the data is actually stored and a reference/address is the address (memory) location of a variable. e.g.

int *pInt= NULL;
int intValue = 10;
pInt = &intValue;

Here the pointer (*pInt) is first set to NULL, to point to no where in memory because it may have a rogue data in there and you would not want that. Then the intValue variables is set to 10 and then pInt value is set to the memory (address/reference) location of intValue.

When passing a parameter to a normal function you are just passing a copy of the value and not the actual variable being passed, so that if you make any alternations to that parameter variable is it not reflected back into the variable that was actual passed. I have included code at the bottom with the output that displays the memory locations of the local (function variables parameters) and the parameters passed and you can see that the memory location is different in the standard copy-value function (normalReturnMethod).

So for a coding example

int normalReturnMethod(int value)
{
    value = value +2;
    return (value);
}
 
int intValue = 10;
 
int newValue = normalReturnMethod(intValue);
cout << "new Value :  " << newValue << " intValue  : " << intValue;

and the output would be

new Value = 12 int Value : 10

Because even though in the function we are incrementing the variable value, it has not direction relationship with the intValue that was passed to it.

But if you did a pointer (*) in the parameters of the function, then the actual variable memory location is passed and not just a copy of the variable, in which case you can alter the variable.

For example in code

void pointerReturnMethod(int *pValue)
{
    // increment the value pointed to in the pValue parameter
    *pValue +=2;
}
int intValue = 10;
pointerReturnMethod(&intValue);
cout << "intValue = " << intValue;

and the output would be

intValue = 12

Because the function is talking to the parameter variable passed, instead of just a copy and you can do anything on that parameter as you would normally.

The other method is by passing a reference to the function instead of a address (memory) location or copy-of-value, this one is slightly more fun, because since you do not alter the way that you knowing are passing the variable e.g. passing in the memory location with the &, then you could think it is just the copy-of-value function and it may alter the passing variable as well, which really is not a good thing.

Code example

void referenceReturnMethod(int &fValue)
{
    fValue +=4;
}
 
int intValue = 10;
referenceReturnMethod(intValue);
cout << "intValue = " << intValue;

and the output would be

intValue = 14;

which if you was not wanting to pass the reference to the variable to be “worked on” as such, then you may hit some problems with debugging and start to wonder why the variable was alter when passed to a function.

Here is some more code that you can compile up and see what is happening. have fun.!!

#include <iostream>
 
using namespace std;
 
int normalReturnMethod(int value)
{
    cout << "normal Return Method memory location " << &value << endl;
    return (value + 2);
}
 
// pass in the pointer to a variable, the pointer (*)value is the same place 
// instead of a copy as normalReturnMethod parameter
void pointerReturnMethod(int *pValue)
{
    // increment the value pointed to in the pValue parameter
    *pValue +=2;
    cout << "pointer Return Method memory location  " << pValue << endl;
}
 
// pass in the reference to the method in the parameter, the reference is 
// a reference point to the passed in variable e.g. same place.
void referenceReturnMethod(int &fValue)
{
    fValue +=4;
    cout << "reference Return Method memory location " << &fValue << endl;
}
 
int main()
{
    // the standard way to update a value is to return a value
    // this is called the copy-variable way - it copies the value from the passing parameter to the function parameter
    int returnValue = normalReturnMethod(10);
    cout << "Hex value of memory place of returnValue " << &returnValue << endl;
    cout << "The new interger value " << returnValue << endl;
 
    // but if you pass the reference of variable &, this will alter the actually variable instead of needing to 
    // pass the variable back in the return type. - it passes a memory location reference
    pointerReturnMethod(&returnValue);
    // the returnValue has been altered.
    cout << "The new interger value " << returnValue << endl;
 
    referenceReturnMethod(returnValue);
    cout << "The returnvalue updated " << returnValue << endl;
    cout << "The memory address of the reference/pointer functions are the same as the returnValue hex value"<< endl;  
    cout << endl  << endl;
 
    int *valuePointer = &returnValue;
    // the find out the difference * and & here are the values
    cout << "The Hex value of memory place for returnValue and the VALUE of the memory place for the pointer are the same"<< endl;
    cout << "The value of the value pointer " << valuePointer << endl;
    cout << "Hex value of memory place of returnValue " << &returnValue << endl;
    cout << "The actually memory place of the valuepointer " << &valuePointer << " and the POINTED value " << *valuePointer << endl;
    cout << "And of course the valuepointer is the same, because it is pointing to the same place " << *valuePointer << endl;
 
 
    // the pointer (*) is the pointed to memory location. e.g. int value=10 could be a memory location that is pointed to
    // the reference (&) is the memory address of the variable
    // so for a pointer you need to set the memory location of a variable to its value, which in turn its 
    // pointed value is the variable, but its address/reference (&) is always the same becaues that is the place where
    // the pointer variable is setup, but the value (the memory location) is what alters.
    return 0;
}

and my test outputs would be, of course your memory locations will be different.

normal Return Method memory location 0x7fff34d8d1bc
Hex value of memory place of returnValue 0x7fff34d8d1dc
The new interger value 12
pointer Return Method memory location  0x7fff34d8d1dc
The new interger value 14
reference Return Method memory location 0x7fff34d8d1dc
The returnvalue updated 18
The memory address of the reference/pointer functions are the same as the returnValue hex value
 
 
The Hex value of memory place for returnValue and the VALUE of the memory place for the pointer are the same
The value of the value pointer 0x7fff34d8d1dc
Hex value of memory place of returnValue 0x7fff34d8d1dc
The actually memory place of the valuepointer 0x7fff34d8d1d0 and the POINTED value 18
And of course the valuepointer is the same, because it is pointing to the same place 18

Box model

Introduction

The box model within HTML is how the content and the area around it is defined. There is the content itself, paddings, border and margin’s. Each one can be altered and also each part of the top,bottom,left and right.

Image of the box model

box model in HTML
box model in HTML

Green : content
Blue : padding
red : border
yellow : margin

How to alter the each aspect of the model

To alter the margin for example you just need to define the actual HTML object that you want to “talk” to, so lets define that first.

<div id="alterhere">
hi there this is the content
</div>

and then to talk to the HTML object you just select it ( if was a class then you use “.” or if it was a id then use “#”, the way that I remember is that “.” is like class method call in c++/java/c# etc and “#” is what you could call a variable).

#alterhere 
{
margin : 20px;
}

means to have a full margin of 20px (pixels) but to pull out just the left part to be bigger then

#alterhere
{
margin-left : 50px;
}

so the margin left will now be 50px instead of 20px. You can do the same for padding as well, padding-left, padding-right, padding-top, padding-bottom.

Conclusion

The box model is very nice and also allows you to fully control the content and the box around it.