/<Your package>

/item

/content

/<your class>

/content

/<your class>

protected $package = 'vBCms';
protected $class = 'Static';
protected $config = array('html' => 'Enter HTML here.');

/*Properties======================================= =============================*/

/**
* A package identifier.
* This is used to resolve any related class names.
* It is also used by client code to resolve the class name of this widget.
*
* @var string
*/
Declare the package and class. You need to do this so the data managers and other components know how to handle inputs
protected $package = 'vBCms';

/**
* A class identifier.
* This is used to resolve any related class names.
* It is also used by client code to resolve the class name of this widget.
*
* @var string
*/
protected $class = 'Static';


/*Render=========================================== =============================*/

/**
* Returns the config view for the widget.
*
* @return vBCms_View_Widget - The view result
*/


Here's the first essential function. This creates the configuration interface and saves data. There is a template called vbcms_widget_static_config.

public function getConfigView()
{

Ensure we have been fully loaded. The classes use lazy loading

$this->assertWidget();

Verify and store the form variables we want.
'do' => vB_Input::TYPE_STR,
'html' => vB_Input::TYPE_STR,,
'template_name' => vB_Input::TYPE_STR
));


Get the template view. This rendering of templates is new for the CMS system. You can use the old methods, but this will be a bit faster.

$view = new vB_View_AJAXHTML('cms_widget_config');
Set the title

$view->title = new vB_Phrase('vbcms', 'configuring_widget_x', $this->widget->getTitle());
load the configuration

$config = $this->widget->getConfig();


See if we have data to save. verifyPostId, together with the addPostId function, adds a security layer



if (('config' == vB::$vbulletin->GPC['do']) AND $this->verifyPostId())
{

get the data manager and set the values

$config['html'] = str_replace('%u0025', '%' , vB::$vbulletin->GPC['html']);
if (vB::$vbulletin->GPC_exists['template_name'])
{

$config['template_name'] = vB::$vbulletin->GPC['template_name'];

}

$widgetdm = $this->widget->getDM();
$widgetdm->set('config', $config);


We don't really need this call in this widget. We have the ability to define widgets which have a per-page configuration. For this widget we have a single configuration site-wide. If you want a different statichtml widget you make a new widget instance. We left it here in case we want to extend it later.

if ($this->content)
{

$widgetdm->setConfigNode($this->content->getNodeId());

}
Save it
$widgetdm->save();
Check for errors, and display a message if we need to.
if (!$widgetdm->hasErrors())
{

if ($this->content)
{

$segments = array('node' => $this->content->getNodeURLSegment(),
'action' => vB_Router::getUserAction('vBCms_Controller_Content ', 'EditPage'));
$view->setUrl(vB_View_AJAXHTML::URL_FINISHED, vBCms_Route_Content::getURL($segments));
}

Show we're finished
$view->setStatus(vB_View_AJAXHTML::STATUS_FINISHED, new vB_Phrase('vbcms', 'configuration_saved'));

}
else
{

if (vB::$vbulletin->debug)
{

$view->addErrors($widgetdm->getErrors());

}

// only send a message
$view->setStatus(vB_View_AJAXHTML::STATUS_MESSAGE, new vB_Phrase('vbcms', 'configuration_failed'));

}

}
else
{

Now let's create the configuration interface. First create the view

// add the config content
$configview = $this->createView('config');


if (!isset($config['template_name']) or ('' == $config['template_name']) )
{

$config['template_name'] = 'vbcms_widget_static_page';

}

Add the html code
$configview->html = $config['html'] ? htmlspecialchars_uni($config['html']) : '';

// item id to ensure form is submitted to us
Set the form variables for security
$this->addPostId($configview);

Load the configuration and status

// send the view
$view->setStatus(vB_View_AJAXHTML::STATUS_VIEW, new vB_Phrase('vbcms', 'configuring_widget'));

}
and return the view

return $view;
}




And the second function. This creates the widget.


/**
* Fetches the standard page view for a widget.
*
* @return vBCms_View_Widget - The resolved view, or array of views
*/
public function getPageView()
{

ensure the widget is properly loaded

$this->assertWidget();

get the configuration- in this case it's the html code and the template

$config = $this->widget->getConfig();


if (!isset($config['template_name']) or ('' == $config['template_name']) )
{

$config['template_name'] = 'vbcms_widget_static_page';

}

instantiate the view

// Create view
$view = new vBCms_View_Widget($config['template_name']);


set the class, title, and description

$view->class = $this->widget->getClass();
$view->title = $this->widget->getTitle();
$view->description = $this->widget->getDescription();

load it into the view
$view->static_html = $config['html'];
and return the view
return $view;

}

