Sümegi Zoltán oldala | Html/CSS/XML/ASP.NET tippek

cím	kategória	hozzáadva	módosítva
sorttable by Stuart Langridge
Tippek böngészőfüggetlen megjelenítéshez	Html	2007. 10. 20.
Html és CSS kód érvényességének ellenőrzése	Html	2007. 10. 10.	2008. 11. 30.
Valós forgalmi adatok	Html	2007. 10. 20.
Az oldalak módosítási dátumainak kijelzése	Javascript	2007. 03. 05.
Képcsere	Javascript	2007. 03. 05.
Táblázat	Html	2007. 02. 20.
A változó méretű linkek	CSS	2007. 02. 20.
Oldalmenü	CSS	2007. 02. 25.
Háttérkép sorozatból	CSS	2007. 02. 25.
Keretek (frame-s lapok)	Html	2007. 03. 10.	2008. 01. 20.
XML lap CSS/XSL stíluslappal formázva	XML	2007. 04. 10.
Elsötétedő háttér kép megjelenítéskor	Javascript	2007. 04. 15.	2009. 01. 31.
ASP.NET alapok (teljesen kezdő)	ASP.NET	2007. 12. 20.
ASP.NET kezdő I.	ASP.NET	2007. 12. 22.	2008. 01. 25.
XML linkek (főoldal keresztlinkjei)	XML	2007. 12. 27.
A forrás lap forrása	Html	2007. 04. 15.	2008. 02. 01.
ASP.NET feldolgozóval az XML linkek	ASP.NET	2008. 01. 05.
ASP.NET kezdő II.	ASP.NET	2008. 01. 16.
ASP.NET lapok szerkezete	ASP.NET	2008. 01. 16.
Beágyazott ASP kódok	ASP.NET	2008. 01. 17.
ASP.NET authentikáció	ASP.NET	2008. 01. 20.
ASP.NET adatbázis-kezelés	ASP.NET	2008. 01. 20.
ASP.NET feltételes adatmegjelenítés	ASP.NET	2008. 02. 01.
ASP.NET - GridView haladó	ASP.NET	2008. 02. 01.
ASP.NET - FormatString, DataFormatString	ASP.NET	2008. 02. 01.
Előkészületek PHP alapú fejlesztéshez	PHP	2008. 09. 29.	2008. 10. 04.
Tippek böngészőfüggetlen megjelenítéshez II.	Html, CSS	2008. 11. 30.
ASP.NET adatbázis-kezelés II.	ASP.NET	2008. 01. 20.
Előkészületek Flash alapú fejlesztéshez	Flash, Flex, ActionScript	2008. 10. 05.
Html szövegméret	Html	2008. 01. 20.

Az összes lap "tutoriál" jellegû szerkezete át lett alakítva - a kódba égetett témákat áthelyeztem adatbázisba, így nem az asp lapok cserélgetésével fogom frissíteni a lapjaim. Fogok készíteni RSS csatorna értesítõket a lapokhoz (és lesz is ilyen jellegû tutoriál) - rájöttem, hogy nem ezeken a lapokon kell kialakítanom az RSS elérhetõséget, hanem egy külön lapon... Az oldal validatálva, és modernizálva lett (hogy érvényes legyen), így lehet eltérés a mintapéldák, és a magyarázószöveg között (régebbi témák - 2007.10 hó elõtt). A mintapéldákat a javított lapjaimról szedtem ki, így azok érvényesek, jó html kódot adnak. (ehhez persze meg kell adni a weblapok tipusát, karakterkódolását, stb.: xhtml példaa)

Tippek böngészőfüggetlen megjelenítéshez

Kategória: Html - Hozzáadva: 2007. 10. 20.

Nagyon bosszantó tud lenni, amikor egy jól megtervezett grafikát, vagy html szerkezetet a különböző böngészők más-más módon jelenítenek meg. Persze lehetne minden böngészőnek külön stíluslapot készíteni, és egy vizsgálat után a megfelelőt betölteni, de ez nem feltétlen szükséges. Először is érvényes html kódot kell készíteni, ami azzal kezdődik, hogy meg kell határozbni lapunk tipusát, és ezt jelezni is kell a kódban a böngészők részére (mint a bevezetőben említettem). Az érvényesség ellenőrzésére használjuk a megfelelő oldalakat. Az érvénytelen kódot némelyik böngésző értelmezi, és a várt módon korrigálja, más böngésző esetleg az érintett tag teljes stílusinformációját (pl. táblázat formázása) letíltja, és a böngésző alapértelmezéseit használja. A legtöbb ember törekszik az egyszerű html, és CSS kód létrehozására, de ez sajnos nem mindig célravezető.

A kezdőoldalam fejléce (menüsor táblázatával) a várt módon néz ki IE, és Opera böngésző alatt:

A hozzátartozó html kód:

  <!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>Sümegi Zoltán oldala</title>
<link rel="stylesheet" href="alap.css" type="text/css" />
</head>
<body>
<div class="felso">
  <div class="fejlec">
    <h2 class="fej">
      Sümegi Zoltán személyes oldala
    </h2>
    <table class="menu" border="0">
      <tr>
        <td class="bal" ></td>
        <td class="menu" ><a href="forras.htm">Html/Javascript tippek</a></td>
        <td class="jobb" ></td>
        ...
      </tr>
    </table>
  </div>
  <div class="balfejlec">
  </div>
  <div class="jobbfejlec">
  </div>
</div>
...

és a stíluslap információ:

  ...
h2.fej{
        color: #6A5ACD;
        margin-top: 40px; margin-left: 40px;
}
...
table.menu{
        margin-top: 40px; width: 100%;
}

Ezzel a kóddal a fejléc kinézete Firefox böngésző alatt:

Ez nem túl kellemes. A tömör kódra történő törekvés itt azt eredményezte, hogy a Firefox a H2-es fejléc utáni margo értékének (nem volt meghatározva a stíluslapban) a többi böngészőtől eltérő értéket állított be, így itt a menüsor táblázata egy nem kívánt pozicíóba került.

A korrigált stíluslapinformáció (meg lett határozva a h2 alsó margó tulajdonsága is):

  ...
h2.fej{
        color: #6A5ACD;
        margin-top: 40px; margin-left: 40px; margin-bottom: 0;
}
...
table.menu{
        margin-top: 20px; width: 100%;
}

oldal tetejére

Html és CSS kód érvényességének ellenőrzése

Kategória: Html - Hozzáadva: 2007. 10. 10. | Módosítva: 2008. 11. 30.

Az elkészített kódok ellenőrzését érdemes minden módosítás után elvégezni. Nincs akadálya a korábbi szabványok szerinti html kód használatának (html 3,4), de itt is a megfelelő dokumentum típus legyen meghatározva a html lap kódjában. (Így esetleg használhatóak az újabb szabványokban már érvénytelenített tag-ek.)

Érdemes ellenőrizni az idegen helyről kapott kódrészleteket is (pl. Magyar Honlap, Webkatalógus, Statgép, stb. !!!). Egy kis MS reklámként megjegyzem, hogy a Visual Studio és az ingyenesen használható Visual Studio Express elég komoly validatálást végez a html kódban is. Így pl. helyesnek számító, de már idejétmúlt vagy az újabb szabványokban már érvénytelen tulajdonságok cseréjét is javasolja. (pl. a tag name tulajdonsága helyett id tulajdonság.)

* PHP lapjaink "POST" alapú paraméterátadása (nem url paraméteres átadása) esetén a vezérlők name tulajdonsága alapján érhetők el az átadandó értékek szerveroldalon (pl. input elemek "value" tulajdonságai) - a csak id-vel ellátott vezérlőket nem tudja azonosítani a PHP.

oldal tetejére

Valós forgalmi adatok

Kategória: Html - Hozzáadva: 2007. 10. 20.

A statgép forgalmi adatai az oldalaimra valósak, a statisztikából ki van zárva a saját IP címem, így a saját internetes látogatásaimat nem számlálja. Nem számolja a lapok szerkesztésénél történő probálkozásaimat se (kizárt helyi címek), amikor fájlként nyitom meg a lapokat.

Kizárás a helyi hálózati címek tiltásához (IP címek a hálózatomon ebben a tartományban vannak meghatározva - minden lehetséges cím tíltva): 192.168.1.*
Kizárás az internetes címem tiltásához (külső IP cím - ezt időnként cserélni kell /pl. modem reset/, ha dinamikus a cím/): internetes IP cím

Az internetes IP címünk megtudható többek között a wigwam lapon balra fent a nagy Wigwam felirat alatt.

oldal tetejére

Az oldalak módosítási dátumainak kijelzése

Kategória: Javascript - Hozzáadva: 2007. 03. 05.

Automatikus utolsó módósítás idejének kijelzését teszi lehetővé Javascript segítségével a lapba épített pár soros utasítás:

  <script type="text/javascript">
    var modIdo = new Date(document.lastModified);
    document.write('Utoljára módosítva: ' + modIdo.toLocaleString());
  </script>

A modIdo nevű változóba elhelyeztem a document.lastModified függvény által visszaadott szöveges dátum,- és időértéket. A "dátumosítás" azért szükséges, mert egyébként nem az általunk megszokott formátumban jelenne meg (pl. 06/03/2007 15:33:27 ). Így a toLocaleString() dátum objektum metódussal a helyileg beállított formátum szerint jelenik meg a módosítás ideje. A Javascript-es változat sajnos nem működik a Linux Konqueror böngészőjében (Javascript engedélyezett) - módosítottam az érvényes kód érdekében a scripten, így lehet, hogy Konqueror is megeszi.

oldal tetejére

Képcsere

Kategória: Javascript - Hozzáadva: 2007. 03. 05.

Javascript kódrészlet (én a <head> szekcióban helyeztem el):

<script type="text/javascript">
	function beallit()
	{
	document.getElementById("i").style.backgroundImage='url(img/regi.jpg)';
	}
	function visszaallit()
	{
	document.getElementById("i").style.backgroundImage='url(img/igazolvany_uj1.gif)';
	}
</script>

Az "i" ID-val rendelkező html objektum háttérképét regi.jpg-re állitja a beallit() függvény, ami meghívásra kerül a kép táblázatcellájának (<TD>) egérmozgás eseményére, és a visszaallit() függvény pedig az egér elvételekor a igazolvany_uj.gif képet állítja be.
A táblázat-cella kódrészlete:

<td class="igazolvany" id="i" rowspan="4" onmouseover='beallit()' 
			onmouseout='visszaallit()'></td>

Ez a táblázatcella egy külön "igazolvany" nevű osztályazonosítót kapott, mivel a két elhelyezendő kép 123képpont magasságú, és 97, ill. 95 képpont széllességű. A táblázat-cella a <head> szekció stílus információjában lett a kívánt méretre állítva (ill. igazítás, stb.), így nem lóg ki, nincs "levágás", stb.

<head>
<style type="text/css">
	td.igazolvany{
	              width: 130px; height: 130px;
	              background-image: url(img/igazolvany_uj1.gif);
	              background-position: center;
	              background-repeat: no-repeat;
                     }
</style>

td.igazolvány beállítások... Kapott alapértelmezett képet is (amig még nincs egérmozgásra kiváltott esemény...) A td stílus információ a többi (alap) táblázat-cella beállítása. És ami miatt függvényhívás lett, nem pedig paraméterezett stílus-beállítás, az a későbbi felhasználás miatt van (oldalmenü is ezzel a kóddal fog majd működni, ha csináltam szép nyomogomb képeket hozzá - egy benyomott, és egy alap), ill. így nem csak az az objektum vezérli amiben a kép elhelyezkedik, hanem az "Előtte" szövegezésű link is.

<p class="szoveg">Ez a legfrissebb képem.
              <br/>Azért törekszem az <a class="link2" href="elotte_utana.html" target="_blank" onmouseover="beallit()" onmouseout="visszaallit()"><b>"előtte"</b></a> állapot elérésére.</p>

A lényeg:

... <a class="link2" href="elotte_utana.html" target="_blank" onmouseover="beallit()" onmouseout="visszaallit()"><b>"előtte"</b></a>
...

