SDN Magazine 105

68 Pages·2010·6.62 MB·Dutch

MAGAZINE
SOFTWARE DEVELOPMENT NETWORK
IN DIT NUMMER O.A.:
Bedrijfsapplicaties bouwen met .NET RIA services <
HTML Bridge Bruggen bouwen in Silverlight <
Team Foundation Server 2010: Back to Basics? <
SharePoint 2010 Dialog Framework <
jQuery, maakt JavaScript weer leuk! <
Nummer 105 mei 2010 SDNMagazineverschijntelkkwartaaleniseenuitgavevanSoftwareDevelopmentNetwork
105
www.sdn.nl

Colofon
Uitgave:
voorwoord
SoftwareDevelopmentNetwork
Achttiendejaargang
No.105•mei2010
BestuurvanSDN:
RemiCaron,voorzitter
RobSuurland,penningmeester
JoopPecht,secretaris Geachtelezer,
Redactie: Vooruligtalweerhettweedenummervan2010.Zoalsuzietkrijgtdeveranderingin
RemiCaron([email protected]) hetmagazinesteedsmeergestalte,maarwezijnernogniet.Hetwordtnogbeter.
Aanditmagazine Hetisduidelijkweereenreleasejaardeindustriebruistenbeweegtaanallekanten.
werdmeegewerktdoor: De2010versiesvandediverseMicrosoftproduktendoetonsdeveloperhartsneller
Maurice de Beijer, Anko Duizer, Paul kloppen. Er worden derhalve ook een enorme hoeveelheid aan evenementen
Gielens, Christiaan Heidema, Marcel van georganiseerdzoookdoorons.Houonzeagendaopwww.sdn.nlgoedindegaten
Kalken, Stefan Kamphuis, Marcel Meijer, omtezienwaterplaatsvindt.
Mirjam van Olst, Joop Pecht, Sandra
deRidder,MaartenvanStam,BobSwart, Voor degene die het nog niet gehoord had, aan het einde van dit jaar gaat de
Marianne van Wanrooij en natuurlijk alle laatsteoprichtervanSDNJoopPechtonsverlaten.Naexact20jaartrouwedienst
auteurs! houdhijhetvoorgezien.Wijbetreurenzijnvertrekmaarwensenhemveelsuccesmet
zijnnieuwecarierre.
Listings:
Ziedewebsitewww.sdn.nlvooreventuele Zoals al eerder aangegeven staan we aan de vooravond van een groot aantal
sourcefilesuitdezeuitgave. wijzigingenbinnenSDN.TijdensdeALVvan18meihebbenweveelnieuweplannen
aanugepresenteerdenwezijnalenigetijdbezigdezeookteverwezenlijken.Naast
Vormgevingenopmaak: dedooronsgeinitieerdeactiviteitenstaanweookopenvoorsugesties,dusschroom
ReclamebureauBijDageraad,Winterswijk [email protected].
www.bijdageraad.nl
MijnspecialedankvoorderealisatievanditnummergaatuitnaarMarcelMeijer,die
©2010Allerechtenvoorbehouden.Nietsuit gedurendemijnafwezigheiddeoverigeSDNactiviteitenuitstekendheeftvervangen.
dezeuitgavemagwordenovergenomenop
welkewijzedanookzondervoorafgaande Restmijuveelleespleziertewensenmethethuidigenummerengraagvernemen
schriftelijke toestemming van SDN.Tenzij wijwatuvindtvanhetmagazinenieuwestijlwijzijneriniedergevaltrotsop.
andersvermeldzijnartikelenoppersoonlijke
titelgeschrevenenverwoordenzijdusniet RemiG.JCaron•
noodzakelijkerwijs de mening van het be-
stuuren/ofderedactie.Alleinditmagazine
genoemde handelsmerken zijn het eigen-
domvanhunrespectievelijkeeigenaren.
SDN emagazine
LeesdeemagazinesvanandereNetworksop:
www.sdn.nl/emagazine
Adverteerders
Microsoft 2
Avanade 10
Barnsten/Embarcadero 21
FastReportsInc. 22
4DotNet 33
Achmea 34
SybaseiAnywhere 42
Sogeti 44
Bergler 52
Macaw 68
Adverteren?
Informatieoveradverterenendeadverten-
tietarieven kunt u vinden op www.sdn.nl
onderderubriekMagazine.
magazinevoorsoftwaredevelopment 3
Inhoud
Agenda 2010
SDN Event . . . . . . . . . . . . . . . . . .18 mei 03 Voorwoord
RemiCaron
Delphi Developer Days - 04 Inhoudsopgave
Marco Cantu & Cary Jensen 04 Agenda
Londen, UK . . . . . . . . . . . . . . .26-27 mei
05 iPhone Applicaties ontwikkelen
MauricedeBeijer
www.delphideveloperdays.com
11 Component Templates
Frankfurt, D . . . . . . . . . . . . .31 mei-1 juni CaryJensen
15 Bedrijfsapplicaties bouwen
European Day of DotNetNuke, Parijs, met .NET RIA services
WillemMeints
www.dayofdotnetnuke.eu . . . . . . .28 mei
23 Development productivity study:
Uniface deliver 3GL app in less time,
TechEd USA, New Orleans . . . . .7-11 juni using less code
29 Alzheimer Architecture
SDN Digital Magazine #2 . . . . . . . .25 juni SanderHoogendoorn
32 SharePoint out of the box-
SDN Magazine Nr. 106 . . . . .28 augustus DMS in SharePoint 2010
MaartenvandenDungen
SDN: Software Development 35 HTML Bridge
Bruggen bouwen in Silverlight
Conference 2010 . . . . . . . .25-26 oktober ErikvanAppeldoorn
38 Team Foundation Server 2010:
Back to Basics?
Genoemdedataondervoorbehoud
SandervandeVelde
43 ASP.NET onder de motorkap:
Weg met Membership en Roles!
MichielvanOtegem
48 SharePoint 2010
Dialog Framework
MariannevanWanrooij
56 Using ASP.NET MVC to build
a DotNetNuke module
CharlesNurse
61 Business Intelligence basic concepts
RemiCaron
64 jQuery, maakt JavaScript weer leuk!
LeonardEshuis,MarcBruisten,ArjanPot
UX
Maurice de Beijer
iPhone applicaties ontwikkelen
met ASP.NET MVC en jQTouch
DeiPhoneiseenvandepopulairstemobieletelefoonsdieeropditmomenttekoopzijn.Enhet
is niet alleen een prima telefoon, hij is ook prima als mini computer te gebruiken. Dat is nauwe-
lijksnieuwstenoemengeziendehoeveelheidgebruikersenontwikkelaarsdiealactiefzijninde
iPhone AppStore. Nu hebben .NET ontwikkelaars alleen een nadeel, je kan niet zomaar met
.NET een applicatie voor de iPhone schrijven. Er zijn wel mogelijkheden met MonoSharp maar
dan kan men nauwelijks gebruik meer maken van Visual Studio en is men op een Apple
aangewezen.
Betekentditdatervoor.NETontwikkelaarsnietsandersopzitdan BeginnenmetjQTouch
naareenAppleoverteschakelen?Nee,gelukkigniet!OpdeiPhone OmtebeginnenmetjQTouchmoetenweeerstdelibrarydownloa-
draaitnamelijkeenzeerkrachtigebrowsermetuitgebreideonder- den.Dezeisophttp://www.jqtouch.comtevinden.Indezipfilezitten
steuningvoorHTML5onderdelen.Ditmaaktveelmogelijkwatmet naastdeJavaScriptenCSScodeeenaantalnuttigevoorbeeldenom
traditionelewebapplicatiesnietmogelijkiszoalseenlocaledatabase meetebeginnen.Naastdecodezijnerooktweeverschillendethemes
enofflineondersteuning.DaarbijkaninJavaScriptontwikkeldworden, meegeleverd.DeeersteiseenApplethememetdestandaardiPhone
ietswaarVisualStudioprimaondersteuningvoorheeft. kleureneneentweedeiseenjQTouchthememeteenstijlvollezwarte
WekunnenuiteraardmeteenlegeHTMLpaginabeginnenmaarzoals kleur.IkgagebruikmakenvaneenASP.NETMCVapplicatievoorextra
zovaakzijneralapplicatieframeworksbeschikbaardieeendeelvan functionaliteitineenvolgendedemo.Voorhetbegingaanweeen
deproblemenvooronsoplossen.InditgevalisdatjQTouch,eenfra- standaardHTMLpaginagebruikenbinnenhetproject.Nadatwehet
meworkdatbovenopjQueryisgebouwdenalmetASP.NETMVC ASP.NET MVC project aangemaakt hebben moet we eerst de
meegeleverd wordt. Door gebruik te maken van jQTouch is het benodigdejQTouchfilestoevoegen.DejQTouch.jskomtindeScripts
gemakkelijkeeniPhonewebapplicatietemakendieheelnatuurlijk directoryendejQTouch.cssfilekomtindeContentfolder.Daarnaast
aanvoelt voor iPhone gebruikers. Zo worden er bijvoorbeeld hebbenweéénvandethemesnodiguitdejQTouchthemesfolder.In
verschillendeanimatiesondersteundomvanpagina’stewisselenmaar ditgevalgebruikikdeinhoudvandejqtthemefolderenkopiëerdeze
ookdeGPSwordtondersteundomlocatieafhankelijkeapplicatieste ooknaardeContentfolder.
maken.
DeeerstepaginawordteenstandaardHTMLpagina.Indezelege
paginahebbenweeerstdebasisbenodigdhedennodig.Ditzijnver-
wijzingen naar de jquery-1.3.2.js en jqtouch.js script files en de
theme.cssenjqtouch.cssstylesheets.Nadatwedezeverwijzingen
hebbenisdevolgendestapeenjQTouchobjecttemaken.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio-
nal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio-
nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.3.2.js" type="text/java-
script"></script>
<script src="Scripts/jqtouch.js"
type="text/javascript"></script>
<link href="Content/theme.css" rel="stylesheet"
type="text/css" />
<link href="Content/jqtouch.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
var jQT = new $.jQTouch();
</script>
<title></title>
</head>
<body>
</body>
</html>
Fig.1:HetjQTouchthemeineeniPhonesimulator
Listing1:DebasispaginametjQTouch
magazinevoorsoftwaredevelopment 5
UX
Hoekunnenweonzeapplicatietesten? Ditallesgebeurtbinnenéénpaginazonderdaterverbindinggemaakt
Hetbesteishetuiteraardomdeapplicatietetestenopeenechte wordtmetdeserver.HetstandaardgedragvanjQTouchisomde
iPhone.Indepraktijkishetnietechthandigomdatconstanttedoen. clicksvaneenanchorbinneneenlistitemineenunorderedlistopde
Tijdens het ontwikkelen is een simulator handiger. Er is binnen de bodytegebruikenalslinks.Ditisaantepassendoorgebruiktemaken
AppleiPhoneSDKeengoedeiPhonesimulator.Helaaswerktdeze vandeinitialisatieopties,ietswatweinditvoorbeeldnietgebruiken.
simulator alleen op een Mac en niet op een Windows PC. Bij het Nuwehettochoverdeinitialisatieoptieshebben.Metdezeopties
ontwikkelen op een PC gebruik ik de desktop Safari browser van zijn er tal van aanpassingen te doen hoe jQTouch werkt en een
Apple.Dezelijktheelsterkopdemobieleversieenwerktprima.Om applicatieeruitziet.Eenpaarinteressantezijn:hetgebruikvaneen
sneltekunnenzienhoedeapplicatieeropeeniPhoneuitzietgebruik startup screen, een icon voor op de iPhone achtergrond of het
ikTestiPhone.com,eenonlineiPhonesimulatordieweinSafariladen. preloaden van plaatjes die later in de applicatie gebruikt worden.
Binnen TestiPhone.com geven we dan de URL van de te testen Zie http://code.google.com/p/jqtouch/wiki/InitOptions voor een
applicatieop, datmageenURLopdemachinezelfzijn. completelijstvanalleopties.
DestructuurvaneenjQTouchapplicatie Eeneenvoudigeapplicatiemaken
BinneneenjQTouchapplicatiekunnenweverschillende“pagina’s” MetdezebasiskennisvanjQTouchishetnietmoeilijkommetbehulp
hebben.Integenstellingtoteennormalewebapplicatiezijnditechter vanASP.NETMVPeenapplicatietemakendieeropdeiPhoneheel
geenapartepagina’smeteigenURL’smaarverschillendedivelemen- normaaluitziet.Deapplicatiedieikalsdemogebruiklaatzienwatde
tenineenhoofdpaginawaarvaneréénzichtbaargemaaktwordt.Dit verschillende.NETgebruikersgroepeninNederlandaanbijeenkom-
laatstedoetjQTouchautomatischvoorons.Detoolbardiebijeen stenorganiseren.Destructuuriseenvoudig,degebruikerstartde
iPhoneapplicatiemeestalbovenaangetoondwordtbestaatuiteen applicatieenzieteenlijstvandemogelijkegebruikersgroepen.Zodra
genestediv,inditgevalmetdecssclass“toolbar”.Hierbinnenkan degebruikeropeengroepkliktverschijntereenlijstjemetbijeen-
eventueeleenh1elementgebruiktwordenomeentiteltetonen.Erzijn komsten. Door vervolgens op een bijeenkomst te klikken krijgt de
verschillendemanierenomeenandere“pagina”teactiverenbinnen gebruikereenpaginametinformatieoverdiebijeenkomsttezien.
jQTouch.Demeestemensenbeginnenmeteenlijstmetlinksnaareen
vervolgpagina.Ditwordtstandaardgemaaktdooreenunorderedlist Als de gebruiker deze eerste HtmlDemo start wordt van de Html
metlinksnaardeverschillendepagina’stemaken.jQTouchzalde DemoController klasse de Index functie uitgevoerd. Deze haalt de
navigatieactiebijeenklikonderscheppenendegewenstepagina benodigdedataopengeefteenViewResultterugdiedeIndex.aspx
zichtbaarmaken. uitdeViews\HtmlDemofolderweergeeft.Decodevoordecontroler
zieteralsvolgtuit:
<body>
<div id="MainPage"> public class HtmlDemoController : Controller
<div class="toolbar"> {
<h1>
public ActionResult Index()
Main</h1>
{
</div>
<p>
var meetings = Meeting.Load();
De eerste pagina</p>
var groups = UserGroup.Load();
<ul>
<li><a href="#Page1">Pagina 1</a></li>
<li><a href="#Page2">Pagina 2</a></li> var query = from ug in groups
</ul> select new UserGroupViewModel
</div> {
<div id="Page1"> Group = ug,
<div class="toolbar"> Meetings = meetings.Where(
<a class="back" href="#">Terug</a> m => m.UserGroupId == ug.Id ||
<h1> m.UserGroupId == null).ToList()
Een</h1>
};
</div>
<p>De eerste pagina</p>
ViewData["UserGroups"] = query.ToList();
<ul>
ViewData["Meetings"] = meetings;
<li><a href="#Page2">Pagina 2</a></li>
</ul>
</div> return View();
<div id="Page2"> }
<div class="toolbar"> }
<a class="back" href="#">Terug</a>
<h1> Listing3:MVCcontroleraction
Twee</h1>
</div> Deviewzelfbevatdecodedieopbasisvandezedatadebenodigde
<p>De tweede pagina</p> HTMLgaatproduceren.Deheadervandeviewiseigenlijkhetzelfde
<ul>
als in het bovenstaande voorbeeld. Eerst worden de benodigde
<li><a href="#Page1">Pagina 1</a></li>
stylesheets en scripts geladen. Daarna wordt het jQTouch object
</ul>
aangemaakt.Netalsinheteerstevoorbeeldwillenweooknuinde
</div>
bodyallebenodigdedatahebbenophetmomentdatdepaginanaar
</body>
debrowsergaat.DieHTMLwordtnuopbasisvandebovenstaande
Listing2:DeHTMLbodyvandeeerstepagina data gegenereerd. Als eerste hebben we de lijst van gebruikers-
groepennodigvoorhethoofdmenu.Ditwordtmethetvolgendestuk
codegedaan:
6 MAGAZINE
UX
<%-- Write usergroup main menu --%> <%= meeting.Description %>
<div> </div>
<div class="toolbar"> </div>
<a class="back" target="_webapp" <% } %>
href="/CodeCamp">Home</a>
<h1> Listing6:Eenpaginaperbijeenkomst
CodeCamp</h1>
</div> Allesbijelkaarishetgenererenvandepaginanietergmoeilijken
<ul> hebbenwealsneleenbruikbareapplicatie.
<% foreach (var group in (IEnumerable<UserGroup- Hetisdanmisschiennietmoeilijkdeapplicatieopdezemanierte
ViewModel>)ViewData["UserGroups"])
makenmaarerklevenweleenpaarnadelenaandiehiermisschien
{
nietgelijkduidelijkworden.Deapplicatielaadthiernamelijkmaarheel
UserGroup ug = group.Group;
weinigdatazodatdeuiteindelijkepaginanieterggrootwordt.Maarbij
%>
eenapplicatiedieveeldatalaadtwordtdeHTMLpaginaalsnelveel
<li><a href="#<%= Html.Encode(ug.Id) %>">
tegrootenmoetdegebruikerlangwachtenvoorerietsgebeurd.Het
<%= Html.Encode(ug.Name) %></a></li>
magdanookduidelijkzijndatdezeaanpaknietwerktvooreenweb-
<% } %>
</ul> winkelmetenkeleduizendenartikeleninhetassortiment.
</div>
Listing4:hoofdmenumetdegebruikersgroepen
Vervolgenshebbenwevoorelkegebruikersgroepeenlijstvanbeno-
digdebijeenkomstennodig.Ditgebeurtmetdevolgendecode:
<%-- Write out each usergroup and its meetings --%>
<% foreach (var group in
(IEnumerable<UserGroupViewModel>)ViewData["UserGroups"])
{
var ug = group.Group;
var meetings = group.Meetings;
%>
<div id="<%= Html.Encode(ug.Id) %>">
<div class="toolbar">
<a class="back" href="#">Terug</a>
<h1>
<%= Html.Encode(ug.Name) %></h1>
</div>
<div class="logo">
<img src="<%= Html.Encode(ug.Logo) %>" />
</div>
<ul>
<% foreach (var meeting in meetings)
{
%>
<li><a href="#<%= Html.Encode(meeting.Id) %>">
<%= Html.Encode(meeting.Title) %></a></li>
Fig.2:Hethoofdmenuvanonzeapplicatie
<% } %>
</ul>
</div> Werkenmetgroterehoeveelhedendata
<% } %> Zodrawemetgroterehoeveelhedendatagaanwerkenishetvante
vorengenererenvanalleHTMLgeenoptiemeer.Wekunnendanop
Listing5:Debijeenkomstenpergebruikersgroep verschillendemanierentewerkgaanomeenapplicatietemakendie
welgoedwerkt.Waardemeesteontwikkelaarsheteerstaanzullen
Als laatste hebben we per bijeenkomst een pagina nodig met de denkenismetAJAXaandeslaggaan.Ditiseenprimaoptieaange-
details voor die bijeenkomst. Dit wordt met de volgende code zienwezowelopdeservergegenereerdeHTMLkunnengebruiken
gegenereerd: als met jQuery JSON data ophalen en binnen de browser HTML
genereren.IndevoorbeeldcodeisdezeaanpaktezienindeAjax-
<%-- Write out all meetings --%> DemoControllerendebijbehorendeview.
<% foreach (var meeting in (IEnumera-
ble<Meeting>)ViewData["Meetings"]) Erisechtereenandereoptiedienogmeervoordelenoplevertendat
{ is de data ophalen en in een database binnen de browser te
%>
bewaren.Dezedatablijftbewaard,ookalsdebrowserafgeslotenis,
<div id="<%= Html.Encode(meeting.Id) %>">
en kan volgende keer direct gebruikt worden als de applicatie
<div class="toolbar">
opgestartwordt.DitismogelijkomdatdebrowseropdeiPhoneal
<a class="back" href="#">Terug</a>
eengrootdeelvandeHTML5specificatiesimplementeertwaarlokale
<h1>
databaseopslageréénvanis.Ditwordtnoginteressanteralswedeze
<%= Html.Encode(meeting.Title) %></h1>
</div> HTML5eigenschapcombinerenmetdievanofflineapplicaties.Die
<div style="margin: 25px;" class="description"> tweesamenzorgenervoordatweeenvolledigfunctioneledatabase
magazinevoorsoftwaredevelopment 7
UX
applicatiekunnenschrijvendielokaalbewaardwordtenofflineopde DeIndexfunctiedoetnunietsmeerdandeviewteruggeven,deze
iPhonebruikbaaris.Datallemaalzonderdeverplichtingomdoorde wordthieronderbesproken.DeGetUserGroups()enGetMeetings()
AppleiPhoneAppStoretegaan. functieshalennudedataopengevenditterugalsJSONdatazodat
diegemakkelijkteverwerkenisinJavaScript.
Sidebar:VoorennadelenvandeAppleAppStore HetHTMLdeelvandeviewisnuookveeleenvoudiger.Hetisniet
Erzittenzowelvoor-alsnadelenaanhetverspreidenvaneenappli- veelmeerdaneenlegeschil,maarwelvolgensdeeerstestructuur,
catieviadeAppleAppStore.Hetgrotevoordeelisdatermiljoenen waardeJavaScriptcodedataaantoegaatvoegen.
mensen, en veel software review sites, gebruik maken van de
AppStoreendatdeapplicatiezogemakkelijkgevondenkanworden. <body>
KoppeldaarhetgemakvanhetbetalenvaneenEuroaaneneen <%--Main menu, display a list of user groups--%>
ontwikkelaar kan een leuk bedrag aan een populaire applicatie <div>
verdienen.DeAppStoreheeftechterookeenkeerzijde.Erkomen <div class="toolbar">
<a class="back" target="_webapp" href="/CodeCamp">
namelijkalleenapplicatiesindiedoorApplegoedgekeurdworden.
Home</a>
En er worden nogal eens applicaties om twijfelachtige redenen
<h1>
afgekeurd.Losdaarvankosthetreviewprocestijdwaardoorbugfixes
CodeCamp</h1>
langerdannodigopzichlatenwachten.VerderisdeAppStoreeen
</div>
publiekgeheelendusnietdeplaatsominternebedrijfsspecifieke
<ul id="groupsList">
applicaties te plaatsen. Om niet via de Apple AppStore te hoeven </ul>
werkenishetmakenvaneenHTML5/JavaScriptapplicatiedieoffline </div>
genomenkanwordeneengoedalternatief.Overigenssluitenweeen <%--Display a single user group with a list of meetings--%>
gangnaardeAppStorenietuitaangezienhulpmiddelenalsPhone- <div id="singleGroup">
Gap,www.phonegap.com,eenjQTouchapplicatiekunneninpakken <div class="toolbar">
enviadeAppStorekunnenverspreiden. <a class="back" href="#">Terug</a>
<h1>
</h1>
Sidebar:IetsmeeroverdeiPhonebrowser
</div>
DebrowseropdeiPhoneisdemobielevariantvandeSafaribrowser
<div class="logo">
dieookopdedesktoptekrijgenis.Dezebrowserondersteunteen
</div>
flink deel van de HTML5 specificaties waaronder die voor locale
<ul id="meetingList">
databasesenofflineapplicaties.Omdatdezefunctionaliteitzowelop
</ul>
dedesktopalsopdeiPhonebeschikbaariskaneenapplicatieprima
</div>
indedesktopSafaribrowsergetestworden.Voorhetdatabasedeel <%--Display a single meeting--%>
heeftApplebeslotenomSQLitetegebruiken.DeSQLitedatabaseis <div id="meeting">
opveelplatformentegebruikenendedocumentatieoverhetgebruik <div class="toolbar">
isopwww.sqlite.orgtevinden.Demanierwaaropeendatabaseinde <a class="back" href="#">Terug</a>
browser vanuit JavaScript benaderd wordt is op www.w3.org/TR/ <h1>
webdatabasetevinden.VoorhetofflinenemenvanHTML5applica- </h1>
tiesisophttp://www.whatwg.org/specs/web-apps/current-work/#of- </div>
<div style="margin: 25px;" class="description">
flinemeertevinden.
</div>
</div>
DedatabaseversievandeiPhoneapplicatie
</body>
Latenweweerbeginnenbijhet ASP.NETMVCcontrolerdeelvande
applicatie.Diezieternuietsandersuitaangeziendedatanulosvan Listing8:DeHTMLbodyvoordedatabaseiPhoneapplicatie
deHTMLnaardebrowsergestuurdwordt.Dezecodezieteralsvolgt
uit: DemeestelogicavandeapplicatiezitnuindeJavaScriptcodediein
debrowserdraait.Dezecodeiswelwatingewikkeldergewordenmaar
public class DatabaseController : Controller
valteigenlijkwelmee.Voordemeeste.NETprogrammeursishetvoor-
{
namelijkevenwennenaandeasynchronemaniervanwerkenbinnen
public ActionResult Index()
JavaScript maar zodra dat een beetje gewend is blijkt het best
{
return View(); gemakkelijktewerken.
} Deeerstekeerdatdegebruikerdeapplicatieopstartzullenwededa-
tabasemoetenaanmaken.Hiervalthetgelijkophoegemakkelijkhet
werkenmetSQLiteis,erhoevennamelijkgeendatatypesgebruiktte
public JsonResult GetUserGroups()
worden,ietswatineenomgevingalsJavaScriptheelnatuurlijkis.
{
var result = UserGroup.Load().
// Open and create the database as required.
OrderBy(g => g.Name).ToList();
return Json(result); function setupDatabase() {
} db = openDatabase("CodeCamp", "1.0", "CodeCamp", 65536,
function(db) { alert(db); });
public JsonResult GetMeetings() if (db != undefined) {
{
db.transaction(createTables, errorHandler);
var result = Meeting.Load().
}
OrderBy(m => m.Description).
}
ToList();
return Json(result);
} // Create the database tables if needed.
} function createTables(tx) {
Listing7:DeMVCControlervoordedatabaseiPhoneapplicatie
8 MMAAGGAAZZIINNEE
UX
tx.executeSql('create table if not exists Groups (Id, "<a href='#singleGroup' groupId='" +
Name, Logo);'); item.Id + "'>" +
tx.executeSql('create table if not exists Meetings (Id, item.Name + "</a></li>");
Title, Description, UserGroupId);'); }
} });
}, errorHandler);
Listing9:Hetopenenvandedatabaseenaanmakenvande }
tabellen
Listing11:Hetzichtbaarmakenvandegebruikersgroepen
Naast het ontbreken van data types valt hier gelijk te zien hoe er
binnenHTML4/JavaScriptmeteendatabasegewerktmoetworden. Uiteraard blijven deze gegevens in de database zodat we bij de
EerstwordtereendatabaseobjectaangemaaktviadeopenData- volgendekeerdatdeapplicatiegestartwordtniethoeventewachten
base()functie.Alservervolgensietsmetdezedatabasegedaanmoet totallesgeladenisvoorwedegebruikerwatlatenzien.Ietswatde
wordenishetsteedseersteentransactiestartenmetdetransaction() helegebruikerservaringveelbetermaakt.Daarnaastopentditookde
functieendaareenfunctieaanmeegeven.Dezefunctiewordtdan deurnaarhetofflinenemenvandeapplicatiedooreenmanifestopte
asynchroon aangeroepen en krijgt het transactie object als eerste nemenwaarinstaatwelkebestandendebrowsermoetlokaalmoet
parameter.MetdittransactieobjectkandandeexecuteSql()functie bewaren.Hetofflinenemenvandeapplicatiegaatechterbuitende
aangeroepen worden om iets te doen, in dit geval de benodigde bereikvanditartikel.
tabellenaanmaken.
Conclusie
Nadatdedatabaseopenisendetabellenaangemaaktzijnkunnen jQTouchiseenzeerinteressanteJavaScriptbibliotheekvoormensen
wemetdejQuerygetJSON()functiededatavandeserveropvragen. dieapplicatiesvoordeiPhonewillenmakenmaardatnietinObjective-
Inditgevalvragenweeerstdegebruikersgroepenopengevenwe CopeenApplewillendoen.Hetwerkenmethetofficiëleplatform
degetUserGroupsCompleted()functiemeeomuittevoerenalsde heeft altijd voordelen doordat er een hoop mogelijk is maar geeft,
datageladenis.Indecodeisgoedtezienhoewedatweerbinnen vooraldoordeAppStoreenhethieraangekoppeldegoedkeuringsys-
eentransactiemetdeexecuteSql()functiedoenendatwebinnen teem,ookeigenlijkweldenodigebeperkingen.Doorgebruiktemaken
SQLite gewoon parameters kunnen gebruiken bij een SQL vanjQTouchisdestapnaardeiPhoneveelmindergroot.Enalswe
commando. eenmetjQTouchontwikkeldeapplicatielatertochindeAppStore
willen zetten kan dat altijd nog met behulp van oplossingen als
// The user groups have been loaded. PhoneGapdieeenJavaScriptoplossingverpakkentoteennormale
// Store them in the local database. applicatie.•
function getUserGroupsCompleted(groups) {
$.getJSON("Database.aspx/GetMeetings", null, getMeetings-
Completed);
MauricedeBeijer
db.transaction(function(tx) {
tx.executeSql("DELETE FROM Groups");
MauricedeBeijeriseenzelfstandig
softwareontwikkelaar,MostValua-
$(groups).each(function(i, item) {
tx.executeSql("INSERT INTO Groups bleProfessionalenbèta-testervoor
(Id, Name, Logo) VALUES (?,?,?)", Microsoft. Hij specialiseert zich in
[item.Id, item.Name, item.Logo]); .NET,objectoriëntatieenhetoplos-
}); senvantechnischmoeilijkeproble-
}, errorHandler, displayUserGroups); men.HiernaastisMauriceookde
} voorzittervandeUXtrackvanhet
Software Development Netwerk,
Listing 10: De functie om de opgehaalde gebruiksgroepen te www.sdn.nl. Maurice is te bereiken via maurice@theproblem
bewaren solver.nlofwww.theproblemsolver.nl
Nahetopvragenvandegebruikersgroepenvragenweeenlijstvan
bijeenkomsten op die we op eenzelfde manier in de database .NET TIP:
bewaren.
Hetindebrowsertonenvandegegevensisnuookbestgemakkelijk jQueryPad
geworden.IndedisplayUserGroups()functiehieronderwordende MetjQueryaandeslag?Danishetdemoeitewaardomeens
gegevensuitdedatabasegeladenenindeunorderedlistgezet. goedtekijkennaarjQueryPadvanPaulStovell.MetjQueryPad
ishetgemakkelijkomjQuery,enanderJavaScript,sneltetesten.
// Display the usergroups in the local database.
function displayUserGroups() {
var ul = $("#groupsList");
ul.empty();
db.transaction(function(tx) {
tx.executeSql("Select * from Groups",
null, function(tx, result) {
for (var i = 0; i < result.rows.length; i++) {
var item = result.rows.item(i);
ul.append("<li class='arrow'>" +
magazinevoorsoftwaredevelopment 9
9.000
professionals werken samen aan
baanbrekende Microsoft projecten
Join
Werken bij Avanade betekent als onderdeel van een wereldwijd
netwerk van IT-professionals werken aan interessante projecten voor
grote opdrachtgevers. Avanade-consultants zijn gespecialiseerd in
het Microsoft-technologieplatform en krijgen een groot aanbod van
trainingsmogelijkheden om zichzelf daarin te ontwikkelen.
Wil je ook werken aan een
professionele carrière in de IT?
Kijk dan voor meer informatie
op www.avanade.nl
Of neem contact met via
telefoonnummer 036 5475107