<smallfont>Here is some small text</smallfont>

<font size="1" family="verdana, arial, helvetica, sans-serif">Here is some small text</font>

.tcat {

color: #FFFFFF;
font-size: 10pt;
font-weight: bold;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
background-color: #869BBF;
background-image: url(../../images/gradients/gradient_tcat.gif);
background-repeat: repeat-x;
padding: 6px;

}

.tcat {

color: {vb:stylevar tcat_color};
font-size: {vb:stylevar tcat_fontSize};
font-weight: {vb:stylevar tcat_fontWeight};
font-family: {vb:stylevar tcat_fontFamily};
background-color: {vb:stylevar tcat_backgroundColor}
background-image: {vb:stylevar tcat_backgroundImage}
background-repeat: {vb:stylevar tcat_backgroundRepeat};
padding: {vb:stylevar tcat_padding};

}

.whatever {

font-family: {vb:stylevar thead_fontFamily};
background-color: {vb:stylevar tcat_backgroundColor};

}

.foo {

font-size: 10pt;
font-weight: bold;
font-family: verdana;
background-color: red;
background-image: url(image.png);
background-repeat: repeat-x;

}

.foo {

font: 10pt bold verdana;
background: red url(image.png) repeat-x;

}

.foo {

font: {vb:stylevar foo_font.fontSize} {vb:stylevar foo_font.fontWeight} {vb:stylevar foo_font.fontFamily};
background: {vb:stylevar foo_background.backgroundColor} {vb:stylevar foo_background.backgroundImage} {vb:stylevar foo_background.backgroundRepeat};

}

.foo {

font: {vb:stylevar foo_font};
background: {vb:stylevar foo_background};

}

<style type="text/css">
#mydiv {

width: 600px;
height: 400px;

}
</style>
...
<div id="mydiv">My 600 x 400 div</div>

<style type="text/css">
#mydiv {

width: 600px;
height: 400px;
padding: 10px;
border: solid 1px black;

}
</style>
...
<div id="mydiv">My 622 x 422 div</div>

<style type="text/css">
#mydiv {

width: 578px;
height: 378px;
padding: 10px;
border: solid 1px black;

}
</style>
...
<div id="mydiv">My 600 x 400 div</div>

<style type="text/css">
#mydiv {

width: 578px;
height: 378px;
padding: {vb:stylevar mydiv_padding}; /* set to 30px */
border: solid {vb:stylevar mydiv_border.borderWidth} black; /* set to 3px */

}
</style>
...
<div id="mydiv">Oh dear, a 644 x 444 div</div>

<style type="text/css">
#mydiv {

width: {vb:math 600 - {vb:stylevar mydiv_padding} * 2 - {vb:stylevar mydiv_border.borderWidth} * 2}px;
/* assuming padding = 10, border = 1 -> 600 - 10 * 2 - 1 * 2 = 578 */
height: {vb:math 400 - {vb:stylevar mydiv_padding} * 2 - {vb:stylevar mydiv_border.borderWidth} * 2}px;
/* assuming padding = 10, border = 1 -> 400 - 10 * 2 - 1 * 2 = 378 */
padding: {vb:stylevar mydiv_padding};
border: solid {vb:stylevar mydiv_border.borderWidth} black;

}
</style>
...
<div id="mydiv">My 600 x 400 div</div>

1. Static HTML: This allows you to enter any static html. That means you can put a remote page in an i-frame, or an image, or a google gadget, or a lot of other things.
2. Static BB Code: This gives you the BBCode editor and lets you put the results into a widget.
3. My Friends: You can specify a content type (posts, social groups, social group messages, visitor messages, CMS articles, or CMS static html), a maximum age, and a maximum count, and your users will see that content posted by their friends.
4. Recent Polls: You can specify either a specific poll or list of polls, or a specific user, and/or a forum, plus a maximum age and count, and you'll see a summary of matching polls.
5. RSS Feed: You can pull RSS content in RSS2 or atom format and see it in the widget.
6. Navigation: You can specify any combination of top-level nodes, parent nodes of the current page, and/or siblings of the current page. I find this on the right with all three options on, plus the breadcrumbs along the top, to be a good way to move around in cms. You may like something different.
7. Recent activity: This gives you threads which have had at least one post in the last X days (default is 1). You can set a maximum count (default is 10). Within that, you get the threads with:
   1. Most recent activity
   2. Most views
   3. Most responses