Ja, a szöveg meg is nyitja egy új böngésző lapon/ablakban (IE) az elotte_utan.html fájlt...

target="_blank"

oldal tetejére

Táblázat

Kategória: Html - Hozzáadva: 2007. 02. 20.

<style type="text/css">
...
table.fent{
	background-image: url(img/atmenet1.gif);
	background-repeat: repeat-x;
}
td.felsokeret{
	height: 150px; 
}
td.kozepkeret{	 
}
td.menukeret{
	background-color: #f7fbfd; width: 90px; height: 500px;
	text-align: left; vertical-align: top;
	background-image: url(img/oldal1.jpg); background-repeat: no-repeat;
}
td.menu{
	background-color: #f7fbfd;
}
td.kozep{
	margin-right: 40px; width: 550px;
	height: 280px; background: #e8f0f9;
	border-style: groove; border-color: #b11010;
	background-image: url(img/atmenet2.gif);
	background-repeat: repeat-x;
}
td.kozep2{
	width: 500px; height: 100px; border-width: 0;
}
td.jobb{
	width: 100px; height: 300px; background: #eff6fd;
	border-style: solid; border-color: #b11010;
	background-image: url(img/atmenet2.gif);
	background-repeat: repeat-x;
        vertical-align: top;
}
td.also{
	width: 130px; height: 35px; text-align: center;
	border-style: solid; border-color: #b11010;
}
td.igazolvany{
	width: 130px; height: 130px;
	background-image: url(img/igazolvany_uj1.gif);
	background-position: center;
	background-repeat: no-repeat;
}
td.eler{
	width: 150px; border-width: 0;
}
td.nev{
        vertical-align: top;
}

Maga a táblázat (ezt érdemesebb stíluslapokkal megoldani - később...):

<table border="0" cellpadding="5">
  <tr>
    <td class="menukeret" rowspan="4">
      <table class="bal" border="0">
	<tr><td class="menu" ><a href="lap2.htm">Filozófia</a></td></tr>
	<tr><td class="menu" ><a href="lap4.htm" target="_blank">Fejlesztés</a></td></tr>
	<tr><td class="menu" > ... </td></tr>
	<tr><td class="menu" > ... </td></tr>
	<tr><td class="menu" > ... </td></tr>
	<tr><td class="menu" > ... </td></tr>
	<tr><td class="menu"> ... </td></tr>
      </table>
    </td>

    <td class="felsokeret" align="center" valign="top" colspan="2">
      <table class="fent" border="1">
	<tr>
  	  <td class="igazolvany" id="i" rowspan="4" onmouseover='beallit()' 
			onmouseout='visszaallit()'></td>
	  <td class="nev" rowspan="4"> ... név ...</td>
	  <td class="eler"> ... elérhetőség ... </td>
	</tr>
	<tr>
	  <td class="eler"> ... </td>
	</tr>
	<tr>
	  <td class="eler"> ... </td>
	</tr>
	<tr>
	  <td class="eler"> ... </td>  
	</tr>
      </table>
    </td>
  </tr>

  <tr>
    <td class="kozepkeret" rowspan="2" colspan="2">
      <table class="kozep" border="1">
	<tr>
	  <td class="kozep" colspan="4">
	      <blockquote>
	      
              ...
              <br/>
              ...

              </blockquote>
	  </td>

	  <td class="jobb" rowspan="3">
	    <div class="oldal">
              ... oldalra szánt szöveg ...

	    </div>
	  </td>
	</tr>
        <tr><td class="kozep2" colspan="4"></td></tr>
	<tr><td class="also"> </td> <td class="also"> </td>
          <td class="also">
            ...
          </td>
          <td class="also">
            ...
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

oldal tetejére

A változó méretű linkek

Kategória: CSS - Hozzáadva: 2007. 02. 20.

A változó méretű linkek (és változó háttér) a :hover segítségével 150%-osak lesznek, ez IE alatt is alkalmazható az <a> tagra.

