 bellevue_preview.zip
 Bellevue_Preview
 DemoWeb.sln- Ope.Bellevue.DemoWeb
- Ope.Bellevue
- bin
- Debug
 BoneSoft.CSS.dll- Fizzler.dll
- Fizzler.Systems.HtmlAgilityPack.dll
- HtmlAgilityPack.dll
- Ope.Bellevue.dll
- Ope.Vss.dll
- Ope.Bellevue.csproj
- Ope.Bellevue.csproj.user
- Parsing
- Properties
- Renderers
- Rendering
- Resources
- ViewEngine
|
<html>
<head>
<title>Declarations Demo</title>
<script type="text/bellevue" src="ApplyMaster.bvue"></script>
<script type="text/bellevue">
#exSimpleText {
text: "Hello World";
}
#exEncodedText {
text: "Some HTML: <p>Hello World</p>"
}
#exAttrText input {
attr: value "Hello World";
}
#exAttrEncodedText input {
attr: value
'Text with "quotes & ampersand"';
}
#exHtml {
html: "first<br />second<br />";
}
#exTextFormatEmpty {
text-format: data(date)
"Date is {0:d.M.yyyy}";
}
#exTextFormatWithValue {
text-format: data(date);
}
#exTextReplace {
text-replace: "#id here#" 123;
}
#exChecked input:nth-child(1),
#exChecked input:nth-child(2) {
checked: true();
}
#exChecked input:nth-child(4),
#exChecked input:nth-child(5) {
checked: false();
}
#exStyle {
style-add: "color: yellow";
class-insert: "newClass";
}
#exValue {
value: "new value";
}
#exRenderControl {
render-control-add: LogOnUserControl;
}
</script>
<style type="text/css">
em { background-color: Yellow; }
table { border-collapse: collapse; }
#main td
{
border: solid 1px gray;
vertical-align: top;
padding: 2px;
}
pre
{
width: 200px;
}
</style>
</head>
<body>
<h1>Declarations demo</h1>
<p>
The following table shows the basic scenarios with the so-far supported declarations.
</p>
<table id="elementsDemo">
<tr>
<th>
Declaration
</th>
<th>
Code
</th>
<th>
Demo
</th>
<th>
Notes
</th>
</tr>
<tr>
<td>text</td>
<td>
<pre>#exSimpleText {
text: "Hello World";
}</pre></td>
<td id="exSimpleText"></td>
<td></td>
</tr>
<tr>
<td>text (with encoding)</td>
<td><pre>
#exEncodedText {
text: "Some HTML: <p>Hello World</p>"
}</pre></td>
<td id="exEncodedText"></td>
<td>Text is automatically HTML-encoded.</td>
</tr>
<tr>
<td>attr</td>
<td><pre>
#exAttrText input {
attr: value "Hello World";
}</pre></td>
<td id="exAttrText"><input type="text" /></td>
<td></td>
</tr>
<tr>
<td>attr (with encoding)</td>
<td><pre>
#exAttrEncodedText input {
attr: value
'Text with "quotes &amp; ampersand"';
}</pre></td>
<td id="exAttrEncodedText"><input type="text" /></td>
<td>
At the moment, only double quote is replaced, not "&" or "<". This may still change though.
</td>
</tr>
<tr>
<td>html</td>
<td><pre>
#exHtml {
html: "first<br />second<br />";
}</pre></td>
<td id="exHtml"></td>
<td></td>
</tr>
<tr>
<td>text-format</td>
<td>
<pre><div id="exTextFormatEmpty"></div>
<div id="exTextFormatWithValue">
Time is {0:h:mm:ss}
</div>
...
#exTextFormatEmpty {
text-format: data(date)
"Date is {0:d.M.yyyy}";
}
#exTextFormatWithValue {
text-format: data(date);
}
</pre>
</td>
<td>
<div id="exTextFormatEmpty"></div>
<div id="exTextFormatWithValue">
Time is {0:h:mm:ss}
</div>
</td>
<td>
This is very preliminary - I am considering at least:
<ul>
<li>Support for attributes and non-encoded html</li>
<li>Adding Formatters like in StringTemplate</li>
<li>Several objects</li>
<li>printf format instead of .Net for easier porting on other platforms</li>
<li>specifying culture</li>
</ul>
But you get the idea...
</td>
</tr>
<tr>
<td>text-replace</td>
<td>
<pre><td id="exTextReplace">
The ID-number is #id here#.
</td>
...
#exTextReplace {
text-replace: "#id here#" 123;
}
</pre>
</td>
<td id="exTextReplace">
The ID-number is #id here#.
</td>
<td>Again very preliminary...
<ul>
<li>Should this work with attributes and HTML?</li>
<li>How about several replaces on one text?</li>
<li>How about using Regex...</li>
</ul>
</td>
</tr>
<tr>
<td>checked</td>
<td>
<pre>#exChecked input:nth-child(1),
#exChecked input:nth-child(2) {
checked: true();
}
#exChecked input:nth-child(4),
#exChecked input:nth-child(5) {
checked: false();
}</pre></td>
<td id="exChecked">
Originally unchecked: <input type="checkbox" /><input type="radio" /><br />
Originally checked: <input type="checkbox" checked="checked" /><input type="radio" checked="checked" /><br />
</td>
<td></td>
</tr>
<tr>
<td>style and class</td>
<td>
<pre><td id="exStyle"
style="background-color: Gray"
class="oldClass">test
</td>
...
#exStyle {
style-add: "color: yellow";
class-insert: "newClass";
}
</pre></td>
<td id="exStyle"
style="background-color: Gray"
class="oldClass">test
</td>
<td>
The style-add and style-insert will automatically add ";" if the attribute already has a value.
Class-add and class-insert will add a space as a separator.
</td>
</tr>
<tr>
<td>value</td>
<td>
<pre>#exValue {
value: "new value";
}</pre></td>
<td><input id="exValue" type="text" value="original text" /></td>
<td>
At the moment, this is just a shortcut to the value attribute.
The idea is that perhaps in the future this would handle also textarea, select/option and even radio/checkbox
scenarios in a nicer way, but I am still considering different approaches.
</td>
</tr>
<tr>
<td>apply-template</td>
<td>
<pre>-</pre></td>
<td>-</td>
<td>
See other examples for how to use.
E.g. <a href="STComparison">StringTemplate comparison</a>.
</td>
</tr>
<tr>
<td>render-control</td>
<td>
<pre>#exRenderControl {
render-control-add: LogOnUserControl;
}</pre></td>
<td id="exRenderControl"></td>
<td>
Can be a Bellevue partial view, but also an ascx like here (Shared/LogOnUserControl.ascx).
</td>
</tr>
</table>
<p></p>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Olli is a .Net developer and architect.
He specializes in Asp.net MVC and other web technologies, XML and lately Domain Specific Languages.
Olli is originally from Finland, but currently works for his own one-man-initiative OPE AG (
www.ope.ag) from Switzerland. He has over 10 years of experience as one of the founding partners and Chief Technology Officer of Quartal group of companies (
www.quartal.com).
Submit an article or tip