apps/foodrecipes: Use model/view architecture

foodrecipes/RecipeDelegate.qml

@@ -0,0 +1,12 @@
+import controls.Button;
+
+Delegate {
+	height: recipeButton.height;
+	width: recipeButton.width;
+
+	Button {
+		id: recipeButton;
+
+		text: model.text;
+	}
+}

foodrecipes/main.qml

@@ -5,7 +5,7 @@
 // IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS,
 // WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
-import controls.Button;
+import "RecipeDelegate.qml";
 
 import "recipesDb.js" as recipesDb;
 
@@ -20,36 +20,32 @@ Application {
 		Item {
 			anchors.fill: parent;
 
-			Column {
-				anchors.centerIn: parent;
-
-				spacing: 5;
+			Text {
+				id: titleText;
 
-				Text {
-					font: titleFont;
-					text: "Выберите рецепт";
-					color: colorTheme.activeTextColor;
-				}
+				anchors.centerIn: parent;
 
-				Button {
-					id: recipe1Button;
+				font: titleFont;
+				text: "Выберите рецепт";
+				color: colorTheme.activeTextColor;
+			}
 
-					text: "Кекс в кружке";
+			ListView {
+				id: recipesListView;
 
-					onSelectPressed: { foodRecipesApp.showRecipe(0); }
-				}
+				anchors.top: titleText.bottom;
+				anchors.topMargin: 5;
+				anchors.left: titleText.left;
+				anchors.bottom: safeArea.bottom;
 
-				Button {
-					text: "Салат с креветками и апельсином";
+				spacing: 5;
 
-					onSelectPressed: { foodRecipesApp.showRecipe(1); }
-				}
+				model: ListModel { id: recipesModel; }
+				delegate: RecipeDelegate { }
 
-				Button {
-					text: "Мандариновый татен";
+				onSelectPressed: { foodRecipesApp.showRecipe(currentIndex); }
 
-					onSelectPressed: { foodRecipesApp.showRecipe(2); }
-				}
+				onCompleted: { recipesDb.recipes.forEach(recipe => recipesModel.append({ text: recipe.title })); }
 			}
 		}
 
@@ -91,7 +87,10 @@ Application {
 	}
 
 	function showRecipe(recipeIndex) {
-		const recipe = recipesDb.getRecipeByIndex(recipeIndex);
+		if (recipeIndex >= recipesDb.recipes.length)
+			throw new RangeError("Recipe index " + index + " out of range " + recipesDb.recipes.length);
+
+		const recipe = recipesDb.recipes[recipeIndex];
 
 		recipeTitleText.text = recipe.title;
 		recipeImage.source = recipe.image;
@@ -102,6 +101,6 @@ Application {
 
 	onStarted: {
 		appPageStack.currentIndex = 0;
-		recipe1Button.setFocus();
+		recipesListView.setFocus();
 	}
 }

foodrecipes/recipesDb.ts

@@ -18,7 +18,7 @@ class Recipe
 	}
 }
 
-const recipes: Array<Recipe> = [
+export const recipes: Array<Recipe> = [
 	new Recipe(
 		"Кекс в кружке",
 		"apps/foodrecipes/res/recipes/1.jpg",
@@ -35,13 +35,11 @@ const recipes: Array<Recipe> = [
 		"Мандариновый татен",
 		"apps/foodrecipes/res/recipes/3.jpg",
 		"Очистите и разрежьте мандарины на кружочки 5–10 мм толщиной. Смажьте круглую форму для выпечки растопленным маргарином, уложите в нее мандарины.\nРазогрейте духовку до 180 °С. В большую миску разбейте яйцо, всыпьте муку, сахар, ванилин, разрыхлитель и соль, тщательно перемешайте. Влейте к ним молоко и вновь перемешайте. Как только смесь станет однородной, вылейте ее в форму на мандарины, поставьте в духовку на 35 мин.\nДостаньте татен из духовки, остудите 10 мин, осторожно переверните так, чтобы мандарины оказались сверху. Слегка подогрейте абрикосовый или апельсиновый джем, , смажьте им мандарины.\nУкрасьте пирог листиками мяты и подавайте."
+	),
+
+	new Recipe(
+		"Салат с авокадо, красной рыбой и огурцом",
+		"apps/foodrecipes/res/recipes/4.jpg",
+		"Авокадо для салата с красной рыбой надрежьте и поверните половинки в разные стороны, удалите косточку. Ложкой выньте мякоть и положите в чашу блендера, полейте лимонным соком, посолите и поперчите, измельчите до однородности.\nОгурцы для салата с авокадо и красной рыбой очистите от кожицы и семян и очень мелко нарежьте. Лук очистите и нарежьте очень мелкими кубиками. Порубите укроп.\nДобавьте в пюре из авокадо нарезанные белый лук, укроп и свежие огурцы. Тщательно перемешайте вилкой. Оставьте до использования в прохладном месте (можно убрать в холодильник).\nФиле копченого или слабосоленого лосося для салата нарежьте очень маленькими кубиками. Внимательно смотрите, чтобы не попались мелкие косточки (удаляйте их в процессе нарезания рыбы).\nПоставьте на тарелки сервировочные кольца диаметром 6–8 см. На дно выложите половину пюре из авокадо и разровняйте поверхность. Следующим слоем разложите красную рыбу. Затем снова пюре из авокадо. Прикройте кольца пленкой и уберите закуску до подачи в холодильник.\nПеред подачей на стол с каждой порции салата с авокадо, красной рыбой и огурцом снимите аккуратно пленку и сервировочные кольца. Закуску можно украсить микрозеленью."
 	)
 ];
-
-export function getRecipeByIndex(index: number): Recipe {
-	if (index >= recipes.length) {
-		throw new RangeError("Recipe index " + index + " out of range " + recipes.length);
-	}
-
-	return recipes[index];
-}