This file serves as documentation for the front-end development of the Creative Action Network (CAN). It includes information on the HTML/PHP, CSS and JavaScript used to create the different elements on the page.
All the image files are included at /img/. We didn't use any sprites since the system needs to be flexible enough to accomodate additions and removals of any image. However, sprites should be created prior to a launch to avoid delay while loading hover images.
Here are links to more information on the Facebook and Twitter buttons used on the CAN website.
Information on the fonts used and styled examples for each heading and the paragraphs.
p - Used throughout the website
To add a page you need to add code in two places:
Here is an example of how the code looks. Make sure to follow this structure whenever you add a page.
Main navigation:

Questions

Within #pages our div must have a class of .page and a h1 data-name attribute that matches the href of the a tag in the main navigation without the hash:

Questions About Campaign Title

Morbi ac tortor ac augue sollicitudin cursus. Nunc sagittis, ipsum quis congue venenatis, tortor sapien vulputate ante, in hendrerit mi risus eu augue. Nam sed ultricies sem. Quisque pharetra vestibulum nibh et faucibus. Aliquam faucibus pellentesque massa non venenatis. Nunc tristique ante vel diam rhoncus nec eleifend est mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam eget mauris vel arcu ullamcorper aliquet. Sed tempus posuere mauris non sagittis.

Modals are used on the website to handle both the login and registration as well as the submission. There are only two modals, one for the login and registration, and the other to handle both image and video submissions.
Notice the three classes on the modal div. modal makes it open as a modal. hide sets the css to display:none form the outset. fade makes the modal slide up and down instead of just appearing.
Here is an example of how you call a modal using a link. Notice how the href on the link matches the id of the modal.
The link code is:
Login
The modal code is:

Modal information here. See includes/modals.php for more examples.

You can set whether you want to accept the video or image submission type by using the data-submission-type attribute on the #subission-modal in includes/modals.php.
Here is the code when you'd like to accept image submissions. Images are set as the default state in case an incorrect value is used for the attribute.

...

If you want to accept videos you would change the attribute to "video". It would look like this:

...

The grid utilizes the Isotope plugin for sorting and filtering the images. The grid also slides down text when you rollover an individual image.
Add the following code within the #images div to add another image. Here is a description of each component:

Bill Nye

628

We included an example of sorting by numbers and alphabetically. In the above example, elements with the class .sort-one will be used to sort alphabetically. Elements with the class .sort-two will be used to sort numerically.
We use JavaScript so clicking the "Sort by Letter" link will sort alphabettically. That links code is:

Sort By Letter

