La demo? Eccola! Provare è sempre più rapido che leggere.. ;) Attenzione che la cosa funziona bene la prima volta, poi la pagina viene messa nella cache e l’immagine di caricamento sparirà in fretta. Per chi vuole scaricare l’esempio completo e guardarlo in santa pace, basta fare il download.

DEMO DOWNLOAD

Per fare ciò, la prima cosa necessaria è l’immagine di caricamento, una gif animata è l’ideale. Si possono generare con le proprie preferenze  tramite tools on line come ad esempio Preloaders o Animizer, col primo si ha a disposizione una nutrita serie di immagini eleganti e predefinite, col secondo si possono creare gif animate a partire da proprie immagini.

Ora veniamo all’HTML, al CSS e al caro jquery. Il riferimento principale è la documentazione del $(document).ready().

Per fare le cose fatte bene, ho utilizzato l’HTML5 Boilerplate, un blasonato framework di frontend che agevola la scrittura del codice ma soprattutto ci da una solida guida per scriverlo bene. Nel template responsivo generato su Initializr ho inserito flexslider, il famoso slider di woothemes. Ho scelto di impostare l’ambiente di demo in questo modo per avere a disposizione uno slider con alcune immagini ad alta risoluzione che impieghino un po’ di tempo per caricarsi, ma ovviamente la parte di javascript e html che riguarda il caricamento può essere utilizzata su qualsiasi sito web.

Vediamo nel dettaglio la tecnica utilizzata, partendo dall’HTML. Basta inserire questo div subito dopo il tag <body>:

<div class="loader">LOADING...</div>

Visualizziamo la scritta loading, a tutto il resto penserà il foglio di stile.

Questo il CSS:

.loader {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #fafafa url(../img/page-loader.gif) no-repeat center center;
text-align: center;
color: #999;
}

Mettiamo a tutta pagina il div, per coprire tutto il contenuto, con una immagine di caricamento come sfondo. Questo blocco verrà rimosso tramite javascript una volta che il caricamento è avvenuto.

Ecco appunto la parte javascript (utilizzando jquery):

$( document ).ready(function() {
//una volta caricato il DOM esegui questo codice
//console.log( "DOM ready!" );
$(window).load(function() {
//una volta caricata l'intera pagina (immagini e i frames..) esegui questo codice
//console.log( "Page ready!" );
//faccio scomparire l'immagine di caricamento
$(".loader").fadeOut("slow");
});
});