<style type="text/css">
	a:hover {font-size: 150%; background: #66ff66}
...

És hogy ne ugráljon a lap szerkezete, ill. a hivatkozás alatt elhelyezkedő szöveg, ezért az <a> tag magasságát 20 pont-ra állítottam (a 150%-os növekedés ebbe a magasságba még belefér. A főlapon Firefox esetében a <blockquote> tag-on belül a méretváltoztatás változatlanul "ugrálást" okozott. Ez a 20pont nem a betűméret - az az alapértelmezett 11pont -, hanem a kitölthető hely mérete.):

<style type="text/css">
	a {line-height: 20pt}
...

oldal tetejére

Oldalmenü

Kategória: CSS - Hozzáadva: 2007. 02. 25.

Az oldal menü linkjeinek háttérszínezése (itt is Javascript kell majd ha képcserés lesz a menü, mert <a> tag -hoz nem lehet háttérképet, tábla-cella :hover -ja meg IE miatt nem használható / esetleg valami ilyesmi - CSS képcsere/):

<style type="text/css">
	td.menukeret{
	    background-color: #f7fbfd; width: 90px; height: 500px;
	    text-align: left; vertical-align: top;
	    background-image: url(img/oldal1.jpg); background-repeat: no-repeat;}
	td.menu{background-color: #f7fbfd;}
	a:hover {background-color: #FFFF00}
</style>

És a cellákba rakott linkek:

	<table class="bal" border="0">
	<tr><td class="menu" > ... </td></tr>
	<tr><td class="menu" > ... </td></tr>
	...
      </table>
...

oldal tetejére

Háttérkép sorozatból

Kategória: CSS - Hozzáadva: 2007. 02. 25.

Kipróbáltam a Filozófia lap jobb oldali tábla-cellájában a "tapétás" háttérképet. Egy 100*100 képpont méretű 2kbájt fájlméretű képből áll a háttér. Lehetne akár az egész lap háttere egy ekkora, vagy kisebb képdarabból álló sorozat (bár az mintha automatikusan tapétás lenne ilyen esetben):

<style type="text/css">
	...
	td.mezo {background-image: url('img/szovet2.jpg');
		 background-repeat: repeat}
	...
</style>

A stílusbeállítás "repeat", a cella a minden színnel egybeolvadó mintája miatt kapott egy belső táblázatot fehér háttérrel:

<td class="mezo">
	<table border="0" align="center">
	  <tr><td><h2>Filozófia</h2></td></tr>
	</table>
</td>

A szóban forgó képdarab: szovet darab

A kezdőlap fejlécének, és láblécének hátterét szintén képismétléssel (viszintes irányú) oldottam meg, helytakarékosság itt sem árt:

<style type="text/css">
	div.fejlec {background-image: url(img/centerhead.jpg);
        background-repeat: repeat-x;}
...

A szóban forgó képdarab: fejléc háttere ismétléssel

oldal tetejére

Keretek (frame-s lapok)

Kategória: Html - Hozzáadva: 2007. 03. 10. | Módosítva: 2008. 01. 20.

Ami ellenjavalt, több okból. Ez szokot ilyenkor lenni az index.html (szükséges még doc.tipus meghatározás):

<html>
<head>
<meta id="author" content="Sümegi Zoltán">
<title font-family="arial">
	Sümegi Zoltán oldala - programozás, dolgozatok</title>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<frameset cols="100,*" frameborder="0" framespacing="0">
	<frame src="oldal.htm" scrolling="no">
	<frame id="kozep" src="index.html" scrolling="auto">
</frameset>
</html>

A frame-k nélküli, de hasonló hatású CSS alapú megjelenítéshez ad tippeket Sikos László - Stíluslapok a weben c. könyve.

oldal tetejére

XML lap CSS/XSL stíluslappal formázva

Kategória: XML - Hozzáadva: 2007. 04. 10.

Adatok egy meghatározott szerkezet szerinti megjelenítési formája az újabb html ajánlások szerint az XML szerkezet. Vannak formai megkötések, több formázási lehetőség adódik (bár böngészőnként eltérő lehet - xml + CSS majdnem azonos megjelenítést tesz lehetővé IE és Mozilla, stb. alatt is). Az xml szerkezete (a minta tartalmazza a stíluslap, és az adatszerkezet leírását - bonyolultabb adatszerkezet megkötéseket célszerű külön dtd kiterj. fájlba helyezni). Az IE kivételével CSS lapból használható a :before és :after metódus, ami az adatok kiírása előtti, és utáni pozicióba szöveget, vagy más elemet (pl. formázáshoz képet) jelenít meg. Az XML adatszerkezet ettől függetlenül képes <img> taggal képet adatként megjeleníteni.
A fájl elég bonyolult szerkezetűnek tünhet, DE az ilyen fájlok nem "kézi" szerkesztésre szántak, hanem pl. egy dinamikus weblap /pl. PHP/ generálja le SQL, vagy más adatbázis adatai alapján... (ezt kézzel készítettem :) Az IE eltérő megjelenítése miatt egy Javascript vizsgálattól függően történik a lap4ie.xml (IE-hez), és lap4.xml (többi böngésző) megjelenítése. A megnyítási módot Konqueror böngésző előugró ablaknak tekinti, és alapbeállítással (intelligens blokkolás) blokkolja. A kód a lap4.htm helyére tölti az xml fájlokat:

<html>
<head>

<script type="text/javascript">
  browser=navigator.appVersion;
  browser_version= parseInt(navigator.appVersion);
  prognev=navigator.appName;
if (browser.indexOf("MSIE")< 0) {
  window.open("lap4.xml","_self")
  }
else {
  window.open("lap4ie.xml","_self")
  }
</script>

</head>
<body>
</body>
</html>

A két xml fájl az első soraiban tér el (a stíluslapok meghatározásában). Az IE-hez tartozó stíluslap info:

<?xml version="1.0" encoding="ISO8859-2" ?>
<?xml-stylesheet href="lap4.xsl" type="text/xsl" title="alap" ?>

A többi böngészőhöz tartozó stíluslap info:

<?xml version="1.0" encoding="ISO8859-2" ?>
<?xml-stylesheet href="lap4.css" type="text/css" title="alap" ?>

Később lehet kipróbálom, hogy a jávascript töltheti-e az xml lap stíluslapját - ekkor nem kellene két külön xml fájl - bár elvileg az xml fájlt stíluslap info-val együtt php script fogja legenerálni, így egyébként is csak egy xml fájl fog készülni.

Az xml fájlban kapott helyet az adatszerkezetre vonatkozó előírás (pl. kötelezően jelenlévő mezők, stb):

<!DOCTYPE FEJLESZT [
	<!ELEMENT FEJLESZT (KATEGORIA)* >
	<!ELEMENT KATEGORIA (NEV, PROGRAM) >
	<!ELEMENT PROGRAM (prog_neve, weblap?, LEIRAS, NET_LEIR?,
	  	  JOGALLAS, PLATFORM, KIEGESZITESEK?) >
	<!ELEMENT KIEGESZITESEK (kieg_web?, KIEG_ADAT)* >
]>

Az Xlink xml bővítést sajnos csak a Firefox (2.0) használja, a többi részére más technikát kell keresni. Maga az adatszerkezet az Xlink kiegészítéssel - így a hivatkozások használhatóak:

<FEJLESZT xmlns:xlink="http://www.w3.org/1999/xlink">
  <KATEGORIA>
    <NEV>Web</NEV>
    <PROGRAM>
	<programnev>Bluefish</programnev>
	<weblap xlink:type="simple" xlink:href="http://bluefish.openoffice.nl" xlink:show="new"></weblap>
	<LEIRAS>webszerkesztő, több programozási nyelvhez használható (Html,PHP, CSS, SQL, stb.), segíti a program írását szintaxis ellenőrzéssel, és kiemeléssel. Sablon nyelvi eszközök beillesztésével segíti a szerkesztést.</LEIRAS>
	<NETLEIR xlink:type="simple" xlink:href="http://wiki.hup.hu/index.php/Bluefish" xlink:show="new"></NETLEIR>
	<JOGALLAS>Freeware</JOGALLAS>
	<PLATFORM>Linux</PLATFORM>
    </PROGRAM>
    <PROGRAM>
	<programnev>Quanta Plus</programnev>
	<weblap xlink:type="simple" xlink:href="http://quanta.kdewebdev.org" xlink:show="new"></weblap>
	<LEIRAS>webszerkesztő, hasonló mint a Bluefish</LEIRAS>
	<JOGALLAS>Freeware</JOGALLAS>
	<PLATFORM>Linux - KDE</PLATFORM>
    </PROGRAM>
    <PROGRAM>
	<programnev>KImageMapEditor</programnev>
	<LEIRAS>Html térkép</LEIRAS>
	<JOGALLAS>Freeware</JOGALLAS>
	<PLATFORM>Linux - KDE</PLATFORM>
    </PROGRAM>
  </KATEGORIA>
  <KATEGORIA>
    <NEV>Java</NEV>
    <PROGRAM>
	<programnev>NetBeans 5.5</programnev>
	<weblap xlink:type="simple" xlink:href="http://www.netbeans.org" xlink:show="new"></weblap>
	<LEIRAS>Java IDE Komplett integrált fejlesztőeszköz konzolos, és grafikus alkalmazások készítéséhez. Több kiegészítés elérhető hozzá a download manager-én (vagy weblapján) keresztül. Hamarosan elérhető lesz a 6.0-ás változat.</LEIRAS>
	<JOGALLAS>Freeware</JOGALLAS>
	<PLATFORM>Windows, Linux</PLATFORM>
	<KIEGESZITESEK>
	  <KIEGADAT>c++</KIEGADAT>
	  <KIEGADAT>Mobil eszközök fejlesztése</KIEGADAT>
	  <KIEGADAT>UML</KIEGADAT>
	  <KIEGADAT>+ még néhány</KIEGADAT>
	</KIEGESZITESEK>
    </PROGRAM>
    <PROGRAM>
	<programnev>Eclipse 3.2</programnev>
	<weblap xlink:type="simple" xlink:href="http://www.eclipse.org" xlink:show="new"></weblap>
	<LEIRAS>Java IDE. Komplett integrált fejlesztőeszköz konzolos, és grafikus alkalmazások készítéséhez. Számtalan kiegészítés, és plugin elérhető hozzá (kereskedelmi, és freeware is). Fejlett Update Manager funkcióval rendelkezik, számtalan plugin és összetevő (szinte az összes) telepíthető vele.</LEIRAS>
	<JOGALLAS>Freeware és kereskedelmi (pluginek is vegyesen)</JOGALLAS>
	<PLATFORM>Windows, Linux</PLATFORM>
	<KIEGESZITESEK>
	  <kiegweb xlink:type="simple" xlink:href="http://www.eclipseplugincentral.com" xlink:show="new"></kiegweb>
	  <KIEGADAT>c++, PHP, stb.</KIEGADAT>
	  <KIEGADAT>Mobil eszközök fejlesztése</KIEGADAT>
	  <KIEGADAT>UML (többféle)</KIEGADAT>
	</KIEGESZITESEK>
    </PROGRAM>
  </KATEGORIA>
  <KATEGORIA>
    <NEV>C/C++</NEV>
    <PROGRAM>
	<programnev>Qt Designer</programnev>
	<weblap xlink:type="simple" xlink:href="http://www.trolltech.com/products/qt/" xlink:show="new"></weblap>
	LEIRAS>C/C++ IDE - többplatformos fejlesztéshez</LEIRAS>
	<JOGALLAS>freeware és kereskedelmi</JOGALLAS>
	<PLATFORM>Linux, Macintosh, Windows (MS VisualStudio-ba integrálható)</PLATFORM>
    </PROGRAM>
    <PROGRAM>
	<programnev>Anjuta</programnev>
	<LEIRAS>C/C++ IDE</LEIRAS>
	<JOGALLAS>freeware</JOGALLAS>
	<PLATFORM>Linux</PLATFORM>
    </PROGRAM>
    <PROGRAM>
	<programnev>Glade</programnev>
	<LEIRAS>GUI tervező (Gnome, Gtk, stb. ingyenesen felhasználható grafikai elemekkel)</LEIRAS>
	<JOGALLAS>freeware</JOGALLAS>
	<PLATFORM>Linux</PLATFORM>
    </PROGRAM>
  </KATEGORIA>
  <KATEGORIA>
    <NEV>Grafika</NEV>
    <PROGRAM>
	<programnev>Gimp 2.0</programnev>
	<weblap xlink:type="simple" xlink:href="http://www.gimp.hu" xlink:show="new"></weblap>
	<LEIRAS>Kép-, és fotó-szerkesztő, valamint manipulátor eszköz. Alkalmas layerek (rétegek) kezelésére, szinte minden grafikai fájlformátumba tud exportálni. "Photoshopra kihegyezett tutorial" átirata készülőben több nyelven...</LEIRAS>
	<NETLEIR xlink:type="simple" xlink:href="http://www.gimp.hu" xlink:show="new"></NETLEIR>
	<JOGALLAS>Freeware</JOGALLAS>
	<PLATFORM>Linux, Windows /GTK telepítés szükséges - leírás a letöltésnél/</PLATFORM>
    </PROGRAM>
    <PROGRAM>
	<programnev>Album Shaper</programnev>
	<weblap xlink:type="simple" xlink:href="http://albumshaper.sourceforge.net/" xlink:show="new"></weblap>
	<LEIRAS>Fotóalbum generátor webes megjelenítéshez. Többféle stílus közül lehet választani, könnyen kezelhető.</LEIRAS>
	<JOGALLAS>Freeware</JOGALLAS>
	<PLATFORM>Linux, Windows</PLATFORM>
    </PROGRAM>
  </KATEGORIA>
  <KATEGORIA>
    <NEV>Egyéb</NEV>
    <PROGRAM>
	<programnev>Cervisia</programnev>
	<weblap xlink:type="simple" xlink:href="http://cervisia.kde.org/" xlink:show="new"></weblap>
	<LEIRAS>Könnyen használható CVS kliens (Konkurens verziókövető rendszer - több fejlesztő közös fájlokon történő fejlesztésének támogatása). Helyi lemezen történő használatára is alkalmas, nagyon sokféle szolgáltatással támogatja a különböző verziójú fájlok nyilvántartását (korábbi verziók fájljainak megőrzése, összehasonlítás, és változások kiemelése, visszatérés korábbi verziókhoz, stb.).</LEIRAS>
	<NETLEIR xlink:type="simple" xlink:href="http://cervisia.sourceforge.net/documentation/index.html" xlink:show="new"></NETLEIR>
	<JOGALLAS>Freeware</JOGALLAS>
	<PLATFORM>Linux</PLATFORM>
    </PROGRAM>
  </KATEGORIA>
</FEJLESZT>

Az Xlink paraméterei új ablakban történő megnyitást eredményeznek, és kiegészítő szöveg a CSS lap szerinti :before -nál megadott szöveg lesz (a hivatkozás szövege). Lehetne az adattagok jelei között is megadni a hivatkozás szövegét, pl:

<weblap xlink:type="simple" xlink:href="http://bluefish.openoffice.nl" xlink:show="new">Bluefish</weblap>

A stíluslap nélküli megjelenése (böngészőtől függően más lehet):

A nagyobb kép megjelenítésének leírása -> CSS Image Pop-up

A stíluslap lap4.css nevű fájl tartalma (javított, kategória elnevezéseket is tartalmaz - amit IE nem értelmez) :

body 	  {background-color: #f7fbfd}
FEJLESZT  {text-align: center}
FEJLESZT:before  {content: "Szoftverfejlesztés Linux alatt";
		font-size: 32pt; text-align: center; color: black}

NEV       {display: block; font-size: 20pt; font-style: oblique;
	   color: #0000FF; margin-top: 1cm; margin-left: 40%;
	   background: url(img/gomb01.jpg) repeat-x;
	   width: 3cm;}

PROGRAM  {display: block; text-align: left; background: #FFEFD5;
	margin-left: 10%; margin-right: 10%;}
PROGRAM:after  {display: block; content: " - "; color: #FFEFD5;
		background: url(img/atmenetv4.jpg) no-repeat bottom right;}

programnev {display: block; font-size: 15pt; font-weight: bold; text-align: center;
	   color: #191970; margin-left: 10%; margin-top: 10px; width: 170px;
	   background: url(img/gomb02.jpg) repeat-x;}

weblap:before {content: "weblap";}
weblap 	  {display: block; color: #0000FF;  margin-left: 15%; text-align: left}

LEIRAS:before {content: "Leírás: "; color: black; font-weight: bold;}
LEIRAS 	  {display: block; color: #124e91;  text-align: left;
	   width: 300px; margin-left: 25%;
	   background: url(img/atmenetv2.jpg) repeat-y;}
LEIRAS:after {display: block; content: " - ";
		color: #FFEFD5;
		background: url(img/atmenetv3.jpg) no-repeat bottom right;}

NETLEIR:before {content: "weblap a leíráshoz";}
NETLEIR   {display: block; color: #0000FF; margin-left: 25%; text-align: left}

kiegweb:before {content: "kiegészítések weblapja";}
kiegweb  {display: block; color: #0000FF; width: 300pt; margin-left: 10%}

KIEGESZITESEK:before {content: "Elérhető fontosabb kiegészítések: ";
			color: black; font-weight: bold;}
KIEGESZITESEK  {display: block; text-align: left; margin-left: 10%}

KIEGADAT {display: list-item; width: 300px; margin-left: 2cm;
	   text-align: left}

JOGALLAS:before {content: "Jogállás: "; color: black; font-weight: bold}
JOGALLAS  {display: block; margin-left: 15%; text-align: left}

PLATFORM:before {content: "Platform: "; color: black; font-weight: bold}
PLATFORM  {display: block; margin-left: 15%; text-align: left}

Az IE xml fájljához tartozó XSL stíluslap tartalma:

<?xml version="1.0" encoding="WINDOWS-1250" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<STYLE TYPE="text/css" MEDIA="screen, projection">
  @import url(lap4ie.css);
</STYLE>
</head>
<body>
  <h1>Szoftverfejlesztés Linux alatt</h1>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="FEJLESZT"><xsl:apply-templates/></xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA"><xsl:apply-templates/></xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/NEV"> <div id="NEV"> <xsl:value-of select="."/> </div> </xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM"> <div id="PROGRAM" > <xsl:apply-templates/> </div><br/> <div id="prog" ></div> </xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM/programnev"> <div id="programnev"> <xsl:value-of select="."/> </div></xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM/weblap"> <div id="weblap"><b>weblap:</b> <xsl:value-of select="."/> </div> </xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM/LEIRAS"> <div id="LEIRAS"><b>Leírás:</b> <xsl:value-of select="."/> </div> </xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM/NETLEIR"> <div id="NETLEIR"><b>weblap leíráshoz:</b> <xsl:value-of select="."/> </div> </xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM/KIEGESZITESEK"> <div id="KIEGESZITESEK"><b>Fontosabb kiegészítések:</b> <xsl:apply-templates/></div> </xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM/KIEGESZITESEK/KIEGADAT"> <div id="KIEGADAT"> <xsl:value-of select="."/></div> </xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM/JOGALLAS"> <div id="JOGALLAS"><b>Jogállás:</b> <xsl:value-of select="."/> </div> </xsl:template>
<xsl:template match="FEJLESZT/KATEGORIA/PROGRAM/PLATFORM"> <div id="PLATFORM"><b>Platform:</b>  <xsl:value-of select="."/> </div> </xsl:template>

</xsl:stylesheet>

Az XSL lap itt elsődlegesen az adatfeldolgozást, és az adatok előtt, ill. után megjelenítendő szövegeket, és html elemeket írja le, a tényleges formázást a beimportált CSS stíluslap végzi.
A lap4ie.css stíluslap nevű fájl tartalma - az xsl lapba is meg lehetett volna adni (itt az id alapján formáztam - és sajnos nem teljesen olyan a megjelenés, mint a többi böngésző esetén, a kategória és leírás után tervezett 1-1 díszitő kép helyzetét még nem tudtam beállítani... ) :

body 	{background-color: #f7fbfd; text-align: center;}
h1  	{font-size: 32pt; color: black}

#NEV       {display: block; font-size: 20pt; font-style: oblique;
	   color: #0000FF; margin-top: 1cm; 
	   background: url(img/gomb01.jpg) repeat-x; width: 3cm;}

#PROGRAM  {display: block; text-align: left; background: #FFEFD5;
	margin-left: 10%; margin-right: 10%;}
#prog {	display: block; margin-left: 10%; margin-right: 10%;
		background: url(img/atmenetv4.jpg) no-repeat right;}

#programnev {display: block; font-size: 15pt; font-weight: bold; text-align: center;
	   color: #191970; margin-left: 10%; margin-top: 10px; width: 170px;
	   background: url(img/gomb02.jpg) repeat-x;}

#weblap 	  {display: block; color: #0000FF;  margin-left: 15%; text-align: left}

#LEIRAS 	  {display: block; color: #124e91;  text-align: left;
	   width: 300px; margin-left: 25%;
	   background: url(img/atmenetv2.jpg) repeat-y;}
#leir {display: block; content: " - ";
		color: #FFEFD5;
		background: url(img/atmenetv3.jpg) no-repeat bottom right;}

#NETLEIR   {display: block; color: #0000FF; margin-left: 25%; text-align: left}

#kiegweb  {display: block; color: #0000FF; width: 300pt; margin-left: 10%}

#KIEGESZITESEK  {display: block; text-align: left; margin-left: 10%}

#KIEGADAT {display: list-item; width: 300px; margin-left: 2cm;
	   text-align: left}

#JOGALLAS  {display: block; margin-left: 15%; text-align: left}

#PLATFORM  {display: block; margin-left: 15%; text-align: left}

(Megvalósításra vár még a hivatkozás jellegű szövegek link-é alakítása IE részére is. - Ez a feladat az asp-re vár, ott egységes adatkezeléssel lehet xml adatokat is feldolgozni /SQL adatokhoz hasonlóan/.)
ugrás a lapra

oldal tetejére

Elsötétedő háttér kép megjelenítéskor

Kategória: Javascript - Hozzáadva: 2007. 04. 15. | Módosítva: 2009. 01. 31.

Az alapelv az, hogy a tényleges tartalom felé helyezett transparent id-val rendelkező <div> tag által beállított háttér átlátszóságát átállítjuk Javascript for... loop ciklusa segítségével 85%-ig (ez már majdnem átlátszatlan - itt fekete), majd egy eddig kiterjedés nélküli képnek a méreteit beállítjuk a tényleges méretre. A képen történő kattintásra az elsötétedés fordítja fog végbemenni, és a kép méreteit visszaállítjuk a korábbi kiterjedés nélküli méretre. Képek "thumbnail" nézetéhez ennek a második "előbukkanó" nagyobb képnek az src tulajdonságát át is állíthatjuk, így mindig a kívánt kép jelenik meg (a betekintő kisméretű képek paraméterként adnák át a megjelenítendő kép címét). A hivatkozásban leírt CSS átlátszóság lett kiegészítve Javascript "animációval", és a transparent által közrefogott területben elhelyeztem egy <pre> tagot, aminek a kiterjedését teljes takarásra állítottam, így az IE-től eltérő böngészők is teljes lefedéssel jelenítik meg a transparent hátterét. (Több más egyéb tartalom letakarásához esetleg ezt a tagot is pozicionálni kell, és állítani kell a méretén is .) A tutorial szerinti több böngésző által ismert tag beállítása történik egyszerre. A setTimeout('sotetit()',1) föggvény második paramétere milisecundum, a sötétítés/világosítás sebességét nem befolyásolja (kis értékeknél). A sebességet az önmagát meghívó függvény, és utasításainak száma befolyásolja. Lehet esetleg gyorsítani, ha böngészőnként külön függvény végzi a beállításokat, vagy ha a sötétedés lépésközeit változtatjuk (túl kevés lépésnél a színátmenet nem olyan látványos). Az "animáció" akkor is működik, ha a flash tartalmak tiltottak, vagy nincs flash-plugin telepítve. Javascript tiltása esetén is megjelenik az új kép.
ugrás a mintapéldára

Stíluslapja:

p.mod   {
	color: #A85400;
        }
pre 	{
	width: 1024px; height: 768px;
	}
#nagy 	{
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;}
.szoveg	{
	display: block;
	position: absolute;
	top: 410px;}

