This cat's on a hot tin roof!: October 2010

HTML 5 & asp.NET τώρα!

21.10.10 - By mitsbits - 0 comments

Πολλοί θα πουν πως είναι ακόμα νωρίς για HTML 5. Εγώ λέω πως ο καιρός να ασχοληθούμε με το HTML 5 είναι τώρα.
Όσοι αναπτύσουν εφαρμογές σε asp.NET ξέρουν πως δεν υπάρχει αυτή η δυνατότητα "out of the box" στο Visual Studio 2010.
Ένας τρόπος που βρήκα να αναπτύσω εφαρμογές σε HTML 5 με το Visual Studio 2010, είναι ο ακόλουθος.
Καταρχήν χρειάζονται δύο αρχεία που μπορείτε να κατεβάσετε ελεύθερα, τουλάχιστον σε αυτή την υλοποίηση.
Πρώτα το Modernizr που βασικά εξασφαλίζει ότι οι browsers θα αναγνωρίσουν τα νέα tags αλλά και άλλες δυνατότητες για CSS compatiobility.
Επειδή "by default" αυτά τα νέα tags ρεντάρονται σαν inline elements, η λύση στο πρόβλημα έρχεται από το html5doctor.com Reset Stylesheet.
Γενικώς χρησημοποιώ nested master pages, και δεν θα κάνω εξαίρεση τώρα. Έτσι εφόσον έφτιαξα ένα νέο web site στο Visual Studio 2010 και συμπεριέλαβα το css και το script που ανέφερα παραπάνω, προσέθεσα ένα master page με το όνομα html5base.master που είναι το παρακάτω mark up.

<%@ Master Language="VB" CodeFile="html5base.master.vb" Inherits="masters_html5base" %>
 
<!doctype html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <meta name="author" content="mitsbits" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <!--scripts-->
    <script src='<%= Page.ResolveUrl("~/scripts/jquery-1.4.3.js") %>' type="text/javascript"></script>
    <script src='<%= Page.ResolveUrl("~/scripts/modernizr-1.5.min.js") %>'
        type="text/javascript"></script>
    <!--css-->
    <link href='<%= Page.ResolveUrl("~/Styles/html5reset.css")%>' rel="stylesheet"
        type="text/css" />
</head>
<body>
    <form id="baseform" runat="server">
    <div id="container">
        <asp:ContentPlaceHolder ID="contentwrapper" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Τα πράγματα όπως βλέπετε είναι πολύ απλά, δύο place holders, ο ένας στο head και ο άλλος για το περιεχόμενο της σελίδας. Καταρχήν, αυτό αρκεί για να φτιάξει κάποιος μια asp.NET φόρμα με HTML 5 mark up.
Για να δώσω μια βασική δομή και ομοιομορφία στην εφαρμογή προσέθεσα άλλο ένα master page, το html5content.master που είναι το mark up που ακολουθεί.

<%@ Master Language="VB" MasterPageFile="~/masters/html5base.master" AutoEventWireup="false"
    CodeFile="html5content.master.vb" Inherits="masters_html5content" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <!--css-->
    <link href='<%= Page.ResolveUrl("~/styles/html5main.css")%>' rel="stylesheet"
        type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentwrapper" runat="Server">
    <header>
    <asp:ContentPlaceHolder ID="header" runat="server">
    
    </asp:ContentPlaceHolder>
    </header>
    <nav>
    <asp:ContentPlaceHolder ID="navigation" runat="server">
    </asp:ContentPlaceHolder>   
    </nav>
    <section id="maincontent" role="main">
    <asp:ContentPlaceHolder ID="maincontent" runat="server">
    </asp:ContentPlaceHolder>   
    </section>
    <footer>
    <asp:ContentPlaceHolder ID="footer" runat="server">
    </asp:ContentPlaceHolder>
    </footer>
</asp:Content>

To Visual Studio θα παραπονεθεί για τα tags δεν υποστηρίζονται στο HTML 4, αλλά δεν υπάρχει σφάλμα. Προσέξτε ότι προσθέτω και άλλο ένα stylesheet για την βασική μορφοποίηση των σελίδων. Από εδώ και πέρα όποια σελίδα χρησημοποιεί σας master page το html5content.master υποστηρίζει τα νέα HTML 5 tags. Για την ιστορία ορίστε το html5main.css

nav{float:left; width:20%;}
section #maincontent  {float:right; width:79%;}
footer {clear:both;}

