Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #34703

Re: A simpler DOM in JS

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-03 14:24 -0800
  Re: A simpler DOM in JS Martin Honnen <martin.honnen@gmx.de> - 2018-02-04 14:26 +0100
    Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-02-04 06:18 -0800
      Re: A simpler DOM in JS Ken Tilton <kentilton@gmail.com> - 2018-03-05 08:14 -0800
        Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-03-08 00:43 -0800
          Re: A simpler DOM in JS Ken Tilton <kentilton@gmail.com> - 2018-03-08 05:57 -0800
            Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-03-08 07:56 -0800
    Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 06:15 +0100
      Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-04 23:15 -0800
    Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-04 23:06 -0800
  Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 05:50 +0100
    Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 06:26 +0100
      Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-04 23:33 -0800
        Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 11:19 +0100
          Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-02-05 04:16 -0800
          Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-05 10:23 -0800
            Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 19:42 +0100
              Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-08 01:46 +0100
              Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-08 01:47 +0100
                Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-11 10:27 -0800
                Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-12 04:38 +0100
                Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-15 12:19 -0800
                Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-02-15 12:43 -0800
                Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-25 19:22 +0100
              Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-07 12:51 -0800
                Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-08 02:27 +0100
                Re: A simpler DOM in JS John G Harris <niam@jghnorth.org.uk.invalid> - 2018-02-08 19:21 +0000
            Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 19:58 +0100
    Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-04 23:30 -0800
      Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 19:11 +0100
        Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-11 10:16 -0800
          Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-12 04:48 +0100
  Re: A simpler DOM in JS Ken Tilton <kentilton@gmail.com> - 2018-03-05 08:07 -0800
    Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-03-06 17:40 -0800
      Re: A simpler DOM in JS Ken Tilton <kentilton@gmail.com> - 2018-03-07 12:09 -0800

csiph-web