{"id":125,"date":"2014-07-16T22:47:10","date_gmt":"2014-07-16T20:47:10","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=125"},"modified":"2025-04-17T11:45:22","modified_gmt":"2025-04-17T09:45:22","slug":"migration-von-flex-zu-angularjs","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/migration-von-flex-zu-angularjs\/","title":{"rendered":"Migration von Flex zu AngularJS"},"content":{"rendered":"

Aus der Perspektive eines Entwicklers, der das Vergn\u00fcgen hat mit AngularJS Anwendungen zu entwickeln, wirkt Flex wie eine Technologie aus der Steinzeit; flash basiert, uah. Doch noch vor ein paar Jahren waren HTML, CSS und JavaScript noch nicht soweit um damit in vertretbarem Aufwand Business-Anwendungen zu entwickeln. Was blieb also als Alternative zu nativen Rich-Clients? Richtig: Flex. Features wie Data-Bindin, deklarative UI und Model-View-Controller sind aus AngularJS heute bestens bekannt, waren gerade im JavaScipt Umfeld fr\u00fcher jedoch nicht anzutreffen. Kurz gesagt: Flex hatte zu seiner Zeit eine Menge zu bieten und durch den hohen Verbreitungsgrad des Flash-Players war es als Framework f\u00fcr Business-Anwendungen eine gute Wahl.<\/p>\n

Doch die Zeiten haben sich ge\u00e4ndert. Der Flash-Player verliert durch die Verbreitung mobiler Endger\u00e4te und durch das st\u00e4ndige Bekanntwerden von Sicherheitsl\u00fccken immer weiter an Bedeutung. Die standardisierten und offenen Web-Technologien sowie die Browser haben sich rasant weiter entwickelt. Auch wenn im Business-Bereich der Lebenszyklus einer Anwendung oft 5 Jahre und mehr betr\u00e4gt, so ist es doch an der Zeit f\u00fcr die n\u00e4chste Generation vorbereitet zu sein.<\/p>\n

Bei einer Flex-Anwendung hat man bereits eine \u00e4hnliche Architektur wie bei einer modernen Anwendung mit AngularJS. Man hat einen Server, der das Frontend ausliefert, das danach komplett im Client l\u00e4uft. Der Server ist dann nur noch daf\u00fcr zust\u00e4ndig Daten zu liefert und entgegen zu nehmen, z.B. per REST Schnittstelle. Durch die saubere Trennung von Front- und Backend ist es meist deutlich einfacher das Frontend auf eine neue Technologie zu portieren als es Frameworks, die das Frontend auf dem Server berechnen, wie beispielsweise JSF, m\u00f6glich w\u00e4re. Trotzdem ist eine vollst\u00e4ndige Portierung h\u00e4ufig sehr aufw\u00e4ndig und damit zu teuer. Was bleibt um in den Genuss neuer Technologien und damit neuer M\u00f6glichkeiten zu kommen ist eine teilweise bzw. schrittweise Portierung.<\/p>\n

Eine solche Portierung haben wir bei WeigleWilczek<\/a> letztes Jahr durchgef\u00fchrt. Im Zuge dessen brauchten wir eine M\u00f6glichkeit die alte Flex-Anwendung in die neue AngularJS-Anwendung einzubetten um Teile der Flex-Anwendung wieder- bzw. weiter verwenden zu k\u00f6nnen. Die daraus entstandene Komponente haben wir als AngularJS Modul w11k-flash<\/a> bei GitHub als OpenSource ver\u00f6ffentlicht.<\/p>\n

Kommunikation JavaScript und Flash\/Flex<\/h2>\n

Ein in eine Website eingebundenes Flash\/Flex kann mit der Website bidirektional kommunizieren. Vom Flex aus k\u00f6nnen globale JavaScript Funktionen aufgerufen werden (Funktionen am window Objekt). Ebenso k\u00f6nnen von JavaScript aus Funktionen in der Flex-Anwendung aufgerufen werden. Daf\u00fcr m\u00fcssen diese aber zun\u00e4chst registriert werden.
\nDer Einstiegspunkt f\u00fcr diese Kommunikation innerhalb der Flex-Anwendung ist das Objekt ExternalInterface<\/code>. \u00dcber ExternalInterface.addCallback(name, func)<\/code> k\u00f6nnen Funktionen f\u00fcr JavaScript bekannt gemacht werden. \u00dcber ExternalInterface.call(name, parameter)<\/code> werden Funktionen im JavaScript aufgerufen.
\nIm JavaScript Code kann man an dem DOM-Element des Flashs die registrierten Funktionen der Flex-Anwendung direkt aufrufen.<\/p>\n

HTML Grundger\u00fcst<\/h2>\n

Im Prinzip haben wir eine neue AngularJS-Anwendung entwickelt, die an noch nicht protierten Stellen ein Flash anzeigt. Dieses Flash ist eine neue Flex-Anwendung, die die Inhalte der alten Flex-Anwendung verwendet. Die neue Flex-Anwendung zeigt dabei aber nur Inhalt und keine Navigation an. Die Navigation findet \u00fcber die AngularJS-Anwendung statt und die neue Flex-Anwendung wird von AngularJS informiert welcher Inhalt angezeigt werden soll. Das Umschalten der Inhalte innerhalb der Flex-Anwendung funktioniert wie gewohnt \u00fcber States, nur dass diese eben von au\u00dfen aktiviert werden. So ist es m\u00f6glich zun\u00e4chst die neue Grundstruktur anzulegen und dann schrittweise die Inhalte zu portieren.<\/p>\n

\n\"Angular\n<\/picture>\n<\/a><\/p>\n

w11k-flash<\/a><\/h2>\n

Beim Einbetten, Ein- und Ausblenden des Flashs, Umschalten der Inhalte usw. ergeben sich einige Schwierigkeiten.<\/p>\n