Reuse in Layouts

Hi all,

I want to define two alternative layouts for one view. In both layouts, some parts are the same and one part differs. I went through the user interface Programmer's Guide but did not find a way how I can define this "same part" centrally and then refer to it in the specific layouts (I hope I did not miss it :) ).

This is how it looks like at the moment:

<resources>

	<layout id="MainViewClockLayout">

	   <label id="ToCommandViewLabel"... />

	   <label id="FhemLabel" 	... />

	    

	    <drawable id="ClockDrawable" class="ClockDrawable">

        	<param name="font">Gfx.FONT_NUMBER_HOT</param>

                ...

    	    </drawable>

	</layout>

	

	<layout id="MainViewStatusLayout">

	   <label id="ToCommandViewLabel"... />

	   <label id="FhemLabel" 	... />

	    

	    <drawable id="ClockDrawable" class="ClockDrawable">

        	<param name="numberOfStatusValues">3</param>

                ...

    	    </drawable>

	</layout>

</resources>

As you may see, the part

<label id="ToCommandViewLabel"... />

<label id="FhemLabel" 	... />

occurs in both layouts.

How can I define this centrally and just reference it in the individual layouts?

Thanks in advance & regards,
Florian

HermoT over 8 years ago

You could make a drawable that draws the two labels.
Look for "Custom Drawables" in the Programmer's guide in your SDK folder.

Extract:

Custom Drawables

In some cases it is useful to have a drawable entry within a layout point to a custom defined class which extends Toybox.WatchUi.Drawable. This is possible by using the class attribute of the <drawable> tag.
<layout><drawableid="MoveBar"class="CustomMoveBar"/></layout>[/CODE] The drawable entry above will add a new instance of the CustomMoveBar class to the layout. You can then define how the CustomMoveBar is drawn by overriding the draw(dc) function. usingToybox.WatchUiasUi;classCustomMoveBarextendsUi.Drawable{functiondraw(dc){// Draw the move bar here}}[/CODE] Passing Parameters to Custom Drawables If may be useful to pass values into a custom Drawable. To do this you define <param> children within the <drawable> tag. The <param> tag should define the name of the parameter using the name attribute and the value as it’s content. The content value is passed as is to the custom Drawable. This means if you want to pass a string you must wrap the content in quotes. <layout><drawableid="MoveBar"class="CustomMoveBar"><paramname="color">Gfx.COLOR_RED</param><paramname="string">"Hello Custom Drawable!"</param></drawable></layout> [/CODE] The parameters defined in XML are passed to the custom Drawable’s initialize function as a dictionary. The names are passed as symbols and the values are passed as they appear in the XML. usingToybox.WatchUiasUi;classCustomMoveBarextendsUi.Drawable{hidden varmColor,mString;functioninitialize(params){// You should always call the parent's initializer and// in this case you should pass the params along as size// and location values may be defined.Drawable.initialize(params);// Get any extra values you wish to use out of the params DictionarymColor =params.get(:color);mString =params.get(:string);}}