8. Generalized Search Widget: This is by far the most powerful. You can specify
   1. A content type. Default is everything, which then ignores the type-specific options.
   2. A Forum, with or without its children
   3. A social group category
   4. A social group
   5. A user
   6. All friends
   7. Keywords
   8. Tags
   9. Prefixes
   10. Maximum age
   11. As always, maximum count

• It can't be so complex that novice administrators will never be able to edit their templates
• It must be sufficiently flexible to allow restyling by administrators at many levels of proficiency
• It must be capable of adapting to elements being conditionally available due to permissions, options etc.

<div id="header">
	<div><a href="forumhome.php" id="logo-image"><img src="images/logo.png" alt="" /></a></div>
	<div id="toplinks">
		<a href="#">Kier</a>
		<a href="#">Settings</a>
		<a href="#">Log-out</a>
	</div>
	<hr />
</div>

<div id="navbar">
	<ul id="navtabs" class="floatcontainer">
		<li><a class="navtab" href="#">Site</a></li>
		<li class="selected"><a class="navtab" href="#">Forum</a>
			<ul class="floatcontainer">
				<li><a href="#">User CP</a></li>
				<li><a href="#">New Posts</a></li>a
				<li><a href="#">Today's Posts</a></li>
				<li><a href="#">Mark all Forums Read</a></li>
				<li><a href="#">Subscribed Threads</a></li>
				<li><a href="#">Private Messages</a></li>
			</ul>
		</li>
		<li><a class="navtab" href="#">Blog</a></li>
		<li><a class="navtab" href="#">Projects</a></li>
		<li><a class="navtab" href="#">Calendar</a></li>
	</ul>
</div>

<div id="breadcrumb">
	<ul class="floatcontainer">
		<li class="navbit"><a href="#" name="top">My Site</a></li>
		<li class="navbit"><a href="#">Forums</a></li>
		<li class="navbit"><a href="#">General</a></li>
		<li class="navbit"><a href="#">Off-Topic Stuff</a></li>
		<li class="navbit"><a href="#">The Forumdisplay Example Forum</a></li>
	</ul>
	<hr />
</div>

<div id="pagetitle">
	<h1>The New vBulletin Style Forums</h1>
	<p class="description" id="welcomemessage">Welcome to The New vBulletin Style Forums.</p>
	<p class="description" id="firstvisitmessage">If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.</p>
</div>

