Design

Om du vill layouta xVis själv, så är det inga konstigheter, dock förutsätts grundläggande kunskaper i modern HTML/CSS. Vad du behöver veta mer, följer här.

Filöversikt
De filer som berörs vid design av den publika delen är utspridda hittar du i följande mappar:

/css
- xvis.css – CSS stilmall
/scripts
- javascriptfiler
/templates
- .tpl filer – HTML mallar för vissa delar av systemet
/
- default.aspx – besökslista eller formulär
- new.aspx – formulär
- terms.aspx – besöksvillkor
- approve.aspx – formulär för godkännande av besöksvillkor.

ASPX filerna
I roten av xVis installationen finns de filer som du kan designa själv och som används av systemet. Dessa filer har filändelsen .aspx och hanteras av .NET och webbservern. I aspx filerna finns anrop till logiken i xVis systemet, och dessa måste finnas med för att systemet skall fungera. Det finns också vissa taggar i början av filerna samt vissa JavaScript referenser som måste finnas med för att systemet skall fungera. Sedan en tid används JavaScript teknik AJAX i xVis och det JavaScript bibliotek som används är jQuery.
Som exempel går vi nedan igenom filen default.aspx i roten av xVis installationen.

<%@ Page Language="C#" debug="true"%>
<%@ Register TagPrefix="xVis" Namespace="xVis.Public" Assembly="xVis"%>
<script runat="server">
 private string lang;
 void Page_Load(object o, EventArgs e)
 {
    if (Request.QueryString["lang"] != null)
    {
       lang = Request.QueryString["lang"].ToString();
    }
    if (String.IsNullOrEmpty(lang))
    {
       lang = xVis.Public.Common.Xml.GetConfig("/xvis/public/
                      system/language/defaultLanguage");
    }
 }
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>xvis::besökssystem::demo::</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/css/thickbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-132.js"></script>
<script type="text/javascript" src="/scripts/ui.core.js"></script>
<script type="text/javascript" src="/scripts/ui.datepicker.js"></script>
<script type="text/javascript" src="/scripts/thickbox.js"></script>
<script type="text/javascript" src="/scripts/init.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 DefaultList.Init('<%= lang %>');
 });
</script>
<link href="/css/xvis.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
 <div id="header">
 <div id="site-image"></div>
 <div id="site-info">
 Test
 </div>
 <div id="site-tag">
 </div>
 <br style="clear:left">
 </div>
 <div id="content-container">
 <div id="navigation-sub">
 <xvis:Navigation.Show id="xVisNav" runat="server"/>
 <xvis:Navigation.Language id="xVisNavLang" runat="server"/>
 </div>
 <div id="mainContent">
 <div></div>
 <div></div>
 <br style="clear:both;" />
 </div>
 </div>
</div>
</body>
</html>

De 2 första raderna refererar till .NET och den DLL fil som ligger till grund för systemet. Efterföljande 14 raderna är .NET kod, som krävs för att hantera olika språk.
Dessa 16 rader, får inte ändras.

Rad 17 definerar sidans DOCTYPE, och nödvändig för att sidan ska tolkas så korrekt som möjligt. Den kan dock se ut på lite olika sätt.

Kommande rader är vitala för systemet:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/css/thickbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-132.js"></script>
<script type="text/javascript" src="/scripts/ui.core.js"></script>
<script type="text/javascript" src="/scripts/ui.datepicker.js"></script>
<script type="text/javascript" src="/scripts/thickbox.js"></script>
<script type="text/javascript" src="/scripts/init.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 DefaultList.Init('<%= lang %>');
 });
</script>
<link href="/css/xvis.css" rel="stylesheet" type="text/css">

Den första av dessa definerar teckenkodningen av sidan. Från och med version 4.0.1, så är det UTF-8 som gäller.
Den sista av dessa hänvisa till xvis.css, den stilmall som sidan använder för att beskriva layout som typsnitt, positioner etc.
Raderna där emellan hänvisar till Javascript filer som systemet kräver. Dessa har hand om att hämta data till besökslistan, hantera formulär etc.

Därefter följer den HTML som definerar ramen för presentationen av sidan. Inne i den finns två rader som refererar till den DLL som innehåller systemets källkod. Dessa kan avvaras, men just dessa hantera länkarna på sidan, samt länkar till andra språk.

Som ni ser är det inga konstigheter för den som kan lite HTML och CSS att designa om sidan efter behag. Dock behöver man ha koll på mallfilerna, hur de är uppbyggda kan du läsa mer om här.

DLL anrop
Nedan följer en beskrivning av de referenser till xVis motorn (DLL fil) som används/kan användas:

Anrop Funktion Mallfil
<xvis:Navigation.Show id=”xVisNav”runat=”server”/> Visar
systemmenyn, ”Start”, ”Ny besökare” etc.		 Navigation.tpl
<xvis:Navigation.Language id=”xVisNavLang” runat=”server”/> Visar språkmenyn över installerade språk Languagenavigation.tpl
<xvis:Help.Show id=”xVisHlp” runat=”server”/> Visar hjälptexten Help.tpl
<xvis:Common.ApproveVisitor id=”xVisApp” runat=”server”/> Visar formulär för kompetterande uppgifter vid besöksregistrering
<xvis:Common.CardReg id=”xVisCardReg” runat=”server”/> Visar formumlär för att registrera med passerkort.
<xvis:Common.NewVisitor id=”xVisApp” runat=”server”/> Visar forumläret för att registrera ny besökare Newvisitor.tpl
<xvis:UpdateVisitor id=”xVisApp” runat=”server”/> Registrera in/ut besökare
<xvis:Terms.Show id=”xVisApp” runat=”server”/> Visar besöksvillkor. Terms.tpl
Spara / dela med dig
  • Facebook
  • Pusha
  • Bloggy
  • TwitThis
  • Google
  • Live
  • Maila artikeln!
  • Skriv ut artikeln!

  • Kontakt

    contact@xvis.se
    0532-15900