Path: csiph.com!aioe.org!news.mb-net.net!open-news-network.org!.POSTED.196.236.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: A simpler DOM in JS
Date: Mon, 05 Feb 2018 11:19:18 +0100
Organization: PointedEars Software (PES)
Lines: 104
Message-ID: <2311948.Lt9SDvczpP@PointedEars.de>
References: <fb9172c3-3151-46c7-815d-b4535c60fe7d@googlegroups.com> <3087438.QJadu78ljV@PointedEars.de> <20800614.6Emhk5qWAg@PointedEars.de> <1fcf518b-5771-46ba-885d-3565ece3ca42@googlegroups.com>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
Injection-Info: gwaiyur.mb-net.net; posting-host="196.236.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch:178.197.236.196"; logging-data="12172"; mail-complaints-to="abuse@open-news-network.org"
User-Agent: KNode/4.14.2
X-User-ID: U2FsdGVkX1/569gvNAu0b6Mtl7m3/UFbIekJkBn2oLqaABdnOl3SFQ==
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
Cancel-Lock: sha1:lBOj36Vj/VeCuOPxhDQ5h7pTz2I=
Xref: csiph.com comp.lang.javascript:34703

Michael Haufe (TNO) wrote:

> Thomas 'PointedEars' Lahn wrote:
>> [...]
>> Supplemental:
>> 
>>   1. Add 1 for equivalence :)
>> 
>>   2. Learning Android app development recently (again) has reminded me of
>>      a complementary approach: the possibility to maintain pure layout
>>      (XML) markup and create (widget) object( tree)s from it.
> 
> The ghost of XSLT+XML come back to haunt us?

You do not know what you are talking about.  XSLT rulez (see the FAQ).

But I was not referring to that.  Rather, in Android app development, XML 
layouts are “inflated” into widget object hierarchies.  For example:

    @Override
    public ArticleViewHolder onCreateViewHolder(ViewGroup viewGroup,
      int viewType) {
        Context context = viewGroup.getContext();
        int layoutIdForListItem = R.layout.selector_list_item;

        LayoutInflater inflater = LayoutInflater.from(context);
        boolean shouldAttachToParentImmediately = false;

        View view = inflater.inflate(layoutIdForListItem, viewGroup, 
          shouldAttachToParentImmediately);
        ArticleViewHolder viewHolder = new ArticleViewHolder(view);

        return viewHolder;
    }

Then there is a file res/layout/selector_list_item.xml that contains the 
layout for a list item.  It looks like this:

--------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Horizontal linear layout to create a contacts list item -->
    <LinearLayout android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:gravity="center_vertical">

        <!-- Person icon -->
        <ImageView
            android:id="@+id/personIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_person"
            android:paddingRight="4dp"
            android:paddingLeft="4dp"
            android:contentDescription="@string/person_icon"/>

        <!-- Text views for a person's first and last name -->
        <TextView
            android:id="@+id/firstName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textSize="24sp"
            android:textColor="@android:color/black"
            android:text="@string/first"
            android:paddingRight="4dp"
            android:paddingLeft ="4dp"/>
        […]
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray"/>

</LinearLayout>
--------------------------------------------------------------------------

IMHO, that approach produces very clean code¹.  It could be used in 
ECMAScript-based Web applications as well.  That is, the *validateable* 
markup defines the layout, script code reads the markup and converts it to 
description objects, and other script code produces a document fragmnt with 
elements having specific behaviors (widgets).  The layout in XML allows to 
design it with a graphical editor as well (indeed, XSLT could be used to 
make SVG out of it) almost independent of the final presentation.  The 
intermediary step would allow to adapt or entirely build the layout in 
script code without having to deal with the details of the DOM.

______
¹  The above can still be improved; it is exercise code where the student
   is supposed to replace all hard-coded values with resource references for
   achieving a unified layout throughout all “activities” of the app.
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.