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

Towards cross-platform development..

There are lots and lots of Apps. In fact there are over a couple of million Apps including all of the major brands, Apple, Google, Blackberry, Microsoft with Apple at the top and Microsoft in the bottom. But this is a growing market. The variety is truly bewildering, different size devices; different operating systems(OS); different programming languages;  and different orientations. This post is not very recent but you can see how the various mobile operating systems compare: http://www.ibtimes.com/android-vs-ios-whats-most-popular-mobile-operating-system-your-country-1464892 The interactive image in the article really shows the popularity of a given OS/device among different geographical regions. Windows Phone Apps is for example based on Microsoft's Window 7, 8, 8.1 OSs using .NET. With Windows OS and Visual Studio one can build Apps for all of Microsoft devices covering Phone, Tablet and Desktop. However Microsoft Windows Apps sans Html5/CSS/Javascript is OS specific. E
Read more

Event Code: UI design with XAML in Visual Studio 2017 - 2

Image
I assume you have followed me with this post here: http://hodentekhelp.blogspot.com/2017/12/how-do-i-configure-button-in-xaml.html After reading the above you will see that you start with an empty project whose code is shown here: WinPhoneStep1 In the final step you will have achieved this: WinPhoneStep11 This project when deployed will just show a button as in the above and nothing more: WinPhoneStep13 Writing code for a click event of this button. Let us first give a name for this button, like ClickMe . When you highlight the button in the design by clicking it, the Property pane opens where you can write the name you want as shown. winPhoneStep20 In the XAML code the Button gets a qualifier x:Name="ClickMe" as shown here: Now enter the Click event to the code by just enter "cl" after a space as shown and the intellisense kicks-in showing your options as shown. winPhoneStep22.png You pi
Read more

Deploying a Universal Windows Project to Lumia 950

Image
We will be using the Lumia 950 as the connected device and it has been set to Developer Mode as described earlier. We start with the HelloWorld Universal Windows Project(UWP) that has been tested to run without errors on the Local Machine as described here. Open the project in Visual Studio 2017 as shown. LumiaDeploy_0 and LumiaDeploy_7 Build (Using Menu Build and its context menu) the Project and verify it is successful. -------- 1>------ Build started: Project: HelloWorld, Configuration: Debug x86 ------ 1>  HelloWorld -> C:\Users\Owner\source\repos\HelloWorld\HelloWorld\bin\x86\Debug\HelloWorld.exe ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ===== ------------------ Click Local Machine along Debug as shown. LumiaDeploy_1 Pick Device from the list, the display changes as shown. LumiaDeploy_2 Connect your Windows 10 Mobile(Lumia 950) to one of the USB ports. This will result in an
Read more