June 22, 2009

Simplification of the puzzle prototype

Posted in Web tagged , , , , , , , at 11:36 pm by sagito

As mentioned before, I have been looking for a way of simplifying the puzzle architecture and encapsulate its functionality inside the Piece class. So now, in order to use this architecture, only two things are needed:

  1. Inherit the Piece class
  2. Call the Piece constructor with the Piece name. For example (from within a constructor): public _Default() : base(โ€Main Page Pieceโ€) {}

Only two steps are required now! The data is automagically filled in by calling the update() function, which searches the whole page for the sections of code, whose name matches the one on the file. For example, if I have an entry “news” in the configuration file and a div called “news” in the .aspx file, then the information will be automatically filled in. The code was largely reduced by using this new technique!

Prototype Puzzle Site

Posted in Uncategorized tagged , , , , , , , at 11:18 pm by sagito

After some (somehow simple) work, I managed to get my first prototype working. The site can be easily parameterized through the new piece’s configuration file. To ease my work, I prefered to avoid using XML and created a rather simple syntax, somewhat similar to a scene graph which describes the data to be transfered to the page.

On to the results, the basic page looks like this:

Basic site

This page’s class inherits directly from the Piece class, which searches for configuration files on every page_load and saves the new data internally. So, I created a small configuration file, as follows:

{news}
<ul>
<li><a href=”#”>Puzzle system is now working!</a></li>
</ul>
{/news}

When I refresh the page, the content is automatically updated, and it is now as follows:

news

So, I decided to try out something different and also customize the top menu, and so, I fed the piece a new configuration file with the following:

{menu}
| <a href=”http://www.google.com”>Google!</a&gt; |
<a href=”https://sagito.wordpress.com”>Tiago’s Blog</a>
{/menu}
{news}
<ul>
<li><a href=”#”>Puzzle system is now working!</a></li>
</ul>
{/news}

Ready, we have a different menu on-the-fly, as shown below:

menu

Thought this could be useful for when a piece wants it’s place in the top menu! ๐Ÿ˜‰ So, what must a normal page do in order to implement this architecture, so far? Very simple:

  1. Inherit the Piece class
  2. Call the Piece constructor with the Piece name. For example (from within a constructor): public _Default() : base(“Main Page Piece”) {}
  3. Get the desired information through getInfoNodeByName(string node). For example: InfoNode news = getInfoNodeByName(“news”);
  4. Fill the desired fields with this information. ๐Ÿ™‚

And it is ready to use! However, many os these steps are very complicated and should be automatic. Also, a piece must also generate automagically the configuration/data files, which are still created manually.

So, expect further updates very soon! ๐Ÿ˜€