Dynamic Avansert lange lister med Flex
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Denne opplæringen viser hvordan en utvikler kan enkelt utvide prepackaged Flex bibliotek klasser for å oppnå bedre resultater i brukergrensesnittet.
I dette tilfellet, vi skal opprette et avansert Datagrid som kan gjøre sinnsykt lange lister i håndterbare biter og vise dem som paged lister. Denne opplæringen omhandler primært AS3, men har en dose av PHP og MySQL for å støtte bakenden funksjonalitet. Søknaden vil være i stand til å lagre og hente listen er vist kolonner, gjeldende siden, sortere bestillinger og sortere felt. La oss gå ..
Innledning
Datagrid og avanserte Datagrid klasser pakket med Flex er ganske begrenset i funksjonalitet. De er bare bra for svært korte lister i en virkelig verden søknad. Lister kan være millioner av linjer lange og XML-dokumenter kan ikke sendes som representerer den fullstendige listen effektivt. Også, hvis XML returneres kun representerer en del av listen, da det er den eneste delen vil brukeren aldri se.
Denne opplæringen er den første fasen av min egen eksperimentering prøver å lage avanserte datagrids fungere som bruker ville tenkt. Deler av dette kan brukes til en vanlig Datagrid, men AdvancedDataGrid er mye mer anvendelig. Den AdvancedDataGrid har et vannmerke med mindre du kjøper Professional Edition eller hvis du er en student og plukke opp den utdanning versjonen av FlexBuilder. Du trenger FlexBuilder, et sted å være vert for din PHP-kode og en MySQL server for databasen for å følge denne opplæringen. Jeg er også forutsatt at du er kompetent i grunn FlexBuilder funksjonalitet som byggeprosjekter
Trinn 1:. Krav Gathering
Det første trinnet er alltid å finne ut hva du vil gjøre. Siden alle programmer er forskjellige i deres bruk, kan dine egne lister har forskjellig funksjonalitet. Basert på mine brukerens behov jeg funnet ut at jeg trengte et program som kan:
Vis data fra en liste som kan være 1 - ∞ poster lang.
Tillat paging av data for å forbedre brukergrensesnittet og lasting.
Husk feltene blir vist.
Husk feltene listen blir sortert på.
< li> Husk retning disse feltene blir sortert på (stigende eller synkende).
Tillat brukeren å endre feltet rekkefølgen på nettet.
Tillat brukeren å skifte side at de ser
Trinn 2:. Bestem List Controls
Brukeren vil ha alle kontroller er innebygd i AdvancedDataGrid som multi kolonne sortering og kolonne bestilling gjennom å dra overskriftene. I tillegg vil brukeren må være i stand til å navigere gjennom sidene i listen. Til dette trenger vi å bruke en stepper, samt knapper for å tillate brukeren å gå til den første siden, gå til forrige side, laste, gå til neste side og gå til siste side. Siden dette ikke kan bygges inn i AdvancedDataGrid klassen selv må vi ha en slags beholder som vi skaper som inneholder listen vi skal jobbe med, og alle kontrollene
Trinn 3:. Hva er mine Events?
Vi prøver å gjøre fronten som "dumme" som vi kan. Dette betyr at for hver handling brukeren gjør vi må spille inn sine handlinger på backend. Jeg pleier å skrive ut en liste over alt som må formidles til serveren min til å hjelpe med flyt. Det hjelper også for smidig utvikling, slik at vi kan fokusere på ett stykke av funksjonalitet på en gang. For dette eksperimentet jeg bestemt følgende hendelser må skje basert på kravene samlet. Jeg har brutt dette ned i to grupper; hendelser avfyrt av listen selv og hendelser avfyrt av kontrollene utenfor listen
Utenfor Events:.
Siden er besøkt for første gang denne økten
Stepper verdi endres med stepper elementet
Stepper Verdien endres med navigasjonsknappene
List Events:..
Bruker endrer nettets kolonne sortering.
Bruker endrer rutenettet kolonnevisningsrekkefølgen.
Kolonner er lastet.
Listeelementer er lastet.
Databasen
lange lister må komme fra databaser. Mens det er mange måter å gjøre dette, har jeg valgt noe enkelt bare for å få data tilbake til for dette eksperimentet. Vi må opprette en database og to bord. En tabell for data vi kommer til å liste opp, og en tabell som en avansert session variable lagrings som vil gjøre det mulig for en liste for å huske sin tilstand så lenge økten er gyldig
Trinn 4:. Lag Dine Tabeller
Lag to tabeller. Den første er den faktiske data som vi skal hente. For å gjøre ting enkelt du kan ganske enkelt kopiere følgende for å få en eksakt kopi av mine testdata.
CREATE TABLE IF IKKE eksisterer `ExampleTable` (` RecID` int (10) usignert NOT NULL AUTO_INCREMENT, `Name` varchar (100 ) NOT NULL, `Age` int (11) NOT NULL,` School` varchar (100) NOT NULL, PRIMARY KEY (`RecID`)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 16; INSERT INTO` ExampleTable` (` RecID`, `Name`,` Age`, `School`) VALUES (1, 'Bugs Bunny', 57 'Acme U'), (2," Mickey Mouse ", 72", Disney Community College '), ( 3, 'Bart Simpson', 12 ", Springfield Grade"), (4, 'Peter Griffin', 38, 'Cohog High'), (5, 'Rask Gonzalez', 20, 'Univesity av Andale'), (6 «Pepe Lepew ', 25,' La Conservatoir National '), (7," Homer Simpson ", 39", Springfield Universitetet'), (8, 'Raphael', 18, 'Splinter Spesielle Studies'), (9, «Splinter ', 34,' The Technodrome '), (11,' Donald Duck ', 34' Naval Academy '), (12,' Skrue McDuck ', 65' McDougal Universitetet '), (13,' Papa Smurf ', 72' Smurf School "), (14, 'Jabberjaws', 15 'skole Under the Sea"), (15,' Quicky Koala ', 41' Australian State ');
Nå må vi skape bordet for å lagre informasjon om økten. Dette er bordet som gjør dette hele greia arbeid.
CREATE TABLE IF IKKE eksisterer `Session` (` RecID` int (10) usignert NOT NULL AUTO_INCREMENT, `SessionID` varchar (32) NOT NULL,` Name` varchar ( 200) NOT NULL, `Value` varchar (40 960) NOT NULL,` LastActiveDTS` timestamp NOT NULL standard "0000-00-00 00:00:00" på oppdatering CURRENT_TIMESTAMP, PRIMARY KEY (`RecID`)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 37;
Session Table har en unik nøkkel-id, en "sessionId" som vil bli lagret som en cookie i PHP, "Navn" av den typen informasjon blir lagret, den "verdi" lagret og en "LastActiveDTS" for å hjelpe til med fremtidig opprydding for å rense gamle utgåtte økter. Dette opprydding er ikke implementert.
PHP Hendelseskode
Som vi bestemt i trinn 3 er det flere hendelser som må skje. Følgende trinn gå gjennom php skript som lar disse hendelsene til å skje på serveren. Det er mange måter å gjøre dette, hva jeg har kodet fungerer, men selv om jeg ikke ville bruke dette i et produksjonsmiljø
Trinn 5:. Tag.php
Jeg opprettet en hjelper klasse hjelpe til med å skape noen form for strukturert tagget utgang. Dette kan brukes til å lage html, men i dette tilfellet vil det være grunnlaget for XML. Jeg vil ikke gå inn denne koden mye som jeg bruker det som tilbehør, mer enn poenget med denne opplæringen. Twitter /** *author Jay Leffue *version 1,0 * //*** Denne klassen er den tag av XML. * /class Tag {/** * Navnet på denne taggen. * /Private $ snitt; /** * Rekken av egenskapene til denne koden. * /Private $ _props; /** * Array of Tags som er direkte chilren av denne Tag. * /Private $ _children; /** * Strengen innhold i denne koden. * /Private $ _content; /** * Klassen konstruktør * *param string $ TagNavn navnet på denne taggen *param matrise $ attributter en rekke attributter denne koden vil ha *param string $ innhold innhold som går inne i denne koden. *return Void * /public funksjon __construct ($ TagNavn, $ Props = null, $ innhold = null) {$ this- > snitt = $ TagNavn; $ this- > _props = array (); if (isset ($ Props)) {$ this- > setProps ($ Props); } If (isset ($ innhold)) {$ this- > _content = $ innhold; } $ This- > _children = array (); } /** * Returnerer navnet brukes av denne Tag. * *return Streng * /public funksjon getName () {return $ this- > snitt; } /** * Erstatter gjeldende egenskaps for denne koden, og returnerer en referanse til selv. * *param Matrise $ rekvisitter En rekke egenskaper for å sette for dette elementet. * *throws Unntak *return Tag * /public funksjons setProps ($ Props) {if kaste nytt unntak ('Ugyldige Properties') (is_array ($ Props)!); $ this- > _props = $ Props; returnere $ dette; } /** * Legger til en bestemt egenskap for denne koden, og returnerer en referanse til selv. * Dersom eiendommen allerede eksisterer det vil erstatte det. * *param Blandet $ rekvisitter En rekke egenskaper eller om bare å sette en eiendom en streng som angir navnet på egenskapen å sette. *param Blandet $ verdi hvis $ rekvisitter er en streng dette vil være verdien for å sette for denne eiendommen. * *throws Unntak *return HTMLElement * /public funksjon addProps ($ rekvisitter, $ Verdi = null) {if (is_array ($ Props)) {$ this- > _props = array_merge ($ this- > _props, $ Props); } ElseIf (Isset ($ verdi)) {$ this- > _props [$ Props] = $ verdi; } Else {unset ($ this- > _props [$ Props]); } Returnere $ dette; } /** * Gets en bestemt egenskap for denne koden. * *param String $ Navn Navnet på eiendommen for å komme tilbake. *return Blandet * /public funksjon getProp (Name $ = null) {if (! Isset ($ navn)) {return $ this- > _props; } ElseIf (isset ($ this- > _props [Navn $])) {return $ this- > _props [Navn $]; } Returnere null; } /** * Returnerer sann hvis den angitte egenskapen eksisterer. * *param String $ navn navnet på eiendommen vi søker etter. * *return Boolean * /public funksjon hasProp (Navn $) {return array_key_exists ($ navn, $ this- > _props); } /** * Legger barne koder til denne koden, og returnerer tag den lagt. * *param Tag $ Child Koden for å lage et barn av denne Tag. *param Blandet $ Key Valgfri verdien i matrisen tast for å tildele denne array element * *return Tag * /public funksjon addChild (Tag $ Child, $ Key = null) {if (isset ($ Key)) {$ dette - > _children [$ Key] = $ Child; } Else {$ this- > _children [] = $ Child; } Returnere $ Child; } /** * Ser ut for å se om koden har en umiddelbar barnet med det angitte navnet. * *param String $ Navnet vi leter etter. * *return Boolean * /public funksjon hasChild (Navn $) {foreach ($ this- > _children som $ Child) {if ($ Child > getName () == $ navn) {return true; }} Return false; } /** * Returnerer barna. * *param Ingen. * *return Array-* /offentlige funksjons getChildren () {return $ this- > _children; } /** * Returnerer Child Tag med navnet spesifisert * *param $ string $ navn navnet på tag vi håper å komme tilbake * *return Tag * /public funksjon getChild ($ navn) {foreach ($ this- > _children som $ Child) {if ($ Child > getName () == $ navn) {return $ Child; }}} Offentlig funksjon getChildCount () {return count ($ this- > _children); } /** * Returnerer xml av denne koden, hvis det har barne-koder, vil de bli kalt så vel * *param ingen * *return streng Den resulterende XML * /public funksjon getTagXML () {$ string = ''; //hvis det ikke er noen barn så bare returnere XML-koden med innebygd '/' på slutten hvis (tom ($ this- > _children)) {if (isset ($ this- > _content)) {$ streng. = "<". $ this- > snitt; foreach ($ this- > _props som $ name = > $ prop) {$ prop = ereg_replace ("'",' ', $ prop); //Fjern apostrof da disse ser ut til å være årsaken til problemene med fusjons diagrammer. $ string = "" $ navn.. "=" "$ prop.." '. "; } $ String = ">". $ This- >. _content "≪ /". $ This- >. Snitt ">."; } Else {$ string = "<". $ This- >. Snitt; foreach ($ this- > _props som $ name = > $ prop) {$ prop = ereg_replace ("'",' ', $ prop); //Fjern apostrof da disse ser ut til å være årsaken til problemene med fusjons diagrammer. $ string = "" $ navn.. "=" "$ prop.." '. "; } $ String = "/>."; }} //Ellers vi må grave dypere før stengetid vår tag else {$ string = ". ≪" $ this- >. Snitt; foreach ($ this- > _props som $ name = > $ prop) {$ prop = ereg_replace ("'",' ', $ prop); //Fjern apostrof da disse ser ut til å være årsaken til problemene med fusjons diagrammer. $ string = "" $ navn.. "=" "$ prop.." '. "; } $ String = ">."; //nå gå gjennom sitt barn foreach ($ this- > _children som $ Child). {$ string = $ Child > getTagXML (); } $ String = "< /". $ This- >. Snitt ">."; } Returnere $ string; }}
Trinn 6:. GetListColumns.php
Dette skriptet initialiserer økten hvis nødvendig, deretter tilbake kolonnene i hvilken rekkefølge og hva deres slag er
Først gjør vi en tilkobling til databasen og inkludere våre Tag klasse
require_once ('Tag.php.'); //Åpen kommunikasjon til databasen og tabellen for økter. $ con = mysql_connect ("localhost", "Your Name Logg inn", "passord"); if (! $ con) {die ('Kunne ikke koble til:'. mysql_error ()); } Mysql_select_db ("Your Database", $ con);
Logisk, er dette det første arrangementet som vil bli oppsagt når brukeren besøker siden med listen. Kolonner må være kjent før de kan hentes. Med denne forutsetningen, den første delen av koden omhandler initialisering Standardlisten alternativene i Session bordet og tildele en cookie til denne brukeren.
//Det blir ingen cookie for økten hvis dette er deres første gang på siden . if (! array_key_exists ("økt", $ _ COOKIE)) {//Siden de ikke har en cookie satt ennå, og dette er den første php samtalen, vil vi sette opp noen informasjonsmøte for dem. $ _COOKIE ['Session'] = md5 (time ()); setcookie ("økt", $ _ COOKIE ['session']); //Det er flere elementer som jeg vil sette opp som standard her for listen. //oppretter standardkolonnerekkefølgen mysql_query (sprintf ("INSERT INTO Session (sessionId, Navn, Verdi) VERDIER ('% s', '% s', '% s')", $ _ COOKIE ['session'], ' ColumnOrder ',' navn, alder, skole ')); //oppretter standard kolonne sort, dette er en kommaseparert streng som er 12:59 med kolonne for mysql_query (sprintf ("INSERT INTO Session (sessionId, Navn, Verdi) VERDIER ('% s', '% s', ' % s ') ", $ _ cookie [' session '],' SortOrders ',' navn ')); mysql_query (sprintf ("INSERT INTO Session (sessionId, Navn, Verdi) VERDIER ('% s', '% s', '% s')", $ _ cookie ['session'], 'SortDirections', 'stigende') ); //oppretter standardsiden for personsøkeren mysql_query (sprintf ("INSERT INTO Session (sessionId, Navn, Verdi) VERDIER ('% s', '% s', '% s')", $ _ COOKIE ['session'] «ListPage ',' 1 ')); }
Nå får vi kolonnene som skal vises. Vi vet på dette punktet at vi har en økt og økt variabler for denne listen.
//Nå er det garantert at brukeren vil ha en session cookie, samt standardlisten minst, så vi bruker databasen til For kolonnen //avgjøre. $ dbResult = mysql_query (sprintf ("SELECT verdi fra Session WHERE navn = 'ColumnOrder' og sessionId = '% s'", $ _ COOKIE ['session'])); $ retur = new Tag ('node'); $ kolonner = $ retur > addChild (ny Tag ('søyler')); //generiske sløyfe mens (rad $ = mysql_fetch_array ($ dbResult)) {$ Columna = eksplodere (',', $ row ['Value']); foreach ($ Columna som $ kolonne) {$ columns- > addChild (ny Tag ('kolonne', array ('header' = > $ kolonnen 'data' = > $ kolonnen 'bredde' = > ' 200 '))); }} Mysql_close ($ con); print ('? < xml version = "1.0" encoding = "UTF-8" >?' $ retur-> getTagXML ().);
Trinn 7: listLoad.php
Dette Manuset er hva som vil returnere de faktiske dataene for Datagrid
Først må vi en tilkobling til databasen og inkludere våre Tag klasse
require_once ('Tag.php');.. try {$ hodet = ny Tag ('elementer'); //Åpen kommunikasjon til databasen og tabellen for økter. $ con = mysql_connect ("localhost", "Your Name Logg inn", "passord"); if (! $ con) {die ('Kunne ikke koble til:'. mysql_error ()); } Mysql_select_db ("Your Database", $ con);
Vi skaper spørring basert på verdier fra økten tabellen. Nemlig den aktuelle siden og sorterings paramenters nødvendig.
//Satt opp hvordan å søke basert på lagrede session variabler //få start posten, forutsatt at 5 poster per side. $ dbResult = mysql_query (sprintf ("SELECT verdi fra Session WHERE navn = 'ListPage' og sessionId = '% s'", $ _ COOKIE ['session'])); $ side = (int) mysql_result ($ dbResult, 0); $ startRecord = $ side * 5 - 5; //få sorterings søyler og knytte til deres retning $ dbResult = mysql_query (sprintf ("SELECT verdi fra Session WHERE navn = 'SortOrders' og sessionId = '% s'", $ _ COOKIE ['session'])); $ order = eksplodere (',', mysql_result ($ dbResult, 0)); $ dbResult = mysql_query (sprintf ("SELECT verdi fra Session WHERE navn = 'SortDirections' og sessionId = '% s'", $ _ COOKIE ['session'])); $ retninger = eksplodere (',', mysql_result ($ dbResult, 0)); $ orderby = array (); for ($ i = 0; $ i < sizeof ($ rekkefølge); $ i ++) {$ orderby [] = $ orden [$ i] '. '$ retninger [$ i].; } $ Query = sprintf ('SELECT * FROM ExampleTable ORDER BY% s LIMIT% d, 5', implodere (',', $ orderby), $ startRecord);
Nå som vi har laget vår ønsket søkestrengen, vi få data og returnere det i XML form. Vi må også returnere ORDER BY parametre slik at det kan vises til brukeren på fronten
//spørre tabellen $ dbResult = mysql_query ($ query).; while (rad $ = mysql_fetch_array ($ dbResult)) {$ element = $ hode- > addChild (ny Tag ('element')); $ element-> addChild (ny Tag ('id', null, $ row ['recid'])); $ element-> addChild (ny Tag ('navn', null, $ row ['navn'])); $ element-> addChild (ny Tag ('Age', null, $ row ['Age'])); $ element-> addChild (ny Tag ('skole', null, $ row ['Skole'])); } $ Orden = $ hode- > addChild (ny Tag ('slags', null, implodere (',', $ orderby))); mysql_close ($ con); print ('<? xml version = "1.0" encoding = "UTF-8" >?'. $ hode- > getTagXML ());} catch (Exception $ e) {print ('Det var en feil som hindret prosessen fra å fullføre ');}
Trinn 8:. stepperMax.php
Dette skriptet er nødvendig for å fastslå det maksimale antall sider mulige for listen. Det returnerer maks sider, samt den aktuelle siden for visningsformål. For enkelhets skyld, er resultatet en streng formatert som "MAX, CURRENT"
Komplett script.
//Åpen kommunikasjon til databasen og tabellen for økter. $ con = mysql_connect ("localhost", "Your Name Logg inn", "passord"); if (! $ con) {die ('Kunne ikke koble til:'. mysql_error ()); } Mysql_select_db ("Your Database", $ con); //beregne det totale antall sider forutsatt 5 per side. $ query = sprintf ("SELECT COUNT (*) FROM ExampleTable"); $ dbResult = mysql_query ($ query); $ totalRecs = (float) mysql_result ($ dbResult, 0); $ maxPage = himling ($ totalRecs /5); $ page = 1; $ dbResult = mysql_query (sprintf ("SELECT verdi fra Session WHERE navn = 'ListPage' og sessionId = '% s'", $ _ COOKIE ['session'])); if ($ dbResult) {while (rad $ = mysql_fetch_assoc ($ dbResult)) {$ side = $ row ['Value']; }} Mysql_close ($ con); print ($ maxPage ',' $ side..);
Lufte
Dette brytes opp våre skript for å gjøre listen synlig i det hele tatt. De neste php filene er utelukkende for å oppdatere session informasjon basert på brukermedvirkning
Trinn 9:. StepperUpdate.php
Dette er den enkle skript som endrer verdien av "ListPage" session variabel. Dette skriptet kalles når stepper av listen er endret av brukeren. Det forutsetter også at det vil være en post parameter som heter "side" sendt fra fronten søknaden.
//Åpen kommunikasjon til databasen og tabellen for økter. $ con = mysql_connect ("localhost", "Your Name Logg inn", "passord"); if (! $ con) {die ('Kunne ikke koble til:'. mysql_error ()); } Mysql_select_db ("Your Database", $ con); //oppretter standard kolonne for $ query = sprintf ("UPDATE Session SET Verdi = '% s' WHERE sessionId = '% s' OG Name = 'ListPage'", $ _ POST ['side'], $ _ COOKIE ['session ']); if (mysql_query ($ query)) {print ("1"); } Else {print ("0"); } Mysql_close ($ con);
Trinn 10: SetColumnOrder.php
Dette er den enkle skript som endrer verdien av "ColumnOrder" session variabel. Dette skriptet kalles når brukeren endrer kolonnene rundt på fronten, og det forutsetter en Post variabel kalt "orden".
//Åpen kommunikasjon til databasen og tabellen for økter. $ con = mysql_connect ("localhost", "Your Name Logg inn", "passord"); if (! $ con) {die ('Kunne ikke koble til:'. mysql_error ()); } Mysql_select_db ("Your Database", $ con); //oppretter standard kolonne for $ query = sprintf ("UPDATE Session SET Verdi = '% s' WHERE sessionId = '% s' OG Name = 'ColumnOrder'", $ _ POST ['orden'], $ _ COOKIE ['session ']); if (mysql_query ($ query)) {print ("1"); } Else {trykke "0"; } Mysql_close ($ con);
Trinn 11: SetSort.php
Dette er enkelt script som endrer verdiene av de "SortOrders" og "SortDirections" session-variabler. Dette skriptet kalles når brukeren endrer den slags rundt på fronten. Det forutsetter en Post variabel kalt "orden" og en Post variabel kalt "retninger".
//Åpen kommunikasjon til databasen og tabellen for økter. $ con = mysql_connect ("localhost", "Your Name Logg inn", "passord"); if (! $ con) {die ('Kunne ikke koble til:'. mysql_error ()); } Mysql_select_db ("Your Database", $ con); //oppretter standard kolonne for $ query = sprintf ("UPDATE Session SET Verdi = '% s' WHERE sessionId = '% s' og navn = 'SortOrders'", $ _ POST ['orden'], $ _ COOKIE ['session ']); $ spørring2 = sprintf ("UPDATE Session SET Verdi = '% s' WHERE sessionId = '% s' og navn = 'SortDirections'", $ _ POST ['retningene'], $ _ COOKIE ['session']); if (mysql_query ($ query) og mysql_query ($ spørring2)) {print ("1"); } Else {trykke "0"; } Mysql_close ($ con);
/PHP
Som brytes opp alle PHP-skript for å sørge for den funksjonaliteten vi ønsker. For brukervennlighet, bør disse filene ligger i samme katalog som den siden som vil holde SWF og SWF selv. Jeg fikk ikke gå i for mye detalj som det er mange andre måter å få tilgang en database via php. Min endelige resultatet vil mest sannsynlig bare ha ett php script som kalles som kan tolke den type forespørsel og har en slags fabrikk klasse som bestemmer hva som skal settes eller returneres. For dette eksempelet som har kanskje bare vært overkill. Bare husk, vi forsøker å holde fronten så dum som vi kan. Jo mindre logikk det har å gjøre den bedre
Nå, endelig, har vi backend klar og vi kan starte med Flex
Trinn 12:.. Sette opp mapper i FlexBuilder
< p> I src mappen av prosjektet opprette en mappe som heter "css" og en mappe som heter "bilder"
Trinn 13:. lage bilder for Stepper Knapper
Du kan bare bruke generiske knapper , men siden vectortuts ga oss et fint utvalg av ikoner her: http://vector.tutsplus.com/articles/web-roundups/60-free-vector-icon-packs-for-design-professionals/vi kan bruke noen av disse. Jeg brukte for mitt eksempel melaktig ikonsett å få mine pilknappene. Jeg opprettet musen over ikonene ved bare å bruke en grå skjerm over det grønne og lagre det som sådan. Navnene jeg brukt er i CSS-filen vi skal diskutere nå. Bare husk, vi trenger et totalt ti ikoner; fem for ikonet, og fem like symboler for mouse hendelser
Trinn 14:.. longList.css
Dette er min css fil for visualisering av listen jeg skal lage
/* CSS fil * /nextButton {up-hud. Bygg ("images /next.png"); down-hud: Bygg ("images /nextover.png"); over-skin: Bygg ("images /nextover.png"); deaktivert-hud: Bygg ("images /next.png"); } .previousButton {up-skin: Bygg ("images /previous.png"); down-hud: Bygg ("images /previousover.png"); over-skin: Bygg ("images /previousover.png"); deaktivert-hud: Bygg ("images /previous.png"); } .lastButton {up-skin: Bygg ("images /last.png"); down-hud: Bygg ("images /lastover.png"); over-skin: Bygg ("images /lastover.png"); deaktivert-hud: Bygg ("images /last.png"); } .firstButton {up-skin: Bygg ("images /first.png"); down-hud: Bygg ("images /firstover.png"); over-skin: Bygg ("images /firstover.png"); deaktivert-hud: Bygg ("images /first.png"); } .reloadButton {up-skin: Bygg ("images /reload.png"); down-hud: Bygg ("images /reloadover.png"); over-skin: Bygg ("images /reloadover.png"); deaktivert-hud: Bygg ("images /reload.png"); }
Trinn 15: LongList.as
Opprett en ny Action klasse. Denne klassen vil være vår liste seg selv, så det utvider AdvancedDataGridClass. Jeg har forsøkt å kommentere koden som er nødvendig for ikke å bryte opp kilden. Ved å holde filene på roten vi ikke trenger å bekymre deg for pakke baner. I en virkelig verden innstilling jeg sterkt fraråder å gjøre dette som alle dine skriptfiler må være organisert i ulike kataloger.
Nøkkelen til å huske om denne klassen er at vi ikke egentlig legge mye til biblioteket som følger med Flex. Alt vi trenger å gjøre er å gi en AdvancedDataGrid muligheten til å fyre hendelser til serveren til å overføre informasjon, eller endre informasjon om økten. Selve brukergrensesnittet er ikke endret i det hele tatt.
Pakken {//filer å inkludere. import flash.events.Event; import mx.collections.ArrayCollection; import mx.collections.Sort; import mx.collections.SortField; import mx.collections.XMLListCollection; import mx.controls.AdvancedDataGrid; import mx.controls.Alert; import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn; import mx.events.AdvancedDataGridEvent; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.http.mxml.HTTPService; //Klasse for lister whos data er veldig lang og kan vare i flere sider av data. public class LongList strekker AdvancedDataGrid {//Tjenesten som laster kolonner private Var columnService: HTTPService; //Tjenesten som laster listen data private Var listService: HTTPService; //Tjenesten som setter kolonner orden. private Var columnOrderService: HTTPService; //Tjenesten som setter sorterer. private Var columnSortService: HTTPService; //Navn på skript sider for hver av tjenestene. private Var columnLoadURL: String = "GetListColumns.php"; private Var listLoadURL: String = "listLoad.php" private Var columnOrderURL: String = "SetColumnOrder.php" private Var columnSortURL: String = "SetSort.php" /* Klasse konstruktør. * /Public funksjon LongList () {//Ring moder konstruktør super (); this.percentWidth = 100; this.height = 150; this.horizontalScrollPolicy = "on"; this.verticalScrollPolicy = "on"; //Sett opp de ulike servicehendelser som kan skje. columnService = new HTTPService (); columnService.addEventListener (ResultEvent.RESULT, columnResultHandler); columnService.addEventListener (FaultEvent.FAULT, defaultResultFault); columnService.useProxy = false; columnService.resultFormat = "E4X"; listService = new HTTPService (); listService.addEventListener (ResultEvent.RESULT, listResultHandler); listService.addEventListener (FaultEvent.FAULT, defaultResultFault); listService.useProxy = false; listService.resultFormat = "E4X"; listService.url = this.listLoadURL; columnOrderService = new HTTPService (); columnOrderService.addEventListener (ResultEvent.RESULT, columnOrderResult); columnOrderService.addEventListener (FaultEvent.FAULT, defaultResultFault); columnOrderService.useProxy = false; columnOrderService.resultFormat = "text"; columnOrderService.method = "Post"; columnOrderService.url = this.columnOrderURL; columnSortService = new HTTPService (); columnSortService.addEventListener (ResultEvent.RESULT, columnSortResult); columnSortService.addEventListener (FaultEvent.FAULT, defaultResultFault); columnSortService.useProxy = false; columnSortService.resultFormat = "text"; columnSortService.method = "Post"; columnSortService.url = this.columnSortURL; } /* Funksjon som sender tjeneste å laste kolonnene for listen. * /Public funksjons loadColumns (): void {columnService.url = this.columnLoadURL + '? Rand =' + Math.random (); columnService.send (); } /* Funksjon som sender tjeneste å laste listeelementer. Dette må gjøres etter at kolonner har blitt lastet. * /Public funksjon loadList (): «rand = 'void {listService.url = this.listLoadURL + + Math.random (); listService.send (); } /* Den handler for når et resultat kommer tilbake fra å be kolonnene. Jeg antar strukturen i XML. * /Private funksjon columnResultHandler (event: ResultEvent): void {this.columns = []; Var ac: ArrayCollection = new ArrayCollection (); for hver (var element: XML i event.result.columns.children ()) {var kolonne: AdvancedDataGridColumn = new AdvancedDataGridColumn (); column.headerText = item.attribute ("header"); column.dataField = item.attribute ("data"); column.width = item.attribute ("width"); ac.addItem (kolonne); } This.columns = ac.toArray (); //nå som vi vet kolonnene laste listen for å matche. this.loadList (); } /* Resultat behandleren når et svar blir returnert fra serveren en vellykket kolonne endre rekkefølgen for. Ingenting må gjøres på den fremre enden med mindre respons er ikke en "1" betyr suksess. * /Private funksjon columnOrderResult (event: ResultEvent): void {if (! Event.result.toString () = "1") {Alert.show (". Det oppsto en feil under oppdatering økten variabel for denne tabellen"); }} /* Resultat behandleren når et svar blir returnert fra serveren når brukeren ønsker å sortere annerledes. * /Private funksjon columnSortResult (event: ResultEvent): void {if (event.result.toString () == "1") {this.loadList (); } Else {Alert.show ("Det oppsto en feil under oppdatering økten variabel for denne tabellen."); }} /* Den handler om når et svar (XML) er returnert fra serveren når den gjeldende siden liste returneres. Jeg antar XML struktur basert på PHP-koden er skrevet. * /Private funksjon listResultHandler (event: ResultEvent): void {var temp: XMLList = event.result.item som XMLList; Var resultatlisten: XMLListCollection = new XMLListCollection (); resultList.source = temp; resultList.sort = new Sorter (); resultList.sort.fields = new Array; //nå regne ut sorteringen. //Sorterings koden vil være som "Column Direction, COLUMN2 Direction2, etc" var sorter: Sorter = new Sort (); Var slags: String = event.result.sorts; //delt inn i en matrise der hvert element er kolonnen og at kolonnen retning Var sArray: Array = sorts.split (','); for hver (var sortString: String i sArray) {var iArray: Array = sortString.split (''); Var desc: Boolean; if (iArray [1] == "synkende") {desc = true; } Else {desc = false; } ResultList.sort.fields.push (ny SortField (iArray [0], sant, synkende)); } This.dataProvider = resultatlisten; } /* Handler for når brukeren klikker på en kolonneoverskrift for å endre sorteringsparametre for listen. Dette sender av tjenesten til å lagre de nye former. * /Beskyttet styringsfunksjon headerReleaseHandler (event: AdvancedDataGridEvent): void {super.headerReleaseHandler (event); Var colArray: Array = new Array (); Var dirArray: Array = new Array (); Var sortFields: ArrayCollection = new ArrayCollection (Sort (this.dataProvider.sort) .fields); for (var i: int, jeg < sortFields.length; i ++) {colArray.push (sortFields [i] .name); if (sortFields [i] .descending == true) {dirArray.push ("desc"); } Else {dirArray.push ("stigende"); }} Var parameter: Object = new Object (); parameter.order = colArray.toString (); parameter.directions = dirArray.toString (); import flash.events.MouseEvent; import mx.controls.Alert; import mx.rpc.events.ResultEvent; gå i stykker; }\t\t\t\t\tgå i stykker; }\t\t\t\t\tgå i stykker; gå i stykker;