Deze week, naar aanleiding van een bericht op de mailinglijst van Made in Flex , herinnerde ik me een van de eerste toepassingen in Flex deed twee jaar geleden, die ik uiteengezet om die code te halen, schoon van overbodige dingen en publiceren. Ik laat ook een link naar een post van mij op de lijst Flexcoders waarin uitgelegd hoe het te doen, is in feite een heleboel mensen die, uit die post, schreef ik vraag informatie geweest.

Voor puristen, vooraf worden gewaarschuwd dat er mogelijk dingen die niet goed werken, vreemde code en duizend verhalen, is een code die is twee jaar, indien gij goed deze dagen zult u zien dat slechts twee jaar oud Flex2. Ja, ben ik begonnen met de eerste bèta van die versie. Alles wat ik deed was te creëren in Flex3 en laat de applicatie om het er schoon operatie. Als je gaat laat me een opmerking te zeggen dat dit of dat niet goed werkt, kunt u ahorrárosla.

Als een foto zegt meer dan duizend woorden, hier is het voorbeeld en de broncode van het hele project.

Al diegenen die op een gegeven moment kwam het aan ons om Flex te gebruiken om een content management systeem dat we komen met een ernstig probleem in de voorkant te maken: het ideaal onderdeel om inhoud te schrijven en bij te werken, RichTextEditor, NO kan, bij verstek, afbeeldingen invoegen, met die praktisch verliest zijn nut. Graven in de hulp, echter, besef je dat tussen de HTML-tags worden ondersteund door de component Textarea is <IMG>, die, a priori, niets zou voorkomen dat een afbeelding invoegen. Inderdaad zo is, en dat dit hele artikel is gebaseerd / project. Een belangrijk detail is dat het gebruik van beelden is niet goed bereikt in de Flash Player zelf, dat als we beginnen om afbeeldingen toe te voegen en te verwijderen zal een tijd komen dat alles instabiel zal zijn en zal vreemde dingen textarea.

Het project is gebaseerd op twee componenten, in uw tekstverwerker en een bestand browser. Van de redactie een beeld knop Insert dat een browser zal openen voor de desktop-stijl besturingssysteem dat de bestanden die je hebt op de server en kan uploaden en verwijderen zal tonen zal hebben. De logica van de browser met de server Ik verwijderde het meest, waardoor er slechts een statisch XML-lijst de mappen en afbeeldingen beschikbaar. Om goed te doen zou je doen met een script vergelijkbaar met deze, maar dat laat zien wat eigenlijk had op een route vanaf uw server.

Onze teksteditor

Ik probeer hoe het hele proces uit te leggen, maar het was al geruime tijd dus het is mogelijk vergeet ik een aantal details.

Het idee was om een geavanceerde editor te maken, met ontbrekende functies om de oorspronkelijke RichTextEditor:

• Afbeeldingen invoegen.
• Mogelijkheid om gegevens in tabelvorm voegen (tabellen niet willen dat).
• Verander de achtergrondkleur van de editor, bijvoorbeeld op tekst in wit.
• Verwijder alle tekst (en afbeeldingen).
• Geavanceerde editor koppelingen.
• Knop save tekst (plaats deze in uw database)

We beginnen met een RichTextEditor dat we vooraf gedefinieerde knop Link toevoegen en voeg onze nieuwe knoppen doen. Naar aanleiding van de code te begrijpen wat ze doen, dus richten we ons op het beeld dat is het onderwerp van het artikel. Eerste wat de gegevens in tabelvorm knop ik uitleggen. Het is heel simpel. Als we wilden, in de RichTextEditor, maak een tabel van waarden met de tab, we konden, en dat tabblad te drukken zou Textarea richten van schrijven en zou, bij verstek, de bron selector. Om een knop toe te voegen aan alles wat het doet fix is het toevoegen van een tab-teken (\ t) in de tekst, zodat je dat als gegevens in tabelvorm perfect vinden. Zeer handige truc.

