Simple chart shows a single data series, where a series is a group of related data points. For example, a data series might be a company profits. Another chart might be add a second data series. You might include the percentage growth of profits over the same business quarters.

Now, I assumed that you already have a Flex Builder Professional installed in your pc or you can go to Adobe website.

Flex charting controls lets you create some of the most common chart types, and also lets you customize the appearance of you charts. The charting controls are located in the mx.chart.* package.

The following tables lists the supported chart types, the name of the control class, and the name of the series class that you use to define what data appears in each chart.

In this example, will be using the Bar chart but before we begin lets try to look the BarChart and BarSeries Class description.

BarChart
The BarChart control represents data as a series of horizontal bars whose length is determined by values in the data. A BarChart control can represent different chart variations, including simple bars, clustered bars, stacked, 100% stacked, and high/low.

The BarChart control expects its series property to contain an array of BarSeries objects.

Stacked and 100% bar charts override the minField property of their BarSeries objects.

BarSeries
Defines a data series for a BarChart control. By default, this class uses BoxItemRenderer class. Optionally, you can define an itemRenderer for the data series. The itemRenderer must implement the IDataRenderer interface.

yField – Specifies the field of the data provider that determines the y-axis location of the base of each bar in the chart. If you omit this property, Flex arranges the bars in the order of the data in the data provider.

xField – Specifies the field of the data provider that determines the x-axis location of the end of each bar.

miniField – Specifies the field of the data provider that determines the x-axis location of the base of a bar. This property has no effect in overlaid, stacked, or 100% stacked charts. For more information on using the minField property.

The following example creates a simple BarChart control:

A bar chart is essentially a column chart rotated 90 degress clockwise; therefore, bar charts and column charts share many of the same characteristics. For more information please see the live doc in Adobe Flex, click here.

Regular CSS for FF, IE7, Opera, Safari:

Image border:

Regular border:

The above code :first-child won’t work in IE6, so for IE6 CSS hack the code are:

CSS for IE 6 (using conditional comments)

There are various CSS hack in web, look for the best that work in your website.

Scalable Inman Flash Replacement (sIFR) is a technology that allows you to replace text elements on screen with Flash equivalents. sIFR lets you use your favorite font on the website without the user having it installed in their computer and by cleverly working with Flash, JavaScript and CSS.

sIFR requires JavaScript to be enabled and the Flash player plugin in the reading browser. If either the two condition is not present then the reader’s browser will automatically display the traditional way using CSS based styling, the user will not notice or know the difference.

Before will begin this tutorial, please note that you’ll need the Flash 8 Editor in order to export the Flash movies. To help get up and running quickly see the details in Flash Configuration and JavaScript Configuration.

Download the latest sIFR release, click here.

Now to export new typeface, open the sifr.fla in Flash Professional and double click the visible Movie Clip then inside that movieclip there is a dynamic text then click that one. If the “Properties” palette is not already visible, open it by selecting “Windows > Properties”, and select your desire font. You can also create bold and italic styles for you font by clicking on the “I” or “B” buttons. To export the swf file, choose “File > Export > Export Movie”, and save as yourfontname.swf. Maker sure to export as Flash 6!.

If you don’t have a Flash Professional then you can also try the sIFR Font Embedder for Window or OpensIFR for Mac OS X (this is also work in Windows).

Applying CSS print styles

Copy and paste the CSS rules found in the sIFR-print.css to you own print style sheet. These ensure that your original headline styling will be printed, rather that the Flash replacements.

Applying CSS screen style

Apply the styles in the sIFR-screeen.css file with your own screen style sheet. These are the styles wich will be applied by the Javascript if Flash is found to be present on the user’s browser.

Including the Javascript

You must call the sifr.js script on any page that will be replacing headlines. Include the following line after the begin of the “<head>” tag or before the closing tag of the </head>, below is the code:

Now, to embed your font copy also the sifr-config.js and put it to the path of sifr.js. Then call the file, the same what we did in sifr.js. Edit the sifr-config.js then change the variable name and the source. For example will use Zafino font, so the code should look like this:

Remember try using the font name as the variable name, it is easy to remember which object you’re using. Next is to activate the sIFR. Put this code below the variable name:

You can also use multiple movies, like so:

Note: There must be “Only One” sIFR.activate(). Now we can do the replacements. You can do as many as you like, but as an example, we’ll replace all ‘h3′ element with the Zafino movie.

The first argument to ’sIFR.replace’ is the ‘zafino’ object we created earlier. Second argument is another object, on which you can specify a number of parameters or “keyword arguments”. For the full list, click here

