Skip to main content

Context based Data Driven Dynamic UI / ListView Problem and Solution

All we need is the good dynamic UI with the minimal code and the efficient one. We face several issues when such requirements like dynamically based on the context of what the user see on the screen, I need to get the data handler and network handler or some or all the components in my system or app should respond back with the actions and data with respect to the context.

Being said this, setting the context to the reader about the problem in short and would go through on solution to solve the same.

Problem:

Few problems that comes into picture while developing an UI based applications like Mobile apps or the Web apps etc., we come across following problems,
  • User is free to navigate to any screen.
  • User is free to do any operation that might change the state of the data and if the data change its state the UI may take a state change. 
  • Today the app may have few states what if tomorrow the state are huge.
  • Should I handle all the states manually with switch case or if else ?
  • Should I have my data fetching and networking components customized for each and every context ?
  • What if there are dynamic addition and deletion of UI elements on the screen based on the state of the data / context ?

Scenario Examples:

If you are in any one of these scenarios this design solution is right for you. For the purpose of understanding rather than dealing this at the abstract level, lets dive into the example of the patient health record maintenance app may be used by the hospital to track the patient health. Imagine if you are the doctor and you open the patient profile, you get all his/her medication report, Health status report and the records of his previous treatments. The UI is going to be dynamic that the each and every screen fetch the data from the API based on what the user is currently seeing on the screen and also the list view actions buttons provided in the swipe to action buttons change based on the status of the data.

  • We may need to search the data in the various screens as per the context the screen is for. If Previous Treatments screen same search component should search for the search term that the user ask for.
  • Dynamically get the data loaded from the API based on what the user is viewing on the screen rather than writing all the code hard-coded for each and every state.
  • Add the buttons dynamically on the listView of the records. Example - Modify & delete button if the record is 10 weeks old data. (UI based on the data/state driven rules)

Fig : Shows various dynamic screens

Hope that this scenario would have explained the context of the problem that we are trying to solve.

Solution:

Name: Context Based Dynamic Components

Participants :

  • Context Handler
  • Context
  • Screens (Example - Health status screen, Medications screen, History treatment screen)
  • Network Manager
  • List View Helper
Lets get the hands wet looking at the implementation,




  1. Any screen that have the dynamic UI based on the data that we get or the scenario, they contact the Context Handler to get the context object created for that screen and the same will be stored by the Context Handler with the screen context value (Semantically meaning key).
  2. At point of time, Imagine the screen 2 that is dealing with the History records of medication then also assume that the user uses that screen to add or modify or delete the records then the respective API url that is needed to be consumed for the actions should be loaded by the network manager. 
    1. To do this screen first contact the context handler and ask its respective context object.
    2. Invokes context.getNetworkingManager() to get the instance of the network manager.
    3. Imagine that the current Screen context is "History-records" then the network manager will be automatically applied with the url as "http://api.service/v1/patient/<name>/History-records/" which helps in doing rest of the actions without manually writing all the code for modifying the URL of the scenario.
  3. In the same way as discussed in the above point lets assume the next scenario as "Records are getting rendered on the screen in the list View and each list view item shows a item layout that shows the record name and in the side it also shows the action buttons which is dynamic based on the status of the record (Means there may be only two buttons visible or the three buttons visible .etc).
    1. This design helps us in doing this too, in each and every screen we provide the record status and the mapping to the control objects as shown in the code snippet below and this object is registered to the respective screen context object.
    2. After setting the actions object to the context the screen asks for the list view instance from the context object as same as we got the network manager.
    3. After getting the list view customized for the current screen context, the we set the data that need to rendered as list to the list view helper and then ask the list view helper to provide the render-able items on the screen with the action buttons also added.
Hope that the idea is clear and this idea can be adopted for various purposes, the demo was on the networking and the Dynamic UI using the List View. 

Also sure that you might have enjoyed this, there are also many posts on the chat-bot and other interesting stuffs, Subscribe and keep watching !!



Labels:

Comments

Post a Comment

Popular posts from this blog

How to access the each view of item by position in Recycler View in android ?

How to access the each view of item by position in Recycler View in android ? There are some methods to access the view of each item view to change or update the view during the run time. To access the view of the item view , consider the Recycler view as below, RecyclerView mainRecyclerView = (RecyclerView)view.findViewById(R.id.main_recycler_view); RecyclerAdapter adapter = new RecyclerAdapter(mContext); mainRecyclerView.setAdapter(adapter); main.setLayoutManager(new LinearLayoutManager(mContext));  To access the itemView of each position the following functions can be used,  1. View itemView = mainRecyclerView.getChildAt(positionOfItem);  2. View itemView = mainRecyclerView.findViewHolderForAdapterPosition(Position).itemView;  3. View itemView = mainRecyclerView.findViewHolderForPosition(Position).itemView;  4. Long itemId = mainRecyclerView.getAdapter().getItemId(position);       View itemView = mainRecyclerView....
3 comments
Read more

How Machine Learning Works ? - Data Rules the Kingdom

W elcome Back Readers !, For those who have not read the previous post on How Machine Learning works ? Please do read previous one before continuing this so that it would be more easy to understand. You can find the previous post here How Machine Learning Works ? - Mathematics Every Where . For other who are ready to join with me in this journey to understand the Machine Learning, Thank you for being with this post. Till now we are discussing on the the title "How Machine Learning works? " and to understand that we have seen in the first post that there exist the patterns or trends in the data and we try to find that in terms of a mathematical equation called a model and try to fit to the new data that we have not came across for predicting the values. Wow may be we got the entire process complete with this. But there are few thinks that needs to be cared while training the model or creating the model or while processing the data for the model creation. ...
3 comments
Read more

Machine Learning - Types of Learning - Explained

W elcome back readers !! So far we are trying to understand the Machine learning in a simple way, keeping the beginners context in mind ! This is one more post, I thought I would write on explaining the various learning types in the Machine Learning. Obviously the word says "Machine Learning" - means machine learn something. How do machine can learn something is what we understood in our various posts before ( here ). We will see about how many types of learning are possible by the machines. Here when I say types of learning, I say about the various classification of learning procedures (Algorithm - Step by step procedure to solve a problem). Types of Learning: Following types of learning procedures can be identified, Regression Classification Clustering Rule association  Ensemble  Reinforcement Deep Learning I can understand that this sounds Greek and Latin now, trust me I will make you understand all this in easy way. We can't cover all the types...
2 comments
Read more