<div id="forum_info_options" class="block">
	<h4 class="blockhead">Forum Information and Options</h4>
	<div class="blockbody floatcontainer">	
		<div id="forum_info_block_1">
			
			<div id="forum_posting_rules">
				<h5 class="blocksubhead">Posting Permissions</h5>
				<ul class="blockrow">
					<li>You <strong>may</strong> post new threads</li>
					<li>You <strong>may</strong> post replies</li>
					<li>You <strong>may</strong> post attachments</li>
					<li>You <strong>may</strong> edit your posts</li>
				</ul>
				<ul class="blockrow">
					<li><a href="#">BB code</a> is enabled</li>
					<li><a href="#">Smilies</a> is enabled</li>
					<li><a href="#">[IMG]</a> code is enabled</li>
					<li>HTML is disabled</li>
				</ul>
			</div>

		
			<div id="forum_moderators">
				<h5 class="blocksubhead">Moderators of this Forum</h5>
				<ul class="blockrow commalist">
					<li><a class="username" href="#">Mickey</a></li>
					<li><a class="username" href="#">Donald</a></li>
					<li><a class="username" href="#">Goofy</a></li>
					<li><a class="username" href="#">Pluto</a></li>
					<li><a class="username" href="#">Daisy</a></li>
					<li><a class="username" href="#">Minnie</a></li>
					<li><a class="username" href="#">Pete</a></li>
				</ul>
			</div>
			
			<div id="forum_icon_legend">
				<h5 class="blocksubhead">Icon Legend</h5>
				<dl class="blockrow">
					<dt><img src="images/statusicon/thread_new-16.png" alt="" /></dt><dd>Contains unread posts</dd>
					<dt><img src="images/statusicon/thread-16.png" alt="" /></dt><dd>Contains no unread posts</dd>
					<dt><img src="images/statusicon/thread_hot_new-16.png" alt="" /></dt><dd>Hot thread with unread posts</dd>
					<dt><img src="images/statusicon/thread_hot-16.png" alt="" /></dt><dd>Hot thread with no unread posts</dd>
					<dt><img src="images/statusicon/thread_lock-16.png" alt="" /></dt><dd>Thread is closed</dd>
					<dt><img src="images/statusicon/thread_dot-16.png" alt="" /></dt><dd>You have posted in this thread</dd>
				</dl>
			</div>
			
		</div>
		
		<div id="forum_info_block_2">
		
			<div id="forum_onlineusers">
				<h5 class="blocksubhead">Users Browsing this Forum</h5>
				<div class="blockrow">
					<p>There are currently <a href="#wol">22 users browsing this forum</a>. <span class="shade">(9 members and 13 guests)</span></p>
					<ol class="commalist">
						<li><a class="username" href="#">Kier</a></li>
						<li><a class="username" href="#">Altered</a></li>
						<li><a class="username" href="#">ArcVox</a></li>
						<li><a class="username" href="#">Bill Bickley</a></li>
						<li><a class="username" href="#">bonkerspr</a></li>
						<li><a class="username" href="#">BWJ</a></li>
						<li><a class="username" href="#">Christine</a></li>
						<li><a class="username" href="#">Mike Sullivan</a></li>
						<li><a class="username" href="#">Solar</a></li>
					</ol>
				</div>
			</div>
			
			<form id="forum_display_options" action="" method="post">
				<h5 class="blocksubhead">Thread Display Options</h5>
				<div class="formcontrols">
				
					<div class="blockrow">
						<label for="sel_daysprune">Show threads from the...</label>
						<select class="primary" id="sel_daysprune" name="daysprune">
							<option value="1">Last Day</option>
							<option value="2">Last 2 Days</option>
							<option value="7">Last Week</option>
							<option value="10">Last 10 Days</option>

							<option value="14">Last 2 Weeks</option>
							<option value="30">Last Month</option>
							<option value="45">Last 45 Days</option>
							<option value="60">Last 2 Months</option>
							<option value="75">Last 75 Days</option>
							<option value="100">Last 100 Days</option>

							<option selected="selected" value="365">Last Year</option>
							<option value="-1">Beginning</option>
						</select>
						<p class="description">Use this control to limit the display of threads to those newer than the specified time frame.</p>
					</div>
					
					<div class="blockrow">
						<label for="sel_sort">Sort threads by:</label>
						<select class="primary" id="sel_sort" name="sort">
							<option value="title">Thread Title</option>
							<option selected="selected" value="lastpost">Last Post Time</option>
							<option value="dateline">Thread Start Time</option>
							<option value="replycount">Number of Replies</option>

							<option value="views">Number of Views</option>
							<option value="postusername">Thread Starter</option>
							<option value="voteavg">Thread Rating</option>
						</select>
						<p class="description">Allows you to choose the data by which the thread list will be sorted.</p>
					</div>
					
					<div class="blockrow">
						<p class="label">Order threads in...</p>
						<ul class="checkradio group">
							<li><label for="radio_asc"><input type="radio" name="order" id="radio_asc" value="asc" /> Ascending order</label></li>
							<li><label for="radio_dsc"><input type="radio" name="order" id="radio_dsc" value="desc" checked="checked" /> Descending order</label></li>
						</ul>
						<p class="description">Note: when sorting by date, 'descending order' will show the newest results first.</p>
					</div>
					
				</div>
				<div class="blockfoot actionbuttons">
					<div class="group">
						<input type="submit" class="button" value="Show Threads" />
					</div>
				</div>
			</form>
			
		</div>	
	</div>
</div>

<li class="popupmenu" id="imodsel">
	<h6><a class="popupctrl" href="#">Inline Mod</a></h6>
	<ul class="popupbody popuphover">					
		<li><a href="#" id="imodsel:all">Select all</a></li>
		<li><a href="#" id="imodsel:none">Deselect all</a></li>
		<li><a href="#" id="imodsel:invert">Invert selection</a></li>
		<li><a href="#" id="imodsel:all:1">Select unapproved threads</a></li>
		<li><a href="#" id="imodsel:all:2">Select deleted threads</a></li>
		<li><a href="#" id="imodsel:all:4">Select threads with attachments</a></li>
		<li><a href="#" id="imodsel:all:8">Select threads from guests</a></li>
	</ul>
</li>