Laten we naar beelden knop te voegen. De knop, zoals hierboven uitgelegd, opent u het bestand browser popup, zodat dit deel zullen we zien in de volgende paragraaf. Toen in de browser selecteert u de afbeelding in te voegen zij de controle terug naar de editor en het is dit dat het beeld toevoegt. Om de afbeelding ingevoegd in de cursorpositie <IMG> met de vereiste parameters toe te voegen. Blijkbaar niet meer truc, maar als je begint te proberen dingen die we beseffen dat ja het heeft.

Om te beginnen, als we blijven dit RichTextEditor htmlText in de database en dan proberen te herstellen ontvangen een nare XML validatie fout. Ik wil allereerst duidelijk te maken, dat deze fout er met mij gebeurd toen, misschien, hopelijk, de nieuwste versie van Flex u hebt opgelost, bespaart u een hoop ellende. De oorzaak van de mislukte validatie was dat intern, maar je añadieses een tag <img… /> (of <img…> </ img>) geldig is, de editor zal altijd terugkeren <img .. >, Ie de XML zonder sluiting, die sprong naar validatiefout herladen. Om dit probleem op te lossen hebben we een methode desProcesaTexto dat het wordt omgezet alle tags <img..> ongeldig geldige tag, die we het eerste probleem hebben opgelost. Met behulp van reguliere expressies is uiterst eenvoudig.

Tweede probleem. Zodra u een afbeelding invoegen, hoe kunnen we het te verwijderen of aan te passen? Hier komt het lastige deel. Het idee, in principe, is een link naar elk beeld toe te voegen, zodat wanneer je er op klikt een popup die ons in staat stelt om de afbeelding te verwijderen of te wijzigen zijn attributen openen we. Dit creëert een ander nadeel. Als we willen de inhoud van het tekstveld om de database op te slaan herstellen moeten deze valse koppelingen toegevoegd aan de user interface te elimineren, maar we willen niet te verlaten wanneer de weergave van de tekst. Daarentegen, bij het plaatsen van tekst uit de database attributen moeten afbeeldingen verwerken Voeg deze link en we kunnen werken ermee.

Zoals te zien in de code, bucamos alle tags <IMG> en, ervan uitgaande dat alle eerdere <A> hebben een tag, vervangt u de volledige <A> knoop door <IMG> en al naargelang, makkelijker dan het klinkt Als je eenmaal begrijpt de procedure.

Om deze functies te zien elke keer als we wijzen de tekst op het onderdeel of elke keer als ik terug te krijgen, hebben we de volgende methoden:

Niet veel meer uit te leggen. Een detail zullen we zien hoe procesaríamos <IMG> labels bij het laden van een nieuwe tekst in de component. Het idee, in principe, is de link die ons in staat stelt om het te veranderen toe te voegen, maar deze verbinding nodig heeft om de details van de afbeelding (src, breedte, hoogte ..) weten.

Single.

De File Browser

De File Browser is een component nogal resultón dat als je een beetje werkt, kunt u veel taken op te lossen. Zelfde als Windows File Explorer, liet u een mapstructuur en rechts bestanden in de geselecteerde map en de details. Boven hebben we nieuwe knoppen om bestanden te uploaden en nieuwe mappen maken (de logica van deze knoppen is aan u) en, bovenal, een combo om de manier waarop je bestanden te bekijken, zodat u de lijst met de zelfde of miniaturen kunt zien veranderen. Ja, ziet u een miniatuurafbeelding geeft daarvan, perfect voor onze redactie. Ik zal niet meer met de operatie aansluiten omdat de broncode is alles wat je nodig hebt. Het interessante evenement wordt dubbelklikt op een bestand, het controle terug naar een nieuw venster waarin u de parameters van de afbeelding in te voegen kunt configureren. Met het voorbeeld dat je zult begrijpen.

In je editor moet de juiste methoden op de server naar de lijst mappen en bestanden in uw upload directory als je wilt dat alles dynamisch te zijn en de gebruiker kan bestanden ordenen op uw eigen.

Zoals hij zei had, was ik niet zo expliciet in het verleden. Als u problemen aarzel dan niet om een ​​reactie achter te laten en ik zal proberen op te lossen zo snel mogelijk.

Hier is het voorbeeld en de broncode van het hele project.