fixed: displaying glyph icons (with GlyphIconElement / UiGlyphIconElement)

teamapps-client/ts/modules/util/UiGridTemplates.ts

@@ -118,7 +118,7 @@ function createGlyphIconElementRenderer(element: UiGlyphIconElementConfig, addit
 		if (value == null) {
 			return "";
 		} else {
-			return `<div data-key="${element.property}" class="grid-template-element UiGlyphIconElement fas fa-${value}" style="${style} ${backgroundColorCss} ${additionalCss}')"></div>`;
+			return `<div data-key="${element.property}" class="grid-template-element UiGlyphIconElement ${value}" style="${style} ${backgroundColorCss} ${additionalCss}"></div>`;
 		}
 	};
 }

teamapps-demo/pom.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.teamapps</groupId>
+        <artifactId>teamapps</artifactId>
+        <version>0.9.196-SNAPSHOT</version>
+    </parent>
+
+    <artifactId>teamapps-demo</artifactId>
+
+    <properties>
+        <maven.compiler.source>21</maven.compiler.source>
+        <maven.compiler.target>21</maven.compiler.target>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.teamapps</groupId>
+            <artifactId>teamapps-server-jetty-embedded</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.slf4j</groupId>
+            <artifactId>slf4j-simple</artifactId>
+            <version>2.0.16</version>
+        </dependency>
+        <dependency>
+            <groupId>org.slf4j</groupId>
+            <artifactId>slf4j-api</artifactId>
+            <version>2.0.16</version>
+        </dependency>
+        <dependency>
+            <groupId>org.teamapps</groupId>
+            <artifactId>teamapps-ux</artifactId>
+            <version>0.9.196-SNAPSHOT</version>
+        </dependency>
+    </dependencies>
+
+</project>

teamapps-demo/src/main/java/org/teamapps/GlyphIconDemoApp.java

@@ -0,0 +1,123 @@
+package org.teamapps;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.event.Event;
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.ux.application.ResponsiveApplication;
+import org.teamapps.ux.application.layout.ExtendedLayout;
+import org.teamapps.ux.application.perspective.Perspective;
+import org.teamapps.ux.application.view.View;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.format.SizeType;
+import org.teamapps.ux.component.format.SizingPolicy;
+import org.teamapps.ux.component.panel.Panel;
+import org.teamapps.ux.component.template.gridtemplate.GlyphIconElement;
+import org.teamapps.ux.component.template.gridtemplate.GridTemplate;
+import org.teamapps.ux.component.template.gridtemplate.TextElement;
+import org.teamapps.ux.component.tree.Tree;
+import org.teamapps.ux.model.TreeModel;
+import org.teamapps.ux.model.TreeModelChangedEventData;
+
+import java.util.List;
+import java.util.Map;
+
+public class GlyphIconDemoApp {
+
+    static final int GLYPHICON_WIDTH_IN_PIXEL = 19;
+
+    private final ResponsiveApplication responsiveApplication;
+    final private Component rootComponent;
+
+    private GlyphIconElement glyphIconElement1;
+    private GlyphIconElement glyphIconElement2;
+
+
+    public GlyphIconDemoApp() {
+        this.responsiveApplication = ResponsiveApplication.createApplication();
+        this.rootComponent = createRootComponent();
+    }
+
+    public Component getRootComponent() {
+        return rootComponent;
+    }
+
+    private Component createRootComponent() {
+        View view = View.createView( ExtendedLayout.LEFT, MaterialIcon.HELP, "GlyphIcon-Demo", createPanel() );
+        view.setVisible( true );
+
+        Perspective perspective = Perspective.createPerspective();
+        perspective.addView( view );
+
+        responsiveApplication.addPerspective( perspective );
+        responsiveApplication.showPerspective( perspective );
+
+        return responsiveApplication.getUi();
+    }
+
+    Component createPanel() {
+        glyphIconElement1 = createIconElement( "iconClock", 0 );
+        glyphIconElement2 = createIconElement( "iconArrowLeft", 1 );
+
+        glyphIconElement1.setBackgroundColor( Color.ALICE_BLUE );
+        glyphIconElement2.setBackgroundColor( Color.MATERIAL_LIME_50 );
+
+        Tree<String> tree = new Tree<>( new Model() );
+        tree.setVisible( true );
+        tree.setEntryTemplate( createGridTemplate() );
+        tree.setPropertyProvider( getPropertyProvider() );
+
+        Panel panel = new Panel();
+        panel.setContent( tree );
+
+        return panel;
+    }
+
+    private GlyphIconElement createIconElement( String propertyName, int columnGridStartIndex ) {
+        // ToDo The fontColor argument of the constructor has no effect!
+        return new GlyphIconElement( propertyName, 0, columnGridStartIndex, GLYPHICON_WIDTH_IN_PIXEL, Color.RED );
+    }
+
+    private GridTemplate createGridTemplate() {
+        GridTemplate template = new GridTemplate();
+        template
+            .addColumn( new SizingPolicy( SizeType.FIXED, 30.0f, 40 ) )
+            .addColumn( new SizingPolicy( SizeType.FIXED, 30.0f, 40 ) )
+            .addColumn( new SizingPolicy( SizeType.AUTO, 1.0f, 200 ) )
+            .addRow( SizeType.AUTO, 1.0f, 40, 0, 0 )
+            .addElement( glyphIconElement1 )
+            .addElement( glyphIconElement2 )
+            .addElement( new TextElement( "textField", 0, 2 ) );
+        return template;
+    }
+
+
+    private PropertyProvider<String> getPropertyProvider() {
+        return (protocolEntry, propertyNames) -> Map.of (
+            "iconArrowRight", "glyphicon glyphicon-circle-arrow-right",
+            "iconArrowLeft", "glyphicon glyphicon-circle-arrow-left",
+            "iconClock", "glyphicon glyphicon-time",
+            "textField", "   These GlyphIcons are ... " +
+                                 "<br> a) NOT DISPLAYED CORRECTLY if TeamApps 0.1.195 is used (or older)  " +
+                                 "<br> b)     DISPLAYED CORRECTLY if TeamApps 0.1.196-SNAPSHOT (fix from fork HFreudenmann/ta-hf) is used)." );
+    }
+
+
+
+    private class Model implements TreeModel<String> {
+        @Override
+        public Event<Void> onAllNodesChanged() {
+            return new Event<>();
+        }
+
+        @Override
+        public Event<TreeModelChangedEventData<String>> onChanged() {
+            return new Event<>();
+        }
+
+        @Override
+        public List<String> getRecords() {
+            return List.of( "Line 1", "Line 2", "Line 3" );
+        }
+    }
+}

teamapps-demo/src/main/java/org/teamapps/Main.java

@@ -0,0 +1,27 @@
+package org.teamapps;
+
+import org.teamapps.server.jetty.embedded.TeamAppsJettyEmbeddedServer;
+import org.teamapps.ux.component.rootpanel.RootPanel;
+import org.teamapps.webcontroller.WebController;
+
+public class Main {
+    public static void main( String[] args ) {
+        WebController controller1 = sessionContext -> {
+            GlyphIconDemoApp demoApp = new GlyphIconDemoApp();
+
+            RootPanel rootPanel = new RootPanel();
+            rootPanel.setContent( demoApp.getRootComponent() );
+
+            sessionContext.addRootPanel(null, rootPanel );
+        };
+
+        try {
+            TeamAppsJettyEmbeddedServer.builder( controller1 )
+                .setPort( 8080 )
+                .build()
+                .start();
+        } catch ( Exception e ) {
+            throw new RuntimeException( e );
+        }
+    }
+}