Web Dev Bros » ASP (VBScript)

Launched with ajaxed: Tourmandu – Platform for local tour guides

Michal — Fri, 31 Oct 2008 08:05:06 +0000

I proudly announce the launch of a new project developed with ajaxed – yes with classic asp :). It’s a platform for everyone who wants to show tourists/visitors around in his/her hometown and earn some pocket money. Let’s face this:

You are a student and love to get in touch with people from around the globe. On Tourmandu you can offer a tour in your hometown and tourists can get in touch with you. You show them ’round and they pay/tip you afterwards. Not a bad idea :) Great part time income …

As the project has been recently launched its a bit empty, but have a look at some existing tour to get an idea of what i am talking about..

ajaxed gets a face

Michal — Fri, 25 Jul 2008 03:01:55 +0000

I proudly present the new logo of our ajaxed library. Just achieve a bit of identity ;) What do you think? Do you like it or is it just another web 2.0 logo :) Btw: I have just purchased ajaxed.org which will be the new home for ajaxed. A lot of tutorials, better documentation and version 2 is coming soon. Thanks again for all your support guys!

File Selector

Michal — Tue, 14 Jun 2005 12:01:28 +0000

Um dieses Teil handelt es sich: File Selector DEMO

Letztens hab ich für ein Projekt ein Control benötigt welches Dateien aus einem bestimmten Ordner ausliest und diese zum Auswählen bereit stellt. Man soll ein oder mehrere Files auswählen können, ausserdem sollen Files auch vorselektiert werden. Durch dieses Problem ist ein nettes Control entstanden welches ich mal "FileSelector" benamst hab.
Mit Hilfe dessen kann man nun einiges im Filesystem anstellen. mögliche Szenarien: selektierte dateien löschen, verschieben, umbennen, etc. oder (wie in meinem fall) in die Datenbank schreiben. Hier mal ein Screenshot wie das Control live aussieht:

Einige Features:

Für jeden Dateityp kann ein eigenes Icon anzeigt werden. Zur Zeit 26 unterstützte Dateitypen. Um einen neuen Dateityp zu unterstützen muss lediglich ein GIF-image in den images-ordner kopiert werden.
Selektieren von mehreren (checkboxes) Dateien erlauben oder nur ein einzelnes (radiobutton).
Radiobuttons durch doppelklick wieder deaktivierbar
Styles komplett mit CSS.
Vorselektieren von Dateien. (Ordner werden automatisch geöffnet und Files selektiert)
unterstützt StringBuilder: DLL wird aber benötigt. ist standardmäßig aus. Durch den Stringbuilder wirds um 100% schneller.
Komplett mit Tooltips
Getestet im Internet Explorer und Firefox (funktioniert auch)
Dateien werden per Doppelklick geöffnet
Objektorientiert
und mehr

Anbei ein kurzes Code-Beispiel wie man den File Selector verwendet:

PLAIN TEXT

ASP:

<%
set fs = new fileSelector
with fs
.sourcePath = "/michal/files/"
if request.form.count> 0 then
.selected = .selected
end if
end with
%>
"index.asp" method="post" name="frm">
"padding:30;"><% fs.draw() %>
"Submit" name="submit">
<% set fs = nothing %>

Es wird ein FileSelector instanziert und dessen Höhe und der Ursprungspfad (sourcPath) eingestellt. (in diesem Fall "/michal/files"). Weiter unten sieht man die Ausgabe des Selectors mittels der draw()-methode. Klickt man nun auf den Submit-Button merkt sich das Control die Auswahl. Dies geschieht in bei Zuweisung des selected-getter- an das selected-setter -property. Ich denke mit diesem Control kann man einiges anstellen. So wäre es z.b. kein Problem mehr die selektierten Dateien einfach zu löschen. Viel Spaß beim experimentieren!

Fileselector download
(es liegt ein readme-file bei in dem noch einige Bemerkungen zu finden sind.)

Paging leicht gemacht

Michal — Wed, 25 May 2005 10:12:51 +0000