asp.net checkbox που κάνει updates μέσα σε gridview ή κάποιο άλλο databound list container

20.10.10 - By mitsbits - 0 comments

Συχνά όταν έχουμε ένα databound list container χρειάζεται να κάνουμε ένα γρήγορο update χωρίς να μπει το control σε edit mode.
Αυτό το επιτυγχάνουμε εύκολα με buttons ή link buttons που έχουν τις ιδιότητες CommandName & CommandArgument και γράφουμε κώδικα στο event ItemCommand του control.
Σπάνια αυτό το funcionality είναι αρκετό, και το συνηθέστερο control που χρησημιοποιύμε σε τέτοιες περιπτώσεις είναι το checkbox.
Το checkbox όμως δεν έχει ιδιότητες CommandName & CommandArgument. Άρα δεν υπάρχει το event ItemCommand και είναι πολύ δύσκολο να βρούμε σε ποια γραμμή είναι το checkbox που ξεκινάει το update.

Λύση
Όταν το checkbox ρεντάρεται σαν html δημιουργεί ένα <input type=checkbox /> και ένα <label/>. Μπορούμε να εκμεταλευτούμε αυτό το χαρακτηριστικό για να πετύχουμε το functionality που επιθυμούμε.
Πρώτα θα φτιάξουμε μια css κλάση που θα την ονομάσουμε για το παράδειγμα chkHidden .chkHidden label{ display:none;}Αυτό σημαίνει πως αν ένα html element με αυτήν την κλάση εμπεριέχει ένα tag label, το label δεν θα εμφανιστεί.
Προσθέτουμε το checkbox στο gridview (ή σε κάποιο άλλο list container).
Του δίνουμε CssClass="chkHidden" Το πεδίο που είναι το κλειδί στην γραμμή το κάνουμε databind στο text property του checkbox.
Το πεδίο που θέλουμε να αλλάξουμε το κάνουνουμε databind στο checked property του checkbox.
Δίνουμε AutoPostBack=True στο checkbox.

Τώρα το marckup του control πρέπει να μοιάζει κάπως έτσι:

<asp:CheckBox ID="ActiveCheckBox" runat="server" AutoPostBack="True" Checked='<%#Eval("Active") %>' CssClass="chkHidden" Text='<%# Eval("Id") %>' />

Στον event handler του CheckedChanged είναι που θα κάνουμε όλη την δουλειά.
Για το παράδειγμα θα θεωρήσουμε ότι το checkbox είναι σε ένα template filed ενός gridview που λέγεται lstUsers και η μέθοδος που κάνει το update λέγεται UpdateActive και δέχεται δύο παραμέτρους, το Id της γραμμής που είναι integer και το active status που είναι boolean.

    Protected Sub ActiveCheckBox_CheckedChanged(ByVal sender As Object, _
                                                ByVal e As System.EventArgs)
        'βρίσκουμε το Id από το text του checkbox που δεν είναι ορατό στο UI
        Dim i As Integer = CInt(DirectCast(sender, CheckBox).Text)
 
        'η boolean τιμή είναι το Checked του checkbox
        UpdateActive(i, DirectCast(sender, CheckBox).Checked)
 
        'καλούμε το databind του list control για να εμφανιστούν τα ενημερωμένα δεδομένα
        lstUsers.DataBind()
    End Sub

Databinding AJAX Toolkit accordions

- By mitsbits - 0 comments

tags: AJAX , asp.net , jQuery

Υπόθεση:

Έχουμε έναν πίνακα που σχηματίζει δεντράκι με join στον εαυτό του στα πεδία Id & ParentId. Οι γραμμές με ParentId 0 είναι στην κορυφή του δέντρου. Σε κάποιες περιπτώσεις φτάνουμε σε βάθος τριών επιπέδων και σε άλλες σε δύο.

Όταν φτάνουμε στα "φύλλα", δηλαδή εγγραφές που δεν έχουν παιδιά θέλουμε να παρουσιάσουμε τις πληροφορίες, αλλιώς πρέπει να αναπτύξουμε την ιεραρχία των "παιδιών". Υπάρχει στον πίνακα ένα flag που λέγεται HasChildren που μας δίνει την πληροφορία της ύπαρξης των παιδιών (δυναμικό).

