Results 1 to 6 of 6

Thread: Webmobile app, show cart and badge with items

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #2
    Join Date
    Jul 2009
    Location
    Wiesbaden, Germany
    Posts
    214

    Default Re: Webmobile app, show cart and badge with items

    We had something a bit similar, a calendar symbol that showed for how many events you where registered.
    We used an SVG image for that, because you can actually modify those with just javascript.
    I attached our SVG image, so you can check it out; you'll have to rename it to ".svg" to view the image itself, since I can't seem to upload a SVG file here .
    You can basicaly give certain lines and texts ids in an SVG image, which you can address in the javascript. SVG images are basicaly just text files, so you can edit and view them with any text editor, or an image viewer, to see the image itself.

    The javascript we use to edit our SVG image looks like this:
    Code:
    function SVGModifizieren(i1, i2) {
        try{
        if (document.getElementById("EventsKalender")!="undefined" && document.getElementById("EventsKalender")!=null) {
            if (document.getElementById("EventsKalender").querySelector("object")!="undefined" && document.getElementById("EventsKalender").querySelector("object")!=null) {
                document.getElementById("EventsKalender").querySelector("object").getSVGDocument().getElementById("ZahlLinksText").textContent=i1;
                document.getElementById("EventsKalender").querySelector("object").getSVGDocument().getElementById("ZahlRechtsText").textContent=i2;
                if (i1>0) {
                    document.getElementById("EventsKalender").querySelector("object").getSVGDocument().getElementById("ZahlLinksText").setAttribute("fill","orange");
                    document.getElementById("EventsKalender").querySelector("object").getSVGDocument().getElementById("ZahlLinksKreis").setAttribute("stroke","orange");
                }
                if (i2>0) {
                    document.getElementById("EventsKalender").querySelector("object").getSVGDocument().getElementById("ZahlRechtsText").setAttribute("fill","green");
                    document.getElementById("EventsKalender").querySelector("object").getSVGDocument().getElementById("ZahlRechtsKreis").setAttribute("stroke","green");
                }
            }
        }
        }
        catch(err) {}
    }
    You'll propably have to try a bit to get the right object in the SVG file, but it's possible.
    We have a text section with ids (ZahlLinksText/ZahlRechtsText) which we can simply set the textContent to whatever we want.

    That javascript function can then be called by the DataFlex WebApp with a 'Send ClientAction "SVGModifizieren" saParams'.
    Attached Files Attached Files

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •