Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

create & use API for coding UI controls that spans PHP/JavaScript #4116

Closed
diosmosis opened this issue Sep 4, 2013 · 4 comments
Closed

create & use API for coding UI controls that spans PHP/JavaScript #4116

diosmosis opened this issue Sep 4, 2013 · 4 comments
Labels
Task Indicates an issue is neither a feature nor a bug and it's purely a "technical" change.

Comments

@diosmosis
Copy link
Member

At the moment, there is no set of practices/concepts that guide the way UI controls are coded. The general process to add one seems to be:

  1. Add controller action that echo's HTML via a template.
  2. In the template, add JavaScript to add behavior.
  3. Sometimes, the JavaScript is moved to a separate file and the template just invokes a function in that file.

This works, but results in messy, unclear code and does not make reusing controls easy. I think a better way to organize code (across both JavaScript & PHP) is to architect UI controls like this:

  1. Create a class for the control server side that derives from a UIControl base (which in turn derives from Piwik\View).
  2. Define properties (as are done currently for ViewDataTable) to allow PHP code to configure the UIControl & create a template that uses those properties.
  3. Create a controller action that echos the control.
  4. Create a JavaScript class that derives from a JavaScript UIControl class. This class will handle generic behavior such as asset cleanup, element resize detection, automatic initialization after ajax and anything else that comes up.
@mattab
Copy link
Member

mattab commented Sep 6, 2013

Would the value be for core devs, or would this improvement also help plugin developers?

@anonymous-matomo-user
Copy link

In 6d884e1: Refs #3089, #4116, display visitor profile popup when visit in realtime map is clicked.

Notes:

  • Includes new UIControl base type.
  • Fixes cleanup bugs in realtime map and popover closing.
  • Refactored realtime map so as little JavaScript as possible is included in HTML fragments.
  • Allow more than one realtime map to exist on a single page.

@anonymous-matomo-user
Copy link

In 9479953: Refs #4116, move initElements code to utility function in UIControl.

@mattab
Copy link
Member

mattab commented Apr 5, 2014

We will continue this work and move to use more AngularJS based solutions, which have cool advantages like unit testing, dependency injections. In general we'll aim to build a light client app in Javascript, and the server side will move to APIs (almost no controllers).

See ticket AngularJS in Piwik #4691

@diosmosis diosmosis added this to the Future releases milestone Jul 8, 2014
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
Refs matomo-org#3089, matomo-org#4116, display visitor profile popup …
6d884e1 
…when visit in realtime map is clicked.

Notes:
  - Includes new UIControl base type.
  - Fixes cleanup bugs in realtime map and popover closing.
  - Refactored realtime map so as little JavaScript as possible is included in HTML fragments.
  - Allow more than one realtime map to exist on a single page.
sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
Refs matomo-org#4116, move initElements code to utility function in U…
9479953 
…IControl.
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Task Indicates an issue is neither a feature nor a bug and it's purely a "technical" change.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@diosmosis @mattab @anonymous-matomo-user