Ok! we will be discussing here today how we can fetch the fonts which are avaliable with your host and you can use them to populate in your select box. Use of different Styles and then populating popluating with different fonts really make the website asy to handle. as you can just needs to select the font from the admin panel and your whole website changes to that font:
okay! lets get Started. We need one table and we just need access to cffile tag. make sure you have access to the CFFILE tag, and make sure your host has enabled the CFFILE TAG for you.
We will be creating a Little function here which will help you in finding all the fonts which are avaliable to you. So here is the details:
So we start Now, You must have Coldfusion 7 or Coldfusion 8 to this to work. because i had tested on 7 & 8 and not on others, but i hope it will work on others too:
lets do it now:
1 step:
we create a table i am using mysql [u can use sql server, access or whatever you want to].
CREATE TABLE `fonts` (
`fontID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`fontname` VARCHAR( 255 ) NULL DEFAULT 'verdana'
) ENGINE = innodb;
Now we will create a Simple HTML page which will do the processing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
</head>
<cfinclude template="fetchfonts.cfm">
This will load the fonts from the textfile. But wait we do not know what a text file contains. So the answer is located in the above <cfinclude file>
<cffile action="read" file="#expandPath("fonts/fonts.txt")#" variable="showall">
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="1">
<tr>
<td>Please Choose a FONT:</td>
</tr>
<cfif isdefined('msg') and msg IS 1>
<tr>
<td align="center">Cool! Theme Changed Successfully</td>
</tr>
</cfif>
<tr>
<td><cfform id="form1" name="form1" method="post" action="#cgi.script_name#?#cgi.query_string#">
<table width="100%" border="0" cellspacing="2" cellpadding="1">
<tr>
<td>Choose Font:</td>
</tr>
<tr>
<td>
This is just loading the contents of the fonts from the text file. it doing nothing fancy. It is just looping over the records in the text file separed by comma and listing them here
<select name="avaliablefonts" id="avaliablefonts" tabindex="1">
<cfloop list="#showall#" index="i" delimiters=",">
<cfoutput>
<option value="#i#">#i#</option>
</cfoutput>
</cfloop>
</select>
<input type="hidden" name="fontID" id="fontID" value="#fontID#" /></td>
</tr>
<tr>
<td><input type="submit" name="sbt" id="sbt" value="Submit" tabindex="2" /></td>
</tr>
</table>
</cfform></td>
</tr>
</table>
</body>
</html>
Now we will go to fetchfonts.cfm file:
This is the meat of the of the application. it has everything we need to do with the font styling:
here is the function for this
<cffunction name="getFontNames" access="public" returntype="array" output="false" hint="Returns an array of all available system fonts. This is useful when deciding on fonts.">
<cfset var allFonts = CreateObject("java", "java.awt.GraphicsEnvironment").getLocalGraphicsEnvironment().getAllFonts() />
<cfset var fontArray = ArrayNew(1) />
<cfset var i = "" />
<cfloop from="1" to="#ArrayLen(allFonts)#" index="i">
<cfset ArrayAppend(fontArray, allFonts[i].getName()) />
</cfloop>
<cfreturn fontArray />
</cffunction>
<cfset showfonts = ArrayToList(#fontArray#)>
<cffile action="write" file="#expandPath("fonts/fonts.txt")#" output="#showfonts#">
make sure you have fonts directory and it will create the fonts.txt file inside it
This local var will be fetching all the windows fonts and show you
<cfset var allFonts = CreateObject("java", "java.awt.GraphicsEnvironment").getLocalGraphicsEnvironment().getAllFonts() />
you can place this file anywhere you like; Application.cfm or Application.cfc
Now we move ahead
Okay now we have selected the font and now we want that font to be inserted into the database
we will do something like this:
<cfif isdefined('form.sbt')>
<cfquery datasource="#dsn#" name="getrecord">
select * from fonts
</cfquery>
<cfif getrecord.recordcount>
<cfquery datasource="#dsn#">
update fonts set
fontname = <cfqueryparam cfsqltype="cf_sql_varchar" value="#form.avaliablefonts#">
where
fontID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#getrecord.fontID#">
</cfquery>
<cfelse>
<cfquery datasource="#dsn#">
insert into fonts(fontname)
values(<cfqueryparam cfsqltype="cf_sql_varchar" value="#form.avaliablefonts#">)
</cfquery>
</cfif>
<cflocation addtoken="no" url="style.cfm?msg=1">
</cfif>
i did it by very simple technique the above technique will work with all databases. you can also warp the whole functionality in a cfc and invoke it also. choice is yours. if u specially wanna use other databases like:
sql server: u can use IF EXISTS or create a stoed Procedure
MYSQL: u can use like this
insert into fonts (fontname) values (#fontname#) ON DUPLICATE KEY UPDATE fontname=#fontame#;
now we have added or updated the record in the database. we will move to the style.cfm file where we will fetch the font:
style.cfm file:
we want to use this file as css file, we will create a simple tag before we start its processing
<cfcontent type="text/css">
now i am fetch the fonts like with this query:
<cfquery datasource="#dsn#" name="getrecord">
select * from fonts
</cfquery>
<cfif getrecord.recordcount>
<cfset fontname = #getrecord.fontname#>
<cfelse>
<cfset fontname = 'verdana'>
.body {
font-family:<cfoutput>#fontname#</cfoutput>;
}
ok
now place the style.cfm in the home page as:
<link rel="stylesheet" href="style.css" type="text/css"/>
an that's all. It is working now. Full fledged system for you
Cheers
About This Tutorial
Author: Gurpreet Singh Randhawa
Total Views: 14,390
Submission Date: September 24, 2009
Last Update Date: September 24, 2009
All Tutorials By This Autor: 9
Skill Level: Beginner
Platforms Tested: CFMX,CF8Total Views: 14,390
Submission Date: September 24, 2009
Last Update Date: September 24, 2009
All Tutorials By This Autor: 9
Discuss This Tutorial
Advertisement