• static html. I've been testing with google gadgets, so you can encapsulate some significant functionality.
• rss feed. I've tested with atom v2 and rss v2. Other versions should work but I haven't tested yet.
• navigation widget. You'll see below

• Show children
• Show top-level (of the CMS) pages. I only have one top-level page, so I can't show you its' effect.
• Show parent- this shows the tree up to the top.

<table class="tborder">
<tr>
	<td class="tcat">Main heading</td>
</tr>
<tr>
	<td class="thead">Sub-heading</td>
</tr>
<tr>
	<td class="alt1">Some content</td>
</tr>
<tr>
	<td class="alt2">Some more content</td>
</tr>
<tr>
	<td class="tfoot">Block footer</td>
</tr>
</table>
<br />

1. Status icon (read/unread, hot, moved, locked, posted-by-viewer)
2. Post icon
3. Prefix
4. Title
5. Thread poster
6. Replies
7. Views
8. Rating
9. Last post date / time
10. Last poster
11. Poll indicator
12. Sticky indicator
13. Attachment indicator
14. Tag indicator
15. Subscription indicator
16. Deleted thread indicator
17. Contains deleted posts indicator

<tr>
	<td bgcolor="#FF9999">(liquid column)</td>
	<td bgcolor="#99FF99" width="50">(fixed 1)</td>
	<td bgcolor="#9999FF" width="100">(fixed 2)</td>
	...
</tr>

<style type"text/css">
.table { display:table; width:400px; }
.row   { display:table-row; }
.cell  { display:table-cell; }
.liquid { background:#FF9999; }
.fixed50 { background:#99FF99; width:50px; }
.fixed100 { background:#9999FF; width:100px; }
</style>
...
<li class="row">
	<h3 class="cell liquid">(liquid column)</h3>
	<div class="cell fixed50">(fixed 1)</div>
	<div class="cell fixed100">(fixed 2)</div>
	...
</li>

<--[if lt IE 8]>
<style type="text/css">
.cell {
	display:inline-block;
}
.cell {
	display:inline;
}
</style>
<![endif]-->

<!--[if lt IE 8]>
<style type="text/css">
.row {
	overflow:hidden;
}
.cell {
	display:inline-block;
	vertical-align:top;
	padding-bottom:9999px;
	margin-bottom:-9999px;
}
.cell {
	display:inline;
}
</style>
<![endif]-->

.liquid {
	width:expression(liquid_td(this));
}

• 60% of 400 = 240
• 15% of 400 = 60
• 25% of 400 = 100
• 240 + 60 + 100 = 400.
• Result: all columns fit.

• 60% of 399 = 239.4, rounds to 240
• 15% of 399 = 59.85, rounds to 60
• 25% of 399 = 99.75, rounds to 100
• 240 + 60 + 100 =400
• Result: last column drops because 400 pixels do not fit into 399 pixels.

<style type"text/css">
.table { display:table; width:400px; }
.row   { display:table-row; }
.cell  { display:table-cell; }
.liquid { background:#FF9999; }
.fixed50 { background:#99FF99; width:50px; }
.fixed100 { background:#9999FF; width:100px; }
</style>
<!--if lt IE 8]>
<style type="text/css">
.row {
	overflow:hidden;
}
.cell {
	display:inline-block;
	vertical-align:top;
	padding-bottom:9999px;
	margin-bottom:-9999px;
}
.cell {
	display:inline;
}
.liquid {
	width:expression(liquid_td(this));
}
</style>
<noscript>
<style type="text/css">
.liquid { width:59.9%; /* we actually want 60% */ }
.fixed50 { width:15%; }
.fixed100 { width:25%; }
</style>
</noscript>
<![endif]-->

• Find the differences between the old default and the new default. ("old-new")
• Find the differences between the old default and your customized version. ("old-custom")
• Start walking through the template. If we find a changed spot in old-new but it's not changed in old-custom, use the old-new version. If we find a change in old-custom but not old-new, use the old-custom version. If neither changed, use either. If both changed, that's a conflict and we can't do the merge.

• showthread.php?t=12345
• member.php?u=12345
• forumdisplay.php?f=123

• showthread.php?1234-Thread-Title
• member.php?1234-Username
• forumdisplay.php?12-Forum-Title

• showthread.php/1234-Thread-Title
• member.php/1234-Username
• forumdisplay.php/12-Forum-Title

• threads/1234-Thread-Title
• members/1234-Username
• forums/1234-Forum-Title