Wer kennt das nicht? Tausende von Daten müssen seitenweise navigierbar zur Verfügung gestellt werden. z.b. Suchergebnisse, etc. Da dies ein häufiges Problem ist und in fast jedem Projekt mal vorkommt hab ich ein schönes Objekt dafür geschrieben welches die Implementierung solch einer Funktionalität erleichtern soll. Und vorallem: den Code leserlicher und übersichtlicher! Hier gleich mal ein Screenshot was am Ende rauskommen soll:

Man sieht hier sehr schön die Anforderung an ein komfortables "Paging". Hervorheben der aktuellen Seite, Navigation zur vorherigen und nächsten Seite sowie zur ersten und letzten. Ausserdem noch die Limitierung der Seiten auf eine bestimmte Anzahl, da es nicht recht sinnvoll wäre 1000 Seiten aufeinmal anzuzeigen. (im Screenshot deuten dies die Punkte an). All dies lösen wir nun mit der pageable-klasse welche Teil der gabLibrary ist. Da ich heut richtig in Schreibstimmung bin versuch ich ein umfangreiches Tutorial zu schreiben und einiges näher zu erläutern.

Wenn ich mir ein Tutorial zu Gemüte führ will ich gleich mal das Resultat selber testen ;) somit gibts hier die DEMO-Paging-Bar zum Testen. Aber nun zum Eigentlichen:

Gleich vorweg: das Objekt kann für alle möglichen Datenstrukturen werden. Ich demonstriere es in diesem Beispiel mit einem Array um die wesentliche Funktionalität herzuheben. Funktioniert aber genauso gut mit einem Recordset-objekt oder dictionary, etc.

1. Vorbereitung: Als erstes müssen wir die Klasse (pageable.asp) inkludieren und eine Basis für die Verwendung des Objekts schaffen (da dieses uns ja "nur" die Funktionalität kapselt). Bei einer paging-bar müssen wir uns irgendwie merken auf welcher Seite wir uns gerade befinden. Ich löse das mal über einen querystring-parameter namens page. Dafür hab ich die Funktion getCurrentPage() , geschrieben, welche lediglich überprüft ob dieser Wert vorhanden ist und gibt diesen weiter. Ist dieser nicht vorhanden (aller erster Aufruf der Seite) wird 1 zurückgegeben.

PLAIN TEXT

ASP:

'liefert die aktuelle Seitennummer
function getCurrentPage()
getCurrentPage = 1
if request("page") <> "" then
getCurrentPage = request("page")
end if
end function

Ich hab mir gedacht die Navigation mittels "Buttons" zu realisieren und beim Klick per Javascript die Seite mit der gewünschten Seiternummer neu zu laden. Deshalb hier eine Funktion welche einen Button ausgibt. Recht allgemein gehalten, zeichnet einfach einen Button. Parameter wie disabled oder eine Css-klasse können übergeben werden. hab diese Funktion mal drawButton() genannt:

PLAIN TEXT

ASP:

'zeichnet einen button
sub drawButton(value, pageNr, cssClass, disabled)
with response
if disabled then dis = " disabled"
onClick = "document.location.href='paging.asp?page=" & pageNr
.write("
.write(value)
.write("")
end with
end sub

Man erkennt hier schön die Wiederverwendung von CSS-Klassen. Jeder Button verwendet aufjedenfall die btn-klasse und zusätzlich eine individuelle welche von außen kommt. Dadruch können wir später gemeinsame Eigenschaften eines jeden Buttons konfigurieren.

Zu letzt benötigen wir noch eine Funktion, welche uns die gesamte Paging-Bar zeichnet. Also den Vor- und Zurück-Button, die einzelnen Seiten, etc. Dafür verwenden wir die zuvor erstellte Funktion drawButton(), da ja alle Funktionen mittels Buttons realisiert werden. Anbei die Funktion drawPagingBar():

PLAIN TEXT

ASP:

'zeichnet unsere seiten-bar
sub drawPagingBar()
drawButton "<<", paging.firstPage, "prevnext", paging.isOnFirstPage()
drawButton "<", paging.currentPage - 1, "prevnext", not paging.hasPreviousPage()
if paging.hasPreviousBlock() then response.write("....")
for i = 0 to uBound(paging.pages)
drawButton paging.page(i), paging.page(i), "common", paging.page(i) = paging.currentPage
next
if paging.hasNextBlock() then response.write("....")
drawButton ">", paging.currentPage + 1, "prevnext", not paging.hasNextPage()
drawButton ">>", paging.lastPage, "prevnext", paging.isOnLastPage()
end sub

Mit Hilfe dieser Funktion wird die komplette Paging-Bar gezeichnet. Eigentlich keine Hexerei. Die verwendete Instanz paging vom Typ pageable bietet alle Funktionalitäten. So wird z.b. in der ersten Zeile der Button fürs "springen zur ersten Seiten" gezeichnet. Seitennummer muss logischerweise die erste sein, dafür steht das property paging.firstPage zur Verfügung. Befinden wir uns auf der ersten Seite wollen wir den Button natürlich deaktivieren, somit kommt der letzte Parameter der drawButton()-Funktion ins Spiel. Da übergeben wir einfach den Rückgabewert der Methode paging.isOnFirstPage(). Eh kloa weil ja dieser Button disabled wird wenn wir uns bereits auf der ersten Seite befinden (on first page...).
Genauso verhält es sich mit all den weiteren Buttons (nächste Seite, vorige Seite, etc.). Nicht viel schwieriger ist die Darstellung der einzelnen Seiten. Ein einfacher Loop. Unabhängig davon ob man die pageable-Klasse bereits kennt oder nicht, der Code ist aufjedenfall verständlich.

2. Die Daten: Da wir die Vorbereitungen erledigt haben benötigen wir nun einige Daten welche "gepaged" werden sollen. Hierfür erstell ich einfach ein Array mit Zufallszeichen als Inhalt. Achtung: dies führt dazu, dass bei jedem Seitewechsel neue Daten in jedem Feld vorhanden sind. Sollte aber für die Demo kein Problem darstellen da wir uns nicht um den Inhalt kümmern sondern um die Aufteilung der Daten in Seiten und deren Navigation. Das Array mit Zufallszeichen:

PLAIN TEXT

ASP:

'wir verwenden ein array befüllt mit daten
dim data(100)
for i = 0 to uBound(data)
randomize()
data(i) = chr(255 * (rnd()))
next

3. pageable konfigurieren: nun kommt der wichigste Part, nämlich die Pageable-Klasse. Dieser müssen wir unsere "Wünsche" bekanntgeben. Also an welcher Seitennummer steht meine Seite gerade (.currentPage) ? Wieviele Datensätze beinhaltet meine Datenspeicher (.recordCount)? Wieviele Datensätze will ich pro Seite anzeigen (.recordsPerPage)? und natürlich wieviele Seiten will ich in meiner Paging-Bar den gleichzeitig anzeigen (.numberOfPages)? Wenn all dies angegeben wurde führt man die perform() Methode aus und kann dannach alle Werte der Pageable verwenden. Hier nun die Instanz der pageable

PLAIN TEXT

ASP:

'pageable wird instanziert und mit den nötigen werten versorgt
set paging = new Pageable
with paging
.currentPage = getCurrentPage()
.recordCount = uBound(data) + 1
.recordsPerPage = 10
.numberOfPages = 7
.perform()
end with

Man sieht hier schön die Verwendung der anfangs definierten Funktion getCurrentPage(), welche uns die aktuelle Seite zurückliefert (speicherung mittels Querystring). Anzahl der Datensätze ist auch klar, +1 weil das Array auch ein 0er Feld hat.

4. Der Output: Zu guter letzt müssen wir es noch am Bildschirm ausgeben.

PLAIN TEXT

HTML:

align="center"><% drawPagingBar() %>

    <% for i = paging.dataStartPosition to paging.dataEndPosition %>

       align="center">Data<%= i - 1%>: <%= data(i - 1) %>

    <% next %>

Wir zeichen die pagingbar an die gewünschte Stelle mit drawPagingBar(). Dann müssen auch noch die richtigen Daten ausgegeben werden. Dafür stellt uns die pageable folgende Eigenschaften zur Verfügung: dataStartPosition und dataEndPosition. Mit Hilfe dieser kann man nun die angeforderten Datensätze aus dem Array darstellen. Innerhalb der Schleife wird 1 subtrahiert, da im 0er Feld auch Nutzdaten vorhanden sind.

Ich verwende dieses Objekt schon einige Zeit (vorallem für Recordsets) und es hat sich bewährt. Viel Spaß damit. Hier gehts zum download der Klasse und des Demobeispiels:

Paging.zip download

Hab ein paar Anfragen bekommen wie man das an ein Recordset hängt. Dafür gibts einen Thread im ASP-Forum: http://www.aspforum.de/topic.asp?TOPIC_ID=26136

.net Dropdownlist für klassisches ASP

Michal — Fri, 25 Mar 2005 18:15:28 +0000

Vielleicht recht brauchbar für alle die noch mit klassischem ASP programmieren: habe das Dropdownlist-control aus .net nachgebastelt. Namensgebung und Funktionalität sollte im wesentlichen übereinstimmen. Kleinigkeiten wollte ich besser (bzw. anders) machen als wie es bereits existiert. Zumindest intuitiver, meinen Vorstellungen nach :) Kurz eine Zusammenfassung was es so bietet:

OO-Control für klassisches ASP
Namesgebung und Funktionalität grösstenteils vom .net übernommen
als Datenquelle kann array, recordset oder dictionary verwendet werden
Ereignisbehandlung während dem rendering (onItemCreated)
direkte Ausgabe mittels draw() oder output als String mit toString()
Volle Multiple-dropdown funktionalität. (selectedItems können einer sein oder mehrere (array))
Stringbuilder-kompatibel. DLL muss dafür am Server vorhanden sein.
sollte leicht leserlicher und verständlicher Code sein ... hoffentlich :)

Anbei nun ein kurzes Beispiel wie man damit startet. Den Rest bitte aus den Klassen selber rauslesen. Die Schnittstelle sollte genügend dokumentiert sein:

Hier gibts das Control zum downloaden

1. Zuerst mal den Import der Klasse realisieren. Eh klar mit einem Include:

PLAIN TEXT

ASP:

2. Nun erstellen wir ein einfaches Dropdown und zwar mit einem Array als Datenquelle:

PLAIN TEXT

ASP:

set dd = new Dropdown
dd.datasource = array("one", "two", "three")
dd.draw()
set dd = nothing

Mittels draw() wirds direkt zum Browser geschickt (gezeichnet eben). Um es z.b. als String zu erhalten verwende einfach toString(). Bei Dropdowns mit riesigen Datenmengen empfiehlt es sich das Dropdown mit Hilfe vom Stringbulider zu verwenden. Hierzu dient die useStringBuilder-Eigenschaft.

3. Beispiel zur Behandlung des onItemcreated-Ereignisses

PLAIN TEXT

ASP:

set dd = new Dropdown
set aDict = server.createObject("scripting.dictionary")
aDict.add 1, "yes"
aDict.add 2, "no"
set dd.datasource = aDict
dd.onItemCreated = "onDDItemCreated"
dd.draw()
set dd = nothing
function onDDItemCreated(item)
if item.index = 1 then item.style = "color:red"
end function

In diesem Beispiel verwende ich ein Dictionary als Datenquelle. Funktioniert auch Prima! Um das onItemCreated-Ereignis behandeln zu können, muss der onItemCreated-Eigenschaft der Name der ereignisbehandelnden Funktion übergeben werden. In unserem Fall onDDItemCreated. Diese muss natürlich auch implementiert werden inkl. einem Parameter, welcher natürlich das gerade durchlaufende dropdownItem darstellt. In meinem Beispiel färbe ich das 2.Element rot ein. Nichts einfach als das ;)
Mit Hilfe dieser Ereignisbehandlung ist nun eine einfach Manipulation sämtlicher Einstellungen zur "Laufzeit" möglich. Z.b. könnte man auf die Datenquelle des Dropdowns zugreifen und somit auf den Inhalt dessen reagieren. Sehr interessant vorallem dann wenn ein Recordset als Quelle verwendet wird.

4. Viel Spaß damit!

Kurze Anmerkung noch: Sollte ein Recordset als Quelle verwendet, dann muss dieses einen statischen Cursor verwenden (rs.cursorType = adOpenStatic). Bin erfreut über jedes Kommentar. Verwende das Control in all meinen Projekten und alle Probleme waren damit lösbar ... somit nicht gleich aufgeben falls etwas nicht gleich beim ersten mal klappt.