Il costrutto $( document ).ready(function() { .. } ci serve per far eseguire “qualcosa” una volta caricato tutto l’albero (DOM), in questo caso scriviamo semplicemente due righe sulla console del browser; mentre il costrutto  $(window).load(function() { .. } ci serve per fare eseguire “qualcosa” una volta caricata l’intera pagina, comprese appunto le immagini o roba contenuta negli iframe. E’ qui, che oltre a scrivere un log sulla console, andiamo a rimuovere il div di caricamento che copriva tutto il contenuto della pagina.

E’ tutto ciò che serve!

NB: ovviamente, se si vuole iniziare a far vedere la pagina e i suoi contenuti durante il caricamento, la stessa tecnica può essere applicata a un div che non copra tutta la pagina, ma ad esempio solo il box dello slider dove si caricheranno le immagini..

Il prerequisito di base è che la function abbia alcune proprietà basilari: “Modulo accessibile in remoto”, vedi figura dalla transazione SE37.

Per pubblicarla come servizio web, basta andare da menu, sempre nella SE37: Utilities -> Altre Utilities -> Generare servizio web -> Dal function module (vedi figura)

Bisognerà poi seguire il wizard come da figure sotto, dando un nome al web service.

Per pubblicare senza richiesta di autenticazione, selezionare come da figura sottostante:

Scegliere il pacchetto e la richiesta di trasporto.

Cliccare su “completare”, si aprirà la maschera di creazione del servizio e resterà solamente da attivare il servizio (con l’icona di attivazione).

Ora bisognerà terminare il lavoro dalla transazione SOAMANAGER (introdotta con l’ECC 6).
Si aprirà una finestra del browser, da qui bisogna andare su “Web service configuration”

Da qui è possibile ricercare il web service appena creato, selezionarlo, premere “apply selection” e andare sulla tab “configuration”

Qui bisogna creare un nuovo servizio.

Bisogna inserire un nome per il servizio e per il binding, poi premere “Apply Settings”

Sotto si aprire una maschera con le impostazioni del servizio, bisognerà configurarle. Se ad esempio si vuole impostare un utenza fissa, in modo tale che le applicazioni esterne chiamino il servizio senza autenticarsi ogni volta, si può configurare come in figura sotto. Alla fine premere “Save”.

A questo punto è tutto pronto.

Bisognerà premere su “Open WSDL document for selected binding or service” per ottenere l’url della definizione del web service, da utilizzare ad esempio su SOAP UI per poter consumare il web service e testarlo.

E se un giorno volessimo ripubblicare il servizio dopo aver cambiato la function?

Magari viene aggiunto un parametro di input/output, il web service non recepirà queste modifiche finchè non lo torniamo a pubblicare. Per fare ciò, da SAP, dobbiamo accedere alla transazione SE80. Selezionare il pacchetto in cui è stata salvata la function e poi selezionare il proprio servizio web sotto “Enterprise Service -> Service Provider”. Andare in modifica e da menù come da immagine sottostante.

Salvare e attivare.

Ora il web service avrà ereditato le modifiche.

Come ti sembra questo grafico? Prova a cliccare sugli elementi della legenda e vedrai che è interattivo, potresti utilizzarlo per simulare il rispetto degli obiettivi in assenza di fatturato ottenuto su alcune zone.. Prova a selezionare col mouse una zona del grafico e vedrai puoi fare lo zoom sui dati che ti interessano.. Queste e tante altre funzionalità si possono ottenere grazie ad Highcharts, un validissimo javascript open source che lavora con jQuery per renderizzare grafici più o meno complessi e molto accattivanti.

Il tutto senza flash, cosa a cui difficilmente si poteva rinunciare in era pre-jQuery se si volevano ottenere i medesimi risultati. Le tipologie di grafici sono molteplici: si va dalla immancabile torta alla più ricercata rappresentazione demografica, dal grafico a barre al potente grafico zoomabile sull’andamento delle quotazioni in borsa. E’ inoltre possibile caricare i dati direttamente da una tabella definita in HTML all’interno della pagina, con poche righe di codice javascript.

Sotto è riportato il codice, opportunamente commentato, dell’esempio mostrato in questo articolo.
//Carico il javascript di highcharts, dopo aver caricato jQuery
<script src="js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[

Data la sua natura di puro css e javascript, questo grafico è agilmente fruibile anche da dispositivi mobili come iPhone o Android, inoltre è ben renderizzato dai principali browser. Si tratta di un prodotto davvero interessante che potrebbe tornare utile in diverse applicazioni stand-alone, a costo zero. Ben diverso dal classico Google Charts, servizio comodissimo che però pecca in quanto ad interattività: all’utente viene infatti restituita in quel caso una immagine statica.

Cosa Manca? Mancano i “geo-grafici“, ovvero la possibilità di visualizzare i dati su una cartina; mancano i tachimetri, per visualizzare in un colpo d’occhio l’andamento più o meno positivo di un indicatore. Sono comunque cose a cui si può sopperire spulciando bene l’elenco dei plugin jQuery..
E voi? Che cosa utilizzate in questi casi?

• Web Service su Wikipedia
• Guida Web Service

L’obiettivo di questo articolo è fissare un esempio pratico per interrogare un web service e sfruttare i risultati che restituisce utilizzando C# e Visual Studio.

Supponiamo di dover accedere al webservice di esempio su W3C, descritto a questa pagina: http://www.w3schools.com/webservices/tempconvert.asmx
La descrizione del servizio è fornita a questo URL:  http://www.w3schools.com/webservices/tempconvert.asmx

Il servizio ha 2 metodi  - FahrenheitToCelsius() e CelsiusToFahrenheit() - che accettano entrambi un solo parametro di input e convertono la temperatura da gradi fahrenhait a Celsius e viceversa.

La risposta del server è un XML di questo tipo:
<?xml version="1.0" encoding="utf-8" ?><string xmlns="http://tempuri.org/">38</string>

Su Visual Studio, cliccando sul nome del progetto web col tasto destro, si apre un menu dove è possibile aggiungere una Web Reference.

Qui si inserisce l’indirizzo della descrizione WSDL del web service.

Il software identifica l’interfaccia del servizio web, con i metodi che mette a disposizione.
Per aggiungerlo al progetto si clicca sul tasto Add Reference. Fatto questo ci troveremo l’oggetto nel Solution Explorer.

Ora nel codice della pagina aspx su cui vogliamo consumare il web service è necessario aggiungere il riferimento con questo codice:
using com.w3schools.www;

Ora dichiariamo un oggetto per la web reference, che sarà possibile utilizzare con tutti i sui metodi come qualsiasi altro oggetto:

com.w3schools.www.TempConvert MyProxy = new com.w3schools.www.TempConvert();

L’esempio finale completo potrebbe essere una pagine con una textbox che nella quale l’utente scrive la temperatura, un bottone di invio invoca il webservice e il risultato appare in una label. In questo caso il codice della classe sarebbe il seguente:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using com.w3schools.www;
public partial class _Default : System.Web.UI.Page{
com.w3schools.www.TempConvert MyProxy = new com.w3schools.www.TempConvert();
protected void Page_Load(object sender, EventArgs e)    { }
protected void Button1_Click(object sender, EventArgs e)    {
Label1.Text = MyProxy.CelsiusToFahrenheit(TextBox1.Text);
}
}


Mentre il codice della pagina il seguente:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>&nbsp;<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>


E ora non resta che sbizzarrirsi, una volta imparato il mestiere va affinato.

Lascio qualche link per chi i web service li vuole anche costruire:

• How to create and invoke Java web service
• Your first C# Web Service

Volete stupire con componenti dinamici pronti all’uso? Creare applicazioni web avanzate non è poi così laborioso, oggi si trovano un sacco di risorse in rete. Una di queste è il DHTMLX UI Toolkit, una serie di librerie javascript corredate da tantissimi esempi. La documentazione è ciò che fa la differenza: gli script non documentati e con pochi esempi sono quasi inutilizzabili, se non perdendo un sacco di ore per studiarseli. UI Toolkit viene distribuito in uno zip con diverse pagine di pratiche demo.

Per chi lavora in ambiente .NET molto interessante è questo Ajax Control Toolkit, un insieme di controlli utilizzabili direttamente in Visual Studio con il drag and drop, per costruire form e applicazioni accattivanti. Da Codeplex si possono scaricare anche i sorgenti, corredati da diversi esempi. In questa pagina si può avere una panoramica di tutte le funzionalità disponibili, sono davvero parecchie:

• Accordion
• AlwaysVisibleControl
• Animation
• AsyncFileUpload
• AutoComplete
• Calendar
• CascadingDropDown
• CollapsiblePanel
• ColorPicker
• ComboBox
• ConfirmButton
• DragPanel
• DropDown
• DropShadow
• DynamicPopulate
• FilteredTextBox
• HoverMenu
• HTMLEditor
• ListSearch
• MaskedEdit
• ModalPopup
• MultiHandleSlider
• MutuallyExclusiveCheckBox
• NoBot
• NumericUpDown
• PagingBulletedList
• PasswordStrength
• PopupControl
• Rating
• ReorderList
• ResizableControl
• RoundedCorners
• Seadragon
• Slider
• SlideShow
• Tabs
• TextBoxWatermark
• ToggleButton
• UpdatePanelAnimation
• ValidatorCallout

Per chi vuole essere indipendente da javascript e piattaforma tecnologica, esiste questo Vaadin, tutto basato su Java. Quest’ultimo molto più simile ai più noti framewok come Mootools o JQuery: dispone di diversi componenti elementari che opportunamente combinati tra loro danno vita ad applicazioni web avanzate.

Da segnalare infine questo iWebKit, utile per chi vuole cimentarsi nella realizzazione di siti e applicazioni concepite specificatamente per iPhone.

Risorse di questo tipo ne esistono davvero a bizzeffe, ma non è facile distinguere quelle che sono effettivamente utilizzabili out of the box da quelle che invece necessitano di altro e magari nascondono limiti tali da sconsigliarne l’utilizzo. Personalmente ho utilizzato in un ambiente di produzione l’UI Toolkit di DHTMLX e posso confermare che si tratta di librerie pronte all’uso, davvero comode e funzionali. Ho intenzione di provare a breve l’Ajax Control Toolkit per .NET e vi farò sapere le mie considerazioni. Mi piacerebbe ovviamente sentire le vostre e capire se esistono altri strumenti oltre a quelli citati, che magari avete utilizzato direttamente.

Leggere i dati di un documento XML è un’operazione semplice e veloce, farli visualizzare su una pagina web è altrettanto rapido, ma è bene sapere alcune nozioni per potersi muovere con tranquillità e sicurezza.

Andiamo con ordine e vediamo subito un esempio di un file XML che vogliamo trattare:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
<data>
[..]
</data>
</DataSet>

Questo file potrebbe rappresentare dei dati produttivi, riguardanti ad esempio i materiali entrati in magazzino, i materiali prodotti e il venduto.

Il modo più rapido e banale per leggere questo file e farlo visualizzare su una pagina ASPX è tramite il seguente codice:

DataSet ds = new DataSet();
ds.ReadXml(@"C:\test.xml", XmlReadMode.Auto);
DataView MyDataView = new DataView(ds.Tables[0]);
MyDataGrid.DataSource = MyDataView;
MyDataGrid.DataBind();

Il codice non fa altro che creare un nuovo DataSet per contenere i dati che andremo a leggere, leggere il file tramite il metodo ReadXml(), creare una DataView con la tabella creata nel dataset e assegnare quest’ultima come DataSource per la DataGrid.

All’interno della pagina .aspx ci sarà quindi una DataSource così fatta:

<asp:DataGrid id="MyDataGrid" runat="server" >
    <HeaderStyle CssClass="th">
    </HeaderStyle>
</asp:DataGrid>

Tralasciamo lo stile attribuito alla testata della datagrid, ciò che è importante in questo caso è solo l’ID. 

Così facendo però ottengo una tabella di questo tipo:

E tutti gli altri dati che fine hanno fatto? Sono stati salvati in altre tabelle del DataSet, assieme a tutti gli attributi dell’xml; queste tabelle avranno come riferimento il data_Id e potrò utilizzarle come meglio credo.

Se infatti cambiamo il primo codice, mettendo una tabella diversa, in questo modo:

DataView MyDataView = new DataView(ds.Tables[1]);

Verrà visualizzata una pagina con la seguente tabella:

Se cambio e metto la terza tabella:

DataView MyDataView = new DataView(ds.Tables[2]);

Il risultato sarà:

Mentre per le tabelle successive, avrò questi risultati visualizzati:

Incrociando queste tabelle attraverso il campo data_Id potrei ricavare tutti i dati contenuti nell’XML, attributi e testi all’interno dei tag.
Il mio obiettivo era però quello di far visualizzare questi dati senza gli attributi riportati nell’XML. Ciò che mi interessa sono solo i dati riportati all’interno dei tag. Vorrei avere un risultato di questo tipo:

In questo caso potrebbe fare al caso nostro l’ XML Schema. Si tratta di un file con estensione XSD, che descrive i dati contenuti in un file XML. Ogni file XML può avere uno schema associato che lo descrive. Esistono diversi tool che possono creare un file XSD a partire da un XML, uno di questi, che trovo molto pratico è quello di Flame-Ware completamente on-line. 

Il nostro file XML iniziale potrebbe essere descritto da questo XSD, supponendo che tutti i campi siano stringe.

<?xml version="1.0"?>
<!-- Generated using Flame-Ware Solutions XML-2-XSD v2.0 at http://www.flame-ware.com/Products/XML-2-XSD/ -->
<xs:schema id="DataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="DataSet" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="data">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="period" type="xs:string" minOccurs="0" />
              <xs:element name="description" type="xs:string" minOccurs="0" />
              <xs:element name="updated" type="xs:string" minOccurs="0" />
              <xs:element name="note" type="xs:string" minOccurs="0" />
              <xs:element name="logunit" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="logunit_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="id" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="entered" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="entered_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="produced" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="produced_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="delivered" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="delivered_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>

Per associare questo schema al file XML, è necessario dichiararlo nell’intestazione, in questo modo:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="schema.xsd">
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
</DataSet>

Così facendo però, se rilanciamo la pagina costruita in precedenza, il risultato sarà identico: un unico dataset con diverse tabelle collegate tra loro dal campo data_Id.

Quindi? La soluzione c’è. Dobbiamo solo definire uno schema XSD semplificato all’interno dell’XML stesso. In questo modo:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet>
<xs:schema id="NewDataset" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="NewDataset" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="data">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="period" type="xs:string" minOccurs="0" />
              <xs:element name="description" type="xs:string" minOccurs="0" />
              <xs:element name="updated" type="xs:string" minOccurs="0" />
              <xs:element name="note" type="xs:string" minOccurs="0" />
              <xs:element name="logunit" type="xs:string" minOccurs="0" />
              <xs:element name="entered" type="xs:string" minOccurs="0" />
              <xs:element name="produced" type="xs:string" minOccurs="0" />
              <xs:element name="delivered" type="xs:string" minOccurs="0" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
</DataSet>

Il risultato finale sarà quindi una DataGrid che può essere visualizzata come sotto, utilizzando pari pari il codice C# definito all’inizio di questo articolo.

Buon divertimento con l’XML..