Uploaded image for project: 'Isis'
  1. Isis
  2. ISIS-1616

Support URLs as a link / "As-is" HTML rendering

    Details

    • Type: New Feature
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 1.14.0
    • Fix Version/s: 1.15.1
    • Component/s: Core
    • Labels:
      None

      Description

      1. Clipboard01.png
        44 kB
        Andi Huber
      2. Clipboard02.png
        30 kB
        Andi Huber
      3. Clipboard03.png
        14 kB
        Andi Huber

        Activity

        Hide
        hobrom Andi Huber added a comment -

        It's great to see extensions such as this. However I would very much like to see a more generic approach: support for plain html rendering of Strings!

        The idea is to provide arbitrary html-markup to a (domain object's) String property, which then is rendered 'as is' by the ISIS framework.

        When (in 2016) I started to work on projects using ISIS, I was wondering why there is no such feature. I implemented my own value-type to compensate for it.

        To my surprise, this 'plain html rendering' integrates very well with ISIS, meaning there are no painful rendering issues. (see screenshots)

        Show
        hobrom Andi Huber added a comment - It's great to see extensions such as this. However I would very much like to see a more generic approach: support for plain html rendering of Strings! The idea is to provide arbitrary html-markup to a (domain object's) String property, which then is rendered 'as is' by the ISIS framework. When (in 2016) I started to work on projects using ISIS, I was wondering why there is no such feature. I implemented my own value-type to compensate for it. To my surprise, this 'plain html rendering' integrates very well with ISIS, meaning there are no painful rendering issues. (see screenshots)
        Hide
        hobrom Andi Huber added a comment -

        ... however, there are concerns:

        1) Sorting: how to provide meaningful sorting of markup text? Can maybe only done with value-types instead of Strings.
        2) Export: e.g. isis-module-excel ... how to provide a human-readable/textual representation of markup text? Same here: might require value-types instead of Strings.

        I apologize, if this is the wrong place for discussion.
        Keep up the good work!

        Show
        hobrom Andi Huber added a comment - ... however, there are concerns: 1) Sorting: how to provide meaningful sorting of markup text? Can maybe only done with value-types instead of Strings. 2) Export: e.g. isis-module-excel ... how to provide a human-readable/textual representation of markup text? Same here: might require value-types instead of Strings. I apologize, if this is the wrong place for discussion. Keep up the good work!
        Hide
        danhaywood Dan Haywood added a comment -

        Hi Andi,

        is there any code you could share re: this interesting idea of "as-is" HTML ?

        Thx
        Dan

        Show
        danhaywood Dan Haywood added a comment - Hi Andi, is there any code you could share re: this interesting idea of "as-is" HTML ? Thx Dan
        Hide
        hobrom Andi Huber added a comment - - edited

        Congrats on the 1.15. release!

        I finally managed to add PR #84
        https://github.com/apache/isis/pull/84/files

        This does not directly solve the initial 'URLs as a link' feature, but it can be easily mimicked with the new Markup class:

        @Getter @Setter @Property
        private String location;
        
        public Markup getUrl() {
        	return new Markup("<a href=\""+location+"\">Link</a>");
        }
        
        Show
        hobrom Andi Huber added a comment - - edited Congrats on the 1.15. release! I finally managed to add PR #84 https://github.com/apache/isis/pull/84/files This does not directly solve the initial 'URLs as a link' feature, but it can be easily mimicked with the new Markup class: @Getter @Setter @Property private String location; public Markup getUrl() { return new Markup( "<a href=\" "+location+" \ ">Link</a>" ); }
        Hide
        hobrom Andi Huber added a comment - - edited

        Real world example of THUMBNAIL rendering.

        • We have the property logo to store an Image. ISIS provides upload and download via the UI.
        • With the new Markup value type, we may provide a (readonly) thumbnail preview (logoPreview), that we can use even in collection views (tables).

        (Don't mind the HtmlBuilder class, it simply does the HTML formatting.)

        // - LOGO
        	
        @PropertyLayout(labelPosition=LabelPosition.TOP, hidden=Where.ALL_TABLES)
        @Column(allowsNull="true") @Persistent(defaultFetchGroup="false") 
        @Getter @Setter private Blob logo;
        
        // - LOGO PREVIEW
        
        @NotPersistent	
        public Markup getLogoPreview(){
        	return new Markup(
        		Optional.ofNullable(getLogo())
        		.map(blob->new HtmlBuilder()
        				.img()._class("img-thumb-h24")._srcEmbed(getLogo().getMimeType().toString(), blob.getBytes()).endln()
        				.build().toString())
        		.orElse("-")
        		);
        }
        
        
        Show
        hobrom Andi Huber added a comment - - edited Real world example of THUMBNAIL rendering. We have the property logo to store an Image. ISIS provides upload and download via the UI. With the new Markup value type, we may provide a (readonly) thumbnail preview ( logoPreview ), that we can use even in collection views (tables). (Don't mind the HtmlBuilder class, it simply does the HTML formatting.) // - LOGO @PropertyLayout(labelPosition=LabelPosition.TOP, hidden=Where.ALL_TABLES) @Column(allowsNull= " true " ) @Persistent(defaultFetchGroup= " false " ) @Getter @Setter private Blob logo; // - LOGO PREVIEW @NotPersistent public Markup getLogoPreview(){ return new Markup( Optional.ofNullable(getLogo()) .map(blob-> new HtmlBuilder() .img()._class( "img-thumb-h24" )._srcEmbed(getLogo().getMimeType().toString(), blob.getBytes()).endln() .build().toString()) .orElse( "-" ) ); }
        Hide
        hobrom Andi Huber added a comment - - edited

        Real world example of rendering STATE labels with color.

        • We define an enum State with title, icon and color.
        • With the new Markup value type, we provide colored rendering of the state's title.
        • Colors are rendered both in forms and collection views (tables).
        // -- STATE ENUM WITH COLOR
        
        public static enum State {
        	pending("Pending Verification", "color: red;"), 
        	verified("verified", "color: green;"), 
        	;
        	
        	public final String title;
        	public final String icon;
        	public final String webStyle;
        	
        	private State(String title, String webStyle) { 
        		this.icon = name();
        		this.title=title;
        		this.webStyle=webStyle;
        	}
        	
        	public String html() {
        		return "<span style=\""+webStyle+"\">"+title+"</span>";
        	}
        }
        
        // -- VERIFICATION STATE PROPERTY
        
        @Persistent @Column(allowsNull="false")
        @Getter @Setter
        private State verificationState;
        
        @NotPersistent
        @PropertyLayout(hidden=Where.OBJECT_FORMS, named="Verification")
        public Markup getVerificationState(){
        	return new Markup(verificationState.html());
        }
        
        
        Show
        hobrom Andi Huber added a comment - - edited Real world example of rendering STATE labels with color. We define an enum State with title, icon and color. With the new Markup value type, we provide colored rendering of the state's title. Colors are rendered both in forms and collection views (tables). // -- STATE ENUM WITH COLOR public static enum State { pending( "Pending Verification" , "color: red;" ), verified( "verified" , "color: green;" ), ; public final String title; public final String icon; public final String webStyle; private State( String title, String webStyle) { this .icon = name(); this .title=title; this .webStyle=webStyle; } public String html() { return "<span style=\" "+webStyle+" \ ">" +title+ "</span>" ; } } // -- VERIFICATION STATE PROPERTY @Persistent @Column(allowsNull= " false " ) @Getter @Setter private State verificationState; @NotPersistent @PropertyLayout(hidden=Where.OBJECT_FORMS, named= "Verification" ) public Markup getVerificationState(){ return new Markup(verificationState.html()); }
        Hide
        hobrom Andi Huber added a comment - - edited

        To summarize, screenshots representing the given examples:

        However, there is still an unsolved issue:

        The ISIS Excel Add-on, that allows export/download of collections (of domain objects) will generate cell values for this Markup, that contain the plain html which is not an appropriate text representation of the Markup's content.

        Possible solution:

        • provide an explicit asText() method in Markup, that returns a String representing the HTML content in textual format
        • use automated HTML to Text conversion as default
        • let the Excel Add-on use the asText() method on values of type Markup
        Show
        hobrom Andi Huber added a comment - - edited To summarize, screenshots representing the given examples: Thumbnails and HTML Links Clipboard01.png Arbitrary HTML within Collection View Clipboard02.png Colored State Clipboard03.png However, there is still an unsolved issue: The ISIS Excel Add-on, that allows export/download of collections (of domain objects) will generate cell values for this Markup, that contain the plain html which is not an appropriate text representation of the Markup's content. Possible solution: provide an explicit asText() method in Markup, that returns a String representing the HTML content in textual format use automated HTML to Text conversion as default let the Excel Add-on use the asText() method on values of type Markup
        Hide
        hobrom Andi Huber added a comment -

        Finally and to conclude for today:

        The proposed Markup value type might contradict the Naked Objects paradigm:

        • In terms of the (Problem-) Domain, Markup (as a value type) has no meaningful interpretation like other value-types such as Date, Money or Color.
        • Markup is more a presenting tool, which is applicable only within HTML rendering contexts.

        So from this perspective, the whole idea with Markup as presented here including PR #84 is questionable.

        Please feel free to comment on this!

        Show
        hobrom Andi Huber added a comment - Finally and to conclude for today: The proposed Markup value type might contradict the Naked Objects paradigm: In terms of the (Problem-) Domain, Markup (as a value type) has no meaningful interpretation like other value-types such as Date, Money or Color. Markup is more a presenting tool, which is applicable only within HTML rendering contexts. So from this perspective, the whole idea with Markup as presented here including PR #84 is questionable. Please feel free to comment on this!
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 09d46bdf48043c2fa52623fe996af6baa028d9c8 in isis's branch refs/heads/pr-84 from Dan Haywood
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=09d46bd ]

        Merge branch 'ISIS-1616_pr-84'

        Show
        jira-bot ASF subversion and git services added a comment - Commit 09d46bdf48043c2fa52623fe996af6baa028d9c8 in isis's branch refs/heads/pr-84 from Dan Haywood [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=09d46bd ] Merge branch ' ISIS-1616 _pr-84'
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 09d46bdf48043c2fa52623fe996af6baa028d9c8 in isis's branch refs/heads/master from Dan Haywood
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=09d46bd ]

        Merge branch 'ISIS-1616_pr-84'

        Show
        jira-bot ASF subversion and git services added a comment - Commit 09d46bdf48043c2fa52623fe996af6baa028d9c8 in isis's branch refs/heads/master from Dan Haywood [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=09d46bd ] Merge branch ' ISIS-1616 _pr-84'
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 2ba098ce91a1f3cd596cc3b65167f7a55050e240 in isis's branch refs/heads/master from Dan Haywood
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=2ba098c ]

        ISIS-1616: adds documentation and DataNucleus support

        Show
        jira-bot ASF subversion and git services added a comment - Commit 2ba098ce91a1f3cd596cc3b65167f7a55050e240 in isis's branch refs/heads/master from Dan Haywood [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=2ba098c ] ISIS-1616 : adds documentation and DataNucleus support
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 5ba685c1622bf74bc219f0949494cd81d24e68af in isis's branch refs/heads/master from Dan Haywood
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=5ba685c ]

        ISIS-1616: tidies up docs a little

        Show
        jira-bot ASF subversion and git services added a comment - Commit 5ba685c1622bf74bc219f0949494cd81d24e68af in isis's branch refs/heads/master from Dan Haywood [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=5ba685c ] ISIS-1616 : tidies up docs a little

          People

          • Assignee:
            danhaywood Dan Haywood
            Reporter:
            danhaywood Dan Haywood
          • Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development