Χρησημοποιώντας SQL Datasources & MS Ajax accordions δεν υπήρξε ανάγκη για server side κώδικα. Για την ενφάνιση ή όχι του τελευταίου επιπέδου γίνεται χρήση του jQuery.

Υλοποίηση:

Ακολουθεί ο κώδικας και επεξηγήσεις.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="BindAccordionDemo.aspx.vb"

Inherits="demos_BindAccordionDemo" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Data Bind AJAX Control Toolkit Accordion Demo</title>

/* Οι κλάσεις για το format του accordion */.accHeader

{

cursor: pointer;

padding: 5px;

border: solid 1px #000;

background-color: #ccc;

font-weight: bold;

border-collapse: collapse;

}

.accHeaderSelected

{

cursor: pointer;

padding: 5px;

border: solid 1px #000;

font-weight: bold;

background-color: #000;

color: #fff;

border-collapse: collapse;

}

.accContent

{

margin-left: 15px;

border-collapse: collapse;

}

</style>

</script>

</head>

<body>

<div>

<!--Δίνουμε το jQuery στον script manager αντί για λινκ στο head της σελίδας

Κάλή πρακτική για κεντρική διαζείριση των scripts που χρησημοποιούμε

και έχουμε ένα επιπλέον event που μας λέει πως ο script manager φόρτωσε όλα τα scripts -->

<asp:ScriptManager ID="theScriptManager" runat="server">

<asp:ScriptReference Path="~/scripts/jQuery/jquery-1.3.2.min.js" />

<asp:ScriptReference Path="~/scripts/jQuery/pulse.jquery.js" />

</Scripts>

</asp:ScriptManager>

<!--Το εξωτερικό accordion, η datasource του είναι στο τέλος της σελίδας

και δεν βρίσκεται μέσα σε accordion pane-->

<!--απαραίτητα όταν γίνεται το accordion databound σε datasource δηλώνουμε άδεια

συλλογή panew και μετά "δένουμε" το περιεχόμενο σε header & content templates-->

<ajaxToolKit:Accordion ID="theAccordion" runat="server" DataSourceID="theSqlDataSource"

ContentCssClass="accContent" HeaderCssClass="accHeader" HeaderSelectedCssClass="accHeaderSelected"

RequireOpenedPane="false" FadeTransitions="true" SuppressHeaderPostbacks="true"

Width="350" SelectedIndex="-1">

<Panes>

</Panes>

<%#Eval("Omada")%></HeaderTemplate>

<!--φυλάμε τo Id σε κρυμένο πεδίο για να περάσουμε την παράμετρο

στο datasource-->

<asp:HiddenField ID="hflId" runat="server" Value='<%#EVAL("Id") %>' />

<!--to datasource βρίσκεται μέσα στο content template και θα τροφοδοτήσει

το εσωτερικό accordion-->

<asp:SqlDataSource ID="innerSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ProtocolConnectionString %>"

SelectCommand="SELECT Id, ParentId, OmadaType, Omada, Depth, HasChildren FROM prt_OmadesParalipton WHERE (OmadaType = N'OMD') AND (ParentId = @parentId) ORDER BY Omada">

<asp:ControlParameter ControlID="hflId" Name="parentId" PropertyName="Value" />

</SelectParameters>

</asp:SqlDataSource>

<!--το παρακάτω div είναι ο container του τελευταίου επιπέδου και παίρνει css κλάση

δυναμικά που βάση αυτής της κλάσης θα εμφανιστεί ή όχι-->

Τελευταίο επίπεδο

<br />

Id:<%#EVAL("Id") %><br />

Όνομα:

<%#EVAL("Omada") %>

</div>

<!--μέσα στο εξωτερικό content template ξεκινάμε τα "παιδιά" accordions

που τροφοδοτούνται από τα εσωτερικά datasources-->

<ajaxToolKit:Accordion ID="innerAccordion" runat="server" DataSourceID="innerSqlDataSource"

ContentCssClass="accContent" HeaderCssClass="accHeader" HeaderSelectedCssClass="accHeaderSelected"

RequireOpenedPane="false" FadeTransitions="true" SuppressHeaderPostbacks="true"

Width="100%" SelectedIndex="-1">

<Panes>

</Panes>

<%#Eval("Omada")%></HeaderTemplate>

<asp:HiddenField ID="hflId_2" runat="server" Value='<%#EVAL("Id") %>' />

<asp:SqlDataSource ID="moreInnerSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ProtocolConnectionString %>"

