Bei Xebia India hatten wir eine Flex-Schulung, und das gab mir die Gelegenheit, mich näher mit dieser neuen, aufsehenerregenden Technologie zu beschäftigen. Während dieser Lernphase stieß ich auf ein kostenloses Online-Tool, das von Adobe Flex bereitgestellt wird, um CSS für Ihre Flex-Anwendung zu erstellen. Es ist keine vollwertige Anwendung, die alle in Flex vorhandenen Komponenten abdeckt, aber mit dem minimalen Material an Bord vermittelt es Ihnen genug Wissen, um das CSS für alle anderen Komponenten zu erweitern. Einige der beeindruckenden Teile dieses Tools sind
- Sein frei
- Es ist online, also keine Installation erforderlich
- Verdammt schnell
- Und die Auswirkungen jeder Änderung, die Sie vornehmen, sind im selben Moment sichtbar, genau wie bei Desktop-Anwendungen. Ich denke, das ist es, was Flex am besten kann.
Der Name dieses Tools ist Flex Style explorer. Der Flex-Explorer ermöglicht es Ihnen, mit Komponenten zu interagieren und sie visuell zu verändern. Vor allem aber ist es ein effektives Entwicklungstool, mit dem Sie CSS innerhalb der Website erstellen und dann in Ihre Anwendung kopieren können. Unten sehen Sie, wie dieses Tool aussieht
Wie Sie sehen können, ist die Anwendung in vier Teile unterteilt. Der erste ist das Komponenten-Panel, der zweite ist die Stilkontrolle, der dritte ist die Sandbox und der vierte ist das CSS-Panel, in dem das CSS automatisch generiert wird. Ein weiterer Punkt, der mir an diesem Tool gefallen hat, ist, dass es dem Konzept der Lieferkette ähnelt. Sie geben Ihre Eingaben im linken Bereich ein, führen Ihre Änderungen im nächsten Bereich aus, testen sie im dritten Bereich und erhalten die Ergebnisse im letzten Bereich. Sie haben jeden einzelnen Schritt vor Augen, so dass Sie alle Änderungen sehen können, ohne dass sie neu geladen werden müssen oder irgendeine Art von Wartezeit entsteht, was die Entwicklung wirklich schnell macht. Lassen Sie uns jedes Panel dieses Tools näher betrachten Komponenten-Panel Komponenten wie Steuerelemente, Layouts, Diagramme usw. sind die eigentlichen Objekte, für die wir CSS verwenden werden. Daher müssen wir vor der Erstellung von CSS die Komponente auswählen, für die wir CSS erstellen möchten. Sie können eine beliebige Komponente aus der Liste der Komponenten auswählen, die sich im Komponentenbereich auf der linken Seite der Anwendung befindet und auch unten angezeigt wird.
Um es deutlicher zu machen, habe ich ein Beispiel für den Accordion Navigator genommen, der in der obigen Abbildung ausgewählt ist. Style Control Wenn Sie also mit mir sind und wir an derselben Komponente arbeiten, nämlich dem Accordion Navigator, dann ändert sich Ihr Style Control Panel, sobald Sie die Komponente auswählen, und sieht dann wie folgt aus
Alle Beschriftungen und die dazugehörigen Registerkarten und Steuerelemente, die Sie in der obigen Abbildung sehen, entsprechen einer CSS-Eigenschaft, die Sie nach Ihren Wünschen ändern können. Sandbox Wenn Sie jedes Attribut aktualisieren, wird der entsprechende Effekt in der Sandbox angezeigt. So haben Sie jede noch so kleine Änderung im Layout oder Farbschema direkt vor Augen.
In meinem Beispiel habe ich die Eigenschaften des Navigationslayouts in den Stilkontrollfeldern so geändert, dass es wie oben aussieht.
CSS-Codepalette
Unabhängig von den Änderungen, die Sie in der Stilsteuerung vorgenommen haben, und unabhängig von dem Ergebnis, das Sie in der Sandbox erzielt haben, wird der Code dafür weiterhin in der CSS-Palette generiert.
In meinem Fall wurde der Code wie folgt erstellt
Akkordeon {
headerHeight: 35;
highlightAlphas: 0.3, 0.18;
fillColors: #330000, #33cc66, #ff0000, #cc66cc;
selectedFillColors: #0033cc, #000066;
themeColor: #33ff99;
backgroundColor: #33cc99;
borderColor: #33ff00;
textRollOverColor: #330000;
textSelectedColor: #00cc00;
dropShadowEnabled: true;
shadowDistance: 5;
shadowDirection: right;
dropShadowColor: #000000;
headerStyleName: "myaccordionHeader";
}
.myaccordionHeader {
letterSpacing: 3;
textAlign: center;
fontSize: 9;
fontWeight: bold;
}
So, das ging verdammt schnell, und Sie haben ein wirklich gut aussehendes CSS-Panel vor sich liegen. Sie können es aus dem CSS-Panel kopieren und in Ihrer Anwendung so verwenden, wie ich es in diesem Blog eingefügt habe.
Styling der gesamten Anwendung
Es gibt noch einen weiteren Teil des Projekts, für den wir den Stil festlegen möchten, bevor wir das Styling in Flex Builder übernehmen. Sie können nicht nur die Flex-Komponenten gestalten, sondern auch die Anwendung als Ganzes. Dies ist das erste Element in der Liste auf der linken Seite. Wenn Sie Anwendung ausgewählt haben, können Sie Aspekte Ihres Projekts ändern, die sich auf das gesamte Projekt beziehen.
Verfasst von
Rupal Chawla
Contact