Lets Cook Split


  • This tutorial assumes that you already followed the LetsCookNav tutorial and so it will skip some details. Assets used in this tutorial are the same as the LetsCookNav ones. The purpose of this example is to introduce the PageSplit navigation control.



1 Create a new empty Creo project, start by dragging the Recipes.sqlite database into the Assets folder (then press Yes to the object conversion question) and then create a new query (as the one created in the LetsCookNav tutorial). lets-cook-split
2 PageSplit looks better on bigger devices, so switch to iPhone 7 Plus: lets-cook-split
3 Change orientation from Portrait to Landscape Right: lets-cook-split
4 Delete Navigation1 (and Window1) from the Layout panel and create a new PageSplit navigation: lets-cook-split
5 The first Window inside a PageSplit is considered a Master window. Creo automatically adds a TableView to the Master Window. Select the TableView and set its DataSet to Recipes.Query (please note that cell height and others cell related properties has been changed): lets-cook-split
6 Rename Master Window in Layout panel to Recipes (notice that Title changes in the Design Board) and rename the sqlite database from Recipes to RecipesDB (otherwise you'll receive a compilation error because you cannot have two objects with the same name in the same scope).

7 Create a new CustomView with 3 controls (an ImageView, a Label and a TextView). LetsCookNav tutorial will show you in details how to create a CustomView and how to expose its properties: lets-cook-split
8 Drop a View from the Objects panel to the Details Window and set its Template, DataSet and Custom View Properties as in the screenshot: lets-cook-split
9 Press RUN and enjoy the LetsCookSplit app! lets-cook-split You can now send the app to CreoPlayer or build it and then submit to the App Store.

How can everything work without any code?
If you try the runtime mode you'll see that each time you select a recipe in the Master window, the right recipe is correctly displayed in the Details window without any information passed between the two Windows.
The trick here is to connect the MasterTable in the Master window and the View1 in the Details window to the same query and then seek the query to the right position.

A query is like a table where each row is numbered from 0 to the total number of row minus 1. A quick way to display the content of a given record is just to set its index inside the query. The code is automatically added for you in Creo and you can find (and modify) it in the MasterTable.

What happens here is that the Details window is opened and the index of the View bounds to a DataSet is set to the index passed as parameter. Using the index property a View can show the right data from a DataSet that contains multiple rows. lets-cook-split