SelectCommand="SELECT Id, ParentId, OmadaType, Omada, Depth, HasChildren FROM prt_OmadesParalipton WHERE (OmadaType = N'OMD') AND (ParentId = @parentId) ORDER BY Omada">

<asp:ControlParameter ControlID="hflId_2" Name="parentId" PropertyName="Value" />

</SelectParameters>

</asp:SqlDataSource>

Τελευταίο επίπεδο

<br />

Id:<%#EVAL("Id") %><br />

Όνομα:

<%#EVAL("Omada") %>

</div>

<ajaxToolKit:Accordion ID="moreInnerAccordion" runat="server"DataSourceID="moreInnerSqlDataSource"

ContentCssClass="accContent" HeaderCssClass="accHeader"HeaderSelectedCssClass="accHeaderSelected"

RequireOpenedPane="false" FadeTransitions="true" SuppressHeaderPostbacks="true"

Width="100%" SelectedIndex="-1">

<Panes>

</Panes>

<%#Eval("Omada")%></HeaderTemplate>

Τελευταίο επίπεδο

<br />

Id:<%#EVAL("Id") %><br />

Όνομα:

<%#EVAL("Omada") %>

</div>

</ContentTemplate>

</ajaxToolKit:Accordion>

</ContentTemplate>

</ajaxToolKit:Accordion>

</ContentTemplate>

</ajaxToolKit:Accordion>

</div>

<asp:SqlDataSource ID="theSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ProtocolConnectionString %>"

SelectCommand="SELECT Id, ParentId, OmadaType, Omada, Depth, HasChildren FROM prt_OmadesParalipton WHERE (OmadaType = N'OMD') AND (ParentId = 0) ORDER BY Omada">

</asp:SqlDataSource>