#transparent {
	background: #000000;
	display: block;
	width: 1px;
	position: absolute; bottom: 1px; right: 1px;
	}

html fájl:

<!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=iso-8859-2" />
<meta id="author" content="Sümegi Zoltán"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<title>Sümegi Zoltán oldala - programozás, dolgozatok</title>

<link rel="stylesheet" href="sotetit.css" type="text/css" />

<script type="text/javascript">
<!--
  var i=0
  var j=0

  function setujkep(){
    document.getElementById("transparent").style.top="0px";
    document.getElementById("transparent").style.left="0px";
    document.getElementById("transparent").style.width="1024px";
    sotetit()
  }

  function setregikep(){
    vilagosit()
    document.getElementById("transparent").style.bottom="1px";
    document.getElementById("transparent").style.right="1px";
    document.getElementById("transparent").style.width="1px";
  }

  function sotetit() {
    i= i + 8
    j= j + 0.08
    if (i < 80) {
    document.getElementById("transparent").style.filter="alpha(opacity=" + i + ")"
    document.getElementById("transparent").style.opacity=j
    setTimeout('sotetit()',1)
    }
    else {
      kirak() }
  }

  function vilagosit() {
    i= i - 8
    j= j - 0.08
    if (i > 0) {
    document.getElementById("transparent").style.filter="alpha(opacity=" + i + ")"
    document.getElementById("transparent").style.opacity=j
    setTimeout('vilagosit()',1)
    }
    else { elvesz() }
  }

  function kirak() {
    document.getElementById("nagy").style.height="360px";
    document.getElementById("nagy").style.left="150px";
    document.getElementById("nagy").style.top="60px";
    document.getElementById("nagy").style.width="381px";  
  }

  function elvesz() {
    document.getElementById("nagy").style.height="1px";
    document.getElementById("nagy").style.left="-1px";
    document.getElementById("nagy").style.top="-1px";
    document.getElementById("nagy").style.width="1px";
  }
//-->
</script>
</head>
<body>

<div id="uj_kep">
<div id="transparent" >
<pre>


</pre>

</div>
  <a id="kep1" onclick="setujkep()" > <img src="img/lls.png" alt="teszt_kép1" /> </a>
<div class="szoveg">Kattintani kell a képre.
<br/>
...

</div>
 <a id="kep2" onclick="setregikep()" > <img id="nagy" src="img/xml_kinezet_nagy.jpg" alt="teszt_kép2" />  </a>
</div>


</body>
</html>

A Javascript deklarációnál fontos, hogy kapjon kezdőértéket a két ciklusváltozó,

  var i=0
  var j=0

különben a cikluson belül a hozzáadások után is nulla marad az értékük, és a script letiltásra kerül, ill. nem a várt módon fog működni. Sajnos Linux alatt (nvidia/ati driver nélkül) az "animáció" rendkívül lassan megy végbe, és csak 3D támogatást nyújtó meghajtó telepítése után működik az elvárható módon. Megfontolandó a használata, mivel a linux felhasználók jelentős része nem telepíti a 3D támogatást.

oldal tetejére

ASP.NET alapok (teljesen kezdő)

Kategória: ASP.NET - Hozzáadva: 2007. 12. 20.

Az ASP.NET alapú fejlesztésekhez MS környezet javasolt (bár Novell jóvoltából Linux környezetben a mono develop is alkalmas ASP.NET alapú fejlesztésre). Futtatása az ASP.NET alapú lapoknak Linux kiszolgálón is lehetséges.

ASP.NET 2.0 alapú fejlesztéshez szükség van a következő ingyenesen használható eszközökre (ha a kiszolgáló, ahova fejlesztünk támogatja az ASP.NET 3.5 verzióját, akkor a megfelelő újabb verziót érdemes beszerezni):