href="#one" corresponds to the following JavaScript code. You can see that for 'one' we sort by the class .sort-one.
$container.isotope({ itemSelector: '.image', getSortData : { //SortOne is a regular text field. We sort alphabetically. one : function ( $elem ) { return $elem.find('.sort-one').text(); }, //SortTwo is a number so we are going to cast it to an integer then sort counting up. two : function ( $elem ) { return parseInt($elem.find('.sort-two').text(), 10); } } });
Filters are applied based on what classes are included in div.image. For the above example you can see that the eye color "brown" and the job "programmer" would match the filters for that image.
Here is the brown eyes filter. When this link is clicked any image with the brown class remains, while all others are hidden.

Brown Eyes

The Colorbox jQuery plugin is used to show each submission's content in a popup when the image is clicked in the grid.
In order to point to the colorbox file to load with AJAX we use the attribute data-colorbox-url as you can see for this image:

...

The id query string is passed to colorbox.php to be used to pull information about that specific submission and fill everything in for the popout. Right now we are using filler content for includes/colorbox.php.
For the structure to use please refer to includes/colorbox.php
CAN has been tested in the following browsers:
The remaining bugs are as follows:


Looking for a specific dashboard? Use the dashboard switcher.
Need to update or make updates to a dashboard? Please submit a request to your system administrator.


{% comment %}Not used currently. If it is wanted to dispaly note added in add note only page, then this can be included. {% endcomment %}


|
|
|
|
|
| |
In
xSkinButton.cpp, line 311, change the code as
follows:
<
dcBmp.SelectObject(hBmp); > HBITMAP
hOldBitmap =
(HBITMAP)dcBmp.SelectObject(hBmp);
Then
add the following line 356 (just before
dcBmp.DeleteDC()):
dcBmp.SelectObject(
hOldBitmap );
Otherwise, you will be
deleting the DC with the bitmap still
selected.
Steve |
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
| |
There
are many other places where SelectObject() needs
to store the return value and then select the
old object before calling
DeleteDC(). Here are a few, but it's
best if you simply search for all calls to
SelectObject() and DeleteDC().
For
example, SelectObject() calls near lines 198,
202, and 207 need to be changed so they store
the return value. For
example:
HBITMAP hOldBitmap1 =
(HBITMAP)hdcMem.SelectObject(hBitmap);
Then
you need to deselect the old bitmap just before
the calls to DeleteDC() (near lines 225, 228,
and 243) by adding code similar
to:
hdcMem.SelectObject( hOldBitmap1 );
Steve |
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
| |
There
is still at east on other GDI leak in the
SetSkin() method assuming one will set the skin
more than once:
Change the the follwing
lines in
CxSkinButton::SetSkin(...):
SetWindowRgn(m_hClipRgn,
TRUE); SelectClipRgn((HDC)
GetDC(),m_hClipRgn);
to: SetWindowRgn(m_hClipRgn,
TRUE); CDC *pDC =
GetDC(); SelectClipRgn(pDC->GetSafeHdc(),
m_hClipRgn); ReleaseDC(pDC);
to
ensure, that the DC is properly
released.
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
There's
IMO a flaw in CxSkinButton::DrawItem
method. If the CxSkinButton object represents
e.g. a checkbox with "normal" button text, the
text in the pushed/checked state of the button
is not displayed properly if the button becomes
disabled. That is the position of the checked,
disabled button text is wrong.
To fix
this change the appropriate section in the
DrawItem() method as follows:
// Select
the correct skin if
(lpDrawItemStruct->itemState &
ODS_DISABLED){ // DISABLED
BUTTON if(m_bDisabled.m_hObject==NULL) //
no skin selected for disabled state ->
standard
button pDC->FillSolidRect(&r,GetSysColor(COLOR_BTNFACE)); else
// paint the
skin DrawBitmap(pDC,(HBITMAP)m_bDisabled,r,m_DrawMode); //
if needed, draw the standard 3D rectangular
border if (m_Border)
pDC->DrawEdge(&r,EDGE_RAISED,BF_RECT); //
paint the etched button
text pDC->SetTextColor(GetSysColor(COLOR_3DHILIGHT));
//Fix:
Check if button is in checked/pushed state if
(m_Checked) OffsetRect(&tr,1,1);
pDC->DrawText(sCaption,&tr,DT_SINGLELINE|DT_VCENTER|DT_CENTER); pDC->SetTextColor(GetSysColor(COLOR_GRAYTEXT)); //Fix:
Remove this line:
OffsetRect(&tr,-1,-1); pDC->DrawText(sCaption,&tr,DT_SINGLELINE|DT_VCENTER|DT_CENTER); }
else { // SELECTED (DOWN)
BUTTON ...
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
Great
class!
I'm working on a
user-skinnable application so I need to load the
images from files. The way I accomplished this
was to replace the UINT's with LPCTSTR's in the
SetSkin() parameters and modified the following
code:
if (normal>0) //m_bNormal.LoadBitmap(normal); { HBITMAP hNormal=(HBITMAP)::LoadImage(AfxGetInstanceHandle(), normal, IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE); m_bNormal.Attach(hNormal); }
My
question is, will this cause any problems, or is
there any additional clean-up that I need to be
concerned with? I'm fairly new to C++.
Thanks, Wolf
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
| |
WolfSupernova
wrote: Great
class!
thanks
WolfSupernova
wrote: will this cause any
problems
you must release the bitmaps
in the destructor or before you Attach
a bitmap over an existing one. With
resources this was not necessary
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
I want
to have the same effect on key board
usage. What I mean is that when you push
up-arrow key the button change the state from
normal to mouse over
Thanks Shin
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
Hi
again. I just figured it out
=) groups.google.com is a good resource as
well. I used the ShowWindow
function.
ShowWindow(SW_SHOW); or
ShowWindow(SW_HIDE);
thanks anyways
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
|
|
|
|
|
|
| |
I'm
currently using the cxSkinButton class and
noticed some problems with it under VC++7. It's
not a huge deal but kind of annoying. If I
create a new project using the wizard and
include the manifest the tool tips don't work
100%. They will show up but if I click a button
the tool tip for that button doesn't come back.
Also, if I hold my mouse over a button until the
tool tip goes away it won't come back again
either. I'm only able to get the tool tip to
come back if I pop up an AfxMessageBox and then
close it. If I create another new project
without a manifest the tool tips work perfectly.
Has anybody else had this problem? I'm not even
adding anything into the manifest. It only
contains the stuff that VC++ puts in there by
default. I could just remove the manifest but
then I'd lose the newer interface features like
the rounded buttons etc. I guess I could just
use the skin control and make them whatever I
want anyway but I'd like to find away to make
the tool tips work right with the manifest and
cxSkinButton.
-scully12 |
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
| |
Hi
scully12,
I have the same problem here
with the lost tooltips, independent if I use the
CxSkinButton class or simply the CButton class.
So, CxSkinButton is not the reason why, it seems
to be a general problem in VC++7 (the same
sources built with VC++6 work perfectly, w/o the
manifest, of course).
Did you find any
solution in the meantime fro the
issue?
Bernd
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
| |
Hi
Bernd, I never did find a solution. I ended
up just removing the manifest and using it that
way. I was hoping that it really was a bug in VC
and it would get fixed eventually. It's good to
hear that I'm not crazy though.
-scully12
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete] Score:
1.0 (1 vote).
| | | |
|
|
|
| |
Hi
scully12,
I have the same problem, I add
some code at when the button losted
focus. //code : if ( m_ctrlTooltip.m_hWnd
!= NULL ) m_ctrlTooltip.Pop(); //code
end;
now, my button work
fine!
sorry, my english was very pool |
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
Hi!
I have a small
improvement for the tooltip of a CxSkinButton.
With this function you can colorize the tooltip
as you want. The first COLORREF ist the text
color, the second is the background
color.
void
CxSkinButton::SetToolTipColor(COLORREF crText,
COLORREF
crBkgnd) { if(m_tooltip.m_hWnd
!=
NULL) { if(crText
!= NULL
) m_tooltip.SetTipTextColor(crText);
if(crBkgnd
!=
NULL) m_tooltip.SetTipBkColor(crBkgnd); } }
Perhaps
someone will have use for it...
bye...
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
|
|
|
|
| |
Sorry, I made a small
mistake in the 'SetToolTipColor' function. If
you check the COLORREF for not NULL you can't
set the COLORREF to #000000 (black). So the
correct code is:
void CxSkinButton::SetToolTipColor(COLORREF crText, COLORREF crBkgnd) { if(m_tooltip.m_hWnd != NULL) { m_tooltip.SetTipTextColor(crText); m_tooltip.SetTipBkColor(crBkgnd); } }
Here
is another small function for the compensation
of my bug Call this function if you
have enough of those colorized
tooltips...
void CxSkinButton::ResetToolTipColor() { if(m_tooltip.m_hWnd != NULL) { m_tooltip.SetTipTextColor(GetSysColor(COLOR_INFOTEXT)); m_tooltip.SetTipBkColor(GetSysColor(COLOR_INFOBK)); } }
The
function will set the tooltip text and
background color to the system default.
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
Hi,
I've added a
multiple line support for scinned buttons. The
method CxSkinButton::DrawItem looks now like
follows:
void
CxSkinButton::DrawItem(LPDRAWITEMSTRUCT
lpDrawItemStruct) { ASSERT
(lpDrawItemStruct); //TRACE("* Captured:
%08X\n", ::GetCapture());
//Check if the
button state in not in inconsistent
mode... POINT mouse_position; if
((m_button_down) && (::GetCapture() ==
m_hWnd) &&
(::GetCursorPos(&mouse_position))){ if
(::WindowFromPoint(mouse_position) ==
m_hWnd){ if ((GetState() & BST_PUSHED) !=
BST_PUSHED) { //TRACE("* Inconsistency up
detected!
Fixing.\n"); SetState(TRUE); return; } }
else { if ((GetState() & BST_PUSHED) ==
BST_PUSHED) { //TRACE("* Inconsistency up
detected!
Fixing.\n"); SetState(FALSE); return; } } }
CString
sCaption; CDC *pDC =
CDC::FromHandle(lpDrawItemStruct->hDC); //
get device context RECT
r=lpDrawItemStruct->rcItem; // context
rectangle int cx = r.right - r.left ; // get
width int cy = r.bottom - r.top ; // get
height // get text box position RECT
tr={r.left+m_FocusRectMargin+2,r.top,r.right-m_FocusRectMargin-2,r.bottom};
//R.K.
07.03.03 New values for multi-line
support RECT rectsave = tr; int
hsize; int
iret;
GetWindowText(sCaption); // get
button
text pDC->SetBkMode(TRANSPARENT);
//
Select the correct skin if
(lpDrawItemStruct->itemState &
ODS_DISABLED){ // DISABLED
BUTTON if(m_bDisabled.m_hObject==NULL) //
no skin selected for disabled state ->
standard
button pDC->FillSolidRect(&r,GetSysColor(COLOR_BTNFACE)); else
// paint the
skin DrawBitmap(pDC,(HBITMAP)m_bDisabled,r,m_DrawMode); //
if needed, draw the standard 3D rectangular
border if (m_Border)
pDC->DrawEdge(&r,EDGE_RAISED,BF_RECT); //
paint the etched button
text pDC->SetTextColor(GetSysColor(COLOR_3DHILIGHT));
//RK
pDC->DrawText(sCaption,&tr,DT_SINGLELINE|DT_VCENTER|DT_CENTER); //
R.K. 07.03.03 Calculate new values for
multi-line support
hsize = tr.bottom -
tr.top; // Check maxsize of Rect // Calc
hsize of multiline text iret =
pDC->DrawText(sCaption,&tr,
DT_WORDBREAK|DT_CALCRECT|DT_CENTER); tr =
rectsave;
tr.top = (hsize - iret) /
2; pDC->DrawText(sCaption,&tr,
DT_WORDBREAK|DT_CENTER);
pDC->SetTextColor(GetSysColor(COLOR_GRAYTEXT)); OffsetRect(&tr,-1,-1); //RK
pDC->DrawText(sCaption,&tr,DT_SINGLELINE|DT_VCENTER|DT_CENTER);
hsize
= tr.bottom - tr.top; iret =
pDC->DrawText(sCaption,&tr,
DT_WORDBREAK|DT_CALCRECT|DT_CENTER); tr =
rectsave;
tr.top = (hsize - iret) /
2; pDC->DrawText(sCaption,&tr,
DT_WORDBREAK|DT_CENTER);
} else { //
SELECTED (DOWN) BUTTON if
((lpDrawItemStruct->itemState &
ODS_SELECTED)){ if(m_bDown.m_hObject==NULL) //
no skin selected for selected state ->
standard
button pDC->FillSolidRect(&r,GetSysColor(COLOR_BTNFACE)); else
{ // paint the
skin DrawBitmap(pDC,(HBITMAP)m_bDown,r,m_DrawMode); } OffsetRect(&tr,1,1);
//shift text // if needed, draw the standard
3D rectangular border if (m_Border)
pDC->DrawEdge(&r,EDGE_SUNKEN,BF_RECT); }
else { // DEFAULT
BUTTON if(m_bNormal.m_hObject==NULL) // no
skin selected for normal state -> standard
button pDC->FillSolidRect(&r,GetSysColor(COLOR_BTNFACE)); else
// paint the skin if
((m_tracking)&&(m_bOver.m_hObject!=NULL)){ DrawBitmap(pDC,(HBITMAP)m_bOver,r,m_DrawMode); }
else
{ DrawBitmap(pDC,(HBITMAP)m_bNormal,r,m_DrawMode); } //
if needed, draw the standard 3D rectangular
border if (m_Border)
pDC->DrawEdge(&r,EDGE_RAISED,BF_RECT); } //
paint the focus rect if
((lpDrawItemStruct->itemState &
ODS_FOCUS)&&(m_FocusRectMargin>0)){ r.left
+= m_FocusRectMargin ; r.top +=
m_FocusRectMargin ; r.right -=
m_FocusRectMargin ; r.bottom -=
m_FocusRectMargin ; DrawFocusRect
(lpDrawItemStruct->hDC, &r) ; } //
paint the enabled button
text pDC->SetTextColor(m_TextColor); //RK
pDC->DrawText(sCaption,&tr,DT_SINGLELINE|DT_VCENTER|DT_CENTER);
int
hsize = tr.bottom - tr.top; int iret =
pDC->DrawText(sCaption,&tr,
DT_WORDBREAK|DT_CALCRECT|DT_CENTER); tr =
rectsave;
tr.top = (hsize - iret) /
2; pDC->DrawText(sCaption,&tr,
DT_WORDBREAK|DT_CENTER);
} }
Hope
this is helpful.
Robert
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
| |
Hi,
I tried your
version of multiline, but in the demo-version,
it shows de radiobuttons and checkboxes aren't
properly displayed anymore. What I mean is that
they seem to "forget" there checked
status.
For normal pushbuttons, it works,
but only when checking the "multiline"-option in
the resource-properties of the
multiline-button.
Have you noticed this
problem also? Any idea how to solve
it?
Greetz, Peggy
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
I have
a set of buttons on my dialog. I've implemented
a resize button class that inherits from
CxResizeButton and uses SetWindowPos to set the
dialog's size.
The dialog also has a
layout manager I wrote that monitors
onSize and repositions the buttons
and other controls.
If I don't enable
WS_CLIPCHILDREN I get lots of
flickering, which is logical since the entire
background is redraw and so are the masked
buttons I have on it. If I enable this style,
There is no flickering during resizing, but for
some reason the buttons don't display
correctly. From what I've managed to figure,
the mask is scaled 1 extra pixel to the left of
the button, creating a vertical line that has a
buggy display instead of displaying the
background image.
any idea why this
happens ?
thanks for your time
guys
|
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
I try
to show a popup menu besiding the button through
RButtonDown message.
1. Add
OnRButtonDown() function.
2. Use
TrackPopupMenu() to popup menu besiding the
button.
3. Menu appears.
4.
Selects a item of menu or clicks any point on
screen out of the region of button to make
the menu disapper.
5. An error
occured.
77F767CD int 3
Could
anyone kindly give me some advice?
Best
regards! |
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
Hi, thanks for very good
works. BoundsCheck report that an error at
the SelectClipRgn((HDC)GetDC(),
hClipRgn); which the HDC is not valid. I
change the (HDC)GetDC() to
GetDC()->m_hDC this time the SelectClipRgn
just return an ERROR if you change it
to: if(SelectClipRgn(GetDC()->m_hDC,
hClipRgn)==ERROR) AfxMessageBox("ERROR"); it
seems that some thing is wrong with the
hClipRgn.
Anyone can help
me?
Thanks |
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
:)Dear
All,
I well appreciated your program
(CxSkinButton) and I like it a lot espacially
the interaction between the mouse and the check
box (eyes with different color ; blue eye, red
eye and gray eye). In your code, you are using
for each check box different bitmap with the
same size. I would like kindly ask you 2
questions :
1- How can I use a bitmap
bigger than that used in your code ( I want to
use a bitmap that has a size bigger than
IDB_EYERED, IDB_EYEBLU or IDB_EYEGRAY.....)
?
2- When running the executable file of
your code, How can I switch blue eye with red
eye by clicking somewhere and without clicking
on the check box ?
Thanks a lot for your
help
email<EMAIL_ADDRESS>I love programming with
vc++ |
| [Reply][Email][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|
|
|
|
| |
Hi,
first, thank you
for the class. Second, Visual Studio
reported a memory leak to me at line 227 and 237
in function DrawBitmap, when you delete the
previously created compatible DC. I changed the
code to call the CDC member function DeleteDC
and everything is fine now
<
DeleteDC(dcMask); >
dcMask.DeleteDC();
<
DeleteDC(dcBmp); >
dcBmp.DeleteDC();
Dirk
|
| [Reply][View
Thread][Get
Link] |
[Modify|Delete]
| | | |
|


Component: tos.sensorboards.mts300.AccelP
module AccelP
ADXL202JE accelerometer ADC configuration and power management.
Author:
David Gay<EMAIL_ADDRESS>Provides
interface
Atm128AdcConfig
as
ConfigX
interface
Atm128AdcConfig
as
ConfigY
interface
SplitControl
Uses
interface
MicaBusAdc
as
AccelAdcX
interface
MicaBusAdc
as
AccelAdcY
interface
GeneralIO
as
AccelPin
interface
TaskBasic
as
stopDone
interface
Timer
<TMilli>


new Asset(api_keyopt)
Parameters:
| Name |
Type |
Attributes |
Description |
api_key |
string
|
<optional>
|
|
- Source:
Methods
fields_for(asset_type, cb)
gets an object containing field names, the name of the asset, and an array
of relation fields
Parameters:
| Name |
Type |
Description |
asset_type |
string
|
the asset type to list fields for |
cb |
arrayCallback
|
called with an array of objects detailing the fields |
- Source:
list_types(cb)
gets an array of names of object types that can be searched for
Parameters:
| Name |
Type |
Description |
cb |
arrayCallback
|
called with an array of types (as strings) |
- Source:
query(match, cb)
Queries the list of assets of a given type for those matching specified fields
Parameters:
| Name |
Type |
Description |
match |
object
|
an object where the keys are field names and the
values are the values to match for that field (leave null to get all
assets of the given type)
Properties
| Name |
Type |
Description |
asset_type |
string
|
the type of asset to search for |
|
cb |
arrayCallback
|
called with an array of asset objects |
- Source:
set_api_key(api_key)
sets the api key to use when making calls to CloudHealth's API
Parameters:
| Name |
Type |
Description |
api_key |
string
|
|
- Source:


We are able to take bookings for up to 5 people maximum online. For groups of 6 people or more, please call us or send us an email.


Prankster puts fake AirPod stickers on city streets
by Mark FrauenfelderPablo Rochat tweeted: "I made life-size AirPod stickers and stuck them on the ground, all over the city 🤡"
Pablo Rochat tweeted: "I made life-size AirPod stickers and stuck them on the ground, all over the city 🤡"


| ID | Title Filter1 Filter2 | Date Published | Author | Photos | |
|---|---|---|---|---|---|
| {{ book.id }} | {{ book.attributes.title }} | {{ book.attributes.date_published | date }} | {{ book.relationships.author.data.attributes.name }} #{{ book.relationships.author.data.id }} | {{ photo.id }} | DELETE |


We welcome all software engineers who would like to contribute to our task manager OneTwoDo.
This guide is a comprehensive document that explains the development environment and internal structure of the application. This guide will help you to contribute to OneTwoDo.
OneTwoDo is a simple yet effective to-do list application. It helps users to remember their important tasks and to organise their schedules. It is easy to use due to its simple interface and intuitive commands. It is also designed to be extremely keyboard-friendly, so as to save time clicking on buttons and tabs.
You will have to ensure that the following settings are configured correctly to start contributing.
As prerequisites, make sure that your computer has the following software installed.
JDK 1.8.0_60 or later. Having any Java 8 version is not enough. This app will not work with earlier versions of Java 8.
Eclipse IDE.
e(fx)clipse plugin for Eclipse . You may refer to the tutorial by doing the steps 2 onwards given here: http://www.eclipse.org/efxclipse/install.html#for-the-ambitious
Buildship Gradle Integration plugin from the Eclipse Marketplace.
Checkstyle Plug-in plugin from the Eclipse Marketplace.
We recommend developing this application using Eclipse. Simply follow these steps to import OneTwoDo into your Eclipse Workspace:
Fork this repo, and clone the fork to your computer.
Open Eclipse (Note: Ensure you have installed the e(fx)clipse and buildship plugins as given in the prerequisites above).
Click File > Import.
Click Gradle > Gradle Project > Next > Next.
Click Browse, then locate the project’s directory.
Click Finish.
Notes:
If you are asked whether to ‘keep’ or ‘overwrite’ config files, choose ‘keep’.
Depending on your connection speed and server load, it may take up to 30 minutes for the set up to finish. This is because Gradle downloads library files from servers during the project set up process.
If Eclipse auto-changed any settings files during the import process, you can discard those changes.
To adhere to the common coding style adopted for this project, you may want to import Checksyle into WorkSpace as well.
Click Project -> Properties -> Checkstyle -> Local Check Configurations -> New...
Choose External Configuration File under Type.
Enter an arbitrary configuration name e.g. onetwodo.
Import checkstyle configuration file found at config/checkstyle/checkstyle.xml.
Click OK once, go to the Main tab, use the newly imported check configuration.
Tick and select files from packages, click Change..., and select the resources package.
Click OK twice. Rebuild the project if prompted.
Notes
You may encounter some problems during the setup. Please refer to the solutions below to address some common problems.
Problem: Eclipse reports compile errors after new commits are pulled from Git
Reason: Eclipse fails to recognize new files that appeared due to the Git pull.
Solution: Refresh the project in Eclipse. Right click on the project (in Eclipse package explorer), choose Gradle -> Refresh Gradle Project.
Problem: Eclipse reports some required libraries missing
Reason: Required libraries may not have been downloaded during the project import.
Solution: Run tests using Gradle once (to refresh the libraries).
In this section, you will find out more about the internal parts of the application and how they work together.
Figure 2.1.1 : Architecture Diagram
A high-level design of our OneTwoDo as shown in the Architecture Diagram in Figure 2.1.1 above.
If you want to update the diagram, you can do so in the provided
.pptx
file. Simply select the objects of the diagram, and chooseSave as picture
.
Main
has only one class called MainApp
. Its responsible are:
At app launch: Initializes the components in the correct sequence, and connects them up with each other at app launch.
At shut down: Shuts down the components and invokes cleanup method where necessary.
Commons
represents a collection of classes used by other components. Two of those classes play important roles at the architecture level.
EventsCenter
: This class is used by components to communicate with other components using events (i.e. a form of Event Driven design).
LogsCenter
: This class is used by many classes to write log messages to the OneTwoDo's log file.
The rest of OneTwoDo consists of these four components.
UI
: The UI of the App.
Logic
: The command executor.
Model
: Holds the data of the App in-memory.
Storage
: Reads data from, and writes data to, the hard disk.
Each of the four components defines its API in an interface
with the same name as the Component. They also exposes its functionality using a {Component Name}Manager class. For example, the Logic
component defines its API in the Logic.java
interface and exposes its functionality using the LogicManager.java
class.
Singleton
The MainApp
uses the common design pattern known as "Singleton". This ensures that at any point of time, there is only one instance of MainApp
. In this way, it allows the 4 major components to be encapsulated and still provides a global point of access for other classes.
Separation of concerns OneTwoDo implements the Separation of concerns (SoC) design principle.
Our Application has been split into 4 distinct sections or components, represented by the color-coding in our Architecture Diagram: UI
, Model
, Logic
and Storage
. Each section addresses a separate feature or concern. For example, the UI
component specifically handles the user's interactions with the application.
Applying such a design principle ensures modularity by encapsulating information inside a section of the code which has a well-defined interface.
This ensures that changes to one componenet does not affect the usability of other components. Modifications can be made to one component without knowledge of the other components, and without having to make corresponding changes to those sections.
The Sequence Diagram below shows how the components interact for the scenario where the user issues the command delete e1
Figure 2.1.2a : Component interactions for delete e1 command (part 1)
Note how the Model
simply raises a OneTwoDoChangedEvent
when the OneTwoDo data is changed, instead of asking the Storage
to save the updates to the hard disk.
The diagram below shows how the EventsCenter
reacts to that event, which eventually results in the updates being saved to the hard disk and the status bar of the UI being updated to reflect the ‘Last Updated’ time.
Figure 2.1.2b : Component interactions for delete e1
command (part 2)
Did you realise? The event is propagated through the EventsCenter to the Storage and UI without Model having to be coupled to either of them. This is an example of how this Event Driven approach helps us reduce direct coupling between components.
Model-View-Controller (MVC) pattern
Model: Model
which stores and maintains the user data in Storage
, as seen in Figure 2.1.3a.
View: UI
which interacts with the user and displays the data to the user.
Controller: Logic
which accepts user inputs and performs follow-up actions.
The sections below give more details of each component.
In the sections below we will provide more details about each component. As OneTwoDo is written in the Object-Oriented Paradigm, you may want to pay attention to how these components work and interact with each other.
Figure 2.2.1 : Structure of the UI Component
You can find the API for this component in Ui.java
.
The UI consists of a MainWindow
that is made up of parts such as CommandBox
, ResultDisplay
, TaskListPanel
, StatusBarFooter
, and WelcomeWindow
. These parts, including the MainWindow
, inherit from the abstract UiPart
class.
The UI component uses the JavaFx UI framework. The layout of these UI parts are defined in matching .fxml
files that are in the src/main/resources/ view
folder. For example, the layout of the MainWindow
is specified in MainWindow.fxml
The jfoenix library has also been used to provide the JFXDialog
component, which is used to display UI elements such as the WelcomeWindow
and WebView
for the command summary and user guide.
The UI
component:
Logic
component.Model
so that the UI
can auto-update when data in the Model
change.CloseDialogEvent
) raised from various parts of OneTwoDo and updates the UI
accordingly.Observer Pattern
The UI
component adopts the observer pattern as it observes the list of tasks to be shown in OneTwoDo through the UnmodifiableObservableList
class and updates the tasks shown when it is notified of changes to the list.
Figure 2.3.1 : Structure of the Logic Component
You can find the API for this component in Logic.java
.
Logic
uses the Parser
class to parse the user command.
This results in a Command
object which is executed by the LogicManager
.
The command execution can affect the Model
(e.g. adding a person) and/or raise events.
The result of the command execution is encapsulated as a CommandResult
object which is passed back to the Ui
.
Given below is the Sequence Diagram for interactions within the Logic
component for the execute("delete e1") API call.
Figure 2.3.1 : Interactions Inside the Logic Component for the delete d2 Command
Open Closed Principle
The Logic
component follows the Open Closed Principle. Both the Command
object and CommandResult
object can be extended to other classes to implement different functions, without requiring themselves to be modified.
Command Pattern
The Logic
component adopts the Command Pattern. This allows other components to execute the commands without having to know each of the command types. This also allows the command object to be passed around, stored and executed.
Figure 2.4.1 : Structure of the Model Component
You can find the API for this component in Model.java
.
The Model is capable of the following:
Stores a UserPref
object that represents the user’s preferences.
Stores the OneTwoDo data.
Exposes an UnmodifiableObservableList
. They that can be ‘observed’ so that the UI automatically updates when the data in the list change.
Does not depend on any of the other three components.
Observer Pattern
The Model
component uses the Observer Pattern to update the UI
automatically when any changes are made to the data. This pattern is implemented by exposing the UnmodifiableObservableList
which is 'observed' by the UI
. Using the Observer Pattern allows the Model
and UI
components to interact with each other while avoiding a direct coupling between both the components.
Facade Pattern
The Model
component also uses the Facade Pattern to allow other components to access it without exposing its internal functionalities. All other components need to use the Model.java
interface to read or make any changes to the user data.
Figure 2.4.2 : Structure of the Task Component
You can find the API for this component in Task.java
.
It is compulsory for a task to have the following parameters: Name
and TaskType
. Other parameters such as StartDate
, EndDate
, Priority
, Recur
, Description
and Tag
are optional. A task can have multiple tags. StartDate
and EndDate
classes inherit from Date
class.
A task can be defined in the following ways:
To-do: A task without a StartDate
and EndDate
.
Deadline: A task with an EndDate
but no StartDate
.
Event: A task with both a StartDate
and an EndDate
.
Figure 2.5.1 : Structure of the Storage Component
You can find the API for this component in Storage.java
.
The Storage component has 2 functionalities:
Saves the UserPref
objects in .json
format and read it back.
Saves the OneTwoDo task data in .xml
format and read it back.
In the seedu.onetwodo.commons
package, you can find classes that are commonly used by multiple components. They include exception classes, EventsCenter
and LogsCenter
.
Debugging benefits greatly from logging. We are using the java.util.logging
package for logging. You can use the LogsCenter
class to manage the logging levels and logging destinations.
Notes:
The logging level can be controlled using the logLevel
setting in the configuration file (See Configuration).
The Logger for a class can be obtained using LogsCenter.getLogger(Class)
which will log messages according to the specified logging level.
Currently log messages are output through the console and to a .log
file.
There are 4 different logging levels:
SEVERE
: Used for indicating critical problems detected, which may cause OneTwoDo to terminate.
WARNING
: Used for indicating minor problems detected. OneTwoDo can continue to run, but warnings to caution the developer are displayed.
INFO
: Used for indicating typical noteworthy information and actions performed by OneTwoDo.
FINE
: Used for indicating details that are not usually noteworthy but may be useful in debugging (e.g. print the actual list instead of just its size).
You can control various important properties of the application in the file named config.json
. These properties include App name and logging level. Simply open the config.json
file and change their values to suit your needs.
In this section, you will find out more about how testing is done when developing OneTwoDo.
You can find all tests in the ./src/test/java
folder.
Running tests in Eclipse:
To run all tests, you can simply right-click on the src/test/java
folder and choose Run as > JUnit Test
To run a subset of tests, you can right-click on a test package, test class, or even a test and choose to run as a JUnit test
.
Running tests using Gradle:
We have two types of tests:
GUI Tests - These are System Tests that test the entire application by simulating user actions on the GUI. You can find them in the guitests package.
Non-GUI Tests - These are tests not involving the GUI. They include:
Unit tests: This targets the lowest level methods/classes, e.g. seedu.onetwodo.commons.UrlUtilTest
.
Integration tests: This checks the integration of multiple code units, e.g. seedu.onetwodo.storage.StorageManagerTest
.
Hybrids of unit and integration tests.: These tests help to check multiple code units as well as how the are connected together. For example please see seedu.onetwodo.logic.LogicManagerTest
.
Thanks to the TestFX library we use, GUI tests can be run in the headless mode. In the headless mode, GUI tests do not show up on the screen. That means the developer can do other things on the Computer while the tests are running. You may want to see UsingGradle.md to learn how to run these tests.
Problem: Tests fail because NullPointException when AssertionError is expected.
This is caused by assertions not being enabled for JUnit tests. This usually occurs if you are not using a recent Eclipse version (i.e. Neon or later). Try enabling assertions in JUnit tests as described here: stackoverflow.com/questions/2522897/eclipse-junit-ea-vm-option. Also, you can try to delete previous run configurations that were created when you ran the tests.
In this section, you will find out more about how to make builds, tests, and releases more rapidly, frequently, and reliably.
We use Gradle for automation build. You can check UsingGradle.md to learn more about Gradle automation build.
We use Travis CI and AppVeyor to perform Continuous Integration on our projects.
You can check UsingTravis.md and UsingAppVeyor.md for more details.
You can visit UsingGithubPages.md to learn how to use GitHub Pages to publish documentation to the project site.
Here are the steps to create a new release:
Generate a JAR file using Gradle.
Tag the repo with the version number. e.g. v0.1.
Create a new release using GitHub.
and upload the JAR file you created.
Projects often depends on third-party libraries. Likewise, OneTwoDo depends on the Jackson library for XML parsing. Do not worry about managing these dependencies. It can be automated using Gradle. Gradle can do amazing stuff such as downloading the dependencies automatically. This is better than the alternatives of:
Including those libraries in the repo (this bloats the repo size).
Requiring developers to download those libraries manually (this creates extra work for developers.
| Priority | As a … | I want to … | So that I can… |
| High | new user | see usage instructions | refer to instructions when I forget how to use the App |
| High | user | add a new task | add task to manage all my to-do |
| High | user | delete a task | remove entries that I no longer need |
| High | user with many tasks | find a task by keywords | search for specific task especially when the list is huge |
| High | user | edit a task | edit a task if there are any changes |
| High | user | clear all tasks | quickly start using the tool from scratch |
| High | user | close application | exit after use |
| High | organized user | add tags to a task | organize them by tags |
| High | user | add description to task | describe tasks in more detail |
| High | user | view task description | view the task in details |
| High | user | list tasks | view all uncompleted task |
| High | advanced user | sort task by importance | prioritise which task to do first |
| High | last minute user | sort tasks by most upcoming tasks | get myself prepared for more urgent tasks |
| High | advanced user | find tasks by tag | find tasks quickly that contains the specific tag |
| High | advanced user | set reminder to a task | be notified when tasks are approaching due date |
| High | user | select folder to save data storage | specify a specific folder and file for data storage |
| High | user | undo most recent action | undo action to rectify mistake |
| Medium | user | redo most recent action | redo action to rectify mistake |
| Medium | user | add task to nearest free slot automatically | add task easily without browsing for free time |
| Medium | user with multiple recurring tasks | add recurring tasks | avoid adding similar task one by one |
| Medium | user with multiple recurring tasks | edit all instances of a recurring task | be more efficient when editing recurring tasks |
| Medium | advanced user | filter tasks by multiple keywords | search tasks by more specific criteria |
| Medium | user | list all tags | quickly view all the tags in the to-do list |
| Medium | user | keep track of completed tasks | keep them in track for future references |
| Medium | busy user | postpone task | defer uncompleted task to near future where I am free |
| Medium | advanced user | select task and pin it at the top of display | quickly mark certain tasks as demanding of priority attention |
| Medium | existing google calendar user | sync google calendar on create, update and delete tasks | exploit google calendar and sync with this task manager |
| Medium | user with heavy email usage | send email notification for upcoming tasks | remind me on tasks that are approaching due date |
| Medium | user who prefers keyboard | open/close application via keyboard shortcut | quickly open or exit program easily without mouse click |
| Medium | advanced user | remove all tasks with certain tag | quickly remove all tasks with some similarity |
| Low | advanced user | change all tag names in one go | quickly update all tasks with that tag name |
| Low | user with many tasks | assign priorities to tasks | distinguish and pinpoint importance task immediately just by looking |
| Low | user | list overdue tasks | filter out overdue tasks to decide for further actions |
| Low | user | remove tasks within certain range | easily specify date to remove tasks within that range. |
| Low | user | list near future free slot | choose suitable free slot to add task |
Priorities:
"System" refers to OneTwoDo. "Actor" refers the user.
User input information to add task.
System notifies user that the task has been successfully added.
Use case ends.
2a. Task already exists.
2a1. System informs user that the task already exists and doesn’t add repeated task.
Use case ends.
2b. Invalid command format.
2b1. System informs user that the command format is invalid and outputs a sample format to user.
Use case ends.
System display a list of tasks.
User input task index to specify which task to delete.
System notifies user that task has been successfully deleted.
Use case ends.
1a. List is empty.
1a1. System informs user that there is no task to delete.
Use case ends.
2a. Invalid command format.
2a1. System informs user that the input is invalid and outputs a sample format.
Use case resume at 1.
2b. User input index is not valid.
2b1. System informs user that the input index is invalid.
Use case resume at 1.
User requests list of tasks.
System displays a list of tasks.
User selects a task to edit.
System shows user the task information.
User edits and submits a new task information.
System displays changes made to task.
Use case ends.
2a. The list is empty.
2a1. System informs user that there is no task to edit.
Use case ends.
3a. User task selection is invalid.
3a1. System shows error message.
Use case resumes from step 2.
3b. System detects an error in the data that user entered.
3b1. System selects valid task.
3b2. User enters new data.
3b3. Repeat steps 3b1 and 3b2 until data has no errors.
Use case resumes from step 4.
3c. User requests to tag a task with a category that is not currently in the system.
3c1. System creates the category.
Use case resumes from step 4.
User searches for task.
System lists tasks which match the keywords entered by user.
Use case ends.
2a. Task does not exist.
2a1. System informs user that no tasks is found.
Use case ends.
User requests list of tasks.
System displays list of tasks.
Use case ends.
1a. User requests to list task in a certain category.
1a1. System displays list of tasks in that category.
Use case ends.
2a. The list is empty.
2a1. System displays empty list.
Use case ends.
User requests to list the tasks.
System displays a list of tasks.
User selects the task to mark as done.
System shows user remaining tasks that are uncompleted.
Use case ends.
3a. User task selection is invalid.
3a1. System shows error message.
Use case resumes from step 2.
User issues command undo.
System reverts user’s previous command and displays feedback message to user.
Use case ends.
2a. There is no previous command yet.
2a1. System feedbacks to user that no previous command has found.
Use case ends.
2b. Previous command is not mutable.
2b1. System feedbacks to user no action required.
Use case ends.
Should work on any mainstream OS.
Should be able to store up to 500 tasks.
Should work in online or offline mode.
Should respond to commands within 2 seconds.
Programme should startup within 3 seconds.
Programme should be open source code and readily available.
Should have an easy to use interface.
Should be able to handle exceptions from user input.
Should work as a standalone application.
Should have an executable file that can be launched by double clicking or keyboard shortcut.
Should not use relational databases to store data.
Command line interface should be the main mode of input.
Should not violate any copyrights.
Should not contain obscene or inappropriate content.
| Mainstream OS | Windows, Linux, Unix, OS-X. |
| Keyword | Words in task names, tag names, and task description. |
| Invalid Commands | Invalid commands includes invalid arguments. |
| Error message | Error message includes suggestion for correct command. |
| START_DATE | START_DATE refers to start date and time entered. Defaults to time of 0000 hrs if no time is indicated. |
| END_DATE | END_DATE refers to end of date and time entered. Defaults to time of 2359 hrs if no time is indicated. |
| Event task | Tasks that have a specific start and end date. |
| Deadline task | Tasks that only have a specific end date. |
| To-Do task | Tasks that have no start or end date. |
| Category | One of Event, Deadline or To-do. |
Pros:
Easy to use interface.
User can add recurring tasks.
User can set a start date and end date for the task.
User can add tag to the task.
User can view a list of all completed tasks.
User can set priority to task.
User can postpone a task.
Cons:
No online support or video tutorials for beginners.
Pro version is very expensive and most features are only available in pro version.
No security for data in terms of encryption or HTTPS.
Pros:
Calendar user interface, click on events on the calendar to view more details.
Users can edit events by dragging.
Users are able to import calendars using .ical files.
Users can edit a single instance of event, or recurring events.
Users can be notified of approaching events.
Users have daily, weekly, monthly, and "4-days" types of view.
Users can sync and access on multiple platforms, like mobile, and desktop.
Cons:
Have to be online to access calendar.
No command line interface.
Updates may take a while to sync due to network issues.
Pros:
Allows user to note down descriptions and more information for each task.
Allows user to create subtasks for each task.
Allows user to set "Reminder" and “Due Date” separately.
Allows user to highlight(star) a task.
Separates "Delete" and “Mark as complete”.
Parses the reminder time when user types in the task name.
Automatically creates "Today" and “Week” folder for user to see what needs to be done for today and this week (more urgent tasks).
Allows user to categorise tasks using folders, e.g. (work, family).
Cons:
Just highlighting (starring) is not enough. User may just highlight all tasks and that defeats the purpose of starring.
Tasks are not sorted in chronological order in the main folder.
Pros:
It has simulation game element which keep the work fun and motivating.
It has colourful and clean user interface that make important tasks stand out.
It supports multiple platforms such as mobile and desktop.
It supports recurring task adding.
It can set multiple and different reminders on any task.
It can easily be reordered/sorted using name or tags.
Cons:
Unable to view the calendar when selecting tasks
Adding tasks require mouse/ touch screen instead of keyboard entering.
Has the potential of distraction due to the existence of game elements.
Deadline of the tasks are not shown unless clicked.
Unable to mark tasks as done without keeping them for future references.


Go Home
Work
Home
API Key
You need a free api key
Google Maps
.
Refresh min
(
1 minute
3 minutes
5 minutes
10 minutes
15 minutes
20 minutes
30 minutes
)
Language
Tr
En
Start at login
Apply
Close App


|
Fig 1. DoseNet team member, Brian Plimley, uses a Geiger counter to demonstrate to students that they aren't noticeably radioactive above background. |
|
Fig 2. DoseNet team members, Brian Plimley (right) and Ali Hanks (left) discuss radioactive materials with Life Academy students. |
|
Fig 2. Life Academy student (left), teacher Mr. Juang (middle) and DoseNet member Brian Plimley (right) with the newly installed DoseNet device. |


Fake is used to generate a Fake implementation of an interface.
type Fake struct { Packages []*packages.Package Package *packages.Package Target *types.TypeName Mode FakeMode DestinationPackage string Name string TargetAlias string TargetName string TargetPackage string Imports Imports Methods []Method Function Method }
func NewFake(fakeMode FakeMode, targetName string, packagePath string, fakeName string, destinationPackage string, workingDir string) (*Fake, error)
NewFake returns a Fake that loads the package and finds the interface or the function.
func (f *Fake) Generate(runImports bool) ([]byte, error)
Generate uses the Fake to generate an implementation, optionally running goimports on the output.
func (f *Fake) IsFunction() bool
IsFunction indicates whether the fake is for a function..
func (f *Fake) IsInterface() bool
IsInterface indicates whether the fake is for an interface.
FakeMode indicates the type of Fake to generate.
type FakeMode int
FakeMode can be Interface, Function, or Package.
const ( InterfaceOrFunction FakeMode = iota Package )
Import is a package import with the associated alias for that package.
type Import struct { Alias string PkgPath string }
func (i Import) String() string
String returns a string that may be used as an import line in a go source file. Imports with aliases that match the package basename are printed without an alias.
Imports indexes imports by package path and alias so that all imports have a unique alias, and no package is included twice.
type Imports struct { ByAlias map[string]Import ByPkgPath map[string]Import }
func (i *Imports) Add(alias string, path string) Import
Add creates an import with the given alias and path, and adds it to Fake.Imports.
func (i *Imports) AliasForPackage(p *types.Package) string
AliasForPackage returns a package alias for the package.
Method is a method of the interface.
type Method struct { Name string Params Params Returns Returns }
Param is an argument to a function.
type Param struct { Name string Type string IsVariadic bool IsSlice bool }
Params is a slice of Param.
type Params []Param
func (p Params) AsArgs() string
AsArgs builds a string that represents the parameters to a function as arguments to a function invocation.
func (p Params) AsNamedArgs() string
AsNamedArgs builds a string that represents parameters as named arguments.
func (p Params) AsNamedArgsForInvocation() string
AsNamedArgsForInvocation builds a string that represents a function's arguments as required for invocation of the function.
func (p Params) AsNamedArgsWithTypes() string
AsNamedArgsWithTypes builds a string that represents parameters as named arugments to a function, with associated types.
func (p Params) AsReturnSignature() string
AsReturnSignature builds a string representing signature for the params of a function.
func (p Params) HasLength() bool
HasLength returns true if there are params.
Return is the result of a method's invocation.
type Return struct { Name string Type string }
Returns is a slice of Return.
type Returns []Return
func (r Returns) AsArgs() string
AsArgs builds a string representing the arguments passed to a function.
func (r Returns) AsNamedArgs() string
AsNamedArgs builds a string representing a function's named arguments.
func (r Returns) AsNamedArgsWithTypes() string
AsNamedArgsWithTypes builds a string representing a function's named arguments, with associated types.
func (r Returns) AsReturnSignature() string
AsReturnSignature builds a string representing signature for the returns of a function.
func (r Returns) HasLength() bool
HasLength is true if there are returns, else false.
func (r Returns) WithPrefix(p string) string
WithPrefix builds a string representing the parameters returned from a function, and adds a prefix to each.


On this page you can control which hosts are allowed to access your
database server and what kind of authentication they will need to provide.
Each access control rule can apply to a single host, to an entire network, to
all network hosts or only to users connecting from this machine. In addition,
each rule can apply to either a single selected database or to all databases
on the server.
When choosing the authentication mode for allowed hosts, the following
options are available :
- Plaintext password
- The user must supply a password that matches the one set in the
PostgreSQL Users page.
- Encrypted password
- The user must supply a password that when encrypted matches the one set
in PostgreSQL Users.
- No authentication required
- No password needs to be supplied at all.
- Reject connection
- Don't allow connections from this host at all. This is useful for denying
access from specific hosts if you have granted access to a whole network.


- family (n.)
- early 15c., "servants of a household," from Latin familia "family servants, domestics collectively, the servants in a household," thus also "members of a household, the estate, property; the household, including relatives and servants," abstract noun formed from famulus "servant, slave," which is of unknown origin.
The Latin word rarely appears in the sense "parents with their children," for which domus (see domestic (adj.)) was used. Derivatives of famulus include famula "serving woman, maid," famulanter "in the manner of a servant," famulitas "servitude," familiaris "of one's household, private," familiaricus "of household slaves," familiaritas "close friendship."
In English, sense of "collective body of persons who form one household under one head and one domestic government, including parents, children, and servants, and as sometimes used even lodgers or boarders" [Century Dictionary] is from 1540s. From 1660s as "parents with their children, whether they dwell together or not," also in a more general sense, "persons closely related by blood, including aunts, uncles, cousins;" earlier "those who descend from a common progenitor, a house, a lineage" (1580s). Hence, "any group of things classed as kindred based on common distinguishing characteristics" (1620s); as a scientific classification, between genus and order, from 1753.
I have certainly known more men destroyed by the desire to have wife and child and to keep them in comfort than I have seen destroyed by drink and harlots. [William Butler Yeats, "Autobiography"]
Replaced Old English hiwscipe, hiwan "family," cognate with Old Norse hjon "one of the household; married couple, man and wife; domestic servant," and with Old High German hiwo "husband," hiwa "wife," also with Lithuanian šeimyna "family," Gothic haims "village," Old English ham "village, home" (see home (n.)).
As an adjective from c. 1600; with the meaning "suitable for a family," by 1807. Family values first recorded 1966. Phrase in a family way "pregnant" is from 1796. Family circle is 1809; family man "man devoted to wife and children, man inclined to lead a domestic life" is 1856 (earlier it meant "thief," 1788, from family in a slang sense of "the fraternity of thieves"). Family-tree "graph of ancestral relations" attested from 1752:
He was dressed in his best Coat, which had served him in the same Capacity before my Birth, and possibly, might be but little short in Antiquity, to the Root of his third Family Tree; and indeed, he made a venerable Figure in it. ["A Genuine Account of the Life and Transactions of Howell ap David Price, Gentleman of Wales," London, 1752]
Happy family an assemblage of animals of diverse habits and propensities living amicably, or at least quietly, together in one cage. [Century Dictionary, 1902]
The phrase is attested from 1844.


Decisions are funny things. Yesterday, if I had to decide whether to stay a week in a hostel in a foreign city I would have said "No, I want to go home", but I'm here thanks to a decision I made months ago. We'll see how that one works out.
Right now, I'm going to explore the city, perhaps even on an organized tour.
Hope you're going well over there.


---
layout: post
title: Dawn Landes - Tired of this life
date: '2010-02-25T09:59:00.000+02:00'
author: Cata O
tags:
- country
- chitara
- Cata O
modified_time: '2010-05-06T02:43:42.309+03:00'
blogger_id: tag:blogger.com,1999:blog-551549162106413340.post-4138389963830820590
blogger_orig_url: http://pentrumuzica.blogspot.com/2010/02/dawn-landes-tired-of-this-life.html
---


I’m really struggling. I lost my job in November and I’m in the midst of trying to balance what I do with who I am.
I wrote in January about the confusion I feel with identity. It’s even bigger now, with more questions than answers. Bill Ferriter was kind enough to leave a very wise comment for me:
I definitely think there’s an expiration date for people who walk away from the classroom — both in your own ability to understand just what it means to be a real-live bona fide full time classroom teacher and in your ability to maintain credibility as a practitioner in the eyes of those of us who are still in the classroom.
That’s unavoidable. It is what it is.
Your challenge is reminding yourself that your work still carries value. In many ways, you get to empower teachers now in ways that you could never do before. It’s a different kind of rewarding, but it is still rewarding, none the less.
(That’s just a snippet, but it helps.)
In May, I wrote more about being a teacher…what it means for identity and working. I still think that a teacher is a holistic undertaking – you don’t do teaching.  It’s unique in the sense that not many other professions can make the same claim.
I think I had it right back in January – I need to stop defining myself by one quality. I may not be in a classroom, my expiration date may be past, but I’m inextricably wound up in education, regardless of what I do. Maybe that’s the real lesson.
Written on December 11th, 2014 by Brian Bennett Categorized in: All Life
Leave a comment


luga.localStorage.retrieve(root, path)
Retrieve from localStorage the string corresponding to the given combination of root and path.
Returns undefined if nothing matches the given root/path
| Arguments |
| root |
{string}
|
Top-level key inside localStorage
|
| path |
{string}
|
Dot-delimited string
|
| Return type |
| {*|undefined} |
luga.localStorage.persist("myRoot", "test.name", "Ciccio");
luga.localStorage.retrieve("myRoot", "test.name"); // => "Ciccio"
luga.localStorage.persist(root, path, value)
Persist the given string inside localStorage, under the given combination of root and path.
The ability to pass a dot-delimited path allow to protect the information from name clashes
| Arguments |
| root |
{string}
|
Top-level key inside localStorage
|
| path |
{string}
|
Dot-delimited string
|
| value |
{string}
|
String to be persisted
|
luga.localStorage.persist("myRoot", "test.name", "Ciccio");


SLEEPWALKERS A film review by Ken Johnson Copyright 1992 Ken Johnson
100 min., R, Horror, 1992 Director: Mick Garris Cast: Brian Krause, Alice Krige, Madchen Amick, Stephen King
Note: Sleepwalkers are "people" who are only half-human. They need to feed on human female virgins.
Brian Krause is the new kid in town. He goes to the local high school and he gets to know beautiful, but unpopular, Madchen Amick.
SLEEPWALKERS is a relatively good horror film. It gets a bit strange in some places, and the film gets very unrealistic at times, but is still fun to watch. The film is sometimes gory which will deter some people from the film. You could definitely do worse than this film, although I don't know whether to recommend that you see this film in the theater. You may be better off waiting to see SLEEPWALKERS when it comes to video. On a scale of zero to five, I give SLEEPWALKERS a four. SLEEPWALKERS is rated R for explicit language, adult situations, and graphic violence.
I saw SLEEPWALKERS on opening night (Friday) and it is not at all what I was expecting. The advertisements that I saw for the film painted a different picture in my head of what the film was going to be like. Sure, I liked SLEEPWALKERS, but it was nowhere near as good as I was hoping it was going to be. By now, I have come to expect a certain amount from the films whose screenplay is written by Stephen King (films based on Stephen King films written by someone else are totally unpredictable as to how good they will be, so I don't expect too much out of them). This is definitely a low for him. From what I have heard, MAXIMUM OVERDRIVE is *really* bad, so evidently this is not Stephen King's worst screenplay (then again he didn't direct this film).
SLEEPWALKERS is the first full feature film that Stephen King has written exclusively for the screen. I feel the main problem with the film is that it does get very unbelievable at some points. Personally, that detracted from my enjoyment of the film. And, for those interested, Stephen King has a cameo part as the caretaker of a graveyard.
BASIC INSTINCT has stirred up some controversy on it's portrayal of lesbians and bisexuals. Well, SLEEPWALKERS may unearth some trouble with the portrayal of incest between Brian Krause and his mother Alice Krige. This seemed to really disturb some of the people in the theater, so will be likely to offend others. If you feel that this may offend you, don't go to see the film. There are plenty of other good films playing that you can see instead.
Ken J<EMAIL_ADDRESS>.
The review above was posted to the
rec.arts.movies.reviews newsgroup (de.rec.film.kritiken for German reviews).
The Internet Movie Database accepts no responsibility for the contents of the
review and has no editorial control. Unless stated otherwise, the copyright
belongs to the author.
Please direct comments/criticisms of the review to relevant newsgroups.
Broken URLs inthe reviews are the responsibility of the author.
The formatting of the review is likely to differ from the original due
to ASCII to HTML conversion.
Related links: index of all rec.arts.movies.reviews reviews


Manage cached CCAFS files
cc_cache_list() cc_cache_delete(files, force = TRUE) cc_cache_delete_all(force = TRUE) cc_cache_details(files = NULL)
TRUE
cache_delete
only accepts 1 file name, while
cache_delete_all
doesn't accept any names, but deletes all files.
For deleting many specific files,
use cache_delete
in a lapply
type call
We cache using user_cache_dir
, find your
cache folder by executing rappdirs::user_cache_dir("ccafs")
cc_cache_list()
returns a character vector of full path file
names
cc_cache_delete()
deletes one or more files, returns nothing
cc_cache_delete_all()
delete all files, returns nothing
cc_cache_details()
prints file name and file size for each
file, supply with one or more files, or no files (and get details for
all available)
## Not run: ------------------------------------ # # list files in cache # cc_cache_list() # # # List info for single files # cc_cache_details(files = cc_cache_list()[1]) # cc_cache_details(files = cc_cache_list()[2]) # # # List info for all files # cc_cache_details() # # # delete files by name in cache # # cc_cache_delete(files = cc_cache_list()[1]) # # # delete all files in cache # # cc_cache_delete_all() ## ---------------------------------------------


Since 1982 we've hosted amazing camps across the United States at leading universities. We also work with international partners to bring the SuperCamp experience to teens around the world. More than 75,000 students have participated...and counting!
Staff Training
June 25 - June 30Senior Forum (6 Day)
Staff Training
June 27 - July 6Senior Forum (10 Day)
Staff Training
July 9 - July 14Junior Forum (6 Day)
July 17 - July 22Senior Forum (6 Day)
Quantum Academy (6 Day)
Junior Forum (6 Day)
July 17 - July 22Senior Forum (6 Day)
July 25 - July 30Junior Forum (6 Day)
Staff Training
July 9 - July 14Senior Forum (6 Day)
July 17 - July 22Junior Forum (6 Day)
Senior Forum (10 Day)
August 14 - August 19Senior Forum (6 Day)


Todo - set up the following test cases:
Plane √
Angled Plane √
Parented Plane √
Parented Angled Plane √
Discs √
Hoverstate
Scale? √
Stress Test
Notes on docs:
We work on meters, to have standard border width, etc.


- draw(PApplet) - Method in class shaylan.shapes.Circle
-
Draws the Circle using the Processing draw methods
with the center at getX(),getY() with a radius of
getRadius()
- draw(PApplet) - Method in class shaylan.shapes.Line
-
Draws the Line from points getX1(),getY1() to
getX2(),getY2() to the drawer.
- draw(PApplet) - Method in class shaylan.shapes.Rectangle
-
Draws a new instance of a Rectangle object with the left and right
edges of the rectangle at getX() and getX() + getWidth() and
top and bottom edges are at getY() and getY() + getHeight() to the PApplet.
- draw(PApplet) - Method in class shaylan.shapes.RegularPolygon
-
Draws the RegularPolygon to the PApplet surface
- draw(PApplet) - Method in class shaylan.shapes.Shape
-
Sets the stroke, fill, and strokeWeight of the drawer to the Shape's values
- drawBoundingCircles(PApplet) - Method in class shaylan.shapes.RegularPolygon
-
Draws the bounding circles of the RegularPolygon
- drawNoFill(PApplet) - Method in class shaylan.shapes.Circle
-
Draws a clear Circle using the Processing draw methods
with the center at getX(),getY() with a radius of
getRadius()
- drawNoFill(PApplet) - Method in class shaylan.shapes.Rectangle
-
Draws a new clear instance of a Rectangle object with the left and right
edges of the rectangle at getX() and getX() + getWidth() and
top and bottom edges are at getY() and getY() + getHeight() to the PApplet.
- drawNoFill(PApplet) - Method in class shaylan.shapes.Shape
-
Sets the stroke and strokeWeight of the drawer to the Shape's values and sets the drawer to noFill()
- getAngle() - Method in class shaylan.shapes.Line
-
Gets the angle formed by the Line and the horizontal
- getArea() - Method in class shaylan.shapes.Circle
-
- getArea() - Method in class shaylan.shapes.Line
-
- getArea() - Method in class shaylan.shapes.Rectangle
-
- getArea() - Method in class shaylan.shapes.RegularPolygon
-
- getArea() - Method in class shaylan.shapes.Shape
-
Calculates and returns the area of the Shape
- getCenter() - Method in class shaylan.shapes.Rectangle
-
Returns a Point that is the center point of the Rectangle
- getFill() - Method in class shaylan.shapes.Shape
-
Gets the Shape's fillColor
- getHeight() - Method in class shaylan.shapes.Rectangle
-
Gets the Rectangle's height
- getIntersection(Line) - Method in class shaylan.shapes.Line
-
Returns a java.awt.Point representing the intersection between the Line
and another Line.
- getNumSides() - Method in class shaylan.shapes.RegularPolygon
-
Gets the number of sides of the RegularPolygon
- getPerimeter() - Method in class shaylan.shapes.Circle
-
- getPerimeter() - Method in class shaylan.shapes.Line
-
- getPerimeter() - Method in class shaylan.shapes.Rectangle
-
- getPerimeter() - Method in class shaylan.shapes.RegularPolygon
-
- getPerimeter() - Method in class shaylan.shapes.Shape
-
Calculates and returns the perimeter of the Shape
- getR() - Method in class shaylan.shapes.RegularPolygon
-
Gets the radius of the circle that the RegularPolygon is inscribed in
- getr() - Method in class shaylan.shapes.RegularPolygon
-
Gets the radius of the circle inscribed in the RegularPolygon
- getRadius() - Method in class shaylan.shapes.Circle
-
Returns the radius of the Circle
- getSideLength() - Method in class shaylan.shapes.RegularPolygon
-
Gets the side length of the RegularPloygon
- getStroke() - Method in class shaylan.shapes.Shape
-
Gets the Shape's fillColor
- getStrokeWeight() - Method in class shaylan.shapes.Shape
-
Gets the Shape's strokeWeight
- getVertexAngle() - Method in class shaylan.shapes.RegularPolygon
-
Gets the angle of the RegularPolygon's vertex angle
- getWidth() - Method in class shaylan.shapes.Rectangle
-
Gets the Rectangle's width
- getX() - Method in class shaylan.shapes.Line
-
Returns the x-coordinate of the first point
- getX() - Method in class shaylan.shapes.Shape
-
Gets the Shape's upper-left x-coordinate
- getX2() - Method in class shaylan.shapes.Line
-
Returns the x-coordinate of the second point
- getY() - Method in class shaylan.shapes.Line
-
Returns the y-coordinate of the first point
- getY() - Method in class shaylan.shapes.Shape
-
Gets the Shape's upper-left y-coordinate
- getY2() - Method in class shaylan.shapes.Line
-
Returns the y-coordinate of the second point
- scale(double) - Method in class shaylan.shapes.Circle
-
Multiplies the radius of the circle by the parameter
- scale(double) - Method in class shaylan.shapes.Rectangle
-
Changes the size of the Rectangle by multiplying its
height and width by the scale factor
- setBottomRight(int, int) - Method in class shaylan.shapes.Rectangle
-
Sets the bottom right corner of the Rectangle to the input value
- setFill(Color) - Method in class shaylan.shapes.Shape
-
Sets the Shape's fillColor
- setHeight(double) - Method in class shaylan.shapes.Rectangle
-
Sets the Rectangle's height
- setPoint1(double, double) - Method in class shaylan.shapes.Line
-
Sets the first point of the line to the arguments
- setPoint2(double, double) - Method in class shaylan.shapes.Line
-
Sets the second point of the line to the arguments
- setRadius(double) - Method in class shaylan.shapes.Circle
-
Changes the radius of the Circle
- setStroke(Color) - Method in class shaylan.shapes.Shape
-
Sets the Shape's strokeColor
- setStrokeWeight(double) - Method in class shaylan.shapes.Shape
-
Sets the Shape's strokeWeight
- setWidth(double) - Method in class shaylan.shapes.Rectangle
-
Sets the Rectangle's width
- setX(double) - Method in class shaylan.shapes.Shape
-
Sets the Rectangle's x-coordinate
- setY(double) - Method in class shaylan.shapes.Shape
-
Sets the Rectangle's y-coordinate
- Shape - Class in shaylan.shapes
-
Represents a Processing-drawable ambiguous Shape as a super class for more specific shapes
- Shape(double, double) - Constructor for class shaylan.shapes.Shape
-
Creates a default instance of a Shape object with all dimensions
set to zero, fillWeight 1, and stroke and fill colors black
- Shape(double, double, double, Color, Color) - Constructor for class shaylan.shapes.Shape
-
Creates a new instance of a Shape object with the
upper left corner of the Shape at x,y and with width
and height
- shaylan.shapes - package shaylan.shapes
-


Introduction
A collection is used to manage lists of objects. Collections are an extension built on top of Knockout.js observableArrays and thus can be used just like they can, such as:
- Binding your UI to them.
- Creating a computed value based on them (such as a filtered, or sorted version of a list).
- Manipulating them like normal observableArrays using push, pop, splice, etc...
Using the observableArray type, Footwork builds upon them to integrate various features such as:
- Searching the list to find an object or dataModel (or list of them) which matches a set of attributes or id.
- Retrieving a list of items from the server and (if specified) instantiate each of the results using a dataModel.
- Creating a new record of the specified dataModel on the server and inserting it into the collection when completed.
- Easy methods for adding new items to or removing items from the collection.
Example Use-Case: An app has a user profile and attached to it a list of contact phone numbers. Each phone number would be represented in with a dataModel (which would have its REST endpoint used for CRUD operations, say at /user/phone-number/123 for the record with id 123).
There would be a /user/phone-numbers endpoint which would return a JSON list of phone numbers attached to my profile. This list/endpoint is what would be managed by the collection from within the application.
If represented by a collection, you could then fetch() the list from the server and have the list of dataModel instances created for you and injected into the collection. You could also create() a new phone-number which would be saved to the server via the dataModel and its RESTful configuration.
Usage
There are two primary ways of using collections in Footwork. They can be utilized with raw data (arrays of objects, i.e. a plain collection) or configured to use a dataModel. In either case you can then use any of the collection methods to find, retrieve, add, etc.
Essentially, at the core of it you are managing a list of objects which may or may not have RESTful (persistent) features attached to them. With this list you can also bind your UI, create computed values, subscribe to changes, etc (all of the same capabilities/features you have with a normal KnockoutJS observableArray).
Basic Usage
If you are using a plain collection (ie: one which does not require a dataModel) then they are initialized in exactly the same way a normal KnockoutJS observableArray would be with the exception that you would use fw.collection() insted of fw.observableArray() to instantiate one.
var collection = fw.collection([ { name: 'James Bond' }, { name: 'Eve Moneypenny' } ]);
Creation of a simple collection instance consisting of a list of objects:
var group = fw.collection([
{ name: 'John Smith', company: 'Acme Brick' },
{ name: 'Jane Doe', company: 'Acme Brick' }
]);
/**
* group() === [
* { name: "John Smith", company: "Acme Brick" },
* { name: "Jane Doe", company: "Acme Brick" }
* ]
*/
/**
* group.findWhere({ name: "John Smith" }) === { name: "John Smith", company: "Acme Brick" }
*/
Factory Method
If each item in your collection has a RESTful endpoint (ex: a list of notes) then you will want to create a new type of collection which is configured to handle them utilizing a dataModel. By doing this you can more easily fetch, save, retrieve, and search the data.
To create and use a new type of collection we begin by creating a new constructor function, configuring it as desired. This is done with the factory method fw.collection.create(). The constructor function returned can then be used to create new instances of that type of collection.
var CollectionConstructor = fw.collection.create({
// (optional) The namespace (communications channel) the collection uses.
namespace: 'MyCollection', // example namespace name, any alpha-numeric is valid
// (optional) URL which will/can be used to GET/fetch the collection from the server
url: function() {},
url: '',
/**
* (optional) dataModel constructor used to create each new instance.
* If specified this will also be used to source the idAttribute field used for searching/matching
*/
dataModel: DataModelConstructor,
/**
* (optional) The idAttribute to use internally within each dataModel/object
* Note: This overrides the dataModel idAttribute if specified
*/
idAttribute: 'id', // default is 'id' (also used for plain collections)
/**
* Callback method used to transform the response from a .fetch() call prior to instantiating or
* creating new items/entries in the collection. The return result will be .set() on the collection
*/
parse: function(ajaxResponse) { return ajaxResponse; }
/**
* Flag telling Footwork if it should call .dispose() when a dataModel is removed from
* the list. Default: true.
*/
disposeOnRemove: true
});
The following example shows the creation of a collection constructor which can be used to manage collections consisting of Person dataModel instances.
A dataModel would normally be used to represent items which also have RESTful endpoints. An example of this might be a list of contact numbers or email addresses listed on a user profile.
Creation and use of a collection constructor to create a collection (group) of people:
// Create the ContactList collection constructor
var ContactList = fw.collection.create({
namespace: "ContactList",
url: '/list-contacts',
// It is recommended you store the dataModel in a separate file.
// This example shows it inline.
dataModel: fw.dataModel.create({
namespace: "Contact",
url: '/contact',
initialize: function(contactData) {
this.email = fw.observable(contactData.email).mapTo('email');
this.number = fw.observable(contactData.number).mapTo('number');
}
})
});
// Instantiate a new ContactList collection using the constructor
var myNumbers = ContactList([
{ number: '555-555-5555', email<EMAIL_ADDRESS>},
{ number: '555-555-5556', email<EMAIL_ADDRESS>}
]);
// Each entry is an instance of the Contact dataModel
// myNumbers() === [ Contact, Contact ]
/**
* The raw mapped data can be retrieved using the helper .getData()
* myNumbers.getData() === [
* { number: '555-555-5555', email<EMAIL_ADDRESS>},
* { number: '555-555-5556', email<EMAIL_ADDRESS>}
* ]
*/
Computed Values
It is important to remember that a collection is an observable value. This means that just like any other observable we can create computed values based on it.
Another important note is that you can also use various collection methods (findWhere(), where(), and getData()) to create computed values derived from them.
Create computed values based on a collection:
// Shown in a viewModel which is a more likely usage scenario
var PeopleViewModel = fw.viewModel.create({
initialize: function(peopleList) {
// The main collection of people
this.peopleList = fw.collection(peopleList);
/**
* A computed based on peopleList which determines whether or not the
* list is empty
*/
this.hasPeopleInList = fw.computed(function() {
return this.peopleList().length > 0;
}, this);
/**
* This creates a computed value based on the peopleList
* filtered to include only entries where()
* company === 'OCP', sorted by the name
*/
this.omniCorpPeople = fw.computed(function() {
return this.peopleList
.where({ company: 'OCP' }, { getData: true })
.sort(function(a, b) {
return a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1;
});
}, this);
}
});
The above example shows the creation of a PeopleViewModel which is fed a peopleList. Upon initialization it then creates a peopleList collection using the supplied data. Two computed values are created based on the list, one which returns a boolean value indicating whether or not there are people in the list (hasPeopleInList) and omniCorpPeople which is a filtered list containing OCP employees sorted by their name.
Example usage of the above computed values:
var peopleVM = new PeopleViewModel([
{ name: 'Peter Weller', company: 'Detroit PD' },
{ name: 'Robert Morton', company: 'OCP' },
{ name: 'Donald Johnson', company: 'OCP' }
]);
/**
* peopleVM.omniCorpPeople() === [
* { name: 'Robert Morton', company: 'OCP' },
* { name: 'Donald Johnson', company: 'OCP' }
* ]
*/
peopleVM.peopleList.add({ name: 'Richard Jones', company: 'OCP' });
/**
* Since omniCorpPeople is a computed value it is automatically updated when
* the new entry is added to peopleList. Hence we see it returned (in the sorted
* order as defined/returned by the evaluator function) when we retrieve the
* value again:
*
* peopleVM.omniCorpPeople() === [
* { name: 'Robert Morton', company: 'OCP' },
* { name: 'Richard Jones', company: 'OCP' },
* { name: 'Donald Johnson', company: 'OCP' }
* ]
*/
UI Binding
Since a collection is actually an observableArray under the covers, you can bind to them from your UI just as you would with an observableArray with KnockoutJS.
Using the GroupOfPeople collection from above, we instantiate a list of people inside of the PeopleView viewModel:
Example markup used to bind with the viewModel (which contains the collection):

Name:

Instantiate a new collection inside of the viewModel:
var PeopleView = fw.viewModel.create({
namespace: 'PeopleView',
initialize: function() {
this.persons = fw.collection([
{ name: 'John Smith' },
{ name: 'Jane Doe' }
]);
};
});
// Bind (and render) the viewModel and its collection to the UI
fw.applyBindings(new PeopleView(), document.querySelector('#people-view'));
Data Management
There are various operations which you can perform on a collection.
Most methods, such as find, findWhere, set, etc do not depend on there being a dataModel or endpoint (url) specified/configured. This means that you can use them to operate on arbitrary objects as well (ie: a plain collection).
Some methods such as fetch and create require that a RESTful endpoint and/or dataModel be specified when a new collection constructor is created.
Local Operations
Many operations performed on a collection are local-only. This means that using them does not depend on any RESTful configuration (url) or dataModel.
Set and Reset
The following methods are used to load data into a collection. You might invoke one of the following if you wanted to manually load some data into a collection, such as if you retrieved the models/data via some means other than the included RESTful fetch method.
Perform a smart update of the collection with the passed list of models.
If a supplied model is not yet in the collection it will be added; if the it is already in the collection (matched via the idAttribute value) then its data will be merged; and if the supplied data contains any models that are not present in the collection, they will be removed.
You can provide the following options to customize the behavior: { add: false }, { remove: false }, or { merge: false }.
var people = fw.collection();
people.set([
{
"id": 1,
"firstName": "Bruce",
"lastName": "Wayne"
}, {
"id": 2,
"firstName": "Barbara",
"lastName": "Gordon"
}, {
"id": 3,
"firstName": "Ethan",
"lastName": "Bennett"
}
]);
Replace a collection with a new list of models. This will trigger a single _.reset event afterwards.
var people = fw.collection();
people.reset([
{
"id": 1,
"firstName": "Bruce",
"lastName": "Wayne"
}, {
"id": 2,
"firstName": "Barbara",
"lastName": "Gordon"
}, {
"id": 3,
"firstName": "Ethan",
"lastName": "Bennett"
}
]);
Add and Remove
The following methods are used to add and remove items from a collection.
Add a model (or an array of models) to the collection, firing an _.add event for each new model. Altered models will have their data merged and have a corresponding _.change event fired for them. If a model property is defined and you are passing in raw attributes objects they will be vivified as instances of the dataModel (if one is specified/configured). If you pass in an instantiated dataModel then it will be inserted as-is.
var people = fw.collection();
people.add([
{
"id": 1,
"firstName": "Bruce",
"lastName": "Wayne"
}, {
"id": 2,
"firstName": "Barbara",
"lastName": "Gordon"
}, {
"id": 3,
"firstName": "Ethan",
"lastName": "Bennett"
}
]);
Remove a model (or an array of models) from the collection. Each model can be a Model instance, a JS object (whose properties will be matched against), or a JS regex-attribute object. Fires a _.remove event for each model.
var people = fw.collection([
{
"id": 1,
"firstName": "Bruce",
"lastName": "Wayne"
}, {
"id": 2,
"firstName": "Barbara",
"lastName": "Gordon"
}, {
"id": 3,
"firstName": "Ethan",
"lastName": "Bennett"
}
]);
// remove the people that have id: 2
var removedPeople = people.removeModel({ id: 2 });
// removedPeople === [ { id: 2, firstName: "Barbara", lastName: "Gordon" } ]
// remove people that have id 1 or 3 (this shows how you can match against a RegExp)
var removedPeople = people.removeModel({ id: /^(1|3)$/ });
/**
* removedPeople === [ { id: 1, firstName: "Bruce", lastName: "Wayne" },
* { id: 3, firstName: "Ethan", lastName: "Bennett" } ]
*/
Find and Get
The following methods are used to find and retrieve items from a collection.
Return an array of all the models in a collection that match the passed attributes.
var people = fw.collection([
{
"firstName": "Bruce",
"lastName": "Wayne",
"employer": "Wayne Industries"
}, {
"firstName": "James",
"lastName": "Gordon",
"employer": "GCPD"
}, {
"firstName": "Alfred",
"lastName": "Creane",
"employer": "Wayne Industries"
}
]);
/**
* people.where({ lastName: 'Gordon' }) === [ { firstName: "James", lastName: "Gordon", employer: "GCPD" } ]
*
* people.where({ employer: 'Wayne Industries' }) === [
* { firstName: "Bruce", lastName: "Wayne", employer: "Wayne Industries" },
* { firstName: "Alfred", lastName: "Creane", employer: "Wayne Industries" }
* ]
*/
Here is a where() example demonstrating the use of a RegExp to search through the collection (using the same collection instance from above):
people.where({ employer: /.*Industries$/ }) === [
{ firstName: "Bruce", lastName: "Wayne", employer: "Wayne Industries" },
{ firstName: "Alfred", lastName: "Creane", employer: "Wayne Industries" }
]
Also note that you can do deep-nested searches with both where() and findWhere():
var people = fw.collection([
{
firstName: "Bruce",
lastName: "Wayne",
employer: "Wayne Industries",
attr: {
badass: true,
alterEgo: 'The Batman'
}
}
]);
// Search for nested property 'badass: true'
people.where({ attr: { badass: true } }) === [
{ firstName: "Bruce", lastName: "Wayne", employer: "Wayne Industries", attr: { badass: true } }
]
// You can also search for nested properties with a RegExp
people.where({ attr: { alterEgo: /Batman/ } }) === [
{ firstName: "Bruce", lastName: "Wayne", employer: "Wayne Industries", attr: { badass: true } }
]
Sometimes all you want is the first (or only) result found in a collection, for that you would use findWhere().
Just like collection.where() but returns only the first entry in the collection that matches the passed attributes.
var people = fw.collection([
{
"firstName": "Bruce",
"lastName": "Wayne",
"employer": "Wayne Industries"
}, {
"firstName": "James",
"lastName": "Gordon",
"employer": "GCPD"
}, {
"firstName": "Alfred",
"lastName": "Creane",
"employer": "Wayne Industries"
}
]);
/**
* people.findWhere({ employer: 'Wayne Industries' }) === {
* firstName: "Bruce",
* lastName: "Wayne",
* employer: "Wayne Industries"
* }
*/
Get a model from a collection, matched against via the dataModel.$cid or dataModel.$id.
var people = fw.collection([
{
"id": 1,
"firstName": "Bruce",
"lastName": "Wayne",
"employer": "Wayne Industries"
}, {
"id": 2,
"firstName": "James",
"lastName": "Gordon",
"employer": "GCPD"
}, {
"id": 3,
"firstName": "Alfred",
"lastName": "Creane",
"employer": "Wayne Industries"
}
]);
/**
* people.get(1) === {
* id: 1,
* firstName: "Bruce",
* lastName: "Wayne",
* employer: "Wayne Industries"
* }
*/
RESTful Operations
Some operations performed on a collection can be RESTful in nature. Depending on your need, you will need to create a new type of collection which is configured with an endpoint (url) or dataModel.
The method Footwork calls to read (.fetch()) the collection from the server (you typically do not call this directly). Delegates to fw.sync.
// Create a new type of collection with the requisite dataModel (that has a REST url)
var PeopleCollection = fw.collection.create({
url: '/people'
});
people.sync('read', people).then(function(response) {
console.info('People returned', response);
});
Fetch and Create
If you are using a collection that has been configured with a RESTful endpoint (url) then you can also fetch the collection from the server.
Merges the model with data fetched from the server by delegating to collection.sync(). This is useful if the model has never been populated with data, or if you would like to ensure that you have the latest state from the server. Triggers a _.change event if the server's data differs from the current entry.
You can specify options to pass to the underlying .ajax() call via the options parameter.
var PeopleList = fw.collection.create({
url: '/people/list'
});
var people = PeopleList();
people.fetch().then(function(peopleList) {
console.info('People listed:', peopleList);
});
If you are using a collection configured with a dataModel then you can also use the collection.create() method which when called is equivalent to instantiating the dataModel with the supplied data, saving it to the server (calling dataModel.save() after instantiation), and adding it to the collection (before or after being successfully created).
Convenience method used to create a new instance of a model within a collection and save it to the server.
If the collection is configured with a dataModel then the new instance will be saved to the server (via dataModel.save()).
// Create a new type of collection with the requisite dataModel (that has a REST url)
var PeopleCollection = fw.collection.create({
dataModel: fw.dataModel.create({
namespace: 'Person',
url: '/person',
initialize: function(person) {
this.firstName = fw.observable(person.firstName).mapTo('firstName');
this.lastName = fw.observable(person.lastName).mapTo('lastName');
}
})
});
// Instantiate a new instance of the PeopleCollection
var people = new PeopleCollection();
// Tell the collection to create a new Person
people.create({
"firstName": "Thomas",
"lastName": "Anderson"
}, { wait: true }).then(function(response) {
console.info('Person created!');
});
Utility Methods
This section outlines various utlity functions related to handling data within a collection.
Adds a new item to the end of the collection.
var people = fw.collection([
{ name: 'Jack Handy' },
{ name: 'Mary Katherine Gallagher' }
]);
// Add a new person
people.push({ name: 'The Ladies Man' });
Removes the last item from the collection and returns it.
var people = fw.collection([
{ name: 'Jack Handy' },
{ name: 'Mary Katherine Gallagher' }
]);
// people.pop() === { name: 'Mary Katherine Gallagher' }
Inserts a new item at the beginning of the array.
var people = fw.collection([
{ name: 'Jack Handy' },
{ name: 'Mary Katherine Gallagher' }
]);
// Add a new person
people.unshift({ name: 'The Ladies Man' });
Removes the first item from the collection and returns it.
var people = fw.collection([
{ name: 'Jack Handy' },
{ name: 'Mary Katherine Gallagher' }
]);
// people.shift() === { name: 'Jack Handy' }
Removes and returns a given number of items starting from a given index.
var people = fw.collection([
{ name: 'Jack Handy' },
{ name: 'Mary Katherine Gallagher' },
{ name: 'The Ladies Man' },
{ name: 'Unfrozen Caveman Lawyer' }
]);
/**
* people.splice(1, 2) === [
* { name: 'Mary Katherine Gallagher' },
* { name: 'The Ladies Man' }
* ]
*/


{{ block "nav" . }} ICS Profile History Login Free Trial My Account My Profile My History My Friends My Followers Logout
Login
Free Trial Signup


{{device.deviceModel}} - {{device.deviceName}}
No devices were found. Please visit the 'Settings' tab to verify your credentials or request a new token.
Please provide the credentials used to connect to your TP-Link account.
Found {{tpl.devices.length}} devices using token: {{tpl.token}}
{{tpl.token}}


×
About
Services
Clients
Contact
☰
Login Here
E-mail Address
Password
Forgot password?
Don't have an account?
Sign up


Week 5 Cultural Blog
Feedback
1/25/15
I think peer pairing is a great way to solve challenges. Coding can often times be stressful and frustrating when the code is not doing what you want it to do. Having another person's input helps with learning new skills and tricks. I always find it rewarding to see a different approach to solving the same problem by having another person explain how they came up with a solution.
However, there are times when peer pairing can be difficult. So far, I've found peer pairing to be a bit more difficult when my peer's technical knowledge is way lower or way higher than mine. Working with a peer who doesn't have as much technical knowledge takes patience, but it allows me to make sure my thought process can be understood clearly. On the other hand, I've found myself intimidated by people who are technically advanced. I usually use these opportunities to learn as much as I can, but I feel intimidated because I feel like I'm behind on the material.
Most of the feedback I've received has been positive. I have had a few bumpy pairing sessions, at least in my opinion, but all of the feedback has been kind. The feedback is useful because they point out where I can improve. Based on the feedback, I think I should look at the material before a pairing session. I should also remember to switch off roles, because there were a few times where I forgot. Writing feedback has generally been easy for me, but I've had a few difficulties writing actionable feedback because my pair was so good.


Contoso University
Student
Course
Contoso University
Course Records
ID
Title
Credits
Actions
Add New Student
×
Code:
Title:
Credits:
Alert
×


TransitionPanelPlugin Class
Available since 1.0.4
Transition Panel Plugin Plugin for transitioning content into a central view via button presses. File: transition-panel-plugin.js Authors: Brandon Sherette Copyright 2016 Brandon Sherette License: MIT
Item Index
Methods
Properties
Methods
bindEvents
()
chainable
Binds events to the DOM that the plugin will use.
fetchPanelHtml
-
targetId
Fetches the html for the panel with the specified target html id.
Parameters:
-
targetId
Stringthe html id for the panel to fetch the html content for.
Returns:
returns the html string content for the specified target id. Returns null if target not found.
getPanelTemplate
-
index
Gets the panel template based on the specified index.
Parameters:
-
index
Intthe index for the template to get.
Returns:
the html for the found panel, returns null if no match found.
getPanelTemplates
()
JQueryCollection
Gets the panel templates.
Returns:
The collection of panel templates as jQueryElements.
init
()
chainable
Initializes the plugin and binds the plugin events.
makeButtonActive
-
$panelButton
Makes the specified panel button be switched to the active state (adds .active css class to it) and removes the active state from the previous button.
Parameters:
-
$panelButton
JQueryObjectthe panel button to make active
noConflict
()
chainable
Puts the TransitionPanelPlugin in "noConflict" mode which returns the global TransitionPanelPlugin variable name to the previous owner. Returns this version of TransitionPanelPlugin.
onPanelButtonClick
-
e
The event that a panel button was clicked. The panel contents will be found and transitioned to.
Parameters:
-
e
Eventthe event the panel button that was clicked.
start
()
chainable
Starts the transition with the first found panel template.
transitionPanel
-
html
Transitions the current panel contents to the html specified.
Parameters:
-
html
Stringthe html content to transition to.
unbindEvents
()
chainable
Unbinds all the events attached from the bindEvents method. Used to help clean up listeners.
Properties
$
JQuery
Let the plugin have its own copy of jQuery
transitionInProgress
Boolean
Whether or not a transition is in process.
Default: false
VERSION
String
The current version of the plugin. Keep in sync with "package.json".


{{{edit-button 'social_media_resources.html' 'section'}}} {{#markdown}} ## Social media resources
To help you manage your social media presence please find below a selection of helpful resources:
EMBL Social Media Guidelines (draft)
Download sketchnote by Jenny Cham
This calendar includes science-related 'world' days, which you can use to plan your campaigns or daily posts.
If you would like to be added to this private calendar, please email<EMAIL_ADDRESS>This is a selection of templates in .psd (Adobe Photoshop) format to help you resize imagery for your posts.
Networks covered: Facebook, Twitter, Pinterest, Instagram, LinkedIn.
This Pixir tool accepts .psd files: pixlr.com/editor/
Hootsuite (not recommended but it will do in a pinch)
{{/markdown}}