$(document).ready(function() {

$('.True').hide();

$('.False').css('color', 'Red').css("padding", "5px");

$('.False').pulse({

textColors: ['red', 'black', '#ccc', 'purple', 'green', '#ccc', 'black']

});

</script>

</div>

</form>

</body>

</html>

Για να δέσουμε το accordion του δίνουμε το DataSourceId, ορίζουμε controls στα δύο templates που διαθέτει, τα γεμίζουμε me databind expressions(<%# ... %> ) όπως κάθε άλλο list control. Η διαφορά είναι ότι ορίζουμε ένα άδειο accordion panes collection με το <Panes> </Panes> .

Στην περίπτωση αυτή υπάρχουν τρία επίπεδα accordions με τα επίπεδα 2 & 3 να βρίσκονται μέσα σε <ContentTemplate> </ContentTemplate> . Ένα Hiden Field κρατάει το Id για την παράμετρο των εσωτερικών data sources.Επίσης σε κάθε content template υπάρχει και ένα div που θα κρατάει τα δεδομένα σε περίπτωση η εγγραφή είναι "φύλλο", δηλαδή χωρίς παιδιά. Το attribute της css κλάσης δένεται στο πεδίο HasChildren που θα μας γυρίσει "True" ή "False". Τέλος υπάρχει και ένα accordion με το αντίστοιχο datasource.

Αν λοιπόν η εγγραφή έχει παιδία τότε θα γεμίσει το εσωτερικό accordion, να όχι τότε απλά δεν θα εμφανιστεί. Από την άλλη το div με τις πληροφορίες του επιπέδου θα εμφανιστεί έτσι κι αλλιώς. Εφόσον αυτή δεν έιναι η σημεριφορά που περιμένουμε, θα μπορούσαμε να χρησημοποιήσουμε server code για να κρύψουμε τα divs ελέγχοντας το πεδίο HasChildren.

Στην συγκεκριμένη περίπτωση όμως τα divs έχουν class 'True' ή 'False' ανάλογα με την περίπτωση και μπορούμε να τα κρύψουμε όταν φορτώνει η σελίδα γράφοντας στο πιο γνωστό event handler του jQuery, το $(document).ready. Επιλέγουμε με jQuery selectors τα elements με κλάση 'True' και τα κρύβουμε.

$(document).ready(function() {

$('.True').hide();

});

</script>

Ένα άλλο σημείο που αξίζει να σημειωθεί είναι οι τρεις css κλάσεις που ορίζουν την εμφάνιση των accordions, ανάλογα με το state που βρίσκεται.

Χρήστης που τρέχουν τα ASP.NET services

- By mitsbits - 0 comments

tags: asp.net

Γι να δούμε γρήγορα ποιος χρήστης τρέχει τα ASP.NET services στο site γράφουμε στο mark up <%= Environment.UserName %> και τρέχουμε τη σελίδα.

Οδηγός διασκέδασης για την Ξάνθη

- By mitsbits - 0 comments

tags: portfolio , web

Το allaboutxanthi.gr είναι οδηγός πόλης για την Ξάνθη. Θα βρείτε ευρετήρια για εστιατόρια, clubs, κομωτήρια, κ.λ.π...

Επίσης στον ιστότοπο φιλοξενείται το αρχείο του περιοδικού "Paparazzi".

Στον ιστότοπο αναρτούνται νέα για τα δρώμενα της πόλης.

Η εφαρμογή υλοποιήθηκε σε asp.net 3.5, φιλοξενείται σε IIS 6 και ως βάση δεδομένων χρησημοποιεί MS SQL 2005 EXPRESS.

Αλλαγή μεγέθους εικόνας σε συγκεκριμένο τετράγωνο

- By mitsbits - 0 comments

tags: asp.net , GDI+

Συχνά φτιάχνοντας κάποια asp.net εφαρμογή χρειάζεται να παρουσιάσουμε εικόνες, ιδιαίτερα σε λίστες όπως datalist, listview, repeater, κ.λ.π...

Το πρόβλημα με αυτό το σενάριο είναι ότι κάποιες εικόνες είναι "οριζόντιες", άλλες "κάθετες" και γενικώς συμβαίνει να έχουμε διάφορες διαστάσεις και aspect ratios.

Σας δείχνω μια μέθδο, που κάνει βασική χρήση GDI+, για να παρουσιάζετε την εικόνα στα πλαίσια ενός τετραγώνου, που το μέγεθος της πλευράς του δίνεται στη μία παράμετρο της μεθόδου. Η άλλη παράμετρος είναι η εικόνα.

Έτσι αν η εικόνα είναι "κάθετη" ή "οριζόντια", πάντα η μεγαλύτερη πλευρά της θα είναι ίση με την πλευρά του τετραγώνου, δίνοντας στην παρουσίαση της σελίδας ομοιομορφία.

Χωρίς παραπάνω λόγια...

    Public Shared Function ResizeInRectangle( _
                  ByVal originalImage As Image, _
                  ByVal newWidth As Integer) As Image
 
        Dim WidthVsHeightRatio = _
            CDec(originalImage.Width / originalImage.Height)
        Dim newBitmap As Bitmap = _
            New Bitmap(newWidth, newWidth)
 
        Using newg As Graphics = _
            Graphics.FromImage(newBitmap)
 
            newg.InterpolationMode = _
                Drawing2D.InterpolationMode.HighQualityBicubic
 
            newg.Clear(Color.Transparent)
 
            If WidthVsHeightRatio = 1D Then
 
                newg.DrawImage(originalImage, 0, 0, newWidth, newWidth)
 
                newg.Save()
 
            ElseIf WidthVsHeightRatio < 1D Then 'Image is taller than wider
 
                newg.DrawImage(originalImage, _
                               New RectangleF( _
                                   New PointF(CSng(((newWidth / 2) - _
                                             (newWidth * WidthVsHeightRatio) / 2)), 0), _
                                   New SizeF(newWidth * WidthVsHeightRatio, newWidth)))
                newg.Save()
 
            Else 'Image is wider than taller
 
                Dim inverse As Double = _
                    Math.Pow(WidthVsHeightRatio, -1)
                newg.DrawImage(originalImage, _
                               New RectangleF( _
                               New PointF(0, CSng((newWidth / 2) - _
                                          ((newWidth * inverse) / 2))), _
                               New SizeF(newWidth, CSng(newWidth * inverse))))
                newg.Save()
 
            End If
 
        End Using
        Return newBitmap
    End Function

This cat's on a hot tin roof!

HTML 5 & asp.NET τώρα!

asp.net checkbox που κάνει updates μέσα σε gridview ή κάποιο άλλο databound list container

Databinding AJAX Toolkit accordions

Χρήστης που τρέχουν τα ASP.NET services

Οδηγός διασκέδασης για την Ξάνθη

Αλλαγή μεγέθους εικόνας σε συγκεκριμένο τετράγωνο

tags...

pleased to meet you

Microsoft Community Platform Feed: article, scriptjunkieLearn

Blog Archive

the ring