The first argument you see here is ’selector’, which is a normal CSS selector. That means you can also do things like id and class selector ‘#left h1′ or ‘h1.title’. The second argument determines what the Flash text looks like. The main text is styled via ‘.sIFR-root’ class. Here we’ve specified background-color and color of the text. To read more about styling, click here

I’ve already tested this one and It works, I had no trouble in most of the browser.

How to Load the XML?

MXML makes loading external files easy with the HTTPService tag. The HTTPService tag can have a single request tag under which the parameters can be specified. Insert the code below under the opening application tag.

Now you just created an HTTP Service with an id of “siteData” which links to the XML file in the assets folder. The results are formatted in e4x, which allow us to filter through the contents of the XML. In order for this url to be loaded, we must tell the application to send the request. Add the event “creationComplete” to the opening application tag.

When the page loads the creationComplete is called. In the above code when the page is finished loading then the HTTPService named “siteData” should be sent. You can test you application now without errors if the XML is being loaded correctly.

Will need a storage variable for XML data to store itself while we work it. Insert a script tag below the opening application tag and declare the following variable.

XMLList type allows us to load XML data in and access each node. Now creat a function that will load data from the XML file and display it in labels. Insert the code below in the script tag.

Insert some components below the HTTPService tag for the results. Will add buttons to control navigation.

Run your application. If everything is working as it should. When a button is pressed the data from the XML file is loaded up for each page. Try loading a url of an image from an XML file with Flex Builder 3. XML has a wide number of posibilities to explore.

See the live demo, click here.

There may be a time when you are adding pages or post to your blog that you don’t what that page or post to show up in main navigation or in a list of post. I have a thank you page and I only want to show it up after the user click the submit button in my register page. So lets get started.

Make sure you have FTP access to your site then find your blog’s current theme directory (domain/wp-content/themes/nameOfTheme). Look for the header.php open this file in your favorite text editor.

For pages try to look find this code:

Now will use the exclude parameter to hide certain Pages from the list to be generated by wp_list_pages.

First thing we should know the ID number for a certain page. And how we should know this, go into your WordPress Administrator panel, click Pages, then drag the mouse over to the page that you want to hide and see on the status bar the ID number for that page. For example the Thank you page and I have an id=20. So the code should look like this now:

Notice we have extra code which is tittle_li and exclude. Now tittle_li is the list of pages and the exclude is the one who hide a certain page/s. Even though the page is hidden you can still access it using the page link. For multiple pages to be excluded just used comma to separate each ID numbers. Don’t for get the & sign to separate the tittle_li and exclude.

If you still don’t get it please don’t hesitate to leave a comment or send me an email and I’ll do what I can to get things working.

First thing first, you must have Adobe Flex Builder 3 and Adobe AIR in your system. If you don’t have one click this link www.adobe.com.

Now, Create new MXML project File>New or shortcut key ALT+SHIFT+N (windows) then chose Flex Project. And type project name, I use HtmlWindow then in Application type chose Desktop application (runs in Adobe AIR) and then click finish. You’ll see a code in your window just like below:

Then insert this code:

The HTML control lets you display HTML content in your application, width and height is the size of your application, location property to specify the URL of an HTML page whose content is displayed in the control.

Now, the code should look like this:

Now lets test your application by pressing Run HTML button or go to RUN->RUN HTML or shorcut key CTRL+F11.

Next will add some navigation button, so that you can input url and also have a forward and back button. Ok now above HTML tag put a Horizontal Box. Inside that HBox tag, you’ll to have Label, TextInput and 3 buttons which is Go, Forward and Back. Your code should look like this:

For Label tag:

For textInput tag which have an id and called myText:

For 1st button which is label “Go There” and click attributes, location property will change the value of the control’s.

For 2nd & 3rd button which is label “Forward” and click attribute with historyForward() and historyBack() methods.

Your code now should look like this:

That’s it! Test again. I hope this tutorial is helpful to someone. Download the source file.

How to include a Header

To include the header from your WordPress Theme you must add code below to the top of the page and using the folder path name you installed WordPress into.

Here is the code:

The purpose of requiring or including wp-blog-header.php is to let you use of any WordPress function or template tag.

Note: In rare cases declaring the WP_USE_THEMES constant to false may produce non-CSS formatted page output.

How to Include The Sidebar or Footer
To add the sidebar and/or footer from your WordPress Theme, include one or both of the following code:

include this at the right container of your WordPress Theme:

include this at the bottom of the page:

I hope this tutorial is helpful.