J3.x:Developing an MVC Component/Adding a Modal - Revision history

ThiagoG at 19:16, 10 March 2020

2020-03-10T19:16:19Z

← Older revision		Revision as of 19:16, 10 March 2020
Line 502:		Line 502:
	<?php foreach ($this->items as $i => $row) :		<?php foreach ($this->items as $i => $row) :
	$row->image = new Registry;		$row->image = new Registry;
	$row->image->loadString($row->~~imageinfo~~);		$row->image->loadString($row->imageInfo);
	if ($row->language && JLanguageMultilang::isEnabled())		if ($row->language && JLanguageMultilang::isEnabled())
	{		{

Es ka: fix typo in admin/views/helloworlds/tmpl/modal.php

2020-02-20T09:25:52Z

fix typo in admin/views/helloworlds/tmpl/modal.php

← Older revision		Revision as of 09:25, 20 February 2020
Line 502:		Line 502:
	<?php foreach ($this->items as $i => $row) :		<?php foreach ($this->items as $i => $row) :
	$row->image = new Registry;		$row->image = new Registry;
	$row->image->loadString($row->~~imageInfo~~);		$row->image->loadString($row->imageinfo);
	if ($row->language && JLanguageMultilang::isEnabled())		if ($row->language && JLanguageMultilang::isEnabled())
	{		{
Line 636:		Line 636:

	<translate>		<translate>

	== Updated Language Strings == <!--T:51-->		== Updated Language Strings == <!--T:51-->
	</translate>		</translate>

Sandra97 at 07:04, 24 December 2018

2018-12-24T07:04:46Z

← Older revision		Revision as of 07:04, 24 December 2018
Line 9:		Line 9:
	<!--T:3-->		<!--T:3-->
	In this step we add a modal, and an accompanying video is available at [https://youtu.be/5qJ6qT9dpXQ Adding a Modal].</translate>		In this step we add a modal, and an accompanying video is available at [https://youtu.be/5qJ6qT9dpXQ Adding a Modal].</translate>

			{{#widget:YouTube\|id=5qJ6qT9dpXQ}}

	<translate>		<translate>

Sandra97: Marked this version for translation

2018-12-24T07:03:20Z

Marked this version for translation

Show changes

Sandra97: Marked for translation

2018-12-24T07:03:07Z

Marked for translation

← Older revision		Revision as of 07:03, 24 December 2018
Line 41:		Line 41:

	<translate>		<translate>
	== Functionality ==</translate>		== Functionality ==
			</translate>

	<translate>		<translate>
Line 50:		Line 51:

	<translate>		<translate>
	== Approach == </translate>		== Approach ==
			</translate>

	<translate>		<translate>
Line 62:		Line 64:

	<translate>		<translate>
	== Helloworld menuitem definition ==</translate>		== Helloworld menuitem definition ==
			</translate>

	<translate>		<translate>We change the custom field for selecting the Helloworld record to be displayed.</translate>
	We change the custom field for selecting the Helloworld record to be displayed.</translate>

	<span id="site/views/helloworld/tmpl/default.xml">		<span id="site/views/helloworld/tmpl/default.xml">
Line 94:		Line 96:

	<translate>		<translate>
	== Field definition == </translate>		== Field definition ==
			</translate>

	<translate>		<translate>
Line 262:		Line 265:

	<translate>		<translate>
	== Modal Display == </translate>		== Modal Display ==
			</translate>

	<translate>		<translate>
Line 588:		Line 592:

	<translate>		<translate>
	== Updated Language Strings ==</translate>		== Updated Language Strings ==
			</translate>

	<span id="admin/language/en-GB/en-GB.com_helloworld.ini">		<span id="admin/language/en-GB/en-GB.com_helloworld.ini">
Line 686:		Line 691:

	<translate>		<translate>
	== Packaging the Component ==</translate>		== Packaging the Component ==
			</translate>
	<translate>		<translate>
	Contents of your code directory. Each file link below takes you to the step in the tutorial which has the latest version of that source code file.</translate>		Contents of your code directory. Each file link below takes you to the step in the tutorial which has the latest version of that source code file.</translate>
Line 897:		Line 903:

	<translate>		<translate>
	== Contributors ==</translate>		== Contributors ==
			</translate>
	*[[User:Robbiej\|Robbie Jackson]]		*[[User:Robbiej\|Robbie Jackson]]

	<div class="row">		<div class="row">
	<div class="large-6 columns">{{Basic button\|~~<translate>~~		<div class="large-6 columns">{{Basic button\|
	S:MyLanguage/J3.x:Developing_an_MVC_Component/Using the language filter facility\|Prev: Using the language filter facility</translate>\|class=expand success}}</div>		S:MyLanguage/J3.x:Developing_an_MVC_Component/Using the language filter facility\|<translate>Prev: Using the language filter facility</translate>\|class=expand success}}</div>
	<div class="large-6 columns">{{Basic button\|~~<translate>~~		<div class="large-6 columns">{{Basic button\|
	S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding Associations\|Next: Adding Associations</translate>\|class=expand}}</div>		S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding Associations\|<translate>Next: Adding Associations</translate>\|class=expand}}</div>
	</div>		</div>
	__NOTOC__		__NOTOC__

Robbiej: change modal title to remove reference to menuitem

2018-07-23T20:29:18Z

change modal title to remove reference to menuitem

← Older revision		Revision as of 20:29, 23 July 2018
Line 679:		Line 679:
	COM_HELLOWORLD_LANGUAGE_DESC="Language descending"		COM_HELLOWORLD_LANGUAGE_DESC="Language descending"
	; Helloworld menuitem - selecting a greeting via modal		; Helloworld menuitem - selecting a greeting via modal
	COM_HELLOWORLD_MENUITEM_SELECT_MODAL_TITLE="Select greeting ~~to display on menuitem~~"		COM_HELLOWORLD_MENUITEM_SELECT_MODAL_TITLE="Select greeting"
	COM_HELLOWORLD_MENUITEM_SELECT_HELLOWORLD="Select"		COM_HELLOWORLD_MENUITEM_SELECT_HELLOWORLD="Select"
	COM_HELLOWORLD_MENUITEM_SELECT_BUTTON_TOOLTIP="Select a helloworld greeting"		COM_HELLOWORLD_MENUITEM_SELECT_BUTTON_TOOLTIP="Select a helloworld greeting"

Robbiej: fix source links to files updated to handle Save as Copy

2018-07-22T20:28:19Z

fix source links to files updated to handle Save as Copy

← Older revision		Revision as of 20:28, 22 July 2018
Line 755:		Line 755:
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding a Modal#admin/models/fields/modal/helloworld.php\|admin/models/fields/modal/helloworld.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding a Modal#admin/models/fields/modal/helloworld.php\|admin/models/fields/modal/helloworld.php]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/helloworlds.php\|admin/models/helloworlds.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/helloworlds.php\|admin/models/helloworlds.php]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/~~Adding_an_Image~~#admin/models/helloworld.php\|admin/models/helloworld.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding an alias#admin/models/helloworld.php\|admin/models/helloworld.php]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/forms/filter_helloworlds.xml\|admin/models/forms/filter_helloworlds.xml]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/forms/filter_helloworlds.xml\|admin/models/forms/filter_helloworlds.xml]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html\|admin/models/forms/index.html]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html\|admin/models/forms/index.html]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/~~Adding_verifications~~#admin/models/forms/helloworld.js\|admin/models/forms/helloworld.js]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding an alias#admin/models/forms/helloworld.js\|admin/models/forms/helloworld.js]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/forms/helloworld.xml\|admin/models/forms/helloworld.xml]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/forms/helloworld.xml\|admin/models/forms/helloworld.xml]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/~~Adding_verifications~~#admin/models/rules/greeting.php\|admin/models/rules/greeting.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding an alias#admin/models/rules/greeting.php\|admin/models/rules/greeting.php]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html\|admin/models/rules/index.html]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html\|admin/models/rules/index.html]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_ACL#admin/controllers/helloworld.php\|admin/controllers/helloworld.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_ACL#admin/controllers/helloworld.php\|admin/controllers/helloworld.php]]''

Robbiej: Changed the Next link

2018-07-04T15:41:32Z

Changed the Next link

← Older revision		Revision as of 15:41, 4 July 2018
Line 904:		Line 904:
	S:MyLanguage/J3.x:Developing_an_MVC_Component/Using the language filter facility\|Prev: Using the language filter facility</translate>\|class=expand success}}</div>		S:MyLanguage/J3.x:Developing_an_MVC_Component/Using the language filter facility\|Prev: Using the language filter facility</translate>\|class=expand success}}</div>
	<div class="large-6 columns">{{Basic button\|<translate>		<div class="large-6 columns">{{Basic button\|<translate>
	S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding ~~an update server~~\|Next: Adding ~~an update server~~</translate>\|class=expand}}</div>		S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding Associations\|Next: Adding Associations</translate>\|class=expand}}</div>
	</div>		</div>
	__NOTOC__		__NOTOC__

MartijnM at 11:37, 2 July 2018

2018-07-02T11:37:32Z

← Older revision		Revision as of 11:37, 2 July 2018
Line 544:		Line 544:
	Note that there are some important differences from the default.php layout file.</translate>		Note that there are some important differences from the default.php layout file.</translate>

	# We get the <tt>function</tt> parameter which is embedded in the iframe URL as a query parameter, and we use this in the URL target of the <tt><form></tt> element and in the <tt>data-function</tt> attribute of the each greeting value.		<translate>
	# There are several other data attributes associated with each greeting value; these will be used to pass this information to the parent window via the jSelectHelloworld_jform_request_id function call. Also, each greeting has a CSS class of "select-link".		# We get the <tt>function</tt> parameter which is embedded in the iframe URL as a query parameter, and we use this in the URL target of the <tt><form></tt> element and in the <tt>data-function</tt> attribute of the each greeting value. </translate>
	# We need to set the target URL of the <tt><form></tt> to be the same as the URL of the iframe. This is because whenever the administrator uses the search / filter tools the form sends an HTTP request to that URL, and we need to ensure it's the same data that gets presented.		<translate>
			# There are several other data attributes associated with each greeting value; these will be used to pass this information to the parent window via the jSelectHelloworld_jform_request_id function call. Also, each greeting has a CSS class of "select-link".</translate>
			<translate>
			# We need to set the target URL of the <tt><form></tt> to be the same as the URL of the iframe. This is because whenever the administrator uses the search / filter tools the form sends an HTTP request to that URL, and we need to ensure it's the same data that gets presented.</translate>

	Also, the checkboxes have been removed, as they are now irrelevant.		<translate>
			Also, the checkboxes have been removed, as they are now irrelevant. </translate>

	In addition, we need a small javascript file which basically sets an onclick listener on each of the greetings (identified through having the class "select-link"), and calls the required function when triggered.		<translate>
			In addition, we need a small javascript file which basically sets an onclick listener on each of the greetings (identified through having the class "select-link"), and calls the required function when triggered. </translate>

	<span id="media/js/admin-helloworlds-modal.js">		<span id="media/js/admin-helloworlds-modal.js">
Line 582:		Line 587:
	</span>		</span>

	== Updated Language Strings ==		<translate>
			== Updated Language Strings ==</translate>

	<span id="admin/language/en-GB/en-GB.com_helloworld.ini">		<span id="admin/language/en-GB/en-GB.com_helloworld.ini">
Line 679:		Line 685:
	</span>		</span>

	== Packaging the Component ==		<translate>
	Contents of your code directory. Each file link below takes you to the step in the tutorial which has the latest version of that source code file.		== Packaging the Component ==</translate>
			<translate>
			Contents of your code directory. Each file link below takes you to the step in the tutorial which has the latest version of that source code file.</translate>

	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding a Modal#helloworld.xml\|helloworld.xml]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding a Modal#helloworld.xml\|helloworld.xml]]''
Line 888:		Line 896:
	</span>		</span>

			<translate>
	== Contributors ==		== Contributors ==</translate>
	*[[User:Robbiej\|Robbie Jackson]]		*[[User:Robbiej\|Robbie Jackson]]

MartijnM at 11:27, 2 July 2018

2018-07-02T11:27:31Z

← Older revision		Revision as of 11:27, 2 July 2018
Line 233:		Line 233:
	</span>		</span>

	When the field definition class extends JFormField, Joomla expects 2 methods to be present in the class: getInput() which should return the html for the input field elements and getLabel() which should return the html for the label.		<translate>
			When the field definition class extends JFormField, Joomla expects 2 methods to be present in the class: getInput() which should return the html for the input field elements and getLabel() which should return the html for the label. </translate>

	There are several core Joomla components which use modal fields to allow the administrator to select items, including com_content and com_contact. These components have similar field definitions, and the file above is a cut-down version of these equivalents, just supporting the functionality which we need for this tutorial step.		<translate>
			There are several core Joomla components which use modal fields to allow the administrator to select items, including com_content and com_contact. These components have similar field definitions, and the file above is a cut-down version of these equivalents, just supporting the functionality which we need for this tutorial step.</translate>

	There are a number of key html input elements returned by the getInput() method above.		<translate>
	# The input field which displays the current greeting selected, or the text "Select" if none has been selected		There are a number of key html input elements returned by the getInput() method above.</translate>
	# The Select button - this appears if no greeting has been selected. Note the attribute data-toggle="modal" indicating that clicking on this button will cause the modal to appear		<translate>
	# The Clear button - this appears if a greeting has been selected. When clicked it runs a javascript function within the system/modal-fields.js code which replaces the selected greeting the "Select" text, makes visible the Select button, and hides the Clear button		# The input field which displays the current greeting selected, or the text "Select" if none has been selected</translate>
	# The modal elements - these are output through including sections of the Bootstrap html and javascript code. When the modal appears the iframe is created and populated through an HTTP GET to the URL in <tt>$urlSelect</tt>.		<translate>
	# A hidden field which stores the id of the helloworld record selected, and which will be used to pass it in the HTTP POST parameters when the form is submitted.		# The Select button - this appears if no greeting has been selected. Note the attribute data-toggle="modal" indicating that clicking on this button will cause the modal to appear</translate>
			<translate>
			# The Clear button - this appears if a greeting has been selected. When clicked it runs a javascript function within the system/modal-fields.js code which replaces the selected greeting the "Select" text, makes visible the Select button, and hides the Clear button</translate>
			<translate>
			# The modal elements - these are output through including sections of the Bootstrap html and javascript code. When the modal appears the iframe is created and populated through an HTTP GET to the URL in <tt>$urlSelect</tt>.</translate>
			<translate>
			# A hidden field which stores the id of the helloworld record selected, and which will be used to pass it in the HTTP POST parameters when the form is submitted. </translate>

	In our case the callback function will be called <tt>jSelectHelloworld_jform_request_id</tt>, and this is the function we want to be called from the modal to pass the id and greeting of the selected helloworld record. Knowing this, <tt>window.processModalSelect</tt> will set the input fields for the greeting and id, and set the visibility of the Select and Clear buttons.		<translate>
			In our case the callback function will be called <tt>jSelectHelloworld_jform_request_id</tt>, and this is the function we want to be called from the modal to pass the id and greeting of the selected helloworld record. Knowing this, <tt>window.processModalSelect</tt> will set the input fields for the greeting and id, and set the visibility of the Select and Clear buttons. </translate>

	The modal knows that this is the name of the function to call because it's passed as the <tt>&function=jSelectHelloworld_jform_request_id</tt> parameter within the URL of the iframe.		<translate>
			The modal knows that this is the name of the function to call because it's passed as the <tt>&function=jSelectHelloworld_jform_request_id</tt> parameter within the URL of the iframe.</translate>

	Note also the <tt>&tmpl=component</tt> parameter in the URL. This means that the component.php file within the directory of the installed template will be used, which presents an html page without the Joomla menus, etc.		<translate>
			Note also the <tt>&tmpl=component</tt> parameter in the URL. This means that the component.php file within the directory of the installed template will be used, which presents an html page without the Joomla menus, etc. </translate>

	== Modal Display ==		<translate>
			== Modal Display == </translate>

	For the modal display we use the same MVC as the admin "helloworlds" functionality. Neither the controller nor model require changing, there is a small change to the view file, and there's a new layout file, which is similar to the default.php layout file, but differs in some important respects.		<translate>
			For the modal display we use the same MVC as the admin "helloworlds" functionality. Neither the controller nor model require changing, there is a small change to the view file, and there's a new layout file, which is similar to the default.php layout file, but differs in some important respects.</translate>

	In the view file, we don't display the toolbar buttons nor the sidebar to choose between Messages and Categories (and some old comments have been removed as well).		<translate>
			In the view file, we don't display the toolbar buttons nor the sidebar to choose between Messages and Categories (and some old comments have been removed as well).</translate>

	<span id="admin/views/helloworlds/view.html.php">		<span id="admin/views/helloworlds/view.html.php">
Line 371:		Line 385:
	</span>		</span>

	Our new modal layout file:		<translate>
			Our new modal layout file:</translate>

	<span id="admin/views/helloworlds/tmpl/modal.php">		<span id="admin/views/helloworlds/tmpl/modal.php">
Line 526:		Line 541:
	</span>		</span>

	Note that there are some important differences from the default.php layout file.		<translate>
			Note that there are some important differences from the default.php layout file.</translate>

	# We get the <tt>function</tt> parameter which is embedded in the iframe URL as a query parameter, and we use this in the URL target of the <tt><form></tt> element and in the <tt>data-function</tt> attribute of the each greeting value.		# We get the <tt>function</tt> parameter which is embedded in the iframe URL as a query parameter, and we use this in the URL target of the <tt><form></tt> element and in the <tt>data-function</tt> attribute of the each greeting value.

← Older revision		Revision as of 20:28, 22 July 2018
Line 755:		Line 755:
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding a Modal#admin/models/fields/modal/helloworld.php\|admin/models/fields/modal/helloworld.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding a Modal#admin/models/fields/modal/helloworld.php\|admin/models/fields/modal/helloworld.php]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/helloworlds.php\|admin/models/helloworlds.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/helloworlds.php\|admin/models/helloworlds.php]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/~~Adding_an_Image~~#admin/models/helloworld.php\|admin/models/helloworld.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding an alias#admin/models/helloworld.php\|admin/models/helloworld.php]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/forms/filter_helloworlds.xml\|admin/models/forms/filter_helloworlds.xml]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/forms/filter_helloworlds.xml\|admin/models/forms/filter_helloworlds.xml]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html\|admin/models/forms/index.html]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html\|admin/models/forms/index.html]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/~~Adding_verifications~~#admin/models/forms/helloworld.js\|admin/models/forms/helloworld.js]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding an alias#admin/models/forms/helloworld.js\|admin/models/forms/helloworld.js]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/forms/helloworld.xml\|admin/models/forms/helloworld.xml]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using the language filter facility#admin/models/forms/helloworld.xml\|admin/models/forms/helloworld.xml]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/~~Adding_verifications~~#admin/models/rules/greeting.php\|admin/models/rules/greeting.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding an alias#admin/models/rules/greeting.php\|admin/models/rules/greeting.php]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html\|admin/models/rules/index.html]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html\|admin/models/rules/index.html]]''
	* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_ACL#admin/controllers/helloworld.php\|admin/controllers/helloworld.php]]''		* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_ACL#admin/controllers/helloworld.php\|admin/controllers/helloworld.php]]''