MS Visual Studio 2005 Express (esetleg csak a webdevelop összetevő - példák miatt érdemes C# és Visual Basic összetevő)
Ugyanitt MS SQL Server 2005 Express (ha MS SQL adatbázist is akarunk használni)

Érdemes még az AJAX technikákra felkészülni (ingyenesen használható összetevők):

asp.net/ajax letöltések
Dokumentáció az AJAX összetevők telepítéséhez/használatához (némelyik összetevőt csak a megfelelő könyvtárba kell másolni a leírás szerint)

AJAX használatához a devportal.hu leírásával érdemes elindulni (project konfig fájljainak beállítása - CDBolt_AJAX_utmutato.pdf, vagy google htm). A webfejlesztést pedig érdemes a devportal, vagy a Visual Studio kezdőkészletének tanulmányozásával kezdeni. Barát még a Google "ASP.NET".

oldal tetejére

ASP.NET kezdő I.

Kategória: ASP.NET - Hozzáadva: 2007. 12. 22. | Módosítva: 2008. 01. 25.

Az első ASP.NET alapú weblaprendszerem a Visual Studio kezdőkészletére alapozva készítettem. (File - New - Web Site - Personal Web Site Starter Kit) Ez lényegében egy teljesen működő rendszer Témákkal - web.config nevű xml fájlból választható a használni kívánt téma /oldalakra vonatkozó stíluslapok csoportja, stb./ - , felhasználó kezeléssel (login, adatbázis a felhasználóknak, admin oldal), képek kezelése és egyebekkel.

A kezdő rendszerem én nem bonyolítottam agyon, jelenleg nagyrészt statikus html-szerű, tehát a tutoriáljaim is egyelőre az aspx fájlok törzsébe vannak ágyazva html kódként. (Még nem döntöttem el, hogy xml, vagy adatbázis alapú legyen.) Az egyszerűsített kezelés miatt nincs is szükségem a kezdőkészlet fájljainak és mappáinak többségére. Töröltem őket, ami később kell, azt a Solution Explorer /jobbra fent/ ablakának gyökérelemén /pl. C:\WebSite1\ / jobb klikk után hozzáadom. Vagy a megfelelő almappán - pl. App_Themes\White alatt stíluslap hozzáadása.

Maradtak:

konfig fájlok: Global.asax; Handler.ashx; web.config; web.sitemap
weblapok / master oldalak: Default.aspx; Default.vb; Default.master; Default.master.vb
könyvtárak: App_Data - törlés után is létrejön (a helyi - localhost - kiszolgálón történő futtatások log adatai - feltölteni nem kell); App_Themes - stíluslapok téma könyvtárai (természetesen saját igények szerint módosítva/létrehozva a megfelelő stíluslap); Images - képek részére, amik nem a stíluslapokhoz tartoznak (azok a képek az App_themes\..\img könyvtárba kapnak helyet)

Ezeket a könyvtárakat és fájlokat a webhely gyökerébe (wwwroot mappa) feltöltve használható rendszert kapunk. A starter kit, és más sablonok is a több weblapot tartalmazó oldalakat a gyökérben létrehozott xxx.aspx fájlokkal valósítja meg, én mégis a saját mappában létrehozott Default.aspx fájlokkal valósítottam meg.
Így lehet hivatkozni minden aloldalra a domain\könyvtár\ forma szerint. (web.sitemap fájlban is meghatározható így az oldalszerkezet, és az ASP.NET menu osztálya is tudja kezelni) Ez azért jó, mert ha nem minden aloldal ASP alapú még, vagy később változni fog esetleg az oldal fájlneve, akkor is működni fognak az így megadott külső linkek. (linkgyűjteményeknek megadott hivatkozások, stb.) Pl. a weblapom főoldala www.sumegi.eu címen érhető el (valójában www.sumegi.eu\Default.aspx), ez az aloldal pedig a www.sumegi.eu\html\ címen (valójában www.sumegi.eu\html\Default.aspx), de mindkettő elérhető lesz, a relatív hivatkozással akkor is, ha php alapú, vagy sima html alapú lesz az oldal (default.php, index.htm). És nem kell átmódosítani esetleg több száz külső hivatkozást. (Illetve akkor is működni fognak a linkek.) *

* Ezen már változtattam, mert a navigációt segítő asp vezérlők az XmlSiteMapProvider működéséből adódóan nem mindig működnek megfelelően, ha a web.sitemap url paramétere csak könyvtár elnevezést tartalmaz (pl. SiteMapPath vezérlő).

Könyvtárszerkezet:

Nem árt tudni, hogy WebSite-ok esetén nem project készül (ezeket a File menü - New WebSite -al hozhatjuk létre), hanem Solution. A new WebSite esetén a VS automatikusan készít a website-hoz Solution-t, aminek a könyvtára a Dokumentumok\Visual Studio 2005 (vagy 2008)\Projects helyen lesz egy Solution fájlokat tartalmazó mappában (pl. WebSites2 mappa). Itt kap helyet néhány speciális fájl is, amit esetleg kézzel kell áthelyezni a Website mappájába, ha egyedi helyre helyeztük a website-unkat (pl. xml fájlhoz generált xml schema fájl - ha jól emlékszem). (vagy bekonfiguráljuk a projectünket/website-unkat...) A Visual Studio minden fájlt a Solution részének tekint a website gyökérmappa alatt (pl. itt c:\WebSite1\). Időnként a mappa tartalmát frissíteni kell a Solution Explorer ablakban (pl. képek bemásolása esetén az img könyvtár frissítésig a kódszerkesztő ablakban hibának jelzi a "nem létező" fájlt).

oldal tetejére

XML linkek (főoldal keresztlinkjei)

Kategória: XML - Hozzáadva: 2007. 12. 27.

Egy kis dinamizmust akartam vinni a főoldal linkjeinek megjelenítésébe, ezek azok a tartalmak, amelyek jelentősen változnak. A választás xml fájlból történő beolvasásra esett, ezt akár szövegszerkesztővel tudom szerkeszteni. Ha már adatszerkezetben tárolom a linkeket, akkor már kap néhány extra adatmezőt, ami segít karbantartani és megjeleníteni. A plusz adatmezők a linkekre vonatkozóan: leírás, hozzáadva, lejár. Ezen kívül a linkek csoportokba vannak összefogva (szöveges link, banner, linkcsoport /partnerek, hivatkozások/). Az xml fájlban a linkek egy-egy CDATA mezőben kaptak helyet, így nem kell a feldolgozásnál vizsgálni az egyéb paramétereket (pl. img tag tartalmaz-e id vagy más tulajdonságot - némelyik tag esetén hibát okoz, ha feltétel nélkül kiírásra kerül a tulajdonság üres sztring adattal). A fájl szerkezet így alakult:

    <?xml version="1.0" encoding="utf-8" ?>
    <?xml-stylesheet type="text/xsl" href="ref.xsl"?>
    <linkSet>
        <linkSetGroup title="Partnerek">
           <imgGroup>
                <link description="linkcsere" added="2007.12.20." expiration="">
                    <![CDATA[<a href="http://www.startlap.hu">
                        <img src="img/startlap.gif" alt="Startlap" />
                    </a>]]>
                </link>
                <link description="kereső" added="2007.12.20." expiration="">
                    <![CDATA[<a href="http://www.google.hu/">
                        <img src="img/google.gif" alt="Google" />
                    </a>]]>
                </link>
                ...
            </imgGroup>
            <textGroup>
                <link description="linkcsere" added="2007.12.20." expiration="">
                    <![CDATA[<a href="http://www.hudir.hu">www.hudir.hu</a>]]>
                </link>
                ...
            </textGroup>
        </linkSetGroup>
        <linkSetGroup title="Hivatkozások">
            ...
        </linkSetGroup>
    </linkSet>

Az xml fájl önálló megjelenítéséhez készült egy ref.xsl nevű fájl is, amivel minden böngésző alatt a megtervezett módon jelenik meg a fájl tartalma (pl. h5 tagok között a csoport neve, stb.). A weblapon történő megjelenítéshez ez a fájl nem szükséges, ott az ASP.NET feldolgozó rutinja végzi a szükséges tagok megfelelő helyre történő beillesztését, és a faszerkezet bejárását. (Illetve a megjelenítéshez nem szükséges adatok kihagyását is.) Ez a fájl nem a CDATA szerinti szerkezetet dolgozza fel, hanem a CDATA nélkül (a jelenlegi xml fájl megjelenítésére így nem is alkalmas), annak helyén az a tagot tekinti gyermek ágnak. Az a tagon belüli további tagokkal pedig nem foglalkozva, a teljes tartalmat megjeleníti. Az xsl fájl kódja:

    <?xml version="1.0" encoding="utf-8"?>
    <xsl:stylesheet version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
            <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="linkSet">
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="linkSet/linkSetGroup">
        <h5>
        <xsl:value-of select="@title"/>
        </h5>
        <xsl:apply-templates select="imgGroup"/>
        <br />
        <xsl:apply-templates select="textGroup"/>
    </xsl:template>

    <xsl:template match="linkSet/linkSetGroup/imgGroup">
        <xsl:apply-templates/>
    </xsl:template>
  
    <xsl:template match="linkSet/linkSetGroup/textGroup">
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="linkSet/linkSetGroup/imgGroup/link">
        <xsl:copy-of select="a" />
    </xsl:template>
  
    <xsl:template match="linkSet/linkSetGroup/textGroup/link">
        <xsl:copy-of select="a" />
        <br />
    </xsl:template>

    </xsl:stylesheet>

Az xsl fájl feldolgozója nem for-each szerkezetre épülő, hanem az apply-templates segítségével építi be a gyökértől (/) kezdve a gyermek ágakat, és azok tartalmát. Egy-egy blokkban az apply-templates csak a közvetlen leszármazott ág olyan tartalmát jeleníti meg, ami nem tulajdonságként lett megadva. Pl.:

    <link description="ez egy tulajdonság, és nem fog megjelenni" added="ez sem jelenik meg" expiration="">
        <a>EZ A SZÖVEG FOG MEGJELENNI (AZ IMG TARTALOM MÁR NEM, MERT AZ AZ A TAG GYERMEKE)
            <img src="img/startlap.gif" alt="Startlap" />
        </a>
    </link>

Egy-egy blokkon belül az apply-template előtt és után bármi megadható (szöveg, html tag, stb.), ez minden az ágra vonatkozó elem előtt/után meg fog jelenni. Ha az adott ág tulajdonságként megadott értékeit is meg kell jeleníteni, akkor azt a value-of select segítségével tehetjük meg:

    <xsl:template match="linkSet/linkSetGroup">
        <h5>
        <xsl:value-of select="@title"/>
        </h5>
        ...
    </xsl:template>

Ha egy ág minden tartalmát meg akarjuk jeleníteni (pl. a tag, tulajdonságai és a gyermekének számító img tag szintén tulajdonságaival együtt, akkor azt a copy-of select segítségével tehetjük meg.

    <xsl:template match="linkSet/linkSetGroup/imgGroup/link">
        <xsl:copy-of select="a" />

oldal tetejére

A forrás lap forrása

Kategória: Html - Hozzáadva: 2007. 04. 15. | Módosítva: 2008. 02. 01.

:) Example miatt, ha valaki nem ismerné... (xmp tag az új xhtml-ben már nem érvényes, helyette pl. pre tag közötti megadás, a < és a > jelek entitáskóddal történő megadással - < és >). Az érvényes html kód érdekében a mintakód & jelét is érdemes entitáskódra cserélni (&) - mint ASP.NET feltételes adatmegjelenítés iif szerkezetén belüli karakterlánc összefűzésére szolgáló jel.
(bővítve az eltérő IE megjelenítés miatt - Linux lapon szükség volt sortörés nélküli igen hosszú sorokra is).
Ezt megoldottam a padding-bottom: 20px; stílusinformáció beszúrásával. Erre azért volt szükség, mert az egysoros , de túl széles előre formázott szövegnél az IE úgy jelenítette meg a viszintes görgetőt, hogy pont letakarta a mintaszöveget. Ezért kapott a Javascriptes programmal eltérő formázást, amit azóta kiiktattam, de itt hagyom a példában, mert lehet olyan formázás, ami miatt szükség lehet rá.
Javascript alapon egy egszerű böngésző detektálás megnézi, hogy IE azonosítóval történik-e a megjelenítés - ilyent használhat Netscape és Firefox is, a formázás itt is kellemetlen módon alakulna. Ha IE a megjelenítő, akkor csak a forras.css stíluslap töltődik be, ha pedig nem IE, akkor második elsődleges lapként (title=forras mindkettő esetén) betöltődik a forras_scroll.css lap is, ez tartalmaz kiegészítést az xmp tag-ra.
(Vagy Javascript helyett feltételes Stílusinformációk IE és Opera esetén.) A böngésző-detektáláshoz a Javascript kódja:

<head>

<link rel="stylesheet" href="forras.css" title="forras" />

<script type="text/javascript">
  browser=navigator.appVersion;

if (browser.indexOf("MSIE")< 0)
  {
  document.write('<link rel="stylesheet" href="forras_scroll.css" title="forras" />');
  }

</script>

Az eredmény IE esetén az pre tag között leírt szöveg teljes hosszáig tart a szürke háttérszín (ill. lehet, csak az ablak széléig), ha pedig nem IE a megjelenítő, akkor a forras_scroll.css kiegészíti a pre formázását 700px szélesre (100% helyett). (ez már ki lett küszöbölve /azthiszem/, már csak 1 stiluslap van)
forras_scroll.css tartalma:

pre {max-height: 200px; width: 700px; overflow: auto;}

A görgetősávot használja is mindegyik böngésző. És a formázás beállítása:

<style type="text/css">
	pre {background: #DCDCDC; width: 700}
	...
</style>

</head>
<body bgcolor="#f7fbfd">
<a id="fent"></a>

...

<pre><style type="text/css">
	a:hover {font-size: 150%; background: #66ff66}
...</pre>

oldal tetejére

ASP.NET feldolgozóval az XML linkek

Kategória: ASP.NET - Hozzáadva: 2008. 01. 05.

Az ismertetett xml fájl feldolgozása az ASP oldalra elhelyezett XmlDataSource és egy Repeater vezérlő segítségével történik. Az XmlDataSource vezérlő az oldalra helyezhető a baloldali Toolbox - Data - XmlDataSource elemét kiválasztva Source vagy Design nézet esetén is (kódablak/Designer ablak bal alsó része). A Designer nézetben a smart menüben (bal klikk a vezérlő jobb felső sarkán a háromszögre ) választható hozzá ki az xml fájl, mint adatforrás, a kód szerkesztése alatt pedig a tulajdonság beírásával ( DataFile="~/references.xml" ).

Design nézet:

A repeater elhelyezésénél erre az adatforrásra (az XmlDataSource ID tulajdonságában megadott azonosító) kell hivatkozni annak tulajdonságában.

    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/references.xml" 
        XPath="linkSet/linkSetGroup"></asp:XmlDataSource>

Az xml adatok feldolgozását áganként egymásba ágyazott repeater vezérlő, és az XPath segítségével oldottam meg. Tutoriál alap volt az msdn témábavágó ismertetője.

    <div class="oldal" id="Div1">
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
            <ItemTemplate>
                <h5>
                    <%#XPath("@title")%>
                </h5>
                <asp:Repeater ID="Repeater2" DataSource='<%# XPathSelect ("imgGroup/link") %>' runat="server">
                    <ItemTemplate>
                        <%#XPath(".")%>
                    </ItemTemplate>
                </asp:Repeater>
                <br />
                <asp:Repeater ID="Repeater4" DataSource='<%# XPathSelect ("textGroup/link") %>' runat="server">
                    <ItemTemplate>
                        <%#XPath(".")%>
                        <br />
                    </ItemTemplate>
                </asp:Repeater>
            </ItemTemplate>
        </asp:Repeater>
    </div>

Az XmlDataSource vezérlő XPath tulajdonsága határozza meg a repeater vezérlővel bejárandó első ágat. Az ág tulajdonságainak kiírása (több különböző tulajdonság kiírásához ismételni kell a formát, a megfelelő értékkel):

<%#XPath("@title")%>

Majd ezt követi egy, vagy több gyermek ágának feldolgozása további beágyazott repeater segítségével, amelyeknél az XPathSelect tulajdonsággal határozzuk meg a feldolgozandó gyermek ágat. Ez nem feltétlen kell, hogy közvetlen gyermek legyen, így lényegében bármilyen sorrendben, és formában megjelenhetnek az xml adatforrás adatai.

oldal tetejére

ASP.NET kezdő II.

Kategória: ASP.NET - Hozzáadva: 2008. 01. 16.

ASP.NET alapú fejlesztéshez néhány gondolattal még rendszerezném az alapokat. Nem árt valamennyi Html és CSS tapasztalat, ami akár menet közben is pótolható referencia jellegű áttekintéssel a w3cschool html és w3cschool css oldalain. Vagy maga a Visual Studio is támogathat, hiszen a Source nézetben begépelt html nyitó tag után (< "kacsacsőr") felkínálja a lehetséges tag-eket, és azok tulajdonságait a lehetséges értékekkel együtt (ha fix érték adandó meg).

Érdemes a master oldalakat használni, mert így bonyolult weblaprendszer is egységes módon jeleníthető meg. A frame-es szerkezetű oldalakhoz hasonlóan (frame-k nélkül) - minden lap tetején/oldalán/stb. helyen ott lehet az egységes menü, vagy más elem, amit csak egyszer kell elkészíteni a master oldalon. (Ez jó, mert böngészők által regisztrált frame-en belüli oldal nem fog megnyílni a hozzátartozó kellékek nélkül /menü, lábléc, stb./.) A master oldalak egymásba ágyazását támogatja a Visual Studio 2008 (Express vált. ingyenesen), így lehet eltérő állandó tartalmú aloldalakat megjeleníteni (pl. mint az én főoldal/aloldal rendszerem eltérő fejléc/menü az aloldalakon).

Új master oldal VS2008 alatt - Solution Explorer - jobb klikk - Add New Item

A gyakorlatban ez úgy néz ki, hogy van egy master oldal, ami minden oldalon egységesen megjelenő dolgokat tartalmazza (pl. lábléc, oldalmenü/reklám doboza). Ez az oldal tartalmazza az ASP deklaráción kívül a html és body nyitó, valamint záró tag-eket. A body tag-en belül lesz a Content Place holder (ebbe lesz beágyazva a többi master/egyéb oldal - azok a lapok már nem tartalmazhatnak html és body tag-eket). A többi oldal létrehozásánál kérjük a master oldal kiválasztását (pipa a select master page előtti jelölőnégyzetbe), ha az oldalhoz akarjuk a master oldalon megadott elemek használatát. Ha nem akarjuk, akkor ez az oldalunk is kell, hogy tartalmazza a html és body tag-eket (nyitó és záró).

Új Web Form VS2008 alatt - Solution Explorer - jobb klikk - Add New Item

A master és egyéb oldalakon lévő html elemek formázása stíluslapokkal történhet. Stiluslapra történő hivatkozást meg lehet adni a web.config fájlban (system.web - pages styleSheetTheme tulajdonsága - ez minden lapra érvényes lesz). Meg lehet adni a html tag-et tartalmazó oldalon (head szekcióban, mintha sima html laphoz adnánk meg /itt akár több stíluslap is/), ez azokra a lapokra lesz érvényes, amelyek ehhez a master oldalhoz tartoznak /ha a html és head tag master oldalon van/. Meg lehet adni a Web Form (vagyis az aspx oldal Theme tulajdonságánál). És persze a html elemekre is alkalmazható egyéni stílus. A fejlesztő eszköz is tud akár elem szintű formázást skin fájlok segítségével.

A dinamizmust pedig az ASP.NET vezérlőkkel lehet biztosítani. Adatbázis eszközök, menük táblázatok xml és egyéb adatokból - az új LINQ segítségével akár tömbök is kezelhetők adatbázisként (Tervezem egy automatizált fájllista beolvasása révén működő képgaléria programrész megvalósítását - így még adatbázist se kell feltölteni, csupán a feltöltést kell megcsinálni a képek weblapos megjelenítéséhez /és akár tiszta html kóddal a végeredményt/).

Olvasni és nézni való magyarul (én túl vagyok az összes videón, nagyon jók):

oldal tetejére

ASP.NET lapok szerkezete

Kategória: ASP.NET - Hozzáadva: 2008. 01. 16.

A master oldalak mellett a hagyományos asp lapok (Web Form - aspx fájlok) is összeállíthatóak részekből. Ezt a Web User Control (ascx fájlok) segítségével tehetjük meg. A Web User Control lapunk a szükséges html kódot vagy asp vezérlőket tartalmazza, és a használni kívánt lapunkba a register utasítással beregisztráljuk,

<%@ Page Language="VB" MasterPageFile="~/Default.master" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="doc_Default" Title="Sümegi Zoltán oldala | Dolgozatok"
    Theme="Dolgozat" %>

<%@ Register Src="Filozofia.ascx" TagName="filozofia" TagPrefix="uc1" %>
<%@ Register Src="Humanaspektus.ascx" TagName="humanaspekt" TagPrefix="uc2" %>
<%@ Register Src="Tudomany.ascx" TagName="tudomany" TagPrefix="uc3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="Server">
...

majd a megfelelő helyen (html kódon belül) beszúrjuk a beregisztrált azonosítók használatával.

...
        <uc1:filozofia ID="filozofia" runat="server" />
        ...

Nálam a dolgozataim kerültek egy-egy külön ascx fájlba, de rakhatunk ilyen fájlba akár menüt, vagy más vezérlőt (igazából erre lett kitalálva). Stíluslapok, és formázás szempontjából a beszúrás helyén érvényes formázás lesz mérvadó. Tehát egy ilyen vezérlőt tartalmazó ascx fájl akár különböző módon nézhet ki ha más stílusinformációval rendelkező lapon lett beszúrva.

Érdemes átnézni az msdnkk.hu - Webalkalmazások fejlesztése / CSS alapú HTML szerkesztés című részét, mert a stílusinformációk hatásköréről egy érdekes előadás látható, ami a Visual Studio képességeit mutatja be.

oldal tetejére

Beágyazott ASP kódok

Kategória: ASP.NET - Hozzáadva: 2008. 01. 17.

Nem csak a rendelkezésre álló asp vezérlőkkel biztosítható weblapjaink dinamizmusa, hanem a html kódba ágyazott asp kódrészletekkel is. Ez az alapértelmezett programozási nyelven (vagy a lap fejlécében meghatározott nyelven) megírt asp script lehet, ami akár feltételeket és ciklusokat is tartalmazhat. Megadási módja a hivatkozott tutoriálok szerinti rövid, vagy teljes formájú jelöléssel a html kódba ágyazva lehetséges.

Az én példám a "startlaphoz ad" nyomógomb dinamikus url és title paraméterezésének előállítása az asp request és page objektumok tulajdonságainak a lekérdezésével. Igazából valid hivatkozást akartam az eredeti JavaScript-es hivatkozás helyett, de időközben megértettem, hogy az ellenőrző oldal kifogása a paraméterek elválasztásának entitáskódban történő megadásra vonatkozott - a validator szerint nem jó az & jellel történő elválasztás, helyette a & entitáskóddal történő elválasztást javasolta. (A pozitív oldala a dolognak, hogy lett egy letiltott JavaScript esetén is működő dinamikus nyomógomb, negatívum a JavaScriptes változattól sokkal hosszabb hivatkozó szöveg kiírás.)

A beágyazott asp script (<% utáni = jel a response.write... rövidítése) az aktuális url cím beszúrásához:

<%=Request.Url.ToString()%>

Az aktuális fejlécszövege pedig:

<%=Page.Header.Title%>

A teljes hivatkozás így:

<a href="http://www.startlap.hu/sajat_linkek/addlink.php?url=<%=Request.Url.ToString()%>&amp;title=<%=Page.Header.Title%>" id="add_link" title="www.startlap.hu" target="_blank"><img alt="Add a Startlaphoz" src="../img/bookmark.png" /></a>

Az ilyen asp script-es beszúrások bárhol alkalmazhatóak a html kódon belül, még a tag-ek paramétereiben, vagy a szöveges adatok közé ékelve is.

A beágyazott ASP kódok tanulmányozásához tutoriálok:

Néhány hivatkozás:

ENTITÁSKÓDOK
Page tulajdonság használata - akár különböző oldal elemek beállításához
Request objektum használata

oldal tetejére

ASP.NET authentikáció

Kategória: ASP.NET - Hozzáadva: 2008. 01. 20.

Weboldalunkon kialakított admin felület létrehozásához, vagy felhasználó-kezelés esetén szükség lesz az ASP.NET konfigurációjára. Website menü - "ASP.NET Configuration". Itt lehet beállítani a weblapunk eléréséhez engedélyezett felhasználókat és csoportokat, valamint lehetőség van a weblaprendszer alkönyvtárainak a korlátozására bizonyos felhasználók, vagy csoportok esetében (pl. anonim felhasználók).

Beállítás:

A webes beállító lap Security fülén válasszuk a "Select authentication type" funkciót, és itt a "From the internet" beállítást,
A Security fülön hozzunk létre csoportokat (ha akarunk - "Enable Roles", majd "Create ..."), pl. adminisztrator, guest, stb.,
A Security fülön hozzunk létre felhasználókat - "Create user", és jelöljük a megfelelő csoportba,
A Security fülön az "Access Rules" alatt beállíthatjuk a felhasználók és csoportok hozzáférését a Website különböző könyvtáraihoz (enged, vagy tilt).

Kiszolgálónként eltérő lehet az authentikáció. -> hostingabc.hu/doc/forum

A beállítás után a Website App_Data könyvtárában létrejövő ASPNETDB.MDF és web.config fájlokkal állapítja meg alkalmazásunk a létrehozott felhasználók és jogosultságainak a beállításait. (Ezt a könyvtárat is fel kell tölteni az authentikáció használatához.)

Vagy ha nem ezzel az adatbázissal lehet authentikálni, akkor létre kell hozni a megfelelő adatbázisban a tábláinkat. (pl. fórum szerint export - import)

oldal tetejére

ASP.NET adatbázis-kezelés

Kategória: ASP.NET - Hozzáadva: 2008. 01. 20.

Több megoldás is létezik adataink elérésére. Létrehozhatunk SQL Server fájlt valamelyik könyvtárunkba, vagy használhatjuk SQL Server, vagy más adatbázis-kiszolgáló adatbázisait. Távoli kiszolgálón előzőleg létre kell hoznunk egy vagy több felhasználót, aki az adatbázisunkhoz csatlakozhat. Létre kell hozni egy vagy több adatbázist (táblákat ráérünk később).

Adatok elérése SQL adatbázisból SqlDataSource segítségével:

Az asp lapjainkon (aspx vagy ascx, esetleg a master oldalon) el kell helyeznünk egy SqlDataSource vezérlőt (Toolbox - Data - SqlDataSource), és be kell állítani a használni kívánt adatbázishoz. Design nézetben az elhelyezett vezérlő smart menüjében "Configure Data Source".
Configure SqlDataSource

"New Connection", vagy a meglévő ConnectionString-ek közül választhatunk.
Configure SqlDataSource3

Új csatlakozás esetén adjuk meg az adatokat - szerver neve (távoli kiszolgáló esetén -> "szervernév, port"), "SQL Authentication" és azonosítók (adatbázishoz előzőleg létrehozott felhasználók valamelyike), majd adjuk meg az adatbázisunk nevét. Érdemes egy "Test Connection"-t csinálni. (Itt nincs értelme a jelszavat tárolni, mert ezt a weblapból kívánjuk majd használni, tehát a web-szervernek kell majd ismerni.) A kiválasztott adatokkal lehet tovább lépni, és a következő jelszómentési kérdésre már válaszolhatunk igennel (ekkor a web.config fájlban létrejön a mentett azonosító adatokkal egy Connection String).
Configure SqlDataSource4

A következő lépésben össze lehet állítani a megjelenítendő adatok sql lekérdezését.

Adatok elérése SQL adatbázisból DataSet séma fájl segítségével:

Hasonló a Java nyelv entitás alapú adatkezeléséhez (pl. Hibernate, vagy NetBeans, stb. IDE által szállított megoldás). Ezt még nem próbáltam ki, néhány tutoriálból látható a használata:

Adatok elérése SQL adatbázisból LINQ segítségével:

www.msdnkk.hu Következő Generációs .NET Nyelvek és Adatkezelés Induló Készlet
www.msdnkk.hu Webalkalmazások fejlesztése

Az egyik lapom SqlDataSource vezérlője (web.config fájlban tárolt ConnectionString segítségével csatlakozik):

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbwebConnectionString %>"
        SelectCommand="SELECT * FROM [html]"></asp:SqlDataSource>

A ConnectionString-ben lett meghatározva a kiszolgáló, az adatbázis neve és felhasználói adatok. A html nevű tábla minden rekordja lekérdezésre kerül.

Az SqlDataSource csak létrehozza a kapcsolatot az adatbázis felé, az adatok megjelenítése repeater, datalist, vagy más vezérlő segítségével lehetséges. A különböző vezérlők más html tag-ek között jeleníthetik meg az adatokat, de nagyjából egyforma a megjelenítéshez szükséges beállításuk. (Xml adatforrás adataihoz az XmlDataSource vezérlőt használhatjuk - vagy SiteMapDataSource az asp web.sitemap fájljához.)
A megjelenítés egy újabb tutoriálban lesz.

oldal tetejére

ASP.NET feltételes adatmegjelenítés

Kategória: ASP.NET - Hozzáadva: 2008. 02. 01.

Időnként szükség lehet az adatbázismezők tartalmától függő kiírásra, mint a tutoriáljaim módosítási idejének kijelzése. Tetszetősebb a végső html tartalom, ha csak akkor jelenik meg a "módosítás ideje:" szöveg, ha az adatmező tartalma nem üres. Ezt ismét egy beágyazott ASP kóddal oldottam meg, felhasználva a Visual Basic iif és IsNullOrEmpty függvényét. Az adatmegjelenítés a korábban ismertetett Repeater vezérlővel történik, de a kiírás a vizsgálattól függően vagy egy üres karakterlánc (""), vagy az összefűzött " | Módosítva: " szöveg és az adatmező tartalma.

<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1">
        <ItemTemplate>
            ...
            <%#IIf(String.IsNullOrEmpty(String.Format("{0:d}", Container.DataItem("changed"))), "", " | Módosítva: " & Container.DataItem("changed"))%>
            ...
        </ItemTemplate>
    </asp:Repeater>

C# nyelvű megvalósítása az iif-es szerkezetnek a Netakadémia mintájában látható.

oldal tetejére

ASP.NET - GridView haladó

Kategória: ASP.NET - Hozzáadva: 2008. 02. 01.

A tartalomjegyzékemet akartam úgy átalakítani, hogy a rendelkezésre álló összes információ itt is megjelenjen, és rendezni is lehessen az adatokat. Ezeket a GridView vezérlő alapból tudja, és stíluslappal történő formázása sem nehéz, egy elég egyszerű html kódot generál (táblázatot). Fogósabb kérdés a táblázat celláiban megjelenítendő adat html formázása - hivatkozás készítése az adatból, több adatmező felhasználásával.

Ezt úgy oldottam meg, hogy adatmezők közül a linkhez használt két mező (id és cim) visible tulajdonságát hamisra állítottam (csak az adatkötés miatt szükségesek, a jelenlegi formában nem kell megjeleníteni), és beszúrtam egy plusz adatmezőt, amit template-nek állítottam be (cim mezőt ismét, majd "Convert ... TemplateField", vagy egyből TemplateField beszúrása). A Template mező ItemTemplate részében állítottam össze a másik két adatmező felhasználásával a hivatkozást.

Adatmezők szerkesztése.

GridView adatmezőinek beállítása

Adatmezők beállítása.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
        AllowSorting="True" BorderStyle="Solid">
        <RowStyle BackColor="#E2E9ED" />
        <Columns>
            <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" SortExpression="id"
                Visible="False" />
            <asp:BoundField DataField="cim" HeaderText="cim" SortExpression="cim" Visible="False" />
            <asp:TemplateField HeaderText="cím" SortExpression="cim">
                <ItemTemplate>
                    <a href='#n<%#Eval("id")%>'>
                        <%#Eval("cim")%>
                    </a>
                </ItemTemplate>
                <ItemStyle CssClass="tj_cim" />
            </asp:TemplateField>
            ...
        </Columns>
        <HeaderStyle BackColor="#7C8B9B" />
        <AlternatingRowStyle BackColor="#BECAD0" />
    </asp:GridView>

A GridView vezérlő formázható auto formázással, de egyénileg is megadható az egymás alatti sorok elkülönülő formázása (RowStyle és AlternatingRowStyle tulajdonságai, valamint a táblázat fejléc stílusa).

Egy másik megoldás lehet a HyperLinkField adatmező felhasználása, ahol külön megadható a navigáció alapjául szolgáló adatmező, és a hivatkozás szövegeként megjelenítendő adatmező, vagy szöveg. Erre látható példa a msconline.maconstate.edu tutorial oldalán.

oldal tetejére

ASP.NET - FormatString, DataFormatString

Kategória: ASP.NET - Hozzáadva: 2008. 02. 01.

Több vezérlőnél, vagy asp fügvényein belül is adott a lehetőség egy-egy adatmező formázására. Mintapéldákban is feltűnhet a {0} jel valamilyen formában. Ennek a jelnek a segítségével lehet az adott adatmező tartalmát (vagy esetleg paramétereket) megfelelő szövegkörnyezetbe illeszteni, vagy formázni.

<%# ... String.Format("{0:d}", Container.DataItem("changed")) ...

A String.Format függvény úgy formázza a changed adatmezőt, hogy csak a dátum jelenik meg, az időérték nem. (Különben megjelenne az óra, perc, mp is.) A példában megadott szerkezetben a {0} jelöli a paraméter beillesztésének a helyét.
Adatmező formázása

Adatmezők adatának formázása a képen látható DataFormatString tulajdonság kitöltésével is lehetséges. Itt a {0} használatával egyéb szöveg is az adat köré építhető. Például ha szép kerek mondatot akarunk:

A módosítás ideje {0} napja.

Egy-egy vezérlőhöz, vagy adatmezőhöz általában csak egy paraméter tartozik, erre a paraméterre egy 0-tól kezdődő sorszámozással lehet hivatkozni (így lett belőle {0} ). Ha több paraméter is elérhető, például url paraméterek esetén, akkor a további paraméterek a megfelelő számokkal azonosítva illeszthetőek be. ( {0} {1} {2}, stb. ) Használatukhoz található alkalmazási példa az msdnkk videói között.

oldal tetejére

Előkészületek PHP alapú fejlesztéshez

Kategória: PHP - Hozzáadva: 2008. 09. 29. | Módosítva: 2008. 10. 04.

Megkapta az egyik népszerű ingyenesen használható fejlesztőeszköz NetBeans IDE a PHP fejlesztéshez szükséges kiegészítést, így érdemes néhány szót a népszerűsítése érdekében szólni. A fejlesztőeszköz mellesleg alkalmas az elsődlegesen Java (kliens és szerveroldali) nyelvű fejlesztés mellett C++ alapú fejlesztésre is, és remek eszközeivel támogatja a Html és CSS fejlesztést is. (szintaxis kiemelés, hibák jelzésével, DOM fa Html struktúrához, gyorstipp-szerű súgó gépeléskor /tapasztalatom szerint néha csak a teljes begépelés után/). A PHP fejlesztéshez teljesen jól használható, a saját osztályaink változóit, és methodusait (vagy függvényeit) a "->" leütése után már felkínálja, így a beszédesebb függvényneveket is bátran használhatjuk, ezt csak egy listából kell kiválasztani. Itt már értelmet kapnak a private és public, stb. hatókör módosítók is, mert a felhasználás helyén a listán így a nekünk szükséges változók kerülnek felajánlásra.
NetBeans PHP
PHP támogatás

NetBeans CSS
CSS támogatás

NetBeans Javascript
Javascript támogatás (változóból azonosított HTML DOM elem, és a használható tulajdonságai/eljárásai )

A használatbavételéhez szükség lesz néhány kiegészítő program telepítésére (hogy kényelmesen tudjuk tesztelni is, ne csak a web-tárhelyre történő feltöltés után). A fejlesztőeszköz használható Windows, Linux, Mac OS X és Solaris rendszereken is (lényegében a többi szükséges program is). Én a NetBeans 6.5 béta változatát vettem igénybe, ez már tartalmazza a PHP kiegészítést, így azt nem kell külön telepíteni (a jelenlegi stabil változat a 6.1-es verz.). A szükséges programok:

JDK (jelenlegi verz: Java SE 6 Update 10 RC) - ezt a NetBeans (All készlet is) kérni fogja
NetBeans IDE 6.5 Beta
Apache webszerver (célszerű a legújabb változatot - ennek a Download (Apache Download) linkjén behozott lapon keressük meg a nekünk megfelelő készletet /Linux-on a csomagkezelőt érdemes használni/ - pl.: Win32 Binary including OpenSSL 0.9.8h (MSI Installer): apache_2.2.9-win32-x86-openssl-0.9.8h-r2.msi ...)
PHP 5 (itt is a megfelelő telepítő-készlet, pl.: Windows Binaries -> PHP 5.2.6 installer ...)

Az Apache és PHP telepítése a teszteléshez kell (pl. ha NetBeans-ből a Run Project funkciót választjuk...), el is hagyható ha esetleg van más webszerver telepítve (pl. IIS). PHP számtalan egyéb webszerverhez is beállítható (ezek önmagukban nem tudnak értelmezni PHP scripteket, így valószinüleg kell telepíteni).
A telepítés sorrendje: JDK, NetBeans, Apache, PHP.
Apache és PHP telepítése egyszerű (localhost (domain) és localhost (server name)), az esetleges különös beállításokat később a httpd.conf-nál jelzem.
Leírás: Weblabor - Apache és PHP telepítése kezdőknek Windows rendszereken
Szükség lehet az Apache és a PHP beállítására, ezeket érdemes elvégezni. (Ha nem akarjuk az alapértelmezett helyre tesztelés előtt másolgatni a fájljainkat /vagy ha nem akarjuk a NetBeans-t ilyenre konfigurálni.../.)

Apache beállítása:

Ha van más webszerver is telepítve, akkor lehet, hogy nem jó a 80-as port a részére (pl. IIS már lefoglalja, és ő figyeli itt a kéréseket). Ezt korrigálhatjuk ha megkeressük ezt a részt a httpd.conf nevű fájlban:

# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 12.34.56.78:80
Listen 80

A Listen utáni szám a port száma, ahol az Apache fog válaszolni. (Ha a gyári nem jó, akkor állítsunk be pl. 8088-at, vagy hasonlót. Ezek után a böngészőben a helyi webszerverünk gyökere a http://localhost:8088 -ról érhető majd el.)
Én átállítottam a dokument root bejegyzést a projectem szerinti gyökérkönyvtárra, így a NetBeans Run... parancsa után másolgatás nélkül töltődik be a teszt weblap. Megkeressük ezt a részt a httpd.conf nevű fájlban:

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
# DocumentRoot "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs"
DocumentRoot "R:"

Így most nálam a c:\Program Files...\htdocs nevű mappa helyett az R meghajtó gyökere a documentroot (ha itt lenne egy index.htm nevü fájl, akkor annak a tartalma jelenne meg a böngészőben a http://localhost/ beírása után (vagy a fenti példánál a http://localhost:8088 után) ). Több különböző project-et pedig az R:\project1, R:\project2, stb. ... mappákból a http://localhost/project1 , http://localhost/project2 , stb. címeken érhetjük így el.
A fájlban ennek a mappának az engedélyeinél is át kell írni a bejegyzést (pár sorral lejjebb):

#
# This should be changed to whatever you set DocumentRoot to.
#
#<Directory "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs">
<Directory "R:">
.
.
.
    Order allow,deny
    Allow from all

</Directory>

(Kikommenteztem az eredeti bejegyzést, és az új Directory ... R: bejegyzést írtam ide.)
Apache ezzel kész, a PHP telepítő beírja ide a szükséges bejegyzéseit (extra modulok, elérési utak, stb.). Ha a Listen portját átírtuk, akkor a NetBeans alatt a projectünk tulajdonságainál is állítsuk be a portot - File menü, Project Properties - (pl.: Project Url -> http://localhost:8088/project1 ).
PHP alapértelmezés szerint csak a <?php ... ?> formát értelmezi, a rövid <? ... ?> formát nem. Ha használni akarjuk így is, akkor a php.ini fájlt is állítsuk be. Minden PHP módosítás után (kiegészítő modul hozzáadása, php.ini változtatása, stb.) Apache restart szükséges. (Állapot monitor, vagy linux-on console...)

Ezek után már csak lapozgatni kell a PHP kézikönyvet (jórészt magyarul).

oldal tetejére

Tippek böngészőfüggetlen megjelenítéshez II.

Kategória: Html, CSS - Hozzáadva: 2008. 11. 30.

Amikor nem elég a megfelelően megválasztott html és CSS kód, akkor ki kell alakítani az egyedi böngészőhöz címzett formázást (pl. stíluslapok feltételes betöltésével).

Ilyen néhány formázás és pozicionálás IE7-nél régebbi IE-vel:

Az ilyen jellegű hibák felderítésére használható az IETester nevű program, amelyet ingyenesen lehet letölteni, és használni. Képes Ie5.5 IE6, IE7 és IE8 alatti megjelenítés tesztelésére Vista és XP alatt.
http://www.my-debugbar.com/wiki/IETester/HomePage

Ha felmerül az igény több böngészőverziónak címzett stíluslap betöltésére, akkor az a html oldal head részében elhelyezett feltételes betöltéssel szabályozhatjuk (ha minden IE verzióhoz akarjuk a stíluslapot):

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/base_ie.css" /> 
    <![endif]-->

Ha IE7-nél kisebb verziókhoz akarjuk a stíluslapot:

<!--[if lt IE7]>
        <link rel="stylesheet" type="text/css" href="css/ie7_lt.css" /> 
    <![endif]-->

Persze több opció is beállítható: http://www.positioniseverything.net/articles/multiIE.html

A feltételes tartalombetöltés is megvalósítható, így nem csak stíluslapokat vezérelhetünk, hanem esetleg eltérő html szerkezetet határozhatunk meg a különböző verzióknak: http://www.java2s.com/Code/HTMLCSS/IE-Firefox/ifltIE7.htm

oldal tetejére

ASP.NET adatbázis-kezelés II.

Kategória: ASP.NET - Hozzáadva: 2008. 01. 20.

Az SqlDataSource adatforrás adatainak a megjelenítését mutatom be a Repeater vezérlő segítségével. A kedvenc megjelenítőm, mivel semmilyen plussz html tag-et nem generál az adatok köré, így a saját elképzelésem szerinti környezetbe helyezhetem az adatokat. (Persze a többi vezérlő is alakítható, pl. táblázat helyett lehet más html tag a határoló, formázhatóak, stb.)

Repeater beállításai:

A vezérlőt el kell helyezni a megfelelő helyen (később esetleg felépíthetőek a szükséges html elemek köré), és a korábban elhelyezett DataSource vezérlőt kiválasztjuk adatforrásként.
Configure Repeater

Az SqlDataSource vezérlőn beállított lekérdezés eredménye fog megjelenni azokkal az adatmezőkkel, amelyekre a Repeater "ItemTemplate" blokkjában hivatkoztunk. És több Repeater vezérlő is elhelyezhető ugyanahhoz az adatforráshoz kapcsolva, más adatmezők visszaadásához beállítva.

Pl. az oldalaimon a tartalomjegyzékhez használt repeater csak a "cim" adatmezőt jeleníti meg:

<h3>
            Tartalomjegyzék</h3>
        <ul>
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    <li><a href='#n<%#Container.DataItem("id")%>'>
                        <%#Container.DataItem("cim")%>
                    </a></li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>

A lényeg az "ItemTemplate" elemek közötti adatmező hivatkozás:

<%#Container.DataItem("cim")%>

Ezek is beágyazott asp kódok (kacsacsőr+százalék), tehát akár html elemek tulajdonságainak a szövegébe ágyazva is elhelyezhetőek, mint a href... esetén.

A tutoriálok megjelenítéséhez pedig a második Repeater a többi adatmezőt is megjeleníti (a megfelelő html tag-ek közé helyezve az adatmezőket):

<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1">
        <ItemTemplate>
            <a id='n<%#Container.DataItem("id")%>'></a>
            <h3>
                <%#Container.DataItem("cim")%>
            </h3>
            <%#Container.DataItem("leiras")%>
            <p class="info">
                Hozzáadva:
                <%#String.Format("{0:d}", Container.DataItem("added"))%>
            </p>
            <a href="#fent">oldal tetejére</a> <br />
            <hr />
        </ItemTemplate>
    </asp:Repeater>

Az a tag id tulajdonsága segítségével lehet a tartalomjegyzékről a leíráshoz navigálni, ezért az adatbázistábla id tulajdonsága lett erre a célra felhasználva. A tartalomjegyzék linkjeinek href tulajdonsága is dinamikus lett. Ezt nem kell külön megadni az adatbázis feltöltésekor, mivel ez egy "számláló mező", ami automatikusan növekszik. Viszont valid html követelmény, hogy nem kezdődhet számmal az a tag id-ja, tehát kapott egy fix előtét karaktert (n).

Az adatbázis tábla: html tábla

Az id mező beállítása számláló mezőre: html tábla id mezője

oldal tetejére

Előkészületek Flash alapú fejlesztéshez

Kategória: Flash, Flex, ActionScript - Hozzáadva: 2008. 10. 05.

Szükséges ingyenes fejlesztőeszközök

FlashDevelop 3 - www.flashdevelop.org - letöltés
Adobe Flex SDK 3 - http://opensource.adobe.com - letöltés
JRE 1.6 vagy újabb (ha még nem volt telepítve JDK vagy korábbi JRE telepítésével) - http://www.java.com

Telepítés menete: FlashDevelop 3 telepítése, Flex SDK 3 végleges helyre másolása, FlashDevelop 3 beállítása a Flex SDK használatához, JAVA_HOME környezeti változó ellenőrzése/beállítása a Flex SDK használatához

FlashDevelop 3 telepítése

Különös beavatkozás nem szükséges a fejlesztőeszköz saját installer-el rendelkezik.

Flex SDK 3 végleges helyre másolása

A Flex SDK 3 tömörített (zip) állományként érhető el, a letöltés után ki kell csomagolni, és tetszőleges helyre kell másolni. (Nálam a C:\Program Files\Flex SDK 3\flex_sdk_3.0.3.2490 könyvtár lett a helye.) Ezt az elérési utat kell majd megadni a FlashDevelop 3 beállításainál.

FlashDevelop 3 beállítása a FlexSDK használatához

Leírás a beállításhoz: http://www.flashdevelop.org/wikidocs/index.php?title=AS3
A FlashDevelop indítása után Tools menü - Program settings - plugin-ek közül az AS3Context - Flex SDK Location bejegyzéshez a létrehozott könyvtár nevét beírjuk.

JAVA_HOME környezeti változó ellenőrzése/beállítása a Flex SDK használatához

(Ez a beállítás elvileg nem szükséges, ha a win. registry tartalmazza az elérési utat...)
Alapbeállítás szerint a JAVA_HOME környezeti változóban keresi a letöltött FlexSDK-nk a Java 1.6-os futtatókörnyezetet (JRE-t). Ha nincs ilyen környezeti változónk (MS-DOS parancssor "set JAVA_HOME" kiírja, ha be van állítva), akkor vagy létrehozzuk (vezérlőpult, Rendszer, ...) , vagy beírjuk a FlexSDK bin könyvtárában lévő jvm.config fájl "java.home=" bejegyzéséhez. (Ha több JRE környezet van telepítve, akkor a legalább 1.6-os verziójú elérési útját írjuk ide, ill. adjuk meg a környezeti változóban /az a könyvtár, ami tartalmazza a JRE mappát (JDK esetén), vagy magának a JRE-nek a mappája - pl. : "C:\Program Files\Java\jdk1.6.0_07\jre" vagy "C:\Program Files\Java\jre1.6.0_07"/).

Hivatkozások és olvasnivalók

http://www.actionscript.org
ActionScript tutoriálok (Flash és Flex különböző nehézségi szintre, szinte minden témában): http://www.actionscript.org/resources/categories/Tutorials/
www.flashdevelop.org - fórum, leírások, letöltések
www.adobe.com - ActionScript leírások

oldal tetejére

Html szövegméret

Kategória: Html - Hozzáadva: 2008. 01. 20.

A szöveg betűméretének formázása történhet pixel-es (px) és pontokkal (pt) történő megadással. A pixel-es megadásnál a szabott mérettel jelenik meg a szöveg (nagyobb felbontásokon is az adott pixelszámú méret, tehát kisebbnek fog látszani), a pontokkal történő megadásnál viszont a betűk mérete követi a felbontást (ugyanazzal a mérettel fog megjelenni - ugyanúgy fogja lényegében kitölteni a képernyőt). Pixel-es megadást érdemes használni ha egy adott méretű (nem nyújtható) képen kell elférnie a szövegnek (pl. a menüm szabott magasságai).

Stíluslapon a formázás pontokkal:

body {font-size: 11pt;}

Pixelekkel:

td.menu {font-size: 12px;}

oldal tetejére

Html, CSS, XML, ASP.NET ismertetõk

Tartalomjegyzék

Tippek böngészőfüggetlen megjelenítéshez

Html és CSS kód érvényességének ellenőrzése

Valós forgalmi adatok

Az oldalak módosítási dátumainak kijelzése

Képcsere

Táblázat

A változó méretű linkek

Oldalmenü

Háttérkép sorozatból

Keretek (frame-s lapok)

XML lap CSS/XSL stíluslappal formázva

Elsötétedő háttér kép megjelenítéskor

ASP.NET alapok (teljesen kezdő)

ASP.NET kezdő I.

XML linkek (főoldal keresztlinkjei)

A forrás lap forrása

ASP.NET feldolgozóval az XML linkek

ASP.NET kezdő II.

Olvasni és nézni való magyarul (én túl vagyok az összes videón, nagyon jók):

ASP.NET lapok szerkezete

Beágyazott ASP kódok

A beágyazott ASP kódok tanulmányozásához tutoriálok:

ASP.NET authentikáció

Beállítás:

ASP.NET adatbázis-kezelés

Adatok elérése SQL adatbázisból SqlDataSource segítségével:

Adatok elérése SQL adatbázisból DataSet séma fájl segítségével:

Adatok elérése SQL adatbázisból LINQ segítségével:

ASP.NET feltételes adatmegjelenítés

ASP.NET - GridView haladó

ASP.NET - FormatString, DataFormatString

Előkészületek PHP alapú fejlesztéshez

Apache beállítása:

Tippek böngészőfüggetlen megjelenítéshez II.

ASP.NET adatbázis-kezelés II.

Repeater beállításai:

Előkészületek Flash alapú fejlesztéshez

Szükséges ingyenes fejlesztőeszközök

FlashDevelop 3 telepítése

Flex SDK 3 végleges helyre másolása

FlashDevelop 3 beállítása a FlexSDK használatához

JAVA_HOME környezeti változó ellenőrzése/beállítása a Flex SDK használatához

Hivatkozások és olvasnivalók

Html szövegméret