Intel XDK: Controls 12: SORTABLE LIST BLOCK widget in App Designer 7

I am using the same project I described earlier, the TabbarWidget which has three tabs in the bottom of the page as shown.

I created two more pages, named First and SortableList. I renamed the tabs as shown in the image of the main page image of TabbarWidget.


SortList_00

Using the INTERACTIVITY, the tabs Gallery and SortableList will open the First and SortableList pages. The Back and Go back buttons on those pages will bring the Main page to the display.

The Gallery tab brings up the FIRST page as shown. This page is configured as described earlier to demonstrate the basic IMAGE GALLERY widget in Intel XDK.
SortList_01

The SortableList tab brings up a page in which I have placed a SORTABLE LIST BLOCK widget from CONTROLS | LIST BLOCK shown here.


SortList_03

When you place the SORTABLE LIST BLOCK widget the following HTML will be added to the index.html as shown.


SortList_04

The SortableList tab on Main Page when clicked takes you to this page shown here.


SortList_05

 It has the SORTABLE LIST BLOCK widget with three list elements and I have added a Back button to enable navigation back to the MAIN PAGE as seen earlier. I have changed the PLACE HOLDER for one of the list items as shown to 'Jay'.

Based on the document here (http://framework7.io/docs/sortable-list.html),  in order to make it sortable, I need to add the appropriate HTML fragment to access the Enable Sortable method.

This is the code (Open-Sortable) I mentioned earlier in an image of the HTML content (review image previous to the above).

When I place this HTML fragment in the indicated position shown earlier; the DESIGN view of the page appears as shown. The ENABLE SORTABLE link is displayed.


SortList_06

Now click SIMULATE to run the app of choice (iPhone6s) and the page appears with a link to the Enable Sortable method. Click on the link. The page changes to the following with icons to the right extreme of each list item being displayed as shown:


SortList_07

Click the ICON and you can move the list element up or down the list (draggable). The next picture shows 'Jay' dragged to the bottom of the list.

SortList_08

You can also set up links to disable sortablility as well as toggle the sortability.


Comments

Post a Comment

Popular posts from this blog

UWP: Displaying formatted text in a TextBox Control

Image
The entry you make in a text box control is of data type text and sometimes you need to format it as a currency with thousands separator while displaying. Also, if the number of decimal places you enter is more than 2, you need to round it up to 2 in the output. How do you code this in a UWP app? Create a UWP page starting from a Blank UWP project with three controls as shown. There are two text boxes and a button. You enter a number in the top textbox (txt1) and click the button, the formatted currency will be displayed in the bottom textbox(txt2). The app displays as shown. Now provide for a click event for the button and insert code as shown: Convert_1 The string entered in txt1 is converted to data-type double, it is then 'rounded'. The rounded number is then formatted to show the currency symbol and the 1000's place delimiter you find, for example in Excel formatting. Here is the app after entering a number and c
Read more

Handling AppManifest Validation error

This error may show up if one chooses an image file that does not comply with the enumeration. Here is the description of the error: Severity Code Description Project File Line Suppression State Error  Validation error. error C00CE169: App manifest validation error: The app manifest must be valid as per schema: Line 26, Column 25, Reason: '' violates enumeration constraint of 'badge badgeAndTileText'. The attribute 'Notification' with value '' failed to parse. XXXXXX C:\Users\Owner\source\repos\xxxxxx\bin\ARM\Debug\AppxManifest.xml   I chose a resource for Badge in the Assets and Visual Studio spawned this error. The only way to get out of this was to comment out (or better remove) the following line in the AppManifest .xml Make sure you save the file after the removal as every time you Build, the AppManifest.xml gets recreated.
Read more

UWP: XAML's ComboBox Control -Part 1

Image
Microsoft's Universal Windows Framework apps are well supported by Microsoft and you could use it for not only Windows but for other devices as well. You can also use UWP for cross-platform use. In the Universal Windows Platform (UWP) projects there is an advantage of one code that works on different device families (phone, tablet, desktop etc.). However, the UWP projects depend on using XAML.  ComboBox details can be seen in the Object Explorer of Visual Studio 2017 Community used in writing this post. In this post, I will show you how you may work with this controls for a UWP project. Getting the ComboBox Control Placing ComboBox on the Design area Adding ComboBoxItems We start with a Windows Universal blank C# project with the name JComboBox as shown. You will be asked for what target and minimum versions of Windows 10 that you want. The higher the version the more feature support. The Build version 16299 is chosen for both as shown i
Read more